* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100vw;
    height: max-content;
    margin: 0;
    padding: 0;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    font-family: monospace, sans-serif;
    color: rgb(142,117,68);  
    position: relative;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    background-color: #333;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: max-content;
    margin: 0;
    padding: 0;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    font-family: monospace, sans-serif;
    color: rgb(142,117,68);  
    min-height: 100vh;    
    width: 100vw;
}

/* navbar */

.main-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #444;
    /* color: white; */
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1000; /* Garante que a navbar fique acima de outros elementos */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-bottom: 1px solid #555;
}

.navbar-title {
    position: absolute; /* Centraliza em relação à navbar */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 1px 2px #000a;
}

.navbar-titlesize-class{
    font-size: 1.6em;
}

.navbar-title:hover {    
    text-shadow: 2px 3px 2px #000a;
}

.main-navbar ul {
    display: flex;
    list-style: none;
}

.main-navbar .btn-li {
    margin-right: 6px;
    padding: 6px 18px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.3s;
    /* border: 1px solid #333; */
    text-align: center;
    /* font-size: 1.1em; */
    /* text-transform: uppercase; */
}

.main-navbar .btn-li .btn-img {
    width: 35px;
    /* border: 1px solid red; */
}

.main-navbar .btn-li:hover {
    background-color: #fffbe881;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.436);
}

.lang-img {
    border-radius: 50%;
}

/*  --------------------------------------------------------------------- logo rotativo IMG ----------------------------- */
.logo {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #333;
    cursor:pointer;
    transition: 2s;
}

.logo:hover{
    border: 1px solid #222;
    background: #111;
}


.logo-box{
    position: relative; /* Permite o uso de posição absoluta nas imagens */
    width: 40px; /* Largura do container */
    height: 40px; /* Altura do container */
}

.logo-box img {
    position: absolute; /* As imagens serão posicionadas uma sobre a outra */
    left: 0;
    right: 0;
    margin: auto; /* Centraliza as imagens */
    width: 100%;
}

.load-box,
.logo-box-load {
    position: absolute; /* Permite o uso de posição absoluta nas imagens */
    width: 160px; /* Largura do container */
    height: 160px; /* Altura do container */
    z-index: 9993;
    inset: 0;
    margin: auto;
    justify-self: center;
    align-self: center;
    /* text-align: center; */
    /* left: 50%;
    right: 50%;
    transform: translate(-50%,-50%); */
}

.load-box img,
.logo-box-load img {
    position: absolute; /* As imagens serão posicionadas uma sobre a outra */
    left: 0;
    right: 0;
    margin: auto; /* Centraliza as imagens */
    width: 100%;
    /* opacity: .75; */
}

.load-box .ZZName,
.logo-box-load .ZZName{
    display: contents;
    /* align-self: flex-end; */

    position: absolute; /* As imagens serão posicionadas uma sobre a outra */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; /* Centraliza as imagens */
    font-size: 165%;
    font-weight: bold;
    color: #111a;
    /* text-shadow: 0px 2px 15px #c8943c; */
    /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
    line-height: 5px;
    /* width: 100%; */
    transition:.9s;
}

.rotating-image-load {
    width: 85px; /* Largura da imagem */
    animation: rotate 6s linear infinite; /* Animação de rotação */
}

.rotating-image {
    width: 40px; /* Largura da imagem */
    animation: rotate 6s linear infinite; /* Animação de rotação */
}


@keyframes rotate {
    from {
        transform: rotate(0deg); /* Início da animação */
    }
    to {
        transform: rotate(360deg); /* Final da animação */
    }
}

/* footer */
.main-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    background-color: #444;
    /* color: white; */
    position: fixed;
    bottom: 0;
    margin-bottom: 0;
    width: 100%;
    /* height: 5%; */
    margin-top: auto;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    border-top: 1px solid #555;
    z-index: 1000;
}

.footer-timer {
    margin-left: 16px; 
    font-family: monospace; 
    color: #ffe066; 
    font-weight: bold;
}

.footer-rights {
    display: flex;
    left: 0;
    justify-content: center;
    align-items:center ;
    color: #232526;
}

.footer-rights img {
    width: 20px;
    margin: 3px;
    display: inline-block;
}

/* ---------------------------------------------------------- BRIDGE LOBBY TICKET HOIST 03/07/25 @djpessoa */
.main-bridge-mbit {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    /* padding: auto; */
    background-color: #222;
    color: white;
    min-height: fit-content;
}

.bridge-mbit-big-box {
    width: 96vw;
    display: flex;
    position: relative;
    flex-direction: column;
    /* align-items: flex-start; */
    margin-top: 12vh;
    margin-bottom: 10vh;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 76vh;
    padding: 18px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444;

    /* display: flex;
    flex-direction: column; */
    /* align-items: flex-start; */
    /* margin-top: 0;
    justify-content: center;
    height: 100%;
    padding: 20px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444; */
}

