/* ---- LIGHT (padrão) ---- */
:root {
    color-scheme: light dark;

    --filter-invert: none;

    /* Fundos */
    --bg-page:             #c5c6d2;
    --bg-body:             #f2f2f2;
    --bg-card:             #fcfcfc;
    --bg-section:          #fafafc;
    --bg-muted:            #f7f7f7;
    --bg-input:            #f5f5f5;
    --bg-subtle:           #eeeeee;
    --bg-skeleton:         #ededed;
    --bg-highlight:        #fdf8dc;
    --bg-input-hover:      #fff291;
    --bg-hover:            #f1f1f1;
    --bg-list-item:        #f8fbf6;
    --bg-notice:           #FFF2EF;
    --bg-success:          #D9EFC2;
    --bg-success-bright:   #9FEF68;
    --bg-danger:           #FF999A;
    --bg-nubank:           #f4e8fb;
    --bg-coupon-item:      #fffcf3;
    --bg-points-tooltip:   #ffe6bd;
    --bg-tooltip:          #737373;
    --bg-index-news:       rgba(240, 240, 240, 0.51);
    --bg-index-news-hover: rgba(227, 245, 235, 0.35);

    /* Bordas */
    --border-default:  #e8e8e8;
    --border-input:    #e9e9ee;
    --border-light:    #f4f4f4;
    --border-medium:   #d7d7d7;
    --border-strong:   #C7D4DA;
    --border-notice:   #FFD7CF;
    --border-danger:   #FF6666;
    --border-coupon:   #ffd7ad;
    --border-nubank:   #830ad2;

    /* Textos */
    --text-primary:     #000000;
    --text-secondary:   #333333;
    --text-muted:       #4f4f4f;
    --text-light:       #888888;
    --text-placeholder: #d6d6d6;
    --text-danger:      #970102;

    /* Scrollbar */
    --scrollbar-thumb: rgb(0, 118, 212);
    --scrollbar-track: #EFEEEF;

    /* Sombras */
    --shadow-color:  rgba(0, 0, 0, 0.2);
    --shadow-subtle: rgba(0, 0, 0, 0.05);

    /* Transparências sobre branco */
    --overlay-opacity:      0.5;
    --overlay-opacity-high: 0.85;
    --overlay-opacity-med:  0.7;
    --overlay-opacity-low:  0.35;

    /* Acentos cromáticos — mantidos iguais nos dois temas */
    --accent-blue:          #3483fa;
    --accent-blue-light:    #3b93ff;
    --accent-blue-dark:     #2968c8;
    --accent-blue-hover:    #2ba1ff;
    --accent-blue-deep:     #004fbd;
    --accent-green:         #00a650;
    --accent-green-dark:    #17a563;
    --accent-green-mid:     #1dbf73;
    --accent-green-deep:    #006400;
    --accent-green-forest:  #228b22;
    --accent-orange:        #ffa500;
    --accent-orange-hover:  #ea580c;
    --accent-orange-mid:    #f9902a;
    --accent-yellow:        #fbcb09;
    --accent-yellow-border: rgba(255, 207, 9, 0.9);
    --accent-yellow-bright: #f4f247;
    --accent-red:           #ff4b3b;
    --accent-red-light:     #ff7878;
    --accent-red-dark:      #c91100;
    --accent-purple:        #7873f5;
    --accent-pink:          #ec77ab;
    --accent-indigo:        #6961ec;
    --accent-indigo-dark:   #483fd4;
    --color-error-text:     #a62c24;
    --color-error-border:   #e57373;

    /* Gradiente do header (decorativo — igual nos dois temas) */
    --header-grad-1: rgba(253, 175, 30, 1) 0%;
    --header-grad-2: rgba(245, 235, 223, 1) 48%;
    --header-grad-3b: rgba(237, 232, 223, 1) 61%;
    --header-grad-3: rgba(255, 255, 255, 1) 100%;
    --logo-image: url(images/logo-tribo-g-light.png);
    --logo-image-footer: url(images/logo-tribo-g-footer-light.png) ;
    --logo-image-mobile: url(images/logo-tribo-g-mobile-light.png);
    --logo-header-login:  url(images/logo-tribo-g-footer-light.png);
    --grad-1: rgba(255, 255, 255, 1) 0%;
    --grad-2: rgba(251, 251, 251, 1) 24%;
    --grad-3: rgba(240, 240, 240, 1) 93%;


    /* Misc */
    --currency-gradient-start: #bdd4e7;
    --currency-gradient-end:   #8693ab;
    --currency-text-bg:        #9eb0c6;
    --row-selected-bg:         #4b86b4;
    --btn-disabled-bg:         #F1EFEC;
    --btn-disabled-border:     #D4C9BE;

    /* search */


    --search-bg:            #ffffff;
    --search-border:        #dee2e6;
    --search-text:          #212529;
    --search-placeholder:   #adb5bd;
    --search-icon:          #6c757d;
    --search-input-focus:   #80bdff;

    --overlay-bg:           #ffffff;
    --overlay-border:       #dee2e6;
    --overlay-shadow:       0 8px 32px rgba(0,0,0,.12);

    --item-hover-bg:        #f8f9fa;
    --item-nome-color:      #212529;
    --item-cat-color:       #6c757d;
    --item-icon-categoria:  #495057;
    --item-icon-produto:    #495057;

    --divider-color:        #dee2e6;
    --section-label-color:  #adb5bd;

    --toggle-bg:            #e9ecef;
    --toggle-icon-color:    #495057;
    --toggle-hover-bg:      #dee2e6;

    --backdrop-bg:          rgba(0,0,0,.3);
    --mobile-header-bg:     #ffffff;
    --mobile-close-color:   #495057;
    --mobile-close-hover:   #212529;

    --page-bg:              #f8f9fa;
    --card-bg:              #ffffff;
    --card-border:          #dee2e6;
    --placeholder-bg:       #e9ecef;
    --placeholder-icon:     #adb5bd;

    --bg-highlight-servers: #ced9e9;
    --accent-servers-border: #71aaff;

    --bg-news-h1: rgba(237, 236, 230, 1);
    --bg-news-article: #fafafa;

    --lang-switcher-bg: #ffffff;
    --lang-switcher-text: #1f2329;
    --lang-switcher-border: #d8dbe0;
    --lang-switcher-radius: 8px;
    --lang-switcher-hover-bg: #f3f4f6;
    --lang-switcher-active-text: #3552f0;
    --lang-switcher-shadow: 0 8px 24px rgba(20, 22, 30, 0.12);


}

/* ================================================================
   PURE BLACK DARK — via media query do sistema
   ================================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --filter-invert: invert(1) hue-rotate(180deg);

        /* Fundos — camadas de preto, do mais fundo ao mais elevado */
        --bg-page:             #000000;  /* fundo da página, atrás do body */
        --bg-body:             #0a0a0a;  /* body/container principal */
        --bg-card:             #111111;  /* cards, painéis */
        --bg-section:          #111111;  /* seções, sidebars */
        --bg-muted:            #1a1a1a;  /* áreas secundárias */
        --bg-input:            #222222;  /* inputs, selects */
        --bg-subtle:           #181818;  /* fundos muito sutis */
        --bg-skeleton:         #1f1f1f;  /* skeleton loader */
        --bg-highlight:        #040c08;  /* highlight amarelado */
        --bg-input-hover: #110700;  /* input hover (mantém tom quente) */
        --bg-hover:            #1f1f1f;  /* hover genérico */
        --bg-list-item:        #111111;  /* itens de lista */
        --bg-notice:           #2a0f08;  /* aviso/erro fundo */
        --bg-success:          #0a1f0d;  /* sucesso fundo */
        --bg-success-bright:   #0f2a10;  /* sucesso destaque */
        --bg-danger:           #2a0808;  /* perigo fundo */
        --bg-nubank:           #1a0830;  /* nubank fundo */
        --bg-coupon-item:      #06130d;  /* cupom fundo */
        --bg-points-tooltip:   #221800;  /* tooltip de pontos */
        --bg-tooltip:          #2a2a2a;  /* tooltip genérico */
        --bg-index-news:      #111111;
        --bg-index-news-hover: #222222;

        /* Bordas — tons de cinza escuro, sem saturação */
        --border-default:  #2a2a2a;  /* borda padrão */
        --border-input:    #333333;  /* borda de input */
        --border-light:    #1f1f1f;  /* borda mais suave */
        --border-medium:   #3a3a3a;  /* borda média */
        --border-strong:   #444444;  /* borda forte */
        --border-notice:   #5a2018;  /* borda de aviso */
        --border-danger:   #6a1818;  /* borda de erro */
        --border-coupon:   #22362c;  /* borda de cupom */
        --border-nubank:   #8020c0;  /* borda nubank */

        /* Textos — quase branco suavizado para não cansar */
        --text-primary:     #f0f0f0;  /* texto principal (não #fff puro) */
        --text-secondary:   #b0b0b0;  /* texto secundário */
        --text-muted:       #d2d2d2;  /* texto atenuado */
        --text-light:       #505050;  /* texto bem fraco */
        --text-placeholder: #3a3a3a;  /* placeholder */
        --text-danger:      #ff6060;  /* texto de erro */

        /* Scrollbar */
        --scrollbar-thumb: #3a3a3a;
        --scrollbar-track: #111111;

        /* Sombras — mais densas no preto */
        --shadow-color:  rgba(0, 0, 0, 0.7);
        --shadow-subtle: rgba(0, 0, 0, 0.3);

        /* Transparências sobre preto (valores baixos — overlay branco some no escuro) */
        --overlay-opacity:      0.08;
        --overlay-opacity-high: 0.15;
        --overlay-opacity-med:  0.1;
        --overlay-opacity-low:  0.05;

        --header-grad-1: rgba(36, 29, 25, 1) 0%;
        --header-grad-2: rgba(19, 17, 13, 1) 48%;
        --header-grad-3b: rgba(19, 17, 13, 1) 61%;
        --header-grad-3:  rgba(29, 29, 29, 1) 100%;
        --logo-image: url(images/logo-tribo-g-dark.png);
        --logo-image-footer: url(images/logo-tribo-g-footer-dark.png) ;
        --logo-image-mobile: url(images/logo-tribo-g-mobile-dark.png);
        --logo-header-login: url(images/logo-tribo-g-footer-dark.png);
        --grad-1: rgba(112, 109, 109, 1) 0%;
        --grad-2: rgba(48, 45, 45, 1) 24%;
        --grad-3: rgba(18, 17, 17, 1) 93%;

        /* Misc */
        --currency-gradient-start: #444444;
        --currency-gradient-end:   #0f0f0f;
        --currency-text-bg:        #1f1f1f;
        --row-selected-bg:         #0f2a50;
        --btn-disabled-bg:         #1a1a1a;
        --btn-disabled-border:     #2a2a2a;


        /* search */


        --search-bg:            #000000;
        --search-border:        #4e4f53;
        --search-text:          #f0f0f0;
        --search-placeholder:   #555555;
        --search-icon:          #777777;
        --search-input-focus:   #4d6ef5;

        --overlay-bg:           #0a0a0a;
        --overlay-border:       #222222;
        --overlay-shadow:       0 8px 32px rgba(0,0,0,.7);

        --item-hover-bg:        #111111;
        --item-nome-color:      #f0f0f0;
        --item-cat-color:       #777777;
        --item-icon-categoria:  #777777;
        --item-icon-produto:    #777777;

        --divider-color:        #222222;
        --section-label-color:  #444444;

        --toggle-bg:            #111111;
        --toggle-icon-color:    #777777;
        --toggle-hover-bg:      #222222;

        --backdrop-bg:          rgba(0,0,0,.8);
        --mobile-header-bg:     #000000;
        --mobile-close-color:   #777777;
        --mobile-close-hover:   #f0f0f0;

        --page-bg:              #000000;
        --card-bg:              #0a0a0a;
        --card-border:          #222222;
        --placeholder-bg:       #111111;
        --placeholder-icon:     #333333;

        --accent-yellow-border: #1c4f33;

        --bg-highlight-servers: #1d1008;
        --accent-servers-border: #bb6931;
        --accent-red-light: #ac1b0d;
        --accent-red: #c62617;

        --bg-news-h1: #1a1a1a;
        --bg-news-article: #111111;


    }
}

