@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    font-family: 'Roboto', Arial,Helvetica,sans-serif;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #5d6382 #2b2f44;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #5d6382;
}

::-webkit-scrollbar-thumb {
    background-color: #2b2f44;
    border-radius: 20px;
    border: 3px solid #5d6382;
}

body, html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

ul {
    margin: 0px;
    padding: 0px;
}

h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

body {
    background-color: #1C1F2D;
}

header.header-main {
    background-color: #2b2f44;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 15px;
    border-bottom: 1px solid #5055738f;
}

header.header-main .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

a.logo-header img {
    height: 35px;
    width: auto;
}

.header-left button.btn-fav-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: #5d6382;
    border: 1px solid #2c3647;
    border-radius: 8px;
}

.header-left button.btn-fav-header:hover {
    color: #8ea5c0;
    border: 1px solid #343e52;
    transition: .3s;
}

.header-left button.btn-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #026fd3;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    outline: none !important;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header-right .exchange button.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    background-color: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid #5055738f;
    padding: 5px 10px;
    border-radius: 5px;
}

.header-right .exchange ul.dropdown-menu {
    background-color: #2b2f44;
    padding: 15px;
    border-color: #5055738f;
}

.header-right .exchange ul.dropdown-menu li {
    border-bottom: 1px solid rgba(132, 160, 191, 0.25);
}

.header-right .exchange ul.dropdown-menu li:last-child {
    border-bottom: none;
}

.header-right .exchange ul.dropdown-menu li:first-child a {
    border-radius: 5px 5px 0px 0px;
}

.header-right .exchange ul.dropdown-menu li:last-child a {
    border-radius: 0px 0px 5px 5px;
}

.header-right .exchange ul.dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 15px;
    font-weight: 500;
    color: #cfcfcf;
    padding: 10px;
}

.header-right .exchange ul.dropdown-menu a span:first-child {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    white-space: nowrap;
}

.header-right .exchange ul.dropdown-menu a span i,
.header-right .exchange ul.dropdown-menu a span.value {
    color: #8ea5c0;
}

.header-right .exchange ul.dropdown-menu a.active,
.header-right .exchange ul.dropdown-menu a:hover {
    transition: .3s;
    background-color: #1f2536;
    color: #fff;
}

.header-right .exchange ul.dropdown-menu a.active span i,
.header-right .exchange ul.dropdown-menu a.active span.value,
.header-right .exchange ul.dropdown-menu a:hover span i,
.header-right .exchange ul.dropdown-menu a:hover span.value {
    transition: .3s;
    color: #fff;
}

.header-right .exchange span.title-drop {
    background-color: #2b2f44;
    font-size: 10px;
    padding: 0px 3px;
    position: absolute;
    top: -6px;
    left: 10px;
}

.header-right .exchange button.dropdown-toggle i {
    font-size: 12px;
}

.header-right .exchange button.dropdown-toggle::after {
    color: #5055738f;
}

.header-right button.btn-depositar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    background-image: linear-gradient(75deg, rgba(6, 201, 49, 0.35) 1.75%, rgba(6, 201, 49, 0) 34.25%);
    background-color: #074f40;
    border: 1px solid #047838;
    color: #fff;
    outline: none !important;
}

.header-right button.btn-depositar-header svg {
    color: #5aa86b;
}

.header-right button.btn-depositar-header:hover {
    background-color: #095746;
    transition: .3s;
}

.header-right .depositar ul.dropdown-menu {
    background-color: #2b2f44;
    border-color: #5055738f;
    min-width: 275px;
    padding: 15px;
    font-size: 12px;
    color: #fff;  
}

.header-right .depositar ul.dropdown-menu.show {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.header-right .depositar ul.dropdown-menu p.title {
    font-size: 17px;
}

.header-right .depositar ul.dropdown-menu span.subtitle,
.header-right .depositar .select-payment span,
.header-right .depositar .value-payment,
.codePromo label {
    font-size: 14px;
}

.header-right .depositar .select-payment select {
    background-color: #131520;
    color: #fff;
    border: 1px solid #5055738f;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: none !important;
    cursor: pointer;
    padding: 7px 10px;
}

.header-right .depositar .value-payment div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-right .depositar .value-payment span.addon-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 37px;
    width: 37px;
    height: 37px;
    background-color: #131520;
    border: 1px solid #5055738f;
    border-right: none;
    border-radius: 5px 0px 0px 5px;
    color: #fff;
}

.header-right .depositar .value-payment input,
.codePromo input {
    color: #fff;
    background-color: #131520;
    border: 1px solid #5055738f;
    width: 100%;
    height: 37px;
    border-radius: 0px 5px 5px 0px;
    outline: none !important;
    padding: 5px;
}

.header-right .depositar .form-check {
    min-height: 0px;
    margin-bottom: 0px;
    padding-left: 25px;
    font-size: 14px;
}

.header-right .depositar .form-check label {
    cursor: pointer;
}

.header-right .depositar .form-check input {
    margin-left: -23px;
    margin-top: 2px;
    width: 17px;
    height: 17px;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #5055738f;
}

.header-right .depositar .form-check input:checked {
    background-color: rgba(0, 154, 249, .3);
    border-color: #009af9;
}

.codePromo {
    display: none;
}

.codePromo input {
    border-radius: 5px;
    padding: 5px 10px;
}

.header-right .depositar button.btn-fast-deposito {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    background-image: linear-gradient(75deg, rgba(6, 201, 49, 0.35) 1.75%, rgba(6, 201, 49, 0) 34.25%);
    background-color: #074f40;
    border: 1px solid #047838;
    color: #fff;
    outline: none !important;
}

.header-right .depositar button.btn-fast-deposito:hover {
    transition: .3s;
    filter: brightness(1.2);
    color: #0FAF59;
}

.header-right button.btn-perfil-header {
    background-color: #5d6382;
    color: #2b2f44;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    padding: 5px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dropdown.perfil .dropdown-menu.show {
    background-color: #2b2f44;
    border-color: #5055738f;
    padding: 0px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    display: flex;
    justify-content: center;
}

.dropdown.perfil .dropdown-menu .left-perfil {
    padding: 30px;
}

.dropdown.perfil .dropdown-menu .left-perfil {
    background-color: rgba(255, 255, 255, 0.025);
    border-radius: 5px 0px 0px 5px;
}

