@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
/*


*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: #ff614b;
    scroll-behavior: smooth;
}

* {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}

*::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}

*::-webkit-scrollbar-track {
    background: none;
}

*::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

input {
    font-size: inherit;
    color: inherit;
}

html {
    font-size: 62.5%;
}
@media (min-width: 107.37em) {
    html {
        font-size: 60%;
    }
}
@media (max-width: 107.37em) {
    html {
        font-size: 47%;
    }
}
@media (max-width: 87.5em) {
    html {
        font-size: 54%;
    }
}
@media (max-width: 75.37em) {
    html {
        font-size: 51%;
    }
}
@media (max-width: 51.18em) {
    html {
        font-size: 50%;
    }
}
@media (max-width: 37.5em) {
    html {
        font-size: 48%;
    }
}
@media (max-width: 35.68em) {
    html {
        font-size: 49%;
    }
}
@media (max-width: 33.5em) {
    html {
        font-size: 46%;
    }
}

body {
    font-size: 1.8rem;
    font-family: Rubik;
    font-weight: 400;
    color: #f5deb3;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
@media (min-width: 107.37em) {
    body {
        max-width: 200rem;
    }
}
@media (max-width: 87.5em) {
    body {
        font-size: 1.4rem;
    }
}
@media (max-width: 35.68em) {
    body {
        font-size: 2rem;
    }
}
@media (max-width: 33.5em) {
    body {
        font-size: 2rem;
    }
}

.heading {
    font-size: 2rem;
    font-weight: 400;
    text-transform: capitalize;
}
@media (max-width: 31.2em) {
    .heading {
        font-size: 1.5rem;
    }
}

.navigation.mini {
    width: 10rem;
}

.header.wide,
.main.wide {
    width: calc(100% - 10rem);
}

.hidden {
    display: none;
}

.u-margin-top {
    margin-top: 1rem;
}

.u-margin-top-sm {
    margin-top: 2rem;
}

.u-margin-top-l {
    margin-top: 3rem;
}

.u-margin-top-xl {
    margin-top: 4rem;
}

.u-margin-top-xxl {
    margin-top: 5rem;
}

.u-margin-bottom {
    margin-bottom: 1rem;
}

.u-margin-bottom-sm {
    margin-bottom: 2rem;
}

.u-margin-bottom-l {
    margin-bottom: 3rem;
}

.u-margin-bottom-xl {
    margin-bottom: 4rem;
}

.u-margin-bottom-xxl {
    margin-bottom: 5rem;
}

.profit {
    color: #11e169;
}

.loss {
    color: #ff614b;
}

.decimal {
    color: rgba(245, 222, 179, 0.6);
    font-size: inherit;
}

#mobile__nav {
    height: 5rem;
    width: 6rem;
    position: fixed;
    top: 1rem;
    left: 27rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background-color: black;
    cursor: pointer;
}
@media (max-width: 1033px) {
    #mobile__nav {
        display: none;
    }
}
#mobile__nav--icon {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0 auto;
}

@media (max-width: 45.87em) {
    #max-734 {
        max-width: 38rem;
    }
}

@media (max-width: 41.37em) {
    #max-734 {
        max-width: 34rem;
    }
}

@media (max-width: 35.68em) {
    #max-734 {
        max-width: 60rem;
    }
}

.right__groups {
    display: flex;
    align-items: center;
}

.margin-botton-none {
    margin-bottom: 0 !important;
}

.side_border button {
    border-left: 1px solid #000;
    border-right: 1px solid #f5deb3;
}

.sm-mb {
    margin-bottom: 1.5rem;
}

.sm-letter {
    text-transform: capitalize;
}

@keyframes rotateImage {
    0% {
        transform: rotate(0);
    }
    40% {
        transform: rotate(180deg);
    }
    80% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes sessionAnimation {
    0% {
        transform: scale(1.2);
    }
    40% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.2);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

.nav__btn {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 5px;
    border: 2px solid #f5deb3;
    transition: all 0.2s;
    outline: none;
    cursor: pointer;
}
.nav__btn:focus {
    border: 2px solid #ff614b;
}
.nav__btn:focus .nav__btn-bars {
    background-color: #ff614b;
}
.nav__btn:focus .nav__btn-bars::before {
    background-color: #ff614b;
}
.nav__btn:focus .nav__btn-bars::after {
    background-color: #ff614b;
}
.nav__btn:hover {
    border: 2px solid #f5deb3;
}
.nav__btn:hover .nav__btn-bars {
    background-color: #f5deb3;
    margin-top: 1.2rem;
}
.nav__btn:hover .nav__btn-bars::before {
    background-color: #f5deb3;
    top: 3px;
}
.nav__btn:hover .nav__btn-bars::after {
    background-color: #f5deb3;
    top: 0.7rem;
}
.nav__btn-bars {
    height: 2px;
    width: 70%;
    background-color: #f5deb3;
    margin: 0.8rem auto 0 auto;
    position: relative;
    transition: all 0.2s;
}
.nav__btn-bars::before,
.nav__btn-bars::after {
    content: "";
    position: absolute;
    background-color: #f5deb3;
    width: 100%;
    height: 2px;
    transition: all 0.2s;
}
.nav__btn-bars::before {
    top: 0.9rem;
    left: 0;
}
.nav__btn-bars::after {
    top: 1.8rem;
    left: 0;
}

.profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.profile__verification,
.profile__notification,
.profile__avatar {
    height: 4rem;
    width: 4rem;
    padding: 5px;
    border: 2px solid #f5deb3;
    outline: none;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    cursor: pointer;
}
.profile__verification:focus,
.profile__notification:focus,
.profile__avatar:focus {
    border: 2px solid #ff614b;
}
.profile__verification-img,
.profile__notification-img,
.profile__avatar-img {
    fill: #f5deb3;
    stroke: #f5deb3;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.profile__verification:hover,
.profile__notification:hover,
.profile__avatar:hover {
    border-color: #f5deb3;
}
.profile__verification:hover .profile__verification-img,
.profile__notification:hover .profile__verification-img,
.profile__avatar:hover .profile__verification-img,
.profile__verification:hover .profile__notification-img,
.profile__notification:hover .profile__notification-img,
.profile__avatar:hover .profile__notification-img,
.profile__verification:hover .profile__avatar-img,
.profile__notification:hover .profile__avatar-img,
.profile__avatar:hover .profile__avatar-img {
    fill: #f5deb3;
    stroke: #f5deb3;
    animation: rotateImage 0.2s;
}
.profile__avatar {
    padding: 4px;
}
.profile__verification:focus .profile__verification-img {
    fill: #ff614b;
    stroke: #ff614b;
}
.profile__notification:focus .profile__notification-img {
    fill: #ff614b;
    stroke: #ff614b;
    color: #ff614b;
}

.profile__verification-img.active,
.profile__notification-img.active {
    animation: notification 5s infinite;
}

@keyframes notification {
    0% {
        transform: rotate(0deg);
    }
    8.0% {
        transform: rotate(0deg);
    }
    12.0% {
        transform: rotate(42deg);
    }
    16.0% {
        transform: rotate(-35deg);
    }
    20.0% {
        transform: rotate(0deg);
    }
    23.0% {
        transform: rotate(28deg);
    }
    26.0% {
        transform: rotate(-20deg);
    }
    29.0% {
        transform: rotate(0deg);
    }
    31.0% {
        transform: rotate(16deg);
    }
    33.0% {
        transform: rotate(-12deg);
    }
    35.0% {
        transform: rotate(0deg);
    }
    37.0% {
        transform: rotate(-6deg);
    }
    39.0% {
        transform: rotate(0deg);
    }
}

.main__heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.2);
}
.main__heading-text {
    color: #f5deb3;
    font-size: 1.6rem;
}
.main__heading-btns {
    display: flex;
    gap: 2rem;
    align-self: flex-end;
}

.btn {
    padding: 1rem 3rem;
    outline: none;
    border-radius: 5px;
    font-size: 1.6rem;
    background: none;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
}
@media (max-width: 31.2em) {
    .btn {
        padding: 1rem;
    }
}
.btn:focus {
    border: 1px solid #ff614b;
}
.btn__deposit,
.btn__widthdraw {
    padding: 0.8rem 2rem;
    text-decoration: none;
    outline: none;
    border: 1px solid transparent;
    font-weight: 500;
    background-color: #444;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.2);
    color: #f5deb3;
    transition: all 0.2s;
}
.btn__deposit {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
}
.btn__deposit:focus {
    border: 1px solid #11e169;
}
.btn__deposit:hover {
    background-color: #0db253;
    color: #f5deb3;
}
.btn__widthdraw {
    background-color: rgba(89, 62, 255, 0.5);
    color: #b1a4ff;
}
.btn__widthdraw:focus {
    border: 1px solid #b1a4ff;
}
.btn__widthdraw:hover {
    background-color: #593eff;
    color: #f5deb3;
}

button {
    border: 2px solid transparent;
    display: inline-block;
    outline: none;
}
button:focus {
    border: 2px solid #f5deb3;
}

.btn-sort {
    border: 1px solid #f5deb3;
    color: #f5deb3;
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: inherit;
    padding: 0.4rem 2rem;
    border-radius: 100px;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
}
.btn-sort:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.btn-sort--icon {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-sort--icon-img {
    height: 20px;
    width: 30px;
    fill: #f5deb3;
    stroke: #f5deb3;
}

.card {
    border-radius: 5px;
    padding: 2.5rem;
    align-content: end;
    outline: none;
    position: relative;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.15);
    transition: all 0.1s;
}
@media (max-width: 51.18em) {
    .card {
        padding: 2rem;
    }
}
@media (max-width: 37.5em) {
    .card {
        padding: 1.8rem 1.5rem;
    }
}
@media (max-width: 35.68em) {
    .card {
        padding: 2rem;
        padding-bottom: 3rem;
    }
}
.card:focus {
    border: 1px solid #ff614b;
}
.card:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.2);
}
.card__currency {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 5px;
    background-color: #ff614b;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2rem;
    font-size: 1.5rem;
}
@media (max-width: 37.5em) {
    .card__currency {
        border-radius: 2px;
        font-size: 1.5rem;
    }
}
.card__title {
    font-size: 2rem;
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
}
@media (max-width: 35.68em) {
    .card__title {
        font-size: 2.5rem;
        margin-top: 2rem;
    }
}
@media (max-width: 31.2em) {
    .card__title {
        font-size: 2rem;
    }
}
.card__amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 53rem;
}
@media (max-width: 1882px) {
    .card__amount {
        max-width: 41rem;
    }
}
@media (max-width: 107.37em) {
    .card__amount {
        max-width: 40rem;
    }
}
@media (max-width: 87.5em) {
    .card__amount {
        max-width: 50rem;
    }
}
@media (max-width: 35.68em) {
    .card__amount {
        max-width: 60rem;
    }
}
.card__amount--value {
    font-size: 4rem;
    margin-bottom: -1rem;
}
@media (max-width: 35.68em) {
    .card__amount--value {
        font-size: 5rem;
    }
}
@media (max-width: 31.2em) {
    .card__amount--value {
        font-size: 3.5rem;
    }
}
@media (max-width: 22.5em) {
    .card__amount--value {
        font-size: 3rem;
    }
}
.card__amount--growth {
    align-self: flex-end;
    display: flex;
    gap: 0.5rem;
}
.card__amount--bargraph {
    position: absolute;
    bottom: 0;
    right: 2rem;
    width: 33rem;
}
@media (max-width: 96.37em) {
    .card__amount--bargraph {
        right: -2rem;
        width: 30rem;
    }
}
@media (max-width: 87.5em) {
    .card__amount--bargraph {
        width: 40rem;
    }
}
@media (max-width: 51.18em) {
    .card__amount--bargraph {
        width: 36rem;
    }
}
@media (max-width: 41.37em) {
    .card__amount--bargraph {
        width: 32rem;
    }
}
@media (max-width: 35.68em) {
    .card__amount--bargraph {
        display: none;
    }
}

.select_form {
    position: relative;
    min-width: 20rem;
}
@media (max-width: 35.68em) {
    .select_form {
        min-width: 16rem;
        font-size: 1.6rem;
    }
}
.select_form::before,
.select_form::after {
    --size: 1rem;
    content: "";
    position: absolute;
    right: 1rem;
    pointer-events: none;
}
@media (max-width: 35.68em) {
    .select_form::before,
    .select_form::after {
        right: 4rem;
    }
}
.select_form::after {
    border-left: var(--size) solid transparent;
    border-right: var(--size) solid transparent;
    border-top: var(--size) solid #f5deb3;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.select_form-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    padding: 1rem;
    border: 2px solid transparent;
    background-color: rgba(245, 222, 179, 0.2);
    color: #f5deb3;
    border-radius: 5px;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.3);
    cursor: pointer;
    outline: none;
}
@media (max-width: 31.2em) {
    .select_form-select {
        padding: 0.5rem;
    }
}
@media (max-width: 35.68em) {
    .select_form-select {
        width: 84%;
    }
}
.select_form-select:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0);
}
.select_form-select:focus {
    border: 2px solid #f5deb3;
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.select_form-sort {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    padding: 0.5rem 2rem;
    padding-right: 6rem;
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
    border-radius: 100px;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.3);
    cursor: pointer;
    outline: none;
}
@media (max-width: 31.2em) {
    .select_form-sort {
        padding: 0.5rem;
    }
}
@media (max-width: 35.68em) {
    .select_form-sort {
        width: 84%;
    }
}
@media (max-width: 27.6em) {
    .select_form-sort {
        width: 100%;
    }
}
.select_form-sort:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0);
}
.select_form-sort:focus {
    border: 1px solid #f5deb3;
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

@media (max-width: 87.5em) {
    #sortmanager {
        padding-right: 3rem;
    }
}

@media (max-width: 27.6em) {
    #sortmanager {
        padding: 1rem;
    }
}

@media (max-width: 27.6em) {
    #select__form-sort {
        min-width: 24rem;
    }
}

@media (max-width: 27.6em) {
    #select__form-sort::after {
        right: 2rem;
    }
}

#table_container {
    max-height: 33rem;
    width: 100%;
    margin: 0 auto;
    margin-top: 2rem;
    min-width: 60rem;
    overflow: auto;
}
#table_container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
#table_container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
#table_container *::-webkit-scrollbar-track {
    background: none;
}
#table_container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 35.68em) {
    #table_container {
        max-width: 40rem;
    }
}
@media (max-width: 31.2em) {
    #table_container {
        width: auto;
    }
}

table {
    width: 100%;
    text-align: left;
    padding: 1rem;
    position: relative;
    border-collapse: collapse;
    font-size: 1.6rem;
    font-family: inherit;
}
@media (max-width: 35.68em) {
    table {
        font-size: 1.8rem;
    }
}
@media (max-width: 22.5em) {
    table {
        font-size: 1.4rem;
    }
}

th,
td {
    padding: 2rem;
}
@media (max-width: 35.68em) {
    th,
    td {
        padding: 1rem 2rem;
    }
}

@media (max-width: 35.68em) {
    th {
        font-weight: 500;
    }
}

tr:not(:last-child) {
    border-bottom: 0.5px solid rgba(245, 222, 179, 0.6);
}

thead {
    position: sticky;
    top: -2px;
    background-color: #f5deb3;
    color: #000;
    text-transform: capitalize;
}

.table {
    overflow: auto;
}
.table * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.table *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.table *::-webkit-scrollbar-track {
    background: none;
}
.table *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.subscription__table-header tr {
    text-align: center;
}

.subscription__table-body tr {
    text-align: center;
}

.profit__bar--container {
    height: 15rem;
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0.5rem;
    gap: 1.5rem;
    position: relative;
}
@media (max-width: 37.5em) {
    .profit__bar--container {
        height: 13rem;
    }
}
@media (max-width: 96.37em) {
    .profit__bar--container {
        width: 80%;
    }
}
.profit__bar--container::before,
.profit__bar--container::after {
    content: "";
    position: absolute;
    background-color: #f5deb3;
}
.profit__bar--container::before {
    bottom: -0.3px;
    height: 100%;
    left: -1rem;
    width: 0.5px;
}
.profit__bar--container::after {
    height: 0.5px;
    width: 108%;
    left: -3rem;
    bottom: 2.2rem;
}

.bar__item {
    display: flex;
    justify-content: end;
    align-items: center;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    width: 4rem;
}
.bar__item:hover .bar__item--grow-value {
    visibility: visible;
}
.bar__item--grow {
    width: 100%;
    max-height: 80%;
    position: relative;
}
.bar__item--grow-bar {
    background-color: #ff614b;
    width: 100%;
    max-height: 100%;
    border-radius: 10px 10px 0 0;
}
.bar__item--grow-value {
    font-size: 1rem;
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    visibility: hidden;
    transition: all 0.1s;
}
.bar__item--name {
    font-size: 1.4rem;
}

.barchart__container {
    height: 90%;
    width: 90%;
    display: flex;
    align-items: end;
    justify-content: space-around;
}
@media (max-width: 33.5em) {
    .barchart__container {
        width: 100%;
        overflow-y: hidden;
    }
}
.barchart__container--bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 1rem;
    height: 100%;
}

.bar_name {
    font-size: 1.4rem;
}

.grow_bar {
    position: relative;
    height: 0px;
    width: 8rem;
    background-color: red;
    border-radius: 10px 10px 0 0;
    transition: all 0.2s;
}
@media (max-width: 35.68em) {
    .grow_bar {
        width: 4rem;
    }
}

.barchart__container--bar:hover .bar_value {
    visibility: visible;
}

.bar_value {
    position: absolute;
    font-size: 1.6rem;
    left: 50%;
    top: -3rem;
    transform: translateX(-50%);
    visibility: hidden;
}

.account__summary-barchart {
    width: 100%;
    border: 1px solid rgba(217, 217, 217, 0.15);
    height: 30rem;
    display: flex;
    align-items: end;
    justify-content: center;
}
@media (max-width: 33.5em) {
    .account__summary-barchart {
        justify-content: space-between;
    }
}

.toggler__switch {
    position: relative;
    display: inline-block;
    height: 2rem;
    width: 4rem;
}

#toggler__switch {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggler__slider {
    border-radius: 50px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    -webkit-transition: 0.2s;
    transition: all 0.2s;
    border: 1px solid rgba(217, 217, 217, 0.8);
}
.toggler__slider::before {
    border-radius: 100px;
    position: absolute;
    content: "";
    width: 45%;
    height: 2rem;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #d9d9d9;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

#toggler__switch:checked + .toggler__slider {
    background-color: #f5deb3;
}

#toggler__switch:checked + .toggler__slider::before {
    background-color: #444;
}

#toggler__switch:focus + .toggler__slider {
    box-shadow: 0 0 1px #f5deb3;
}

#toggler__switch:checked + .toggler__slider:before {
    -webkit-transform: translate(120%, -50%);
    -ms-transform: translate(120%, -50%);
    transform: translate(120%, -50%);
}

.trader {
    border: 1px solid rgba(217, 217, 217, 0.1);
    width: 100%;
    padding: 1rem 2rem;
    padding-left: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.2);
}
@media (max-width: 87.5em) {
    .trader {
        padding-left: 5rem;
    }
}
@media (max-width: 64.56em) {
    .trader {
        flex-direction: column;
        gap: 2rem;
        padding: 4rem;
    }
}
@media (max-width: 41.37em) {
    .trader {
        padding: 1rem;
    }
}
.trader:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(245, 222, 179, 0.4);
}
.trader__link {
    text-decoration: none;
    color: inherit;
}
.trader__rank {
    position: absolute;
    background-color: #f5deb3;
    border-bottom: 10px solid #000;
    border-top: 10px solid rgba(245, 222, 179, 0.6);
    border-left: 10px solid rgba(245, 222, 179, 0.6);
    border-right: 10px solid rgba(245, 222, 179, 0.6);
    padding: 5px;
    padding-bottom: 8px;
    left: 10px;
    top: 0;
    color: #000;
}
@media (max-width: 96.37em) {
    .trader__rank {
        font-size: 1.4rem;
        border-top: 2px solid rgba(245, 222, 179, 0.6);
        border-left: 5px solid rgba(245, 222, 179, 0.6);
        border-right: 5px solid rgba(245, 222, 179, 0.6);
        border-bottom: 15px solid #000;
    }
}
@media (max-width: 87.5em) {
    .trader__rank {
        padding: 2px;
        font-weight: 500;
        border-top: 2px solid rgba(245, 222, 179, 0.6);
        border-left: 5px solid rgba(245, 222, 179, 0.6);
        border-right: 5px solid rgba(245, 222, 179, 0.6);
        border-bottom: 5px solid #000;
    }
}
@media (max-width: 64.56em) {
    .trader__rank {
        font-size: 2rem;
        border-bottom: 10px solid #000;
        border-top: 10px solid rgba(245, 222, 179, 0.6);
        border-left: 10px solid rgba(245, 222, 179, 0.6);
        border-right: 10px solid rgba(245, 222, 179, 0.6);
    }
}
@media (max-width: 51.18em) {
    .trader__rank {
        font-size: 1.4rem;
        border-top: 2px solid rgba(245, 222, 179, 0.6);
        border-left: 5px solid rgba(245, 222, 179, 0.6);
        border-right: 5px solid rgba(245, 222, 179, 0.6);
        border-bottom: 15px solid #000;
    }
}
.trader__profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.trader__profile--img {
    position: relative;
    height: 7.5rem;
    width: 7.5rem;
    border: 1px solid #f5deb3;
    border-radius: 100%;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 87.5em) {
    .trader__profile--img {
        height: 6rem;
        width: 6rem;
    }
}
@media (max-width: 64.56em) {
    .trader__profile--img {
        height: 8rem;
        width: 8rem;
    }
}
.trader__profile--img-pic {
    overflow: hidden;
    width: 95%;
    height: 95%;
    border-radius: 100%;
}
.trader__profile--img-country {
    height: 2rem;
    width: 2rem;
    border-radius: 100px;
    position: absolute;
    right: -4px;
    bottom: 0;
}
.trader__stats {
    display: flex;
    align-self: center;
    justify-content: space-between;
    gap: 2rem;
}
.trader__stats--returnrate,
.trader__stats--daysopen,
.trader__stats--risklevel,
.trader__stats--followers,
.trader__stats--managedfunds {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 0.5rem 2rem;
    border-left: 0.1px solid #f5deb3;
}
@media (max-width: 41.37em) {
    .trader__stats--returnrate,
    .trader__stats--daysopen,
    .trader__stats--risklevel,
    .trader__stats--followers,
    .trader__stats--managedfunds {
        padding: 1rem;
    }
}
.trader__stats--returnrate-value,
.trader__stats--daysopen-value,
.trader__stats--risklevel-value,
.trader__stats--followers-value,
.trader__stats--managedfunds-value {
    font-size: 4rem;
    font-weight: 300;
    color: rgba(245, 222, 179, 0.8);
}
@media (max-width: 87.5em) {
    .trader__stats--returnrate-value,
    .trader__stats--daysopen-value,
    .trader__stats--risklevel-value,
    .trader__stats--followers-value,
    .trader__stats--managedfunds-value {
        font-size: 3rem;
    }
}
@media (max-width: 64.56em) {
    .trader__stats--returnrate-value,
    .trader__stats--daysopen-value,
    .trader__stats--risklevel-value,
    .trader__stats--followers-value,
    .trader__stats--managedfunds-value {
        font-size: 2.5rem;
    }
}
.trader__stats--returnrate-title,
.trader__stats--daysopen-title,
.trader__stats--risklevel-title,
.trader__stats--followers-title,
.trader__stats--managedfunds-title {
    font-size: 2rem;
    text-transform: capitalize;
    color: rgba(245, 222, 179, 0.6);
    justify-self: end;
    text-align: right;
}
@media (max-width: 87.5em) {
    .trader__stats--returnrate-title,
    .trader__stats--daysopen-title,
    .trader__stats--risklevel-title,
    .trader__stats--followers-title,
    .trader__stats--managedfunds-title {
        font-size: 1.6rem;
    }
}
@media (max-width: 64.56em) {
    .trader__stats--returnrate-title,
    .trader__stats--daysopen-title,
    .trader__stats--risklevel-title,
    .trader__stats--followers-title,
    .trader__stats--managedfunds-title {
        font-size: 1.5rem;
    }
}
@media (max-width: 41.37em) {
    .trader__stats--daysopen,
    .trader__stats--followers {
        display: none;
    }
}
.trader__stats--risklevel-value {
    color: #ff614b;
}

.section__header {
    margin-bottom: 1rem;
    padding: 1rem;
}
.section__header--heading {
    font-weight: 500;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 51.18em) {
    .section__header--heading {
        font-size: 2rem;
    }
}
.section__header--paragraph {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}
@media (max-width: 51.18em) {
    .section__header--paragraph {
        font-size: 1.5rem;
    }
}

.form__pack {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 64.56em) {
    .form__pack {
        gap: 2rem;
    }
}
@media (max-width: 27.6em) {
    .form__pack {
        flex-direction: column;
    }
}
.form__pack--togglegroup {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.form__pack--togglegroup-title {
    text-transform: capitalize;
}
@media (max-width: 41.37em) {
    .form__pack--togglegroup-form {
        margin-top: 5px;
    }
}
.form__pack--searchgroup {
    margin-right: auto;
}
@media (max-width: 27.6em) {
    .form__pack--searchgroup {
        width: 100%;
    }
}

.right__groups {
    display: flex;
    align-items: center;
    gap: 3rem;
    position: relative;
}
@media (max-width: 64.56em) {
    .right__groups {
        width: 100%;
    }
}
@media (max-width: 27.6em) {
    .right__groups {
        justify-content: space-between;
    }
}

.form__group--search {
    position: relative;
    width: 30rem;
    border-radius: 100px;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
}
@media (max-width: 87.5em) {
    .form__group--search {
        max-width: 40rem;
    }
}
@media (max-width: 27.6em) {
    .form__group--search {
        width: 100%;
        max-width: 100%;
    }
}
.form__group--search:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.form__group--search-input {
    height: 100%;
    width: 100%;
    border: 1px solid #f5deb3;
    border-radius: 100px;
    background: none;
    padding: 0.5rem 2rem;
    padding-right: 3rem;
    outline: none;
}
.form__group--search-input:focus {
    border: 1px solid #ff614b;
}
.form__group--search-label {
    position: absolute;
    right: 10px;
    margin-top: 3px;
    top: 50%;
    transform: translateY(-50%);
}

#filter_by-container {
    margin-bottom: 0;
    min-width: 20rem;
    width: 100%;
    max-width: 40rem;
}
@media (max-width: 27.6em) {
    #filter_by-container {
        max-width: 100%;
    }
}

#filter_by {
    background: none;
    border: 1px solid #f5deb3;
    border-radius: 100px;
    padding: 0.7rem 1.2rem;
}

#filter_arrow {
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 27.6em) {
    .sortfilter__form-area {
        width: 100%;
    }
}

@media (max-width: 27.6em) {
    .search__form-area {
        width: 100%;
    }
}

.filter {
    background: none;
    border: 1px solid #f5deb3;
    font-size: inherit;
    color: inherit;
    padding: 0.6rem 2rem;
    border-radius: 100px;
}

.large__buttons {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
    justify-content: space-between;
    font-size: 1.5rem;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.large__buttons * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.large__buttons *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.large__buttons *::-webkit-scrollbar-track {
    background: none;
}
.large__buttons *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.large__buttons--btn {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    padding: 1rem;
    background-color: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s;
    width: 100%;
    outline: none;
    border: none;
    cursor: pointer;
}
@media (max-width: 87.5em) {
    .large__buttons--btn {
        font-size: 1.2rem;
    }
}
.large__buttons--btn:hover {
    background-color: #ff614b;
}
.large__buttons--btn.active {
    background-color: #ff614b;
}

.large__buttons--btn:focus {
    border: 1px solid #000;
    outline: none;
}

.investment__cards {
    margin: 0 auto;
    padding: 2rem;
    padding-bottom: 15rem;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 2rem;
    row-gap: 2rem;
}
@media (max-width: 920px) {
    .investment__cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 35.68em) {
    .investment__cards {
        grid-template-columns: 1fr;
    }
}
.investment__cards * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.investment__cards *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.investment__cards *::-webkit-scrollbar-track {
    background: none;
}
.investment__cards *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.investment__cards.active {
    display: grid;
}

.investment__card {
    margin: auto;
    min-width: 32rem;
    max-width: 50rem;
    border-top: 10px solid #ff614b;
    width: 100%;
    text-align: center;
    background-color: #fff;
    color: #000;
    padding: 1.5rem;
}
.investment__card--header {
    text-align: center;
    position: relative;
}
.investment__card--header-logo {
    height: 3.5rem;
    width: 3.5rem;
    border: 10px solid #ff614b;
    margin: 1rem auto;
    margin-bottom: 1rem;
    border-radius: 100%;
}
.investment__card--header-logo.diamond {
    border-radius: 0;
    transform: rotate(45deg);
}
.investment__card--header-title {
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1.5rem;
}
.investment__card--body {
    text-align: left;
    margin: 2rem auto;
}
.investment__card--deposit {
    padding: 0 1rem;
    margin-bottom: 1.5rem;
}
.investment__card--deposit-title {
    text-transform: uppercase;
    color: #ff614b;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.3rem;
}
.investment__card--deposit-value {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 300;
}
.investment__card--deposit-slider {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.investment__card--return {
    background-color: #d9d9d9;
    padding: 1rem;
}
.investment__card--return-title {
    color: #ff614b;
    text-transform: capitalize;
    font-size: 1.6rem;
    font-weight: 500;
}
.investment__card--return-value {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    font-size: 3.5rem;
    justify-content: space-between;
    font-weight: 300;
}
.investment__card--commission {
    padding: 1rem;
    font-size: 1.5rem;
}
.investment__card--commission-title {
    text-transform: uppercase;
    color: #ff614b;
}
.investment__card--instruments {
    padding: 1rem;
    background-color: #d9d9d9;
    font-size: 1.5rem;
    min-height: 15rem;
}
.investment__card--instruments-title {
    text-transform: uppercase;
    color: #ff614b;
}
.investment__card--instruments-list {
    list-style: none;
    margin-top: 1rem;
}
.investment__card--button {
    padding: 0.5rem 1.5rem;
    border-radius: 100px;
    font-size: 1.3rem;
    text-align: center;
    margin: 2rem auto;
    background-color: #ff614b;
    color: #fff;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}
.investment__card--button:hover {
    transform: scale(1.3);
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.card__return--spread {
    font-size: 1.3rem;
    font-weight: 400;
}
.card__return--spread-title {
    text-transform: capitalize;
    color: #ff614b;
}

.card__instruments--list-item {
    text-transform: capitalize;
}

.view_subscriptions {
    outline: none;
    border: none;
    text-decoration: none;
    background-color: #ff614b;
    color: #fff;
    padding: 0.4rem 1.2rem;
    font-size: 1.5rem;
    border-radius: 100px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: -1rem;
    display: none;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}
.view_subscriptions.active {
    display: block;
}
.view_subscriptions:active,
.view_subscriptions:hover,
.view_subscriptions:focus {
    outline: none;
    border: none;
    background-color: rgba(255, 97, 75, 0.5);
    color: #000;
}

.toggle__form--group {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1rem;
}

.toggle__form--group label {
    text-transform: capitalize;
    cursor: pointer;
}

.toggle__label {
    position: absolute;
    height: 2rem;
    width: 4rem;
    border-radius: 50px;
    background-color: #000;
    right: 0;
    transition: all 0.2s;
    cursor: pointer;
}

#toggle_id,
#toggle_method {
    position: absolute;
    display: none;
    transition: all 0.2s;
}

#toggle_id:checked + .toggle__btn,
#toggle_method:checked + .toggle__btn {
    background-color: #ff614b;
}

.toggle__btn {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.2s;
}

.toggle__btn::before {
    content: "";
    position: absolute;
    height: 2rem;
    width: 45%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-color: #d9d9d9;
    transition: all 0.2s;
}

#toggle_id:checked + .toggle__btn::before,
#toggle_method:checked + .toggle__btn::before {
    transform: translate(120%, -50%);
    background-color: #fff;
}

.w-sm {
    width: auto;
    max-width: 30rem;
    margin-bottom: 2rem;
}

.small__buttons {
    display: none;
    align-items: center;
    border-bottom: 1px solid #444;
    justify-content: space-between;
    font-size: 1.5rem;
    overflow-x: auto;
    position: sticky;
    top: 3.4rem;
}
.small__buttons * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.small__buttons *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.small__buttons *::-webkit-scrollbar-track {
    background: none;
}
.small__buttons *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.small__buttons--btn {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    padding: 0.6rem;
    background-color: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s;
    width: 100%;
    outline: none;
    border: none;
    cursor: pointer;
}
@media (max-width: 87.5em) {
    .small__buttons--btn {
        font-size: 1.2rem;
    }
}
.small__buttons--btn:hover {
    background-color: #ff614b;
    color: #fff;
}
.small__buttons--btn.active {
    background-color: #ff614b;
    color: #fff;
}

.small__buttons--btn:focus {
    border: none;
    outline: none;
}

.small__buttons.active {
    display: flex;
}

.verification__modal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    display: none;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    cursor: pointer;
}
.verification__modal.active {
    display: flex;
}
.verification__modal--container {
    margin: auto;
    height: auto;
    width: 50%;
    background-color: #d9d9d9;
    padding: 4rem;
    color: #000;
}
@media (max-width: 75.37em) {
    .verification__modal--container {
        width: 60%;
    }
}
@media (max-width: 51.18em) {
    .verification__modal--container {
        width: 70%;
    }
}
@media (max-width: 41.37em) {
    .verification__modal--container {
        width: 80%;
    }
}
@media (max-width: 37.5em) {
    .verification__modal--container {
        width: 70%;
    }
}
@media (max-width: 27.6em) {
    .verification__modal--container {
        padding: 2rem 1rem;
        padding-bottom: 3rem;
        height: 80vh;
        border-radius: 0;
        overflow-y: auto;
    }
    .verification__modal--container * {
        scrollbar-width: 2px;
        scrollbar-color: #11e169;
    }
    .verification__modal--container *::-webkit-scrollbar {
        scrollbar-width: thin;
        width: 2px;
        height: 2px;
    }
    .verification__modal--container *::-webkit-scrollbar-track {
        background: none;
    }
    .verification__modal--container *::-webkit-scrollbar-thumb {
        background-color: #11e169;
        border-radius: 10px;
    }
}
@media (max-width: 37.5em) {
    .verification__modal--container {
        width: 90%;
        padding: 4rem 1.5rem;
    }
}
.verification__modal--header {
    text-align: center;
    margin-bottom: 3rem;
}
.verification__modal--header-title {
    font-weight: 600;
    font-weight: 2rem;
    margin-bottom: 1rem;
}
.verification__modal--header-text {
    color: rgba(68, 68, 68, 0.6);
}
.verification__modal--body {
    color: #000;
    font-weight: 400;
}

.modal--close-btn {
    background-color: #000;
    color: #fff;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    font-weight: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 2rem;
    top: 3rem;
    cursor: pointer;
    transition: all 0.3s;
}
.modal--close-btn:hover,
.modal--close-btn:active {
    color: #ff614b;
    border: none;
}

.modal--close-btn span {
    font-size: 2.8rem;
}

#verification__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 1.5rem;
    row-gap: 2rem;
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 37.5em) {
    #verification__form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        row-gap: 1rem;
        width: 90%;
    }
}

.form__group {
    display: flex;
    flex-direction: column;
}

.form__group label {
    font-weight: 600;
}

#ver_country,
#id_type,
#id__front,
#id__back {
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    background: none;
    outline: none;
    border: 1px solid #444;
}

#id__front,
#id__back {
    margin-top: 3rem;
}

.id__side {
    border: 1px solid #000;
    padding: 1rem;
    text-align: center;
}
@media (max-width: 31.2em) {
    .id__side {
        padding: 2rem;
    }
}
.id__side--icon {
    margin-bottom: 1rem;
}
@media (max-width: 37.5em) {
    .id__side--icon-img {
        width: 25px;
        height: 15px;
    }
}
.id__side--title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.confirm__check,
.submit__btn {
    grid-column: 1/3;
}
@media (max-width: 37.5em) {
    .confirm__check,
    .submit__btn {
        grid-column: 1/2;
    }
}

.confirm__check {
    grid-row: 3/4;
}
@media (max-width: 37.5em) {
    .confirm__check {
        grid-row: 5/6;
    }
}

.confirm__check {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.confirm__check label {
    cursor: pointer;
    font-weight: 300;
    text-align: left;
}

#verification__agree {
    align-self: flex-start;
    margin-top: 1ch;
    cursor: pointer;
}

.submit__btn {
    grid-row: 4/5;
    width: 10rem;
    justify-self: center;
    margin-top: 3rem;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    border: none;
    transition: all 0.1s;
    border: 1px solid #000;
    background: none;
}
@media (max-width: 37.5em) {
    .submit__btn {
        grid-row: 6/7;
    }
}
.submit__btn:hover {
    background-color: #000;
    color: #fff;
}

.verification__form--group label {
    text-align: left;
}

.notification__modal {
    position: absolute;
    background: #000;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 40rem;
    height: auto;
    padding: 1.5rem;
    color: #f5deb3;
    z-index: 9999999;
    top: 8rem;
    border-radius: 0;
    display: block;
    right: 100%;
    visibility: none;
    opacity: 0;
    transition: all 0.2s;
}
.notification__modal.active {
    right: 3rem;
    visibility: visible;
    opacity: 1;
}
.notification__modal--container {
    margin-top: 3rem;
    padding: 2rem;
}
.notification__modal--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}
.notification__modal--header-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.notification__modal--body {
    font-size: 1.5rem;
}

#close__notification {
    top: 1rem;
    height: 35px;
    width: 35px;
}

.notification__title {
    font-size: 2rem;
}

.notification__count {
    background-color: #f5deb3;
    color: #000;
    border-radius: 100%;
    padding: 5px;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.mark__read {
    color: #1dcaff;
    background: none;
    outline: none;
    cursor: pointer;
    border: none;
}
.mark__read:hover {
    color: #11e169;
}
.mark__read:focus {
    border: none;
}

.notification__items {
    max-height: 30rem;
    overflow-y: auto;
    padding-bottom: 1rem;
}
.notification__items * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.notification__items *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.notification__items *::-webkit-scrollbar-track {
    background: none;
}
.notification__items *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.notification__item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    cursor: pointer;
    border: 1px solid rgba(245, 222, 179, 0.6);
}
.notification__item:hover {
    background-color: rgba(68, 68, 68, 0.8);
}
.notification__item.active {
    background-color: #444;
    border: 1px solid rgba(0, 0, 0, 0.8);
}
.notification__item:not(:last-child) {
    margin-bottom: 1rem;
}
.notification__item--icon {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification__icon-img.success {
    color: #11e169;
}

.notification__icon-img.failed {
    color: #ff614b;
}

.notification__icon-img.danger {
    color: #ff0000;
}

.notification__item--text-time {
    margin-top: 0.5rem;
    color: #ff614b;
}

.time_read {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mark_read {
    background-color: rgba(17, 225, 105, 0.12);
    color: #11e169;
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}
.mark_read:hover,
.mark_read:focus {
    border: none;
    outline: none;
    background-color: #11e169;
    color: #000;
}

.profile__modal {
    position: absolute;
    background: #000;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 1.5rem;
    width: 32rem;
    z-index: 999999;
    visibility: none;
    opacity: 0;
    display: block;
    top: 8rem;
    right: 100%;
    transition: all 0.2s;
}
.profile__modal.adminprofile {
    width: 27rem;
}
.profile__modal.active {
    right: 2rem;
    opacity: 1;
    visibility: visible;
}
.profile__modal--container {
    margin-top: 2rem;
}
.profile__modal--header {
    padding: 2rem;
    padding-bottom: 1rem;
    padding-left: 0;
    border-bottom: 1px solid rgba(245, 222, 179, 0.6);
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 90%;
    margin: auto;
}
.profile__modal--header-img {
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid #11e169;
}
.profile__modal--img {
    border-radius: 100%;
    width: 100%;
    height: 100%;
}
.profile__modal--name {
    font-size: 1.6rem;
    font-weight: 400;
    text-transform: capitalize;
}
.profile__modal--email {
    text-decoration: none;
    color: #11e169;
    font-size: 1.4rem;
}
.profile__modal--body {
    padding: 2rem;
    width: 100%;
    margin: auto;
    padding-left: 2rem;
}
.profile__modal--body-id {
    margin-top: 2rem;
}
.profile__modal--nav {
    list-style: none;
}
.profile__modal--nav-item:not(:last-child) {
    margin-bottom: 1rem;
}
.profile__modal--nav-text {
    padding-bottom: 5px;
    font-size: 1.6rem;
}
.profile__modal--nav-link {
    background: none;
    border: none;
    outline: none;
    padding: none;
    font-size: 1.4rem;
    text-decoration: none;
    color: rgba(255, 97, 75, 0.8);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.1s;
}
.profile__modal--nav-link:hover,
.profile__modal--nav-link:focus,
.profile__modal--nav-link:active {
    background: none;
    border: none;
    outline: none;
    color: #ff614b;
}
.profile__modal--footer {
    border-top: 1px solid rgba(245, 222, 179, 0.6);
    width: 90%;
    margin: auto;
}

#close_profile {
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    padding: 5px;
    background: none;
    color: #f5deb3;
    transition: all 0.3s;
}
#close_profile:hover {
    background-color: #f5deb3;
    color: #000;
}

#logout_link {
    color: #ff614b;
    padding: 2rem;
    padding-left: 0;
    border: none;
    outline: none;
    cursor: pointer;
}
#logout_link:active,
#logout_link:focus,
#logout_link:hover {
    border: none;
    outline: none;
    color: #ff0000;
}

.trade__id--title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.trade__id--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #f5deb3;
    padding: 0.5rem 1rem;
}
.trade__id--content-id {
    font-size: 1.5rem;
}
.trade__id--content-btn {
    display: flex;
    align-items: center;
    background-color: #ff614b;
    color: #fff;
    gap: 1rem;
    font-size: 1.4rem;
    padding: 4px 8px;
    border: none;
    outline: none;
}
.trade__id--content-btn:active,
.trade__id--content-btn:focus,
.trade__id--content-btn:hover {
    border: none;
    outline: none;
}

.deposit__modal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background: rgba(17, 225, 105, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
}
.deposit__modal.active {
    display: flex;
}
.deposit__modal--container {
    min-height: 80vh;
    padding-bottom: 10rem;
}
.deposit__modal--container,
.deposit__modal--confirm {
    display: none;
    width: 35%;
    border: 1px solid #f5deb3;
    margin: auto;
    padding: 2rem;
    color: #d5d2d2;
    background-color: #444;
}
.deposit__modal--container.open,
.deposit__modal--confirm.open {
    display: block;
}
@media (max-width: 64.56em) {
    .deposit__modal--container,
    .deposit__modal--confirm {
        width: 45%;
    }
}
@media (max-width: 51.18em) {
    .deposit__modal--container,
    .deposit__modal--confirm {
        width: 50%;
    }
}
@media (max-width: 41.37em) {
    .deposit__modal--container,
    .deposit__modal--confirm {
        width: 60%;
    }
}
@media (max-width: 35.68em) {
    .deposit__modal--container,
    .deposit__modal--confirm {
        width: 70%;
    }
}
@media (max-width: 27.6em) {
    .deposit__modal--container,
    .deposit__modal--confirm {
        width: 80%;
    }
}
.deposit__modal--container {
    min-height: auto;
    max-height: 95%;
    overflow-y: auto;
}
.deposit__modal--container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.deposit__modal--container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.deposit__modal--container *::-webkit-scrollbar-track {
    background: none;
}
.deposit__modal--container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 27.6em) {
    .deposit__modal--container {
        width: 90%;
        height: 80rem;
    }
}
@media (max-width: 22.5em) {
    .deposit__modal--container {
        height: 75rem;
    }
}
@media (max-width: 27.6em) {
    .deposit__modal--confirm {
        width: 90%;
    }
}
.deposit__modal--title {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.deposit__form {
    margin-top: 3rem;
}
.deposit__form--group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.currency_main {
    padding-left: 0.5rem;
}

.deposit__form--group label {
    font-weight: 400;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.input__group {
    display: flex;
    align-items: center;
    border: 1px solid #898484;
    width: 100%;
    padding: 0.5rem;
}

.input__group input {
    color: #d5d2d2;
    background: none;
    outline: none;
    padding-left: 1rem;
    border: none;
}

.amount {
    width: 100%;
}

#currency_type {
    width: 10rem;
    border: 1px solid #898484;
    padding: 3px;
    padding-left: 1rem;
}

#currency_type::placeholder {
    color: #d5d2d2;
}

.deposit__form--group > input {
    background: none;
    outline: none;
    border: 1px solid #898484;
    padding: 1rem;
}

.exchange__rate {
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.exchange__amount {
    font-weight: 500;
}

.input__group.coin__address {
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #898484;
}

.input__group.deposit_input {
    border: 1px solid #898484;
}

#deposit_address {
    width: 100%;
    height: 100%;
}

.address__content-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 3px 6px;
    font-size: 1.8rem;
    background-color: #ff614b;
    color: #fff;
    outline: none;
    border: none;
}
.address__content-btn:focus {
    outline: none;
    border: none;
}

.network__type-title {
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.network__type {
    font-weight: 500;
    text-transform: uppercase;
}

.caution {
    padding: 1rem;
    background-color: #515051;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.caution__icon {
    align-self: baseline;
    height: 32px;
    width: 32px;
    margin-bottom: 0.6rem;
}
.caution__text {
    color: #c6d3c7;
}
.caution__text--title {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.tips {
    padding: 1rem;
    background-color: #515051;
    font-size: 1.3rem;
    color: #c6d3c7;
    margin-bottom: 1rem;
}
.tips__title {
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: capitalize;
}
.tips__list {
    list-style-image: url(../../assets/icons/list-type.png);
    margin-left: 1.5rem;
}
.tips__list--item {
    padding-left: 5px;
    margin-bottom: 0.5rem;
}
.tips__list--item-link {
    color: #11e169;
    text-decoration: none;
}

.deposit__modal--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
}

.confirm__deposit,
.cancel__deposit {
    outline: none;
    border: none;
    padding: 0.8rem 1.6rem;
    text-transform: capitalize;
    background: none;
    font-size: 1.6rem;
}
.confirm__deposit:active,
.confirm__deposit:hover,
.confirm__deposit:focus,
.cancel__deposit:active,
.cancel__deposit:hover,
.cancel__deposit:focus {
    outline: none;
    border: none;
}

.confirm__deposit {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
    transition: all 0.2s;
}
.confirm__deposit:hover {
    background-color: #11e169;
    color: #fff;
}

.cancel__deposit {
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
    transition: all 0.2s;
}
.cancel__deposit:hover {
    background-color: #ff614b;
    color: #fff;
}

.payment__method,
.deposit__address--group-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #898484;
    padding: 1rem;
}

.deposit__address--group-group {
    gap: 1rem;
}

.deposit__address--address {
    width: 100%;
    overflow: hidden;
    font-size: 1.5rem;
}

.payment__method {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}
.payment__method--symbol {
    padding: 0.5rem 1rem;
    background-color: #ff614b;
    color: #fff;
}

.confirm__deposit--content-text {
    margin: 2rem auto;
}

.confirm__deposit--amount {
    font-weight: 600;
}

.deposit__address--group-network {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
    font-size: 1.2rem;
}

.network__method-type {
    font-weight: 600;
    text-transform: capitalize;
}

.proof__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 3rem;
}

.proof__group label {
    font-weight: 600;
}

.upload__group {
    border: 1px solid #898484;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

#deposit__proof {
    display: none;
}

.file__upload {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    cursor: pointer;
    color: #fff;
    text-align: center;
}

.c-primary {
    background-color: #ff614b;
}

.confirm__deposit-back {
    background-color: #f5deb3;
    border: none;
    outline: none;
    padding: 0.4rem 0.8rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deposit__method--container {
    display: none;
}
.deposit__method--container.active {
    display: block;
}

.deposit_input {
    margin: 0.5rem 0 1rem 0;
    position: relative;
    padding: 1rem;
}

.main_currency-code {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}

.amount {
    padding-right: 5rem;
}

#coin_type,
#coin_type-w,
#coin_type-b {
    background: none;
    border: 1px solid #898484;
}

.deposit_error {
    color: rgba(255, 97, 75, 0.8);
    font-size: 1.4rem;
    display: none;
}
.deposit_error.active {
    display: flex;
}

.proof-allowed {
    display: block;
    font-size: 1.4rem;
    font-weight: 300;
    color: #11e169;
}

.withdrawal__modal {
    position: absolute;
    width: 100vw;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background: rgba(89, 62, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
}
.withdrawal__modal.active {
    display: flex;
}
.withdrawal__modal--container {
    width: 35%;
    min-height: auto;
    max-height: 95%;
    overflow-y: auto;
    border: 1px solid #f5deb3;
    margin: auto;
    padding: 2rem 3rem;
    color: #d5d2d2;
    background-color: #444;
    cursor: pointer;
    padding-bottom: 5rem;
}
.withdrawal__modal--container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.withdrawal__modal--container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.withdrawal__modal--container *::-webkit-scrollbar-track {
    background: none;
}
.withdrawal__modal--container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 64.56em) {
    .withdrawal__modal--container {
        width: 45%;
    }
}
@media (max-width: 51.18em) {
    .withdrawal__modal--container {
        width: 50%;
    }
}
@media (max-width: 41.37em) {
    .withdrawal__modal--container {
        width: 60%;
    }
}
@media (max-width: 35.68em) {
    .withdrawal__modal--container {
        width: 70%;
    }
}
@media (max-width: 27.6em) {
    .withdrawal__modal--container {
        width: 90%;
        padding: 1rem;
    }
}
.withdrawal__modal--title {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.withdrawal__form {
    margin-top: 3rem;
}
.withdrawal__form--input {
    margin-bottom: 2.5rem;
}
.withdrawal__form--input-group {
    border: 1px solid #898484;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.withdrawal__form--input-amount {
    background: none;
    border: none;
    outline: none;
    width: 100%;
    padding-left: 1rem;
}
.withdrawal__form--input-currency {
    padding: 0.5rem;
    background: none;
    border: 1px solid #898484;
    outline: none;
    width: 40%;
}
.withdrawal__form--group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}

.withdrawal__form--input label {
    font-weight: 400;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.input__group {
    display: flex;
}

.method__container--crypto {
    display: none;
}
.method__container--crypto.active {
    display: block;
}

.method__container--bank {
    display: none;
}
.method__container--bank.active {
    display: block;
}

.crypto__method--container {
    margin-bottom: 3rem;
}
.crypto__method--container-fill {
    display: none;
    flex-direction: column;
    gap: 2rem;
}
.crypto__method--container-fill.active {
    display: flex;
}
.crypto__method--container-saved {
    display: none;
    flex-direction: column;
    gap: 2rem;
}
.crypto__method--container-saved.active {
    display: flex;
}

.saved_method-title {
    text-transform: none;
    font-size: 1.6rem;
}

.grouped__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.grouped__form--input {
    display: flex;
    flex-direction: column;
}
.grouped__form--label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.withdrawal__coin--value-text,
.withdrawal__network--type-text {
    margin: 0;
    font-size: 1.2rem;
}

.withdrawal__coin--value-amount,
.withdrawal__network--type-symbol {
    font-weight: 600;
}

.coin_type,
.paste__input-group {
    border: 1px solid #898484;
    padding: 1rem;
    background: none;
    margin-top: 0.5rem;
    outline: none;
}

.paste__input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
}

.withdrawal__address {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    overflow: auto;
}
.withdrawal__address * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.withdrawal__address *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.withdrawal__address *::-webkit-scrollbar-track {
    background: none;
}
.withdrawal__address *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.paste__btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #ff614b;
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 1.5rem;
    cursor: pointer;
}

.grouped__input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.grouped__input--label {
    font-weight: 600;
}
.grouped__input--input {
    border: 1px solid #898484;
    padding: 0.8rem 2rem;
    background: none;
    width: 100%;
    outline: none;
}

#mb-sm,
.mb-sm {
    margin-bottom: 0.5rem;
}

.withdrawal__btn {
    background-color: rgba(89, 62, 255, 0.2);
    color: #fff;
    transition: all 0.2s;
    outline: none;
    border: none;
}
.withdrawal__btn:hover,
.withdrawal__btn:active,
.withdrawal__btn:focus {
    background-color: #593eff;
    color: #fff;
    border: none;
    outline: none;
}

.withdrawal__form--method {
    display: none;
}
.withdrawal__form--method.active {
    display: block;
}

.tips {
    margin-top: 2rem;
}

.bankWithdrawalMethod {
    display: none;
}
.bankWithdrawalMethod.active {
    display: block;
}

.flash__message {
    background-color: #11e169;
    color: #000;
    border-radius: 5px;
    font-size: 1.5rem;
    overflow: hidden;
    max-width: 30rem;
    text-align: center;
    position: absolute;
    z-index: 9999999;
    right: 100%;
    top: 8rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.flash__message.active {
    right: 3rem;
    visibility: visible;
    opacity: 1;
}
.flash__message--message {
    padding: 0.5rem 2rem;
    text-transform: capitalize;
}
.flash__message--counter {
    height: 3px;
    width: 100%;
    background-color: #008000;
}

#flash_initiate {
    text-transform: capitalize;
}

.train__toggle,
.withdrawal__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #ff614b;
}
.train__toggle--bg,
.withdrawal__toggle--bg {
    position: absolute;
    height: 10%;
    background-color: #ff614b;
    left: 0;
    bottom: 0;
    transition: all 0.2s;
}
.train__toggle--item,
.withdrawal__toggle--item {
    padding: 1rem;
    width: 100%;
    text-align: center;
    text-transform: capitalize;
    cursor: pointer;
}

.investment__modal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
    overflow-y: auto;
}
.investment__modal.active {
    display: flex;
}
.investment__modal--container {
    width: 60%;
    padding: 3rem;
    background-color: #fff;
}
@media (max-width: 64.56em) {
    .investment__modal--container {
        width: 95%;
    }
}
@media (max-width: 51.18em) {
    .investment__modal--container {
        width: 60%;
    }
}
@media (max-width: 45.87em) {
    .investment__modal--container {
        width: 80%;
    }
}
@media (max-width: 35.68em) {
    .investment__modal--container {
        font-size: 1.6rem;
    }
}
@media (max-width: 31.2em) {
    .investment__modal--container {
        width: 90%;
    }
}
@media (max-width: 27.6em) {
    .investment__modal--container {
        width: 95%;
        padding: 2rem;
    }
}
.investment__modal--heading {
    margin-bottom: 2rem;
}
.investment__modal--heading-title {
    color: #000;
    font-size: 2rem;
    font-weight: 600;
    text-transform: capitalize;
}
.investment__modal--body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 2rem;
    row-gap: 2rem;
    margin-bottom: 3rem;
}
@media (max-width: 31.2em) {
    .investment__modal--body {
        row-gap: 0;
    }
}
@media (max-width: 22.5em) {
    .investment__modal--body {
        margin-bottom: 1.5rem;
    }
}
@media (max-width: 51.18em) {
    .investment__modal--body {
        grid-template-columns: 1fr;
    }
}
.investment__modal--body-settings,
.investment__modal--body-result {
    background-color: #e7e8ef;
    color: #000;
    padding: 2rem;
    width: 100%;
}
@media (max-width: 27.6em) {
    .investment__modal--body-settings {
        padding-bottom: 1rem;
    }
}
@media (max-width: 27.6em) {
    .investment__modal--body-result {
        padding-top: 0;
    }
}
.investment__modal--form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.investment__modal--risk-title {
    text-transform: capitalize;
    margin-bottom: 1rem;
}
.investment__modal--risk-levels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.investment__modal--projected {
    border-bottom: 1px solid #444;
    padding: 1rem 0;
    padding-bottom: 2rem;
    margin-top: 3rem;
}
@media (max-width: 45.87em) {
    .investment__modal--projected {
        margin-top: 0;
    }
}
.investment__modal--performance {
    margin-top: 3rem;
}
@media (max-width: 45.87em) {
    .investment__modal--performance {
        margin-top: 1.5rem;
    }
}
.investment__modal--performance-worse,
.investment__modal--performance-better {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.investment__modal--performance-worse:not(:last-child),
.investment__modal--performance-better:not(:last-child) {
    margin-bottom: 1rem;
}

.investment__modal--form-group label {
    text-transform: capitalize;
}

.investment__modal--form-group p {
    padding: 1.5rem;
    background-color: #fff;
}
@media (max-width: 27.6em) {
    .investment__modal--form-group p {
        padding: 1rem;
    }
}

.investment__modal-slider {
    margin-top: 1rem;
}

#initial_investment,
#reoccuring_investment,
#investment_duration {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.8rem;
    background: transparent;
    outline: none;
    position: relative;
    border-radius: 100px;
}

#initial_investment::-webkit-slider-runnable-track,
#reoccuring_investment::-webkit-slider-runnable-track,
#investment_duration::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

#initial_investment::-moz-range-track,
#reoccuring_investment::-moz-range-track,
#investment_duration::-moz-range-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

#initial_investment::-webkit-slider-thumb,
#reoccuring_investment::-webkit-slider-thumb,
#investment_duration::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}
@media (max-width: 27.6em) {
    #initial_investment::-webkit-slider-thumb,
    #reoccuring_investment::-webkit-slider-thumb,
    #investment_duration::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
}

#initial_investment::-moz-range-thumb,
#reoccuring_investment::-moz-range-thumb,
#investment_duration::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    position: relative;
    z-index: 2;
}

#initial_investment::-ms-thumb,
#reoccuring_investment::-ms-thumb,
#investment_duration::-ms-thumb {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}

.risk__level {
    display: flex;
    align-items: center;
    gap: 2rem;
    border: 1px solid #000;
    padding: 1rem;
    cursor: pointer;
}
@media (max-width: 27.6em) {
    .risk__level {
        gap: 1rem;
        padding: 0.6rem;
    }
}
.risk__level--title {
    cursor: pointer;
}
.risk__level.active {
    background-color: #000;
    color: #fff;
}

.radio__control {
    cursor: pointer;
}

#low_risk,
#medium_risk,
#high_risk {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#low_risk::before,
#medium_risk::before,
#high_risk::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
}

#low_risk:checked::before,
#medium_risk:checked::before,
#high_risk:checked::before {
    transform: scale(1);
}

#low_risk:checked,
#medium_risk:checked,
#high_risk:checked {
    border: 2px solid #fff;
}

#low_risk:focus,
#medium_risk:focus,
#high_risk:focus {
    border: 2px solid #fff;
}

.investment__modal--projected-investing,
.investment__modal--projected-projected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.investment__modal--projected-investing:not(:last-child),
.investment__modal--projected-projected:not(:last-child) {
    margin-bottom: 1rem;
}

.investment__modal--projected-projected {
    background-color: #000;
    color: #fff;
}

.investment__modal--btn {
    padding: 0.6rem 1.4rem;
    background: none;
    border: 1px solid #000;
    color: #000;
    font-size: 1.8rem;
    transition: all 0.3s;
    cursor: pointer;
    display: inline-block;
    align-self: flex-end;
}
.investment__modal--btn:hover {
    background: #000;
    border: 1px solid transparent;
    color: #fff;
}

#reocur_type {
    font-weight: 600;
}

.range__slider {
    margin-top: 1rem;
}

.range__slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.8rem;
    background: transparent;
    outline: none;
    position: relative;
    border-radius: 100px;
}

.range__slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

.range__slider::-moz-range-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

.range__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}

.range__slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    position: relative;
    z-index: 2;
}

.range__slider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}

.list__table {
    width: auto;
}
.list__table--table {
    margin: auto;
}
.list__table--table-thead {
    z-index: 9999;
}
.list__table--table-throw {
    background-color: #ff614b;
    color: #fff;
}
.list__table--table-tbrow {
    cursor: pointer;
    font-size: 1.5rem;
}
.list__table--userbio {
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    gap: 1rem;
}
.list__table--userbio-img {
    height: 45px;
    width: 45px;
    border-radius: 100%;
    border: 1.5px solid #ff614b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    position: relative;
}
.list__table--userbio-img.online {
    border-color: #11e169;
}
@media (max-width: 51.18em) {
    .list__table--userbio-img {
        display: none;
    }
}
.list__table--userbio-text {
    text-align: left;
}
.list__table--userbio-name {
    text-transform: capitalize;
    font-weight: 500;
}
.list__table--userbio-email {
    text-decoration: none;
    color: #dcd8d8;
}
.list__table--userbio-tradeid {
    color: #dcd8d8;
}

#table_list-throw th {
    text-align: center;
    font-weight: 500;
}

#table_list-tbody tr {
    text-align: center;
    color: #fff;
    background-color: #504747;
}

.list__table--table-tbd {
    border-top: 5px solid #000;
    border-left: 1px solid #000;
    position: relative;
}
.list__table--table-tbd-link {
    color: #ff614b;
    text-decoration: none;
}
.list__table--table-tbd-link:hover,
.list__table--table-tbd-link:focus {
    color: #11e169;
}

.table__check {
    height: 14px;
    width: 14px;
}

.table__check:checked {
    accent-color: #ff614b;
}

.list_table-img {
    height: 90%;
    width: 90%;
    border-radius: 100%;
}

.list__table--balance,
.list__table--deposit,
.list__table--withdrawal,
.list__table--emailstatus,
.list__table--accountstatus,
.list__table--kycstatus,
.list__table--method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(217, 217, 217, 0.8);
    gap: 2rem;
}
.list__table--balance:not(:last-child),
.list__table--deposit:not(:last-child),
.list__table--withdrawal:not(:last-child),
.list__table--emailstatus:not(:last-child),
.list__table--accountstatus:not(:last-child),
.list__table--kycstatus:not(:last-child),
.list__table--method:not(:last-child) {
    margin-bottom: 3px;
}
.list__table--balance-text,
.list__table--deposit-text,
.list__table--withdrawal-text,
.list__table--emailstatus-text,
.list__table--accountstatus-text,
.list__table--kycstatus-text,
.list__table--method-text {
    text-transform: capitalize;
}
.list__table--balance-status,
.list__table--balance-amount,
.list__table--deposit-status,
.list__table--deposit-amount,
.list__table--withdrawal-status,
.list__table--withdrawal-amount,
.list__table--emailstatus-status,
.list__table--emailstatus-amount,
.list__table--accountstatus-status,
.list__table--accountstatus-amount,
.list__table--kycstatus-status,
.list__table--kycstatus-amount,
.list__table--method-status,
.list__table--method-amount {
    text-transform: capitalize;
}
.list__table--balance-status.failed,
.list__table--balance-amount.failed,
.list__table--deposit-status.failed,
.list__table--deposit-amount.failed,
.list__table--withdrawal-status.failed,
.list__table--withdrawal-amount.failed,
.list__table--emailstatus-status.failed,
.list__table--emailstatus-amount.failed,
.list__table--accountstatus-status.failed,
.list__table--accountstatus-amount.failed,
.list__table--kycstatus-status.failed,
.list__table--kycstatus-amount.failed,
.list__table--method-status.failed,
.list__table--method-amount.failed {
    color: #ff0000;
}
.list__table--balance-status.pending,
.list__table--balance-amount.pending,
.list__table--deposit-status.pending,
.list__table--deposit-amount.pending,
.list__table--withdrawal-status.pending,
.list__table--withdrawal-amount.pending,
.list__table--emailstatus-status.pending,
.list__table--emailstatus-amount.pending,
.list__table--accountstatus-status.pending,
.list__table--accountstatus-amount.pending,
.list__table--kycstatus-status.pending,
.list__table--kycstatus-amount.pending,
.list__table--method-status.pending,
.list__table--method-amount.pending {
    color: rgba(245, 222, 179, 0.6);
}
.list__table--balance-status.verified,
.list__table--deposit-status.verified,
.list__table--withdrawal-status.verified,
.list__table--emailstatus-status.verified,
.list__table--accountstatus-status.verified,
.list__table--kycstatus-status.verified,
.list__table--method-status.verified {
    color: #11e169;
}
.list__table--balance-status.blocked,
.list__table--deposit-status.blocked,
.list__table--withdrawal-status.blocked,
.list__table--emailstatus-status.blocked,
.list__table--accountstatus-status.blocked,
.list__table--kycstatus-status.blocked,
.list__table--method-status.blocked {
    color: #ff0000;
}
.list__table--balance-status.suspended,
.list__table--deposit-status.suspended,
.list__table--withdrawal-status.suspended,
.list__table--emailstatus-status.suspended,
.list__table--accountstatus-status.suspended,
.list__table--kycstatus-status.suspended,
.list__table--method-status.suspended {
    color: #444;
}
.list__table--balance-status.pending,
.list__table--deposit-status.pending,
.list__table--withdrawal-status.pending,
.list__table--emailstatus-status.pending,
.list__table--accountstatus-status.pending,
.list__table--kycstatus-status.pending,
.list__table--method-status.pending {
    color: rgba(245, 222, 179, 0.6);
}

.list__table--deposit-amount {
    color: #11e169;
}

.list__table--withdrawal-amount {
    color: #ff614b;
    font-weight: 500;
}

.list__table--depositstatus-status,
.list__table--withdrawalstatus-status {
    text-transform: capitalize;
    display: inline-block;
}
.list__table--depositstatus-status.success,
.list__table--withdrawalstatus-status.success {
    color: #11e169;
}
.list__table--depositstatus-status.pending,
.list__table--withdrawalstatus-status.pending {
    color: rgba(245, 222, 179, 0.6);
}
.list__table--depositstatus-status.failed,
.list__table--withdrawalstatus-status.failed {
    color: #ff0000;
}

.withdrawal {
    color: #11e169;
}

.list__table {
    height: 80vh;
    overflow-y: auto;
    padding-bottom: 20rem;
}
.list__table * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.list__table *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.list__table *::-webkit-scrollbar-track {
    background: none;
}
.list__table *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.session_status {
    position: absolute;
    height: 11px;
    width: 11px;
    background-color: #ff614b;
    display: inline-block;
    right: -2px;
    bottom: 2px;
    border-radius: 100%;
    filter: blur(1px);
    animation: sessionAnimation 3s infinite;
}
.session_status.online {
    background-color: #11e169;
}

.kyc-stat {
    border-bottom: none;
    text-align: center;
}

@media (max-width: 27.6em) {
    .table-deposit-method,
    .table-header-method,
    .thead_count,
    .thead_method,
    .tdata_count,
    .tdata_method {
        display: none;
    }
}

.managed__account--header {
    margin-bottom: 4rem;
}
@media (max-width: 37.5em) {
    .managed__account--header {
        padding: 1rem 2rem;
    }
}
.managed__account--header-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}
.managed__account--header-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 27.6em) {
    .managed__account--header-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.managed__account--btns {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 1rem;
}
@media (max-width: 37.5em) {
    .managed__account--btns {
        padding: 0;
    }
}
.managed__account--btns-btn {
    outline: none;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border-radius: 100px;
    font-size: 1.4rem;
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
    transition: all 0.3s;
    border: 1px solid transparent;
    cursor: pointer;
}
.managed__account--btns-btn:focus,
.managed__account--btns-btn:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #ff614b;
    color: #fff;
}
.managed__account--btns-btn.createnew {
    color: #fff;
}
.managed__account--btns-btn.edit,
.managed__account--btns-btn.cancel {
    border: 1px solid rgba(255, 97, 75, 0.8);
    background: none;
}
.managed__account--btns-btn.edit:focus,
.managed__account--btns-btn.edit:hover,
.managed__account--btns-btn.cancel:focus,
.managed__account--btns-btn.cancel:hover {
    border: 1px solid #ff614b;
    background-color: #ff614b;
}
.managed__account--btns-btn.cancel:focus,
.managed__account--btns-btn.cancel:hover {
    color: #fff;
}

.managed__account--body {
    max-height: 90vh;
    padding-bottom: 30rem;
}

.managed__account--btns {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.managed__account-btn {
    font-size: 1.5rem;
    display: flex;
}
.managed__account-btn.edit {
    width: 10rem;
}

.managed__account--title {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.managed__account--cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 2rem;
    row-gap: 8rem;
    margin: 0 auto;
    padding-bottom: 15rem;
}
@media (max-width: 920px) {
    .managed__account--cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 45.87em) {
    .managed__account--cards {
        grid-template-columns: 1fr;
        row-gap: 4rem;
    }
}

.managed__account--form {
    display: flex;
    align-items: center;
}
.managed__account--form-container {
    background-color: #2a2222;
    padding: 3rem;
    margin: 3rem auto;
    border-top: 4px solid #ff614b;
    border-bottom: 4px solid #ff614b;
    max-width: 70rem;
}
@media (max-width: 31.2em) {
    .managed__account--form-container {
        max-width: 100%;
        width: 100%;
        padding: 2rem;
    }
}
@media (max-width: 27.6em) {
    .managed__account--form-container {
        width: 100%;
        padding: 2rem 1rem;
    }
}
.managed__account--form-header {
    margin-bottom: 3rem;
}
.managed__account--form-heading {
    font-size: 2.4rem;
    font-weight: 400;
    text-transform: capitalize;
}

.managed__card {
    min-width: 30rem;
    width: 100%;
    max-width: 50rem;
    margin: auto;
    border: 2px solid #ff614b;
    font-size: 1.8rem;
}
@media (max-width: 22.5em) {
    .managed__card {
        max-width: 38rem;
    }
}
.managed__card--header {
    background-color: #000;
    padding: 1.5rem;
    border-bottom: 1px solid #ff614b;
}
.managed__card--header-top {
    margin-bottom: 1rem;
}
.managed__card--header-top,
.managed__card--header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.managed__card--header-title {
    text-transform: uppercase;
    color: #ff614b;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.managed__card--header-text {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.managed__card--header-icon {
    height: 2rem;
    width: 2rem;
    border: 3px solid #ff614b;
    display: inline-block;
    transform: rotate(45deg);
}
.managed__card--header-icon.bot {
    border-radius: 100%;
}
.managed__card--body-settings,
.managed__card--body-result {
    background-color: #e7e8ef;
    color: #000;
}
@media (max-width: 27.6em) {
    .managed__card--body-settings {
        padding-bottom: 1rem;
    }
}
@media (max-width: 27.6em) {
    .managed__card--body-result {
        padding-top: 0;
    }
}
.managed__card--body-form {
    padding: 2rem;
}
.managed__card--body-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.managed__card--risk {
    padding-top: 1.5rem;
    padding-bottom: 0;
}
.managed__card--risk-title {
    text-transform: capitalize;
    margin-bottom: 1rem;
}
.managed__card--risk-levels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.managed__card--projected {
    border-bottom: 1px solid #444;
    padding: 1rem 0;
}
@media (max-width: 45.87em) {
    .managed__card--projected {
        margin-top: 0;
    }
}
.managed__card--performance {
    margin-top: 1rem;
    padding: 0 1.5rem;
    font-weight: 500;
}
@media (max-width: 45.87em) {
    .managed__card--performance {
        margin-top: 1.5rem;
    }
}
.managed__card--performance-worse,
.managed__card--performance-better {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.managed__card--performance-worse:not(:first-child),
.managed__card--performance-better:not(:first-child) {
    padding-bottom: 1.5rem;
}
.managed__card--subscribers {
    text-transform: capitalize;
}
.managed__card--count {
    display: inline-block;
    padding: 3px 10px;
    background-color: #ff614b;
    font-size: 1.4rem;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    border: none;
    outline: none;
}
.managed__card--count:focus {
    outline: none;
    border: none;
}
.managed__card--count:hover {
    opacity: 0.9;
}

.managed__card--projected-investing,
.managed__card--projected-projected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.managed__card--projected-projected {
    background-color: #000;
    color: #fff;
}

.managed__card--body-form-group label {
    text-transform: capitalize;
}

.managed__card--body-form-group p {
    padding: 1rem;
    background-color: #fff;
}
@media (max-width: 27.6em) {
    .managed__card--body-form-group p {
        padding: 1rem;
    }
}

.managed__account-btn {
    background: none;
    outline: none;
    color: inherit;
    border: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: all 0.3s;
    cursor: pointer;
}
.managed__account-btn:focus {
    outline: none;
    border: none;
}
.managed__account-btn.deactivate:hover {
    color: #ff0000;
}
.managed__account-btn.edit:hover {
    color: #11e169;
}
.managed__account-btn.configure:hover {
    color: #11e169;
}

.managed__card-btn {
    background: none;
    outline: none;
    color: inherit;
    border: none;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: all 0.3s;
    cursor: pointer;
}
.managed__card-btn:focus {
    outline: none;
    border: none;
    text-decoration-color: #11e169;
    color: #11e169;
}
.managed__card-btn.configure:hover {
    color: #ff614b;
}
.managed__card-btn.delete:hover {
    color: #ff0000;
}
.managed__card-btn.delete:focus {
    text-decoration-color: #800000;
    color: #800000;
}

.managed__card {
    color: #fff;
}

.managed__card:nth-child(3n + 1) {
    border-color: #ff614b;
    border-bottom: 5px solid #ff614b;
}

.managed__card:nth-child(3n + 2) {
    border-color: #11e169;
    border-bottom: 5px solid #11e169;
}

.managed__card:nth-child(3n + 3) {
    border-color: #593eff;
    border-bottom: 5px solid #593eff;
}

.managed__card--slider {
    margin-top: 1rem;
}

.managed_slide {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.8rem;
    background: transparent;
    outline: none;
    position: relative;
    border-radius: 100px;
}

.managed_slide::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

.managed_slide::-moz-range-track {
    width: 100%;
    height: 0.8rem;
    border-radius: 5px;
    cursor: pointer;
}

.managed_slide::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}
@media (max-width: 27.6em) {
    .managed_slide::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }
}

.managed_slide::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    position: relative;
    z-index: 2;
}

.managed_slide::-ms-thumb {
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    z-index: 2;
}

.risk__level {
    display: flex;
    align-items: center;
    gap: 2rem;
    border: 1px solid #000;
    padding: 0.6rem 1rem;
}
@media (max-width: 27.6em) {
    .risk__level {
        gap: 1rem;
        padding: 0.6rem;
    }
}
.risk__level.active {
    background-color: #000;
    color: #fff;
}

.risk_level {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #000;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.risk_level::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
}

.risk_level:checked::before {
    transform: scale(1);
}

.risk_level:checked {
    border: 2px solid #fff;
}

.risk_level:focus {
    border: 2px solid #fff;
}

.edit__name--form {
    display: none;
}
.edit__name--form.active {
    display: flex;
}

.edit_name-form {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#change_name {
    background: none;
    border: 1px solid #f5deb3;
    padding: 0.5rem;
    outline: none;
}
#change_name:focus {
    border: 1px solid #ff614b;
}

.save_name,
.save_text {
    border: none;
    outline: none;
    background: none;
    color: inherit;
    font-size: 1.6rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: all 0.3s;
}
.save_name:focus,
.save_text:focus {
    outline: none;
    color: #ff614b;
}
.save_name:hover,
.save_text:hover {
    color: #11e169;
}

#edit_name.active,
#edit_text.active {
    display: none;
}

.cancel {
    display: none;
}
.cancel.active {
    display: flex;
}
.cancel:hover {
    color: #ff614b;
}

.managed__account-text {
    display: flex;
}
.managed__account-text.active {
    display: none;
}

.edit__text-form {
    display: none;
    margin-top: 2rem;
    width: 100%;
}
.edit__text-form.active {
    display: flex;
}

.edit_text-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
}
.edit_text-form-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.edit_text-form-btn {
    border: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0.8rem 1.6rem;
    border-radius: 100px;
    font-size: 1.4rem;
    background: none;
    color: inherit;
    transition: all 0.3s;
}
.edit_text-form-btn:focus,
.edit_text-form-btn:hover {
    border: none;
    outline: none;
}
.edit_text-form-btn.close {
    border: 1px solid #f5deb3;
}
.edit_text-form-btn.close:focus,
.edit_text-form-btn.close:hover {
    border: 1px solid transparent;
    outline: none;
    background-color: #f5deb3;
    color: #000;
}
.edit_text-form-btn.save {
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
}
.edit_text-form-btn.save:focus,
.edit_text-form-btn.save:hover {
    outline: none;
    background-color: #f5deb3;
    color: #000;
}

#change_text {
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    background: none;
    color: inherit;
    border: 1px solid #f5deb3;
    outline: none;
}
#change_text:focus {
    border: 1px solid #ff614b;
}

.manageform__group {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}
.manageform__group-error {
    font-size: 1.4rem;
    color: #ff614b;
    margin-top: 0.5rem;
    visibility: hidden;
}
.manageform__group-error.active {
    visibility: visible;
}
.manageform__group--group {
    margin-top: 2.5rem;
}
.manageform__group--title {
    font-weight: 500;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: #ff614b;
}
.manageform__group--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5rem;
    width: 100%;
}
.manageform__group--btn {
    cursor: pointer;
    text-decoration: none;
    background: none;
    outline: none;
    border: 1px solid transparent;
    color: inherit;
    padding: 0.8rem 1.6rem;
    transition: all 0.3s;
}
.manageform__group--btn:hover,
.manageform__group--btn:focus {
    outline: none;
    border: none;
}
.manageform__group--btn.addPlan,
.manageform__group--btn.savePlan {
    background-color: rgba(17, 225, 105, 0.5);
    color: #11e169;
    border: 1px solid rgba(17, 225, 105, 0.5);
}
.manageform__group--btn.addPlan:hover,
.manageform__group--btn.addPlan:focus,
.manageform__group--btn.savePlan:hover,
.manageform__group--btn.savePlan:focus {
    background-color: #11e169;
    color: #000;
    border: 1px solid #11e169;
}
.manageform__group--btn.previewPlan,
.manageform__group--btn.backEdit {
    border: 1px solid #f5deb3;
}
.manageform__group--btn.previewPlan:hover,
.manageform__group--btn.previewPlan:focus,
.manageform__group--btn.backEdit:hover,
.manageform__group--btn.backEdit:focus {
    background-color: #f5deb3;
    color: #000;
    border: 1px solid #f5deb3;
}

.manageform__group input {
    background: none;
    border: 1px solid #fff;
    outline: none;
    padding: 1rem;
    font-size: inherit;
    color: inherit;
    transition: all 0.3s;
    width: 100%;
}
.manageform__group input:focus,
.manageform__group input:hover {
    border: 1px solid #ff614b;
}

.manageform__group label {
    margin-bottom: 0.5rem;
}

.nohoverborder:hover,
.nohoverborder:focus {
    border: none !important;
    outline: none;
}

.plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
@media (max-width: 27.6em) {
    .plan__head {
        flex-direction: column;
        align-items: stretch;
    }
}

.spbw {
    justify-content: space-between;
}
.spbw:not(:last-child) {
    margin-bottom: 2rem;
}
@media (max-width: 27.6em) {
    .spbw {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }
}

.input-sm input {
    max-width: 10rem;
}

.investment_plan {
    display: none;
    width: 100%;
    min-width: 50rem;
}
@media (max-width: 31.2em) {
    .investment_plan {
        min-width: 40rem;
    }
}
.investment_plan.noneDisplay {
    display: block;
}

.hide {
    visibility: hidden;
}

.configure__modal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    z-index: 999999;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
    border-radius: 0;
}
.configure__modal.active {
    display: flex;
}
.configure__modal--container {
    width: 40%;
    height: 90%;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-y: auto;
    margin: auto;
}
@media (max-width: 45.87em) {
    .configure__modal--container {
        width: 80%;
    }
}
@media (max-width: 31.2em) {
    .configure__modal--container {
        width: 90%;
    }
}
@media (max-width: 22.5em) {
    .configure__modal--container {
        width: 95%;
    }
}
.configure__modal--main {
    height: 88%;
    width: 100%;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.configure__modal--configure,
.configure__modal--preview {
    margin: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all 0.3s;
}
.configure__modal--configure {
    background-color: #fff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2rem;
}
.configure__modal--configure * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.configure__modal--configure *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.configure__modal--configure *::-webkit-scrollbar-track {
    background: none;
}
.configure__modal--configure *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.configure__modal--preview {
    left: 100%;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    background-color: #e7e8ef;
}
.configure__modal--preview * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.configure__modal--preview *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.configure__modal--preview *::-webkit-scrollbar-track {
    background: none;
}
.configure__modal--preview *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.configure__modal--preview.active {
    left: 0;
}
.configure__modal--form-title {
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
}

.configure_btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
}

.preview-btn,
.save_configure--btn {
    background-color: #fff;
    color: #000;
    padding: 1rem;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 600;
}

.configure__form {
    font-size: 1.5rem;
}
.configure__form--group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1.5rem;
}

.configure_input {
    padding: 0.5rem;
    padding-right: 1rem;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid transparent;
    background-color: #d9d9d9;
    outline: none;
}
.configure_input:focus {
    border: 1px solid #ff614b;
}

.configure__groups {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.plan_name {
    width: 100%;
}

.plan_spread-g {
    width: 8rem;
}

.plan_spread {
    padding-left: 2rem;
}

.for_config p {
    padding: 1.5rem;
}

.for_config {
    margin-bottom: 2.5rem;
}

.input__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    gap: 1rem;
}

input[type="number"] {
    color: #000;
    border: 1px solid black;
    width: 40%;
    text-align: right;
}

#max_capital_add {
    width: 60%;
}

legend {
    padding: 1rem;
}

fieldset {
    padding: 1rem;
    border: 1px solid black;
}

#configure_low_risk,
#configure_medium_risk,
#configure_high_risk {
    width: 7rem;
}

#bad_performance,
#good_performance {
    width: 8rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.inst {
    display: inline-block;
    font-size: 1rem;
    padding-bottom: 5px;
}

.for_preview {
    width: 100%;
    max-width: 60rem;
    height: 100%;
    margin: auto;
}

.configure_expected {
    padding: 2rem;
}

#config_risk_low,
#config_risk_medium,
#config_risk_high {
    padding: 1rem;
}

.configure_disable {
    visibility: hidden;
}

.error_state {
    border: 1px solid #ff0000 !important;
    background-color: rgba(255, 97, 75, 0.2) !important;
}

.success_state {
    border: 1px solid #008000 !important;
    background-color: rgba(17, 225, 105, 0.2) !important;
}

.no-show {
    display: none;
}

@media (max-width: 27.6em) {
    #risk_group,
    #period_group,
    #addInvest_group {
        flex-wrap: wrap;
    }
}

@media (max-width: 27.6em) {
    #max_capital_add {
        width: 40%;
    }
}

@media (max-width: 27.6em) {
    #configure_low_risk,
    #configure_medium_risk,
    #configure_high_risk {
        width: 40%;
    }
}

@media (max-width: 37.5em) {
    #close_configure {
        top: 10rem;
        right: 4rem;
        font-size: 3rem;
        color: #fff;
        z-index: 9999999;
        background-color: #000;
    }
}

.subscribers__modal {
    max-width: 45rem;
    max-height: 60rem;
    overflow-y: scroll;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 30%);
    z-index: 9999999;
    padding: 2rem;
    padding-top: 0;
    padding-bottom: 2rem;
    border-radius: 5px;
    font-size: 1.5rem;
    color: #fff;
    display: none;
}
@media (max-width: 37.5em) {
    .subscribers__modal {
        width: 70rem;
        padding: 2rem;
    }
}
.subscribers__modal * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.subscribers__modal *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.subscribers__modal *::-webkit-scrollbar-track {
    background: none;
}
.subscribers__modal *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.subscribers__modal.active {
    display: block;
}
.subscribers__modal--header {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.subscribers__modal--header-title,
.subscribers__modal--header-btn {
    margin-bottom: 2rem;
    font-weight: 500;
    text-transform: uppercase;
}

#subscribers__table--head tr {
    font-weight: 400;
    background-color: #ff614b;
    color: #fff;
    text-align: center;
}

#subscribers__table--body tr {
    cursor: pointer;
    border-bottom: 4px solid #444;
    text-align: center;
}
#subscribers__table--body tr:hover {
    background-color: rgba(255, 97, 75, 0.8);
}

#subscribers__table--body tr td {
    padding: 1rem 0;
}

#close__sub--list {
    background: none;
    text-transform: capitalize;
    outline: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
}
#close__sub--list:hover {
    color: #ff614b;
}

.manageuser__modal,
.managedeposit__modal,
.managewithdrawal__modal,
.managekyc__modal {
    padding: 1rem;
    padding-top: 3rem;
    min-width: 20rem;
    width: 100%;
    background-color: #fff;
    color: #fff;
    position: absolute;
    right: 0;
    top: 1rem;
    z-index: 999;
    border-radius: 5px;
    display: none;
}
.manageuser__modal.active,
.managedeposit__modal.active,
.managewithdrawal__modal.active,
.managekyc__modal.active {
    display: block;
}

.manageuser__actions--list,
.managedeposit__actions--list,
.managewithdrawal__actions--list,
.managekyc__actions--list {
    list-style: none;
}
.manageuser__actions--list-item,
.managedeposit__actions--list-item,
.managewithdrawal__actions--list-item,
.managekyc__actions--list-item {
    text-align: left;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
}

.manageuser__actions--link,
.managedeposit__actions--link,
.managewithdrawal__actions--link,
.managekyc__actions--link {
    display: inline-block;
    color: #000;
    text-decoration: none;
    transition: all 0.3s;
    text-transform: capitalize;
    width: 100%;
    background-color: #d9d9d9;
    padding: 1rem;
    text-align: center;
    border: none;
    outline: none;
}
.manageuser__actions--link.good,
.managedeposit__actions--link.good,
.managewithdrawal__actions--link.good,
.managekyc__actions--link.good {
    color: #03a346;
}
.manageuser__actions--link.delete,
.managedeposit__actions--link.delete,
.managewithdrawal__actions--link.delete,
.managekyc__actions--link.delete {
    color: #ff0000;
}
.manageuser__actions--link:hover,
.manageuser__actions--link:focus,
.managedeposit__actions--link:hover,
.managedeposit__actions--link:focus,
.managewithdrawal__actions--link:hover,
.managewithdrawal__actions--link:focus,
.managekyc__actions--link:hover,
.managekyc__actions--link:focus {
    border: none;
    outline: none;
    background-color: rgba(68, 68, 68, 0.6);
    color: #fff;
}

.loginas,
.approve {
    color: #008000;
}

.block,
.deleteaccount,
.reject {
    color: #ff0000;
}

.close_mgrUser,
.close_mgrDeposit,
.close_mgrWithdrawal,
.close_mgrkyc {
    border-radius: 100%;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #000;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}
.close_mgrUser:focus,
.close_mgrUser:hover,
.close_mgrDeposit:focus,
.close_mgrDeposit:hover,
.close_mgrWithdrawal:focus,
.close_mgrWithdrawal:hover,
.close_mgrkyc:focus,
.close_mgrkyc:hover {
    outline: none;
    border: none;
    color: #ff614b;
}

.adduser__modal {
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10rem;
    z-index: 9999999;
    padding: 2rem;
    font-size: 1.6rem;
    color: #000;
    width: 50rem;
    display: none;
}
.adduser__modal.active {
    display: block;
}
.adduser__modal--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.adduser__modal--header-title {
    font-weight: 500;
    font-size: 1.8rem;
}
.adduser__modal--body {
    margin-top: 3rem;
}

.adduser__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.adduser__form-input {
    padding: 1rem;
}

.paswrd_container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

#newUser_password {
    width: 90%;
    border: none;
    outline: none;
}

#view_password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 9999;
}

#pswrdInputArea {
    position: relative;
}

.generate_paswrd {
    position: absolute;
    right: 5px;
    top: -5px;
    background: none;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    outline: none;
}
.generate_paswrd:hover,
.generate_paswrd:focus,
.generate_paswrd:active {
    outline: none;
    border: none;
    color: #ff614b;
}

.addnew_user {
    border: 2px solid #11e169;
    background: none;
    padding: 1rem 2rem;
    transition: all 0.3s;
    font-size: 1.6rem;
    color: #008000;
    cursor: pointer;
}
.addnew_user:hover,
.addnew_user:focus {
    border: 2px solid transparent;
    outline: none;
    background-color: #11e169;
    color: #008000;
}

.close_adduser {
    background: none;
    outline: none;
    border: none;
    transition: all 0.3s;
}
.close_adduser:focus,
.close_adduser:hover {
    outline: none;
    border: none;
    color: #ff614b;
}

.adduser__form-group input,
.paswrd_container {
    border: 1px solid #000;
    outline: none;
}
.adduser__form-group input:focus,
.adduser__form-group input:active,
.adduser__form-group input:hover,
.paswrd_container:focus,
.paswrd_container:active,
.paswrd_container:hover {
    border: 1px solid #ff614b;
    outline: none;
}

.toggle__sliders {
    width: 100%;
    position: relative;
    display: flex;
    border-bottom: 1px solid #ff614b;
    align-items: center;
}
.toggle__sliders--bg {
    position: absolute;
    left: 0;
    background-color: #ff614b;
    height: 5px;
    border-radius: 10px 10px 0 0;
    bottom: 0;
    transition: all 0.3s;
}
.toggle__sliders--btn {
    padding: 1rem;
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: 500;
    width: 100%;
    outline: none;
    border: none;
    background: none;
    color: #fff;
    transition: all 0.3s;
}
@media (max-width: 22.5em) {
    .toggle__sliders--btn {
        font-size: 1.4rem;
    }
}
.toggle__sliders--btn:focus,
.toggle__sliders--btn:hover,
.toggle__sliders--btn:active {
    outline: none;
    border: none;
    color: #ff614b;
}

@media (max-width: 27.6em) {
    .btn-flex {
        font-size: 1.4rem;
        gap: 0.5rem;
    }
}

.addsupport__modal {
    background: #000;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 1px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10rem;
    z-index: 9999999;
    border-width: 10px;
    border-style: solid;
    padding: 2rem;
    font-size: 1.6rem;
    color: #fff;
    width: 50rem;
    display: none;
}
@media (max-width: 37.5em) {
    .addsupport__modal {
        width: 100%;
    }
}
.addsupport__modal.active {
    display: block;
}
.addsupport__modal--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.addsupport__modal--header-title {
    font-weight: 500;
    font-size: 1.8rem;
}
.addsupport__modal--body {
    margin-top: 3rem;
}

.addsupport__form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.addsupport__form-input {
    padding: 1rem;
    color: #000;
}

#close_ticket {
    color: #fff;
}
#close_ticket:hover {
    color: #ff614b;
}

#ticket_category {
    padding: 1.5rem;
}

#ticket_message {
    resize: none;
    padding: 1rem;
}

.ticketbtn {
    border: 1px solid #fff;
    outline: none;
    background: none;
    font-size: inherit;
    padding: 0.5rem 0.8rem;
    color: #fff;
    transition: all 0.3s;
    cursor: pointer;
}
.ticketbtn:hover,
.ticketbtn:focus,
.ticketbtn:active {
    background-color: #fff;
    color: #000;
}

.addsupport__form-group input,
select,
textarea {
    background-color: #fff;
    font-size: inherit;
    font-family: inherit;
}

.addsupport__form-group input:focus,
select:focus,
textarea:focus {
    border-color: #ff614b;
    outline: none;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    width: 200px;
    position: relative;
}

.custom-select:hover {
    border-color: #888;
}

.custom-select:focus {
    outline: none;
    border-color: #555;
}

.custom-select::after {
    content: "▼";
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: #000;
}

.select-wrapper {
    position: relative;
    display: inline-block;
}

.custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #333;
}

.section__ticket-message {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 1rem auto;
}

.ticket__message {
    height: 90%;
    width: 100%;
}
.ticket__message--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #f5deb3;
    color: #fff;
}
.ticket__message--id,
.ticket__message--subject,
.ticket__message--type,
.ticket__message--priority,
.ticket__message--status,
.ticket__message--date {
    padding: 1rem 2rem;
    text-transform: uppercase;
}
@media (max-width: 27.6em) {
    .ticket__message--id,
    .ticket__message--subject,
    .ticket__message--type,
    .ticket__message--priority,
    .ticket__message--status,
    .ticket__message--date {
        padding: 0.5rem;
    }
}
.ticket__message--id-title,
.ticket__message--subject-title,
.ticket__message--type-title,
.ticket__message--priority-title,
.ticket__message--status-title,
.ticket__message--date-title {
    font-weight: 400;
    font-size: 1.8rem;
    color: #d9d9d9;
    margin-bottom: 0.5rem;
}
@media (max-width: 27.6em) {
    .ticket__message--id-title,
    .ticket__message--subject-title,
    .ticket__message--type-title,
    .ticket__message--priority-title,
    .ticket__message--status-title,
    .ticket__message--date-title {
        display: none;
    }
}
.ticket__message--id-text,
.ticket__message--subject-text,
.ticket__message--type-text,
.ticket__message--priority-text,
.ticket__message--status-text,
.ticket__message--date-text {
    font-size: 1.5rem;
}
@media (max-width: 27.6em) {
    .ticket__message--id {
        display: none;
    }
}
@media (max-width: 37.5em) {
    .ticket__message--type,
    .ticket__message--priority,
    .ticket__message--status {
        display: none;
    }
}
@media (max-width: 45.87em) {
    .ticket__message--status {
        display: none;
    }
}
.ticket__message--priority-text.low-priority {
    color: #03a346;
}
.ticket__message--priority-text.medium-priority {
    color: #ce45c0;
}
.ticket__message--priority-text.high-priority {
    color: #ff614b;
}
.ticket__message--priority-text.critical-priority {
    color: #ff0000;
}
.ticket__message--priority-text.urgent-priority {
    color: #593eff;
}
.ticket__message--status-text.resolved {
    color: #444;
}
.ticket__message--status-text.new {
    color: #593eff;
}
.ticket__message--status-text.ongoing {
    color: #ff614b;
}
.ticket__message--body {
    padding: 3rem;
    height: 77%;
    overflow-y: auto;
}
@media (max-width: 27.6em) {
    .ticket__message--body {
        padding: 1rem;
    }
}
.ticket__message--body * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.ticket__message--body *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.ticket__message--body *::-webkit-scrollbar-track {
    background: none;
}
.ticket__message--body *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.ticket__message--body.low-priority {
    border-color: #03a346;
}
.ticket__message--body.medium-priority {
    border-color: #ce45c0;
}
.ticket__message--body.high-priority {
    border-color: #ff614b;
}
.ticket__message--body.critical-priority {
    border-color: #ff0000;
}
.ticket__message--body.urgent-priority {
    border-color: #593eff;
}
.ticket__message--body-message {
    margin-bottom: 3rem;
    max-width: 50rem;
}
@media (max-width: 27.6em) {
    .ticket__message--body-message {
        max-width: 30rem;
    }
}
.ticket__message--body-message.support-message {
    margin-right: auto;
}
.ticket__message--body-message.support-message.admin {
    margin-right: 0;
    margin-left: auto;
}
.ticket__message--body-message.customer-message {
    margin-left: auto;
}
.ticket__message--body-message.customer-message.admin {
    margin-left: 0;
    margin-right: auto;
}
.ticket__message--footer {
    border-top: 1px solid #f5deb3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.ticket__chat--header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ticket__chat--header-img {
    height: 4rem;
    width: 4rem;
    border-radius: 100%;
}
.ticket__chat--header-datetime {
    font-size: 1.5rem;
}

.ticket__chat--body {
    padding: 1rem;
    background-color: #ff614b;
    color: #fff;
    border-radius: 0px 5px;
    font-size: 1.5rem;
}
.ticket__chat--body.customer-message {
    background-color: #593eff;
}
.ticket__chat--body-img {
    width: 20rem;
    height: 25rem;
    border: 3px solid #444;
}

.ticket__chat-img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.chat-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/4;
}

.mark__ticket--resolved {
    color: #f5deb3;
    text-underline-offset: 4px;
    transition: all 0.3s;
}
.mark__ticket--resolved:hover {
    color: #ff614b;
}

.reply__ticket {
    max-width: 50rem;
    margin-left: auto;
    max-height: 30rem;
    display: none;
}
.reply__ticket.admin {
    margin-left: 0;
    margin-right: auto;
}
.reply__ticket.active {
    display: block;
}

#send_reply-input {
    height: 20rem;
    width: 100%;
    padding: 2rem;
    resize: none;
    background: none;
    border-radius: 0 10px 0 10px;
    outline: none;
    border: 1px solid #fff;
    color: #fff;
    font-size: inherit;
    font-family: inherit;
}

.cancel__ticket--reply {
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: none;
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 1rem;
    transition: all 0.3s;
}
.cancel__ticket--reply:focus,
.cancel__ticket--reply:hover,
.cancel__ticket--reply:active {
    color: #ff614b;
    border: none;
    background: none;
    outline: none;
}

.send__ticket-reply {
    cursor: pointer;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 0.5rem 1rem;
    font-size: inherit;
    background: none;
    color: #fff;
    transition: all 0.3s;
    display: none;
}
.send__ticket-reply.active {
    display: flex;
}
.send__ticket-reply:hover,
.send__ticket-reply:focus,
.send__ticket-reply:active {
    border: 1px solid transparent;
    background-color: #ff614b;
}

.send__ticket--reply {
    display: flex;
    margin-left: auto;
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    background-color: #ff614b;
    color: #fff;
    border-radius: 3px;
    font-size: inherit;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}
.send__ticket--reply:focus,
.send__ticket--reply:hover,
.send__ticket--reply:active {
    border: none;
    outline: none;
    color: #f5deb3;
}

.back-btn {
    color: #f5deb3;
    text-underline-offset: 4px;
    display: inline-block;
    margin-left: auto;
    margin-top: 1rem;
    margin-right: 3rem;
    transition: all 0.3s;
    font-size: 1.8rem;
}
.back-btn:focus,
.back-btn:hover,
.back-btn:active {
    color: #ff614b;
}

.mark__ticket--resolved,
.send__ticket-reply {
    font-size: 1.8rem;
}

.select_cont {
    position: relative;
    display: inline-block;
    min-width: 18rem;
    width: 100%;
    max-width: 40rem;
}

.select_cont select {
    display: inline-block;
    cursor: pointer;
    outline: 0;
    border: 1px solid #898484;
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.3s;
}

.select_cont select::-ms-expand {
    display: none;
}

.select_cont select:hover,
.select_cont select:focus {
    color: #ff614b;
    border-color: #ff614b;
}

.select_cont select:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.select_arrow {
    position: absolute;
    right: 1.5rem;
    top: 28%;
    width: 1.2rem;
    height: 1.2rem;
    border: solid #898484;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.select_cont select:hover ~ .select_arrow,
.select_cont select:focus ~ .select_arrow {
    border-color: #ff614b;
}

.select_cont select:disabled ~ .select_arrow {
    border-top-color: #cccccc;
}

.closeaccount__modal {
    position: absolute;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    background: rgba(255, 0, 0, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: none;
}
.closeaccount__modal.active {
    display: flex;
}
.closeaccount__modal--container {
    width: 35%;
    background-color: #fff;
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
}
@media (max-width: 37.5em) {
    .closeaccount__modal--container {
        width: 90%;
    }
}
.closeaccount__modal--container-content {
    margin-top: 10rem;
}

.delete__account-caution {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    width: 8rem;
    margin: auto;
    margin-top: 4rem;
}

.deletecaution-img {
    height: 100%;
    width: 100%;
}

.caution-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 0, 0, 0.6);
    font-size: 3rem;
}

.delete-warning {
    padding: 0.6rem 1.2rem;
    background-color: rgba(255, 0, 0, 0.2);
    text-align: center;
    max-width: 20rem;
    border-radius: 100px;
    margin: 0 auto;
    color: rgba(255, 0, 0, 0.4);
    font-weight: 300;
}

.delete__account--message {
    margin: auto;
    margin-top: 2rem;
    text-align: center;
    color: #000;
    max-width: 30rem;
    font-weight: 300;
}
.delete__account--message-title {
    font-size: 2.5rem;
    text-transform: capitalize;
    font-weight: 400;
}

.delete__account--btns {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 5rem;
    margin-bottom: 2.5rem;
}

.delete__account--btns button {
    outline: none;
    border: none;
    width: 80%;
    padding: 1.2rem 1.5rem;
    border-radius: 5px;
    margin-top: 2rem;
    cursor: pointer;
    transition: all 0.3s;
}
.delete__account--btns button:active,
.delete__account--btns button:hover,
.delete__account--btns button:focus {
    border: none;
    outline: none;
}

.delete__account--btns-btn {
    background-color: #ff0000;
    color: #fff;
}
.delete__account--btns-btn:active,
.delete__account--btns-btn:hover,
.delete__account--btns-btn:focus {
    background-color: rgba(255, 0, 0, 0.4);
    color: rgba(255, 0, 0, 0.8);
}

.cancel__delete--btns-btn:active,
.cancel__delete--btns-btn:hover,
.cancel__delete--btns-btn:focus {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
}

.closeaccount__modal--container {
    position: relative;
}
.closeaccount__modal--container::before {
    content: "";
    filter: blur(2px);
    position: absolute;
    height: 70rem;
    width: 70rem;
    border-radius: 100%;
    background: linear-gradient(rgba(255, 0, 0, 0.4), #fff);
    left: 50%;
    top: -90%;
    transform: translateX(-50%);
}

.custom__select {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
}

.custom__select select {
    font-family: "Arial";
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 10px 15px;
    outline: 0;
    border: 0px solid #000000;
    border-radius: 0px;
    background: #e6e6e6;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom__select select::-ms-expand {
    display: none;
}

.custom__select select:hover,
.custom__select select:focus {
    color: inherit;
    background: #cccccc;
}

.custom__select select:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.custom__select-arrow {
    position: absolute;
    top: 16px;
    right: 15px;
    pointer-events: none;
    border-style: solid;
    border-width: 8px 5px 0px 5px;
    border-color: #7b7b7b transparent transparent transparent;
}

.custom__select select:hover ~ .custom__select-arrow,
.custom__select select:focus ~ .custom__select-arrow {
    border-top-color: inherit;
}

.custom__select select:disabled ~ .custom__select-arrow {
    border-top-color: #cccccc;
}

.update__bio--modal {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    position: absolute;
    z-index: 999999;
    display: none;
}
.update__bio--modal.active {
    display: block;
}
.update__bio--modal-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #000;
    padding: 2rem;
    width: 50%;
    border: 1px solid rgba(217, 217, 217, 0.15);
    height: 53%;
    overflow-y: auto;
}
@media (max-width: 37.5em) {
    .update__bio--modal-content {
        width: 90%;
        height: 70%;
    }
}

.pos-rel {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.close-userupadete {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 100%;
    outline: none;
    border: none;
    background-color: #f5deb3;
    padding: 0.5rem;
    transition: all 0.3s;
}
.close-userupadete:active,
.close-userupadete:hover,
.close-userupadete:focus {
    background: none;
    color: #ff614b;
}

#bio_update-form {
    margin-top: 4rem;
}

.status-groups,
.gio-groups,
.locale-groups {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
}
@media (max-width: 31.2em) {
    .status-groups,
    .gio-groups,
    .locale-groups {
        flex-wrap: wrap;
    }
}

.bio-form-group,
.locale-form-group,
.gio-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

#a-status,
#e-status,
#kyc-status,
#gio-country {
    background: none;
    border: 1px solid #898484;
}
#a-status:hover,
#a-status:active,
#a-status:focus,
#e-status:hover,
#e-status:active,
#e-status:focus,
#kyc-status:hover,
#kyc-status:active,
#kyc-status:focus,
#gio-country:hover,
#gio-country:active,
#gio-country:focus {
    border-color: #ff614b;
}

#locale-groups div input,
#gio-groups div input {
    background: none;
    padding: 1.3rem 1rem;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    outline: none;
    border: 1px solid #898484;
}
#locale-groups div input:hover,
#locale-groups div input:active,
#locale-groups div input:focus,
#gio-groups div input:hover,
#gio-groups div input:active,
#gio-groups div input:focus {
    border-color: #ff614b;
}

#locale-groups {
    margin-top: 2rem;
}

#update-bio-btn {
    margin: 2.5rem 0;
    padding: 1rem 1.2rem;
    background: #ff614b;
    color: #fff;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
#update-bio-btn:hover,
#update-bio-btn:focus,
#update-bio-btn:active {
    transform: translateX(4px);
}

.pagination {
    position: absolute;
    bottom: 2rem;
    padding: 2rem;
    width: 100%;
    background-color: #444;
}
.pagination__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
.pagination__links--prev {
    display: none;
}
.pagination__links--prev.active {
    display: flex;
}
.pagination__links--prev,
.pagination__links--last {
    text-decoration: none;
    font-weight: 500;
    background-color: #fff;
    color: #000;
    padding: 0.5rem 1.2rem;
    border-radius: 5px;
    transition: all 0.2s;
}
.pagination__links--prev:hover,
.pagination__links--last:hover {
    background-color: #000;
    color: #fff;
}
.pagination__links--links {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pagination__links--links-link {
    text-decoration: none;
    min-width: 5rem;
    text-align: center;
    background-color: #fff;
    color: #000;
    padding: 0.5rem 1.2rem;
    transition: all 0.2s;
}
.pagination__links--links-link:hover {
    background-color: #000;
    color: #fff;
}
.pagination__links--links-link:first-child {
    border-radius: 5px 0 0 5px;
}
.pagination__links--links-link:last-child {
    border-radius: 0 5px 5px 0;
}
.pagination__links--links-link.active {
    background-color: #ff614b;
    color: #fff;
}

.confirmation__modal {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    height: 100vh;
    width: 100%;
    z-index: 99999999;
    display: none;
}
.confirmation__modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}
.confirmation__modal--main {
    max-width: 40rem;
    max-height: 30rem;
    background-color: #fff;
    margin: auto;
    color: #000;
}
.confirmation__modal--main-content {
    padding: 2rem;
}
.confirmation__modal--main-title {
    font-weight: 600;
    font-size: 2.4rem;
    margin-bottom: 2rem;
}
.confirmation__modal--main-text {
    font-size: 2rem;
}
.confirmation__modal--main-footer {
    width: 100%;
    padding: 2rem;
    background-color: #e5e5f0;
}
.confirmation__modal--main-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.confirmation__modal--main-btn {
    padding: 0.8rem 1.6rem;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}
.confirmation__modal--main-btn.cancel-confimation {
    border: 0.5px solid #898484;
    background: none;
    color: #898484;
    margin-right: 2rem;
}
.confirmation__modal--main-btn.cancel-confimation:hover {
    color: #000;
    border-color: #000;
}
.confirmation__modal--main-btn.delete-confimation {
    background-color: rgba(255, 0, 0, 0.4);
    color: #800000;
    border: none;
}
.confirmation__modal--main-btn.delete-confimation:hover {
    background-color: #ff0000;
    color: #fff;
}

.creditdebit__modal {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10rem;
    z-index: 9999999;
    padding: 3rem;
    padding-top: 8rem;
    width: 100%;
    min-height: 40rem;
    overflow-y: auto;
    max-height: 70vh;
    max-width: 50rem;
    background-color: #2a2222;
    color: #fff;
    border: 1px solid #898484;
    display: none;
}
.creditdebit__modal.active {
    display: block;
}
.creditdebit__modal--header {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 3rem;
    text-transform: capitalize;
}

.close_modal--btn {
    position: absolute;
    right: 2rem;
    top: 2rem;
    height: 4.5rem;
    width: 4.5rem;
    overflow: hidden;
}
.close_modal--btn-btn {
    height: 100%;
    width: 100%;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    transition: all 0.3s;
}
.close_modal--btn-btn:focus,
.close_modal--btn-btn:hover {
    background-color: #ff614b;
    color: #fff;
    border: none;
    outline: none;
}

.modalinput__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.modalinput__group label {
    font-weight: 500;
}

.required {
    color: #ff614b;
}

.modalinput__group input {
    padding: 1rem;
    font-size: inherit;
    color: inherit;
    border: 1px solid #fff;
    outline: none;
    transition: all 0.2s;
    background: none;
}
.modalinput__group input:focus,
.modalinput__group input:hover {
    outline: none;
    border-color: #ff614b;
}

.modalinput__group textarea {
    padding: 2rem;
    border: 1px solid #fff;
    outline: none;
    transition: all 0.2s;
    background: none;
    color: inherit;
    font-size: inherit;
}
.modalinput__group textarea:focus,
.modalinput__group textarea:hover {
    outline: none;
    border-color: #ff614b;
}

.custom_select-input {
    background: none !important;
    border: 1px solid #fff !important;
}
.custom_select-input:hover,
.custom_select-input:focus {
    border-color: #ff614b !important;
    color: #ff614b !important;
}

.amount_currency {
    display: inline-block;
}

.modal-amount_input {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #fff;
    padding: 0 2rem;
}
.modal-amount_input:focus,
.modal-amount_input:hover {
    border-color: #ff614b;
}
.modal-amount_input > input {
    background: none;
    outline: none;
    border: none;
    width: 100%;
    font-size: 2rem;
    color: inherit;
    padding: 1rem;
}

.creditdebit__modal--btns {
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.creditdebit__modal--btn {
    cursor: pointer;
    border: 1px solid transparent;
    outline: none;
    text-decoration: none;
    padding: 1rem 1.2rem;
    max-width: 14rem;
    min-width: 10rem;
    width: 100%;
    transition: all 0.3s;
}
.creditdebit__modal--btn.dbcr_cancel-btn {
    background: none;
    border-color: #fff;
    color: #fff;
}
.creditdebit__modal--btn.dbcr_cancel-btn:focus,
.creditdebit__modal--btn.dbcr_cancel-btn:hover {
    outline: none;
    border-color: #ff614b;
    color: #ff614b;
}
.creditdebit__modal--btn.dbcr_save-btn {
    border-color: rgba(17, 225, 105, 0.2);
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
}
.creditdebit__modal--btn.dbcr_save-btn:focus,
.creditdebit__modal--btn.dbcr_save-btn:hover {
    outline: none;
    border-color: #11e169;
    background-color: #11e169;
    color: #000;
}

.creditdebit__modal--userbalance,
.trade__equity {
    padding: 1rem;
    background-color: #ff614b;
    margin-bottom: 3rem;
}
.creditdebit__modal--userbalance-value,
.trade__equity-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.creditdebit__modal--userbalance--value,
.trade__equity--value {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.creditdebit__modal--userbalance--value-amount,
.trade__equity--value-amount {
    font-size: 4rem;
    font-weight: 500;
}
.creditdebit__modal--userbalance-amount,
.trade__equity-amount {
    font-size: 4rem;
    font-weight: 500;
}

.sum__area,
.current__return {
    background-color: #ff614b;
    color: #fff;
    padding: 1rem;
}
.sum__area--heading,
.current__return--heading {
    margin-bottom: 2rem;
    text-transform: capitalize;
    font-weight: 500;
}
.sum__area--body,
.current__return--body {
    text-align: center;
}
.sum__area--body-value,
.current__return--body-value {
    font-size: 4rem;
    font-weight: 500;
}

.current__return {
    margin-bottom: 2rem;
    border: 1px solid #898484;
    background: none;
}

.current__return--body-value {
    font-size: 3rem;
}

.withdrawal__methods-toggler {
    margin-bottom: 2rem;
}

.no_margin_bottom {
    margin-bottom: 0;
}

.withdrawal__methods--containers-item {
    display: none;
}
.withdrawal__methods--containers-item.active {
    display: block;
}

.modalinput__image {
    margin: auto;
    margin-bottom: 4rem;
}
.modalinput__image--img {
    border-radius: 50%;
    padding: 3px;
    border: 1px solid #f5deb3;
    height: 6rem;
    width: 6rem;
    margin: auto;
    margin-bottom: 2rem;
}
.modalinput__image--img-img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.investment__confirmationModal {
    height: 100vh;
    width: 100%;
    background-color: #000;
    position: absolute;
    justify-items: center;
    align-items: center;
    display: none;
    z-index: 9999999;
}
.investment__confirmationModal.active {
    display: grid;
}
.investment__confirmationModal--content {
    width: 100%;
    min-width: 35rem;
    max-width: 60rem;
    overflow-y: auto;
    background-color: #2a2222;
    padding: 3rem;
}
.investment__confirmationModal--content-title {
    font-size: 2.4rem;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 5rem;
}
.investment__confirmationModal--items-item {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ff614b;
    margin-bottom: 2rem;
    color: #fff;
}
.investment__confirmationModal--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5rem;
}
.investment__confirmationModal--btn {
    padding: 1rem 2rem;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    transition: all 0.3s;
}
.investment__confirmationModal--btn.cancel_sub {
    border: 1px solid #fff;
    background: none;
    color: #fff;
}
.investment__confirmationModal--btn.cancel_sub:focus,
.investment__confirmationModal--btn.cancel_sub:hover {
    outline: none;
    border-color: transparent;
    background-color: #fff;
    color: #000;
}
.investment__confirmationModal--btn.start_sub {
    border: 1px solid rgba(17, 225, 105, 0.5);
    background-color: rgba(17, 225, 105, 0.5);
    color: #11e169;
}
.investment__confirmationModal--btn.start_sub:focus,
.investment__confirmationModal--btn.start_sub:hover {
    outline: none;
    border: 1px solid #11e169;
    background-color: #11e169;
    color: #000;
}

.toggleButton {
    position: relative;
    display: block;
    width: 6.3rem;
    height: 3rem;
    background-color: #ff614b;
    cursor: pointer;
}

.toggleButton:has(:focus-visible) {
    outline: auto;
    outline: auto -webkit-focus-ring-color;
}

.toggleButton:has(:checked) {
    background-color: #11e169;
}

.toggleButton__checkbox {
    appearance: none;
    position: absolute;
    top: 50%;
    left: 2px;
    width: 3rem;
    height: 2.4rem;
    transform: translateY(-50%);
    outline: none;
    background-color: #ffffff;
    transition: left 0.2s;
    cursor: pointer;
}

.toggleButton__checkbox:checked {
    left: calc(100% - 55%);
}

.form-search,
.form-sort {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 30rem;
    max-width: 40rem;
    width: 100%;
}

.search_input,
.select__input {
    padding-left: 2rem;
    background: none;
    border: 1px solid #f5deb3;
    border-radius: 100px 0 0 100px;
    width: 100%;
    transition: all 0.3s;
}
.search_input:hover,
.select__input:hover {
    border-color: #ff614b;
}

#search__input,
#sort_items {
    border: none;
    outline: none;
    color: inherit;
    font-size: inherit;
    padding: 0.5rem;
    background: none;
    width: 100%;
}

.search__submit-btn,
.sort__submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    height: 3.5rem;
    padding-left: 0.5rem;
    padding-right: 1rem;
    border-radius: 0 100px 100px 0;
    outline: none;
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
}
@media (max-width: 87.5em) {
    .search__submit-btn,
    .sort__submit-btn {
        height: 3rem;
    }
}
@media (max-width: 35.68em) {
    .search__submit-btn,
    .sort__submit-btn {
        height: 3.8rem;
    }
}
.search__submit-btn:hover,
.search__submit-btn:focus,
.sort__submit-btn:hover,
.sort__submit-btn:focus {
    outline: none;
    border: 1px solid #f5deb3;
    background-color: #f5deb3;
    color: #000;
}

.search-filer-forms {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    justify-content: space-between;
}
@media (max-width: 35.68em) {
    .search-filer-forms {
        flex-direction: column;
    }
}

.select__input {
    padding-right: 3rem;
    position: relative;
}

#sort_items {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.select__input-arrow {
    position: absolute;
    border-style: solid;
    right: 1rem;
    top: 52%;
    border-radius: 10px;
    transform: translateY(-50%);
    border-width: 8px 5px 0px 5px;
    border-color: #f5deb3 transparent transparent transparent;
}

.sort_btn-icon,
.search_btn-icon {
    font-size: 2.5rem;
}

.clear_search {
    font-size: inherit;
    color: inherit;
    background: none;
    border: 1px solid #f5deb3;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    text-decoration: none;
    margin-left: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}
.clear_search:hover,
.clear_search:focus {
    outline: none;
    border: 1px solid #f5deb3;
    background-color: #f5deb3;
    color: #000;
}

.header {
    width: calc(100% - 27rem);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100000;
    transition: all 0.1s;
    background-color: rgba(68, 68, 68, 0.6);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 87.5em) {
    .header {
        padding: 1rem;
    }
}
@media (min-width: 107.37em) {
    .header {
        position: absolute;
    }
}

.main {
    height: 102vh;
    width: calc(100% - 27rem);
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 7.5rem 0 2rem 0;
    transition: all 0.1s;
}
@media (max-width: 64.56em) {
    .main {
        width: 100%;
    }
}
@media (max-width: 87.5em) {
    .main {
        padding-top: 6rem;
    }
}
@media (max-width: 64.56em) {
    .main {
        padding: 6rem 2rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.main__content {
    width: 100%;
    height: 100%;
    border: 10px;
    overflow: hidden;
    box-shadow: -1rem 1rem 2rem rgba(0, 0, 0, 0.2),
        1rem -1rem 2rem rgba(0, 0, 0, 0.2);
    padding-right: 1rem;
    padding-bottom: 5rem;
}
.main__heading {
    padding: 1rem 2rem;
    padding-right: 0;
}

.navigation {
    height: 100vh;
    width: 27rem;
    position: fixed;
    left: 0;
    overflow-x: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 2rem;
    transition: all 0.1s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media (max-width: 64.56em) {
    .navigation {
        height: 92vh;
    }
}
@media (min-width: 107.37em) {
    .navigation {
        left: unset;
    }
}
@media (max-width: 64.56em) {
    .navigation {
        position: absolute;
        left: -30rem;
        z-index: 500000;
        background-color: #000;
        overflow-y: auto;
    }
    .navigation * {
        scrollbar-width: 2px;
        scrollbar-color: #11e169;
    }
    .navigation *::-webkit-scrollbar {
        scrollbar-width: thin;
        width: 2px;
        height: 2px;
    }
    .navigation *::-webkit-scrollbar-track {
        background: none;
    }
    .navigation *::-webkit-scrollbar-thumb {
        background-color: #11e169;
        border-radius: 10px;
    }
}
.navigation__logo {
    height: 5rem;
    margin-bottom: 2rem;
    border: 1px solid transparent;
}
.navigation__logo--icon {
    width: 100%;
}
.navigation__logo--icon-icon {
    width: 100%;
}
.navigation__logo--img {
    width: 100%;
}
.navigation__logo--img-img {
    width: 100%;
}
.navigation__body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow-y: auto;
}
.navigation__body * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.navigation__body *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.navigation__body *::-webkit-scrollbar-track {
    background: none;
}
.navigation__body *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.navigation__body--main,
.navigation__body--sub {
    width: 100%;
}
.navigation__body--sub {
    margin-top: 5rem;
}
.navigation__list {
    list-style: none;
    width: 100%;
}
.navigation__item {
    position: relative;
    width: 100%;
    padding: 0.5rem;
    transition: all 0.3s;
}
.navigation__item:not(:last-child) {
    margin-bottom: 0.5rem;
}
.navigation__item:hover {
    box-shadow: -1rem 1rem 4rem rgba(0, 0, 0, 0.1);
}
.navigation__item:hover::after {
    width: 100%;
}
.navigation__item::after {
    content: "";
    width: 0%;
    height: 1px;
    background-color: rgba(245, 222, 179, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.3s;
}
.navigation__item.active::after {
    width: 100%;
    background-color: #ff614b;
}
.navigation__link {
    text-decoration: none;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1rem;
    outline: none;
    border: 1px solid transparent;
}
.navigation__link:link,
.navigation__link:visited {
    color: #f5deb3;
}
.navigation__link:hover,
.navigation__link:active {
    transition: all 0.3s;
}
.navigation__link--icon {
    display: inline-block;
}
.navigation__link--icon-img {
    height: 3rem;
    width: 3rem;
    color: #f5deb3;
    fill: #f5deb3;
}
.navigation__item:hover .navigation__icon-img {
    color: rgba(245, 222, 179, 0.8);
    fill: rgba(245, 222, 179, 0.8);
}
.navigation__item:hover .navigation__link {
    color: rgba(245, 222, 179, 0.8);
}

.navigation__item.active .navigation__link > .navigation__link--name {
    color: #ff614b;
}

.navigation__item.active
    .navigation__link
    > .navigation__link--icon
    > .navigation__link--icon-img {
    fill: #ff614b;
    color: #ff614b;
}

.navigation__item.focus .navigation__link > .navigation__link--name {
    color: #ff614b;
}

.navigation__item.focus
    .navigation__link
    > .navigation__link--icon
    > .navigation__link--icon-img {
    fill: #ff614b;
    color: #ff614b;
}

.navigation__logo.focus {
    border: 1px solid #ff614b;
    outline: none;
}

@media (max-width: 51.18em) {
    #logo-icon,
    #logo-img {
        width: 90%;
    }
}

@media (max-width: 75.37em) {
    #logo-icon,
    #logo-img {
        width: 90%;
    }
}

#navlinkIcon {
    filter: hue-rotate(10deg);
}

.section__dashboard {
    height: 100%;
    overflow-y: auto;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
}
.section__dashboard * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__dashboard *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__dashboard *::-webkit-scrollbar-track {
    background: none;
}
.section__dashboard *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.section__dashboard--accounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3rem;
}
@media (max-width: 64.56em) {
    .section__dashboard--accounts {
        gap: 2rem;
    }
}
@media (max-width: 87.5em) {
    .section__dashboard--accounts {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
    }
}
.section__dashboard--accounts div:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/2;
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts div:nth-child(1) {
        grid-column: 1/-1;
        grid-row: 1/2;
    }
}
.section__dashboard--accounts div:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts div:nth-child(2) {
        grid-column: 1/-1;
        grid-row: 2/3;
    }
}
.section__dashboard--accounts div:nth-child(3) {
    grid-column: 3/4;
    grid-row: 1/2;
}
@media (max-width: 87.5em) {
    .section__dashboard--accounts div:nth-child(3) {
        grid-column: 1/2;
        grid-row: 2/3;
    }
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts div:nth-child(3) {
        grid-column: 1/-1;
        grid-row: 3/4;
    }
}
.section__dashboard--accounts div:nth-child(4) {
    grid-column: span 2;
    grid-row: 2/3;
}
@media (max-width: 87.5em) {
    .section__dashboard--accounts div:nth-child(4) {
        grid-column: span 2;
        grid-row: 3/4;
    }
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts div:nth-child(4) {
        grid-column: 1/-1;
        grid-row: 4/5;
    }
}
.section__dashboard--accounts div:nth-child(5) {
    grid-column: 3/4;
    grid-row: 2/3;
}
@media (max-width: 87.5em) {
    .section__dashboard--accounts div:nth-child(5) {
        grid-column: 2/3;
        grid-row: 2/3;
    }
}
@media (max-width: 35.68em) {
    .section__dashboard--accounts div:nth-child(5) {
        grid-column: 1/-1;
        grid-row: 5/6;
    }
}
.section__dashboard--profit {
    padding: 2rem;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.15);
}
.section__dashboard--profit:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.section__dashboard--profit-header {
    display: flex;
    justify-content: space-between;
}
.section__dashboard--profit-amount {
    font-size: 2rem;
    align-self: flex-end;
}
.section__dashboard--profit-content {
    margin: 2rem auto;
    position: relative;
    padding-bottom: 5rem;
}
@media (max-width: 51.18em) {
    .section__dashboard--profit-content {
        padding-bottom: 16rem;
    }
}
@media (max-width: 31.2em) {
    .section__dashboard--profit-content {
        padding-bottom: 12rem;
    }
}
.section__dashboard--profit-splitter {
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    width: 90%;
    z-index: 20;
}
@media (max-width: 35.68em) {
    .section__dashboard--profit-splitter {
        width: 96%;
    }
}
.section__dashboard--profit-tradetype {
    padding: 2rem;
    width: 95%;
    left: 0;
    right: 0;
    top: 1rem;
    margin: auto;
    border-radius: 10px;
    background-image: linear-gradient(
        to bottom,
        rgba(68, 68, 68, 0.8),
        rgba(0, 0, 0, 0.9)
    );
    background-blend-mode: screen;
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
@media (max-width: 35.68em) {
    .section__dashboard--profit-tradetype {
        padding: 1rem;
        width: 100%;
    }
}
@media (max-width: 51.18em) {
    .section__dashboard--profit-tradetype {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        justify-items: center;
    }
}
.section__dashboard--heading {
    font-size: 2rem;
    text-transform: capitalize;
}
.section__dashboard--heading span {
    display: block;
    font-size: 1.4rem;
    margin-top: 1rem;
}
.section__dashboard--graphtable {
    margin-bottom: 6rem;
    display: flex;
    align-items: stretch;
    gap: 2rem;
    padding-bottom: 3rem;
}
@media (max-width: 87.5em) {
    .section__dashboard--graphtable {
        flex-direction: column-reverse;
    }
}

.profit__splitter {
    width: 100%;
    height: 2rem;
    filter: blur(1px);
    z-index: 1;
}
@media (max-width: 51.18em) {
    .profit__splitter {
        height: 1rem;
        filter: blur(1px);
    }
}

.profit__splitter:nth-child(1) {
    background-color: #ff614b;
}

.profit__splitter:nth-child(2) {
    background-color: #593eff;
}

.profit__splitter:nth-child(3) {
    background-color: #11e169;
}

.profit__splitter:nth-child(4) {
    background-color: #1dcaff;
}

.tradetype__sum {
    align-self: flex-start;
}
.tradetype__sum-title {
    font-size: 2rem;
    text-transform: capitalize;
    font-weight: 300;
    color: #f5deb3;
}
@media (max-width: 31.2em) {
    .tradetype__sum-title {
        font-size: 1.5rem;
    }
}
.tradetype__sum-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tradetype__sum-color {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100px;
    filter: blur(1px);
}
.tradetype__sum-amount {
    font-size: 1.5rem;
    margin-left: 2.5rem;
    margin-top: 0.5rem;
}
@media (max-width: 51.18em) {
    .tradetype__sum {
        padding: 1rem 3rem;
    }
}
@media (max-width: 35.68em) {
    .tradetype__sum {
        padding: 1rem;
    }
}

.personal {
    background-color: #ff614b;
}

.manager {
    background-color: #593eff;
}

.copytrader {
    background-color: #11e169;
}

.bottrader {
    background-color: #1dcaff;
}

.account__chart,
.table {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    padding: 2rem;
}
.account__chart:hover,
.table:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.account__chart *,
.table * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.account__chart *::-webkit-scrollbar,
.table *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.account__chart *::-webkit-scrollbar-track,
.table *::-webkit-scrollbar-track {
    background: none;
}
.account__chart *::-webkit-scrollbar-thumb,
.table *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.account__chart {
    position: relative;
}
.account__chart-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
    padding: 2rem;
}
@media (max-width: 33.5em) {
    .account__chart-content {
        padding: 1rem 0;
    }
}
.account__chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section__copytrader {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    height: 100svh;
    gap: 2rem;
    overflow-y: auto;
}
.section__copytrader * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__copytrader *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__copytrader *::-webkit-scrollbar-track {
    background: none;
}
.section__copytrader *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 22.5em) {
    .section__copytrader {
        padding-left: 0;
        padding-right: 0;
    }
}
.section__copytrader--container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}
.section__copytrader--header {
    position: sticky;
    top: 0;
    background-color: #444;
    padding: 2rem;
    z-index: 9999;
}

.transaction__table {
    height: 80rem;
    overflow: auto;
    padding-bottom: 15rem;
}
.transaction__table * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.transaction__table *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.transaction__table *::-webkit-scrollbar-track {
    background: none;
}
.transaction__table *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .transaction__table {
        padding-bottom: 30rem;
    }
}
.transaction__table--table {
    min-width: 100rem;
}
.transaction__table--table-theadrow,
.transaction__table--table-tbodyrow {
    text-align: center;
}
.transaction__table--table-title {
    text-transform: uppercase !important;
}
.transaction__table--table-tbodydata {
    text-transform: uppercase;
}
.transaction__table--table-tbodydata,
.transaction__table--table-title {
    padding-left: 2rem;
}

.transaction__table--table-title {
    text-transform: uppercase;
}

.ttype {
    text-transform: capitalize;
}

.transaction__table--table-theadrow {
    background: #f5deb3;
    color: #000;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
}

.transaction__table--table-tbodyrow {
    text-align: center;
    font-size: 1.6rem;
}
.transaction__table--table-tbodyrow:hover {
    background-color: rgba(255, 97, 75, 0.1);
}

#transaction__table--table-body tr {
    text-align: center;
}

.status {
    padding: 3px 0.8rem;
    border-radius: 100px;
    font-size: 1.4rem;
    text-transform: capitalize;
}
.status-success {
    color: #11e169;
    background-color: rgba(17, 225, 105, 0.2);
}
.status-failed {
    color: #ff614b;
    background-color: rgba(255, 97, 75, 0.2);
}
.status-pending {
    color: #f5deb3;
    background-color: rgba(245, 222, 179, 0.4);
}

.ids {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 1rem;
}

.section__investment {
    overflow-y: auto;
    scroll-behavior: smooth;
    height: 100%;
}
.section__investment * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__investment *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__investment *::-webkit-scrollbar-track {
    background: none;
}
.section__investment *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.section__investment--header {
    position: sticky;
    top: 3.5rem;
    background-color: #444;
    color: #fff;
    z-index: 1000;
}
.section__investment--header-paragraph {
    display: none;
}
.section__investment--header-paragraph.active {
    display: block;
}

.profile__settings,
.security__settings,
.notification__settings {
    padding: 2rem;
}

.profile__form,
.security__form,
.notification__form {
    padding: 3rem;
    text-align: left;
    margin: auto;
}
@media (max-width: 31.2em) {
    .profile__form,
    .security__form,
    .notification__form {
        padding: 0;
    }
}
.profile__form--bio,
.profile__form--locale,
.profile__form--password,
.profile__form--2fa,
.profile__form--notification,
.security__form--bio,
.security__form--locale,
.security__form--password,
.security__form--2fa,
.security__form--notification,
.notification__form--bio,
.notification__form--locale,
.notification__form--password,
.notification__form--2fa,
.notification__form--notification {
    border-radius: 10px;
    margin: auto;
    max-width: 60rem;
    border: 1px solid #f5deb3;
    padding: 3rem;
    margin-bottom: 3rem;
}
@media (max-width: 37.5em) {
    .profile__form--bio,
    .profile__form--locale,
    .profile__form--password,
    .profile__form--2fa,
    .profile__form--notification,
    .security__form--bio,
    .security__form--locale,
    .security__form--password,
    .security__form--2fa,
    .security__form--notification,
    .notification__form--bio,
    .notification__form--locale,
    .notification__form--password,
    .notification__form--2fa,
    .notification__form--notification {
        padding: 1rem;
        border: none;
    }
}
.profile__form--bio-title,
.profile__form--locale-title,
.profile__form--password-title,
.profile__form--2fa-title,
.profile__form--notification-title,
.security__form--bio-title,
.security__form--locale-title,
.security__form--password-title,
.security__form--2fa-title,
.security__form--notification-title,
.notification__form--bio-title,
.notification__form--locale-title,
.notification__form--password-title,
.notification__form--2fa-title,
.notification__form--notification-title {
    font-weight: 400;
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 1px solid #f5deb3;
    text-transform: capitalize;
}
.profile__form--bio-text,
.profile__form--locale-text,
.profile__form--password-text,
.profile__form--2fa-text,
.profile__form--notification-text,
.security__form--bio-text,
.security__form--locale-text,
.security__form--password-text,
.security__form--2fa-text,
.security__form--notification-text,
.notification__form--bio-text,
.notification__form--locale-text,
.notification__form--password-text,
.notification__form--2fa-text,
.notification__form--notification-text {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}
.profile__form--bio-avatar,
.profile__form--locale-avatar,
.profile__form--password-avatar,
.profile__form--2fa-avatar,
.profile__form--notification-avatar,
.security__form--bio-avatar,
.security__form--locale-avatar,
.security__form--password-avatar,
.security__form--2fa-avatar,
.security__form--notification-avatar,
.notification__form--bio-avatar,
.notification__form--locale-avatar,
.notification__form--password-avatar,
.notification__form--2fa-avatar,
.notification__form--notification-avatar {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.profile__img--container {
    height: 10rem;
    width: 10rem;
    border-radius: 100%;
    border: 1px solid #ff614b;
    padding: 0.3rem;
}
@media (max-width: 22.5em) {
    .profile__img--container {
        height: 7rem;
        width: 7rem;
    }
}
.profile__img--container-img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

.profile__img--updatebtn,
.profile__img--deletebtn {
    padding: 0.5rem 1.5rem;
    text-transform: capitalize;
}

.profile__img--updatebtn {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
    transition: all 0.3s;
}
.profile__img--updatebtn:hover {
    background-color: #11e169;
    color: #fff;
}

.profile__img--deletebtn {
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
    transition: all 0.3s;
}
.profile__img--deletebtn:hover {
    background-color: #ff614b;
    color: #fff;
}

.bio__form,
.locale__form,
.password__form,
.Tfa__form,
.notif__form {
    display: grid;
    row-gap: 1rem;
    column-gap: 2rem;
}
@media (max-width: 35.68em) {
    .bio__form,
    .locale__form,
    .password__form,
    .Tfa__form,
    .notif__form {
        row-gap: 2rem;
    }
}
.bio__form--group,
.locale__form--group,
.password__form--group,
.Tfa__form--group,
.notif__form--group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.Tfa__form--group,
.notif__form--group {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.bio__form {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr) auto;
}
@media (max-width: 35.68em) {
    .bio__form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(7, 1fr);
    }
}

.locale__form {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
}
@media (max-width: 35.68em) {
    .locale__form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
}

.Tfa__form {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: 100%;
    column-gap: 3rem;
}
@media (max-width: 35.68em) {
    .Tfa__form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
    }
}

.notif__form {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    column-gap: 3rem;
}
@media (max-width: 35.68em) {
    .notif__form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
    }
}

.bio__form--group input,
.bio__form--group select,
.locale__form--group input,
.locale__form--group select,
.password__form--group input {
    background: none;
    outline: none;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 0.5rem 1rem;
}
@media (max-width: 35.68em) {
    .bio__form--group input,
    .bio__form--group select,
    .locale__form--group input,
    .locale__form--group select,
    .password__form--group input {
        width: 100%;
    }
}

.bio__form--group label,
.locale__form--group label,
.password__form--group label,
.Tfa__form--group label,
.notif__form--group label {
    text-transform: capitalize;
    cursor: pointer;
}

.form__bio-save,
.form__locale-save,
.form__password-save,
.form__2fa-save,
.form__notif-save,
.crypto__form-save {
    width: 20rem;
    padding: 1rem;
    color: #11e169;
    background-color: rgba(17, 225, 105, 0.2);
    border-radius: 5px;
    border: none;
    margin-top: 2rem;
    transition: all 0.3s;
    cursor: pointer;
}
.form__bio-save:hover,
.form__locale-save:hover,
.form__password-save:hover,
.form__2fa-save:hover,
.form__notif-save:hover,
.crypto__form-save:hover {
    background-color: #11e169;
    color: #fff;
}

.crypto__form-save {
    margin-top: 0;
}

.profile__form-delete {
    display: flex;
    padding-left: 1rem;
    flex-direction: column;
    max-width: 60rem;
    margin: 4rem auto;
    text-align: left;
}
.profile__form-delete-title {
    text-transform: capitalize;
}
.profile__form-delete-btn {
    text-transform: capitalize;
    color: red;
    background-color: rgba(253, 0, 0, 0.252);
    width: 30%;
    margin-top: 2rem;
    padding: 0.8rem 2rem;
    text-align: center;
    transition: all 0.3s;
}
.profile__form-delete-btn:hover {
    background-color: red;
    color: #fff;
}

.security__form--2fa-title,
.notification__form--notification-title {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

.setting_content {
    display: none;
}

.setting_content.active {
    display: block;
    overflow-y: auto;
    height: 80vh;
}
.setting_content.active * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.setting_content.active *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.setting_content.active *::-webkit-scrollbar-track {
    background: none;
}
.setting_content.active *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .setting_content.active {
        padding: 1rem;
    }
}

.withdrawal_settings {
    display: block;
    overflow-y: auto;
    height: 80vh;
}
.withdrawal_settings * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.withdrawal_settings *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.withdrawal_settings *::-webkit-scrollbar-track {
    background: none;
}
.withdrawal_settings *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .withdrawal_settings {
        padding: 1rem;
    }
}

.tab__content--sm.withdrawal_settings > div {
    border-color: #f5deb3;
}
@media (max-width: 37.5em) {
    .tab__content--sm.withdrawal_settings > div {
        margin-top: 3rem;
    }
}

.Tfa__form--group,
.notif__form--group {
    position: relative;
}

.slider__label {
    position: absolute;
    height: 2rem;
    width: 4rem;
    border-radius: 50px;
    background-color: #444;
    right: 0;
    transition: all 0.3s;
    cursor: pointer;
}

#profile__2fa,
#login__2fa,
#password__2fa,
#withdrawal__2fa,
#login__notif,
#deposit__notif,
#withdrawal__notif,
#pl__notif,
#investment__notif {
    position: absolute;
    display: none;
    transition: all 0.3s;
}

#profile__2fa:checked + .slider,
#login__2fa:checked + .slider,
#password__2fa:checked + .slider,
#withdrawal__2fa:checked + .slider,
#login__notif:checked + .slider,
#deposit__notif:checked + .slider,
#withdrawal__notif:checked + .slider,
#pl__notif:checked + .slider,
#investment__notif:checked + .slider {
    background-color: #ff614b;
}

.slider {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.3s;
}

.slider::before {
    content: "";
    position: absolute;
    height: 2rem;
    width: 45%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-color: #d9d9d9;
    transition: all 0.3s;
}

#profile__2fa:checked + .slider::before,
#login__2fa:checked + .slider::before,
#password__2fa:checked + .slider::before,
#withdrawal__2fa:checked + .slider::before,
#login__notif:checked + .slider::before,
#deposit__notif:checked + .slider::before,
#withdrawal__notif:checked + .slider::before,
#pl__notif:checked + .slider::before,
#investment__notif:checked + .slider::before {
    transform: translate(120%, -50%);
    background-color: #fff;
}

.form__notif-save {
    grid-column: 1/2;
    grid-row: 4/5;
}
@media (max-width: 35.68em) {
    .form__notif-save {
        grid-column: 1/2;
        grid-row: auto;
    }
}

.tab__content--sm {
    height: 100%;
    display: none;
}
.tab__content--sm.active {
    display: block;
}
.tab__content--sm-item {
    border: 1px solid #fff;
    max-width: 60rem;
    padding: 2rem;
    margin: 10rem auto;
    border-radius: 10px;
    display: none;
}
.tab__content--sm-item.active {
    display: block;
}

.bank__withdrawal--form-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 1rem;
    column-gap: 2rem;
}
@media (max-width: 35.68em) {
    .bank__withdrawal--form-form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, 1fr);
    }
}
@media (max-width: 35.68em) {
    .bank__withdrawal--form-form {
        row-gap: 2rem;
    }
}

.withdrawal__form--title {
    font-weight: 400;
    margin-bottom: 2rem;
    font-size: 2rem;
    border-bottom: 1px solid #f5deb3;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    text-transform: capitalize;
}

.withdrawal__form--group {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
}

.withdrawal__form--group input {
    background: none;
    outline: none;
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 1.5rem 1rem;
}

.withdrawal__form--group label {
    text-transform: capitalize;
    cursor: pointer;
}

.withdrawal__form-save {
    width: 20rem;
    padding: 1rem;
    color: #11e169;
    background-color: rgba(17, 225, 105, 0.2);
    border-radius: 5px;
    border: none;
    transition: all 0.3s;
    cursor: pointer;
}
.withdrawal__form-save:hover {
    background-color: #11e169;
    color: #fff;
}

.crypto__withdrawal--form-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 1rem;
    column-gap: 2rem;
}
@media (max-width: 35.68em) {
    .crypto__withdrawal--form-form {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        row-gap: 2rem;
    }
}

#saved_wallet__group,
#wallet__group {
    grid-column: 1/3;
    grid-row: 2/3;
    width: 100%;
}
@media (max-width: 35.68em) {
    #saved_wallet__group,
    #wallet__group {
        grid-column: 1/2;
        grid-row: 3/4;
    }
}

.crypto__form-save {
    grid-column: 1/2;
    grid-row: 3/4;
}
@media (max-width: 35.68em) {
    .crypto__form-save {
        grid-column: 1/2;
        grid-row: 4/5;
    }
}

#bio__form > .form__group input,
#bio__form > .form__group select,
#locale__form .form__group input,
#locale__form .form__group select,
#password__form .form__group input,
#withdrawal__crypto--option-setting .form__group input,
#withdrawal__cryptosaved--option-setting .form__group input,
.bank__withdrawal--form-form .form__group input {
    padding: 1.5rem 1rem;
    background: none;
    border: 1px solid #898484;
    font-size: inherit;
    color: #f5deb3;
    outline: none;
    font-size: 1.8rem;
    font-family: inherit;
}
#bio__form > .form__group input:focus,
#bio__form > .form__group input:hover,
#bio__form > .form__group input:active,
#bio__form > .form__group select:focus,
#bio__form > .form__group select:hover,
#bio__form > .form__group select:active,
#locale__form .form__group input:focus,
#locale__form .form__group input:hover,
#locale__form .form__group input:active,
#locale__form .form__group select:focus,
#locale__form .form__group select:hover,
#locale__form .form__group select:active,
#password__form .form__group input:focus,
#password__form .form__group input:hover,
#password__form .form__group input:active,
#withdrawal__crypto--option-setting .form__group input:focus,
#withdrawal__crypto--option-setting .form__group input:hover,
#withdrawal__crypto--option-setting .form__group input:active,
#withdrawal__cryptosaved--option-setting .form__group input:focus,
#withdrawal__cryptosaved--option-setting .form__group input:hover,
#withdrawal__cryptosaved--option-setting .form__group input:active,
.bank__withdrawal--form-form .form__group input:focus,
.bank__withdrawal--form-form .form__group input:hover,
.bank__withdrawal--form-form .form__group input:active {
    border-color: #ff614b;
    outline: none;
}

#save_bankwithdrawal-setting,
#update_bankwithdrawal-setting,
#save_bio-setting,
#save_locale-setting,
#save_cryptowithdrawal-setting,
#saved_cryptowithdrawal-setting,
#save_password-setting {
    height: 5rem;
    width: 15rem;
}

.c-green {
    padding: 0.6rem 1.5rem;
    text-transform: capitalize;
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
    transition: all 0.3s;
    border-radius: 5px;
}
.c-green:hover {
    background-color: #11e169;
    color: #fff;
}

#country_select,
#saved_bank-select,
#saved_crypto-select,
#savednew_crypto-select,
#new_crypto-select {
    background: none;
    border: 1px solid #898484;
    border-radius: 5px;
    padding: 1.5rem 1rem;
}

#change_profile-image {
    padding: 0.4rem 2rem;
}

.uploadpic {
    display: none;
}

#change_profile_image-form {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.input_error {
    font-size: 1.5rem;
    color: #ff614b;
    padding-left: 1rem;
    display: none;
}
.input_error.active {
    display: flex;
}

.withdrawal__form-delete {
    padding: 1rem 2rem;
    background-color: #ff0000;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    outline: none;
}
.withdrawal__form-delete:hover,
.withdrawal__form-delete:focus {
    border: none;
    outline: none;
    background-color: #fff;
    color: #ff0000;
}

.bank__withdrawal--form,
.crypto__withdrawal--form {
    position: relative;
}

.delete_saved-form {
    position: absolute;
    right: 0;
    bottom: 5rem;
}

.market__content {
    margin: 1rem auto;
    padding: 1rem;
    width: 100%;
    height: 90%;
    overflow-y: auto;
    padding-bottom: 10rem;
    display: none;
    border: 1px solid rgba(217, 217, 217, 0.15);
}
.market__content * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.market__content *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.market__content *::-webkit-scrollbar-track {
    background: none;
}
.market__content *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.market__content:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.market__content.active {
    display: block;
}
.market__content--header {
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}
.market__content--content {
    height: 100%;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.15);
}
@media (max-width: 87.5em) {
    .market__content--content {
        height: 93%;
    }
}
.market__content--content:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.scroll {
    overflow-x: auto;
}
.scroll * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.scroll *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.scroll *::-webkit-scrollbar-track {
    background: none;
}
.scroll *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.scroll button {
    min-width: 40%;
    font-weight: 300;
}
@media (max-width: 35.68em) {
    .scroll button {
        min-width: 50%;
    }
}

.grid {
    display: none;
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    row-gap: 5rem;
    column-gap: 2rem;
}
@media (max-width: 87.5em) {
    .grid {
        grid-template-columns: 1fr;
    }
}

.grid.active {
    display: grid;
}

.content__item {
    width: 100%;
    height: 60rem;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.15);
    padding: 1rem;
}
.content__item:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.content__item--header {
    margin-bottom: 1rem;
}
.content__item--header-title {
    text-transform: capitalize;
}
.content__item--content {
    height: 100%;
}

.economic__calendar,
.cfd-adjustment__calendar,
.central-bank__rates,
.dividend-adjustment__calendar,
.trading__breaks,
.national-holidays__calendar,
.forex-market_hours,
.fxcrossrates,
.profit__calculator,
.margin__requirement,
.technical_indicator,
.market_signal,
.currency_index,
.cot_chart {
    overflow-x: auto;
    overflow-y: hidden;
}
.economic__calendar *,
.cfd-adjustment__calendar *,
.central-bank__rates *,
.dividend-adjustment__calendar *,
.trading__breaks *,
.national-holidays__calendar *,
.forex-market_hours *,
.fxcrossrates *,
.profit__calculator *,
.margin__requirement *,
.technical_indicator *,
.market_signal *,
.currency_index *,
.cot_chart * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.economic__calendar *::-webkit-scrollbar,
.cfd-adjustment__calendar *::-webkit-scrollbar,
.central-bank__rates *::-webkit-scrollbar,
.dividend-adjustment__calendar *::-webkit-scrollbar,
.trading__breaks *::-webkit-scrollbar,
.national-holidays__calendar *::-webkit-scrollbar,
.forex-market_hours *::-webkit-scrollbar,
.fxcrossrates *::-webkit-scrollbar,
.profit__calculator *::-webkit-scrollbar,
.margin__requirement *::-webkit-scrollbar,
.technical_indicator *::-webkit-scrollbar,
.market_signal *::-webkit-scrollbar,
.currency_index *::-webkit-scrollbar,
.cot_chart *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.economic__calendar *::-webkit-scrollbar-track,
.cfd-adjustment__calendar *::-webkit-scrollbar-track,
.central-bank__rates *::-webkit-scrollbar-track,
.dividend-adjustment__calendar *::-webkit-scrollbar-track,
.trading__breaks *::-webkit-scrollbar-track,
.national-holidays__calendar *::-webkit-scrollbar-track,
.forex-market_hours *::-webkit-scrollbar-track,
.fxcrossrates *::-webkit-scrollbar-track,
.profit__calculator *::-webkit-scrollbar-track,
.margin__requirement *::-webkit-scrollbar-track,
.technical_indicator *::-webkit-scrollbar-track,
.market_signal *::-webkit-scrollbar-track,
.currency_index *::-webkit-scrollbar-track,
.cot_chart *::-webkit-scrollbar-track {
    background: none;
}
.economic__calendar *::-webkit-scrollbar-thumb,
.cfd-adjustment__calendar *::-webkit-scrollbar-thumb,
.central-bank__rates *::-webkit-scrollbar-thumb,
.dividend-adjustment__calendar *::-webkit-scrollbar-thumb,
.trading__breaks *::-webkit-scrollbar-thumb,
.national-holidays__calendar *::-webkit-scrollbar-thumb,
.forex-market_hours *::-webkit-scrollbar-thumb,
.fxcrossrates *::-webkit-scrollbar-thumb,
.profit__calculator *::-webkit-scrollbar-thumb,
.margin__requirement *::-webkit-scrollbar-thumb,
.technical_indicator *::-webkit-scrollbar-thumb,
.market_signal *::-webkit-scrollbar-thumb,
.currency_index *::-webkit-scrollbar-thumb,
.cot_chart *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

@media (max-width: 37.5em) {
    .economic__calendar .content__item--content,
    .cfd-adjustment__calendar .content__item--content,
    .central-bank__rates .content__item--content {
        min-width: 100rem;
    }
}

@media (max-width: 31.2em) {
    .dividend-adjustment__calendar .content__item--content,
    .trading__breaks .content__item--content,
    .national-holidays__calendar .content__item--content {
        min-width: 100rem;
    }
}

@media (max-width: 41.37em) {
    .forex-market_hours .market__content--content {
        min-width: 100rem;
    }
}

@media (max-width: 41.37em) {
    .fxcrossrates .market__content--content,
    .profit__calculator .content__item--content,
    .margin__requirement .content__item--content {
        min-width: 130rem;
    }
}

@media (max-width: 33.5em) {
    .technical_indicator .market__content--content,
    .market_signal .market__content--content {
        min-width: 80rem;
    }
}

@media (max-width: 37.5em) {
    .currency_index .market__content--content,
    .cot_chart .market__content--content {
        width: 100rem;
    }
}

.calendars {
    overflow-y: auto;
    height: 100vh;
    padding-bottom: 30rem;
}
.calendars * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.calendars *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.calendars *::-webkit-scrollbar-track {
    background: none;
}
.calendars *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.section__portfolio {
    padding-bottom: 10rem;
    overflow-y: auto;
    height: 100%;
}
.section__portfolio * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__portfolio *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__portfolio *::-webkit-scrollbar-track {
    background: none;
}
.section__portfolio *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.section__portfolio--portfolio {
    padding: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    column-gap: 1rem;
    row-gap: 1rem;
}
@media (max-width: 51.18em) {
    .section__portfolio--portfolio {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, auto);
        column-gap: 2rem;
        row-gap: 2rem;
    }
}
@media (max-width: 31.2em) {
    .section__portfolio--portfolio {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        row-gap: 1rem;
    }
}

.portfolio__main {
    grid-column: 1/2;
    grid-row: 1/6;
    border: 1px solid rgba(245, 222, 179, 0.6);
    padding: 2rem;
    height: 70rem;
    background-color: #1e222d;
    overflow-y: hidden;
}
@media (max-width: 51.18em) {
    .portfolio__main {
        grid-column: 1/2;
        grid-row: 1/4;
    }
}
@media (max-width: 31.2em) {
    .portfolio__main {
        grid-column: 1/2;
        grid-row: auto;
    }
}
.portfolio__main--header-title {
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 2rem;
}
.portfolio__main--content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    height: 100%;
}
.portfolio__main--summary {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 20rem;
    width: 100%;
    margin-bottom: 3rem;
    background-color: #1e222d;
}
.portfolio__main--summary-chart {
    margin: 2rem auto;
    width: 100%;
    height: 100%;
}
.portfolio__main--summary-text {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}
.portfolio__main--summary-title {
    font-weight: 500;
}

.portfolio__main--list {
    padding: 2rem 1rem;
    overflow-y: auto;
    padding-bottom: 4rem;
}
.portfolio__main--list * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.portfolio__main--list *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.portfolio__main--list *::-webkit-scrollbar-track {
    background: none;
}
.portfolio__main--list *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

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

.portfolio__list--item:not(:last-child) {
    border-bottom: 1px solid rgba(245, 222, 179, 0.4);
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
}

.portfolio__list--item-header {
    gap: 1rem;
}

.portfolio__list--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
}
.portfolio__list--logo-img {
    width: 100%;
    height: 100%;
}

.portfolio__list--text-title {
    text-transform: capitalize;
    font-size: 1.5rem;
}

.portfolio__list--text-symbol {
    text-transform: uppercase;
    font-size: 1.3rem;
}

.portfolio__item--summary-coin {
    font-size: 1.3rem;
}

.portfolio__item--summary-coinvalue {
    font-size: 1.5rem;
    color: #11e169;
}

.portfolio__sm {
    grid-row: 1/2;
    border: 1px solid rgba(245, 222, 179, 0.6);
    padding: 1.5rem 2rem;
    display: flex;
    max-height: 10rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #1e222d;
}
@media (max-width: 51.18em) {
    .portfolio__sm {
        grid-column: 2/3;
        grid-row: auto;
    }
}
@media (max-width: 31.2em) {
    .portfolio__sm {
        grid-column: 1/2;
        grid-rows: auto;
    }
}
.portfolio__sm--title {
    font-size: 2rem;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    align-self: flex-start;
}
.portfolio__sm--text {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.portfolio__sm--text-amount {
    font-weight: 600;
    font-size: 2rem;
}
.portfolio__sm--text-percent {
    font-size: 1.5rem;
    padding: 0.5rem;
    background-color: #07ae3c7a;
    color: #04f651;
}

.portfolio__chart {
    border: 1px solid rgba(245, 222, 179, 0.6);
    grid-row: 2/6;
    grid-column: 2/5;
    height: 100%;
}
@media (max-width: 51.18em) {
    .portfolio__chart {
        grid-column: 1/3;
        grid-row: 4/5;
    }
}
@media (max-width: 31.2em) {
    .portfolio__chart {
        grid-column: 1/2;
        grid-row: 5/6;
    }
}
@media (max-width: 27.6em) {
    .portfolio__chart {
        display: none;
    }
}

.section__portfolio--markets {
    padding: 1rem 2rem;
    padding-top: 0;
}

.portfolio__market--container {
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    margin: auto;
}
.portfolio__market--container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.portfolio__market--container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.portfolio__market--container *::-webkit-scrollbar-track {
    background: none;
}
.portfolio__market--container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.portfolio__market--item {
    width: 100%;
    min-width: 40rem;
    height: 100%;
    padding: 0.3rem;
    border: 1px solid rgba(245, 222, 179, 0.6);
}

#trade__history--thead tr th,
#trade__history--tbody tr td {
    padding-left: 2rem;
}

#trade__history--throw th {
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}

#trade__history--tbody tr > td {
    text-align: center;
}

#trade__history--tbody tr > td,
#trade__history--tbody tr span,
#trade__history--tbody tr span span.decimal {
    font-size: 1.2rem;
}

.price__entry,
.date_time--entry,
.price__exit,
.date__time--exit,
.trade__result--percentage {
    display: block;
    text-align: center;
}

.transaction__table--table-tbodydata .trade__result--value {
    display: inline-block;
    border-radius: 0;
}

.trade__result--percentage {
    padding: 0.5rem;
}

.transaction__table--table-tbodydata span {
    border-radius: 0;
    padding: 0;
    background: none;
}

.trade__result--percentage {
    color: #11e169;
}
.trade__result--percentage.loss {
    color: #ff614b;
}
.trade__result--percentage.gain {
    color: #11e169;
}

.ttype-asset,
.ttype-type {
    text-transform: uppercase;
}

.ttype-type.long,
.ttype-type.buy {
    color: #11e169;
}

.ttype-type.short,
.ttype-type.sell {
    color: #ff614b;
}

.transaction__table--table-tbodyrow {
    cursor: pointer;
}

.section__inbox {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    padding: 2rem;
}
@media (max-width: 37.5em) {
    .section__inbox {
        padding: 0;
    }
}
.section__inbox--container {
    background-color: #fff;
    color: #000;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    column-gap: 1rem;
}
@media (max-width: 51.18em) {
    .section__inbox--container {
        position: relative;
        display: block;
    }
}
.section__inbox--container-inbox {
    height: 100%;
    width: 30rem;
    background-color: #000;
    overflow-x: visible;
    text-align: center;
}
@media (max-width: 51.18em) {
    .section__inbox--container-inbox {
        position: absolute;
        left: -30rem;
        z-index: 1000;
    }
}
.section__inbox--container-message {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
}

.mobile__email--btn {
    height: 35px;
    width: 40px;
    background-color: #000;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    position: absolute;
    display: none;
    padding: 5px 10px;
}
@media (max-width: 51.18em) {
    .mobile__email--btn {
        display: flex;
        align-items: center;
        justify-content: center;
        right: -7rem;
        top: 3rem;
    }
}

.btn__newmessage {
    width: 80%;
    height: 3rem;
    margin: 1.5rem auto;
    color: #f5deb3;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1rem;
    border: 1px solid #f5deb3;
    border-radius: 100px;
    font-size: 1.5rem;
    transition: all 0.3s;
}
.btn__newmessage:hover {
    background-color: #f5deb3;
    color: #000;
    border-color: #f5deb3;
}

.newmessage__icon .newmessage__text {
    display: inline-block;
}

.newmessage__icon-img {
    height: 20px;
    width: 40px;
}

.form__search {
    width: 80%;
    margin: auto;
    border-radius: 100px;
    color: #f5deb3;
    font-size: 1.5rem;
}

#message__search {
    background: none;
    height: 100%;
}

#search_input::placeholder {
    color: #f5deb3;
}

#search_input:focus::placeholder {
    color: #ff614b;
}

#search_input:focus #search__label {
    color: #ff614b;
}

.search__label {
    display: inline-block;
}

.divider {
    height: 1px;
    width: 95%;
    background-color: rgba(245, 222, 179, 0.4);
    margin: 2rem auto;
}

.message__list {
    width: 90%;
    margin: 0 auto;
    overflow-y: auto;
    height: 80%;
    padding-bottom: 30rem;
}
.message__list * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.message__list *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.message__list *::-webkit-scrollbar-track {
    background: none;
}
.message__list *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .message__list {
        padding-bottom: 10rem;
    }
}
.message__list--item {
    width: 100%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(217, 217, 217, 0.2);
    font-size: 1.2rem;
    padding: 1rem;
    border-radius: 5px;
    color: #f5deb3;
    cursor: pointer;
}
.message__list--item.active,
.message__list--item:hover {
    background-color: #f5deb3;
    color: #000;
}
.message__list--item:not(:last-child) {
    margin-bottom: 1rem;
}

.message__list--item:hover .message__bio--img {
    border-color: #000;
}

.message__list--item:hover .message__notif {
    background-color: #000;
    color: #f5deb3;
}

#compose__message--btn {
    padding: 0.5rem 1.2rem;
    color: #000;
    border-radius: 5px;
    font-size: 1.5rem;
    border: 2px solid #000;
    background: none;
    display: inline-block;
    margin-top: 2rem;
    margin-left: auto;
    cursor: pointer;
    transition: all 0.3s;
}
#compose__message--btn:hover {
    background-color: #f5deb3;
    border: 2px solid transparent;
}

.message__list--item-bio {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.message__bio--img {
    height: 38px;
    width: 38px;
    border-radius: 100%;
    border: 1px solid #f5deb3;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message__bio--img-img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.name__subject {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.message__name {
    text-transform: uppercase;
    font-weight: 400;
}

.message__short {
    width: 100%;
    overflow-x: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message__short * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.message__short *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.message__short *::-webkit-scrollbar-track {
    background: none;
}
.message__short *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.message__notif {
    background-color: #f5deb3;
    width: 2rem;
    margin: auto;
    margin-top: 0.5rem;
    padding: 2px;
    border-radius: 2px;
    color: #000;
}

.message__content {
    height: 70rem;
    padding-bottom: 10rem;
    position: relative;
    overflow-y: auto;
}
.message__content * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.message__content *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.message__content *::-webkit-scrollbar-track {
    background: none;
}
.message__content *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.message__content--header {
    position: sticky;
    top: 0;
    padding-top: 1px;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    font-size: 1.8rem;
    padding-bottom: 1rem;
    transition: all 0.3s;
}
.message__content--header-text {
    padding: 0 2rem;
    margin: 1.5rem 0;
    margin-bottom: 2rem;
}
.message__content--header-datetime {
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.4);
}
.message__content--header-subject {
    font-weight: 500;
}
.message__content--header-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.message__tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
    gap: 1rem;
    color: #000;
    background-color: #000;
    padding: 0 1.5rem;
    border-radius: 5px;
    position: relative;
    color: #fff;
}
.message__tag::after {
    content: "";
    position: absolute;
    height: 100%;
    border-top: 18px solid transparent;
    border-left: 20px solid #000;
    border-bottom: 18px solid transparent;
    right: -17px;
    border-radius: 5px;
}
.message__tag--button {
    padding: 0;
    cursor: pointer;
    background: none;
    color: #fff;
    font-size: 2rem;
    margin: 0;
    padding-top: 0.3ch;
}

.delete__btn,
.menu__btn {
    background: none;
    color: #000;
    cursor: pointer;
}

.message__content--previous {
    font-size: 1.5rem;
    overflow-y: auto;
}
.message__content--previous * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.message__content--previous *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.message__content--previous *::-webkit-scrollbar-track {
    background: none;
}
.message__content--previous *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.message__content--inbox {
    border-bottom: 1px solid rgba(0, 0, 0, 0.8);
    padding: 1rem 2rem;
}
.message__content--inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content__inbox--details {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.content__inbox--details-img {
    height: 35px;
    width: 35px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content__inbox--details-sender {
    text-transform: capitalize;
}

.content__inbox--details-part {
    display: none;
}
.content__inbox--details-part.active {
    display: unset;
}

.message__inbox--img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.content__inbox--datetime {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.message__content--inbox-header {
    cursor: pointer;
}

.message__content--content {
    margin-top: 3rem;
    line-height: 1.5;
    display: none;
}
.message__content--content.active {
    display: block;
}

.message__content--content p {
    margin-bottom: 1rem;
}

.message__content--cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5rem;
}

.close__message-btn {
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 1px 6px;
    cursor: pointer;
    border-radius: 5px;
    background: #000;
    color: #fff;
    font-size: 1.5rem;
}

.reply__btn,
.send__btn {
    display: none;
    padding: 5px 10px;
    text-transform: capitalize;
    background-color: #000;
    color: #fff;
    border: 1px solid transparent;
    transition: all 0.5s;
}
.reply__btn.active,
.send__btn.active {
    display: block;
}
.reply__btn:hover,
.send__btn:hover {
    background: none;
    border: 1px solid #000;
    color: #000;
}

.ql-snow .ql-picker.ql-header {
    color: #000;
}

.add__reply {
    margin: auto;
}

.ql-tooltip .ql-editing .ql-flip {
    left: 0;
}

.send__btn {
    display: none;
    margin-left: auto;
    margin-top: 2rem;
}
.send__btn.active {
    display: block;
}

.message__content--body {
    position: absolute;
    width: 80%;
    height: 70%;
    background-color: #7a7474;
    top: 5rem;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
    padding-bottom: 10rem;
    display: none;
}
.message__content--body * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.message__content--body *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.message__content--body *::-webkit-scrollbar-track {
    background: none;
}
.message__content--body *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

#editor {
    display: none;
}
#editor.active {
    display: block;
}

.empty__content {
    height: 100%;
    width: 100%;
    display: none;
    align-self: center;
    justify-content: center;
}
.empty__content.active {
    display: flex;
}

.empty__message {
    margin: auto;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 5rem;
    opacity: 0.03;
    text-align: center;
}

.compose__message {
    height: 100%;
    width: 100%;
    display: none;
}
@media (max-width: 51.18em) {
    .compose__message {
        padding: 2rem;
        padding-top: 8rem;
    }
}
.compose__message.active {
    display: block;
}

.compose__message--header {
    padding: 1rem 0;
}

#compose__email--form {
    width: 100%;
}

.form_group {
    display: flex;
    align-items: center;
}
.form_group:not(:last-child) {
    margin-bottom: 1rem;
}

#send__to,
#sender__subject {
    width: 100%;
    margin-right: auto;
    padding: 1rem;
    outline: none;
    border: 1px solid #444;
    border-radius: 5px;
}

.form_group label {
    width: 10rem;
    display: inline-block;
}

#compose__editor {
    height: 40rem;
}

.section__users {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
    padding-bottom: 15rem;
}
@media (max-width: 37.5em) {
    .section__users {
        font-size: 1.5rem;
        padding: 0;
        border: none;
        padding-top: 3rem;
    }
}
.section__users--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section__users--header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.action__buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.action__buttons--btn {
    border-radius: 100px;
    padding: 0.6rem 1.5rem;
    font-size: inherit;
    outline: none;
    border: 1px solid #f5deb3;
    background: none;
    color: inherit;
    cursor: pointer;
    text-transform: capitalize;
    text-decoration: none;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    transition: all 0.3s;
}
.action__buttons--btn:focus,
.action__buttons--btn:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    color: #000;
    background-color: #f5deb3;
    outline: none;
}
.action__buttons--btn.delete:hover {
    border: 1px solid transparent;
    color: #ff0000;
}
.action__buttons--btn.add_user:hover,
.action__buttons--btn.add_user:focus,
.action__buttons--btn.add_Deposit:hover,
.action__buttons--btn.add_Deposit:focus,
.action__buttons--btn.add_withdrawal:hover,
.action__buttons--btn.add_withdrawal:focus,
.action__buttons--btn.approve_kyc:hover,
.action__buttons--btn.approve_kyc:focus {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
    border: 1px solid transparent;
    color: #000;
    background-color: #f5deb3;
    outline: none;
}

.manage__action {
    border: none;
    outline: none;
    cursor: pointer;
    background-color: none;
    background: none;
    color: #fff;
    transition: all 0.2s;
}
.manage__action:focus {
    border: none;
}
.manage__action:hover {
    transform: scale(1.15);
}

@media (max-width: 45.87em) {
    #users_table table thead tr th:nth-child(4) {
        display: none;
    }
}

@media (max-width: 45.87em) {
    #users_table table tbody tr td:nth-child(4) {
        display: none;
    }
}

@media (max-width: 37.5em) {
    #table_list-tbody tr td {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 37.5em) {
    #table_list-thead tr th {
        padding: 1rem 1.5rem;
    }
}

.section__mam {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    padding: 2rem;
    overflow: hidden;
    margin-bottom: 2rem;
    overflow-y: auto;
}
@media (max-width: 31.2em) {
    .section__mam {
        padding: 0;
        padding-top: 3rem;
        border: none;
        overflow-y: auto;
    }
}

.section__support {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
}
.section__support--header {
    margin-bottom: 2rem;
}
@media (max-width: 27.6em) {
    .section__support--header {
        margin-bottom: 0.5rem;
    }
}

.support__support {
    display: none;
}
.support__support.active {
    display: block;
}
.support__support--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}
.support__support--body {
    margin-top: 3rem;
}

.support__settings {
    display: none;
    padding: 2rem;
    overflow-y: auto;
    max-width: 100%;
    overflow-x: hidden;
    height: 85vh;
}
.support__settings * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.support__settings *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.support__settings *::-webkit-scrollbar-track {
    background: none;
}
.support__settings *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .support__settings {
        padding: 0.2rem;
    }
}
.support__settings.active {
    display: flex;
    align-items: center;
    flex-direction: column;
}
.support__settings--bio {
    background-color: #2a2222;
    border-top: 4px solid #ff614b;
    max-width: 70%;
    margin: auto;
    margin-bottom: 3rem;
    padding: 4rem;
}
@media (max-width: 37.5em) {
    .support__settings--bio {
        max-width: 100%;
        padding: 1.5rem;
    }
}
.support__settings--setting {
    padding: 2rem;
    width: 100%;
    margin-bottom: 4rem;
    color: #fff;
}
@media (max-width: 31.2em) {
    .support__settings--setting {
        padding: 1rem;
    }
}
@media (max-width: 51.18em) {
    .support__settings--setting {
        border-bottom: 2px solid #898484;
    }
}
.support__settings--header {
    margin-bottom: 2rem;
}
.support__settings-title {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.8rem;
}
.support__settings--faqs {
    padding: 2rem;
}

.support--bio {
    width: 50%;
    margin: auto;
}
.support--bio.categories {
    margin-top: 8rem;
}
@media (max-width: 37.5em) {
    .support--bio {
        width: 100%;
    }
}

.support_avatar {
    margin-bottom: 0 !important;
}

.support__btns {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.support__btns-btn {
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0.8rem 2rem;
    background-color: rgba(17, 225, 105, 0.5);
    color: #fff;
    transition: all 0.3s;
}
.support__btns-btn.save {
    margin-left: auto;
}
.support__btns-btn:focus,
.support__btns-btn:hover {
    border: none;
    outline: none;
    background-color: #11e169;
    color: #000;
}
.support__btns-btn.delete {
    background-color: rgba(255, 0, 0, 0.6);
}
.support__btns-btn.delete:focus,
.support__btns-btn.delete:hover {
    background-color: #ff0000;
    color: #fff;
}

.support__category--add-btn {
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0.8rem 2rem;
    background-color: rgba(255, 97, 75, 0.5);
    color: #fff;
    transition: all 0.3s;
    display: block;
    margin-left: auto;
}
.support__category--add-btn:focus,
.support__category--add-btn:hover {
    border: none;
    outline: none;
    background-color: #ff614b;
}

.add__faq-btn {
    cursor: pointer;
    outline: none;
    border: none;
    padding: 0.8rem 2rem;
    background-color: rgba(255, 97, 75, 0.5);
    color: #fff;
    transition: all 0.3s;
    display: block;
    margin: 4rem auto;
}
.add__faq-btn:focus,
.add__faq-btn:hover {
    border: none;
    outline: none;
    background-color: #ff614b;
}

.support__img-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.new__support-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid transparent;
    border-bottom: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
    font-size: 1.6rem;
    transition: all 0.3s;
    margin-right: 2rem;
    cursor: pointer;
}
.new__support-btn:hover,
.new__support-btn:focus,
.new__support-btn:active {
    outline: none;
    border: 1px solid transparent;
    color: #ff614b;
    border-bottom-color: #ff614b;
}
@media (max-width: 27.6em) {
    .new__support-btn:hover,
    .new__support-btn:focus,
    .new__support-btn:active {
        background: none;
    }
}
@media (max-width: 27.6em) {
    .new__support-btn {
        padding: 0.5rem;
        box-shadow: none;
        margin-right: 1rem;
    }
}

@media (max-width: 27.6em) {
    #ticket_search-content {
        max-width: 20rem;
    }
}

@media (max-width: 27.6em) {
    .new__support-btn span {
        display: none;
    }
}

.l-letter {
    text-transform: uppercase;
}

.btn-flex {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.btn-flex:focus,
.btn-flex:hover {
    color: #ff614b;
}

.slider_span {
    display: inline-block;
}

.tickets__lists {
    overflow-y: auto;
    padding: 0 1rem;
    height: 80vh;
    padding-bottom: 20rem;
}
.tickets__lists * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.tickets__lists *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.tickets__lists *::-webkit-scrollbar-track {
    background: none;
}
.tickets__lists *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 31.2em) {
    .tickets__lists {
        padding: 2px;
        padding-bottom: 20rem;
    }
}
.tickets__lists--item {
    padding: 1rem 2rem;
    background-color: #fff;
    color: #000;
    margin-top: 1rem;
    border-left: 8px solid #d9d9d9;
    border-right: 8px solid #d9d9d9;
}
@media (max-width: 27.6em) {
    .tickets__lists--item {
        padding: 1rem;
        border-width: 4px;
    }
}
.tickets__lists--item.low-priority {
    border-left-color: #11e169;
    border-right-color: #11e169;
}
.tickets__lists--item.medium-priority {
    border-left-color: #ce45c0;
    border-right-color: #ce45c0;
}
.tickets__lists--item.high-priority {
    border-left-color: #ff614b;
    border-right-color: #ff614b;
}
.tickets__lists--item.critical-priority {
    border-left-color: #ff0000;
    border-right-color: #ff0000;
}
.tickets__lists--item.urgent-priority {
    border-left-color: #593eff;
    border-right-color: #593eff;
}
.tickets__lists--item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.tickets__lists--item-content {
    padding-bottom: 2rem;
    border-bottom: 1px solid #000;
}
.tickets__lists--item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tickets__item--title {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
}
.tickets__item--title-status {
    height: 2rem;
    width: 2rem;
    background-color: #11e169;
    border-radius: 100%;
}
.tickets__item--title-status.resolved {
    background-color: #444;
}
.tickets__item--title-status.new {
    background-color: #593eff;
}
.tickets__item--title-status.ongoing {
    background-color: #ff614b;
}
.tickets__item--title-id {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.tickets__item--title-priority {
    padding: 0.3rem 0.5rem;
    border-radius: 3px;
    font-size: 1.5rem;
    color: #ff0000;
}
.tickets__item--title-priority.low-priority {
    color: #03a346;
}
.tickets__item--title-priority.medium-priority {
    color: #ce45c0;
}
.tickets__item--title-priority.high-priority {
    color: #ff614b;
}
.tickets__item--title-priority.critical-priority {
    color: #ff0000;
}
.tickets__item--title-priority.urgent-priority {
    color: #593eff;
}

.tickets__item--subject {
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 0.6rem;
}

.tickets__item--bio {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}
.tickets__item--bio-img {
    height: 5rem;
    width: 5rem;
    padding: 3px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket__posted--date,
.tickets__item--message {
    font-size: 1.5rem;
    color: #444;
}

.tickets__bio-img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.open__ticket {
    text-underline-offset: 4px;
    color: #593eff;
    transition: all 0.2s;
}
.open__ticket:focus,
.open__ticket:hover {
    color: #ff614b;
}

.support__form {
    margin: 3rem 0;
}
.support__form--group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.support__form--input {
    padding: 1rem;
    color: #000;
}

.support__ticker-bio {
    display: flex;
    gap: 5rem;
    width: 100%;
    margin-bottom: 3rem;
}
@media (max-width: 37.5em) {
    .support__ticker-bio {
        gap: 2rem;
    }
}
@media (max-width: 37.5em) {
    .support__ticker-bio {
        flex-direction: column;
    }
}

.flex-row {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}

.no-margin-b {
    margin-bottom: 0;
}

.current__support-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    width: 5rem;
    height: 5rem;
}

.support__img {
    height: 100%;
    width: 100%;
}

.no-padding {
    padding: 0;
    padding-right: 1rem;
}

.add__category-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    background-color: rgba(255, 97, 75, 0.5);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    outline: none;
}
.add__category-btn:hover,
.add__category-btn:active,
.add__category-btn:focus {
    background-color: #ff614b;
    outline: none;
    border: none;
}

#file_name {
    color: #fff;
}

.category__listing--priority {
    margin-top: 3rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.addsupport__form-input {
    font-size: 1.5rem;
}

.add__support--category-body {
    display: none;
}
.add__support--category-body.active {
    display: flex;
}

.category__priority--group {
    display: flex;
    align-items: stretch;
    gap: 5rem;
}
@media (max-width: 37.5em) {
    .category__priority--group {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-bottom: 3rem;
    }
}

.delete_category {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    color: #fff;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.3s;
}
.delete_category:active,
.delete_category:hover,
.delete_category:focus {
    border: none;
    outline: none;
    color: #ff614b;
}

.select_input {
    width: 100%;
}

.save_ticket--btn {
    margin-top: 2rem;
    background-color: rgba(255, 97, 75, 0.5);
    color: #fff;
    padding: 1rem 1.2rem;
    font-size: inherit;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}
.save_ticket--btn:focus,
.save_ticket--btn:active,
.save_ticket--btn:hover {
    background-color: #ff614b;
}

.faqs {
    color: #fff;
    text-align: center;
}
@media (max-width: 37.5em) {
    .faqs {
        padding-bottom: 5rem;
    }
}
.faqs.userEnd {
    max-width: 100rem;
    margin: auto;
}
.faqs__header {
    margin-bottom: 5rem;
}
@media (max-width: 27.6em) {
    .faqs__header {
        margin-bottom: 2rem;
    }
}
.faqs__header-title {
    font-size: 3rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 2rem;
}
@media (max-width: 31.2em) {
    .faqs__header-title {
        font-size: 2rem;
    }
}
.faqs__header-text {
    font-size: 1.8rem;
    width: 80%;
    margin: auto;
}
.faqs__item {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid #898484;
}
.faqs__item--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.faqs__item--header-title {
    font-weight: 500;
    font-size: 2rem;
    margin-bottom: 1rem;
}
@media (max-width: 37.5em) {
    .faqs__item--header-title {
        font-size: 1.6rem;
    }
}
.faqs__item--header-btns {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.faqs__item--body {
    display: none;
    margin-top: 1rem;
}
.faqs__item--body.active {
    display: block;
}
.faqs__item--form {
    display: none;
}
.faqs__item--form.active {
    display: block;
}
.faqs__container {
    overflow-y: auto;
    height: 40rem;
}
.faqs__container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.faqs__container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.faqs__container *::-webkit-scrollbar-track {
    background: none;
}
.faqs__container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.faqs__container.admin {
    height: 100%;
}
.faqs__container.sm-width {
    max-width: 100rem;
    padding: 1rem;
    padding-bottom: 20rem;
    height: 60rem;
    margin: auto;
}
.faqs__content {
    color: #d9d9d9;
}

.mail_link {
    text-underline-offset: 4px;
    color: #11e169;
    transition: all 0.3s;
}
.mail_link:hover,
.mail_link:focus {
    color: #ff614b;
}

.faqs-btn {
    background: none;
    color: #fff;
    border: none;
    outline: none;
    transition: all 0.3s;
    cursor: pointer;
    font-size: 1rem;
}
.faqs-btn:hover,
.faqs-btn:active,
.faqs-btn:focus {
    border: none;
    outline: none;
    color: #ff614b;
}

.faqs__form {
    width: 100%;
}
.faqs__form--group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.faqs__form--input {
    width: 40%;
    padding: 1rem;
    color: #000;
}
.faqs__form--textarea {
    margin-top: 1rem;
}
.faqs__form-textarea {
    padding: 1rem;
    font-size: inherit;
    width: 100%;
    height: 12rem;
    font-family: inherit;
}
.faqs__form--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faqs__form--btns-btn {
    padding: 0.5rem 1rem;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 2rem;
}
.faqs__form--btns-btn:focus,
.faqs__form--btns-btn:active {
    border: none;
    outline: none;
}
.faqs__form--btns-btn.save_faq {
    background-color: rgba(255, 97, 75, 0.5);
    transition: all 0.3s;
}
.faqs__form--btns-btn.save_faq:hover {
    background-color: #ff614b;
}
.faqs__form--btns-btn.close_faq-edit {
    border: 1px solid #fff;
    transition: all 0.3s;
}
.faqs__form--btns-btn.close_faq-edit:hover {
    background-color: #fff;
    color: #000;
}

.faqs__form--group label {
    font-weight: 500;
}

.support__form--group label,
.support_name {
    font-size: 1.8rem;
}

.support_pic-upload {
    padding: 1rem;
}

@media (max-width: 27.6em) {
    #all_tickets span,
    #new_tickets span,
    #resolved_tickets span,
    #ongoing_tickets span {
        display: none;
    }
}

.support__form--input,
.select_input {
    min-width: 18rem;
    width: 100%;
    max-width: 40rem;
    padding: 1rem;
    background: none;
    border: 1px solid #898484;
    font-size: inherit;
    color: #fff;
    outline: none;
}
.support__form--input:focus,
.support__form--input:hover,
.support__form--input:active,
.select_input:focus,
.select_input:hover,
.select_input:active {
    border-color: #ff614b;
    outline: none;
}

.support__form--priority-select {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.8rem;
}

.add_cartegory-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 2rem auto;
    position: relative;
}

#add_new_category {
    min-width: 22rem;
    width: 100%;
    max-width: 30rem;
    padding: 1rem;
    background: none;
    border: 1px solid #898484;
    font-size: inherit;
    color: #fff;
    outline: none;
}
#add_new_category:focus,
#add_new_category:hover,
#add_new_category:active {
    border-color: #ff614b;
    outline: none;
}

.save__new--category-btn {
    margin-top: 2rem;
    max-width: 10rem;
    padding: 1rem 2rem;
    background: none;
    font-size: inherit;
    color: #fff;
    outline: none;
    border: 1px solid #898484;
}
.save__new--category-btn:focus,
.save__new--category-btn:hover,
.save__new--category-btn:active {
    border-color: #ff614b;
    outline: none;
    color: #ff614b;
}

.delete_ticket {
    background-color: #ff614b;
    color: #fff;
    padding: 0.8rem 1.6rem;
    font-size: 1.5rem;
    font-weight: 500;
    outline: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}
.delete_ticket:focus,
.delete_ticket:hover {
    background: none;
    color: #ff0000;
    border: 1px solid #ff0000;
    outline: none;
}

.resolve-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    border-bottom: 1px solid transparent;
}
.resolve-btn:focus,
.resolve-btn:hover {
    border: none;
    border-bottom: 1px solid #ff614b;
}

.auth {
    width: 100vw;
    height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}
.auth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../../assets/bg-img/auth.png);
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: blur(5px);
    opacity: 0.8;
}
.auth__container {
    min-width: 40vw;
    width: auto;
    max-width: 90vw;
    min-height: auto;
    overflow-y: auto;
    padding: 3rem;
    background-color: #433f3f;
    border-radius: 1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    max-height: 95%;
    margin: 4rem auto;
}
.auth__container * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.auth__container *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.auth__container *::-webkit-scrollbar-track {
    background: none;
}
.auth__container *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.auth__container--header {
    text-align: center;
}
.auth__container--header-logo {
    max-width: 20rem;
    margin: auto;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth__container--content {
    margin: 2.5rem auto;
    width: 95%;
}
.auth__header-img {
    height: 100%;
    width: 100%;
}
.auth__header--title {
    max-width: 20rem;
    text-align: center;
    margin: auto;
}

.registration__form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 3.5rem;
    row-gap: 3rem;
    margin: auto;
    width: 100%;
}
@media (max-width: 41.37em) {
    .registration__form {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 27.6em) {
    .registration__form {
        row-gap: 1.5rem;
    }
}
.registration__form.reset_password {
    row-gap: 0;
}

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

.auth__form--group {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    border: 1px solid #fff;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
.auth__form--group.accept-terms {
    border: none;
    justify-content: center;
    gap: 1rem;
}
@media (max-width: 27.6em) {
    .auth__form--group.accept-terms {
        font-size: 1.8rem;
    }
}

.auth__form--input {
    border: none;
    background: none;
    outline: none;
}

.auth__form--error {
    width: 100%;
    color: #ff0000;
    font-size: 1.4rem;
    display: none;
}
.auth__form--error.active {
    display: inline-block;
}

.auth__form.accept-terms {
    grid-column: span 2;
    text-align: center;
}
@media (max-width: 41.37em) {
    .auth__form.accept-terms {
        grid-column: 1/2;
    }
}

.label_small {
    font-size: 1.4rem;
    color: #d9d9d9;
}

.auth__form label {
    cursor: pointer;
}

.auth__form--group.error {
    background-color: rgba(255, 0, 0, 0.2);
    border-color: #ff0000;
    color: #ff0000;
}

.auth__form--group.success {
    background-color: rgba(17, 225, 105, 0.2);
    border-color: #11e169;
    color: #11e169;
}

#birthday {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url(../../assets/icons/calendar.svg) no-repeat right 0.2rem
        center;
    cursor: pointer;
}

#birthday::-webkit-inner-spin-button,
#birthday::-webkit-calendar-picker-indicator {
    padding-right: 0.5rem;
    background-color: #fff;
    opacity: 0;
    cursor: pointer;
}

.password_group {
    position: relative;
}

#password_generator {
    border: none;
    background: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: -5px;
}
#password_generator:focus,
#password_generator:hover,
#password_generator:active {
    border: none;
    background: none;
    outline: none;
    color: #ff614b;
}

.view_password {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s;
}
.view_password:focus,
.view_password:hover,
.view_password:active {
    border: none;
    background: none;
    outline: none;
    color: #ff614b;
}

.accept_terms {
    text-underline-offset: 4px;
    color: #11e169;
    transition: all 0.3s;
}
.accept_terms:focus,
.accept_terms:active,
.accept_terms:hover {
    color: #ff614b;
}

.register_btn {
    grid-column: span 2;
    width: 30rem;
    margin: auto;
    display: inline-block;
    font-size: inherit;
    border: none;
    outline: none;
    padding: 0.8rem 1.2rem;
    border-radius: 5px;
    background-color: rgba(255, 97, 75, 0.5);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
}
@media (max-width: 41.37em) {
    .register_btn {
        grid-column: 1/2;
    }
}
.register_btn:focus,
.register_btn:hover,
.register_btn:active {
    border: none;
    outline: none;
    background-color: #ff614b;
}

.login_link-text {
    margin-top: 4rem;
    text-align: center;
}

.login_link-link {
    text-decoration: none;
    font-weight: 500;
    margin-left: 1rem;
    color: rgba(255, 97, 75, 0.8);
    transition: all 0.3s;
}
.login_link-link:focus,
.login_link-link:active,
.login_link-link:hover {
    color: #ff614b;
}

#fullname,
#email,
#mobile,
#password,
#gender,
#country,
#confirm_password,
#state,
#city,
#address,
#zip_code {
    width: 100%;
    background: none;
}
#fullname:focus,
#fullname:active,
#fullname:hover,
#email:focus,
#email:active,
#email:hover,
#mobile:focus,
#mobile:active,
#mobile:hover,
#password:focus,
#password:active,
#password:hover,
#gender:focus,
#gender:active,
#gender:hover,
#country:focus,
#country:active,
#country:hover,
#confirm_password:focus,
#confirm_password:active,
#confirm_password:hover,
#state:focus,
#state:active,
#state:hover,
#city:focus,
#city:active,
#city:hover,
#address:focus,
#address:active,
#address:hover,
#zip_code:focus,
#zip_code:active,
#zip_code:hover {
    background: none;
    background-color: none;
}

.reset_password {
    grid-column: span 2;
}

#reg_custome-select {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#reg_custome-select .custom__select-arrow {
    top: 50%;
    transform: translateY(-50%);
}

#reg_country {
    background: none;
    padding: 0;
}

@media (max-width: 31.2em) {
    .mobile-hide {
        display: none;
    }
}

.login_form {
    margin: auto;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    width: 100%;
}

.login_email {
    grid-column: 1/2;
    grid-row: 1/2;
}

.login_password {
    grid-column: 1/2;
    grid-row: 2/3;
}

.sign_in,
.reset_password-btn {
    grid-column: 1/2;
    grid-row: 3/4;
}

.login_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 45rem;
}

.forgot_password-link {
    text-decoration: none;
    color: rgba(255, 97, 75, 0.8);
    font-size: 1.6rem;
    display: inline-block;
    text-align: right;
    width: 100%;
    transition: all 0.3s;
    border: none;
    outline: none;
}
.forgot_password-link:focus,
.forgot_password-link:active,
.forgot_password-link:hover {
    text-decoration: none;
    outline: none;
    color: #ff614b;
    border: none;
}

.adminlogin {
    color: #ff614b;
}

.genePassLogin {
    position: relative;
}

.message_bx {
    margin: auto;
    text-align: center;
}
.message_bx-ms {
    color: #11e169;
}

.verification__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.verification__form--header {
    max-width: 40rem;
    margin-bottom: 3rem;
}
.verification__form--header-title {
    font-size: 2.5rem;
    font-weight: 400;
}
.verification__form--header-text {
    font-size: 1.5rem;
    max-width: 90%;
    margin: auto;
    text-align: center;
}
.verification__form--codes {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 3rem;
}
.verification__form--code {
    background: none;
    border: 1px solid #fff;
    outline: none;
    max-width: 5rem;
    padding: 1rem;
    text-align: center;
    border-radius: 5px;
}
.verification__form--code.error {
    background-color: rgba(255, 0, 0, 0.2);
    border-color: #ff0000;
    color: #ff0000;
}
.verification__form--code.success {
    background-color: rgba(17, 225, 105, 0.2);
    border-color: #11e169;
    color: #11e169;
}

.resend_code-text {
    text-align: center;
    margin-top: 1.5rem;
}

.resend_code-link {
    text-decoration: none;
    background: none;
    outline: none;
    border: none;
    font-weight: 500;
    margin-left: 1rem;
    color: #ff614b;
    transition: all 0.3s;
    cursor: pointer;
}
.resend_code-link:focus,
.resend_code-link:active,
.resend_code-link:hover {
    border: none;
    outline: none;
    color: rgba(255, 97, 75, 0.8);
}

.verification_email {
    text-decoration: none;
    color: rgba(255, 97, 75, 0.8);
    font-weight: 500;
    letter-spacing: 1px;
}
.verification_email:focus,
.verification_email:active,
.verification_email:hover {
    border: none;
    outline: none;
    color: #ff614b;
}

.error_states {
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    visibility: hidden;
    opacity: 0;
}
.error_states.active {
    visibility: visible;
    opacity: 1;
}

.alphabets,
.digits,
.special_chars,
.min_char {
    display: inline-block;
    text-align: center;
    padding: 3px;
    max-width: 20rem;
    width: 100%;
    font-size: 1rem;
    background-color: #d9d9d9;
    color: #000;
}
.alphabets.error,
.digits.error,
.special_chars.error,
.min_char.error {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff0000;
}
.alphabets.success,
.digits.success,
.special_chars.success,
.min_char.success {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
}

.reset_password-btn {
    margin-top: 2.5rem;
}

.section__user {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 2rem;
}
.section__user * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__user *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__user *::-webkit-scrollbar-track {
    background: none;
}
.section__user *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
@media (max-width: 37.5em) {
    .section__user {
        padding: 2rem 0;
        padding-bottom: 10rem;
    }
}
.section__user--details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 87.5em) {
    .section__user--details {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}
@media (max-width: 41.37em) {
    .section__user--details {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
.section__user--details-bio {
    background-color: #000;
    padding: 2rem;
    grid-row: 1/3;
}
@media (max-width: 22.5em) {
    .section__user--details-bio {
        padding: 0.5rem;
    }
}
.section__user--tables {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 87.5em) {
    .section__user--tables {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
.section__user--tables-transactions,
.section__user--tables-trade {
    background-color: #000;
    padding: 2rem;
}

.user__details--bio-bio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.user__details--bio-info {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(4, auto);
    gap: 1rem;
}
@media (max-width: 31.2em) {
    .user__details--bio-info {
        grid-template-columns: repeat(2, auto);
        grid-template-rows: auto;
    }
}

.head_title-text {
    text-transform: capitalize;
}

.userdetails__bio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.userdetails__bio--img {
    height: 6rem;
    width: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 100%;
    padding: 3px;
}
.userdetails__bio--img.online {
    border: 1px solid #11e169;
}
.userdetails__bio--img.offline {
    border: 1px solid #ff614b;
}
.userdetails__bio--img-email {
    text-decoration: none;
    color: #dcd8d8;
    transition: all 0.3s;
}
.userdetails__bio--img-email:hover {
    color: #ff614b;
}
.userdetails__bio--img-img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

.userdetails__tid {
    text-align: right;
}
.userdetails__tid-id {
    text-transform: uppercase;
}
.userdetails__tid-copybtn {
    padding: 2px 4px;
    background-color: rgba(255, 97, 75, 0.8);
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}
.userdetails__tid-copybtn:hover,
.userdetails__tid-copybtn:active,
.userdetails__tid-copybtn:focus {
    border: none;
    outline: none;
    background-color: #ff614b;
}

.userbio__card--sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #2a2b2c;
    padding: 1rem;
}
.userbio__card--sm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.userbio__card--sm-icon > span {
    font-size: 2rem;
}
.userbio__card--sm.address {
    grid-column: 2/4;
    grid-row: 4/5;
}
@media (max-width: 31.2em) {
    .userbio__card--sm.address {
        grid-column: 2/3;
    }
}
.userbio__card--sm.created {
    grid-column: 1/2;
    grid-row: 4/5;
}
.userbio__card--sm.zipcode {
    grid-column: 2/4;
}
@media (max-width: 31.2em) {
    .userbio__card--sm.zipcode {
        grid-column: 2/3;
    }
}
.userbio__card--sm-info {
    font-size: 1.6rem;
    text-transform: capitalize;
}
.userbio__card--sm-info.active,
.userbio__card--sm-info.verified {
    color: #11e169;
}
.userbio__card--sm-info.pending {
    color: #000;
}
.userbio__card--sm-info.blocked,
.userbio__card--sm-info.suspended {
    color: #ff614b;
}
.userbio__card--sm-title {
    font-size: 1.4rem;
    font-weight: 300;
    text-transform: capitalize;
}

.userdetails__card {
    padding: 2rem;
    background-color: #000;
}
.userdetails__card--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.userdetails__card--body {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
    gap: 1rem;
}
.userdetails__card--amount {
    font-size: 2.5rem;
    letter-spacing: 1px;
}
.userdetails__card--since {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.userdetails__card--since-amount.gain {
    color: #11e169;
}
.userdetails__card--since-amount.loss {
    color: #ff614b;
}
.userdetails__card--since-text {
    font-weight: 300;
    font-size: 1.4rem;
}
.userdetails__card-sm {
    padding: 1rem;
    background-color: #2a2b2c;
}
.userdetails__card-sm-title {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.4rem;
}
.userdetails__card-sm-amount.credit,
.userdetails__card-sm-amount.approved,
.userdetails__card-sm-amount.gain {
    color: #11e169;
}
.userdetails__card-sm-amount.debit,
.userdetails__card-sm-amount.rejected {
    color: #ff614b;
}

.card-balance-body .userdetails__card--body-amount {
    grid-column: span 4;
    grid-row: 1/2;
}

.card-deposit-body .userdetails__card--body-amount {
    grid-column: 1/3;
    grid-row: 1/2;
}

.balance-credit,
.balance-debit {
    grid-row: 2/3;
}

.balance-credit {
    grid-column: 1/3;
}

.balance-debit {
    grid-column: 3/5;
}

.card-deposit-body .userdetails__card--body-amount {
    grid-column: 1/3;
    grid-row: 1/2;
}

.card-deposit-body-amount {
    grid-column: 3/5;
    grid-row: 1/2;
}

.card-deposit-body-subscription {
    grid-column: 1/3;
}

.card-deposit-body-trader {
    grid-column: 3/5;
}

.card-withdrawal-body .userdetails__card--body-amount,
.card-profit-body .userdetails__card--body-amount,
.card-loss-body .userdetails__card--body-amount,
.card-bonus-body .userdetails__card--body-amount {
    grid-column: 1/3;
    grid-row: 1/2;
}

.card-withdrawal-body-approved,
.card-profit-body-trade,
.card-loss-body-trade,
.card-bonus-body-mam {
    grid-column: 3/5;
    grid-row: 1/2;
}

.card-withdrawal-body-rejected,
.card-profit-body-copytrade,
.card-loss-body-copytrade,
.card-bonus-body-bot {
    grid-column: 1/3;
}

.card-withdrawal-body-pending,
.card-profit-body-sub,
.card-loss-body-sub,
.card-bonus-body-sub {
    grid-column: 3/5;
}

.text-color button {
    color: #f5deb3;
}

.user__table--activities-container {
    height: 40rem;
    background-color: #2a2b2c;
    margin-top: 1rem;
    width: 100%;
}

.user__activities--table {
    height: 100%;
    display: none;
    background-color: #2a2b2c;
}
.user__activities--table.active {
    display: block;
}

.deposits-table,
.withdrawal-table,
.subscription-table,
.tradehistory-table,
.copytrade-table {
    height: 40rem;
    overflow-y: auto;
}

#userdeposit__table--head-tr,
#userwithdrawal__table--head-tr,
#usersubscription__table--head-tr,
#usertradehistory__table--head-tr,
#usercopytrade__table--head-tr {
    color: #000;
}

#userdeposit__table--head-tr th,
#userwithdrawal__table--head-tr th,
#usersubscription__table--head-tr th,
#usertradehistory__table--head-tr th,
#usercopytrade__table--head-tr th {
    text-align: center;
}

#userdeposit__table--body tr,
#withdrawal__table--body tr,
#subscription__table--body tr,
#usertradehistory__table--body tr,
#usercopytrade__table--body tr {
    border-top: 1px solid #000;
}

#userdeposit__table--body tr td,
#withdrawal__table--body tr td,
#subscription__table--body tr td,
#usertradehistory__table--body tr td,
#usercopytrade__table--body tr td {
    text-align: center;
}

#usertradehistory__table--body tr td {
    font-size: 1.5rem;
}

#usertradehistory__table--body tr td.profit,
#usertradehistory__table--body tr td.long,
#usertradehistory__table--body tr td.buy,
#usertradehistory__table--body tr td.gain,
#usercopytrade__table--body tr td.profit,
#usercopytrade__table--body tr td.long,
#usercopytrade__table--body tr td.buy,
#usercopytrade__table--body tr td.gain {
    color: #11e169;
}

#usertradehistory__table--body tr td.loss,
#usertradehistory__table--body tr td.sell,
#usertradehistory__table--body tr td.short,
#usertradehistory__table--body tr td.active,
#usercopytrade__table--body tr td.loss,
#usercopytrade__table--body tr td.sell,
#usercopytrade__table--body tr td.short,
#usercopytrade__table--body tr td.active {
    color: #ff614b;
}

#usertradehistory__table--body tr td.pending,
#usercopytrade__table--body tr td.pending {
    color: #d9d9d9;
}

#usertradehistory__table--body tr td.closed,
#usercopytrade__table--body tr td.closed {
    color: #11e169;
}

#usertradehistory__table--body tr td.suspended,
#usercopytrade__table--body tr td.suspended {
    color: #ff0000;
}

#usertradehistory__table--body tr td.stopped,
#usercopytrade__table--body tr td.stopped {
    color: #444;
}

#usertradehistory__table--body tr td.deleted,
#usercopytrade__table--body tr td.deleted {
    color: #000;
}

.deposit-status,
.withdrawal-status,
.subscription-status {
    text-transform: lowercase;
}
.deposit-status.approved,
.deposit-status.success,
.deposit-status.gain,
.withdrawal-status.approved,
.withdrawal-status.success,
.withdrawal-status.gain,
.subscription-status.approved,
.subscription-status.success,
.subscription-status.gain {
    color: #11e169;
}
.deposit-status.pending,
.withdrawal-status.pending,
.subscription-status.pending {
    color: #d9d9d9;
}
.deposit-status.rejected,
.deposit-status.failed,
.withdrawal-status.rejected,
.withdrawal-status.failed,
.subscription-status.rejected,
.subscription-status.failed {
    color: #ff614b;
}
.deposit-status.deleted,
.withdrawal-status.deleted,
.subscription-status.deleted {
    color: #000;
}

.table__link--link {
    color: #ff614b;
}
.table__link--link:focus,
.table__link--link:active {
    color: #ff614b;
}

.section__copytraders {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    padding: 1rem;
    overflow: hidden;
    background-color: #444;
}
@media (max-width: 27.6em) {
    .section__copytraders {
        padding: 0;
    }
}
@media (max-width: 27.6em) {
    .section__copytraders {
        background: none;
        padding: 0;
        border: 0;
    }
}
.section__copytraders--header {
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    gap: 3rem;
    padding: 1rem 2rem;
}
.section__copytraders--header-btns {
    display: flex;
    align-items: center;
}
.section__copytraders--header-btn {
    margin-left: auto;
    text-decoration: none;
    outline: none;
    border: 1px solid #f5deb3;
    color: inherit;
    background: none;
    padding: 0.4rem 1.2rem;
    font-size: inherit;
    border-radius: 100px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}
.section__copytraders--header-btn:focus,
.section__copytraders--header-btn:hover {
    background-color: #f5deb3;
    color: #000;
    border: 1px solid transparent;
}
.section__copytraders--header-forms {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
}
@media (max-width: 27.6em) {
    .section__copytraders--header-forms {
        flex-direction: column;
    }
}
.section__copytraders--header.single-trader {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2rem;
    flex-direction: column;
    align-items: flex-start;
}
.section__copytraders--header-right {
    min-width: 20rem;
    max-width: 32rem;
    width: 100%;
}
.section__copytraders--header-bio.single-trader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10rem;
}
@media (max-width: 51.18em) {
    .section__copytraders--header-bio.single-trader {
        flex-direction: column;
        gap: 3rem;
    }
}
.section__copytraders--btns-btn {
    cursor: pointer;
    text-decoration: none;
    font-size: 1.4rem;
    padding: 0.5rem 2rem;
    transition: all 0.3s;
    outline: none;
    border: none;
    background: none;
    color: inherit;
    text-transform: capitalize;
    border-radius: 100px;
}
.section__copytraders--btns-btn:focus,
.section__copytraders--btns-btn:hover {
    outline: none;
    border: none;
}
.section__copytraders--btns-btn.addCopier,
.section__copytraders--btns-btn.addTrade {
    border: 1px solid #f5deb3;
}
.section__copytraders--btns-btn.addCopier:focus,
.section__copytraders--btns-btn.addCopier:hover,
.section__copytraders--btns-btn.addTrade:focus,
.section__copytraders--btns-btn.addTrade:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #f5deb3;
    color: #000;
}
.section__copytraders--body {
    overflow-y: auto;
    height: 95%;
}
.section__copytraders--body * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.section__copytraders--body *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.section__copytraders--body *::-webkit-scrollbar-track {
    background: none;
}
.section__copytraders--body *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.section__copytraders--content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr;
    gap: 2rem;
    height: -webkit-fill-available;
    padding-bottom: 5rem;
}
@media (max-width: 64.56em) {
    .section__copytraders--content {
        grid-template-columns: 1fr 2fr;
    }
}
@media (max-width: 51.18em) {
    .section__copytraders--content {
        grid-template-columns: 1fr;
    }
}
.section__copytraders--content-data {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2rem;
}
.section__copytraders--content-stats {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 2rem;
}

.no-shadow {
    box-shadow: none;
}

.copy__traders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    row-gap: 2rem;
    column-gap: 1rem;
    justify-items: center;
    padding-bottom: 25rem;
}
@media (max-width: 87.5em) {
    .copy__traders {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 51.18em) {
    .copy__traders {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 41.37em) {
    .copy__traders {
        grid-template-columns: 1fr;
    }
}
.copy__traders--trader {
    background-color: rgba(0, 0, 0, 0.2);
    max-width: 60rem;
    min-width: 20rem;
    width: 95%;
    color: #f5deb3;
    border: 1px solid transparent;
    border: 2px solid rgba(217, 217, 217, 0.15);
    position: relative;
    transition: border 0.3s;
    cursor: pointer;
    border-radius: 10px;
}
.copy__traders--trader:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 97, 75, 0.2);
}
.copy__traders--trader-header {
    padding: 1.5rem;
    border-bottom: 2px solid #444;
}
.copy__traders--trader-content {
    padding: 1.5rem;
}
.copy__traders--trader-footer {
    border-top: 2px solid #444;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.trader__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.trader__header--bio {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.trader__header--bio-pic {
    height: 5rem;
    width: 5rem;
    padding: 0.5rem;
    border-radius: 100%;
    border: 2px solid #ff614b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trader__header--bio-pic.online {
    border-color: #11e169;
}
.trader__header--img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
    object-fit: cover;
}
.trader__header-username {
    font-size: 2rem;
    font-weight: 300;
}
.trader__header--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem auto 0 auto;
}
.trader__header--btns-btn {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    border: none;
    outline: none;
    color: inherit;
    border-radius: 100px;
    padding: 0.6rem 2rem;
    background: none;
    font-size: 1.4rem;
}
.trader__header--btns-btn:hover,
.trader__header--btns-btn:focus {
    outline: none;
    border: none;
}
.trader__header--btns-btn.update {
    background-color: rgba(255, 97, 75, 0.5);
    border: 1px solid transparent;
}
.trader__header--btns-btn.update:focus,
.trader__header--btns-btn.update:hover {
    border: 1px solid transparent;
    background-color: #ff614b;
}
.trader__header--btns-btn.delete {
    border: 1px solid #ff0000;
    color: #ff0000;
    font-weight: 500;
}
.trader__header--btns-btn.delete:focus,
.trader__header--btns-btn.delete:hover {
    border: 1px solid transparent;
    background-color: #ff0000;
    color: #fff;
}
.trader__header--copiers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 300;
    color: #d9d9d9;
}
.trader__header--copiers-count {
    display: flex;
    align-items: center;
}
.trader__header--copiers-limit {
    color: rgba(217, 217, 217, 0.8);
}
.trader__header--copiers-country {
    height: 30px;
    width: 30px;
    padding: 2px;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trader__header--copiers-flag {
    height: 50px;
    width: 30px;
    border-radius: 100%;
}
.trader__header--tradeid-id {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.trader__header--countryflag {
    height: 3rem;
    width: 3.8rem;
    overflow: hidden;
}
.trader__header--countryflag-img {
    height: 100%;
    width: 100%;
}

.copy-btn,
.trader__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    color: #f5deb3;
    transition: all 0.3s;
}
.copy-btn:hover,
.copy-btn:active,
.copy-btn:focus,
.trader__menu-btn:hover,
.trader__menu-btn:active,
.trader__menu-btn:focus {
    background: none;
    border: none;
    outline: none;
    color: #ff614b;
}

.trader__menu-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.trader__contents--personal,
.trader__contents--overview {
    margin-bottom: 3rem;
}

.trader__contents--header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.trader__contents--content-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.trader__contents--content-text {
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #c8c8c8;
    position: relative;
}

.trader__contents--content-value.gain {
    color: #11e169;
}

.trader__contents--content-value.loss {
    color: #ff614b;
}

.trader__contents--content-performance {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row: 1fr;
    gap: 1rem;
}

.trader__contents--content.single-trader div {
    margin-bottom: 2rem;
    cursor: pointer;
}

@media (max-width: 22.5em) {
    .trader__contents--pnl-title {
        font-size: 1.6rem;
    }
}

.trader__contents--roi,
.trader__contents--pnl-winrate {
    padding: 1rem;
    border-radius: 10px;
    border-left: 3px solid #ff614b;
    background-color: rgba(0, 0, 0, 0.4);
}

.trader__contents--roi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.trader__contents--roi-title {
    margin-bottom: 0.5rem;
}
.trader__contents--roi-value {
    font-size: 4rem;
}
.trader__contents--roi-value.gain {
    color: #11e169;
}
.trader__contents--roi-value.loss {
    color: #ff614b;
}

.trader__contents--pnl-winrate div:not(:last-child) {
    margin-bottom: 1rem;
}

.trader__contents--pnl-title {
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.trader__contents--pnl-value.gain {
    color: #11e169;
}

.trader__contents--pnl-value.loss {
    color: #ff614b;
}

.trader__contents--winrate-title {
    margin-bottom: 0.5rem;
    text-transform: capitalize;
}

.trader_status.active {
    color: #11e169;
}

.trader_status.suspended {
    color: #444;
}

.trader_status.blocked {
    color: #ff0000;
}

.header__contents--head {
    padding: 0.5rem;
    border-left: 4px solid #ff614b;
}

.btn_underline {
    background: none;
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    color: inherit;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.btn_underline:not(:last-child) {
    margin-right: 1rem;
}
.btn_underline:hover,
.btn_underline:active,
.btn_underline:focus {
    background: none;
    outline: none;
    border: none;
    color: #ff614b;
}

.trader_copier-mail {
    color: #ff614b;
}

.copytrader__info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    width: 100%;
    gap: 2rem;
}
@media (max-width: 51.18em) {
    .copytrader__info {
        grid-template-columns: repeat(2, 1fr);
    }
}
.copytrader__info--card {
    padding: 1rem;
    background-color: #444;
    text-align: center;
    border-radius: 10px;
    border-left: 2px solid #ff614b;
}
.copytrader__info--card-title {
    font-size: 1.5rem;
    text-transform: capitalize;
}
.copytrader__info--card-content {
    font-size: 1.5rem;
}

.copytraders__stats {
    margin-top: 0.5rem;
    height: 50rem;
    overflow-y: hidden;
}
.copytraders__stats--item {
    height: 100%;
    width: 100%;
    display: none;
}
.copytraders__stats--item.active {
    display: block;
}
.copytraders__stats--item.stats {
    background-color: #ff614b;
}
.copytraders__stats--item.profits {
    background-color: #11e169;
}

#copier_table {
    overflow-y: auto;
    background-color: #444;
    height: 100%;
}
#copier_table * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
#copier_table *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
#copier_table *::-webkit-scrollbar-track {
    background: none;
}
#copier_table *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

#copytrader__table-h {
    text-align: center;
    font-size: 1.5rem;
}

#copytrader__table-h th {
    background-color: #444;
    background: none;
}

.copier-position.long {
    color: #ff614b;
}

.copier-position.short {
    color: #11e169;
}

.copier-result.gain {
    color: #11e169;
}

.copier-result.loss {
    color: #ff614b;
}

#copier-theader th {
    text-align: center;
    font-weight: 400;
    background-color: #444;
    color: #f5deb3;
}

#copier-tbody tr {
    text-align: center;
}

#copier-tbody tr td {
    border-top: 1px solid #000;
}

.copier-pnl.gain {
    color: #11e169;
}

.copier-pnl.loss {
    color: #ff614b;
}

#copier--pnl {
    height: 100%;
    overflow-y: auto;
    background-color: #2a2b2c;
}
#copier--pnl * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
#copier--pnl *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
#copier--pnl *::-webkit-scrollbar-track {
    background: none;
}
#copier--pnl *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}

.copytrader__menu {
    position: absolute;
    padding: 2rem;
    background-color: #444;
    border: 1px solid #f5deb3;
    right: 0.5rem;
    top: 0.5rem;
    border-radius: 3px;
    z-index: 99;
    color: #f5deb3;
    padding-top: 4rem;
    display: none;
}
.copytrader__menu.active {
    display: block;
}
.copytrader__menu-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    transition: all 0.3s;
}
.copytrader__menu-btn:hover {
    color: #ff614b;
}
.copytrader__menu--content {
    margin-top: 1rem;
}
.copytrader__menu--list {
    list-style-type: none;
}
.copytrader__menu--item {
    margin-bottom: 1rem;
}
.copytrader__menu--link {
    text-decoration: none;
    color: #f5deb3;
}
.copytrader__menu--link:hover {
    color: #ff614b;
}

@media (max-width: 31.2em) {
    #copytrader__table-h .list__table--table-thd:last-child {
        display: none;
    }
}

@media (max-width: 31.2em) {
    #table_list-tbody .list_table-regdate:last-child {
        display: none;
    }
}

@media (max-width: 31.2em) {
    #copier-theader .list__table--table-thd:nth-child(3) {
        display: none;
    }
}

@media (max-width: 31.2em) {
    #copier-tbody tr .list__table--table-tbd:nth-child(3) {
        display: none;
    }
}

.copytrader_copy-btn,
.copytrader__open-link {
    padding: 0.4rem 1.3rem;
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
    transition: all 0.3s;
    text-decoration: none;
}
.copytrader_copy-btn:link,
.copytrader_copy-btn:focus,
.copytrader_copy-btn:hover,
.copytrader__open-link:link,
.copytrader__open-link:focus,
.copytrader__open-link:hover {
    border: none;
    outline: none;
}

.copytrader_copy-btn {
    border-left: 3px solid #ff614b;
    color: #f5deb3;
}
.copytrader_copy-btn:link,
.copytrader_copy-btn:focus,
.copytrader_copy-btn:hover {
    border-left: 3px solid transparent;
    color: #ff614b;
}

.copytrader__open-link {
    text-decoration: none;
    color: #f5deb3;
    transition: all 0.3s;
}
.copytrader__open-link:hover {
    color: #ff614b;
}

#copytraders_selector {
    margin-bottom: 0;
}

.section__deposits {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
}
@media (max-width: 37.5em) {
    .section__deposits {
        font-size: 1.5rem;
        padding: 0;
        border: none;
        padding-top: 3rem;
    }
}
.section__deposits--container {
    height: 100%;
    overflow-y: hidden;
    padding-bottom: 30rem;
}
.section__deposits--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section__deposits--header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.section__deposits--body {
    margin-bottom: 10rem;
}

.section__kyc {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
    padding-bottom: 15rem;
}
@media (max-width: 37.5em) {
    .section__kyc {
        font-size: 1.5rem;
        padding: 0;
        border: none;
        padding-top: 3rem;
    }
}
.section__kyc--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section__kyc--header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.section__withdrawals {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 2rem;
    overflow: hidden;
    padding-bottom: 15rem;
}
@media (max-width: 37.5em) {
    .section__withdrawals {
        font-size: 1.5rem;
        padding: 0;
        border: none;
        padding-top: 3rem;
    }
}
.section__withdrawals--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.section__withdrawals--header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.section__admindashboard {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    padding: 2rem 1rem;
    overflow-y: auto;
}

.admindashboard__summary {
    border: 1px solid rgba(217, 217, 217, 0.15);
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
    padding: 1rem 2rem;
    padding-bottom: 2rem;
    border-radius: 5px;
    margin-bottom: 2rem;
}
.admindashboard__summary:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.admindashboard__summary--header {
    margin-bottom: 2rem;
}
.admindashboard__summary--header-text {
    font-weight: 300;
}
@media (max-width: 35.68em) {
    .admindashboard__summary--header-text {
        font-size: 2rem;
    }
}
.admindashboard__summary--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 33.5em) {
    .admindashboard__summary--content {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .admindashboard__summary--content > div {
        margin-bottom: 2rem;
    }
}
.admindashboard__summary--content-heading {
    margin-bottom: 0.5rem;
}
@media (max-width: 33.5em) {
    .admindashboard__summary--content-heading {
        margin-bottom: 0;
        font-size: 1.8rem;
        font-weight: 600;
    }
}
.admindashboard__summary--content-title {
    text-transform: capitalize;
    font-weight: 200;
}
.admindashboard__summary--content-value {
    font-size: 3rem;
    font-weight: 300;
}
@media (max-width: 45.87em) {
    .admindashboard__summary--content-value {
        font-size: 2.5rem;
    }
}

.admindashboard__split {
    padding: 3rem 2rem;
    padding-bottom: 2rem;
    border-radius: 5px;
    margin-bottom: 2rem;
    border: 1px solid rgba(217, 217, 217, 0.15);
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
}
.admindashboard__split:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.admindashboard__split > div {
    margin-bottom: 3rem;
}
.admindashboard__split--content {
    margin-top: 3rem;
}

.admindashboard__cards {
    padding: 3rem 2rem;
    padding-bottom: 2rem;
    border-radius: 5px;
    margin-bottom: 2rem;
    border: 1px solid rgba(217, 217, 217, 0.15);
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.6);
}
.admindashboard__cards:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.admindashboard__cards--card {
    background-color: #000;
    padding: 3rem 2.5rem;
    max-width: 30rem;
    position: relative;
    border: 1px solid #f5deb3;
    border-radius: 5px;
}
.admindashboard__cards--card-list {
    list-style: none;
    margin-bottom: 10rem;
    font-weight: 300;
}
.admindashboard__cards--card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.admindashboard__cards--card-footer {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.split__content--heading-text {
    font-size: 2.5rem;
    font-weight: 300;
}
@media (max-width: 33.5em) {
    .split__content--heading-text {
        font-size: 2rem;
    }
}

.split__content--heading-summary {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 33.5em) {
    .split__content--heading-summary {
        padding: 2rem 0;
    }
}
@media (max-width: 22.5em) {
    .split__content--heading-summary {
        flex-wrap: wrap;
    }
    .split__content--heading-summary > div {
        margin-bottom: 0.8rem;
    }
}

.split__content--heading-sum-title {
    text-transform: capitalize;
    font-weight: 300;
    font-size: 1.8rem;
    color: rgba(245, 222, 179, 0.6);
}

.split__content--heading-sum-value {
    font-size: 2.2rem;
    font-weight: 300;
    margin-top: 0.5rem;
}
@media (max-width: 45.87em) {
    .split__content--heading-sum-value {
        font-size: 1.8rem;
    }
}
@media (max-width: 33.5em) {
    .split__content--heading-sum-value {
        margin-top: 0;
    }
}

.split__spliters {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 98%;
    margin: auto;
    margin-top: 2rem;
}
.split__spliters-split {
    height: 2rem;
    width: 100%;
    filter: blur(1px);
}
.split__spliters-split.credit,
.split__spliters-split.approved,
.split__spliters-split.profit {
    background-color: #11e169;
}
.split__spliters-split.failed,
.split__spliters-split.loss,
.split__spliters-split.debit {
    background-color: #ff614b;
}
.split__spliters-split.pending {
    background-color: #d9d9d9;
}
.split__spliters-split.investment {
    background-color: #593eff;
}
.split__spliters-split.return {
    background-color: #11e169;
}
@media (max-width: 51.18em) {
    .split__spliters-split {
        height: 2rem;
    }
}

.split__summaries {
    background-image: linear-gradient(
        to bottom,
        rgba(68, 68, 68, 0.8),
        rgba(0, 0, 0, 0.9)
    );
    background-blend-mode: screen;
    padding: 2rem;
    margin-top: -1rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 51.18em) {
    .split__summaries {
        margin-top: -1rem;
    }
}
@media (max-width: 22.5em) {
    .split__summaries {
        flex-wrap: wrap;
    }
    .split__summaries > div {
        margin-bottom: 0.8rem;
    }
}
.split__summaries--summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.split__summaries--summary-dot {
    height: 1rem;
    width: 1rem;
    filter: blur(0.5px);
    border-radius: 100%;
    margin-top: 0.8rem;
}
.split__summaries--summary-dot.credit,
.split__summaries--summary-dot.approved,
.split__summaries--summary-dot.profit {
    background-color: #11e169;
}
.split__summaries--summary-dot.failed,
.split__summaries--summary-dot.loss,
.split__summaries--summary-dot.debit {
    background-color: #ff614b;
}
.split__summaries--summary-dot.pending {
    background-color: #d9d9d9;
}
.split__summaries--summary-dot.investment {
    background-color: #593eff;
}
.split__summaries--summary-dot.return {
    background-color: #11e169;
}
.split__summaries--summary-heading {
    text-transform: capitalize;
    font-size: 2.2rem;
    font-weight: 300;
}
@media (max-width: 45.87em) {
    .split__summaries--summary-heading {
        font-size: 1.6rem;
    }
}
.split__summaries--summary-value {
    font-weight: 300;
    font-size: 3rem;
}
@media (max-width: 45.87em) {
    .split__summaries--summary-value {
        font-size: 2rem;
    }
}

.admindashboard__split--contents {
    position: relative;
    overflow-x: hidden;
}

.admindashboard__split--content {
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.1s;
}
.admindashboard__split--content.active {
    visibility: visible;
    opacity: 1;
    left: 0;
    position: relative;
}

#bal-depo-with,
#mam-bot,
#cpt-ust {
    background-color: rgba(68, 68, 68, 0.2);
    transition: all 0.3s;
}
#bal-depo-with:hover,
#mam-bot:hover,
#cpt-ust:hover {
    background-color: #444;
}

.cards--card-borders {
    width: 3rem;
    height: 2rem;
    border-radius: 100%;
    background-color: #000;
    position: absolute;
    border: 1px solid #f5deb3;
}

.cards--card-borders:nth-child(1) {
    left: -2rem;
}

.cards--card-borders:nth-child(2) {
    right: -2rem;
}

.cards--card-borders:nth-child(3) {
    left: -2rem;
    bottom: 4rem;
}

.cards--card-borders:nth-child(4) {
    right: -2rem;
    bottom: 4rem;
}

@media (max-width: 35.68em) {
    .admindashboard__split .header__contents--head {
        font-size: 1.8rem;
    }
}

.section__investmentsub {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 10rem;
}
@media (max-width: 27.6em) {
    .section__investmentsub {
        padding-bottom: 10rem;
    }
}
.section__investmentsub--form {
    position: sticky;
    top: 0;
    background-color: #444;
    padding: 3rem 2rem;
    z-index: 9999;
}
.section__investmentsub--header {
    padding: 2rem;
}
.section__investmentsub--header-btn {
    display: flex;
    margin-left: auto;
    padding: 0.5rem 1.6rem;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
    outline: none;
    font-size: 1.5rem;
    transition: all 0.3s;
}
.section__investmentsub--header-btn:focus,
.section__investmentsub--header-btn:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #f5deb3;
    color: #000;
}

.investmentsub__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
    padding: 2rem;
    row-gap: 4rem;
}
@media (max-width: 64.56em) {
    .investmentsub__cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4rem;
    }
}
@media (max-width: 45.87em) {
    .investmentsub__cards {
        column-gap: 2rem;
    }
}
@media (max-width: 37.5em) {
    .investmentsub__cards {
        grid-template-columns: 1fr;
    }
}

.investmentsub__card {
    padding: 2rem;
    min-width: 30rem;
    border: 1px solid #f5deb3;
    transition: all 0.3s;
}
@media (max-width: 22.5em) {
    .investmentsub__card {
        padding: 2rem 1rem;
    }
}
.investmentsub__card:hover {
    border-color: #ff614b;
}
.investmentsub__card--header-pri {
    font-weight: 300;
    font-size: 2.5rem;
    text-transform: capitalize;
}
.investmentsub__card--header-sec {
    text-transform: capitalize;
    font-weight: 600;
}
.investmentsub__card--header-process {
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.investmentsub__card--content {
    margin-top: 1rem;
}
.investmentsub__card--content-balance {
    margin: 3rem auto;
    background-color: #f5deb3;
    padding: 1rem;
    color: #000;
}
.investmentsub__card--content-return {
    margin: 3rem auto;
}
.investmentsub__card--content-addon {
    margin-top: 2rem;
}
.investmentsub__card--user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem auto;
}
.investmentsub__card--user-bio {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.investmentsub__card--user-avatar {
    text-decoration: none;
    height: 5rem;
    width: 5rem;
    border-radius: 100%;
    padding: 2px;
    border: 1px solid #ff614b;
    overflow: hidden;
}
.investmentsub__card--user-pic {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}
.investmentsub__card--user-mail {
    text-decoration: none;
    color: #f5deb3;
}
.investmentsub__card--user-status {
    font-size: 1.4rem;
    border-radius: 100px;
    padding: 0.5rem 1rem;
    background-color: #d9d9d9;
    color: #000;
}
.investmentsub__card--user-status.active {
    background-color: #f5deb3;
    color: #000;
}
.investmentsub__card--user-status.suspended {
    background-color: rgba(255, 0, 0, 0.4);
    color: #ff0000;
}
.investmentsub__card--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.investmentsub__card--btns-process {
    padding: 0.5rem 1.6rem;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
    outline: none;
    font-size: 1.5rem;
    transition: all 0.3s;
}
.investmentsub__card--btns-process:focus,
.investmentsub__card--btns-process:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #f5deb3;
    color: #000;
}
.investmentsub__card--btns-btn {
    padding: 0.5rem 1.6rem;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    outline: none;
    margin-top: 3rem;
    font-size: 1.5rem;
    transition: all 0.3s;
}
.investmentsub__card--btns-btn:focus,
.investmentsub__card--btns-btn:hover {
    border: none;
    outline: none;
}
.investmentsub__card--btns-btn.open {
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
}
.investmentsub__card--btns-btn.open:focus,
.investmentsub__card--btns-btn.open:hover {
    border: 1px solid transparent;
    outline: none;
    background-color: #f5deb3;
    color: #000;
}
.investmentsub__card--btns-btn.suspend {
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
}
.investmentsub__card--btns-btn.suspend:focus,
.investmentsub__card--btns-btn.suspend:hover {
    border: 1px solid transparent;
    outline: none;
    background-color: #ff0000;
    color: #fff;
}

.investmentsub__card:nth-child(3n + 1) {
    border-top: 5px solid #ff614b;
    border-color: #ff614b;
}

.investmentsub__card:nth-child(3n + 2) {
    border-top: 5px solid #11e169;
    border-color: #11e169;
}

.investmentsub__card:nth-child(3n + 3) {
    border-top: 5px solid #593eff;
    border-color: #593eff;
}

.subcontent__card--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: rgba(245, 222, 179, 0.2);
    color: #fff;
}
.subcontent__card--item:not(:last-child) {
    margin-bottom: 1rem;
}

.subcontent__card--balance-title {
    font-weight: 400;
}
@media (max-width: 27.6em) {
    .subcontent__card--balance-title {
        font-size: 1.6rem;
    }
}

.subcontent__card--balance-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.subcontent__card--balance-curr {
    font-weight: 600;
}

.subcontent__card--balance-bAmount {
    font-size: 4rem;
}
@media (max-width: 27.6em) {
    .subcontent__card--balance-bAmount {
        font-weight: 600;
        font-size: 4.5rem;
    }
}

.subcontent__card--return-title {
    font-weight: 400;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
}
@media (max-width: 27.6em) {
    .subcontent__card--return-title {
        margin-bottom: 1rem;
    }
}

.subcontent-return-span {
    font-weight: 300;
}

.subcontent__card--addon-title {
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.subcontent__card--addon-table {
    margin-top: 1.5rem;
    max-height: 20rem;
    overflow-y: auto;
}

#subaddon__table {
    text-align: center;
}
#subaddon__table > thead > tr {
    background-color: #f5deb3;
    color: #000;
}
#subaddon__table > thead > tr > th {
    font-weight: 500;
}

.total_cap,
.total_addon {
    background-color: #f5deb3;
    color: #000;
    font-weight: 500;
}

.addInveBtn {
    background-color: #000;
    color: #fff;
    font-size: 1.3rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.3s;
}
.addInveBtn:active,
.addInveBtn:hover,
.addInveBtn:focus {
    background-color: #f5deb3;
    color: #000;
}

.section__copying {
    overflow-y: auto;
    border: 2px solid rgba(217, 217, 217, 0.15);
    height: 100%;
    padding-bottom: 5rem;
}
.section__copying.sec-single-copy {
    padding-bottom: 0;
}
.section__copying--form {
    padding: 2rem;
    margin-bottom: 2rem;
    position: sticky;
    top: 0;
    background-color: #444;
}
.section__copying-head {
    padding: 2rem;
}
.section__copying--heading {
    background-color: #fff;
    color: #fff;
    border-top: 4px solid #ff614b;
    border-radius: 10px;
    border-bottom: 2px solid #444;
}
.section__copying--heading.stopped {
    border-top-color: #f5deb3;
}
.section__copying--heading.active {
    border-top-color: #ff614b;
}
.section__copying--heading.deleted {
    border-top-color: #000;
}
.section__copying--heading.suspended {
    border-top-color: #ff0000;
}
.section__copying--heading.closed {
    border-top-color: #444;
}
.section__copying--heading.pending {
    border-top-color: #d9d9d9;
}
.section__copying--heading-top {
    padding: 2rem;
}
.section__copying--heading-bottom {
    padding: 2rem;
}
.section__copying--content {
    padding: 2rem;
    margin: 4rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    column-gap: 2.5rem;
    row-gap: 3.5rem;
    justify-items: center;
    padding-bottom: 10rem;
}
.section__copying--content.single-copying {
    padding-bottom: 0;
    justify-items: space-between;
    grid-template-columns: auto 4fr;
    column-gap: 2rem;
}
@media (max-width: 51.18em) {
    .section__copying--content.single-copying {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
}
.section__copying--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10rem;
}
.section__copying--btns-btn {
    cursor: pointer;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    text-decoration: none;
    color: inherit;
    background: none;
    outline: none;
    border: none;
    transition: all 0.3s;
}
.section__copying--btns-btn:focus,
.section__copying--btns-btn:hover {
    outline: none;
    border: none;
}
.section__copying--btns-btn.delete {
    border: 1px solid #ff0000;
    color: #ff0000;
    font-weight: 500;
}
.section__copying--btns-btn.delete:focus,
.section__copying--btns-btn.delete:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #ff0000;
    color: #fff;
}

.copying__total,
.copying__trades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-template-rows: auto;
    gap: 1rem;
}
.copying__total--content,
.copying__trades--content {
    background-color: #fff;
    color: #000;
    padding: 2rem;
    width: 100%;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.1s;
}
.copying__total--content:hover,
.copying__trades--content:hover {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.copying__total--content-header,
.copying__trades--content-header {
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center;
}
.copying__total--content-num,
.copying__trades--content-num {
    font-size: 2.4rem;
    font-weight: 300;
    text-align: center;
    letter-spacing: 1.5px;
}

.copying__card {
    border: 1px solid #898484;
    border-top: 5px solid #ff614b;
    border-radius: 10px;
    background-color: #fcfcfc;
    color: #000;
    max-width: 50rem;
    min-width: 40rem;
    width: 100%;
}
.copying__card.stopped {
    border-top-color: #f5deb3;
}
.copying__card.active {
    border-top-color: #ff614b;
}
.copying__card.deleted {
    border-top-color: #000;
}
.copying__card.suspended {
    border-top-color: #ff0000;
}
.copying__card.closed {
    border-top-color: #444;
}
.copying__card.pending {
    border-top-color: #d9d9d9;
}
.copying__card--header {
    border-bottom: 1px solid #dad1d1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}
.copying__card--header-heading {
    font-size: 2rem;
    font-weight: 400;
}
.copying__card--header-days {
    font-size: 2rem;
    font-weight: 500;
}
.copying__card--head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    color: #000;
}
.copying__card--head-style {
    padding: 0.5rem 1rem;
    border-left: 5px solid #000;
    text-transform: capitalize;
    font-weight: 500;
}
.copying__card--trader {
    padding: 2rem;
    border-bottom: 1px solid #dad1d1;
    background-color: #fbf6f6;
    color: #000;
}
.copying__card--trader.copier {
    background-color: #d9d9d9;
}
.copying__card--trader-content {
    margin-top: 2rem;
}
.copying__card--trader-content.copier {
    margin-top: 0;
}
.copying__card--trader-profile,
.copying__card--trader-bio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #000;
}
.copying__card--trader-bio {
    gap: 1rem;
    color: #000;
}
.copying__card--trader-pic {
    border-radius: 100%;
    height: 6rem;
    width: 6rem;
    border: 1px solid #000;
    padding: 3px;
}
.copying__card--trader-img {
    border-radius: 100%;
    height: 100%;
    width: 100%;
}
.copying__card--trader-username {
    font-size: 1.6rem;
    font-weight: 500;
}
.copying__card--trader-id {
    font-size: 1.4rem;
    font-weight: 500;
}
.copying__card--trader-txt {
    background-color: #d9d9d9;
    border: 1px solid #000;
    color: #000;
    border-top: 3px solid #000;
    padding: 0.5rem 3rem;
    border-radius: 5px;
    text-transform: capitalize;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.copying__card--trader-txt:hover {
    border-top: 1px solid #000;
}
.copying__card--trader-performance-txt {
    font-size: 1.4rem;
}
.copying__card--trader-assets {
    margin-top: 2rem;
}
.copying__card--trader-equity,
.copying__card--trader-margin {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #000;
}
@media (max-width: 22.5em) {
    .copying__card--trader-equity,
    .copying__card--trader-margin {
        flex-direction: column;
    }
}
.copying__card--copier {
    padding: 2rem;
    border-bottom: 1px solid #dad1d1;
    background-color: #fff;
}
.copying__card--copier-equity,
.copying__card--copier-margin,
.copying__card--copier-pnl,
.copying__card--copier-roi {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.copying__card--perf {
    padding: 2rem;
    border-bottom: 1px solid #dad1d1;
    background-color: #fff;
}
.copying__card--seperate {
    border: 1px solid #000;
    border-top: 3px solid #000;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    width: 100%;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s;
}
.copying__card--seperate:hover {
    border-top: 1px solid #000;
}
.copying__card--seperate-heading {
    font-weight: 400;
    text-transform: capitalize;
}
.copying__card--seperate-value {
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: capitalize;
}
.copying__card--list {
    color: #000;
}
.copying__card--list-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.copying__card--list-list:not(:last-child) {
    margin-bottom: 1rem;
}
.copying__card--list-item {
    font-weight: 300;
}
.copying__card--list-value {
    font-size: 2rem;
    font-weight: 500;
}
.copying__card--action {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.copying__card--action-btn {
    padding: 0.5rem 1rem;
    outline: none;
    border: none;
    background: none;
    transition: all 0.2s;
    color: #fff;
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 10px;
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.4);
}
.copying__card--action-btn:hover,
.copying__card--action-btn:focus {
    border: none;
    outline: none;
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.copying__card--action-btn.stop-copy {
    background-color: #a08b8b;
}
.copying__card--action-btn.withdraw-copy {
    background-color: #ff614b;
}
.copying__card--action-btn.open-copy {
    background-color: #ff614b;
}

.copying__header--performance-txt {
    font-size: 1.4rem;
}

.copying__card--head-btn {
    padding: 0.5rem 1rem;
    outline: none;
    border: none;
    border-radius: 10px;
    background-color: #a08b8b;
    color: #fff;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.4);
}
.copying__card--head-btn:hover,
.copying__card--head-btn:focus,
.copying__card--head-btn:active {
    border: none;
    outline: none;
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.copying__performance {
    border: 1px solid #898484;
    border-top: 5px solid #ff614b;
    border-radius: 10px;
    background-color: #fcfcfc;
    width: 100%;
    padding: 2rem;
}
.copying__performance.perf-single {
    background-color: #333131;
    border-color: #d9d9d9;
    border-top-color: #ff614b;
}
.copying__performance.stopped {
    border-top-color: #f5deb3;
}
.copying__performance.active {
    border-top-color: #ff614b;
}
.copying__performance.deleted {
    border-top-color: #000;
}
.copying__performance.suspended {
    border-top-color: #ff0000;
}
.copying__performance.closed {
    border-top-color: #444;
}
.copying__performance.pending {
    border-top-color: #d9d9d9;
}
.copying__performance--header {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.copying__performance--status-text {
    border-radius: 100px;
    padding: 0.5rem 1.6rem;
    font-size: 1.5rem;
    color: #d9d9d9;
}
.copying__performance--status-text.pending {
    background-color: #d9d9d9;
    color: #000;
}
.copying__performance--status-text.active {
    background-color: #ff614b;
    color: #fff;
}
.copying__performance--status-text.stopped {
    background-color: #f5deb3;
    color: #000;
}
.copying__performance--status-text.closed {
    background-color: #898484;
    color: #fff;
}
.copying__performance--status-text.deleted {
    background-color: #000;
    color: #fff;
}
.copying__performance--status-text.suspended {
    background-color: #ff0000;
    color: #fff;
}
.copying__performance--table {
    margin-top: 2rem;
    overflow-y: auto;
    max-height: 64rem;
    padding-bottom: 10rem;
}
.copying__performance--table-table {
    text-align: center;
    color: #000;
}

#copying__performance-thr {
    background-color: #ff614b;
    color: #fff;
}
@media (max-width: 31.2em) {
    #copying__performance-thr > th {
        padding: 1rem;
        font-weight: 500;
    }
    #copying__performance-thr > th:last-child {
        display: none;
    }
}
@media (max-width: 22.5em) {
    #copying__performance-thr > th {
        font-size: 1.4rem;
    }
}

#copying__performance-tbody tr {
    background-color: #584f4f;
    color: #fff;
    border-top: 2px solid #fff;
    text-transform: uppercase;
}
@media (max-width: 31.2em) {
    #copying__performance-tbody tr > td:last-child {
        display: none;
    }
}
@media (max-width: 22.5em) {
    #copying__performance-tbody tr > td {
        font-size: 1.4rem;
    }
}

.short,
.sell {
    color: #ff614b;
    text-transform: lowercase;
}

.long,
.buy {
    color: #11e169;
    text-transform: lowercase;
}

#perf-white {
    color: #fff;
    border-left-color: #fff;
}

@media (max-width: 22.5em) {
    .copying_trade_position {
        display: none;
    }
}

.section__viewdeposit {
    height: 98%;
    width: 100%;
    overflow-y: auto;
    border: 1px solid rgba(217, 217, 217, 0.15);
}
.section__viewdeposit--item {
    display: flex;
    align-self: center;
    justify-content: center;
    padding: 2rem;
    padding-bottom: 10rem;
}
@media (max-width: 31.2em) {
    .section__viewdeposit--item {
        padding: 1rem;
        padding-bottom: 10rem;
    }
}
.section__viewdeposit--card {
    border-top: 5px solid #ff614b;
    border-radius: 10px;
    overflow: hidden;
    max-width: 65rem;
    width: 100%;
    min-width: 30rem;
    background-color: #fcfcfc;
    color: rgba(0, 0, 0, 0.9);
}
.section__viewdeposit--card-header {
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dad1d1;
}
.section__viewdeposit--card-date {
    font-size: 2rem;
    font-weight: 400;
    color: #7f7373;
}
.section__viewdeposit--card-status {
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 1.4rem;
    color: #fff;
}
.section__viewdeposit--card-status.status-pending,
.section__viewdeposit--card-status.status-awaiting {
    background-color: #a08b8b;
}
.section__viewdeposit--card-status.status-success,
.section__viewdeposit--card-status.status-verified {
    background-color: #07ae3b;
}
.section__viewdeposit--card-status.status-failed,
.section__viewdeposit--card-status.status-rejected {
    background-color: #e70505;
}
.section__viewdeposit--card-content {
    padding: 2rem;
    border-bottom: 1px solid #dad1d1;
}
.section__viewdeposit--amount {
    padding: 2rem;
    background-color: #d9d9d9;
    margin: auto;
    border-radius: 10px;
}
.section__viewdeposit--amount-title {
    font-size: 1.8rem;
    color: #fff;
}
.section__viewdeposit--amount-value {
    font-size: 5rem;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-align: center;
    margin-top: 1rem;
}
.section__viewdeposit--methods {
    padding: 2rem;
}
.section__viewdeposit--method,
.section__viewdeposit--tag,
.section__viewdeposit--details-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
.section__viewdeposit--method-title,
.section__viewdeposit--tag-title,
.section__viewdeposit--details-type-title {
    color: #7f7373;
    text-transform: capitalize;
    font-size: 1.5rem;
}
.section__viewdeposit--method-value,
.section__viewdeposit--tag-value,
.section__viewdeposit--details-type-value {
    color: #7f7373;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #7f7373;
    font-size: 1.7rem;
}
.section__viewdeposit--method-link,
.section__viewdeposit--tag-link,
.section__viewdeposit--details-type-link {
    color: #ff614b;
    text-decoration-color: #ff614b;
}
.section__viewdeposit--tag-value {
    text-transform: capitalize;
}
.section__viewdeposit--details-title {
    color: #7f7373;
    font-size: 1.5rem;
}
.section__viewdeposit--details-value {
    color: #7f7373;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: #7f7373;
    font-size: 1.7rem;
}
.section__viewdeposit--details.crypto-method,
.section__viewdeposit--details.bank-method {
    display: none;
}
.section__viewdeposit--details.crypto-method.active,
.section__viewdeposit--details.bank-method.active {
    display: block;
}
.section__viewdeposit--proof-title {
    margin-bottom: 1rem;
    margin-top: 2rem;
    text-transform: capitalize;
    color: #7f7373;
}
.section__viewdeposit--proof-img {
    padding: 0.5rem;
    border: 2px solid #dad1d1;
    width: 100%;
    height: 50rem;
    margin: auto;
}
.section__viewdeposit--proof-pic {
    height: 100%;
    width: 100%;
}
.section__viewdeposit--footer {
    background-color: #d9d9d9;
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 0 0 10px 10px;
}
.section__viewdeposit--footer-btn {
    display: inline-block;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    font-size: 1.6rem;
    color: #fff;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.4);
}
.section__viewdeposit--footer-btn:hover,
.section__viewdeposit--footer-btn:active,
.section__viewdeposit--footer-btn:focus {
    border: none;
}
.section__viewdeposit--footer-btn.edit-deposit {
    background-color: #a08b8b;
}
.section__viewdeposit--footer-btn.edit-deposit:hover,
.section__viewdeposit--footer-btn.edit-deposit:focus {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.section__viewdeposit--footer-btn.back-btn {
    text-decoration: none;
    color: #7f7373;
    margin: 0;
    padding: 0.6rem 3rem;
}
.section__viewdeposit--footer-btn.back-btn:hover,
.section__viewdeposit--footer-btn.back-btn:focus {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.section__viewdeposit--footer-btn.approve-btn {
    background-color: #008000;
    color: #fff;
}
.section__viewdeposit--footer-btn.approve-btn:hover,
.section__viewdeposit--footer-btn.approve-btn:focus {
    background-color: #11e169;
    color: #000;
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}
.section__viewdeposit--footer-btn.delete-deposit {
    background-color: #e70505;
}
.section__viewdeposit--footer-btn.delete-deposit:hover,
.section__viewdeposit--footer-btn.delete-deposit:focus {
    box-shadow: 0rem 0.5rem 2rem rgba(0, 0, 0, 0.3);
}

.section__managedaccount {
    padding: 2rem;
    height: 100%;
    width: 100%;
}
@media (max-width: 22.5em) {
    .section__managedaccount {
        padding: 1rem;
    }
}
.section__managedaccount--select {
    margin-bottom: 1rem;
}
.section__managedaccount--header {
    margin-bottom: 2rem;
    padding: 1rem 2rem;
}
@media (max-width: 27.6em) {
    .section__managedaccount--header {
        padding: 1rem 0;
    }
}
.section__managedaccount--paragraph {
    font-size: 2rem;
    display: none;
}
.section__managedaccount--paragraph.active {
    display: block;
}
.section__managedaccount--body {
    width: 100%;
    max-height: 76vh;
    overflow-y: auto;
    padding-bottom: 15rem;
}
.section__managedaccount--cards {
    display: none;
    margin: auto;
    padding-bottom: 15rem;
}
.section__managedaccount--cards.active {
    display: grid;
    column-gap: 2rem;
    row-gap: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
    justify-content: center;
}

.management__single {
    height: 100%;
    width: 100%;
    padding: 2rem;
    overflow-y: auto;
    padding-bottom: 10rem;
    color: #fff;
    margin: 0 auto;
}
@media (max-width: 31.2em) {
    .management__single {
        padding-bottom: 15rem;
    }
}
.management__single--heading-primary {
    font-weight: 400;
    font-size: 3rem;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}
@media (max-width: 22.5em) {
    .management__single--heading-primary {
        font-size: 2rem;
    }
}
.management__single--heading-secondary {
    font-weight: 600;
    text-transform: uppercase;
}
.management__single--heading-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.management__single--heading-btn {
    outline: none;
    border: 1px solid #f5deb3;
    background: none;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.4rem;
    color: #f5deb3;
    cursor: pointer;
    transition: all 0.3s;
}
.management__single--heading-btn:focus,
.management__single--heading-btn:hover {
    border: 1px solid transparent;
    background-color: #f5deb3;
    color: #000;
}
.management__single--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.management__single--header-status {
    display: flex;
    gap: 2rem;
    align-items: center;
}
.management__single--header-btn {
    outline: none;
    border: none;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.4rem;
    background-color: rgba(255, 97, 75, 0.5);
    color: #ff614b;
    cursor: pointer;
    transition: all 0.3s;
}
.management__single--header-btn:hover,
.management__single--header-btn:focus {
    border: none;
    outline: none;
    background-color: #ff614b;
    color: #fff;
}
.management__single--header-btn.deposit {
    background-color: rgba(17, 225, 105, 0.5);
    color: #11e169;
}
.management__single--header-btn.deposit:hover,
.management__single--header-btn.deposit:focus {
    border: none;
    outline: none;
    background-color: #11e169;
    color: #000;
}
.management__single--header-btn.withdraw {
    background-color: rgba(89, 62, 255, 0.5);
    color: #fff;
}
.management__single--header-btn.withdraw:hover,
.management__single--header-btn.withdraw:focus {
    border: none;
    outline: none;
    background-color: #593eff;
    color: #fff;
}
.management__single--header-btn.update {
    border: 1px solid #f5deb3;
    background: none;
    color: #f5deb3;
}
.management__single--header-btn.update:hover,
.management__single--header-btn.update:focus {
    border: 1px solid transparent;
    outline: none;
    background-color: #f5deb3;
    color: #000;
}
.management__single--status {
    font-size: 1.4rem;
    text-transform: lowercase;
    border-radius: 100px;
    padding: 0.8rem 2rem;
    background-color: #444;
}
.management__single--status.awaiting {
    color: #d9d9d9;
}
.management__single--status.pending {
    background-color: #d9d9d9;
    color: #000;
}
.management__single--status.active {
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
}
.management__single--status.completed {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
}
.management__single--status.closed {
    background-color: rgba(89, 62, 255, 0.2);
    color: #593eff;
}
.management__single--footer {
    margin-top: 3rem;
}
.management__single--footer-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.management__single--footer-btn {
    outline: none;
    border: none;
    padding: 0.6rem 2rem;
    border-radius: 100px;
    text-decoration: none;
    font-size: 1.4rem;
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
    cursor: pointer;
    transition: all 0.3s;
}
.management__single--footer-btn:hover,
.management__single--footer-btn:focus {
    border: none;
    outline: none;
    background-color: #ff614b;
    color: #fff;
}
.management__single--footer-btn.delete {
    background-color: rgba(255, 0, 0, 0.4);
    color: #fff;
}
.management__single--footer-btn.delete:hover,
.management__single--footer-btn.delete:focus {
    border: none;
    outline: none;
    background-color: #ff0000;
}
.management__single--footer-btn.stop {
    border: 1px solid #f5deb3;
    color: #f5deb3;
    background: none;
}
.management__single--footer-btn.stop:hover,
.management__single--footer-btn.stop:focus {
    border: 1px solid transparent;
    outline: none;
    background-color: #f5deb3;
    color: #000;
}
.management__single--footer-btn.activate {
    border: 1px solid #ff614b;
    color: #ff614b;
    background: none;
}
.management__single--footer-btn.activate:hover,
.management__single--footer-btn.activate:focus {
    border: 1px solid transparent;
    outline: none;
    background-color: #ff614b;
    color: #fff;
}
.management__single--footer-btn.close {
    border: 1px solid #d9d9d9;
    color: #d9d9d9;
    background: none;
}
.management__single--footer-btn.close:hover,
.management__single--footer-btn.close:focus {
    border: 1px solid transparent;
    outline: none;
    background-color: #d9d9d9;
    color: #000;
}
.management__single--content-header {
    margin-bottom: 3rem;
}
.management__single--items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 3rem;
    row-gap: 6rem;
    height: auto;
}
@media (max-width: 45.87em) {
    .management__single--items {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}
.management__single--items.expand {
    grid-template-columns: 1fr;
}
.management__single--items-header {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 45.87em) {
    .management__single--items-header {
        font-size: 2rem;
    }
}
@media (max-width: 22.5em) {
    .management__single--items-header {
        font-size: 1.5rem;
    }
}
.management__single--items:last-child {
    margin-top: 3rem;
}
@media (max-width: 45.87em) {
    .management__single--items:last-child {
        margin-top: 5rem;
    }
}
.management__single--items-group {
    overflow: hidden;
}
.management__single--items-group.balance {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}
.management__single--items-group.transactions {
    border-bottom: 0.5px solid #ff614b;
}
.management__single--items-single {
    padding: 2rem;
    background-color: #d9d9d9;
    color: #000;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}
.management__single--items-single:not(:last-child) {
    margin-bottom: 1rem;
}
@media (max-width: 45.87em) {
    .management__single--items-single {
        font-weight: 400;
    }
}
@media (max-width: 22.5em) {
    .management__single--items-single {
        font-size: 1.5rem;
    }
}
.management__single--items-single.primary {
    background-color: #ff614b;
    color: #fff;
}
@media (max-width: 22.5em) {
    .management__single--items-value {
        font-weight: 500;
    }
}
.management__single--balance {
    padding: 2rem;
    background-color: #ff614b;
    color: #fff;
    font-weight: 400;
    font-size: 1.8rem;
    margin-bottom: 3rem;
}
.management__single--balance-values {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.management__single--balance-currency {
    font-size: 2rem;
}
.management__single--balance-amount {
    font-size: 6rem;
}
@media (max-width: 22.5em) {
    .management__single--balance-amount {
        font-size: 4.5rem;
    }
}
.management__single--table {
    max-height: 19.2rem;
    overflow-y: auto;
}
@media (max-width: 45.87em) {
    .management__single--table {
        max-height: 40rem;
    }
}
.management__single-status {
    display: inline-block;
    font-size: 1.4rem;
    padding: 0.2rem 1rem;
    border-radius: 5px;
}
.management__single-status.success {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
}
.management__single-status.pending {
    background-color: rgba(217, 217, 217, 0.4);
    color: #d9d9d9;
}
.management__single-status.awaiting {
    background-color: #593eff;
    color: #fff;
}
.management__single-status.failed {
    background-color: rgba(255, 0, 0, 0.4);
    color: #ff0000;
}
.management__single-btn {
    border-radius: 5px;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    border: none;
    font-size: 1.4rem;
    background-color: rgba(255, 97, 75, 0.2);
    color: #ff614b;
    display: inline-block;
    min-width: 10rem;
    transition: all 0.3s;
}
.management__single-btn:hover,
.management__single-btn:focus {
    border: none;
    outline: none;
    background-color: #ff614b;
    color: #fff;
}
.management__single-btn.view {
    background-color: rgba(17, 225, 105, 0.2);
    color: #11e169;
    border: none;
    outline: none;
}
.management__single-btn.view:hover,
.management__single-btn.view:focus {
    border: none;
    outline: none;
    background-color: #11e169;
    color: #000;
}
.management__single-btn.viewAwaiting {
    background-color: rgba(89, 62, 255, 0.2);
    color: #593eff;
    border: none;
    outline: none;
}
.management__single-btn.viewAwaiting:hover,
.management__single-btn.viewAwaiting:focus {
    border: none;
    outline: none;
    background-color: #593eff;
    color: #fff;
}

#management__single--table-thead {
    background-color: #ff614b;
    color: #fff;
}

#management__single--table-thr,
.management__single--table-tbr {
    text-align: center;
}
@media (max-width: 45.87em) {
    #management__single--table-thr,
    .management__single--table-tbr {
        font-weight: 400;
    }
}
@media (max-width: 22.5em) {
    #management__single--table-thr,
    .management__single--table-tbr {
        font-size: 1.5rem;
    }
}

@media (max-width: 27.6em) {
    #management__single--table-thr th:nth-child(3) {
        display: none;
    }
}

@media (max-width: 27.6em) {
    .management__single--table-tbd:nth-child(3) {
        display: none;
    }
}

.new__user {
    border: 1px solid rgba(217, 217, 217, 0.15);
    height: 100%;
    padding: 2rem;
}
.new__user--content-title {
    font-size: 2.4rem;
    text-transform: uppercase;
    font-weight: 500;
}
.new__user--content-form {
    height: 85vh;
    overflow-y: auto;
}
.new__user--form-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 10rem;
}
.new__user--form-img {
    width: 8rem;
    height: 8rem;
    border: 1px solid #ff614b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 100%;
}
.new__user--form-pic {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}
.new__user--form-title {
    font-size: 2.2rem;
    font-weight: 500;
    text-transform: capitalize;
    color: #ff614b;
}
.new__user--form-inputs {
    margin-top: 3rem;
}
.new__user--form-inputs.bio-group-inputs,
.new__user--form-inputs.account-group-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 1.5rem;
    grid-template-rows: auto;
}
@media (max-width: 35.68em) {
    .new__user--form-inputs.bio-group-inputs,
    .new__user--form-inputs.account-group-inputs {
        grid-template-columns: 1fr;
    }
}
.new__user--balance {
    padding: 2rem;
    background-color: #ff614b;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
}
.new__user--balance-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.new__user--balance-amount {
    font-size: 5rem;
    font-weight: 300;
}
.new__user--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.new__user--btns-btn {
    cursor: pointer;
    padding: 1rem 3rem;
    outline: none;
    text-decoration: none;
    border: 1px solid rgba(17, 225, 105, 0.2);
    background-color: rgba(17, 225, 105, 0.2);
    color: #fff;
    transition: all 0.3s;
}
.new__user--btns-btn:focus,
.new__user--btns-btn:hover {
    border: 1px solid transparent;
    background-color: #11e169;
    color: #000;
    outline: none;
}
.new__user--btns-btn.back {
    border: 1px solid #fff;
    background: none;
}
.new__user--btns-btn.back:focus,
.new__user--btns-btn.back:hover {
    outline: none;
    border: 1px solid transparent;
    background-color: #fff;
    color: #000;
}

.new__user--form {
    max-width: 80rem;
    margin: 3rem auto;
    border-top: 5px solid #ff614b;
}
.new__user--form-bio {
    padding: 3rem;
    background-color: #2a2222;
}
.new__user--form-account {
    padding: 3rem;
    background-color: #2a2222;
}
.new__user--form-security {
    padding: 3rem;
    background-color: #2a2222;
}
.new__user--form-input {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.newuser__group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2rem;
}
.newuser__group-error {
    color: #ff614b;
    font-size: 1.4rem;
    display: none;
}
.newuser__group-error.active {
    display: flex;
}

.newuser__group input {
    padding: 1.3rem;
    border: 1px solid #fff;
    outline: none;
    font-size: inherit;
    color: inherit;
    background: none;
}
.newuser__group input:focus,
.newuser__group input:hover {
    border-color: #ff614b;
    outline: none;
}

#deposit,
#withdrawal,
#profit,
#bonus,
#edit_invest_balance,
#edit_invest_current_return,
#edit_invest_paid_capital,
#edit_invest_pending_capital,
#edit_invest_target_return,
#edit_invest_good_performance,
#edit_invest_bad_performance,
#edit_invest_addOn_paid,
#edit_invest_addOn_pending {
    border: none;
}

#pic_fillname {
    font-size: 1.4rem;
    margin-top: 1rem;
}

.subUser_mail {
    text-decoration: none;
    color: inherit;
}

.withCurrencyInput input {
    border: none !important;
}

.img_link {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

.admin__settings {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: 15rem;
}
.admin__settings * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.admin__settings *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.admin__settings *::-webkit-scrollbar-track {
    background: none;
}
.admin__settings *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.admin__settings--content {
    margin-top: 3rem;
}
.admin__settings--content-item {
    display: none;
}
.admin__settings--content-item.active {
    display: block;
}
.admin__settings--content-site {
    border: 1px dotted #f5deb3;
    border-style: dashed;
    padding: 3rem;
}
@media (max-width: 37.5em) {
    .admin__settings--content-site {
        padding: 0;
        border: none;
    }
}
.admin__settings--content-preference {
    margin-top: 10rem;
    border: 1px dotted #f5deb3;
    border-style: dashed;
    padding: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 6rem;
    row-gap: 3rem;
}
@media (max-width: 37.5em) {
    .admin__settings--content-preference {
        padding: 0;
        border: none;
    }
}
@media (max-width: 37.5em) {
    .admin__settings--content-preference {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 37.5em) {
    .admin__settings--content-preference {
        row-gap: 6rem;
    }
}
.admin__settings--content-checks {
    margin-top: 10rem;
    border: 1px dotted #f5deb3;
    border-style: dashed;
    padding: 3rem;
}
@media (max-width: 37.5em) {
    .admin__settings--content-checks {
        padding: 0;
        border: none;
    }
}
.admin__settings--content-payments {
    height: 80svh;
    overflow-x: auto;
    overflow-y: auto;
    padding-bottom: 15rem;
}

@media (max-width: 27.6em) {
    .large-sc {
        display: none;
    }
}

.siteform__setting {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    column-gap: 6rem;
    row-gap: 1.5rem;
}
@media (max-width: 37.5em) {
    .siteform__setting {
        grid-template-columns: 1fr;
    }
}
.siteform__setting--input {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5rem;
}
.siteform__setting--input label {
    margin-bottom: 0.5rem;
}
.siteform__setting--input-text {
    background: none;
    padding: 1rem;
    outline: none;
    border: 1px solid #898484;
    font-size: inherit;
    color: inherit;
}
.siteform__setting--input-text:hover,
.siteform__setting--input-text:focus {
    border-color: #ff614b;
    outline: none;
}
.siteform__setting--input-textarea {
    background: none;
    outline: none;
    border: 1px solid #898484;
    font-size: inherit;
    color: inherit;
    padding: 1rem;
    resize: none;
}
.siteform__setting--input-textarea:hover,
.siteform__setting--input-textarea:focus {
    border-color: #ff614b;
    outline: none;
}
.siteform__setting--input.textarea {
    grid-column: 1/3;
}
@media (max-width: 37.5em) {
    .siteform__setting--input.textarea {
        grid-column: 1/2;
    }
}
.siteform__setting--input-input {
    width: 100%;
    padding: 1rem;
    background: none;
    outline: none;
    border: 1px solid #898484;
}
.siteform__setting--input-input:hover,
.siteform__setting--input-input:focus {
    border-color: #ff614b;
    outline: none;
}
.siteform__setting--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1/3;
}
@media (max-width: 37.5em) {
    .siteform__setting--btns {
        grid-column: 1/2;
    }
}
.siteform__setting--btns-btn {
    padding: 0.6rem 2rem;
    outline: none;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s;
    margin-left: auto;
}
.siteform__setting--btns-btn.save,
.siteform__setting--btns-btn.accept {
    border: 1px solid #008000;
    background-color: #008000;
    color: #11e169;
}
.siteform__setting--btns-btn.save:hover,
.siteform__setting--btns-btn.save:focus,
.siteform__setting--btns-btn.accept:hover,
.siteform__setting--btns-btn.accept:focus {
    border: 1px solid #11e169;
    background-color: #11e169;
    color: #000;
}
.siteform__setting--btns-btn.reject {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    color: #800000;
}
.siteform__setting--btns-btn.reject:hover,
.siteform__setting--btns-btn.reject:focus {
    border: 1px solid #800000;
    background-color: #800000;
    color: #fff;
}

.siteform__preference {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.siteform__preference--btns {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.siteform__preference--btns-group {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.siteform__preference--btns-btn {
    padding: 0.6rem 2rem;
    font-size: inherit;
    font-weight: inherit;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s;
}
.siteform__preference--btns-btn:hover,
.siteform__preference--btns-btn:focus {
    outline: none;
    border: none;
}
.siteform__preference--btns-btn.add {
    border: 1px solid #ff614b;
    background: none;
    color: #ff614b;
}
.siteform__preference--btns-btn.add:hover,
.siteform__preference--btns-btn.add:focus {
    border: 1px solid transparent;
    background-color: #ff614b;
    color: #fff;
}
.siteform__preference--btns-btn.delete {
    border: 1px solid #ff0000;
    background: none;
    color: #ff0000;
}
.siteform__preference--btns-btn.delete:hover,
.siteform__preference--btns-btn.delete:focus {
    border: 1px solid transparent;
    background-color: #ff0000;
    color: #fff;
}
.siteform__preference--btns-btn.save,
.siteform__preference--btns-btn.accept {
    border: 1px solid #008000;
    background-color: #008000;
    color: #11e169;
}
.siteform__preference--btns-btn.save:hover,
.siteform__preference--btns-btn.save:focus,
.siteform__preference--btns-btn.accept:hover,
.siteform__preference--btns-btn.accept:focus {
    border: 1px solid #11e169;
    background-color: #11e169;
    color: #000;
}
.siteform__preference--btns-btn.reject {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    color: #800000;
}
.siteform__preference--btns-btn.reject:hover,
.siteform__preference--btns-btn.reject:focus {
    border: 1px solid #800000;
    background-color: #800000;
    color: #fff;
}
.siteform__preference--content.seperate {
    border: 1px solid #898484;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-right: 0.5rem;
}

#siteform_language,
#siteform_currency,
#time_zone,
#investment_return_type,
#email_send_option {
    background: none;
    border: 1px solid #898484;
    outline: none;
}
#siteform_language:hover,
#siteform_language:focus,
#siteform_currency:hover,
#siteform_currency:focus,
#time_zone:hover,
#time_zone:focus,
#investment_return_type:hover,
#investment_return_type:focus,
#email_send_option:hover,
#email_send_option:focus {
    border-color: #ff614b;
    outline: none;
}

#siteform_doctype,
#siteform_countries {
    background: none;
    outline: none;
}
#siteform_doctype:hover,
#siteform_doctype:focus,
#siteform_countries:hover,
#siteform_countries:focus {
    border-color: #ff614b;
    outline: none;
}

.check_status {
    padding: 0.5rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff0000;
    color: #fff;
}
.check_status.active {
    background-color: #11e169;
    color: #000;
}

.siteform__check {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#siteform__switch,
#siteform__sendmail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 5rem;
    row-gap: 5rem;
}
@media (max-width: 45.87em) {
    #siteform__switch,
    #siteform__sendmail {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}
@media (max-width: 41.37em) {
    #siteform__switch,
    #siteform__sendmail {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.sm-width {
    max-width: 55% !important;
}

.siteform__switch--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-column: 1/4;
}
@media (max-width: 45.87em) {
    .siteform__switch--btns {
        grid-column: 1/3;
    }
}
@media (max-width: 41.37em) {
    .siteform__switch--btns {
        grid-column: 1/2;
    }
}
.siteform__switch--btns-btn {
    padding: 0.6rem 2rem;
    outline: none;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s;
    margin-left: auto;
}
.siteform__switch--btns-btn.save,
.siteform__switch--btns-btn.accept {
    border: 1px solid #008000;
    background-color: #008000;
    color: #11e169;
}
.siteform__switch--btns-btn.save:hover,
.siteform__switch--btns-btn.save:focus,
.siteform__switch--btns-btn.accept:hover,
.siteform__switch--btns-btn.accept:focus {
    border: 1px solid #11e169;
    background-color: #11e169;
    color: #000;
}
.siteform__switch--btns-btn.reject {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    color: #800000;
}
.siteform__switch--btns-btn.reject:hover,
.siteform__switch--btns-btn.reject:focus {
    border: 1px solid #800000;
    background-color: #800000;
    color: #fff;
}

.email__setup-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 37.5em) {
    .email__setup-split {
        display: block;
    }
}

.sitepayment__table-thead {
    background-color: #ff614b;
    color: #fff;
    text-align: center;
    z-index: 999;
}

.sitepayment__table-th {
    font-weight: 500;
    font-size: 1.7rem;
}
@media (max-width: 35.68em) {
    .sitepayment__table-th {
        font-size: 1.5rem;
        font-weight: 400;
    }
}

.sitepayment__table-tbody {
    text-align: center !important;
}
@media (max-width: 35.68em) {
    .sitepayment__table-tbody {
        font-size: 1.4rem;
    }
}

.sitepayment__table-tbr {
    background-color: #444;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

.sitepayment__table-td {
    border: 1px solid #000;
}

.sitepayment__method {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    margin: auto;
    text-align: left;
}
.sitepayment__method--img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    width: 4.5rem;
}
@media (max-width: 35.68em) {
    .sitepayment__method--img {
        height: 3rem;
        width: 3rem;
    }
}
.sitepayment__method--img-icon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}
.sitepayment__method--title-name {
    font-weight: 500;
}

.table-status {
    display: inline-block;
    height: 3.5rem;
    width: 3.5rem;
    position: relative;
}
@media (max-width: 35.68em) {
    .table-status {
        height: 3rem;
        width: 3rem;
    }
}
.table-status-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
}
@media (max-width: 35.68em) {
    .table-status-icon {
        font-size: 2rem;
    }
}

.method_status {
    padding: 0.6rem 2rem;
    border-radius: 100px;
    background-color: #f5deb3;
    display: inline-block;
    color: #000;
    font-size: 1.4rem;
}
@media (max-width: 35.68em) {
    .method_status {
        font-size: 1.2rem;
    }
}
.method_status.enabled {
    background-color: #11e169;
    color: #008000;
}
.method_status.disabled {
    background-color: #800000;
    color: #ff0000;
}
@media (max-width: 35.68em) {
    .method_status.mobile {
        display: none;
    }
}

.method__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    margin: auto;
}
@media (max-width: 35.68em) {
    .method__actions {
        gap: 3rem;
        justify-content: space-between;
    }
}
.method__actions--button {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    transition: all 0.3s;
}
.method__actions--button:hover,
.method__actions--button:focus {
    border: none;
    outline: none;
}
.method__actions--button.edit:hover,
.method__actions--button.edit:focus {
    color: #11e169;
}
.method__actions--button.delete {
    color: #ff614b;
}
.method__actions--button.delete:hover,
.method__actions--button.delete:focus {
    color: #ff0000;
}

.method__status--mobile {
    display: none;
}
@media (max-width: 35.68em) {
    .method__status--mobile {
        display: block;
    }
}

.payment__setting--btns-btn {
    display: flex;
    margin-left: auto;
    margin-bottom: 4rem;
    padding: 0.6rem 2rem;
    border: 1px solid #f5deb3;
    color: #f5deb3;
    background: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}
.payment__setting--btns-btn:hover,
.payment__setting--btns-btn:focus {
    border: 1px solid transparent;
    background-color: #f5deb3;
    color: #000;
}

.setting_input-error {
    color: #ff614b;
    font-size: 1.4rem;
    display: none;
}
.setting_input-error.active {
    display: block;
}

.website__logo--img {
    height: 5rem;
    width: 12rem;
    padding: 5px;
    border: 1px solid #898484;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.website__logo--img-img {
    height: 100%;
    width: 100%;
}

.website__icon--img {
    height: 5rem;
    width: 5rem;
    padding: 5px;
    border: 1px solid #898484;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.website__icon--img-img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.siteform__setting--group {
    grid-column: 1/3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (max-width: 37.5em) {
    .siteform__setting--group {
        grid-column: 1/2;
        display: block;
    }
}

.admin__profile {
    box-shadow: 0rem 1rem 2rem rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(217, 217, 217, 0.15);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: 15rem;
}
.admin__profile * {
    scrollbar-width: 2px;
    scrollbar-color: #11e169;
}
.admin__profile *::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 2px;
    height: 2px;
}
.admin__profile *::-webkit-scrollbar-track {
    background: none;
}
.admin__profile *::-webkit-scrollbar-thumb {
    background-color: #11e169;
    border-radius: 10px;
}
.admin__profile--content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    column-gap: 3rem;
}
@media (max-width: 51.18em) {
    .admin__profile--content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
}
.admin__profile--content-profile {
    grid-column: 1/2;
    border: 1px solid #f5deb3;
    padding: 3rem 1rem;
}
.admin__profile--content-site {
    grid-column: 2/4;
    border: 1px solid #f5deb3;
    padding: 3rem;
}
.admin__profile--forms {
    margin-bottom: 3rem;
}
.admin__profile--items-content {
    display: none;
}
.admin__profile--items-content.active {
    display: block;
}

.admin__profile--bio {
    text-align: center;
}
.admin__profile--bio-img {
    height: 8rem;
    width: 8rem;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ff614b;
    margin: auto;
    margin-bottom: 2rem;
    padding: 3px;
}
.admin__profile--bio-pic {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.admin__profile--bio-btns {
    display: flex;
    align-items: center;
    gap: 5rem;
    justify-content: center;
    margin: 2rem auto;
}
@media (max-width: 22.5em) {
    .admin__profile--bio-btns {
        flex-direction: column;
        gap: 1rem;
    }
}
.admin__profile--bio-btn {
    cursor: pointer;
    outline: none;
    border: none;
    transition: all 0.3s;
    text-decoration: none;
    padding: 0.6rem 2rem;
    font-size: inherit;
    font-weight: inherit;
}
.admin__profile--bio-btn:focus,
.admin__profile--bio-btn:hover {
    border: none;
    outline: none;
}
.admin__profile--bio-btn.update-profile {
    background-color: #008000;
    color: #11e169;
}
.admin__profile--bio-btn.update-profile:focus,
.admin__profile--bio-btn.update-profile:hover {
    background-color: #11e169;
    color: #000;
}
.admin__profile--bio-btn.update-password {
    background-color: #ff614b;
    color: #fff;
}
.admin__profile--bio-btn.update-password:focus,
.admin__profile--bio-btn.update-password:hover {
    background-color: #800000;
    color: #ff0000;
}

.update__profile,
.update__password,
.update__preference {
    display: none;
    border: 1px dashed #898484;
    padding: 2rem;
    margin-bottom: 3rem;
}
.update__profile.active,
.update__password.active,
.update__preference.active {
    display: block;
}

.admin_preference {
    margin-bottom: 3rem;
}

.app__dev {
    margin-top: 3rem;
    padding: 3rem;
}
.app__dev--item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app__dev--item:not(:last-child) {
    margin-bottom: 2rem;
}
@media (max-width: 31.2em) {
    .app__dev--item {
        justify-content: center;
    }
}
.app__dev--item-btn {
    cursor: pointer;
    outline: none;
    border: 1px solid #ff614b;
    background: none;
    transition: all 0.3s;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    padding: 0.6rem 2rem;
    color: #ff614b;
    min-width: 20rem;
}
.app__dev--item-btn:focus,
.app__dev--item-btn:hover {
    border: 1px solid transparent;
    outline: none;
    background-color: #ff614b;
    color: #fff;
}
@media (max-width: 31.2em) {
    .app__dev--item-p {
        display: none;
    }
}

.log-container {
    margin: 1rem auto;
    padding: 2rem;
    max-height: 45rem;
    overflow-y: auto;
    background-color: #2a2222;
}

.log-container--btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.log-container--btns-btn {
    display: inline-block;
    padding: 0.6rem 2rem;
    margin-bottom: 4rem;
    color: #ff614b;
    border: 1px solid #ff614b;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: all 0.3s;
}
.log-container--btns-btn:focus,
.log-container--btns-btn:hover {
    border: 1px solid transparent;
    background-color: #ff614b;
    outline: none;
    color: #fff;
}
.log-container--btns-btn.delete {
    background-color: #ff614b;
    color: #fff;
}
.log-container--btns-btn.delete:focus,
.log-container--btns-btn.delete:hover {
    background-color: #ff0000;
}

.log-entry {
    padding: 2rem;
    border-bottom: 1px solid #ddd;
    max-height: 40rem;
    overflow-y: auto;
    width: 100%;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-date {
    font-weight: bold;
    color: #f5deb3;
}

.log-level {
    color: #ff614b;
    letter-spacing: 1.2px;
    line-height: 1.5;
}

.log-message {
    color: #f5deb3;
}