/* ================================================================
   PURE BLACK DARK — via toggle manual  [data-theme="dark"]
   (valores idênticos ao bloco acima)
   ================================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --filter-invert: invert(1) hue-rotate(180deg);

    --bg-page:             #000000;
    --bg-body:             #0a0a0a;
    --bg-card:             #111111;
    --bg-section:          #111111;
    --bg-muted:            #1a1a1a;
    --bg-input:            #222222;
    --bg-subtle:           #181818;
    --bg-skeleton:         #1f1f1f;
    --bg-highlight:        #040c08;
    --bg-input-hover:      #2a2200;
    --bg-hover:            #1f1f1f;
    --bg-list-item:        #111111;
    --bg-notice:           #2a0f08;
    --bg-success:          #0a1f0d;
    --bg-success-bright:   #0f2a10;
    --bg-danger:           #2a0808;
    --bg-nubank:           #1a0830;
    --bg-coupon-item:      #06130d;
    --bg-points-tooltip:   #221800;
    --bg-tooltip:          #2a2a2a;
    --bg-index-news:      #111111;
    --bg-index-news-hover: #222222;

    --border-default:  #2a2a2a;
    --border-input:    #333333;
    --border-light:    #1f1f1f;
    --border-medium:   #3a3a3a;
    --border-strong:   #444444;
    --border-notice:   #5a2018;
    --border-danger:   #6a1818;
    --border-coupon:   #22362c;
    --border-nubank:   #8020c0;

    --text-primary:     #f0f0f0;
    --text-secondary:   #b0b0b0;
    --text-muted:       #f2f2f2;
    --text-light:       #505050;
    --text-placeholder: #3a3a3a;
    --text-danger:      #ff6060;

    --scrollbar-thumb: #3a3a3a;
    --scrollbar-track: #111111;

    --shadow-color:  rgba(0, 0, 0, 0.7);
    --shadow-subtle: rgba(0, 0, 0, 0.3);

    --overlay-opacity:      0.08;
    --overlay-opacity-high: 0.15;
    --overlay-opacity-med:  0.1;
    --overlay-opacity-low:  0.05;

    --header-grad-1: rgba(36, 29, 25, 1) 0%;
    --header-grad-2: rgba(19, 17, 13, 1) 48%;
    --header-grad-3b: rgba(19, 17, 13, 1) 61%;
    --header-grad-3:  rgba(29, 29, 29, 1) 100%;
    --logo-image: url(images/logo-tribo-g-dark.png);
    --logo-image-footer: url(images/logo-tribo-g-footer-dark.png) ;
    --logo-image-mobile: url(images/logo-tribo-g-mobile-dark.png);
    --logo-header-login:  url(images/logo-tribo-g-footer-dark.png);
    --grad-1: rgba(112, 109, 109, 1) 0%;
    --grad-2: rgba(48, 45, 45, 1) 24%;
    --grad-3: rgba(18, 17, 17, 1) 93%;

    --currency-gradient-start: #444444;
    --currency-gradient-end:   #0f0f0f;
    --currency-text-bg:        #1f1f1f;
    --row-selected-bg:         #0f2a50;
    --btn-disabled-bg:         #1a1a1a;
    --btn-disabled-border:     #2a2a2a;


    /* search */

    --search-bg:            #000000;
    --search-border:        #222222;
    --search-text:          #f0f0f0;
    --search-placeholder:   #555555;
    --search-icon:          #777777;
    --search-input-focus:   #4d6ef5;

    --overlay-bg:           #0a0a0a;
    --overlay-border:       #222222;
    --overlay-shadow:       0 8px 32px rgba(0,0,0,.7);

    --item-hover-bg:        #111111;
    --item-nome-color:      #f0f0f0;
    --item-cat-color:       #777777;
    --item-icon-categoria:  #777777;
    --item-icon-produto:    #777777;

    --divider-color:        #222222;
    --section-label-color:  #444444;

    --toggle-bg:            #111111;
    --toggle-icon-color:    #777777;
    --toggle-hover-bg:      #222222;

    --backdrop-bg:          rgba(0,0,0,.8);
    --mobile-header-bg:     #000000;
    --mobile-close-color:   #777777;
    --mobile-close-hover:   #f0f0f0;

    --page-bg:              #000000;
    --card-bg:              #0a0a0a;
    --card-border:          #222222;
    --placeholder-bg:       #111111;
    --placeholder-icon:     #333333;

    --accent-yellow-border: #1c4f33;

    --bg-highlight-servers: #1d1008;
    --accent-servers-border: #bb6931;
    --accent-red-light: #ac1b0d;
    --accent-red: #c62617;

    --bg-news-h1: #1a1a1a;
    --bg-news-article: #111111;


}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


body, BODY {

    font-size:10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    overflow:hidden;
    overflow-y:scroll;
}

html {
    background-color: var(--bg-page);
    font-size: 62.5%;

}

* {
    box-sizing: border-box;
}
*, :focus {
    outline: none;
}

a:link, a:active, a:visited {
    color: var(--text-primary);
    text-decoration: none;
    font-size:12px;
}

a:hover {
    text-decoration: underline;
}

main {
    padding: 10px 20px;
}



/* ============================================================
   Base
============================================================ */
body {
    background: var(--page-bg);
    color: var(--item-nome-color);
    transition: background .2s;
}

/* ============================================================
   Input de busca
============================================================ */
.search-input-group {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color .2s, box-shadow .2s;
}

.search-input-group:focus-within {
    border-color: var(--search-input-focus);
    box-shadow: 0 0 0 3px rgba(128,189,255,.2);
}

.search-icon {
    color: var(--search-icon);
    margin-right: 8px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--search-text);
    font-size: 15px;
    padding: 10px 0;
    outline: none;
}

.search-input::placeholder { color: var(--search-placeholder); }

.search-clear {
    background: none;
    border: none;
    color: var(--search-icon);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: none;
    line-height: 1;
    font-size: 18px;
}

.search-clear:hover { color: var(--item-nome-color); }

/* Spinner */
.search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--search-border);
    border-top-color: var(--search-icon);
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0;
    display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Dark mode toggle
============================================================ */
.dark-mode-toggle {
    background: var(--toggle-bg);
    border: none;
    border-radius: 6px;
    color: var(--toggle-icon-color);
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
    transition: background .2s;
    flex-shrink: 0;
    margin-left: 30px;

}

.dark-mode-toggle svg {
    vertical-align: text-bottom;
}
.dark-mode-toggle:hover { background: var(--toggle-hover-bg); }

/* ============================================================
   Grid e itens de resultado (overlay e páginas)
============================================================ */
.results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

@media (max-width: 767px) {
    .results-grid { grid-template-columns: repeat(2, 1fr); }
}

.result-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
    cursor: pointer;
}

.result-item:hover,
.result-item:active {
    background: var(--item-hover-bg);
    text-decoration: none;
}

.result-item-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--item-icon-produto);
}

.result-item-icon.is-categoria { color: var(--item-icon-categoria); }

.result-item-text { overflow: hidden; }

.result-item-nome {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--item-nome-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-item-cat {
    display: block;
    font-size: 11px;
    color: var(--item-cat-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* ============================================================
   Divider de seção
============================================================ */
.results-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 6px;
}

.results-divider span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--section-label-color);
    white-space: nowrap;
}

.results-divider::before,
.results-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--divider-color);
}

/* ============================================================
   Header das páginas de busca/categorias
============================================================ */
.results-header {
    background: var(--bg-body);
    border-bottom: 1px solid var(--overlay-border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.results-logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--item-nome-color);
    white-space: nowrap;
    text-decoration: none;
}

.results-logo:hover { text-decoration: none; color: var(--item-nome-color); }

/* ============================================================
   Empty / estado vazio
============================================================ */
.overlay-state {
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--item-cat-color);
}

.overlay-state svg {
    display: block;
    margin: 0 auto 8px;
    opacity: .4;
}


#bodywrapper, #bodywrapper-login {

    margin:auto;
    padding:  0;
    max-width:  1200px;
    color:  var(--text-primary);
    position: relative;
    border-left:1px solid var(--border-default);
    border-right:1px solid var(--border-default);

}

#bodywrapper-login {
    max-width:  430px;
    border-radius: 10px;
    background-color: var(--bg-body);
    padding-bottom:10px;
    margin-top: 150px;
    border: 1px solid var(--border-default);


}

#bodywrapper-bg-default {
    width:100%;
    height:100%;
}

#bodywrapper-bg-sides {
    /*
    background: url(images/background-sides-bg.png) repeat-x;
    */
    width:100%;
    height:844px;
    top:0;
    z-index:0;
    position:absolute;
}


#bodywrapper:before  {
    box-shadow: -20px 0 20px -20px var(--shadow-color) inset;
    content: " ";
    height: 100%;
    left: -20px;
    position: absolute;
    top: 0;
    width: 20px;
}

#bodywrapper:after {
    box-shadow: 20px 0 20px -20px var(--shadow-color) inset;
    content: " ";
    height: 100%;
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
}


/* scrollbar on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* scrollbar on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 20px;
    border: 1px solid silver;
}


#header {
    max-width:1200px;
    height:75px;
    background-image:
            var(--logo-image),
            linear-gradient(to right bottom, var(--header-grad-1), var(--header-grad-2), var(--header-grad-3b), var(--header-grad-3), var(--accent-orange));
    background-repeat: no-repeat, no-repeat;

}

#header-login {
    max-width:430px;
    height:60px;
    background-image: var(--logo-header-login),
    linear-gradient(to right bottom, var(--header-grad-1), var(--header-grad-2), var(--header-grad-3b), var(--header-grad-3), var(--accent-orange));
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--border-default);
    border-top-right-radius:10px ;
    border-top-left-radius: 10px;
}

#header-login > a {
    display: block;
    max-width:430px;
    height:75px;
}



a#main:active, a#main:link, a#main:visited {
    display: block;
    float: left;
    width: 290px;
    height: 60px;
    margin-left: 60px;
}

#container1 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-body);
}


#loginacc {
    float: right;
    display: inline-block;
    margin: 12px 20px;
    box-sizing: border-box;

}


.caret-down, .caret-down-lang {
    width: 0;
    height: 0;
    display: inline-block;
    border: 4px solid transparent;
    border-top-color: var(--border-strong);
    vertical-align: middle;
    margin: 4px 0 0 2px;
}
.caret-down-lang {
    border-top-color: var(--border-default);
    margin: 12px 3px 0 3px;
}
#language-box {
    float: right;
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 23px 0 13px 0;
    box-sizing: border-box;

}
#language-select {
    display: flex;
    box-sizing: border-box;
    background: rgba(255,255,255,var(--overlay-opacity-med));
    border-radius: 10px;
    padding-right: 3px;
}
.language-image {
    width: 25px;
    height: 25px;
}
.language-menudown {
    position: absolute;
    background-color: var(--bg-muted);
    box-shadow: 0 8px 16px 0 var(--shadow-color);
    z-index: 1;
    display: none;
    top:50px;
    min-width: 138px;
    border:none;
    margin-left: -95px;
    /*

	right: 114px;


    */
}