.dropdown.perfil .dropdown-menu .left-perfil .top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.dropdown.perfil .dropdown-menu .left-perfil .image-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    width: 130px;
    min-height: 130px;
    height: 130px;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.dropdown.perfil .infos-perfil {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dropdown.perfil .infos-perfil p.flag-name {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    font-size: 14px;
}

.dropdown.perfil .infos-perfil p.flag-name span,
.dropdown.perfil .infos-perfil a.level-user span {
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.dropdown.perfil .infos-perfil a.level-user {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #026fd3;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    padding: 4px;
}

.dropdown.perfil .infos-perfil .id-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dropdown.perfil button.btn-eye-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0px;
    background-color: transparent;
    color: #fff;
    border: none;
    width: 17px;
    height: 17px;
}

.dropdown.perfil .infos-perfil p.info-default,
.dropdown.perfil .infos-perfil .id-user p {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
}

.dropdown.perfil .infos-perfil i {
    font-size: 10px;
}

.dropdown.perfil .infos-perfil .id-user p i,
.dropdown.perfil .infos-perfil p.info-default i {
    color: #a6aac1;
}

.dropdown.perfil .warning-user p {
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: #fff;
}

.dropdown.perfil .warning-user p.acc-demo {
    background-color: #531b1f;
    border: 1px solid #f52914;
    -webkit-box-shadow: 0 0 4px 2px rgba(245, 41, 20, .3);
    box-shadow: 0 0 4px 2px rgba(245, 41, 20, .3);
}

.dropdown.perfil .warning-user p.acc-real {
    background-color: #352c24;
    border: 1px solid #ffa031;
    -webkit-box-shadow: 0 0 4px 2px rgba(189, 136, 64, .22);
    box-shadow: 0 0 4px 2px rgba(189, 136, 64, .22);
}

.dropdown.perfil .area-estatiscas-perfil {
    background-color: #202333;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.dropdown.perfil .area-estatiscas-perfil .top-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.dropdown.perfil .top-stats button.btn-reload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #026fd3;
    border: none;
    font-size: 12px;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
}

.dropdown.perfil .top-stats button.btn-reload:hover {
    transition: .3s;
    background-color: #0055a5;
}

.dropdown.perfil p.estatisticas-default {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dropdown.perfil p.estatisticas-default > span:first-child {
    color: #a6aac1;
}

.dropdown.perfil a.btnEstatisticasGlobal {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
    height: 30px;
    border-radius: 5px;
    margin-top: 10px;
    color: #fff;
    background-color: #026fd31a;
    border: 1px solid #026fd3;
}

.dropdown.perfil a.btnEstatisticasGlobal:hover {
    transition: .3s;
    background-color: #026fd399;
}

.dropdown.perfil p.status-info-perfil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
}

.dropdown.perfil p.status-info-perfil > span:first-child {
    color: #a6aac1;
}

.dropdown.perfil p.status-info-perfil span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 110px;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 10px;
}

.dropdown.perfil p.status-info-perfil span.verification-ok {
    background-color: #026fd399;
    border: 1px solid #026fd3;
}

.dropdown.perfil p.status-info-perfil span.verification-not {
    background-color: #352c24;
    border: 1px solid #ffa031;
    color: #ffa031;
}

.dropdown.perfil .dropdown-menu .right-perfil {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0px 5px 5px 0px;
    padding: 10px 0px;
}

.dropdown.perfil .right-perfil a {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    font-size: 14px;
    padding: 10px 30px;
    color: #a6aac1;
    background-color: transparent;
}

.dropdown.perfil .right-perfil a:hover {
    transition: .3s;
    background-color: #5055738f;
    color: #fff;
}

.dropdown.perfil a.btn-language-perfil {
    position: relative;
}

.dropdown.perfil a.btn-language-perfil .fa-chevron-down {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0px, -50%);
    transition: transform 0.3s ease;
    font-size: 12px;
}

.dropdown.perfil a.btn-language-perfil[aria-expanded="true"] .fa-chevron-down {
    transform: translate(0px, -50%) rotate(180deg);
}

div#collapseLanguage {
    background-color: #373b4d;
    max-height: 120px;
    overflow: auto;
}