.body-brige {
    width: 100%;
    height: 100%;
    /* border: 1px solid rgba(234, 7, 7, 0.667); */
    background: #333a;
    text-align: center;
    font-family: Georgia, monospace, sans-serif;
    /* font-size: 15em; */
    padding: 2.5vh 3vw;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.zz {
    font-size: 13em;
    /* color:#414345;
    text-shadow:2px 3px 6px #111a;
    font-weight: bold; */
}

.minizz {
    font-size:10em;
    /* color:#414345;
    text-shadow:2px 3px 6px #111a;
    font-weight: bold; */
}

/* ------------------------------------------------------------------------------ MBIT @djpessoa 14/06/25 */

.main-mbit-start {
    /* flex: 1; */
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px 5px;
    background-color: #222;
    color: white;
    /* min-height: 90dvh; */
    height: 100vh;
    /* margin-top: 4em;
    margin-bottom: 4em; */
}

.mbit-start-big-box {
    width: 98vw;
    display: flex;
    position: relative;
    flex-direction: column;
    /* align-items: flex-start; */
    margin-top: 8vh;
    margin-bottom: 5.4vh;
    justify-content: center;
    align-self: center;
    height: 85vh;
    padding: 18px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444;
}

.latch-event {
    pointer-events:none;
}

.clear-msg-latch {
    position: fixed;
    display: flex;
    top: 0;
    align-self: center;
    justify-self: center;
    float: center;
    /* border: 1px solid red; */
    width: fit-content;
    height: fit-content;    
    padding: 5px;
    margin-top:11.5em;
    margin-left:11.5em;    
    z-index:8001;
    transition: 1s;
}

.mini-body-msg-latch {
    display: none;
    width: fit-content;
    padding: 3.5px;
    font-size: 1.3em;
    color: #888;
    font-weight: bold;
    font-family: monospace;
    background: rgba(51, 51, 51, 0.416);
    border-top: 2.3px solid #6d4d17;
    border-right: 2.3px solid #46310d;
    border-bottom: 2.8px solid #6b4f1d;
    border-left: 3px solid #ffb300;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    transition: 1s;

}

.msg-board-box {
    position: fixed;
    display: flex;
    top: 0;
    right: 0;
    /* align-self: flex-end; */
    justify-self: right;
    float: right;
    /* border: 1px solid red; */
    width: fit-content;
    height: fit-content;    
    padding: 5px;
    margin-top: 9vh;
    margin-right: 1.2vw;
    border-radius: 12px;
    z-index:8000 ;
}

.helper-board-box {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    align-self: flex-start;
    justify-self: left;
    float: left;
    /* border: 1px solid red; */
    width: fit-content;
    height: fit-content;
    padding: 5px;
    margin-top: 9vh;
    margin-left: 1.2vw;
    border-radius: 12px;
    z-index:8000 ;
}

.envelope-msg-board-content,
.envelope-helper-board-content {
    display: block;
    align-self: flex-start;
    justify-self: center;
    border-radius: 5px;
    border: 3px solid #222;
    padding: 3px;
    width: 14vw;
    height: 40vh;
    background: #292d35b0;
    box-shadow: 5px 4px 7.5px #111a;
}


.header-msg-board .voltar-covens-list {
    position: absolute;
    justify-self: right;
    text-decoration: none;
    font-weight: bold;
    color: #888a;
    cursor: pointer;
    transition: .6s;
}

.header-msg-board .voltar-covens-list:hover {
    background: #46310d;
}

.header-msg-board,
.header-helper-board,
.header-badge-board,
.header-data-board {
    width: 100%;
    background:#292d35;
    height: fit-content;
    padding: 3px;
    font-size: 1.1em;
    font-weight: bold;
    color: #888;
    border-bottom: 1px solid #222;
    margin-bottom: 3px;
}

/* data card */

.data-board-box {
    position: fixed;
    display: flex;
    top: bottom;
    right: 0;
    align-self: flex-end;
    justify-self: right;
    width: fit-content;
    height: fit-content;
    padding: 5px;
    margin-top: 40vh;
    margin-right: 1.2vw;
    border-radius: 12px;
    z-index:8003 ;
}

/* badges card */
.badge-board-box {
    position: fixed;
    display: flex;
    left: 0;
    align-self: flex-end;
    justify-self: left;
    padding: 5px;
    margin-top: 40vh;
    margin-left: 1.2vw;
    border-radius: 12px;
    z-index:8002 ;
}

.envelope-badge-board-content {
    width: 15vw;
    height: 26vh;
    transition: 1.8s;
}
.envelope-data-board-content {
    width: 26vw;    
    transition: 1s;
    height: 42vh;
}

.envelope-data-board-content,
.envelope-badge-board-content  {
    display: block;
    align-self: flex-start;
    justify-self: center;
    border-radius: 5px;
    border: 3px solid #222;
    padding: 3px;
    /* width: 26vw; */
    background: #292d35b0;
    box-shadow: 5px 4px 7.5px #111a;
    transition: 1.4s;
}

.envelope-data-board-content:hover {
    width: 30vw;
    box-shadow: 10px 8px 15px #111a;
}

.envelope-badge-board-content:hover {
    width: 26vw;
    height: 36vh;
    box-shadow: 10px 8px 15px #111a;
    > .body-badge-board { 
        /* overflow-x: visible;    */
        position: relative;
        height: 85%;
    }
}

.body-data-board {
    width: 100%;
    background:#222a;
    display:flow-root;
    /* align-items:start; */
    /* justify-content: center; */
    height: 89%;
    padding:10px;
    /* font-size: .2em; */
    /* color: #A2AFA2; */
    /* border-bottom: 1px solid #222; */
    border-radius: 5px;
    /* margin-bottom: 3px; */
    overflow: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    transition: 1.4s;
}

.body-badge-board {
    /* display: flex; */
    width: 98%;
    height: 76%;
    display: flow-root;
    justify-content: space-around;
    align-items: center;
    background: #222a;
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: #333;
    /* flex-wrap: wrap; */
    justify-content: center;
    /* align-items: center; */
    gap: 1px; 
    min-height: 150px; /* Mantém o espaço fixo */
    position: relative; 
    /* Para evitar que elementos internos se desloquem demais */
    transition: 1s;
}



.body-badge-board .badges-img {
    /* min-width:85px; */
    width: 32%;
    /* max-width: 8vw; */
    display: inline-block;
    /* flex-grow: 1; */
    border-radius: 5px;
    background-color: #6b4f1d;
    margin: 5px 10px;
    cursor: pointer;
    position: relative;
    /* overflow-x: auto; */
    /* transition: transform 0.3s ease-in-out, background-color 0.3s; */
    transition: .85s;
}

.body-badge-board .badges-img:hover {
    width: 38%;
    position: relative;
    /* transform: scale(1.3);
    transition: 0.3s ease-in-out; */
    background-color: #9e6d19;
    /* z-index: 1005;  */
}

.body-data-board span {
    width: 300px;
    display: block;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* align-items: center; */
    justify-content: left;
    align-self: center;
    /* justify-self: center; */
    border-bottom: 1px dashed #888a;
    color: #888a;
}



.body-msg-board,
.body-helper-board {
    width: 100%;
    background:#222a;
    height: 89%;
    padding: 3px;
    font-size: 1.1em;
    /* color: #A2AFA2; */
    /* border-bottom: 1px solid #222; */
    overflow-y: auto;
    border-radius: 5px;
    margin-bottom: 3px;    
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.covens-link {
    text-decoration: none;
    width: 100%;
    align-self: center;
    justify-self: center;
}

.covens-link span {
    width:100%;
    position: relative;
    border-radius: 5px;
    text-align: center;
    color: #888a;
    display: inline-block;
    cursor: pointer;
    padding: 6px;
    font-size: .8em;
}

/* .body-msg-board:has(.covens-link span:hover) .list-covens-span{
    background-color: #6b4f1d;
} */

.covens-link span:hover {
    background-color: #46310d;
}


/* .body-msg-board .list-covens-span,
.body-msg-board .message-span, */
.body-helper-board span {
    width: 50%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    border-bottom: 1px dashed #888a;
    color: #888a;
}

.body-msg-board .message-span {
    font-size: .8em;
}

.body-msg-board .list-covens-span,
.body-msg-board .message-span {
    width: 100%;
    display: inline-block;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    border-bottom: 1px dashed #888a;
    color: #888a;
}

.support-block-link-charts {
    width: 60vw;
    margin-bottom: 0;
    /* border: 1px solid black; */
    height: 15vh !important;
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr .3fr .45fr .3fr 1fr;
    justify-content: center;
    align-items: flex-end;
    justify-self: center;
    align-self: center;
}

.latch-label{
    font-size: 1em;
    width: 100%;
    display: block;
    position: relative;
    align-self: center;
    justify-self: center;
    font-weight: bold;
    color: #08080a57;
    /* transition: .5s; */
    pointer-events: none;
}

.latch-img {
    display: block;
    align-self: stretch;
    justify-self: center;
    position: absolute;
    margin-top: -5vh;
}

.latch-img img{
    width: 8vw;
    /* align-self: baseline; */
    justify-self: baseline;
    pointer-events: none;

}

.latch-block-charts {
    display: flex;
    position: relative;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    /* min-width: 80px; */
    width: 15vw;
    max-width: 90px;
    height: 5vh;
    text-align: center;
    text-shadow: #111a;
    justify-content: center;
    /* align-self: center; */
    justify-self: center;
    /* border: 1px solid red; */
    /* background-color: #333; */
    grid-column: 3;
    background: linear-gradient(180deg,rgb(30, 32, 32) 0%,#22252e 50%,rgb(30, 32, 32) 100%);
    transition: .5s;
    cursor: pointer;
}

.latch-block-charts:hover > .latch-label {
    font-size: 1em;
    color:rgba(197, 211, 246, 0.659) ;
    text-shadow: 0px 0px 25px rgb(197, 211, 246);
}

.tower-one-block-charts {    
    grid-column: 2;
    background: linear-gradient(90deg,rgb(30, 32, 32) 0%,#22252e 50%,rgb(30, 32, 32) 100%);
}
.tower-two-block-charts {    
    grid-column: 4;
    background: linear-gradient(90deg,rgb(30, 32, 32) 0%,#22252e 50%,rgb(30, 32, 32) 100%);

}

.tower-one-block-charts,
.tower-two-block-charts {
    display: flex;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    justify-self: center;
    min-width: 45px;
    width: 7.5vw;
    max-width: 60px;
    /* border: 1px solid red; */
    height: 10vh;
    /* background-color: #333; */
    background-color: #22252e;
}

.show-face-mbit-start {
    width: 80%;
    max-height: 85%;
    padding: 35px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: center;
    align-self: center;
    border-top-left-radius: 24vw;
    border-top-right-radius: 24vw;
    /* background: #f7e7c132; */
    border-top:1px solid #3a3a3a;
    border-left:1px solid #3a3a3a;
    
    border-bottom:1px solid #222;
    border-right:1px solid #222;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    /* background-color: #22252e; */
    
    background: linear-gradient(180deg,rgb(30, 32, 32) 0%,#22252e 20%,#22252e 40%,rgb(30, 32, 32) 100%);
    z-index: 1;
}


.block-link-charts::before {
    content: "";
    /* display: block; */
    position: absolute;
    z-index: 4;
    /* top: 0;
    left: 0; */
    width: 100%;
    height: inherit;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 2px,
        transparent 10px
    ), 
    repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 2px,
        transparent 10px
    );
    border-radius: inherit;
    pointer-events: none; 
}

.block-link-charts {
    position: relative;
    display: grid;
    /* width: 50vw;
    height: 50vh; */
    width: 500px;
    height: 500px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    border-top: .6px solid rgba(68, 68, 68, 0.363);
    border-left: .6px solid rgba(68, 68, 68, 0.363);
    border-bottom: .6px solid rgba(17, 17, 17, 0.385);
    border-right: .6px solid rgba(17, 17, 17, 0.385);
    /* align-items: center;
    justify-content: center; */
    padding: 8.5px;
    /* background-color: #222a; */
    background-color: #292d35;
    border-radius: 250px;
    /* box-shadow: 0 1px 2px #000; */
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    z-index: 2;
}

.block-link-charts .blockBTC #btnBtc,
.block-link-charts .blockXRP #btnXRP,
.block-link-charts .blockCHZ #btnCHZ,
.block-link-charts .blockSHIBA #btnSHIBA,
.block-link-charts .blockPEPE #btnPEPE,
.block-link-charts .blockETH #btnETH {
    text-decoration: none;
    z-index: 4;
}

.block-code-cripto {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 2;
    grid-row: 3;
    color: #999a;
    border-right: 3px solid #111a;
    border-bottom: 3px solid #111a;
    background-color: #333;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    text-shadow: 0 6px 10px #111;
    border-radius: 5px;
    min-width: 92px;
    width: 100%;
    overflow-x:auto;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    height: 100%;
    font-size:1.4em;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: 2s;
    z-index: 4;
}

.block-text-cripto{
    display: none;
    justify-self:center;
    align-self:center;
    grid-column: 2;
    grid-row: 3;
    /* color: #f7e7c1; */
    
    color: #999a;
    /* border: 6px solid #111a; */
    /* border-top: 3px solid #111a; */
    border-right: 3px solid #111a;
    /* border-left: 3px solid #111a; */
    border-bottom: 3px solid #111a;
    /* background-color: #222a; */
    background-color: #333;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    text-shadow: 0 6px 10px #111;
    border-radius: 5px;
    min-width: 92px;
    width: 100%;
    height: 100%;
    font-size: 1em !important;
    font-weight: bold;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: 2s;
    z-index: 4;
}

.block-link-charts #telBtn2,
.block-link-charts #telBtn4,
.block-link-charts #telBtn6,
.block-link-charts #telBtn8 {
    text-decoration: none;
    z-index: 4;
    display: block;    
    /* display: block; */
}

.block-link-charts #telBtn2 {
    grid-column: 2;
    grid-row: 2;
}

.block-link-charts #telBtn4 {
    grid-column: 1;
    grid-row: 3;
}