.language-menudown a {
    text-decoration: none;
    display: block;
    font-size: 12px;
    border-bottom:1px solid #dbdbdb;
    padding:4px 6px;
}
.language-menudown a img {
    vertical-align: middle;
    margin-right: 6px;
}

.language-menudown a:hover {
    color: var(--text-secondary);
    background-color: var(--bg-hover);
    text-decoration: none;
}

/* Show the navdown menu on hover */
#language-box:hover .language-menudown {
    display: block;

}
.review-main-title {
    margin-top: 20px;
    padding-top: 20px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-light);

}
.review-main-title > span {
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    margin-left: 20px;
}
.review-flex {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.review-box {
    width: 350px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    padding: 20px;
    margin: 10px 15px;
    background-image:linear-gradient(170deg,var(--grad-1), var(--grad-2), var(--grad-3));
}
.review-title {
    font-size: 18px;
    text-align: left;
}
.review-text {
    font-size: 16px;
    text-align: left;
    padding: 4px 0 ;
}
.review-from {
    padding-top: 13px;
    text-align: left;

}
.review-date {
    font-size: 10px;
    text-align: left;
    padding-top: 5px;
}
.review-title img {
    float: right;
    padding: 4px 0 0 4px;
}

#footer	{
    display: flex;
    flex-direction: row;
    margin-top: 50px;
    padding:15px;
    border-top:1px solid var(--placeholder-bg);
    background-color: var(--bg-muted);
    font-size: 12px;
    box-sizing: border-box;
}

#footer	 a:hover {
    text-decoration: none;
}

.footer-col {
    flex: 25%;
}

.footer-row {
    font-size: 12px;
    text-align: center;
    background-color: var(--bg-muted);
    padding-bottom: 15px;

}
.footer-row img {
    filter: var(--filter-invert);
    vertical-align: middle;
    margin-top: -1px;
    width: auto;
    height: auto;

}

.logo-footer {
    margin: 20px 10px;
    background: var(--logo-image-footer);
    width: 205px;
    height: 55px;
}


.footer-row a:link, .footer-row a:visited, .footer-row a:active {
    font-size: 12px;
}


.footer-col ul {
    margin:0;
    padding:0;
    list-style:none;
}

.footer-col li a:link , .footer-col li a:active, .footer-col li a:visited  {
    line-height:18px;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
}

.footer-col .review {
    width: 169px;
    padding: 10px;
    border:1px solid #e6e7e6;
    border-radius: 5px;
    background-color: var(--bg-body);
}

.footer-col .titulo {
    font-size: 14px;
    padding: 10px 0;
    font-weight: bold;
}
.footer-col .redes {

}
.redes {
    margin-top: 10px;
}

.redes a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.redes img, .review-title img {
    filter: var(--filter-invert);
    margin-bottom: 5px;
}

/*
 Login butns
*/


.balance-info, .referrer_paid {
    display: flex;

}
.balance-info {
    border-radius:14px;
    background:#ffffff08;
    border:1px solid #ffffff1a;

}

.balance-info, .balance-info-saque, .referrer_paid {
    width: 33%;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 10px;

}

.wrapper {
    background-color: var(--bg-section);
    list-style-type: none;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    margin: 0;
}
.form-row {
    display: flex;
    justify-content: flex-end;
    padding: .5em;
    font-size: 110%;

}
.form-row-error {
    text-align: right;
    padding: 0 10px 10px 0;
    color: var(--color-error-text);

}
.form-row-hide {
    display: none !important;
}

.form-row > label {
    padding: .5em 1em .5em 0;
    flex: 40%;
    text-align: right;
}
.form-row > input {
    flex: 60%;
    height: 30px;
}

.form-row > .flexdate {
    flex: auto;
    width: 10px;
}
.form-row > .form-center {
    flex: 100%;
    font-size: 14px;
    padding: .5em 1em .5em 0;
    text-align: center;
}
.form-row > .form-center-small {
    flex: 100%;
    font-size: 9px;
    text-align: center;
    justify-content: center;
}
.form-center-captcha {
    margin-left: 45px;
}

.form-row > input, .form-row > label, input#phone   {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

.form-row > input, input#phone  {
    background-color: var(--bg-input);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    color: var(--text-secondary);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

input#phone, .iti__search-input  {
    height: 35px;
    margin: 0;
    padding: 6px 12px;
}


.form-row > input:hover, input#phone:hover  {
    background-color: var(--bg-body)291;
}
.form-row > .border-red, input.border-red {
    border-color: var(--color-error-border) !important;
    box-shadow: 0 0 5px rgba(229, 115, 115, 0.5);
}


.form-row > input,
.form-row > button {
    padding: .5em;
}
.form-row > button {
    margin:15px 0;
    height: 36px;

}

.form-row > #token {
    font-size: 170%;
    text-align: center;
    letter-spacing: 5px;
    height: 40px;

}

a.token_change_cel:link, a.token_change_cel:hover, a.token_change_cel:active, a.token_change_cel:visited {
    font-size: 9px !important;
    padding-top: 2px;
}

.form-row > .text  {
    justify-content: flex-end;
    font-size: 12px;

}
.text-join {
    font-size: 14px;
    padding: 15px;

}

.referrer_share {
    width: 25%;
    text-align: left;
    font-size: 14px;
    margin-right: 15px;
    padding: 10px;
    border-radius: 5px;
    background-color: #c67700;
    background-image: radial-gradient( circle 708px at 0% 3.4%,  rgba(254,216,7,1) 14.5%, rgba(249,69,28,1) 71.8% );
}
.referrer_link_box {
    display: flex;
    width: 75%;
}

.referrer_link {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--accent-purple);
    background-image: linear-gradient(to right, var(--accent-pink) 0%, var(--accent-purple) 100%);
    overflow: hidden;
    text-overflow: clip;


}
.referrer_share_box {
    width: 100%;
    color: #000;

}
.referrer_balance {
    display: flex;
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    background: linear-gradient(0deg,rgba(121, 193, 224, 1) 0%, rgba(90, 154, 221, 1) 8%, rgba(59, 115, 219, 1) 37%, rgba(45, 101, 186, 1) 100%);
  /*  background-image: linear-gradient( 72.1deg,  rgba(45,116,213,1) 1.7%, rgba(100,149,237,1) 99.1% );*/


}

.referrer_top, .referrer_top div {
    display: flex;

}
.referrer_select {
    display: flex;

}
.referrer_text {
    display: flex;
    font-size: 12px;
    width: 25%;
    text-align: left;
    align-items: center;
    padding: 4px;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    color: #0a0a0a;

}
.referrer_total {
    background: rgba(255,255,255,0.3);
    padding: 4px 10px;
    border-radius: 5px;
    width: 100%;
    margin-top: 5px;
    font-size: 12px;


}
#plugin-area {
    position: absolute;
    width: 275px;
    margin-left: 18%;
    margin-top: -10px;
}

.link_me {
    white-space: nowrap;
    margin: 5px;
    padding: 8px 15px;
    display: flex;
    width: 90%;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

}



.blink_me {
    color: var(--text-primary);
    background: rgba(255,255,255,var(--overlay-opacity-high));;
    animation: blink 1s ease-in-out 1;
    border-radius: 5px;
}

.button-wrap {
    text-align: right;
}

.button-wrap .modalbt {
    margin-left: 10px;
}

.button-wrap .small {
    background: white !important;
    color: var(--accent-blue) !important;
    font-size: 12px !important;
}

.pageHeadingModal {
    font-size:170%;
    font-weight: bold;
    padding-bottom: 10px;
    padding-left: 10px;
}

.modalbt, .modalbt:link, .modalbt:visited, .modalbt:active {
    cursor: pointer;
    height: 46px;
    line-height: 44px;
    padding: 0 20px;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    text-decoration: none !important;
    outline: none;
    vertical-align: middle;
    font-weight: bold;
    transition: all 250ms ease-in-out;
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    color: #FFF;
    font-size: 14px;
    white-space: nowrap;

}
.modalbt:hover, .modalbt-info-blue:hover {
    background: var(--accent-blue-hover);
    border: 1px solid var(--accent-blue-dark);
    color: #FFF;
}
.modalbt-info {
    white-space: nowrap;
    font-size: 12px;
    margin: 5px 0;
    padding-left: 10px;
    padding-right: 10px;
    height: 36px;
    line-height: 32px;

    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    text-decoration: none !important;
    outline: none;
    vertical-align: middle;
    font-weight: bold;
    transition: all 250ms ease-in-out;
}
.modalbt-info-blue {
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    color: #FFF;

}
.modalbt-info-share:active, .modalbt-info-share:visited, .modalbt-info-share:link {
    background: var(--accent-indigo);
    border: 1px solid #b575ce;
    color: #f2f2f2;
    font-weight: normal;
    font-size: 10px;
    height: 30px;
    line-height: 26px;
    box-sizing: border-box;
}
.modalbt-info-share:hover {
    background-color: var(--accent-indigo-dark);
}
.modalbt-info-yellow {
    border: 1px solid var(--accent-yellow-bright);
    color: #000;
    background: #ffd630 ;

}
.modalbt-info-yellow:hover {
    border: 1px solid var(--accent-yellow-bright);
    color: var(--text-primary);
    background: #ffea00;
}

.modalbt-disabled {
    background: var(--btn-disabled-bg) !important;
    border: 1px solid var(--btn-disabled-border) !important;
    color: var(--text-primary) !important;
    pointer-events: none !important;

}

.loading {
    width: 40px;
    height: 40px;
    border: 5px solid var(--border-medium);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.checkmark {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 3px solid green;
    border-radius: 50%;
    position: relative;
    margin: 20px;

}

.checkmark::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 8px;
    width: 8px;
    height: 14px;
    border: solid green;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.xmark {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 3px solid red;
    border-radius: 50%;
    position: relative;
    margin: 20px;
}

.xmark::before,
.xmark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 3px;
    background-color: red;
    transform-origin: center;
}

.xmark::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.xmark::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#retry_sms, .countdown_text, .countdown {
    display: inline-block;
}

::placeholder {
    color: var(--text-placeholder);
}

.form-notice {
    display: flex;
    font-size: 115%;
    text-align: center;
    padding: 8px;
    background: var(--bg-body)2EF;
    border: 1px solid var(--border-notice);
    box-sizing: border-box;
}

.form-notice-info {
    font-size: 125%;
    padding:8px;
    background:var(--bg-body)2EF;
    border:1px solid var(--border-notice);
    box-sizing: border-box;
}

.form-notice-info p {
    margin-bottom: 10px;
}

.loginBtn > a:link, .loginBtn > a:active, .loginBtn > a:visited  {

    flex: 100%;
    border-radius: 5px;
    height: 36px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    box-sizing: border-box;

    align-items: center;
    background:var(--border-medium);
    border:1px solid var(--border-medium);
    font-size: 18px;
    color: var(--text-secondary);
}

.loginBtn > a:hover  {
    text-decoration: none;
    background: var(--text-muted);
    color: var(--bg-body);
}

#srv_cats {
    height: 100px;
    overflow-y: auto;
    transition: height 0.5s ease; /* smooth animation */
}


#srv_cats ul {
    margin:0;
    padding:0;
    list-style:none;
}

#srv_cats li  {
    display:block;
    float:left;

}
#srv_cats .btnServer {
    display:block;
    cursor: pointer;
    color: var(--text-primary);
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size:14px;
    margin:4px;
    padding:12px;
    line-height:18px;
    text-align:center;
    text-decoration:none;
    border-radius: 5px;
    background:var(--bg-muted);
    border:1px solid var(--border-default);
    font-weight: normal;

}
#srv_cats .btnServer:hover, .btnServerActive  {
    background: var(--bg-highlight-servers) !important ;
    border:1px solid var(--accent-servers-border) !important;
}




#bread {
    color:var(--text-placeholder);
    padding:10px;
    line-height: 18px;
}