aside.aside-main {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 60px;
    height: calc(100% - 60px);
    max-height: calc(100% - 60px);
    min-height: 655px;
    width: 85px;
    min-width: 85px;
    padding: 10px;
    background-color: #2b2f44;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

nav.nav-aside {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

a.item-nav-aside {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    height: 65px;
    border-radius: 5px;
}

a.item-nav-aside i {
    font-size: 1rem;
}

a.item-nav-aside.active,
a.item-nav-aside:hover,
a.item-nav-aside.show {
    background-color: #026fd3;
    transition: .3s;
}

.dropdown.more ul.dropdown-menu {
    top: 50% !important;
    transform: translate(70px, -50%) !important;
    background-color: #2b2f44;
    border-color: #5055738f;
    padding: 10px;
    border-radius: 5px;
}

.dropdown.more ul.dropdown-menu a {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    background-color: #202333;
    color: #fff;
    border: 1px solid #5055738f;
    border-radius: 5px;
    padding: 10px;
    padding-right: 25px;
    position: relative;
}

.dropdown.more ul.dropdown-menu a i.fa-chevron-right {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0%, -50%);
    font-size: 10px;
}

.dropdown.more ul.dropdown-menu li {
    margin-bottom: 5px;
}

.dropdown.more ul.dropdown-menu li:last-child {
    margin-bottom: 0px;
}

.dropdown.more ul.dropdown-menu a:hover {
    background-color: #026fd3;
    transition: .3s;
}

.aside-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.buttons-settings {
    display: flex;
    flex-wrap: wrap;
}

.buttons-settings button {
    width: 32.5px;
    min-width: 32.5px;
    height: 32.5px;
    min-height: 32.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: transparent;
    border: none;
    color: #61636c;
    border-radius: 5px;
}   

.buttons-settings button:hover {
    color: #84868f;
    background-color: #40445c8f;
    transition: .3s;
}

.aside-footer button.btn-social {
    background-color: #5055738f;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 100%;
    height: 65px;
    border-radius: 5px;
    border: none;
}

.aside-footer button.btn-social:hover {
    background-color: #40445c8f;
    transition: .3s;
}

.aside-footer button.btn-ajuda {
    background-color: #0FAF59;
    color: #fff;
    font-weight: 600;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    width: 100%;
    height: 60px;
    border-radius: 5px;
    border: none;
}

.aside-footer button.btn-ajuda:hover {
    background-color: #05c65e;
    -webkit-box-shadow: 0 4px 10px rgba(5, 198, 94, 0.3);
    box-shadow: 0 4px 10px rgba(5, 198, 94, 0.3);
    transition: .3s;
}

main.main-content {
    width: calc(100% - 85px);
    height: calc(100dvh - 60px);
    min-height: 655px;
    position: relative;
    left: 85px;
    padding: 10px;
    border-left: 1px solid #5055738f;
    display: flex;
    gap: 10px;
}

.page-content {
    width: 100%;
    height: 100%;
    background-color: rgb(28, 31, 45);
    border-radius: 5px;
    position: relative;
}

.body-chart {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.controls-chart {
    position: absolute;
    z-index: 2;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.buttons-controls-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.input-invest-chart .area-input,
.input-strikes-chart button.btn-strikes {
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    width: 125px;
    height: 64px;
}

.input-invest-chart .area-input {
    border-left: none;
    border-radius: 0px 7px 7px 0px;
    position: relative;
}

.input-invest-chart .area-input input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    padding: 5px 5px 25px 5px;
    outline: none !important;
    position: relative;
    z-index: 2;
}

.input-invest-chart .area-input input::placeholder {
    color: #fff;
}

.input-invest-chart .area-input label {
    position: absolute;
    z-index: 1;
    top: 53%;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 12px;
    font-weight: 500;
    color: #8594b7;
}

.input-invest-chart,
.input-strikes-chart {
    display: flex;
}

.input-invest-chart .buttons,
.input-strikes-chart .buttons {
    display: flex;
    flex-direction: column;
}

.input-invest-chart .buttons button,
.input-strikes-chart .buttons button {
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 35px;
    font-size: 12px;
}

.input-invest-chart .buttons button:hover,
.input-strikes-chart .buttons button:hover,
.input-strikes-chart button.btn-strikes:hover {
    transition: .3s;
    background-color: #32364a;
}

.input-invest-chart .buttons button:first-child {
    border-radius: 7px 0px 0px 0px;
}

.input-invest-chart .buttons button:last-child {
    border-radius: 0px 0px 0px 7px;
}

.input-strikes-chart .buttons button:first-child {
    border-radius: 0px 7px 0px 0px;
}

.input-strikes-chart .buttons button:last-child {
    border-radius: 0px 0px 7px 0px;
}

.input-invest-chart .buttons button:last-child,
.input-strikes-chart .buttons button:last-child {
    border-top: none;
}

.input-strikes-chart button.btn-strikes {
    border-right: none;
    border-radius: 7px 0px 0px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

.input-strikes-chart button.btn-strikes span {
    font-size: 12px;
    color: #8594b7;
}

.buttons-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons-center button {
    width: 200px;
    height: 64px;
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    padding: 5px;
    position: relative;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.buttons-center button.btnBuy {
    border-radius: 7px 0px 0px 7px;
    border-right: none;
    color: #d7276b;
}

.buttons-center button.btnBuy:hover {
    transition: .3s;
    background-color: #442b3c;
}

.buttons-center button.btnSell {
    border-radius: 0px 7px 7px 0px;
    color: #32a88a;
}

.buttons-center button.btnSell:hover {
    transition: .3s;
    background-color: #2b4444;
}

.buttons-center button.btnBuy i {
    position: absolute;
    top: 40%;
    left: -10%;
    transform: translate(-0%, -50%);
    font-size: 8rem;
    color: #d7276b;
}

.buttons-center button.btnSell i {
    position: absolute;
    top: 60%;
    right: -10%;
    transform: translate(-0%, -50%);
    font-size: 8rem;
    color: #32a88a;
}

.buttons-center button span {
    color: #8594b7;

}

.buttons-center button.btnBuy div {
    margin-left: 100px;
}

.buttons-center button.btnSell div {
    margin-right: 100px;
}

.buttons-options-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.buttons-options-chart button.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    font-size: 14px;
    padding: 8px;
}

.buttons-options-chart button.dropdown-toggle:hover {
    transition: .3s;
    background-color: #32364a;
}

.buttons-options-chart button.dropdown-toggle svg {
    fill: #fff;
}

.buttons-options-chart button.dropdown-toggle::after {
    display: none;
}

.buttons-options-chart .dropdown-menu {
    background-color: #2b2f44;
    border-color: #5055738f;
    padding: 15px;
}

.buttons-options-chart .dropup .dropdown-menu {
    left: 50% !important;
    transform: translate(-50%, -40px) !important;
}

.dropdown.type-chart ul.dropdown-menu .top div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.dropdown.type-chart ul.dropdown-menu p {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    padding-left: 3px;
    margin-bottom: 5px;
}

.dropdown.type-chart ul.dropdown-menu button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    width: 100px;
    height: 115px;
    border-radius: 5px;
    background-color: #383d59;
    color: #dddddd;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    white-space: normal;
    text-align: center;
}

.dropdown.type-chart ul.dropdown-menu button.active,
.dropdown.type-chart ul.dropdown-menu button:hover {
    transition: .3s;
    background-color: #026fd3;
    color: #fff;
}

.dropdown.type-chart ul.dropdown-menu button svg {
    fill: rgba(0, 0, 0, 0.75);
}

.dropdown.type-chart ul.dropdown-menu .form-check.form-switch input {
    box-shadow: none !important;
}

.dropdown.type-chart ul.dropdown-menu .form-check.form-switch label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.dropdown.indicadores ul.dropdown-menu .itens-indicadores {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 550px;
    gap: 5px;
    flex-wrap: wrap;
}

.dropdown.indicadores ul.dropdown-menu li {
    flex: 0 0 180px;
    width: 180px;
    height: 30px;
}

.dropdown.indicadores ul.dropdown-menu button {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: #dddddd;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    padding: 0px;
    opacity: .8;
}

.dropdown.indicadores ul.dropdown-menu button:hover {
    background-color: #383d59;
    color: #fff;
    opacity: 1;
}

.dropdown.indicadores ul.dropdown-menu button a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: 25px;
    height: 100%;
    color: #FF8A00;
    border-radius: 5px 0px 0px 5px;
}

.dropdown.indicadores ul.dropdown-menu button a:hover {
    background-color: #ff8a0029;
}

.dropdown.indicadores ul.dropdown-menu button span {
    display: block;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-align: left;
}

.dropdown.graficos ul.dropdown-menu {
    padding: 3px;
}

.dropdown.graficos ul.dropdown-menu a {
    font-size: 14px;
    font-weight: 500;
    background-color: transparent;
    color: #c9c9c9;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    border-radius: 5px;
}

.dropdown.graficos ul.dropdown-menu a:hover {
    transition: .3s;
    background-color: #026fd3;
    color: #fff;
}

.dropdown.graficos ul.dropdown-menu a svg {
    fill: #fff;
}

.dropdown.options ul.dropdown-menu.show {
    min-width: auto !important;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
}

.dropdown.options ul.dropdown-menu button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 5px;
    font-size: 14px;
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    position: relative;
}

.dropdown.options ul.dropdown-menu button.active,
.dropdown.options ul.dropdown-menu button:hover {
    transition: .3s;
    background-color: #202333;
}

.dropdown.options ul.dropdown-menu button span.tag-checked {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: rgba(0, 154, 249, .5);
    border: 1px solid #009af9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 8px;
    box-shadow: none !important;
    outline: none !important;
    opacity: 0;
}

.dropdown.options ul.dropdown-menu button.active span.tag-checked {
    transition: .3s;
    opacity: 1;
}

.dropdown.multi-charts ul.dropdown-menu li {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    white-space: nowrap;
    border-bottom: 1px solid #5055738f;
}

.dropdown.multi-charts span.title-multicharts {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    min-width: 110px;
    padding: 12px;
}

.dropdown.multi-charts ul.dropdown-menu li:last-child {
    border-bottom: none;
}

.dropdown.multi-charts ul.dropdown-menu button {
    background-color: transparent !important;
    border: none !important;
    padding: 0px !important;
    outline: none !important;
    margin-left: 4px;
}

.dropdown.multi-charts .sq-wrap {
    display: -webkit-box;
    display: flex;
}

.dropdown.multi-charts .sq {
    cursor: pointer;
    display: -webkit-box;
    display: flex;
    width: 24px;
    height: 24px;
}

.dropdown.multi-charts button.active .sq .sq__item,
.dropdown.multi-charts button:hover .sq .sq__item {
    background: #fff;
}

.dropdown.multi-charts .sq__item {
    background: #364059;
    -webkit-box-flex: 1;
    border-radius: 2px;
    flex: 1 1 auto;
    margin-left: 2px;
    margin-top: 2px;
    -webkit-transition: background .3s;
    transition: background .3s;
}

.sq.horizontal-2,
.sq.top-1-bottom-2,
.sq.top-2-bottom-1,
.sq.top-2-bottom-2,
.sq.top-3-bottom-1,
.sq.top-1-bottom-3 {
    flex-wrap: wrap;
}

.sq.horizontal-2 .sq__item,
.sq.top-1-bottom-2 .sq__item:first-child,
.sq.top-2-bottom-1 .sq__item:last-child,
.sq.left-2-right-1 .sq__item:last-child,
.sq.left-1-right-2 .sq__item:first-child,
.sq.top-3-bottom-1 .sq__item:last-child,
.sq.top-1-bottom-3 .sq__item:first-child,
.sq.left-1-right-3 .sq__item:first-child,
.sq.left-3-right-1 .sq__item:last-child {
    flex-basis: 100%;
}