.block-link-charts #telBtn6 {
    grid-column: 3;
    grid-row: 3;
}

.block-link-charts #telBtn8 {
    grid-column: 2;
    grid-row: 4;
}

.block-link-charts #telBtn2 .blocktop-border-cripto,
.block-link-charts #telBtn6 .blockright-border-cripto,
.block-link-charts #telBtn4 .blockleft-border-cripto,
.block-link-charts #telBtn8 .blockbottom-border-cripto {
    z-index: 4;
    /* background:  #222a; */
    background: #333;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    width: 100%;
    height:  100%;
    font-size: 2em;
    text-shadow: 0 6px 10px #111a;
}

.block-link-charts #telBtn2 .blocktop-border-cripto:hover,
.block-link-charts #telBtn6 .blockright-border-cripto:hover,
.block-link-charts #telBtn4 .blockleft-border-cripto:hover,
.block-link-charts #telBtn8 .blockbottom-border-cripto:hover {
    background-color: rgba(68, 68, 68, 0.366);
}

.block-link-charts #telBtn2 .blocktop-border-cripto {
    border-radius:5px;
    /* border-top: 3px solid #111a; */
    border-right: 3px solid #111a;
    /* border-left: 3px solid #111a; */
    border-bottom: 3px solid #111a;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    height: 100%;
    /* grid-column: 2;
    grid-row: 2; */
}

.block-link-charts #telBtn6 .blockright-border-cripto {
    border-radius:5px;
    /* border-top: 3px solid #111a; */
    border-right: 3px solid #111a;
    /* border-left: 3px solid #111a; */
    border-bottom: 3px solid #111a;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    height: 100%;
    /* grid-column: 3;
    grid-row: 3; */
}

.block-link-charts #telBtn4 .blockleft-border-cripto {
    border-radius:5px;
    /* border-top: 3px solid #111a; */
    border-right: 3px solid #111a;
    /* border-left: 3px solid #111a; */
    border-bottom: 3px solid #111a;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    height: 100%;
    /* grid-column: 1;
    grid-row: 3; */
}

.block-link-charts #telBtn8 .blockbottom-border-cripto {
    border-radius:5px;
    /* border-top: 3px solid #111a; */
    border-right: 3px solid #111a;
    /* border-left: 3px solid #111a; */
    border-bottom: 3px solid #111a;    
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547);
    height: 100%;
    /* grid-column: 2 !important;
    grid-row: 4 !important; */
}

.blockBTC #btnBTC #blockBTC,
.blockXRP #btnXRP #blockXRP,
.blockCHZ #btnCHZ #blockCHZ,
.blockSHIBA #btnSHIBA #blockSHIBA,
.blockPEPE #btnPEPE #blockPEPE,
.blockETH #btnETH #blockETH {
    display: flex;
    justify-self: center;
    align-self: center;
    min-width: 45px;
    width: 4vw;
    border-radius: 25px;    
    background: #222 !important;
    border: 1px solid #111 !important;
    cursor: pointer;
    padding: 3px 6px;
    transition: .5s;
    z-index: 4;
}
/* div a img */
.blockBTC #btnBTC #blockBTC:hover,
.blockXRP #btnXRP #blockXRP:hover,
.blockCHZ #btnCHZ #blockCHZ:hover,
.blockSHIBA #btnSHIBA #blockSHIBA:hover,
.blockPEPE #btnPEPE #blockPEPE:hover,
.blockETH #btnETH #blockETH:hover {
    min-width: 50px;
    width: 4.5vw;
    box-shadow: 5px 5px 10px rgba(26, 24, 24, 0.547) !important;
    border: 1px solid #333;
    background: rgba(68, 68, 68, 0.19) !important;
}

.blockBTC {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 2;
    grid-row: 1;
}

.blockXRP {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 1;
    grid-row: 2;    
}

.blockCHZ {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 3;
    grid-row: 2;
    
}

.blockSHIBA {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 1;
    grid-row: 4;
    
}

.blockPEPE {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 3;
    grid-row: 4;
    
}

.blockETH {
    display: flex;
    justify-self:center;
    align-self:center;
    grid-column: 2;
    grid-row: 5;
    
}

/* ------------------------------------------------- parece ser o fim de MBIT ------------------------------- ? ---- */
/* teste */
/* .bloque {
    overflow: hidden;
    height: 45px;
    border: 1px solid red;
} */
/* ----------------------------------------------------------------main about ZZ------------------------------------ */
.main-aboutme-zz,
.main-about-zz {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #222;
    color: white;
    min-height: fit-content;
    margin-top: 4em;
    margin-bottom: 4em;
}

.zz-aboutme-big-box,
.zz-about-big-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    justify-content: center;
    width: 98vw;
    height: 100%;
    padding: 20px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444;
}

.zz-aboutme-paper,
.zz-about-paper {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    background: #fffbe8;
    width: 90%;
    max-width: 960px;
    margin: 24px auto;
    border-radius: 3px;
    padding: 32px 32px 36px 32px;
    min-height: 220px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.10), 0 1.5px 0 #f7e7c1 inset;
    /* border: 1.5px solid #f7e7c1; */
    border:8px solid #3e2b0227;
    position: relative;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #6b4f1d;
    /* Simula linhas de papel */
    /* background-image: repeating-linear-gradient(
        to bottom,
        #fffbe8 0px,
        #fffbe8 32px,
        #f7e7c1 33px,
        #fffbe8 34px
    ); */
}

.header-aboutme-zz,
.header-about-zz {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
}

.header-aboutme-zz p,
.header-about-zz p {
    margin: 0;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    color: #a67c00;
}

.body-aboutme-zz,
.body-about-zz {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: justify;
    gap: 16px;
    flex-wrap: wrap;
}

.aboutme-zz-icon,
.about-zz-icon {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
}

.about-zz-img {
    display: flex;
    flex-direction: row;
    margin: 3px;
}

.aboutme-zz-img {
    display: block;
    position: relative;
    margin: 3px;
}

.aboutme-zz-img img {
    max-width: 125px;
    position: relative;
    display: inline-flex;
    justify-self: right;
    margin-left: auto;
    margin-right: 5px;
    /* margin-left: 12px; */
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    background: #fffbe8;
    border: 1px solid #ffb300;
    cursor: pointer;
    border-radius: 50%;
    transition: 1s;
}


.aboutme-zz-img img:hover {
    border: 1px solid #46310d;
    border-radius: 5px;
}

.about-zz-img img {
    max-width: 95%;
    margin-left: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    background: #fffbe8;
    border: 1px solid #f7e7c1;
}

.aboutme-zz-text,
.about-zz-text {
    width: 98%;
    display: block;
    margin-bottom: 5px;
    line-height: 1.8 !important;
}

.aboutme-zz-text hr,
.about-zz-text hr,
.bmac-text hr,
.zz-text hr {
    border-color: wheat;
}

.aboutme-zz-text p,
.about-zz-text p {
    font-size: 1.1em;
}


/* -------------------------------------------------------- CBIT @Djpess 17/06/25 ------------------------- */
.main-cbit-home-board {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    padding: 18px 8px;
    background-color: #222;
    color: white;
    min-height: fit-content;
    margin-top: 4em;
    margin-bottom: 4em;
}

.cbit-home-board-big-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    justify-content: center;
    width: 98.5vw;
    height: 100%;
    padding: 20px 14px;
    background-color: #333;
    /* border-radius: 2px; */
    border: 1px solid #444;
}