#bread a:link, #bread a:active, #bread a:visited {
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    text-transform:lowercase;
    margin:0;
    padding:0;
}

ul#newslatll {
    margin:0;
    padding:0;
    border-top:1px solid var(--border-strong);
    list-style:none;
}

ul#newslatll li a {
    display:block;
    float:left;
    width:100%;
    letter-spacing:.1em;
    padding:4px 0 4px 22px;
    background:var(--bg-list-item) url(images/frontpage-arrow.png) 5px 5px no-repeat ;
    border-bottom:1px solid var(--border-strong);
    border-left:1px solid var(--border-strong);
    border-right:1px solid var(--border-strong);
    text-align:left;
    font-size:9px;
}
ul#newslatll li a:hover {
    background:var(--accent-orange-mid) url(images/frontpage-arrow.png) 5px 5px no-repeat ;
    color:var(--bg-body);
    text-decoration:none;

}


ul#newsll {
    margin:0;
    padding:0;
    border-top:1px solid var(--border-strong);
    list-style:none;
}

ul#newsll li a {
    display:block;
    float:left;
    width:622px;
    letter-spacing:.1em;
    padding:4px 0 4px 22px;
    background:var(--bg-list-item) url(images/frontpage-arrow.png) 5px 5px no-repeat ;
    border-bottom:1px solid var(--border-strong);
    border-left:1px solid var(--border-strong);
    border-right:1px solid var(--border-strong);
    text-align:left;
    font-size:9px;
}
ul#newsll li a:hover {
    background:var(--accent-orange-mid) url(images/frontpage-arrow.png) 5px 5px no-repeat ;
    color:var(--bg-body);
    text-decoration:none;

}

ul#newsll li h1 {
    font-size:12px;
    font-weight:normal;
    padding:0px;
    margin:0px;
    letter-spacing:.1em;
    float:left;

}

.newsdate {
    float:right;
    margin-right:10px;
}



/*

NAVIGATION

*/

.navbtn {
    color: var(--text-secondary);
    cursor: pointer;
    height: 30px;
    background-color: var(--bg-muted);
    border-radius: 5px;
    border:1px solid var(--bg-muted);
    padding: 0px 10px;
    display: inline-block;
    margin:10px;
    box-sizing: border-box;
}

.navbtn:hover, .show-more:hover {
    background: var(--bg-highlight);
    border: 1px solid var(--accent-yellow-border);
}

.servers-list {
    display: inline-block;
    width: 100%;
}
.hide-more {
    max-height: 110px;
    overflow: hidden;
}
.show-more {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    padding: 5px 10px;
    margin-left: 20px;
    cursor: pointer;
    background-color: var(--bg-muted);
    border-radius: 5px;
   /* border:1px solid var(--accent-servers-border);*/
    color: var(--text-primary);
    border: 1px solid var(--accent-yellow-border);

}

.show-hidden {
    display: none;
}



.order-promo, .order-review {
    display: flex;
    width: 100%;

}
.order-review .ref-bg {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;   /* centraliza verticalmente */
    gap: 6px;
    justify-content: center;
    border: 1px solid var(--accent-green-dark);
    background: var(--accent-green-mid) !important;
    transition: background 0.25s ease;
    color: #f2f2f2 !important;
}

.order-review a.ref-bg:hover {
    background: var(--accent-green-dark) !important;
    text-decoration: none;
}


.order-review .ref-bg svg {
    display: block;
}

.order-promo .ref-bg {
    width: 100%;
    margin: 20px 0 10px 0 ;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}
.nav-add-credit a:link, .nav-add-credit a:visited, .nav-add-credit a:active  {
    display: block !important;
    float: left !important;
    padding: 0 0 0 12px !important;
    width: 58% !important;
    margin: -30px 10px 0 18px;
    font-size: 95%;
    border-radius: 5px;
    border: 1px solid var(--border-default) ;
    background-color: var(--border-default);
    color: black;
}
.nav-add-credit a:hover {
    background-color: var(--accent-blue) !important;
    color: var(--bg-body) !important;
}

.nav-add-img img {
    vertical-align: text-bottom;
    margin-right: 3px;
}

.nav-balance {
    flex-direction: column;
}
.nav-balance-btn {
    height: 65px;
}
.server-val  {
    float: right;
}


.server-points-img-menu {
    padding:4px 5px 0 5px;
    line-height: 15px;
}
.server-points-img-menu img {
    vertical-align: middle;
    margin-right: 5px;
}

.logout-img-menu {
    padding: 1px 4px 0 0;
    float: left;


}


#srv_cats_search_wrap {
    position: relative;
    display: inline-block;
    margin: 0 20px 5px 20px;
}
#srv_cats_search_icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

#srv_cats_search {
    padding: 5px 0;
    padding-left: 30px;
    padding-right: 24px;
    width: 150px;
    color: var(--text-primary);
    background: var(--search-bg);
    border: 1px solid var(--overlay-border);
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;


}
#srv_cats_search:focus {
    border: 1px solid var(--search-input-focus);

}
#srv_cats_not_found {
    padding: 20px 10px;
    font-size: 12px;
}
#srv_cats_search_clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: none;
    padding: 0;
    color: var(--text-primary);

}


.ref-h1 {
    border-radius: 5px;
    box-sizing: border-box;
    padding: 15px 20px;
    color: var(--bg-body) !important;
    background-color: var(--accent-purple);
    background-image: linear-gradient(to right, var(--accent-pink) 0%, var(--accent-purple) 100%);

}

.ref-bg {
    color: #f2f2f2 !important;
    background: linear-gradient(to right, var(--accent-pink) 0%, var(--accent-purple) 100%);
    background-size: 150% auto;
    background-position: left center;
    transition: background-position 0.4s ease-in-out;

}
a.ref-bg:hover {
    background-position: right center;
    text-decoration: none;
}

.reward-bg  {
    color: var(--accent-blue-light) !important;
}



.pagerror, .pagerror_lite {
    padding:15px 10px 15px 95px;
    border:1px solid var(--bg-subtle);
    border-radius: 5px;
    font-size:12px;
    margin:10px auto 10px auto;
    background:var(--bg-body) url(images/Attention2.png) 2% center no-repeat;
    box-sizing: border-box;
}

.pagerror_lite {
    padding:15px 10px 15px 90px;
    border:1px solid var(--bg-subtle);
    border-radius: 5px;
    font-size:12px;
    line-height:16px;
    font-weight:normal;
    text-align:left;
    letter-spacing:normal;
    width:80%;
}

.pagtxt {
    padding:15px 10px 15px 120px;
    border:1px solid var(--border-strong);
    font-size:12px;
    margin:10px auto 10px auto;
    background:var(--bg-success) url(images/success.png) 4% center no-repeat;
    box-sizing: border-box;
}
.pagseguro {
    text-align:center;
    padding:15px 10px 15px 10px;
    /*	border:1px solid #B2D68C;*/
    width:89%;
    font-weight:bold;
    font-size:12px;
    line-height:30px;
    margin:10px auto 10px auto;
    /*	background:var(--bg-success);		*/
}
.pagupdate {
    text-align:center;
    padding:15px 40px 15px 40px;
    width:89%;
    font-weight:bold;
    font-size:12px;
    line-height:30px;
    margin:10px auto 10px auto;
    background:var(--bg-success);
    border:1px solid var(--border-notice);
}
.paypal_aviso {

    background:var(--bg-body)2EF;
    border:1px solid var(--border-notice);
    margin:10px;
    padding: 100px 15px;
    font-size: 14px;
    font-weight: bold;
}


.pagboleto {
    width:95%;
    margin:5px auto 5px auto;
    padding:5px;
    background:var(--bg-body);
    border:1px solid #CCC;
    font-weight:normal;
    font-size:10px;
    line-height:normal;

}
.pagbanco {
    padding:15px 10px;
    border:1px solid var(--bg-subtle);
    border-radius: 5px;
    font-size:14px;
    letter-spacing:.02em;
    line-height:16px;
    margin:10px auto 10px auto;
    background:var(--bg-section);
    box-sizing: border-box;
}

.pagprazo {
    padding:15px 10px 15px 90px;
    border:1px solid var(--bg-section);
    font-size:11px;
    border-radius: 5px;
    line-height:16px;
    font-weight:normal;
    text-align:left;
    letter-spacing:normal;
    width:80%;
    margin:10px auto 10px auto;
    background:var(--bg-body) url(images/pag-prazo.png) 4% center no-repeat;
    box-sizing: border-box;
}

.pagnotice {
    padding:2px;
    margin-top:15px;
    width:140px;
}

.pagprazobig {
    padding:15px 10px 15px 90px;
    border:1px solid #ff9600;
    font-size:12px;
    line-height:19px;
    width:80%;
    margin:10px auto 10px auto;
    background:var(--bg-points-tooltip) url(images/pag-prazo.png) 2% center no-repeat;
    box-sizing: border-box;
}

.pagsucesso {
    padding:15px 10px 15px 90px;
    border:1px solid #1D8200;
    font-size:12px;
    width:80%;
    margin:10px auto 10px auto;
    background:var(--bg-success-bright) url(images/icoSucesso.png) 2% center no-repeat;
    box-sizing: border-box;
}

.pagcounter {
    font-size:12px;
    font-weight:bold;
    background:var(--bg-success);
    border:none;
    text-align:center;
    color:var(--bg-success);
}


/*     services css    */

#hit {
    margin: 10px 0 30px 0;

}
#preloader {
    display: flex;
    flex: 100%;
    justify-content: center;
    align-items: center;
    height: 300px;
}



#hitAlert, .jserror {
    font-size:12px;
}


/* loading skeleton */

.hit-skeleton {
    width: 100%;
    background-color: var(--bg-body);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, .12);
}

.hit-skeleton-button {
    height: 60px;
    border-radius: 5px;
    margin-top: 35px;
    margin-bottom: 150px;
}

.hit-skeleton-button img {
    display: block;
    width: 100%;
    height: inherit;
    object-fit: cover;
}

.hit-skeleton-content {
    padding: 10px 15px;
}

.hit-skeleton-title, .hit-skeleton-odd, .hit-skeleton-text {
    display: block;
    margin: 10px 15px;
    border-radius: 5px;
}

.hit-skeleton-loading .hit-skeleton-button ,
.hit-skeleton-loading .hit-skeleton-title, .hit-skeleton-loading .hit-skeleton-odd, .hit-skeleton-loading .hit-skeleton-text  {
    background-color: var(--bg-skeleton);
    background: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255,255,255,var(--overlay-opacity)) 50%,
            rgba(255, 255, 255, 0) 60%
    ) var(--bg-skeleton);
    background-size: 200% 100%;
    background-position-x: 180%;
    animation: 1s hit-skeleton-loading ease-in-out infinite;
}

.hit-skeleton-loading .hit-skeleton-title {
    height: 55px;
    margin: 10px 5px;
}
.hit-skeleton-loading .hit-skeleton-odd {
    height: 55px;
    width: 140px;
    margin: 15px auto;
}
.hit-skeleton-loading .hit-skeleton-text {
    height: 30px;
    margin: 10px 15px;
}
@keyframes hit-skeleton-loading {
    to {
        background-position-x: -200%;
    }
}

select#server { width:210px; }

.srv-remarks {
    width:90%;
    padding:15px;
    margin:auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:12px;



}


#quantidade {

    margin-top: 10px;
    box-sizing: border-box;

    display: flex;
    justify-content:center;
    margin-bottom: 15px;

}

.quantidade-minus, .quantidade-plus {
    display: flex;
    cursor: pointer;
    align-items: center;
    box-sizing: border-box;
    background:var(--bg-body);
    border:1px solid var(--bg-body);

}
.quantidade-minus {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top:1px solid var(--border-input);
    border-left:1px solid var(--border-input);
    border-bottom:1px solid var(--border-input);
    padding-left: 4px;
}