.sq.left-2-right-1,
.sq.left-1-right-2,
.sq.left-1-right-3,
.sq.left-3-right-1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-flow: column wrap;
}

.sq.top-2-bottom-2 .sq__item {
    -webkit-box-flex: 1;
    flex: 1 1 calc(50% - 2px);
}

.buttons-zoom-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.buttons-zoom-chart button.btn-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    font-size: 10px;
    padding: 5px;
}

.buttons-zoom-chart button.btn-zoom:hover {
    transition: .3s;
    background-color: #32364a;
}

.header-chart {
    display: flex;
    gap: 10px;
    height: 100%;
    position: relative;
    z-index: 3;
}

.header-chart .left button.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: #026fd3;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    width: 45px;
    height: 45px;
    padding: 5px;
    border-radius: 5px;
    outline: none !important;
}

.header-chart .left button.dropdown-toggle[aria-expanded="false"] i {
    animation: rotateOff 0.3s ease forwards;
}

@keyframes rotateOff {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.header-chart .left button.dropdown-toggle[aria-expanded="true"] i {
    animation: rotateOn 0.3s ease forwards;
}

@keyframes rotateOn {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

.header-chart .left button.dropdown-toggle:hover {
    transition: .3s;
    background-color: #0264c0;
}

.header-chart .left button.dropdown-toggle::after {
    display: none;
}

.header-chart .left .dropdown-menu {
    background-color: #2b2f44;
    padding: 5px;
    max-height: calc(100vh - 150px);
    border-color: #5055738f;
}

.header-chart .left .dropdown-menu.show {
    display: flex !important;
    flex-direction: column !important;
}

.header-chart .left .dropdown-menu table {
    font-size: 14px;
    color: #fff;
}

.header-chart .left .dropdown-menu table thead th {
    padding: 5px;
    height: 35px;
}

.header-chart .left .dropdown-menu table thead a {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.3);
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: left;
}

.header-chart .left .dropdown-menu table thead a:hover {
    color: rgba(255, 255, 255, 0.5);
}

.header-chart .left .dropdown-menu table thead {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-chart .left .dropdown-menu table tr,
.header-chart .left .dropdown-menu table td {
    white-space: nowrap;
}

.header-chart .left .dropdown-menu table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.header-chart .left .dropdown-menu table tbody td {
    padding: 8px 5px;
    font-weight: 500;
}

.header-chart .left .dropdown-menu table tbody td:first-child {
    min-width: 200px;
    border-radius: 3px 0px 0px 3px;
    padding: 0px;
}

.header-chart .left .dropdown-menu table tbody td:first-child a {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    font-weight: 600;
    color: #fff;
    padding: 8px 5px;
}

.header-chart .left .dropdown-menu table tbody td:first-child a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #a0d2ff;
}

.header-chart .left .dropdown-menu table tbody td:last-child {
    border-radius: 0px 3px 3px 0px;
}

.header-chart .left .dropdown-menu table tbody td:first-child span {
    display: block;
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.header-chart .left .dropdown-menu table tbody td:not(:first-child) {
    text-align: center;
}

.header-chart .left .dropdown-menu table tbody td:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header-chart .left .dropdown-menu table tbody td.up:nth-child(2) {
    color: #51d646;
}

.header-chart .left .dropdown-menu table tbody td.down:nth-child(2) {
    color: #d64646;
}

.header-chart .left .dropdown-menu table tbody td:nth-child(2) i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 8px;
    color: #fff;

}

.header-chart .left .dropdown-menu table tbody td.up:nth-child(2) i {   
    background-color: #34a02b;
}

.header-chart .left .dropdown-menu table tbody td.down:nth-child(2) i {
    background-color: #d64646;
    transform: rotate(180deg);
}

.header-chart .left .dropdown-menu table tbody td:last-child,
.header-chart .left .dropdown-menu table tbody td:nth-last-child(2) {
    color: #FF8A00;
}

.header-chart .left .dropdown-menu table tbody td:last-child a {
    color: #FF8A00;
    border-radius: 3px;
    padding: 1px 2px;
}

.header-chart .left .dropdown-menu table tbody td:last-child a:hover {
    background-color: #ff880065;
}

.header-chart .left .filter-dropdown {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    font-size: 12px;
}

.header-chart .left .filter-dropdown button.btn-search {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 5px;
}

.header-chart .left .filter-dropdown button.btn-search:hover {
    transition: .3s;
    background-color: rgba(0, 0, 0, 0.15);
}

.header-chart .left .filter-dropdown input {
    width: 100%;
    min-width: 200px;
    height: 38px;
    padding: 5px;
    background-color: transparent;
    border: none;
    outline: none !important;
    color: #fff;
    font-weight: 500;
}

.header-chart .left .filter-dropdown input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.header-chart .left .filter-dropdown .btns-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding-right: 5px;
    gap: 3px;
}

.header-chart .left .filter-dropdown .btns-filter button {
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, .3);
    font-weight: 500;
    padding: 5px;
}

.header-chart .left .filter-dropdown .btns-filter button:hover {
    color: rgba(255, 255, 255, .75);
}

.header-chart .left .filter-dropdown .btns-filter button.active {
    color: #fff !important;
}

.progress-bar-chart {
    display: flex;
    flex-direction: column;
    height: calc(100% - 62px);
    gap: 5px;
    margin-top: 5px;
}

.body-progress-bar {
    width: 5px;
    height: 100%;
    border-radius: 10px;
}

.progress-bar-green .body-progress-bar {
    background-color: #32a88a;
    -webkit-box-shadow: 0 4px 10px rgba(53, 183, 113, 0.25);
    box-shadow: 0 4px 10px rgba(53, 183, 113, 0.25);
}

.progress-bar-red .body-progress-bar {
    background-color: #d7276b;
    -webkit-box-shadow: 0 4px 10px rgba(255, 101, 84, 0.25);
    box-shadow: 0 4px 10px rgba(255, 101, 84, 0.25)
}

.progress-bar-green, .progress-bar-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
}

.tabs-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

button.btn-tab-chart {
    background-color: #2b2f44;
    color: #fff;
    border: 1px solid #5055738f;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 135px;
    height: 45px;
    gap: 10px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    position: relative;
}

button.btn-tab-chart:hover {
    background-color: #404459;
}

button.btn-tab-chart.active {
    background-color: #131520;
}

button.btn-tab-chart i.fa-coins {
    margin-bottom: 10px;
    font-size: 14px;
}

button.btn-tab-chart .texts {
    text-align: left;
}

button.btn-tab-chart .texts p {
    width: 90px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

button.btn-tab-chart .texts span {
    color: #FF8A00;
}

button.btn-tab-chart .actions {
    display: none !important;
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

button.btn-tab-chart:hover .actions,
button.btn-tab-chart.active .actions {
    display: flex !important;
}

button.btn-tab-chart .actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b2f44;
    color: #fff;
    border: 2px solid rgb(28, 31, 45);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 8px;
    padding: 0px;
}

button.btn-tab-chart.active .actions a {
    background-color: #131520;
    border-color: #5055738f;
}

button.btn-tab-chart .actions a:hover {
    background-color: #026fd3;
}

.header-chart .right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-time-chart {
    display: flex;
    align-items: center;
    justify-content: left;
    white-space: nowrap;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    max-width: 110px;
}

.server-time-chart span.time {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 5px;
}

.server-time-chart span.time::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #0FAF59;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(15,175,89,1);
    -moz-box-shadow: 0px 0px 5px 1px rgba(15,175,89,1);
    box-shadow: 0px 0px 5px 1px rgba(15,175,89,1);
}