.header-cbit-home-board {
    display: flex;
    align-items: flex-start;
    justify-content: left;
    margin-bottom: 20px;
    align-self: stretch;
    width:100%;
    padding: .25em .35em;
    position: relative;
    border: none;
    background: linear-gradient(90deg, #3a3a3a 0%, #232526 100%);
    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.15);
    text-align: center;
    height: fit-content;
    /* min-height: 110px; */
    border-radius: 3px;
    text-transform: uppercase;
    /* transition: 1s; */
    overflow-y: auto;
}

/* Efeito físico para botões */
.btn-cripto {
    display: flex;
    /* background: #23272f; */
    background: #222a;
    border: none;
    /* border-radius: 3px; */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: 
        background 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        text-shadow 0.2s;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-cripto-label {    
    color: #e0e0e0;
}

.btn-cripto a {
    color: inherit;
    text-decoration: none;
}

.btn-cripto li {
    min-width: 105px;
    display: flex;
    align-items: center;
    margin: 3px 5px;
    justify-content: center;
    font-size: 1em;
    font-weight: bold;
    border-radius: 3px;
    background-color: rgba(51, 51, 51, 0.463);
    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 5px 8px;
    transition: background-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.btn-cripto li:hover, .btn-cripto li:focus {
    /* background: #2e3540; */
    background: #444;
    color: #ffe066; /* amarelo padrão do seu tema */
    box-shadow: 2px 4px 2px rgba(0, 0, 0, 0.486);
    text-shadow: 0 2px 8px #ffb300, 0 0 2px #ffe066;
    outline: none;
}

.seja-apoiador{
    display: inline-flex;
    position: absolute;
    flex-direction: row;
    justify-self: right;
    align-self: center;
    right: 0;
    margin-right: 25px;
    text-decoration: none;
}
.box-apoiador {    
    /* padding: 5px; */
    background: #444 ;
    font-size: 1.3em;
    color: #e0e0e0;
    border-radius: 5px;
    padding: 3px 6px;
    /* text-shadow: 1px 1px 8px #000, 0 0 2px #ffe066; */
    /* transition: 1s; */
}

.box-apoiador:hover {
    background: #222;
    > .chamada-apoiador {
        color: #555;
        text-shadow:   0 1px 2px #000;
    }
}

.chamada-apoiador {
    display: inline-block;
    text-transform: capitalize;
    /* transition: 2s ; */
    color: #222;
    /* text-shadow:   0 1px 2px #000a; */
}

.apoiador {
    display: none;
}
/* ---------------------------------------------------------------------- msgStatus */
.msgStatus {
    display: none;
    width: fit-content;
    position: absolute;
    margin: auto;
    left: 50%;
    top: 5%;
    transform: translate(-50%,-50%);
    z-index: 9997;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    background: #444a;
    color: #e0e0e0c2;
    /* text-shadow: 1px 2px 4px #e0e0e0; */
    border: 1px solid #222a;
    border-radius: 5px;
}

/* --------------------------------------------------------------------- animação lenta  */
/* @keyframes mudarCor {
    0% { color: red; }
    50% { color: blue; }
    100% { color: green; }
} */

@keyframes mudarCor {
    0% { color: rgba(121, 36, 145, 0.8); }  /* 🔥 Tom quente, semelhante a couro envelhecido */
    25% { color: rgba(101, 40, 180, 0.85); } /* 🔥 Transição suave para um tom mais vibrante */
    50% { color: rgba(60, 165, 210, 0.9); } /* 🔥 Alaranjado leve, contrastando sem exagero */
    75% { color: rgba(50, 120, 190, 0.85); } /* 🔥 Mantém coerência na variação */
    100% { color: rgba(36, 80, 145, 0.8); } /* 🔥 Volta ao tom inicial, criando um fluxo natural */
}

.slow-change {
    animation: mudarCor 3s ease-in-out infinite alternate;
}

@keyframes brilhoOuro {
    /* 0% { background: linear-gradient(45deg, #9e6d19, #c8943c); }
    50% { background: linear-gradient(45deg, #c8943c, #e4b670); }
    100% { background: linear-gradient(45deg, #9e6d19, #c8943c); } */
    0% { color: #9e6d19;  }  /* 🔥 Tom quente, semelhante a couro envelhecido */
    25% { color: #c8943c; } /* 🔥 Transição suave para um tom mais vibrante */
    50% { color: #c8943c; } /* 🔥 Alaranjado leve, contrastando sem exagero */
    75% { color: #e4b670; } /* 🔥 Mantém coerência na variação */
    100% { color: #9e6d19; } /* 🔥 Volta ao tom inicial, criando um fluxo natural */
}

.gold-light {
    animation: brilhoOuro 3s infinite alternate ease-in-out;
}

@keyframes brilhoOuroShadow {
    /* 0% { background: linear-gradient(45deg, #9e6d19, #c8943c); }
    50% { background: linear-gradient(45deg, #c8943c, #e4b670); }
    100% { background: linear-gradient(45deg, #9e6d19, #c8943c); } */
    0% { color: #9e6d19; text-shadow: 0px 2px 2px #c8943c; }  /* 🔥 Tom quente, semelhante a couro envelhecido */
    25% { color: #c8943c;  text-shadow: 1px 3.5px 6px #c8943c; } /* 🔥 Transição suave para um tom mais vibrante */
    50% { color: #c8943c;  text-shadow: 2px 4.5px 6.5px #c8943c; } /* 🔥 Alaranjado leve, contrastando sem exagero */
    75% { color: #834f03;  text-shadow: 1.5px 3.5px 5.5px #783b0c; } /* 🔥 Mantém coerência na variação */
    100% { color: #9e6d19;  text-shadow: .5px 2px 2.5px #c8943c; } /* 🔥 Volta ao tom inicial, criando um fluxo natural */
}

.gold-light-shadow {
    animation: brilhoOuroShadow 3s infinite alternate ease-in-out;
}

/* @keyframes brasasVivas {
  0%   { text-shadow:  1px 0px 3px rgba(255, 85, 0, 0.8); }
  25%  { text-shadow:  0px 1px 4px rgba(255, 120, 0, 0.7); }
  50%  { text-shadow: -1px 0px 5px rgba(255, 60, 0, 0.85); }
  75%  { text-shadow:  0px -1px 4px rgba(255, 100, 20, 0.75); }
  100% { text-shadow:  1px 0px 3px rgba(255, 85, 0, 0.8); }
} */

@keyframes brasasVivas {
  0%   { text-shadow:  1px 0px 3px rgba(255, 85, 0, 0.8); }
  10%  { text-shadow:  0.7px 0.5px 3.5px rgba(255, 100, 0, 0.75); }
  20%  { text-shadow:  0.3px 0.8px 3.8px rgba(255, 115, 0, 0.72); }
  30%  { text-shadow:  0px 1px 4px rgba(255, 120, 0, 0.7); }
  40%  { text-shadow: -0.4px 0.8px 4.3px rgba(255, 105, 10, 0.73); }
  50%  { text-shadow: -1px 0px 5px rgba(255, 60, 0, 0.85); }
  60%  { text-shadow: -0.7px -0.5px 4.7px rgba(255, 70, 10, 0.82); }
  70%  { text-shadow: -0.3px -0.8px 4.4px rgba(255, 90, 15, 0.77); }
  80%  { text-shadow:  0px -1px 4px rgba(255, 100, 20, 0.75); }
  90%  { text-shadow:  0.5px -0.4px 3.6px rgba(255, 95, 10, 0.78); }
  100% { text-shadow:  1px 0px 3px rgba(255, 85, 0, 0.8); }
}

.fire-pit {
    animation: brasasVivas 1.155s infinite linear;
    transition: background .225s ease-in-out;
    /* background-color: #9e6d19; */
    color: #fff3e6;
}

.ghostfire-pit-v0 {
    animation: conjurarv0 1.155s infinite linear;
    transition: background .225s ease-in-out;
    /* background-color: #9e6d19; */
    color: #fff3e6;
}

@keyframes conjurarv0 {
    0%   { text-shadow: 0.5px -0.4px 3.6px rgba(75, 185, 250, 0.47); }
    7%  { text-shadow: 0.3px 0.8px 3.8px rgba(80, 205, 255, 0.4); }
    14%  { text-shadow: 0px -1px 4px rgba(85, 195, 255, 0.43); }
    21%  { text-shadow: 0px 1px 4px rgba(90, 215, 255, 0.42); }
    28%  { text-shadow: -0.7px -0.5px 4.7px rgba(60, 160, 240, 0.48); }
    35%  { text-shadow: -1px 0px 5px rgba(66, 173, 255, 0.5); }
    42%  { text-shadow: 1px 0px 3px rgba(66, 173, 255, 0.5);}
    49%  { text-shadow: -0.3px -0.8px 4.4px rgba(70, 180, 250, 0.45); }
    56%  { text-shadow: 0.7px 0.5px 3.5px rgba(70, 190, 255, 0.45);}
    63%  { text-shadow: 1px 0px 3px rgba(66, 173, 255, 0.5); }
    70% { text-shadow: -0.4px 0.8px 4.3px rgba(80, 200, 245, 0.46); }
    77%  { text-shadow: -0.3px -0.8px 4.4px rgba(70, 180, 250, 0.45); }
    84%  { text-shadow: 0.7px 0.5px 3.5px rgba(70, 190, 255, 0.45);}
    91%  { text-shadow: 1px 0px 3px rgba(66, 173, 255, 0.5); }
    100% { text-shadow: -0.4px 0.8px 4.3px rgba(80, 200, 245, 0.46); }
}


.ghostfire-pit {
  animation: conjurar 8s infinite ease-in-out;
  /* color: #e0f7ff; */
  color: rgba(166, 174, 190, 0.856);
  text-shadow: 1px 2px 8px rgba(19, 36, 46, 0.781),
               2px 4px 12px rgba(10, 23, 32, 0.719),
               4px 8px 20px rgba(11, 30, 48, 0.644);
  transition: background 2s ease-in-out;
}

@keyframes conjurar {
  0% {
    text-shadow: 0 0 6px rgba(100, 200, 255, 0.3),
                 0 0 10px rgba(80, 180, 255, 0.25),
                 0 0 18px rgba(60, 160, 255, 0.2);
  }
  25% {
    text-shadow: 0 0 10px rgba(120, 220, 255, 0.5),
                 0 0 16px rgba(100, 200, 255, 0.4),
                 0 0 24px rgba(80, 180, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 14px rgba(140, 240, 255, 0.6),
                 0 0 20px rgba(120, 220, 255, 0.5),
                 0 0 28px rgba(100, 200, 255, 0.4);
  }
  75% {
    text-shadow: 0 0 10px rgba(120, 220, 255, 0.5),
                 0 0 16px rgba(100, 200, 255, 0.4),
                 0 0 24px rgba(80, 180, 255, 0.3);
  }
  100% {
    text-shadow: 0 0 6px rgba(100, 200, 255, 0.3),
                 0 0 10px rgba(80, 180, 255, 0.25),
                 0 0 18px rgba(60, 160, 255, 0.2);
  }
}


@keyframes luzArcana {
    0%   { text-shadow: -0.5px -0.5px 9.5px rgba(66, 173, 255, 0.5); }
    04%  { text-shadow: -0.375px -0.375px 8px rgba(70, 190, 255, 0.45); }
    08%  { text-shadow: -0.25px -0.25px 6.5px rgba(80, 205, 255, 0.4); }
    12%  { text-shadow: -0.125px -0.125px 5px rgba(90, 215, 255, 0.35); }
    16%  { text-shadow: 0px 0px 3.5px rgba(80, 200, 245, 0.4); }
    20%  { text-shadow: 0.125px 0.125px 2px rgba(66, 173, 255, 0.45); }
    24%  { text-shadow: 0.25px 0.25px 0.5px rgba(60, 160, 240, 0.5); }
    28%  { text-shadow: 0.375px 0.375px 2px rgba(70, 180, 250, 0.45); }
    32%  { text-shadow: 0.5px 0.5px 3.5px rgba(85, 195, 255, 0.4); }
    36%  { text-shadow: 0.625px 0.625px 5px rgba(75, 185, 250, 0.35); }
    40% { text-shadow: 0.75px 0.75px 6.5px rgba(66, 173, 255, 0.4); }
    44%   { text-shadow: 0.875px 0.875px 8px rgba(66, 173, 255, 0.45); }
    48%  { text-shadow: 1px 1px 9.5px rgba(70, 190, 255, 0.4); }
    52%  { text-shadow: 1.125px 1.125px 11px rgba(80, 205, 255, 0.35); }
    56%  { text-shadow: 1.25px 1.25px 9.5px rgba(90, 215, 255, 0.4); }
    60%  { text-shadow:1.375px 1.375px 8px rgba(80, 200, 245, 0.45); }
    64%  { text-shadow: 1.5px 1.5px 6.5px rgba(66, 173, 255, 0.5); }
    68%  { text-shadow: 1.625px 1.625p 5px rgba(60, 160, 240, 0.45); }
    72%  { text-shadow: 1.75px 1.75px 3.5px rgba(70, 180, 250, 0.4); }
    76%  { text-shadow: 1.875px 1.875px 2px rgba(85, 195, 255, 0.35); }
    80%  { text-shadow: 2px 2px 2.5px rgba(75, 185, 250, 0.4); }
    84%  { text-shadow: 1.875px 1.875px 6.5px rgba(75, 185, 250, 0.35)   ; }
    88%  { text-shadow: 1.625px 1.75px 5px rgba(75, 185, 250, 0.5); }
    92%  { text-shadow: 1.5px 1.625px 3.5px rgba(75, 185, 250, 0.3); }
    96%  { text-shadow: 1.375px 1.65px 2px rgba(75, 185, 250, 0.6); }
    100%  { text-shadow: 1.25px 1.5px 0.5px rgba(75, 185, 250, 0.2); }
}


/* config tempo effect */
:root {
  --tempo-arcano: 20s;
}
.mestre-arcano {
    color: #d8eaff;
    /* color: #23272f; */
    font-weight: bold;
    text-shadow:
        0 0 6px rgba(66, 173, 255, 0.5),   /* brilho mágico azulado */
        0 0 20px rgba(66, 173, 255, 0.3),  /* auréola suave */
        1px 1px 0px #111,                  /* sombra escura de baixo */
        -1px -1px 0px #000;   
        
    animation: luzArcana var(--tempo-arcano) infinite both;
    transition: background 1s ease-in-out;/* profundidade do alto-relevo */
}

.opacity-punch-hight {
    opacity:.5;    
}
.opacity-punch {
    opacity:.75;    
}
/* ----------------------------------------------------------------------------------------- */

.dynamic-text-body-old {
    text-align: center;
    font-size: 1.3em;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
}

.dynamic-text-old {
    font-weight: bold;
    color: #ffe066;
    text-shadow: 1px 1px 8px #000, 0 0 2px #ffe066;
    letter-spacing: 1px;
    /* padding: 0.5em 1em; */
    border-radius: 6px;
    background: rgba(40,40,40,0.7);
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    margin: 5px;
}

.body-home-board-cbit {
    /* align-self: auto; */
    height: fit-content;
    width: 100%;
    padding: 10px 5px;
    background-color: #444;
    border-radius:3px;
    border: 1px solid #555;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 2fr;
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: #333a;
}

/* breaking-news */

.breaking-news a {
    color: #ffe066;
    text-decoration: none;
}

.breaking-news a:hover {
    color: #ffcc00;
    text-decoration: underline;
}

.breaking-news {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    font-weight: bold;
    color: #ffe066;
    background: #222;
    border: 3px solid #555;
    padding: 8px 0;
    height: 40px;
    margin-bottom: 15px;
}

.breaking-news-inner {
    display: inline-block;
    position: absolute;
    will-change: transform;
    left: 100%;
    animation: marquee 160s linear infinite;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    13%  { transform: translateX(-14%); }
    25%  { transform: translateX(-28%); }
    38%  { transform: translateX(-42%); }
    50%  { transform: translateX(-56%); }
    63%  { transform: translateX(-70%); }
    75%  { transform: translateX(-84%); }
    88%  { transform: translateX(-100%); }
    100%  { transform: translateX(-114%); }
}

/* dados recebidos */
.area_chart{
    width:99%;
    height:88%;
}

.last-chart-vol {
    grid-row: 2 ;
    grid-column: 1/3;
    display: block;
    width: 100%;
    /* border: 1px solid white; */
    border-radius: 3px;
    align-self: center  ;
    justify-self: center;
    margin-top: 15px;
    padding: 5px 10px;
    background-color: #333;
}

.last-chart-vol .span-last-chart {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffe066;
    text-shadow: 0 1px 2px #000a;
    margin-bottom: 10px;
}

.last-chart-vol img {
    justify-self: left;
    margin: 10px;

}

.processed-data{
    grid-row: 1 ;
    grid-column: 2;
    width: 100%;
    display: flex;
    padding: 5px 10px;
    flex-direction: column;
    border: 1px solid #555;
    border-radius: 3px;
    background-color: #333;
    height: fit-content;
    margin-top: 15px;
}

.title-grafo {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: fit-content;
    /* border: 1px solid #555; */
    /* border-radius: 3px; */
    /* background-color: #232526; */
    background: linear-gradient(90deg, #3a3a3a 0%, #232526 100%);
    
    list-style: none !important;
    padding: 5px 5px;
    margin: 0;
}

.title-grafo li a {
    text-decoration: none;
}

.title-grafo li a div:hover {
    background-color: #414345;
}


.title-grafo li a div {
    display: inline-flex;
    background-color: #333;
    color: #555;
    padding: 3px 5px;
    border-radius: 5px;
    /* text-align: center; */
    align-items: center;
    justify-content: center;
}

.title-grafo li a div img {
    width: 20px;
    /* display: inline; */
    position: relative;    
}

.title-grafo li{
    font-size: 1.2em;
    font-weight: bold;
    color: #ffe066;
    text-shadow: 0 1px 2px #000a;
    /* margin-right: 10px; */
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #414345;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.chart-container {
    /* width:654px;
    height:218px; */
    display: inline-block;
    margin-top: 6px;
}

.old_chart_img {
    display: none;
}

.column_chart {
    display: block;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hidden {
    display: none !important;
}

/* card cripto */
.card-cripto{
    grid-row: 1;
    grid-column: 1;
    width: fit-content;
    justify-self: center;
    height: fit-content;
    padding: 12px;
    /* left: 0; */
    display: inline-block;
    /* background-color: #232526; */
    background: linear-gradient(90deg, #3a3a3a 0%, #232526 100%);
    /* background: linear-gradient(90deg, #2c2c2c 0%, #414345 100%); */
    border-radius: 3px;
    border: 1px solid #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.cota-dol-brl {
    width: 98%;
    margin-top: 5px;
    background: #555;
    /* border: 2px 0 0 2px solid #232526; */
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /* border-bottom-left-radius: 3px; */
    /* border-bottom-right-radius: 3px; */
    align-items: center;
    font-size: 1em;
    color: #666;
}

#cotaDolBrl,
#cota1DolBrl {
    /* color: #8B9A8D; */
    color: #85BB65;
}

.title-table {
    list-style: none;
    font-size: 1.5em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* color: #ffe066; */
    text-shadow: 0 1px 2px #000a;
    margin-bottom: 10px;
    text-align: center;
    /* border: 1px solid #555; */
    background: none;
    /* background-color: #232526; */
}

.title-table a {
    text-decoration: none;
}

.title-table img {
    width: 30px;
    margin-right: 10px;
    display: inline-flex;
    position: relative;
    border-radius: 50%;
    /* background: #f7e7c1a0; */
    background: #8B9A8D;
    border: 1px solid transparent;
    cursor: pointer;
}

.title-table img:hover {    
    background: #A0D995;
}

.div-white,
.div-red,
.div-green {
    border-radius:55%;
    margin:2px;
    /* padding: auto auto; */
    display: inline-flex;
    float:right;
    /* text-align: center; */
    justify-content: center;
    align-items: center;
    /* position: relative; */
    padding: .20em;
    width: fit-content;
    height: fit-content;
    opacity: .5;
    cursor:pointer;
}

.div-white {    
    background-color: #e0e0e0;
}
.div-red {
    background-color: #ff5050;
}

.div-green {
    background-color: #00ff99;
}

.div-white span,
.div-red span,
.div-green span {
    align-self: center;
    justify-self: center;
    position: relative;
    color: #444;
    /* display: flex; */
    font-size: .7em;
    width: .6em;
    height: .6em;
    line-height: .6em;
    text-align: center;
    text-shadow: 3px 3px 4px #000a;
}

.div-white:hover,
.div-red:hover,
.div-green:hover {
    opacity: 1;
}

.api-data-list  {
    list-style: none;
    padding: 5px;
    width: fit-content;
    margin: 2px auto;
    background-color: #333;
    /* border: 1px solid #444; */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
    /* border-radius: 5px; */
    display: block;
}

.api-data-list li {
    padding: 14px 18px;
    display: flex;
    min-width: 200px;
    justify-content: space-around;
    align-items: center;
    border-right: 1px solid #333;
    font-family: 'Roboto Mono', monospace, monospace;
    /* font-size: 1.08em; */
    background: linear-gradient(90deg, #232526 0%, #414345 100%);
    transition: background 0.2s, box-shadow 0.2s;
    letter-spacing: 0.5px;
    /* gap: 4px;  */
}

.api-data-list li:nth-child(even) {
    background: linear-gradient(90deg, #232526 0%, #2c2c2c 100%);
}

.api-data-list li:hover {
    background: #222e;
    box-shadow: 0 2px 8px #0006;
    cursor: pointer;
}

.key-label {
    font-weight: 600;
    color: #ffe066;
    text-shadow: 0 1px 2px #000a;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.08em;
}

.value-label {
    font-weight: bold;
    /* color: #00ff99; */
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px #000a;
    font-size: .9em;
}

.value-label.negative {
    color: #ff5050;
}

.value-label.currency {
    color: #00ff99;
}

/* -------------------------------------------------------------------- main-auth-process --------------------------*/
.main-auth-process {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #222;
    color: white;
    min-height: fit-content;
    margin-top: 4em;
    margin-bottom: 4em;
}

.containter-auth-process {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    margin-top: 0;
    justify-content: center;
    height: 100%;
    padding: 20px;
    background-color: #333;
    border-radius: 10px;
    border: 1px solid #444;
}

.box-auth-process {
    width: 40%;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 35px 45px;
    display: flex;
    flex-direction: column;
    align-self: center;
    /* justify-content: center; */
    height: fit-content;
    /* padding: 8px 16px; */
    border-radius: 10px;
    background: #222;
}

.title-auth-process {
    width: 100%;
    background: #888;
    padding: 5px 10px;
    text-transform: uppercase;
    justify-content: space-between;
    font-weight: bold;
    font-size: 1.3em;
    border-radius: 5px;
    margin-bottom: 10px;
    
    background: linear-gradient(90deg, #888 0%, #414345 100%);
    letter-spacing: 0.5px;
}

.title-auth-process a {
    text-decoration: none;
    color: #333;
}

.criar-on {
    background: linear-gradient(90deg, #414345 0%, #888 100%);
}

.label-login {
    display: flex;
    float: left;
    top: 0;
    left: 0;
    padding: 3px 15px;
    /* border: 1px solid #2e3540; */
    cursor: pointer;
    border-radius: 3px;
    /* transition: .5s; */
}

.label-login:hover,
.label-criar:hover {
    background: #555;
    color: #777;
    text-shadow: 0 1px 1px #000a;
    box-shadow: 0 2px 8px #0006;
}

.label-criar {
    display: flex;
    float: right;
    top: 0;
    right: 0;
    padding: 3px 5px;
    /* border: 1px solid #2e3540; */
    cursor: pointer;
    border-radius: 3px;
}

.body-auth-process {
    width: 100%;
    background: #888;
    padding: 5px 15px;
    text-transform: uppercase;
    color: #333;
    font-weight: bolder;
    font-size: 1em;
    border-radius: 5px;
    margin-bottom: 5px;
}

.body-auth-process form {
    display: flex;
    flex-direction: column;
}

.body-auth-process form label {
    margin-bottom: 10px;
    margin-left: 25px;
    margin-top: 15px;
    color: #000;
}
.body-auth-process form input {
    width: 85%;
    display: flex;
    align-self: center;
    margin-bottom: 5px;
    color: #fffbe8;
    padding: 8px 12px;
    font-size: 1.2em;
    border-radius: 5px;
    border: transparent;
    background-color: #333;
}
.body-auth-process form button {
    width: 85%;
    display: flex;
    align-self: center;
    justify-content: center;
    margin-bottom: 25px;
    margin-top: 15px;
    color: #fffbe8;
    padding: 5px 8px;
    font-size: 1.2em;
    border-radius: 5px;
    border: transparent;
    background: #444;
    cursor: pointer;
}

.body-auth-process form button:hover {
    background-color: #555;
}

/* main home board */
.main-board-zz {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    background-color: #222;
    color: white;
    min-height: fit-content;
    margin-top: 4em;
    margin-bottom: 4em;
}

.zz-big-box {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    margin-top: 0;
    justify-content: center;
    height: 100%;
    padding: 20px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444;
}

/* menu topic */
.zz-aboutme-menu-topic,
.zz-about-menu-topic,
.zz-menu-topic {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    height: fit-content;
    padding: 8px 16px;
    border-radius: 3px;
    background:linear-gradient(90deg,transparent 0%, #222 35%,#222 50%, #222 75%, transparent 100%);
}

.aboutme-menu-topic,
.about-menu-topic,
.menu-topic {
    display: flex;
    width: 75%;
    /* height: 90px; */
    align-self: center;
    justify-content: center;
    padding: 5px 84px;
    border-radius: 3px;
    box-shadow: 1px 0 1px transparent;
    background: #fffbe880 ;
    /* background:linear-gradient(90deg,transparent 0%,#fffbe880 50%,transparent 100%); */
}

.aboutme-menu-topic a,
.about-menu-topic a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.aboutme-menu-topic a img,
.about-menu-topic a img,
.menu-topic img {
    width: 75px;
    /* max-height: 70px; */
    margin: 5px;
    border-radius: 3px;
    /* border: 2px solid transparent; */
    transition: .2s;
    /* box-shadow: 1px 1px 15px rgba(34, 34, 34, 0.444); */
    padding: 3px 10px;
    cursor: pointer;
}

.aboutme-menu-topic a img:hover,
.about-menu-topic a img:hover,
.menu-topic img:hover {
    background: #fffbe881;
    /* padding: 0 8px; */
    /* border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid #222a;
    border-bottom: 2px solid #222a; */
    box-shadow: 4px 4px 6px #222a; 
}

.aboutme-zz-img{
    width: 100%;
    position: relative;
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row;
    margin: 3px;
}

.aboutme-img {
    display: flex;    
    /* border: 3px solid transparent !important; */
    justify-self: center;
    align-self: center;
    min-width: 75px;
    width: 75px;
    min-height: 75px;
    cursor: pointer;
    transition: 1s;
}

.aboutme-img:hover {
    border: 3px solid #46310d;
    border-radius: 5px;
}

.active {
    background: #fffbe881;
    padding: 0 8px !important;
    box-shadow: 0 2px 8px #0006;
}

/* comments */

.box-zz-comments {
    width: 72%;
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    height: fit-content;
    padding: 5px 8px;
    border-radius: 5px;
    background: #222;
}

.zz-comments-label {
    display: flex;
    justify-content: right;
    align-self: center;
    width: 98%;
    height: fit-content;
    padding: 5px 10px;
    font-size: 1.2em;
    color: #555;
    text-transform: uppercase;
    background: #fffbe8;
    border-radius: 3px;
    margin-top: 10px;
}

.zz-comments-container {
    display: flex;
    margin-top: 6px;
    margin-bottom: 12px;
    align-self: center;
    width: 98%;
    /* height: fit-content; */
    height: 450px;
    padding: 5px 10px;
    font-size: 1.3em;
    background: #444;
    border-radius: 3px;
    
}

.zz-paper {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    background: #fffbe8;
    width: 90%;
    max-width: 960px;
    margin: 24px auto;
    border-radius: 3px;
    border:8px solid #3e2b0227;
    padding: 32px 32px 36px 32px;
    min-height: 220px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.10), 0 1.5px 0 #f7e7c1 inset;
    /* border: 1.5px solid #f7e7c1; */
    position: relative;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #6b4f1d;
    /* Simula linhas de papel */
    /* background-image: repeating-linear-gradient(
        to bottom,
        #fffbe8 0px,
        #fffbe8 32px,
        #f7e7c1 33px,
        #fffbe8 34px
    ); */
}

.zz-icon {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    
}

.zz-icon img {
    width: 65px;
}

.span-data-main-home-data {
    font-size: .65em;
    position: relative;
    text-transform: uppercase;
    color: #666;
}

.span-data-main-home-autor {
    font-size: .6em;
    text-transform: uppercase;
    color: #666;
}

.header-zz {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
}

.header-zz p {
    margin: 0;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    color: #a67c00;
}

.body-zz {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: justify;
    gap: 16px;
    flex-wrap: wrap;
}

.bmac-text p a,
.aboutme-zz-text p a,
.about-zz-text p a,
.about-zz-text ul li a,
.zz-text p a{
    text-decoration: none;    
    color: #23272f;
    font-weight: bold;
}

/* ---------------------------------------------------------- effects text MD @Djpess 18/06/25 -------- */
/* btnSuspenso btnStick */
.inner-text-link {
    text-decoration: none;
    padding: 4px;
    border-radius: 5px;
    background: #f7e7c1;
    /* text-shadow: 1px 0 2px #222a; */
    box-shadow: 4px 2px 2px #222a;
}

.inner-text-link:hover {
    background: #ffb3005c;
    box-shadow: 6px 4px 4px #222a;
}

/* diferencial btnText */
.special-ink {
    color: #9e6d19 !important;
}

.normal-ink {
    color: #23272f;
}

.min-size-icon-top-right {
    font-size: 60%;
    font-weight: bold;
    vertical-align: super;
    text-indent: 25%;
}

/* effect OR */
.take-text-group {
    cursor: pointer;
    background: transparent;
}

/* .no-justify {
    text-align: left !important;
} */

/* text MD */
.text-group,
.t-group {
    display:none !important;
}

.first {
    padding: 3px;
    border-top: .5px dashed #6b4e1d6a;
    border-bottom: .5px dashed #6b4e1d6a;
    border-left: .5px dashed transparent;
    border-right: .5px dashed transparent;
    /* border-radius: 5px; */
}


/*  ---------------------------------------------------------- effects text MD fim ---------------------------  */

/* .about-zz-text p a:hover */
.bmac-text p a:hover,
.aboutme-zz-text p a:hover,
.about-zz-text ul li a:hover,
.zz-text p a:hover{
    text-decoration: none;
    color: #9e6d19;
}

.body-zz .zz-text {
    width: 98%;
    display: block;
    margin-bottom: 5px;
}

.body-zz .zz-text p {
    margin: 0 15px;
    display: block;
    font-size: 1.1em;
    color: #6b4f1d;
    /* flex: 1 1 200px; */
    line-height: 1.8 !important;
}

.zz-text p img {
    max-width: 60px;
    width: 45px;
    min-width: 40px;
    border: 1px solid transparent;
    border-radius: 50%;
}

.zz-img {
    display: flex;
    flex-direction: column;
    margin: 3px;
}

.zz-img img {
    max-width: 95%;
    margin-left: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    background: #fffbe8;
    border: 1px solid #f7e7c1;
}

/* BUYMEACOFFEE */
/* .default-color-text {
    color: #e0e0e0;
} */

.main-bmac {
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #222;
    color: white;
    min-height: fit-content;
    margin-top: 4em;
    margin-bottom: 4em;
}

.bmac-big-box {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    margin-top: 0;
    justify-content: center;
    height: 100%;
    padding: 15px;
    background-color: #333;
    border-radius: 3px;
    border: 1px solid #444;
}

.bmac-paper {
    display: flex;
    flex-direction: column;
    background: #fffbe8;
    width: 90%;
    max-width: 960px;
    margin: 24px auto;
    border-radius: 3px;
    padding: 32px 32px 36px 32px;
    min-height: 220px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.10), 0 1.5px 0 #f7e7c1 inset;
    /* border: 1.5px solid #f7e7c1; */    
    border:8px solid #3e2b0227;
    position: relative;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #6b4f1d;
    /* Simula linhas de papel */
    /* background-image: repeating-linear-gradient(
        to bottom,
        #fffbe8 0px,
        #fffbe8 32px,
        #f7e7c1 33px,
        #fffbe8 34px
    ); */
}

.qr-code-flutuante {
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
}

.qr-code-flutuante label {
    position: fixed;
    font-size: .8em;
    /* background: #f7e7c17f; */
    border-radius: 5px;
    font-weight: bold;
    text-align: left;
    color: transparent;
    padding: 3px;
    z-index: 301;
    transition: 2s;
}

.qr-code-flutuante img{
    position: fixed;
    width: 120px;
    cursor: pointer;
    display: block;
    border: 3px solid transparent;
    border-radius: 5px;
    transition: 2s;
    z-index: 300;
    margin-top: 20px;
}

.qr-code-flutuante:has(.img-qrcode:hover) .label-qrcode {
    background: #333a;
    color: inherit;
}

.qr-code-flutuante img:hover {
    border: 3px solid #46310d;
    width: 190px;
}

.bmac-icon {
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    
}

.bmac-icon img {
    width: 50px;
}

.header-bmac {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;
}

.header-bmac p {
    margin: 0;
    text-align: right;
    font-size: 1.3em;
    font-weight: bold;
    color: #a67c00;
}

.body-bmac {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: justify;
    gap: 16px;
    flex-wrap: wrap;
}

.body-bmac .bmac-text {
    width: 98%;
    display: block;
    margin-bottom: 5px;    
    line-height: 1.8 !important;
}

.body-bmac .bmac-text p {
    margin: 0 15px;
    display: block;
    font-size: 1.1em;
    color: #6b4f1d;
    /* flex: 1 1 200px; */
}

.bmac-img {
    display: flex;
    flex-direction: column;
    margin: 3px;
}

.bmac-img img {
    max-width: 95%;
    /* margin-left: 12px; */
    border-radius: 8px;
    box-shadow: 0 2px 8px #0002;
    background: #fffbe8;
    border: 1px solid #f7e7c1;
    cursor: pointer;
}

@media (max-width:1450px) {
    .main-cbit-home-board{
        padding: 8px 6px;
    }

    .cbit-home-board-big-box{
        padding: 10px 8px;
    }

    .header-cbit-home-board {
        /* display: flex; */
        /* align-items: flex-start; */
        /* justify-content: left; */
        margin-bottom: 10px;
        /* align-self: stretch; */
        /* width:100%; */
        /* padding: .1em .2em; */
        /* position: relative; */
        /* height: fit-content; */
    }

    /* main home zzurto */
    .main-aboutme-zz,
    .main-about-zz,
    .main-board-zz {
        padding: 15px 8px;
    }

    .zz-aboutme-big-box,
    .zz-about-big-box,
    .zz-big-box {
        margin-top: 0;
        justify-content: unset;
        height: fit-content;
        padding: 10px;
    }

    /* menu topic */
    .zz-aboutme-menu-topic,
    .zz-about-menu-topic,
    .zz-menu-topic {
        width: 80%;
    }

    /* comments */
    .box-zz-comments {
        width: 85%;
        padding: 3px 5px;
    }

    .zz-comments-label {
        padding: 3px 8px;
    }

    .zz-comments-container {
        margin-top: 4px;
        margin-bottom: 10px;
        width: 98%;
        height: 300px;
        /* padding: 5px 10px;
        font-size: 1.3em;         */
    }

    .zz-aboutme-paper,
    .zz-about-paper,
    .zz-paper {
        /* display: flex; */
        /* flex-direction: column; */
        width: 100%;
        margin: 20px auto;
        padding: 14px 12px 30px 12px;
    }

    /* bmac */

    


    /* BuyMeACoffee */    
    .main-bmac {
        padding: 10px;
        min-height: fit-content;
        margin-top: 4em;
        margin-bottom: 1em;
    }

    .bmac-big-box {
        height: 98%;
        padding: 10px;
    }

    .bmac-paper {
        width: 100%;
        margin: 20px auto;
        padding: 14px 12px 30px 12px;
        height: fit-content;
        /* max-width: 960px; */
        /* min-height: 220px; */
    }
    
    .body-zz .zz-text p {
        line-height: 1.6 !important;
    }

    .span-data-main-home-data {
        font-size: .5em;
    }

    .span-data-main-home-autor {
        font-size: .5em;
    }

    .bmac-img {
        margin-bottom: 40px;
        /* display: block; */
        /* flex-direction: column; */
        margin: 3px;
    }

    .block-link-charts {
        width: 425px;
        height: 425px;
    }

}

@media (max-width:1250px) {
    /* cripto bit */
    .chamada-apoiador {
        display: none;
    }
    .body-home-board-cbit {
        /* justify-content: center; */
        /* align-items: center; */
        padding: 5px 2px;
        grid-template-rows: auto 1fr 1fr;
        grid-template-columns: none;
    }
    /* card cripto */    
    .card-cripto{
        grid-row: 1 !important;
        /* display: inline-flex; */
        position: relative;
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
        /* align-self: center; */
        grid-column: auto !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    }
    .processed-data {
        position: relative;
        justify-self: left;
        grid-row: 2;
        grid-column: auto;
    }
    #column_chart{
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    }
    .last-chart-vol {
        grid-row: 3;
        grid-column: auto;
    }
    #area_chart {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    }
    /* cards */
    .show-face-mbit-start {
        width: 94%;
    }

    .envelope-msg-board-content,
    .envelope-helper-board-content {
        border-radius: 5px;
        /* border: 3px solid #222; */
        /* padding: 3px; */
        width: 30vw;
        height: 30vh;
        background: #292d35b0;
    }

    .body-msg-board,
    .body-helper-board {        
        height: 89%;
    }

    .body-msg-board .list-covens-span,
    .body-msg-board .message-span {
        width: 100%;
        display: inline-block;
        flex-direction: column;
    }

    .body-helper-board span {
        width: 50%;
        display: inline-block;
        flex-direction: row;
    }

    /* badges card */
    .badge-board-box,
    .data-board-box {
        margin-top: 50vh;
        margin-left: 1.2vw;
    }

}

@media (max-width:960px) {
    /* navbar */
    .navbar-title {
        left: 30.5%;
    }

    .navbar-titlesize-class{
        font-size: 1em;
    }

    .navbar-titlesize-class-plus{
        font-size: 1.4em;
    }

    .main-navbar .btn-li {
        margin-right: 3.5px;
        padding: 2px 6px;
    }

    /* cripto bit */
    /* Efeito físico para botões */
    .btn-cripto {
        display: block;
        max-width: 65%;
        font-weight: 600;
        padding: 5px 9px;
        position: relative;
        justify-content: left;
        /* overflow: unset; */
    }

    .btn-cripto li {
        min-width: 85px;
        display: inline-flex;
        align-items: center;
        margin: 3px 5px;
        justify-content: center;
        font-size: 1em;
        padding: 5px 8px;
    }
    
    /* cripto bit */
    .block-link-charts {
        /* width: 50vw;
        height: 50vh; */
        width: 280px;
        height: 280px;
    }
    .latch-img {
        margin-top: -2vh;
    }
    .latch-img img{
        width: 14vw;
    }

    .latch-label{
        font-size: .8em;
    }

    .body-helper-board span {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-self: center;
        justify-self: center;
    }

    .envelope-data-board-content,
    .envelope-badge-board-content  {
        border-radius: 5px;
        border: 3px solid #222;
        padding: 3px;
        width: 30vw;
        height: 18vh;
    }

    .envelope-data-board-content:hover,
    .envelope-badge-board-content:hover {
        width: 55vw;
        height: 30vh;
        box-shadow: 10px 8px 15px #111a;
        > .body-data-board{
            height: 89%;
        };
        > .body-badge-board {
            /* width: 100%; */
            height: 85%;
        };
    }
            
    .body-data-board {
        height: 75%;
    }


    .body-badge-board {
        min-height: 25%;
        /* height: 10%; */
    }

    /* .body-badge-board .badges-img{
        display: flex;
        justify-self: center;
        align-self: center;
        font-size: 5em;
    } */

    /* .body-badge-board .badges-img:hover{
        width: 45vw;
    } */

    .mbit-start-big-box,
    .cbit-start-big-box {
        width: 100vw;            
        height: 100vh;
    }

    /* helper card */
    .helper-board-box {
        margin-top: 9.5vh;
        /* margin-left: 1.2vw; */
    }

    /* msg  card */
    .header-msg-board {
        font-size: .8em;
        font-weight: lighter;
    }

    .msg-board-box {
        margin-top: 9.5vh;
        /* margin-right: 1.2vw; */
    }

    /* display codigos */

    .block-code-cripto {
        font-size: 1.2em;   
    }

    .block-link-charts #telBtn2 .blocktop-border-cripto,
    .block-link-charts #telBtn6 .blockright-border-cripto,
    .block-link-charts #telBtn4 .blockleft-border-cripto,
    .block-link-charts #telBtn8 .blockbottom-border-cripto {
        font-size: 1.4em;   
    }

    /* comments home */
    /* comments */
    .box-zz-comments {
        width: 98%;
        padding: 3px 5px;
    }

    .zz-aboutme-menu-topic,
    .zz-about-menu-topic,
    .zz-menu-topic {
        width: 90vw;
    }

    .aboutme-menu-topic,
    .about-menu-topic,
    .menu-topic {
        width: 89vw;
        /* background: linear-gradient(90deg,transparent 0%,#fffbe880  50%, transparent 100%); */
    }
    .about-menu-topic img,
    .aboutme-menu-topic img{
        width: 70px;
    }
    
    .menu-topic img {
        width: 60px;
    }

    .qr-code-flutuante img{ 
        width: 100px;
    }

    .main-footer {
        /* display: flex; */
        justify-content: space-between;
        align-items: normal;
        /* padding: 8px 16px; */
    }
    
    .footer-timer {
        margin-right: 06px; 
        font-size: 1em;
    }

    .footer-rights {
        display: inline-flex;
        left: 0;
        justify-content: left;
        align-items:flex-start ;
    }

    /* .footer-rights img {
        width: 20px;
        margin: 3px;
        display: inline-block;
    } */
    
    
    .body-brige {
        padding: 1.6vh 2.1vw;
    }

    .zz {
        font-size: 7.5em;
    }

    .minizz {
        font-size:5em;
    }
}

@media (max-width:450px) {

    .header-cbit-home-board {
        justify-content: center;
    }

    .btn-cripto{
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        justify-self: center;
        align-self: center;
        list-style: none;
        max-width: 95%;
        border-radius: 5px;
    }
    .btn-cripto a {
        flex: 1 1 15%; /* cada item ocupa ±45% da largura, podendo quebrar a linha */
        text-decoration: none;
    }

    .btn-cripto li {
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        min-width: 65px;
    }

    .box-apoiador {
        display: none;
    }

    .title-table {
        list-style: none;
        font-size: 1.3em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: none;
    }

    #titleTable {
        margin-bottom: 5px;
    }

    .api-data-list {
        padding: .8px;
    }

    .key-label {
        letter-spacing: 1px;
        font-size: .8em;
    }

    .value-label {
        font-size: .65em;
    }

    .main-navbar .btn-li {
        margin-right: 1px;
        padding: 1px 3px;
    }

    .btn-img {
        width: 10px;
    }

    .navbar-titlesize-class-plus {
        font-size: 1em;
    }

    .main-navbar {
        padding: 5px 8px;
    }
}