.quantidade-plus {
    border-top:1px solid var(--border-input);
    border-right:1px solid var(--border-input);
    border-bottom:1px solid var(--border-input);
    padding-right: 4px;
}

#server-odd {
    color: var(--text-primary);
    font-size: 22px;
    width: 115px;
    box-sizing: border-box;
    text-align: center;
    border:1px solid var(--bg-body);
    border-top:1px solid var(--border-input);
    border-bottom:1px solid var(--border-input);
    line-height: 50px;
    background:var(--bg-body);
    padding: 5px 10px;

}

#server-odd:focus, #server-odd:hover {

    border-bottom:1px solid #96a6bc;

}
#server-odd:hover+.quantidade-plus {

}
#server-odd:hover > .quantidade-minus {

}

.currency {
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    box-sizing: border-box;
    color: #f0f0f0;
    border-left: none;
    padding: 0 10px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--currency-gradient-start);
    background-image: linear-gradient(315deg, var(--currency-gradient-start) 0%, var(--currency-gradient-end) 74%);
}

.currency-text {
    display: none;
    text-align: center;
    position: absolute;
    margin: 60px 0 0 0;
    background-color: var(--currency-text-bg);
    box-sizing: border-box;
    padding: 10px;
    color: #f0f0f0;
    z-index: 7;
    width: 225px;
    font-size: 12px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid var(--border-default);

}
.currency:hover+.currency-text {
    display: inline-block;
}

#srv-name {
    padding:10px;
    box-sizing: border-box;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-color: var(--bg-section);
    border-bottom: 1px solid var(--border-default);
    font-weight: bold;

}

.odd-name {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2px;
    color: var(--text-light);
    border-radius: 3px;
    line-height: 15px;
    background-color: var(--bg-section);
}

.server-unit {
    font-style: italic;
    color: var(--text-light);
}
.server-points {
    color: var(--text-secondary);
    font-size: 14px !important;
}



.server-points-img, .nubank {
    padding: 0 5px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.nubank {
    border-radius: 5px;
    font-size: 10px;
    padding: 4px;
    border:1px solid var(--border-nubank);
    background-color: var(--bg-nubank);

}

.points-text, .nubank-text {
    display: none;
    text-align: left;
    position: absolute;
    margin: 30px 3px 0 0;
    background-color: var(--bg-points-tooltip);
    box-sizing: border-box;
    padding: 10px;
    box-shadow: 0px 8px 8px 0px var(--shadow-color);
    z-index: 5;
    width: 260px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid var(--border-default);
}
.nubank-text {
    border:1px solid var(--border-nubank);
    background-color: var(--bg-nubank);
    left: 40px;
}
.server-points-img:hover+.points-text, .nubank:hover+.nubank-text {
    display: inline-block;
}


.server-remarks, .coupon, .server-remarks-white {
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    font-size: 18px;
    background-color: var(--bg-section);
    border-bottom: 1px solid var(--border-default);

}
.server-remarks-white {
    background-color: var(--bg-body);
    padding: 5px 10px;
    border-bottom: none;
}
.server-remarks-now {
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.server-lang, .server-lang-white, .server-lang-min {
    margin: 5px 0 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex: 100%;
    font-size: 14px;
    color: var(--text-primary);

}
.server-lang-min {
    flex: 60%;
    font-size: 12px !important;

}
.server-lang-white {
    color: var(--text-muted);
    font-size: 12px;

}
.server-price {
    margin: 5px;
    display: flex;
    justify-content: flex-end;

}


.server-unit, .server-points, .server-text-now {
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    flex: 50%;
    margin: 5px;
}
.server-text-now {
    color: var(--text-muted);

}

.cash-display, .server-display {
    flex: 90%;
    box-sizing: border-box;
    padding: 4px;
    background: var(--border-default);
    border-radius: 10px;
}

.server-list-delivery-type {
    padding: 4px 10px;
    justify-content:space-between;
    align-items: center;

}

.server-delivery-type, .server-odd, .server-info {
    border-radius: 10px;
    padding: 4px;
    margin: 4px 0;
    background:var(--bg-section);
}
.char-format {
    font-family:"Courier New", Courier, monospace;
    letter-spacing:2px;
    font-size: 14px !important;

}

.cash-remarks, .cash-remarks-code, .cash-remarks-pin, .cash-remarks-pin-title, .server-delivery-type, .server-char-info, .server-odd, .server-list-delivery-type  {
    display: flex;
    box-sizing: border-box;
    font-size: 18px;
}
.server-delivery-type-bg {
  /*  border:1px solid #b0b0b0 !important;*/
}
.server-info {
    flex-direction: column;
    padding: 8px;
}
.server-delivery-type {
    justify-content:space-between;
    align-items: center;
    padding: 8px;

}
.server-delivery-text{
    font-size: 12px;
    color: var(--text-secondary);

}
.server-delivery-imgtext{
    font-size: 12px;

}
.server-delivery-content, .server-list-delivery-content {
    display: flex;
    border-radius: 10px;
    padding: 2px;
}
.server-delivery-content:hover {
    background: var(--border-medium);
}


.server-charname {
    display: flex;
    width: 30%;
    flex-direction: column;
    border-radius: 10px;
    padding: 8px;
    background:var(--bg-section);
    border:1px solid var(--border-medium);
}
.server-info, .server-charname, .server-delivery-type  {
    border: 1px solid var(--border-medium);
}
.server-charname-margin {
    margin-right: 4px;
    width: 70%;

}
.server-charname-text {
    font-size: 11px;
    padding-bottom: 4px;
    color: var(--text-secondary);

}
.server-charname-data {
    font-size: 12px;
    text-align: right;
}
.server-delivery-imgtext  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 11px;
}
.server-delivery-imgtext div {
    padding: 4px;
}
.server-delivery-type-info  {
    color: #fff;
    padding: 6px;
    margin: 0 2px;
    font-size: 12px;
    background: var(--bg-tooltip);
    border-radius: 8px;
    cursor: pointer;
}

.server-list-delivery-type-info {
    padding: 10px 16px;
    margin: 0 6px;
    font-size: 12px;
    background: var(--bg-section);
    border-radius: 5px;
    border:1px solid var(--border-default);
}
.server-delivery-type-desc {
    display: none;
    text-align: left;
    position: absolute;
    margin: 30px 3px 0 -30px;
    color: #f2f2f2;
    background-color: var(--bg-tooltip);
    box-sizing: border-box;
    padding: 8px;
    box-shadow: 0px 8px 8px 0px var(--shadow-color);
    z-index: 5;
    width: 150px;
    font-size: 10px;
    border-radius: 5px;
}


.server-delivery-type-info:hover+.server-delivery-type-desc {
    display: inline-block;
}
.cash-remarks-pin, .cash-remarks-pin-title  {
    padding: 5px;
}
.cash-remarks {
    padding: 4px;
    background:var(--bg-highlight);
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}


.cash-remarks-code {
    background-color: var(--bg-subtle);
    border-bottom: 1px solid var(--border-default);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-direction: column;
    padding: 4px;
}

.cash-remarks-pin, .cash-remarks-pin-title {
    background-color: var(--bg-body);
    flex-direction: row;
}
.cash-remarks-pin-title {
    background-color: var(--bg-section);
    border-bottom: 1px solid var(--border-default);
    padding: 2px;

}
.cash-pin {
    font-size: 10px;
    padding: 4px;
    word-wrap: break-word;
    word-break: break-all;
    text-align: center;
    flex-grow: 1;
}
.cash-pin p {
    margin: 2px 0;
}
.cash-copy-text {
    display: none;
    background-color: var(--text-primary);
    color: var(--bg-body);
    text-align: left;
    position: absolute;
    margin: 10px 3px 0 0;
    box-sizing: border-box;
    padding: 4px;
    box-shadow: 0px 8px 8px 0px var(--shadow-color);
    z-index: 5;
    border-radius: 5px;

}

.cash-confirm {
    padding: 10px;
    background-color: var(--bg-section);
    text-align: center;
    border-radius: 5px;

}

.cash-confirm a, .cash-confirm a:link, .cash-confirm a:visited, .cash-confirm a:active {
    flex: 100%;
    background: var(--accent-green-deep)  ;
    border: 1px solid var(--accent-green-forest) ;
    border-radius: 5px;
    height: 46px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    color: var(--bg-body);
    font-size: 16px;
    font-weight: bold;
    align-items: center;
    margin:20px 0 ;
}

.cash-confirm a:hover {
    background: var(--accent-green-forest) ;
    border: 1px solid var(--accent-green-forest);
    text-decoration: none;

}

.cash-parent, .cash-name {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 10px;
}

.cash-guide, .cash-date {
    margin-left: auto;
    order: 2;
    font-size: 9px;
}
.cash-name {
    padding: 5px;
}
.cash-date {
    padding: 2px;
    color: var(--text-light);

}
.cash-name  {
    font-weight: bold;
    font-size: 12px;
}
.cash-copy-selected {
    background: rgba(0,120,215,1);
    color:var(--bg-body);
}
.cash-copy {
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.button-guide {

}
.coupon {
    background:var(--bg-highlight);
    border:1px solid var(--accent-yellow-border);
    display:block;
    font-size:14px;
    margin-top: 20px;
    line-height:18px;
    text-align:center;
    text-decoration:none;
    border-radius: 5px;

    font-weight:bold;

}

.coupon-view {
    cursor: pointer;
    padding: 8px;
    font-size: 12px;
}

.coupon-view-checkout {
    font-size: 12px;
    padding: 8px;
    background:var(--bg-highlight);
    border:1px solid var(--accent-yellow-border);
    border-radius: 5px;
}
.coupon-view-checkout-size {

    display:inline-block;
    float: right;
    margin: 10px;
}

.coupon-list {
    display: none;
}

.coupon-list {
    margin:0;
    padding:0;
}

.coupon-item {
    display:block;
    border-radius: 5px;
    background: var(--bg-coupon-item);
    border:1px solid var(--border-coupon);
    font-size: 14px;
    font-weight: normal;
    margin:10px 0;
    padding: 8px ;
    text-align: left;


}


.coupon-btn {
    float: right;

}
.coupon-add {
    float: right;
    font-size: 90%;
    color: var(--accent-orange-mid);
}

.coupon_end, .coupon_end_hour {
    font-size: 12px;
    color: var(--accent-green);
}

.coupon_end {
    display: flex;
    width: 70%;
    justify-content: center;
    align-items: center;
    /*
    background: var(--bg-highlight);
        border-radius: 5px;
    */
    padding: 0 4px;
    margin-top: 4px;
}
.coupon_end_day {
    padding: 2px 4px;
    color: var(--accent-green);
    border-radius: 4px;
    font-weight: bold;

}
.coupon_end_hour {
    font-weight: bold;
}


.RemoveCupom {
    width: 16px;
    padding: 2px;
    display: inline-block;
    vertical-align: middle;
}
.ActivateCoupon, .RemoveCupom {
    font-weight: bold;
    background: var(--accent-red-light);
    border: 1px solid var(--accent-red);
    border-radius: 5px;
    color: #eaeaea; /* var(--bg-body);*/
    overflow: hidden;
    cursor: pointer;
    letter-spacing: 1px;

    box-sizing: border-box;
    margin: 0 4px;
}

.ActivateCoupon:hover, .RemoveCupom:hover {
    background: var(--accent-red-dark);
    border: 1px solid var(--accent-red-dark);

}


.checkout-container1 {
    background: var(--bg-subtle) !important;
}

#checkout-left, #checkout-cart-main {
    flex: 80%;
    box-sizing: border-box;
    margin: 0 40px 0 40px;
    padding: 15px;
}
#checkout-right {

    width:400px;
    margin:auto;
    padding: 25px;
    background: var(--bg-muted);
    border:1px solid var(--border-default);
    border-radius: 10px;
    margin: 0 40px 0 40px;
    min-height: 600px;

}