.server-time-chart span.type-time {
    color: #5d6382;
}

button.btn-info-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 145px;
    height: 32px;
    background-color: rgba(2,111,211,0.1);
    color: #026fd3;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 35px;
    padding: 5px 10px;
}

button.btn-info-chart:hover {
    transition: .3s;
    background-color: rgba(2,111,211,0.25);
}

button.btn-info-chart .circle-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #026fd3;
    color: #fff;
}

button.btn-info-chart i {
    font-size: 10px;
}

.page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 190px;
}

.top-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: #2b2f44;
    border-radius: 5px;
    padding: 15px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.section-title .name-sidebar {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

span.percenty-sidebar {
    color: #676B79;
    font-weight: 800;
}

.area-input-sidebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    position: relative;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #5055738f;
    border-radius: 5px;
    gap: 5px;
}

.area-input-sidebar.tempo {
    margin-bottom: 0.5rem;
}

.area-input-sidebar span.tag-title {
    position: absolute;
    top: -7px;
    left: 5px;
    background-color: #2b2f44;
    color: #8594b7;
    padding: 0px 5px;
    line-height: 12px;
}

.area-input-sidebar a {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    background-color: #2b2f44;
    color: #0d6efd;
    padding: 0px 5px;
}

.area-input-sidebar a:hover {
    color: #0c5eda;
}

.area-input-sidebar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    min-width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background-color: #9194a1;
    color: #fff;
}

.area-input-sidebar button:hover {
    transition: .3s;
    opacity: .5;
}

.area-input-sidebar.tempo span.time {
    width: 100%;
    font-size: 16px;
    color: #fff;
}

.area-input-sidebar.invest input {
    width: 100%;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border: none;
    padding: 0px;
    outline: none !important;
}

.payments-sidebar {
    background-color: rgba(0, 0, 0, 0.2);
    color: #9194a1;
    font-size: 12px;
    border: 1px dashed #70727a;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    text-align: center;
}

.payments-sidebar span {
    display: block;
}

.payments-sidebar span.tag-question {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #9194a1;
    font-size: 8px;
}

.tooltip {
    font-size: 12px;
}

.payments-sidebar p.title {
    font-size: 14px;
}

.payments-sidebar span.percenty {
    font-size: 18px;
    font-weight: 600;
    color: #13cb68;
}

.payments-sidebar span.value {
    color: #13cb68;
}

.slidecontainer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
  
.slider {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: rgb(203,0,0);
    background: -moz-linear-gradient(90deg, rgba(203,0,0,1) 0%, rgba(208,153,0,1) 50%, rgba(0,204,34,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(203,0,0,1) 0%, rgba(208,153,0,1) 50%, rgba(0,204,34,1) 100%);
    background: linear-gradient(90deg, rgba(203,0,0,1) 0%, rgba(208,153,0,1) 50%, rgba(0,204,34,1) 100%);
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
  
.slider:hover {
    opacity: 1;
}
  
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 3px;
    height: 15px;
    border-radius: 0px;
    background: #fff;
    cursor: pointer;
}
  
.slider::-moz-range-thumb {
    width: 3px;
    height: 15px;
    background: #fff;
    cursor: pointer;
}

.slidecontainer span {
    min-width: 29px;
    text-align: center;
}

.area-sidebar-main {
    height: 100%;
    max-height: calc(100% - 387px);
}

.bottom-sidebar {
    background-color: #2b2f44;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.header-tabs-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222636;
    border-radius: 5px 5px 0px 0px;
}

.header-tabs-sidebar button.item {
    width: 100%;
    font-size: 12px;
    font-weight: 600;
    background-color: #2b2f44;
    color: #fff;
    border: none;
    border-top: 2px solid #026fd3;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    outline: none !important;
}

.header-tabs-sidebar button.item:hover {
    transition: .2s;
    opacity: .8;
}

.header-tabs-sidebar button.item:first-child {
    border-radius: 5px 5px 0px 0px;
}

.header-tabs-sidebar button.item:last-child {
    border-radius: 5px 5px 0px 0px;
}

.header-tabs-sidebar button.item.off {
    background-color: #222636;
    width: auto;
    border-color: transparent;
}

.header-tabs-sidebar button.item.active .subtitle,
.header-tabs-sidebar button.item.off .title {
    display: none;
}

.header-tabs-sidebar button.item span.tag-qtd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #5d6382;
    font-size: 10px;
}

.body-tabs-sidebar {
    display: block;
    height: calc(100% - 40px);
    overflow: auto;
    padding: 10px;
    font-size: 12px;
    color: #fff;
}

.message-empty {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .5);
}

.message-empty i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 1rem auto;
    background-color: #5d6382;
    color: #fff;
    font-size: 1rem;
}

.item-pedido-tab {
    padding: 10px 0px;
    border-top: 1px solid #5d6382;
    border-bottom: 1px solid #5d6382;
}


.itens-container-tab .item-pedido-tab:first-child {
    border-top: none;
}

.itens-container-tab .item-pedido-tab:nth-child(2) {
    border-top: none;
}

.itens-container-tab .item-pedido-tab:last-child {
    border: none;
}

.item-pedido-tab button.btn-cancel {
    width: 100%;
    background-color: #222636;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
}

.item-pedido-tab button.btn-cancel:hover {
    transition: .3s;
    background-color: #026fd3;
}

.item-pedido-tab .header-pedido {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-pedido-tab .header-pedido div {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 5px;
    width: 100%;
}

.item-pedido-tab .header-pedido span.title {
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    font-weight: 600;
}

.item-pedido-tab .header-pedido span.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 8px;
}

.item-pedido-tab .header-pedido span.arrow.up {
    background-color: #1eff003d;
    color: #00ff02;
}

.item-pedido-tab .header-pedido span.arrow.down {
    background-color: #ff000040;
    color: #ff0000;
}

.item-pedido-tab .infos-pedido {
    margin: 5px 0px;
}

.item-pedido-tab .infos-pedido div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
}

#Operacoes p.title-data {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    color: #767d9e;
    margin: 2px 0px;
}

#Operacoes p.title-data span.tag-qtd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #5d6382;
    color: #2b2f44;
    font-size: 10px;
    font-weight: 800;
}

#Operacoes .item-pedido-tab .header-pedido span.title {
    width: 90px;
}

#Operacoes .item-pedido-tab .header-pedido {
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
}

#Operacoes .item-pedido-tab .infos-pedido div {
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    gap: 0px;
    margin-bottom: 5px;
}

#Operacoes .item-pedido-tab .infos-pedido div span:first-child {
    font-size: 10px;
    line-height: 10px;
    color: #5d6382;
}

#Operacoes .item-pedido-tab .infos-pedido div span:last-child {
    font-size: 11px;
}

#Operacoes .item-pedido-tab span.time-operacoes {
    font-weight: 500;
}

#Operacoes .item-pedido-tab .header-pedido .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#Operacoes .item-pedido-tab .header-pedido .bottom div {
    width: 50%;
}

#Operacoes .item-pedido-tab .header-pedido .bottom div span.green {
    color: #51d646;
    font-weight: 600;
}

#Operacoes .item-pedido-tab .header-pedido .bottom span.red {
    color: #d64646;
    font-weight: 600;
}