#checkout-right .server-remarks {
    font-size: 14px;

}
.status-info-head {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.status-info {
    justify-content: flex-end;
    background-color: var(--bg-subtle);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.checkout-font, .checkout-font .server-lang {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.checkout-edit {
    text-align: right;
}


.co-products-name {

    font-size: 14px;
    margin-top: 10px;
    font-family: 'Nunito', sans-serif;
    padding:10px;
    box-sizing: border-box;

    background-color: var(--bg-section);
    font-weight: bold;

}
.co-products-qtd {
    display: flex;
    justify-content: center;
    align-self: flex-start;
    background-color: var(--bg-section);
    margin: 10px 0 ;
    padding:10px;
    font-size: 12px;


}
.checkout-edit-odd {
    display: flex;
    justify-content: center;
    align-self: flex-end;

}

.co-products-model {

    font-size: 12px;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    padding:10px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--bg-section);
    font-weight: bold;

}


.checkout-input, .checkout-input-tpoints {
    font-family:"Courier New", Courier, monospace;
    font-size:14px;
    letter-spacing:1px;
    padding:6px;
    display: flex;
    color: var(--text-primary);
    background:var(--bg-body);
    border:1px solid var(--border-default);
    border-radius: 5px;

    box-shadow: 0px 4px 7px rgba(169,169,169,0.25);
    flex:80%;
    margin: 5px 0;
}

.checkout-input-tpoints {
    display: inline-block;

}

input.checkout-input:hover, input.checkout-input-tpoints:hover   {
    background:var(--bg-input-hover);
}

.checkout-input-small {
    width: 100px;
}

.checkout-padding {
    padding: 0 20px;
}

.checkout-name {
    display: flex;
    padding: 5px 10px;
    line-height: 15px;
    background-color: var(--border-default);
}

.checkout-notice {
    padding: 10px;
    font-size: 11px;

    border: 1px solid var(--bg-body);
    border-bottom: 1px solid var(--border-medium);
}

.checkout-payments, .checkout-tpoints {
    display: flex;
    flex: 100%;
    background: var(--bg-body);
    border: 1px solid var(--bg-body);
    border-bottom: 1px solid var(--border-medium);
    padding: 15px 0px;
    padding-right: 15px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 14px;
    margin:10px 0 ;
    justify-content: flex-start;
}

.checkout-tpoints {
    cursor: default;
    flex-direction: column;
    background: var(--bg-muted);
    border-radius: 10px;
}

.checkout-tpoints-wrapper {
    display: flex;
    width: 50%;
    padding: 10px;
}

.checkout-tpoints-wrapper input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkout-tpoints-wrapper .toggle {
    position: relative;
    display: block;
    width: 40px;
    height: 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}
.checkout-tpoints-wrapper .toggle:before {
    content: "";
    position: relative;
    top: 3px;
    left: 3px;
    width: 34px;
    height: 14px;
    display: block;
    background: var(--border-medium);
    border-radius: 8px;
    transition: background 0.2s ease;
}
.checkout-tpoints-wrapper .toggle span {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    display: block;
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(154, 153, 153, 0.5);
    transition: all 0.2s ease;
}
.checkout-tpoints-wrapper .toggle span:before {
    content: "";
    position: absolute;
    display: block;
    margin: -18px;
    width: 56px;
    height: 56px;
    background: rgba(79, 46, 220, 0.5);
    border-radius: 50%;
    transform: scale(0);
    opacity: 1;
    pointer-events: none;
}

.checkout-tpoints-wrapper #chkbox1:checked + .toggle:before {
    background: #9fbeee;
}
.checkout-tpoints-wrapper #chkbox1:checked + .toggle span {
    background: var(--accent-blue);
    transform: translateX(20px);
    transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
    box-shadow: 0 3px 8px rgba(79, 46, 220, 0.2);
}
.checkout-tpoints-wrapper #chkbox1:checked + .toggle span:before {
    transform: scale(1);
    opacity: 0;
    transition: all 0.4s ease;
}

.checkout-tpoints-row {
    display: flex;
    flex-direction:row ;
    box-sizing: border-box;
    padding: 5px 20px;
}
.tpoints-row-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkout-text {
    justify-content: flex-start;
    align-items: flex-start;
    flex: 100%;

}

.checkout-text a:link, .checkout-text a:visited, .checkout-text a:active {
    font-size: 16px;
}

.checkout-payments-selected, .checkout-payments-selected:hover {

    background: var(--border-default) !important;
    border: 1px solid var(--border-default) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.checkout-payments:hover {
    background: var(--bg-input);
    border: 1px solid var(--bg-input);
    border-bottom: 1px solid var(--border-medium);

}

.checkout-edit {
    display: flex;
    justify-content: center;
    align-self: flex-end;

}

.checkout-edit a:link, .checkout-edit a:active, .checkout-edit a:visited,
.checkout-edit-odd a:link, .checkout-edit-odd a:active, .checkout-edit-odd a:visited{
    color: var(--accent-blue-light) !important;
    padding: 10px;
    text-align: left;
    box-sizing: border-box;
    font-size: 10px;
    margin:10px 0 ;

}
.co-coupon{
    cursor: pointer;
    border:1px solid var(--border-medium);
    border-radius: 5px;
    background: var(--bg-section);

}


.checkout-img, .checkout-product-img  {
    margin:0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.checkout-price {
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}



.checkout-payment-title, .checkout-payment-text {
    display: flex;

}

.checkout-cart {
    display: flex;
    flex: 100%;
    background: var(--bg-body);
    border: 1px solid var(--bg-body);
    border-bottom: 1px solid var(--border-medium);
    padding: 20px;
    text-align: left;
    font-size: 14px;
    justify-content: flex-start;
}



.checkout-update, .checkout-odd, .checkout-text1 {
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.checkout_delete {
    border: none;
    color: var(--accent-blue-light) !important;
    text-align: left;
    box-sizing: border-box;
    font-size: 10px !important;
    padding: 10px 0;

}
.checkout_delete:hover {
    text-decoration: underline;

}
.checkout-subtotal {
    justify-content: flex-end;
    font-size: 16px;
}

.checkout-btn {
    cursor:auto !important;
}
.checkout-btn a:link, .checkout-btn a:active, .checkout-btn a:visited {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    color: var(--bg-body);
    padding-top: 14px;

}
.checkout-btn a:hover {
    text-decoration: none;

}

.flex, .loginBtn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
.loginBtn {
    justify-content: center;
}

.btnComprar {
    flex: 100%;
    background: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    border-radius: 5px;
    height: 56px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    color: #FFFFFF;
    font-size: 20px;
    align-items: center;
    margin:25px 0 ;
}
.btnComprar-tpoints {
    margin: 0;
    height: 36px;
    font-size: 16px;
    padding: 0 10px;
}
.btnComprar:hover {
    background: var(--accent-blue-dark);
    border: 1px solid var(--accent-blue-dark);

}


#order_code {
    width:450px;
    margin:auto;
    padding: 25px;
    background: var(--bg-body);
    border:1px solid var(--border-default);
    border-radius: 10px;
    margin: 0 40px 0 40px;
    box-sizing: border-box;
    font-size: 12px;

}

.order_code_text {
    line-height: 150%;
}
#cardPaymentBrick_spinner {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.spinnering img {
    margin: 100px auto 90px auto;
    display: block;

}
#BrickWarning {
    text-align: center;
}

.qrcode_text {
    max-width:300px;
    margin: auto;
}
.qrcode_center {
    text-align: center;
}

.qr_copy {

    display:block;
    float: right;
    cursor: pointer;
    font-size:12px;
    padding:8px;
    border-radius: 5px;
    background:var(--bg-muted);
    border:1px solid var(--border-default);
}
.qr_copy:hover {
    background:var(--bg-highlight) !important;
    border:1px solid var(--bg-highlight);
}


.pix_code {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    max-width: 300px;
    margin: 10px;
    user-select: all;
}

.qrcode_image {
    width: 200px;
    margin: auto;

}


@keyframes blink {
    50% {
        opacity: 0;
        color: var(--accent-orange-mid) !important;
        font-size: 24px !important;
    }
}


#order_content {
    flex: 80%;
    box-sizing: border-box;
    margin-right: 40px;
    padding: 15px;
    background: var(--border-default);
    border-radius: 10px;

}
#order_content .server-remarks {
    background: var(--bg-subtle);
}
.order_sum {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 10px;
}
.order_info {
    padding: 10px;
}

.history_order_number {
    font-size: 12px;
    padding-bottom: 5px;
}
.history_products {
    font-size: 9px;
    color: var(--text-light);
}
.history_status {
    text-transform: uppercase;
    display: inline-block;
    border-radius: 5px;
    padding: 4px 6px;
    font-weight: bold;
}

.history_status_green {
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
}

.history_status_blue {
    color: var(--accent-blue-light);
    border: 1px solid var(--accent-blue-light);
}


.date_purchased {
    padding: 10px 0 10px 0;
    color:var(--text-muted);
}


#lj_cat {
    margin:0 auto;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}
#lj_cat ul {
    margin:0;
    padding:0;
    list-style:none;
}

#lj_cat li  {
    display: flex;;
    flex-wrap: wrap;

}
#lj_cat li a:link , #lj_cat li a:active, #lj_cat li a:visited  {
    display:flex;

    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 0 10px;

    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    width:128px;
    height:118px;

    text-decoration:none;
    background:url(images/loja-cat-gen.gif) center center no-repeat;

}
#lj_cat li a:hover  {
    color: var(--accent-red-dark);
}



.cats_title {
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding:2px 10px 2px 15px;
    color:var(--text-muted);
    font-size:9px;
    font-weight:bold;
}

.related_products {
    margin-top: 10px;
}

.related_products li a:link , .related_products li a:active, .related_products li a:visited  {
    display:block;
    font-size: 120%;
    margin:4px;
    padding:5px 10px;
    line-height:18px;
    text-align:center;
    vertical-align: middle;
    text-decoration:none;
    border-radius: 5px;
    background:var(--bg-muted);
    border:1px solid var(--border-default);
    color: var(--text-primary);
}
.related_products li a:hover  {
    background:var(--bg-highlight);
    border:1px solid var(--accent-servers-border);
}

.prod_cats, .related_products {
    text-align:left;
}
.prod_cats ul, .related_products ul {
    margin:0;
    padding:0;
    list-style:none;
}

.prod_cats li, .related_products li {
    display:inline-block;
    float:left;
}

.prod_cats li img {
    vertical-align: middle;
    margin-bottom:6px;

}
.prod_cats li a:link , .prod_cats li a:active, .prod_cats li a:visited  {
    display:block;
    margin:4px;
    padding:10px 15px;
    text-align:center;
    vertical-align: middle;
    text-decoration:none;
    border-radius: 5px;
    background:var(--bg-muted);
    border:1px solid #a4c9eb;
    color:var(--accent-blue-deep);
    font-weight: bold;
    font-size: 18px;

}
.prod_cats li a:hover  {
    color:var(--accent-blue-deep);
    background:var(--bg-highlight);
    border:1px solid var(--accent-yellow);
}


.game-desc {
    padding:10px;
    font-size:10px;
}

.game-notfound {
    font-size: 140%;
    padding: 30px 40px;
    line-height: 2em
}
.game-notfound a:link, .game-notfound a:active, .game-notfound a:hover {
    font-size: 90%;
    font-weight: bold;
}
.game-notfound ul {
    margin-left: 40px;
    list-style: circle;
}
.game-notfound input, .game-notfound button {
    font-size: 110%;
}
.game-notfound form {
    margin: 10px 40px;
}


#game-logo {
    width:100%;
    margin:auto;
}

#game-name-header {
    font-weight: 600;
    line-height: 2rem;
    font-size: 24px;
    letter-spacing: -1px;
    padding: 20px 0;
    color: var(--text-secondary);

}

#game-content {
    background: var(--bg-card);
    border:1px solid var(--border-default);
    display: flex;
    width: 100%;
    position: static;
    border-radius: 10px;
    padding: 20px 0 5px 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:119%;

}

#game-content-left {
    display: flex;
    flex: 80%;
    box-sizing: border-box;
    margin: 0 40px 0 40px;

}

#game-content-right {
    display: flex;
    box-sizing: border-box;
    margin: 0 20px 20px 0;
}

.game-content-table > tbody > tr > td {
    vertical-align: top;
    padding:10px 0 10px 0;
    text-align: left;

}
.game-content-table > tbody > tr:not(:last-child) > td {
    border-bottom: 1px solid var(--border-default);
}

#right-content {
    width:318px;
    margin:0 auto auto auto;
    padding: 5px;
    background: var(--bg-muted);
    border:1px solid var(--border-default);
    border-radius: 10px;
}

.game-extra-content {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
    font-size: 14px;
}

.game-extra-content h2, .game-extra-content h3, .game-extra-content h4, .game-extra-content h5 {
    font-family: 'Nunito', sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 24px;
    display: flex;
    align-items: center;
}

.game-extra-content h2::before, .game-extra-content h3::before, .game-extra-content h4::before, .game-extra-content h5::before {
    content: "";

    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.17l-3.88-3.88-1.41 1.41L9 19 20.29 7.71l-1.41-1.41z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 5px;
}

.game-extra-content ul {
    padding-left: 40px;
    list-style: disc;
    margin-bottom: 10px;
}

.game-extra-content ul li {
    line-height: 25px;

}

.game-extra-content p  {
    line-height: 25px;
    margin-bottom: 10px;

}

#game-bottom {
    /*width:620px;*/
    margin:auto;
    /*background:url(images/head-catprod-bottom.png);*/
    height:16px;
}

#game-remarks {
    text-align:center;
    padding:8px;
    background:var(--bg-body);
    -moz-border-radius: 2px;
    border-radius: 5px;
    font-size:12px;
    font-family:Arial;
    margin:0 10px 0 10px;

}



table#rewards  {
    margin:20px auto ;
    border: 2px solid var(--border-default);
    font-size:115%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    background-color: var(--bg-muted);
}
#rewards th {
    background: var(--bg-muted);
    color:var(--text-primary);
    padding:8px;
    border-bottom: 1px solid var(--border-default);
    font-weight: normal;
    vertical-align: middle;

}
#rewards td  {
    border-bottom: 1px solid var(--border-default);
    text-align: center;
    background: var(--bg-body);
    padding:8px;
}
#rewards th.headerblue {
    background: var(--accent-blue-light);
    border:1px solid var(--accent-blue-light);
    color: var(--bg-body);
    font-size: 110%;
}
.headerbluecorner {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-clip: border-box;
}

#rewards td.leftblue, #rewards td.leftbluebottom {
    border-left:2px solid var(--accent-blue-light);

}
#rewards td.leftbluebottom {
    border-bottom:2px solid var(--accent-blue-light);
    border-bottom-left-radius: 10px;
}
#rewards td.rightblue, #rewards td.rightbluebottom {
    border-right:2px solid var(--accent-blue-light);
}
#rewards td.rightbluebottom {
    border-bottom:2px solid var(--accent-blue-light) ;
    border-bottom-right-radius: 10px;
}



.securenotice {
    width:99%;
    padding:2px;
    text-align:center;
    background:var(--bg-danger);
    border:1px solid var(--border-danger);
    color:var(--text-danger);
}



.index-news {
    background: var(--bg-index-news);
    margin: 2px;
    font-family: 'Roboto', sans-serif;

    display: flex;
}
.index-news:hover {
    background: var(--bg-index-news-hover);
}
.index-news a{
    justify-content: center;
    align-items: center;
    vertical-align: middle;

}



.site-box {
    padding: 12px;
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 10px;
    padding-bottom:14px;
    margin-bottom: 28px;

    border: 1px solid #51a5ef;

    background: rgb(44,114,175);
    background: linear-gradient(0deg,rgba(131, 217, 235, 1) 0%, rgba(146, 212, 247, 1) 15%, rgba(102, 168, 222, 1) 80%, rgba(76, 146, 207, 1) 95%);

            /*linear-gradient(0deg,rgba(110, 218, 240, 1) 6%, rgba(146, 212, 247, 1) 37%, rgba(114, 175, 224, 1) 63%, rgba(64, 142, 210, 1) 97%);*/

/*            linear-gradient(90deg, rgba(44,114,175,1) 0%, rgba(81,166,240,1) 49%, rgba(44,114,175,1) 100%)*/

;
    color: #0a0a0a;


}
.index-new-available {

    margin-top: 20px;
    padding: 0;
    background: rgb(252,128,48);
    background: /*linear-gradient(0deg, rgba(252,128,48,0.8785714969581583) 0%, rgba(255,149,80,0.3743698162858894) 51%, rgba(252,128,48,0.8897759787508753) 100%)*/

            linear-gradient(180deg,rgba(180, 202, 217, 1) 0%, rgba(213, 235, 245, 1) 24%, rgba(227, 243, 255, 1) 69%, rgba(202, 216, 230, 1) 93%);
            /*linear-gradient(180deg,rgba(173, 232, 255, 1) 0%, rgba(213, 235, 245, 1) 24%, rgba(224, 239, 255, 1) 44%, rgba(227, 243, 255, 1) 69%, rgba(223, 223, 235, 1) 93%)*/
            /*linear-gradient(180deg,rgba(255, 151, 82, 1) 0%, rgba(255, 220, 191, 1) 29%, rgba(252, 226, 202, 1) 55%, rgba(235, 230, 230, 1) 100%)*/

;

    border-color: rgba(180, 202, 217, 1);
}
.site-index-color {
    color: #f2f2f2;
}
.index-new-available h5 {
    color: var(--text-secondary);

}


.destaque-index {
    text-align:center;
    margin:18px 4px;
    padding-bottom: 10px;
    font-family: 'Roboto', sans-serif;

}

.slick-list-two .destaque-index {

    border-radius: 5px;

    background: rgb(251,188,134);
    background: linear-gradient(180deg,rgba(102, 208, 237, 1) 0%, rgba(166, 231, 255, 1) 24%, rgba(206, 242, 255, 1) 44%, rgba(227, 243, 255, 1) 69%, rgba(128, 232, 255, 1) 93%);

}


.slick-list-three  .destaque-index {

    border-radius: 10px;

}


.destaque-logo-index {
    margin:5px auto;
    box-sizing: border-box;
    padding: 25px;
}
.destaque-logo-index:hover  {
    padding-top:22px;
    box-sizing: content-box;
    background: none;
    padding-bottom: 28px;
}

a.destaque-title {
    padding: 10px;
    font-size: 14px;
    font-weight: normal;
    color: #0a0a0a;

}

a.destaque-link   {
    height: 141px;
    display: block;
    background: rgba(250, 255, 227, 0.3);

}
a.destaque-link-color {
    height: 141px;


}

a.destaque-link:hover  {
    background-color: rgba(164, 201, 235, 0.25);/*rgba(255,255,255,var(--overlay-opacity));*/

}


.flex-destaque-index-main  {
    border-radius: 10px;
    background: rgba(244, 249, 247, 0.15);
  /*  background: linear-gradient(90deg, rgba(44,114,175,0.4962184702982756) 13%, rgba(127,192,249,1) 49%, rgba(44,114,175,0.5046218316428134) 88%);*/
}


.destaque-index-main-text {
    text-align: left;
    max-width: 50%;
    font-size: 16px;
    line-height:5em !important;
    padding-top: 40px;
}
.destaque-index-main-text a {
    display: block;
    min-height: 80px;
}
.destaque-index-main-text a:hover {
    text-decoration: none;
    color: var(--bg-body) !important;
}
.destaque-link-name {
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;
    line-height: 1.2em !important;
    color: #0a0a0a !important;

}
.destaque-title-name {
    font-size: 22px;
    font-weight: bold;
    line-height: 2em !important;
    color: #0a0a0a;

}

.index-box {
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    background: rgb(146,153,235);
    background: linear-gradient(90deg, rgba(146,153,235,1) 0%, rgba(190,194,255,1) 49%, rgba(211,213,230,1) 100%);
    margin: 40px auto;
}


.site-index-content {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: 10px auto ;
    font-size: 12px;
    padding: 14px 21px;
    box-sizing: content-box;
    color: #0a0a0a;



}

/*

	sticky box
*/
.site-feature-box {
    max-width: 1150px;
}
.slick-list-one, .slick-list-three{
    margin: 10px auto;


}
.slick-list-four {
    margin-top: 10px;
}

.slick-list-two, .slick-list-four {
    /*max-width: 1150px;*/

}
.slick-list .slick-slide, .slick-list2 .slick-slide {
    font-size: 30px;
    text-align: center;
}
.slick-list .slick-slide:nth-child(even), .slick-list2 .slick-slide:nth-child(even){
    /*
	background-color: var(--border-medium);
    */
}
.slick-list .slick-slide:nth-child(odd), .slick-list2 .slick-slide:nth-child(even){
    /*
	background-color: var(--border-medium);
    */
}
.slick-arrow {
    z-index: 2 !important;

}

.slick-arrow:before {
    font-size: 25px !important;
    color: var(--text-placeholder);
}

.slick-list-two .slick-arrow:before {
    color: var(--accent-orange-mid);
}
.slick-list-three .slick-arrow:before {
    color: var(--accent-orange-mid);
}

.slick-next {
    top:91px;
    right: 18px !important;

}
.slick-prev {
    top:91px;
    left: 18px !important;

}



button.slick-disabled {
    opacity: 0.6;
}



/* loading skeleton eol */

#srv-gold {
    font-size:12px;
}

#srv-gold fieldset.ggserv { width: 55%;  }
#srv-gold fieldset.ggodd { width: 35% }


#srv-gold fieldset {
    margin:0;
    padding:8px;
    float:left;
    height:25px;
}

#srv-gold label {
    margin-top:8px;
    font-size:12px;
    font-weight:bold;
    height:20px;
}

#srv-gold .srv-select {
    width:205px; float:left;

}

/*h1*/
.site-title, #srv-gold h1, #srv-gold h2, #srv-gold h3, #srv-gold h4, #srv-gold h5, #srv-name {
    position: relative;
    font-size: 22px;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    /*text-shadow: 1px 2px 2px var(--border-strong);*/
}

#srv-gold h1, #srv-gold h2, #srv-gold h3 {
    margin: 15px 0px;
}

#srv-gold h2 {
    font-size: 16px;
}
#srv-gold h3 {
    font-size: 14px;
}
#srv-gold h4, #srv-gold h5 {
    margin: 5px 0px 5px 0px;
    font-size: 13px;
}

.page-description {
    font-size: 120% !important;
    padding: 0 20px;
}
.page-categories .prod_cats {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-title {
    width: 90%;
    text-align: left;
}
.site-title img {
    vertical-align: middle;
    margin-right:10px;

}
.site-share {
    width: 10%;
    text-align: right;
}

.c-share__toggler {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--bg-muted);
    border: 1px solid var(--border-default);
}

.c-share__icon {
    filter: invert(41%) sepia(94%) saturate(1026%) hue-rotate(197deg) brightness(105%) contrast(101%);
    width: 18px;
    height: 18px;
    background: url(images/share.svg) no-repeat center ;
    background-size: contain;
}