.item-pedido-tab .header-pedido button.btn-sell {
    width: 100%;
    padding: 5px 10px;
    background-color: #026fd3;
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-pedido-tab .header-pedido button.btn-sell:hover {
    transition: .3s;
    opacity: .8;
}

.item-pedido-tab .header-pedido button.btn-sell span {
    font-weight: 500;
}

.item-pedido-tab .infos-pedido.hidden {
    display: none;
}

button.btn-operacoes-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 16px;
    outline: none !important;
    position: relative;
    color: #fff;
    background-color: #2b2f44;
}

button.btn-operacoes-mobile span.tag {
    position: absolute;
    top: -5px;
    right: -5px;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    color: #fff;
}

button.btn-operacoes-mobile span.tag.close {
    display: none;
    background-color: #2b2f44;
}

button.btn-operacoes-mobile span.tag.qtd-ops {
    display: flex;
    background-color: #026fd3;
    font-size: 9px;
}

button.btn-operacoes-mobile[aria-expanded="true"] {
    background-color: #026fd3;
}

button.btn-operacoes-mobile[aria-expanded="true"] span.tag.close {
    display: flex;
}

button.btn-operacoes-mobile[aria-expanded="true"] span.tag.qtd-ops {
    display: none;
}

div#collapseOperacoes {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 9px;
    width: calc(100% - 18px);
    background-color: #2b2f44;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    -webkit-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    -moz-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
}

.header-chart,
.controls-chart {
    pointer-events: none;
}

.header-chart .left,
.header-chart .right .tabs-chart,
.header-chart .right button.btn-info-chart,
.server-time-chart,
.buttons-options-chart,
.buttons-controls-chart,
.buttons-zoom-chart {
    pointer-events: auto;
}

/* Códigos Dashboard */
main.main-content.dashboard {
    height: auto !important;
    max-height: calc(100dvh - 60px);
    overflow: auto;
    flex-direction: column;
}

.tabs-dashboard {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}

.tabs-dashboard button.item {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #2b2f44;
    color: #fff;
    border: none;
    padding: 10px 15px;
    white-space: nowrap;
    outline: none !important;
}

.tabs-dashboard  button.item.active,
.tabs-dashboard  button.item:hover {
    background-color: #026fd3;
    transition: .3s;
}

.body-tabs-perfil .tab-item-dash {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 12px;
    color: #fff;
}

.div-box-perfil {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.div-box-perfil p.title-perfil {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 15px;
    background-color: #2b2f44;
    border-radius: 5px 5px 0px 0px;
}

.div-box-perfil .body-box-perfil {
    padding: 15px;
}

.box-input-pessoais {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #2b2f44;
}

.box-input-pessoais.halal {
    border-bottom: none;
}

span.tag-asterisco {
    font-size: 14px;
    color: #f52914;
}

p.info-asterisco {
    font-size: 10px;
    padding: 10px;
    margin-top: 10px;
    font-style: italic;
}

.box-input-pessoais span.label-perfil {
    min-width: 400px;
}

.box-input-pessoais .area-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.box-input-pessoais .area-input input {
    min-width: 300px;
    height: 35px;
    padding: 5px 10px;
    box-shadow: none !important;
    outline: none !important;
    font-size: 12px;
    color: #fff;
    font-weight: 500 !important;
    background-color: rgba(43, 47, 68, 0.2);
    border: 1px solid #2b2f44;
}

.box-input-pessoais .area-input input::placeholder {
    color: #f52b14a1;
    font-style: italic;
}

.box-input-pessoais button.confirm-input {
    background-color: #2b2f44;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 35px;
    padding: 5px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.box-input-pessoais button.confirm-input:hover {
    transition: .3s;
    background-color: #026fd3;
}

.div-box-perfil span.verification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 110px;
    height: 35px;
    padding: 10px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
}

.div-box-perfil span.verification.ok {
    background-color: #026fd399;
    border: 1px solid #026fd3;
}

.div-box-perfil span.verification.not {
    background-color: #352c24;
    border: 1px solid #ffa031;
    color: #ffa031;
}

.box-input-pessoais button.btn-confirm-email {
    background-color: #026fd399;
    border: 1px solid #026fd3;
    color: #fff;
    padding: 10px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    outline: none !important;
    box-shadow: none !important;
}

.box-input-pessoais button.btn-confirm-email:hover {
    transition: .3s;
    background-color: #026ed3e7;
}

.box-input-pessoais .form-switch .form-check-input {
    margin-top: 0px;
    width: 50px;
    height: 25px;
    cursor: pointer;
    box-shadow: none !important;
    outline: none !important;
}

.div-box-perfil.identidade p.title-perfil {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}

.div-box-perfil.identidade span.verification {
    height: 25px;
}

span.verification i.fa-solid.fa-triangle-exclamation {
    margin-bottom: 1px;
}

p.message-documents {
    font-size: 14px;
    padding: 10px;
    color: #fff;
    background-color: #f52b1424;
    border: 1px dashed #f52b149f;
    border-radius: 5px;
}

button.btn-finish-user {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding: 10px;
    min-width: 70%;
    height: 38px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background-color: #f52b1424;
    border: 1px dashed #f52b149f;
    border-radius: 5px;
}

button.btn-finish-user:hover {
    transition: .3s;
    background-color: #f52b1494;
}

.box-input-pessoais ul.idioma {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    gap: 5px;
}

.box-input-pessoais ul.idioma a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 125px;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    color: #a6aac1;
    background-color: transparent;
}

.box-input-pessoais ul.idioma a:hover {
    transition: .3s;
    background-color: #2b2f44;
    color: #fff;
}

.box-input-pessoais .image-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    width: 100px;
    min-height: 100px;
    height: 100px;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.box-input-pessoais .area-perfil button.btn-finish-user {
    margin-top: 15px;
    margin-bottom: 0rem;
}

/* Main Chart CSS */
#chart {
    height: 100%;
    width: 100%;
}

#chart, .chart-box {
    /*
    background-color: #2b2f44;
    box-shadow: 0 22px 35px -16px rgba(0,0,0, 0.1);
    */
    border-radius: 5px;
    padding: 20px 0px 0px 30px;
}

.apexcharts-tooltip {
    z-index: 99999 !important; /* Aumenta o z-index das tooltips */
}

.apexcharts-pan-icon {
    display: block !important;
}

select.flat-select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #008FFB url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'60px\' height=\'60px\'><polyline fill=\'white\' points=\'46.139,15.518 25.166,36.49 4.193,15.519\'/></svg>") no-repeat scroll right 2px top 9px / 16px 16px;
    border: 0 none;
    border-radius: 3px;
    color: #fff;
    font-family: arial,tahoma;
    font-size: 16px;
    font-weight: bold;
    outline: 0 none;
    height: 33px;
    padding: 5px 20px 5px 10px;
    text-align: center;
    text-indent: 0.01px;
    text-overflow: "";
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease 0s;
    width: auto;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
    -o-transition: 0.3s ease all;
    transition: 0.3s ease all;
}

select.flat-select:focus, select.flat-select:hover {
    border: 0;
    outline: 0;
}
  
.apexcharts-canvas {
    margin: 0 auto;
}

@media (min-height: 710px) {
    main.main-content.dashboard {
        min-height: calc(100dvh - 60px);
    }
}