.c-share__referral {
    background: none;
    border: none;
    padding: 0 !important;
}

.c-share__referral .c-share__icon {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(195deg) brightness(102%) contrast(100%);
}
.c-share__button {
    padding-right: 0;
    line-height: 34px

}
.share-text {
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 0 10px 0;
    text-align: center;
}
.share-options {
    padding: 20px 0 ;
    font-size: 12px;
    text-align: center;
}
.share-options-links {
    margin: 0 0 20px 0;
    padding: 0 0 15px 0;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid var(--bg-input);

}

.share-icons {
    display: flex;
    justify-content: center;
}
.share-icons div {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--bg-muted);
    border: 1px solid var(--border-default);
    text-align: center;
    justify-content: center;
    margin: 0 5px;
    cursor: pointer;
}
.share-icons div img {
    margin-top: 7px;
    margin-left: 1px;
    width: 18px;
    height: 18px;
}
.share-icons div a {
    width: 100%;
    height: 35px;
    display: block;

}
.share-icons div:hover {
    background-color: var(--bg-hover);

}
.x-icon img {
    margin-top: 9px !important;
    width: 16px !important;
    height: 16px !important;
    filter: var(--filter-invert);

}
.copy-icon img {
    filter: var(--filter-invert);

}
.share-knowmore {
    text-align: right;
    padding: 5px 15px 0 0;
}
.copied {
    position: absolute;
    right:60px;
    background: var(--text-secondary);
    color: white;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 6px var(--shadow-color);

}


/*h2*/

.site-index {
    font-size: 22px;
    font-family: 'Nunito', sans-serif;
    margin:21px 7px 0 14px;

}

.news-size {
    font-size: 18px;

}





#redir_in, #redir_try {
    width:100%;
    border: 1px solid var(--border-default);
    text-align:center;
    font-size:14px;
    padding:15px 0 15px 0;
}
#redir_in a	{
    display:block;
    text-align:center;
    padding:85px 0 85px 0;
    width:100%;
    background:var(--border-default);
    font-size:14px;
}



#ajax-loader {
    font-size:12px;
    font-weight:bold;
    background:url(images/ajax-loader.gif) center 20px no-repeat;
    line-height:30px;
    height:50px;
}





/* Container da tabela */
.news-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

.news-table .shorttext {
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 12px;
    max-width: 800px;
}

/* Título da notícia (th) */
.news-table th {
    text-align: left;
    font-weight: normal;
    border-radius: 12px 0 0 12px;
    background: var(--bg-muted); /* cinza muito claro */
    box-shadow: 0 3px 6px var(--shadow-subtle);
}
.news-table th a {
    transition: color 0.2s ease, text-shadow 0.2s ease;
    display: block;
}
/* Link do título */
.news-table a.title  {
    text-decoration: none;
    font-weight: 600 ;
    font-size: 1.05rem;
    padding: 20px 0 4px 20px;

}

.news-table th h2 a:hover {
    color: var(--accent-orange-hover); /* laranja forte no hover */

}

.news-table th a:hover {
    color: var(--accent-orange-hover); /* laranja forte no hover */
    text-decoration: none;

}
/* Data */
.news-table td {
    text-align: right;
    padding: 16px 20px;
    color: var(--text-muted); /* cinza médio */
    font-size: 0.9rem;
    border-radius: 0 12px 12px 0;
    background: var(--bg-subtle); /* cinza claro */
    box-shadow: 0 3px 6px var(--shadow-subtle);
    white-space: nowrap;
    font-weight: 500;
}

/* Hover */
.news-table tr:hover th,
.news-table tr:hover td {
    background: var(--bg-hover); /* cinza hover */
    transition: all 0.25s ease;
}

table.orderprodpp  {
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
    margin: 20px 0;
    font-size: 110%;

}
.orderprodpp th {
    background: var(--bg-muted);
    border-bottom:1px solid var(--bg-body);
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 110%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

.orderprodpp td {
    border-bottom:1px solid var(--bg-body);
    padding:10px;
}

table.delypp  {
    border:1px solid var(--border-strong);
    border-radius: 5px;
    margin-bottom:15px;
    width:100%;
}
.delypp th {
    background: var(--border-default);
    border-bottom:1px solid var(--bg-body);
    text-align: center;
    padding:4px;
}
.delypp th.head {
    background: var(--accent-orange-mid);
    border-bottom:1px solid #DEEBF2;
    text-align: center;
    font-size:14px;
    line-height:33px;
    color:var(--text-secondary);
}

.delypp td {
    border-bottom:1px solid var(--bg-body);
    padding:10px;
    text-align:center;
    overflow-wrap: break-word;
    word-wrap: break-word;

}
table.orderpp  {
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--border-strong);
    border-bottom: none;
    margin: 20px 0;
    font-size: 110%;

    border-radius: 10px;
    overflow: hidden;

}
.orderpp th {
    background: var(--bg-muted);
    text-align: center;
    vertical-align: middle;
    padding:10px;
    border-bottom: 1px solid var(--border-strong);


}

.orderpp td {
    border-bottom:1px solid var(--border-strong);
    padding:10px;
    vertical-align: middle;
}


.orderpp input, .orderpp select {
    padding:2px;
}

.orderpp h2 {
    font-size:12px;
    font-weight:normal;
    margin:0px;

}

.orderpp img {
    filter: var(--filter-invert);
}

.moduleRow { }
.moduleRowOver { background-color:var(--border-default); cursor: pointer; }
.moduleRowSelected { background-color: var(--row-selected-bg);  cursor: pointer; color: var(--bg-body) }

TD.pageHeading, DIV.pageHeading {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding:6px 0 6px 4px;
    color: var(--text-secondary);
}

td.pageHeading h1 {
    margin: 0;
    font-size: 22px;
    font-family: 'Nunito', sans-serif;
    /*
    text-shadow: 1px 2px 2px var(--border-strong);
    */

}

TD.main, P.main {
    font-size: 11px;
    line-height: 1.5;
    text-align:center;
}
TD.main {
    text-align:left;
    padding:2px 5px 2px 5px;
}

.box_main_product > table, .infoBoxBorda > table {
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid var(--border-strong);
    font-size: 110%;

    border-radius: 10px;        /* arredondar os cantos */
    overflow: hidden;           /* corta o fundo interno */
}



.infoName, .infoPrice {
    font-size: 200% !important;

}

TD.productListing-heading {
    background: var(--bg-muted);
    border-bottom:1px solid var(--border-strong);
    vertical-align: middle;
    text-align:center;
    color: var(--text-primary);
    padding: 10px;
}

TD.productListing-data {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    border-bottom:1px solid #E0E7EF;
    vertical-align: middle;
    height: 45px;
}

td.productListing-data a:link, td.productListing-data a:visited, td.productListing-data a:active {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding:5px 0 5px 15px;
    font-size:14px;
}
.product-center {
    justify-content: center;
}


TR.productListing-even:hover, TR.productListing-odd:hover {
    background:var(--border-default);
}
a.pageResults:link, a.pageResults:active, a.pageResults:visited {
    font-size: 10px;
    padding: 6px 8px;
    background: var(--bg-muted);
    border: 1px solid var(--border-input);
    border-radius: 5px;
}
a.pageResults:hover {
    background:var(--border-medium);
    text-decoration: none;
}

.messageStackError, .messageStackWarning, TD.headerError, .jserror {
    font-size: 14px;
    color: #000000;
    border:1px solid #ff978e;
    vertical-align:middle;
    background: #F6CECE url(images/error.gif) no-repeat  4px center;
    padding:8px 4px 8px 31px;

}

.messageStackSuccess {
    font-family:  Tahoma, Verdana, Arial, sans-serif;
    font-size: 13px; background-color: #99ff00;
    padding:10px;
    border:1px solid #6A9F1D;
    color: #121212;
}



.newspp th {
    border-bottom:1px solid var(--border-default);
    background: var(--bg-news-h1);
    padding:5px 0;
    padding-left: 20px;
    font-size:14px;
    font-family: 'Arial', 'Helvetica', sans-serif;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

}


.newspp > tbody > tr > td > h1 {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 24px !important;
    font-weight: bold;
    margin:0;
    padding-left: 30px;
}
.newspp > tbody > tr > td > h2, .newspp > tbody > tr > td > h2 a:link, .newspp > tbody > tr > td > h2 a:active, .newspp > tbody > tr > td > h2 a:visited {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 22px !important;
    font-weight: bold;
    padding: 8px 0;
    padding-left: 30px;
}
.newspp > tbody > tr > td > h3, .newspp > tbody > tr > td > h3 a:link, .newspp > tbody > tr > td > h3 a:active, .newspp > tbody > tr > td > h3 a:visited {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 20px !important;
    font-weight: bold;
    padding: 8px 0;
    padding-left: 30px;
}

.newspp > tbody > tr > td > p {
    font-family: 'Arial', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    padding: 7px 0;
    padding-left: 30px;
}
.newspp li strong, .newspp strong, .newspp strong a:link, .newspp strong a:active, .newspp strong a:visited,
 .newspp a:link, .newspp a:active, .newspp a:visited {
     font-size: 16px;
     font-weight: bold;
 }
.newspp > tbody > tr > td > ul, .newspp > tbody > tr > td > ol {
    list-style: circle;
    font-size: 16px;
    padding-left: 55px;
}
.newspp > tbody > tr > td > li {
    font-size: 16px;
    font-family: 'Arial', 'Helvetica', sans-serif;
    padding-left: 30px;
}
.newspp > tbody > tr > td {
    background: var(--bg-news-article);
}
.newspp .date {
    text-align: right;
    font-size:14px;
    padding:15px;

}

.extrapages .main {
    font-size: 14px !important;
    padding: 15px 25px;

}
.extrapages .pageHeading {
    padding-left: 25px;
    padding-top: 15px;
}


.lang-switcher{
    position:relative;
    display:inline-block;
}

.lang-switcher__button{
    display:flex;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 12px;
    background:var(--lang-switcher-bg);
    color:var(--lang-switcher-text);
    border:1px solid var(--lang-switcher-border);
    border-radius:var(--lang-switcher-radius);
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition: background-color .15s ease;
}

.lang-switcher__button:hover{
    background:var(--lang-switcher-hover-bg);
}

.lang-switcher__chevron{
    width:10px;
    height:10px;
    flex-shrink:0;
    transition: transform .18s ease;
}

.lang-switcher--open .lang-switcher__chevron{
    transform: rotate(180deg);
}

.lang-switcher__dropdown{
    position:absolute;
    top:calc(100% + 6px);
    min-width:140px;
    background:var(--lang-switcher-bg);
    border:1px solid var(--lang-switcher-border);
    border-radius:var(--lang-switcher-radius);
    box-shadow:var(--lang-switcher-shadow);
    padding:6px;
    margin:0;
    list-style:none;
    opacity:0;
    transform: translateY(-4px);
    pointer-events:none;
    transition: opacity .15s ease, transform .15s ease;
    z-index:50;
    text-align: left;
}

.lang-switcher--open .lang-switcher__dropdown{
    opacity:1;
    transform: translateY(0);
    pointer-events:auto;
}

.lang-switcher__option {
    display:block;
    padding:8px 10px;
    border-radius:6px;
    font-size:14px;
    text-decoration:none;
}
.lang-switcher__option:active, .lang-switcher__option:visited, .lang-switcher__option:link {

    color: #121212;
}
.lang-curr {
    font-size:  9px;
    color: #333;
    vertical-align: middle;

}

.lang-switcher__option:hover{
    background:var(--lang-switcher-hover-bg);
}

.lang-switcher__option--current{
    font-weight:600;
}