@media (max-width: 1150px) {
    .header-chart .right {
        width: 100%;
        max-width: 100%;
        overflow: auto;
        gap: 5px;
    }
    .tabs-chart {
        width: 100%;
        max-width: 430px;
        justify-content: left;
        overflow-x: auto;
        padding-bottom: 5px;
    }
    button.btn-tab-chart .actions {
        top: 0px;
    }
    .controls-chart {
        bottom: 1rem;
    }
    .buttons-controls-chart {
        flex-wrap: wrap;
        max-width: 400px;
    }
    .input-invest-chart, .input-strikes-chart {
        width: calc(50% - 5px);
    }
    .input-invest-chart .area-input, .input-strikes-chart button.btn-strikes {
        width: 100%;
    }
    .buttons-controls-chart > div:nth-child(2) {
        order: 3;
    }
    .div-box-perfil.naveg-social span.label-perfil, 
    .div-box-perfil.definicoes span.label-perfil {
        min-width: 340px;
    }
    .div-box-perfil.dados-pessoais .box-input-pessoais {
        flex-direction: column;
        gap: 5px;
        padding: 15px 0px;
    }
    .div-box-perfil.dados-pessoais .box-input-pessoais.halal {
        flex-direction: row;
    }
    .div-box-perfil.dados-pessoais span.label-perfil {
        min-width: auto;
        width: 100%;
    }
    .div-box-perfil.dados-pessoais .box-input-pessoais .area-input input {
        min-width: auto;
        width: calc(100% - 40px);
    }
    .box-input-pessoais button.confirm-input {
        width: 35px;
        min-width: 35px;
        font-size: 14px;
    }
    .box-input-pessoais .area-input {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .dropdown.indicadores ul.dropdown-menu .itens-indicadores {
        width: 365px;
    }
    .dropdown.indicadores ul.dropdown-menu {
        max-height: 300px;
        overflow: auto;
    }
}

@media (max-width: 850px) {
    .box-input-pessoais.email .area-input {
        flex-wrap: wrap;
    }
    .box-input-pessoais {
        padding: 15px 0px;
    }
    .div-box-perfil.naveg-social span.label-perfil, 
    .div-box-perfil.definicoes span.label-perfil {
        min-width: 250px;
        max-width: 250px;
    }
    .div-box-perfil.naveg-social .box-input-pessoais.halal {
        flex-direction: column;
        gap: 5px;
    }
    .div-box-perfil.naveg-social .box-input-pessoais.halal span.label-perfil {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
    .div-box-perfil.naveg-social .box-input-pessoais.halal .area-input input {
        width: calc(100% - 40px);
    }
    .tabs-dashboard {
        max-width: 100%;
        min-height: 60px;
        overflow-x: auto;
    }
}

@media (max-width: 800px) {
    .tabs-chart {
        max-width: 100%;
    }
    a.logo-header img {
        height: 30px;
    }
    .page-sidebar {
        display: none;
    }
    .dropdown.multi-charts ul.dropdown-menu {
        min-width: 295px;
    }
    button.btn-operacoes-mobile {
        display: flex;
    }
    .progress-bar-chart {
        height: calc(100% - 120px);
        margin-top: 10px;
    }
    .body-tabs-sidebar {
        height: 100%;
        max-height: calc(100dvh - 205px);
    }
    .item-pedido-tab {
        background-color: rgba(0, 0, 0, 0.15);
        padding: 10px;
        border-radius: 10px;
        border-color: #2b2f44;
        border-width: 5px;
    }
    #Operacoes p.title-data {
        margin: 5px 0px;
    }
    .header-tabs-sidebar button.item.active {
        background-color: #026fd3;
        opacity: 1 !important;
    }
    #Operacoes .item-pedido-tab .header-pedido span.title,
    .item-pedido-tab .header-pedido span.title {
        width: 300px;
    }
    .bottom-sidebar {
        height: auto;
        transition: height 0.35s ease;
    }
}

@media (max-width: 730px) {
    .header-right button.btn-depositar-header {
        min-width: 40px;
    }
    .header-right button.btn-depositar-header span,
    .header-right button.btn-depositar-header::after {
        display: none;
    }
}

@media (max-width: 600px) {
    main.main-content {
        left: 0;
        border: none;
        width: 100%;
        min-height: 480px;
    }
    #chart, .chart-box {
        padding: 20px 0px 0px 0px;
    }
    .controls-chart {
        bottom: 2.75rem;
        flex-direction: column-reverse;
    }
    header.header-main {
        padding: 0 15px 0px 10px;
    }
    header.header-main .header-left a.logo-header,
    header.header-main .header-left button.btn-fav-header {
        display: none;
    }
    .header-left button.btn-menu-mobile {
        display: flex;
    }
    .header-chart .left button.dropdown-toggle,
    button.btn-operacoes-mobile {
        width: 40px;
        height: 40px;
    }
    #offcanvasMenu {
        width: auto;
    }
    aside.aside-main {
        position: relative;
        top: 0;
        left: 0;
        height: 100%;
        min-height: auto;
        max-height: none;
        gap: 10px;
        width: 150px;
        overflow: auto;
    }
    .dropdown.more ul.dropdown-menu {
        position: relative !important;
        top: 5px !important;
        left: 0 !important;
        transform: translate(0, -0) !important;
        min-width: auto !important;
        width: 100%;
        padding: 0px;
        background-color: transparent;
        border: none;
    }
    .dropdown.more ul.dropdown-menu a {
        font-size: 12px;
    }
    .buttons-settings {
        gap: 5px;
    }
    .buttons-settings button {
        background-color: #40445c8f;
        color: #fff !important;
        width: 62px;
        height: 45px;
    }
    .buttons-settings button:hover {
        background-color: #5055738f;
    }
    .progress-bar-chart {
        display: none;
    }
    .header-chart .left {
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .header-chart .tabs-chart,
    .header-chart .server-time-chart,
    .header-chart button.btn-info-chart {
        margin-left: 50px;
    }
    .header-chart .tabs-chart{
        max-width: calc(100% - 50px);
    } 
    button.btn-tab-chart {
        height: 40px;
    }    
    .buttons-center button {
        width: 150px;
        height: 50px;
    }
    .buttons-center button.btnBuy i,
    .buttons-center button.btnSell i {
        font-size: 6rem;
    }
    .buttons-center button.btnBuy div {
        margin-left: 80px;
    }
    .buttons-center button.btnSell div {
        margin-right: 80px;
    }
    .input-invest-chart .area-input, 
    .input-strikes-chart button.btn-strikes {
        height: 50px;
    }
    .input-invest-chart .area-input input {
        padding: 5px 5px 20px 5px;
    }
    .input-invest-chart .buttons button, 
    .input-strikes-chart .buttons button {
        height: 25px;
        width: 30px;
    }
    .dropdown.type-chart ul.dropdown-menu button {
        width: 60px;
        height: 60px;
        gap: 5px;
        font-size: 10px;
        line-height: 10px;
        padding: 5px;
    }
    .dropdown.type-chart ul.dropdown-menu button svg {
        width: 25px;
        height: 25px;
        min-width: 25px;
        min-height: 25px;
    }
    .dropdown.type-chart ul.dropdown-menu .top div {
        flex-wrap: wrap;
        width: 270px;
    }
    .buttons-options-chart .dropdown.dropup {
        position: static;
    }
    .buttons-options-chart,
    .dropdown.dropup.options {
        position: relative !important;
    }
    .dropdown.perfil .dropdown-menu .left-perfil {
        padding: 15px;
    }
    .dropdown.perfil .dropdown-menu .left-perfil .top {
        flex-direction: column;
        gap: 10px;
    }
    .dropdown.perfil .dropdown-menu .left-perfil .image-perfil {
        min-width: 85px;
        width: 85px;
        min-height: 85px;
        height: 85px;
    }
    .dropdown.perfil .infos-perfil {
        width: 100%;
    }
    .dropdown.perfil .infos-perfil p.flag-name span, 
    .dropdown.perfil .infos-perfil a.level-user span {
        width: 200px;
    }
    .dropdown.perfil .area-estatiscas-perfil {
        min-width: 235px;
    }
    .dropdown.perfil .right-perfil a {
        font-size: 12px;
        padding: 10px 15px;
    }
    .dropdown.indicadores ul.dropdown-menu,
    .dropdown.dropup.graficos ul.dropdown-menu {
        max-height: 235px;
        overflow: auto;
    }
    .header-chart .left .dropdown-menu {
        max-height: calc(100dvh - 125px);
        top: 3px !important;
        width: calc(100vw - 20px);
        overflow: auto;
        box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -moz-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    }
    .header-chart .left .filter-dropdown,
    .header-chart .left .dropdown-menu .table-responsive {
        min-width: 392px;
    }
    .header-chart .left .dropdown-menu table {
        font-size: 12px;
        width: 100%;
    }
    .header-chart .left .filter-dropdown input {
        min-width: 100px;
    }
    .header-chart .left .dropdown-menu table tbody td:first-child span {
        width: 100px;
    }
    .header-chart .left .dropdown-menu table tbody td:first-child {
        min-width: 135px;
    }
    .buttons-options-chart .dropdown-menu {
        box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -moz-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    }
    .header-right .exchange ul.dropdown-menu a {
        gap: 10px;
        font-size: 12px;
    }
    .header-right .exchange ul.dropdown-menu,
    .header-right .depositar ul.dropdown-menu {
        top: 3px !important;
        box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -moz-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    }
    .header-right .depositar ul.dropdown-menu p.title {
        font-size: 14px;
    }
    .header-right .depositar ul.dropdown-menu span.subtitle,
    .header-right .depositar .select-payment span, 
    .header-right .depositar .value-payment, 
    .codePromo label,
    .header-right .depositar .form-check,
    .header-right .depositar .select-payment select,
    .header-right .depositar .value-payment input, 
    .codePromo input {
        font-size: 12px;
    }
    .header-right .depositar ul.dropdown-menu {
        min-width: 250px;
        transform: translate3d(50px, 42px, 0px) !important;
    }
    .header-right .depositar button.btn-fast-deposito {
        flex-direction: column;
        gap: 0px;
        line-height: 14px;
    }
    .div-box-perfil.naveg-social .box-input-pessoais:first-child {
        flex-direction: column;
    }
    .div-box-perfil.naveg-social .box-input-pessoais:first-child span.label-perfil {
        max-width: none;
        width: 100%;
    }
    .div-box-perfil.naveg-social .box-input-pessoais:nth-child(2) span.label-perfil {
        width: 100%;
        max-width: none;
    }
    .div-box-perfil.definicoes span.label-perfil {
        width: 100%;
    }
    .div-box-perfil.naveg-social span.label-perfil, 
    .div-box-perfil.definicoes span.label-perfil {
        min-width: auto;
        max-width: 100%;
    }
    .box-input-pessoais .area-input input {
        min-width: auto;
    }
    .div-box-perfil.definicoes .box-input-pessoais.halal {
        flex-direction: column;
    }
    .div-box-perfil.definicoes .box-input-pessoais ul.idioma li {
        width: calc(50% - 2.5px);
    }
    .box-input-pessoais ul.idioma a {
        background-color: #373c5563;
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 450px) {
    #Operacoes .item-pedido-tab .header-pedido span.title,
    .item-pedido-tab .header-pedido span.title {
        width: 230px;
    }
    .dropdown.indicadores ul.dropdown-menu .itens-indicadores {
        width: 285px;
    }
    .dropdown.indicadores ul.dropdown-menu li {
        flex: 0 0 140px;
        width: 140px;
    }
    .dropdown.indicadores ul.dropdown-menu button {
        font-size: 12px;
    }
    .dropdown.dropup.graficos ul.dropdown-menu {
        min-width: 200px;
    }
}

@media (max-width: 420px) {
    .dropdown.perfil .dropdown-menu.show {
        flex-direction: column;
        max-height: calc(100dvh - 65px);
        overflow: auto;
        justify-content: flex-start !important;
        top: 3px !important;
        box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -webkit-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
        -moz-box-shadow: 0px -2px 9px 4px rgba(0, 0, 0, 0.39);
    }
}

@media (max-width: 400px) {
    .header-right .exchange button.dropdown-toggle {
        font-size: 14px;
    }
    header.header-main {
        gap: 10px;
    }
    .dropdown.indicadores ul.dropdown-menu .itens-indicadores,
    .dropdown.graficos ul.dropdown-menu {
        width: 170px;
    }
    .dropdown.indicadores ul.dropdown-menu li {
        flex: 0 0 100%;
    }
}

@media (max-width: 380px) {
    #Operacoes .item-pedido-tab .header-pedido span.title,
    .item-pedido-tab .header-pedido span.title {
        width: 140px;
    }
}

@media (max-width: 340px) {
    .dropdown.multi-charts span.title-multicharts {
        font-size: 12px;
        min-width: 100px;
    }
    .dropdown.multi-charts ul.dropdown-menu li {
        gap: 0px;
    }
    .dropdown.multi-charts ul.dropdown-menu {
        min-width: 265px;
        padding: 10px;
    }
}

@media (max-width: 330px) {
    header.header-main,
    .header-right {
        gap: 5px;
    }
    .header-right .exchange button.dropdown-toggle {
        font-size: 12px;
    }
    .header-left button.btn-menu-mobile,
    .header-chart .left button.dropdown-toggle, 
    button.btn-operacoes-mobile {
        font-size: 14px;
        width: 35px;
        height: 35px;
    }
    .header-right .exchange button.dropdown-toggle {
        height: 35px;
    }
    .header-right button.btn-depositar-header {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }
    .header-right button.btn-perfil-header {
        width: 35px;
        height: 35px;
    }
    .header-chart .tabs-chart, 
    .header-chart .server-time-chart, 
    .header-chart button.btn-info-chart {
        margin-left: 45px;
    }
    .header-chart .tabs-chart {
        max-width: calc(100% - 45px);
    }
    .buttons-controls-chart {
        max-width: 250px;
    }
    .buttons-center button {
        width: 125px;
    }
    .buttons-center button.btnBuy i, 
    .buttons-center button.btnSell i {
        font-size: 4rem;
    }
    .buttons-center button.btnBuy div {
        margin-left: 50px;
    }
    .buttons-center button.btnSell div {
        margin-right: 50px;
    }
    .dropdown.type-chart ul.dropdown-menu .top div {
        width: 170px;
    }
    .dropdown.type-chart ul.dropdown-menu button {
        width: 80px;
        height: 80px;
    }
    .dropdown.type-chart ul.dropdown-menu {
        max-height: 235px;
        overflow: auto;
    }
    .header-right .depositar ul.dropdown-menu {
        transform: translate3d(44px, 37px, 0px) !important;
    }
}

@media (max-width: 290px) {
    .dropdown.multi-charts span.title-multicharts {
        font-size: 10px;
        min-width: 86px;
    }
    .dropdown.multi-charts ul.dropdown-menu {
        min-width: 240px;
        padding: 5px;
    }
}