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


body{
    font-family: Raleway;
    display: grid;
    grid-template-columns: 20% 80%;
    grid-auto-rows: 100px 100vh;
    grid-template-areas: "aside header" "aside main";
    background-color: var(--color_light_gray);
}
input{
    font-family: Raleway !important;
    
}
/* colors light */
:root{
    --color_white:#fff;
    --color_black:#1A2029;
    --color_gray:#14161D;
    --color_gray-300:#D1D5DB;
    --color_light_gray:#F8F8F8;
    --color_dark_gray:#31353F;
    --color_light_purple:#8C77ED;
    --color_blue:#3A6FF8;
    --color_green:#1ECB4F;
    --color_text_green:#1ECB4F;
    --color_bg_green:#1ECB4F;
    --color_50AF95:#50AF95;
    --color_light_red:#F46D22;
    --color_353E4D:#353E4D;
    --color_F5B300:#F5B300;
    --color_1E2A41:#1E2A41;
    --color_B6BFC8:#B6BFC8;
    --color_1B2028:#1B2028;
    --color_9E9E9E:#9E9E9E;
    --color_black_to_white:#1A2029;
    --color_bg_gray:#14161D;
    --color_bg_201F21:#201F21;
    --color_text_E4E4E4:#E4E4E4;
    --color_F0F2F5:#F0F2F5;
    --color_4CAF50:#4CAF50;
    --color_E2E8F0:#E2E8F0;
    --color_64748B:#64748B;
    --color_F7F9FC:#F7F9FC;
    --color_259AE6:#259AE6;
    --color_EFF4FB:#EFF4FB;
    --color_F8FAFC:#F8FAFC;
    --color_3C50E0C:#3C50E0;
    --color_344767:#344767;
    --color_7B809A:#7B809A;
    --color_E91F63:#E91F63;
    --color_F8F9FA:#F8F9FA;
    --color_F44334:#F44334;
    --bg_FFF:#fff;
    --color_19161D:#19161D;
    --color_86888A:#86888A;
    --color_EBEBEB:#EBEBEB;
    --color_53575A:#53575A;
    --color_9747FF:#9747FF;
    --color_F2F2F2:#F2F2F2;
    --color_2E61B4:#2E61B4;
}


/* colors dark */
:root[data-theme="dark"] {
    --color_gray:#fff;
}
:root[data-theme="dark"]{
    --color_344767:#fff;
}
:root[data-theme="dark"] .wallet_invoices_price  div svg path{
    fill: var(--color_white);
}
:root[data-theme="dark"] .payment_method_carditem button svg path,:root[data-theme="dark"]  .dark_white path{
    fill: var(--color_white);
}
:root[data-theme="dark"] .section_info_bitcoin,:root[data-theme="dark"] .buttons_operation{
    background-color: var(--color_bg_gray);
}
:root[data-theme="dark"] .active_btn_operation{
    background-color: var(--color_1B2028);
}
:root[data-theme="dark"] .filter_buy_bitcoin{
    background-color: var(--color_bg_201F21);
}
:root[data-theme="dark"] .wallet_billing_item{
    background-color: var(--color_1B2028);
    border: 1px solid var(--color_white);
}
:root[data-theme="dark"] .filter_btc > div h5{
    color: var(--color_text_E4E4E4);
}
:root[data-theme="dark"] .filter_btc_page button{
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"] .toggle_darkmode  .active_darkmode{
    background-color: var(--color_bg_gray);
}
:root[data-theme="dark"]  .filter_btc_page .active_btn{
    color: var(--color_text_E4E4E4);
}
:root[data-theme="dark"] .filter_buy_bitcoin svg path{
    fill: var(--color_white);
}
:root[data-theme="dark"] .filter_btc > span{
    color: var(--color_white);
}
:root[data-theme="dark"] .toggle_darkmode  button span{
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"] .filter_chart_bitcoin .dropdwon_filter span{
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"] .filter_chart_bitcoin .dropdwon_filter svg:last-child path{
    fill: var(--color_white);
}
:root[data-theme="dark"] .filter_chart_bitcoin .modal_filter svg path{
    fill: var(--color_9E9E9E);
}
:root[data-theme="dark"] .burger_menu svg path{
    fill: var(--color_white);
}
:root[data-theme="dark"] .toggle_darkmode  button:first-child svg path{
    fill: var(--color_9E9E9E);
}
:root[data-theme="dark"] .box_shadow{
   background-color: var(--color_1B2028);
}

:root[data-theme="dark"] body{
   background-color: var(--color_bg_gray);
}
:root[data-theme="dark"] aside{
   background-color: var(--color_1B2028);
}
:root[data-theme="dark"] .navgation_sidbar li a span,:root[data-theme="dark"] .search_box_header input{
 color: var(--color_9E9E9E);
}
:root[data-theme="dark"]  .navgation_sidbar li a svg path,:root[data-theme="dark"] .search_box_header button svg path,:root[data-theme="dark"] .message_user button svg path{
    fill: var(--color_9E9E9E);
}
:root[data-theme="dark"] aside .logo span,:root[data-theme="dark"] header .title_header h5,:root[data-theme="dark"] .full_name_user span{
    color: var(--color_white);
}

:root[data-theme="dark"]  .header_letf_content_main span{
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"] .header_letf_content_main div h6{
    color: var(--color_white);
}
:root[data-theme="dark"] .account_text_user span{
    color: var(--color_white);
}
:root[data-theme="dark"] .header_letf_content_main div svg path{
    fill: var(--color_9E9E9E);
}
:root[data-theme="dark"]  .navgation_sidbar li div span,:root[data-theme="dark"] .sub_menu_sidbar li a{
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"]  .navgation_sidbar li div svg path{
    fill: var(--color_9E9E9E);
}
h1{
    color: var(--color_white);
}

@font-face {
    font-family: Raleway;
    font-weight: 900;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-Black.woff') format('woff');
}
@font-face {
    font-family: Raleway;
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-Bold.woff') format('woff');
}
@font-face {
    font-family: Raleway;
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-SemiBold.woff') format('woff');
}
@font-face {
    font-family: Raleway;
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-Medium.woff') format('woff');
}
@font-face {
    font-family: Raleway;
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-Regular.woff') format('woff');
}
@font-face {
    font-family: Raleway;
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Raleway/Raleway-Light.woff') format('woff');
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.box_shadow{
    background-color: var(--color_white);
}
header{
    /* background-color: #1ECB4F; */
    grid-area: header;
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
    gap: 10px;

}
aside{
    /* background-color: #3A6FF8; */
    grid-area: aside;
    position: fixed;
    width: 20%;
    height: 100%;
    border-right: 2px solid rgba(0, 0, 0, 0.12);
    padding: 32px;
    overflow-y: auto;
}

main{
    /* background-color: #F46D22; */
    grid-area: main;
    padding: 8px;
}


aside .logo{
    display: flex;
    align-items: center;
    gap: 7px;
}

aside .logo span{
    font-size: 21px;
    font-weight: 700;
}
.navgation_sidbar{
    margin-top: 2.7rem;
}
.navgation_sidbar li {
    margin-bottom: 32px;
}
/* .navgation_sidbar li:nth-child(6){
    margin-bottom: 20rem;
}  */
.navgation_sidbar li a,.navgation_sidbar li div{
    display: flex;
    align-items: center;
    gap: 20px;
}
.navgation_sidbar li a span,.sub_menu_sidbar li a{
    color: var(--color_black);
    font-size: 14px;
    font-weight: 600;
}
.sub_menu_sidbar{
    padding-left: 1rem;
    margin-top: 1rem;
}
.active_link_sidbar{
    background-color: var(--color_blue);
    padding: 12px ;
    height: 50px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.active_link_sidbar *{
    color: var(--color_white)  !important;

}
.active_link_sidbar svg path{
    fill: var(--color_white)  !important;

}
.toggle_darkmode {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4rem;
}
.toggle_darkmode button{
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle_darkmode .active_darkmode{
    background-color: var(--color_white) ;
    padding: 10px 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.title_header h5{
    color: var(--color_black);
    font-size: 32px;
    font-weight: 700;
}
.search_box_header{
    width: 52%;
    height: 44px;
    /* background-color: var(--color_white); */
    border-radius: 8px;
    padding: 0 20px;
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.search_box_header input{
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    font-size: 14px;
    font-weight: 400;
    border: none;
    outline: none;
}
.search_box_header button{
    position: absolute;
    right: 20px;
    top: 22%;
    background-color: transparent;
    border: none;
}
header .user_action{
    display: flex;
    align-items: center;
    gap: 2.5rem;
}
header .user_action .message_user button{
    border: none;
    padding: 10px;
    
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
header .user_info{
    display: flex;
    gap: 15px;
}
header .user_info .full_name_user{
    margin-top: 5px;
    cursor: pointer;
}
.full_name_user span:last-child{
    position: relative;
    top: 5px;
}
.burger_menu{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 2px solid var(--color_gray-300);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.search_box_main{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.search_box_main form{
    width: 100%;
    margin-bottom: 20px;
}

.d_block{
    display: block !important;
}
.bg_cover{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0,0.1);
    position: fixed;
    display: none;

}
.container_main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.9rem;
    padding-bottom: 0.5rem;
   
}
.header_letf_content_main span{
    color: var(--color_black);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.1rem;
}
.header_letf_content_main div {
    display: flex;
    align-items: center;
    gap: 19px;
    margin: 8px 0;
}
.header_letf_content_main div h6{
    color: var(--color_gray);
    font-size: 32px;
    font-weight: 600;
}
.chart_bitcoin{
    margin-top: 1.8rem;
    padding: 32px 30px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.row_chart_bitcoin{
    display: flex;
    justify-content: space-between;
}
.row_chart_bitcoin h5{
    color: var(--color_gray);
    font-size: 24px;
    font-weight: 700;
}
.filter_chart_bitcoin{
    display: flex;
    gap: 16px;
    align-items: center;
}

.filter_chart_bitcoin .dropdwon_filter,.filter_chart_bitcoin .modal_filter{
    height: 32px;
    border: 1px solid var(--color_dark_gray);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.filter_chart_bitcoin .dropdwon_filter{
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
 
}
.filter_chart_bitcoin .dropdwon_filter span{
    color: var(--color_black);
    font-size: 10px;
    font-weight: 700;
    opacity: 0.6;
}
.filter_chart_bitcoin .modal_filter{
    padding: 7px;

}
.row_bitcoin_btc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 27px;
}
.filter_btc > div {
    display: flex;
    align-items: center;
    margin-bottom: 11px;
}
.filter_btc > div h5{
    color: var(--color_black);
    opacity: 0.6;
    font-size: 14px;
    font-weight: 500;
}
.filter_btc > span{
    color: var(--color_black);
    font-size: 18px;
    font-weight: 700;
}
.filter_btc_page button{
    height: 22px;
    background-color: transparent;
    border: 1px solid var(--color_dark_gray);
    font-size: 10px;
    font-weight: 500;
    color: var(--color_353E4D);
    padding: 0 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.filter_btc_page .active_btn{
    background-color: var(--color_blue);
    color: var(--color_black);
    border: none;
}
.border_raduis_20{
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.operation_section{
    margin-top: 30px;
    padding: 30px;
   
}
.row_header_operation{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.row_header_operation span:first-child{
    color: var(--color_gray);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.72px;
}
.buttons_operation{
    background-color: var(--color_light_gray);
    padding: 5px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.buttons_operation button{
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.56px;

}
.buttons_operation .active_btn_operation{
    background-color: var(--color_white);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.row_header_operation span:last-child{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.56px;
}
.operation_buy_bitcoin{
    display: flex;
    margin-top: 22px;
    gap: 24px;
}
.row_operation_buy{
    width: 78%;
}
.info_bitcoin_operation:not(:last-child){
    margin-bottom: 22px;
}
.info_bitcoin_operation h5{
    color: var(--color_black);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}
.section_info_bitcoin{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color_light_gray);
    padding:  8px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.filter_buy_bitcoin{
    padding: 5px 7px;
    background-color: var(--color_white);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
}
.filter_buy_bitcoin .icon_filter{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.filter_buy_bitcoin span{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 700;
}
.price_buy_bitcoin{
    display: flex;
    gap: 1.8rem;
    align-items: center;
}
.price_buy_bitcoin span:first-child{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.56px;
}

.price_buy_bitcoin span:last-child{
    background-color: var(--color_light_purple);
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.bg_color_50AF95{
    background-color: var(--color_50AF95);
}
.bg_color_F5B300{
    background-color: var(--color_F5B300);
}
.btn_operation_buy{
    display: flex;
    align-items: center;
    justify-content: center;
    width:22%;
    color: var(--color_white);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.72px;
    border: 1px solid var(--color_1E2A41);
    background-color: var(--color_1E2A41);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.section_coins{
    display: grid;
    /* grid-template-columns: repeat(2,1fr); */
    grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
    gap: 1.9rem;
}
.card_coin{
    padding: 32px 19px;
}
.d_flex{
    display: flex;
}
.justify_content_between{
    justify-content: space-between;
}

.align_items_center{
    align-items: center;
}

.header_card_coin{
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}
.left_header_card_coin{
    gap: 19px;
}
.text_header_card_coin h6{
    color: var(--color_gray);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}
.text_header_card_coin span{
    color: var(--color_gray);
    font-size: 12px;
    font-weight: 500;
    opacity: 0.6;
}
.right_header_card_coin svg{
    position: relative;
    top: -7px;
}
.body_card_coin {
    margin-top: 20px;
    gap: 1.5rem;
}
.left_body_card_coin h5{
    color: var(--color_gray);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 19px;
}
.left_body_card_coin span{
    font-size: 14px;
    font-weight: 600;
}

.color_1ECB4F{
    color: var(--color_green);
}
.color_F46D22{
    color: var(--color_light_red);
}
.section_portfolio{
    margin-top: 30px;
    padding: 24px;
}
.section_portfolio h5{
    color: var(--color_gray);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}
.row_portfolio:not(:last-child){
    margin-bottom: 30px;
}
.info_row_portfolio{
    gap: 20px;
}
.text_portfolio h6{
    color: var(--color_gray);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 7px;
}
.text_portfolio span{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
}
.flex_dir_column{
    flex-direction: column;
}
.action_row_portfolio span:first-child{
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 7px;
}
.action_row_portfolio span:last-child{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 600;
}
.align_items_end{
    align-items: end;
}
.message_list_user {
    width: 150px;
    z-index: 100;
    position: absolute;
    top: 96px;
    right: 185px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all ease-in-out 250ms;
    box-shadow: 5px 5px 20px 0 rgba(218, 188, 255, 0.20);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-transition: all ease-in-out 250ms;
    -moz-transition: all ease-in-out 250ms;
    -ms-transition: all ease-in-out 250ms;
    -o-transition: all ease-in-out 250ms;
}
.message_list_user.active_notif{
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}
.message_list_user li{
    padding: 10px;
}
.list_account_user {
    position: absolute;
    z-index: 100;
    top: 95px;
    right: 15px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
    border-radius: 13px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all ease-in-out 250ms;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    -ms-border-radius: 13px;
    -o-border-radius: 13px;
    -webkit-transition: all ease-in-out 250ms;
    -moz-transition: all ease-in-out 250ms;
    -ms-transition: all ease-in-out 250ms;
    -o-transition: all ease-in-out 250ms;
}
.list_account_user.active_account{
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
}
.search_user{
    position: relative;
    height: 50px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--color_light_gray);
    
}
.search_user input{
    height: 100%;
    width: 100%;
    padding-left: 15px;
    font-size: 17px;
    font-weight: 400;
    color: var(--color_B6BFC8);
}
.search_user input,.search_user button{
    border: none;
    background-color: transparent;
}
.search_user button{
    position: absolute;
    left: 6px;
}
.account_user{
    padding: 10px 20px;
}
.account_user,.info_user_account{
    gap: 10px;
}
.info_user_account img,.img_user_info img{
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.account_text_user h6{
    color: var(--color_gray);
    font-size: 17px;
    font-weight: 500;
}
.account_text_user span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_black);
    opacity: 0.6;
}
.charts_card{
    margin-top: 1rem;
}
.charts_card{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(267px,1fr));
    gap: 30px;
}
.card_chart_item{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.card_chart_item{
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.1);
}
.card_chart_header{
    padding: 12px;
    height: 70px;
}
.icon_cahrt_card{
    width: 64px;
    height: 64px;
    position: relative;
    top: -29px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.icon_account_circle{
    background: linear-gradient(to bottom,#3E3D45 ,#202020);
   
}
.icon_chart_bar{
    background: linear-gradient(to bottom,#E93B77 ,#DA1F63);

}
.icon_chart_store{
    background: linear-gradient(to bottom,#63B967 ,#4BA64F);

}
.icon_account_plus{
    background: linear-gradient(to bottom,#439DEE ,#1E78E9);

}
.justify_content_center{
    justify-content: center;
}

.card_chart_header .title{
    text-align: right;
}
.card_chart_header .title span:first-child{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 300;
    display: block;
}
.card_chart_header .title span:last-child{
    color: var(--color_gray);
    font-size: 24px;
    font-weight: 700;
    margin-top: 5px;
}
.card_chart_footer{
    border-top: 1px solid var(--color_F0F2F5);
    padding: 12px;
    
}
.card_chart_footer span:first-child{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_4CAF50);
}
.card_chart_footer span:last-child{
    font-size: 16px;
    font-weight: 300;
    color: var(--color_gray);
}
.graph_data{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(380px,1fr));
    gap: 30px;
    margin-top: 3rem;
}
.line_card_graph{
    position: relative;
    top: -35px;
    height: 172px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.bg_gradients_red{
    background: linear-gradient(177deg,#E93B77  48% ,#DA1F63);
}
.bg_gradients_green{
    background: linear-gradient(177deg,#63B967 48% ,#4BA64F);

}
.bg_gradients_black{
    background: linear-gradient(177deg,#3E3D45 48% ,#202020);

}
.card_graph{
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    padding: 1rem 1rem 0 1rem;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.caption_card_graph h5{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_gray);
    margin-bottom: 2px;
}
.caption_card_graph span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_gray);
}
.footer_card_graph{
    border-top: 1px solid var(--color_F0F2F5);
    margin-top: 12px;
    height: 50px;
    line-height: 50px;
}
.footer_card_graph span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_gray);
}
.table_content{
    border: 1px solid var(--color_E2E8F0);
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    overflow-x: auto;
    box-shadow: 0 8px 13px -3px rgba(0, 0, 0, 7%);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.header_table_title{
    padding: 12px 12px 20px 22px;
    border-bottom: 1px solid var(--color_E2E8F0);
}
.header_table_title h6{
    font-size: 20px;
    font-weight: 400;
    color: var(--color_gray);
}
.table_content table{
    width: 100%;
    border-collapse: collapse;
}
.table_content table thead tr th{
    font-size: 16px;
    font-weight: 400;
    color: var(--color_9E9E9E);
    text-align: left;
    padding: 22px;
    border-bottom: 1px solid var(--color_E2E8F0);
}
.table_content table tbody tr td:first-child{
    display: flex;
    align-items: center;
    gap: 10px;
}
.img_tables{
    object-fit: cover;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.table_content table tbody tr td{
    color: var(--color_gray);
    font-size: 16px;
    font-weight: 400;
    padding: 22px;
    border-bottom: 1px solid var(--color_E2E8F0);

}
.table_content .table_products tbody tr td:last-child{
    color: var(--color_bg_green);
}
.table_content .table_products tbody tr:last-child td{
    border: 0;
}
.table_content .table_media thead tr th{
    background-color: var(--color_F7F9FC);
    border: 0;
}
.table_content .table_media tbody tr td:nth-child(3){
    color: var(--color_bg_green);
}
.table_content .table_media tbody tr td:last-child{
    color: var(--color_259AE6);
    font-weight: 500;
}
.table_content .table_media{
    width: 97%;
    margin: 0 auto;
}

.border_0{
    border: 0 !important;
}
.container_chat{
    display: flex;
    /* height: 100vh; */
}
.sidbar_chat{
    width: 30%;
    border-right:1px solid var(--color_E2E8F0) ;
    height: 100vh;
    overflow-y: auto;
}
.message_chat{
    width: 70%;
}
.container_chat{
    border: 1px solid var(--color_E2E8F0);
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
.sidbar_chat_header{
    padding: 25px 19px 5px 19px;
    border-bottom: 1px solid var(--color_E2E8F0);
    height: 79px;
}
.sidbar_chat_header h6{
    color: var(--color_gray);
    font-size: 20px;
    font-weight: 500;
}
.notfication_count_chat{
    width: 29px;
    height: 29px;
    background-color: var(--color_EFF4FB);
    border: 1px solid var(--color_E2E8F0);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.notfication_count_chat span{
    color: var(--color_gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    height: 100%;
}
.conetnt_sidbar_chat{
    padding: 25px 19px;

}
.sidbar_search_chat{
    position: relative;
    height: 44px;
    background-color: var(--color_EFF4FB);
    border: 1px solid var(--color_E2E8F0);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.sidbar_search_chat input{
    background-color: transparent;
    height: 100%;
    width: 100%;
    border: none;
    padding-left: 1rem;
    font-weight: 400;
    font-size: 14px;
}
.sidbar_search_chat  button{
    border: 0;
    background-color: transparent;
    position: absolute;
    right: 11px;
    top: 31%;
}
.users_chat{
    margin-top: 2rem;
}
.user_info_chat{
    margin-bottom: 1rem;
    gap: 10px;
    padding: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.user_info_chat.active_chat{
    background-color: var(--color_EFF4FB);
}
.img_user_info_chat{
    position: relative;
}
.is_online_user_chat{
    width: 12px;
    height: 12px;
    position: absolute;
    padding: 3px;
    bottom: 7px;
    right: 2px;
    background-color: var(--color_white);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.is_online_user_chat span{
    background-color: var(--color_4CAF50);
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.name_user_info_chat h5{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_gray);
    margin-bottom: 4px;
}
.name_user_info_chat p{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_9E9E9E);
}
:root[data-theme="dark"] .user_info_chat.active_chat, :root[data-theme="dark"] .notfication_count_chat{
    background-color: var(--color_1B2028);
    border: 1px solid var(--color_white);
}
.message_chat_header{
    padding: 25px 19px 5px 19px;
    border-bottom: 1px solid var(--color_E2E8F0);
    height: 79px;

}
.message_user_full_info{
    gap: 12px;
}
.message_user_full_info div h5{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_gray);
    margin-bottom: 3px;
}
.message_user_full_info div span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_9E9E9E);
}
.message_chat_content{
    padding: 20px;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
.message_receive span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_9E9E9E);
}
.message_receive div{
    background-color: var(--color_EFF4FB);
    width: 40%;
    margin: 12px 0;
    line-height: 22px;
    color: var(--color_gray);
    padding: 12px 20px;
    border-radius: 0 16px 16px 16px;
    -webkit-border-radius: 0 16px 16px 16px;
    -moz-border-radius: 0 16px 16px 16px;
    -ms-border-radius: 0 16px 16px 16px;
    -o-border-radius: 0 16px 16px 16px;
}
:root[data-theme="dark"] .message_receive div{
    color: var(--color_black);
}
.message_sender{
    direction: rtl;
}
.message_sender div{
    background-color: var(--color_3C50E0C);
    padding: 12px 20px;
    line-height: 22px;
    border-radius: 16px 16px 0 16px;
    color: var(--color_white);
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 400;
    width: 40%;
    -webkit-border-radius: 16px 16px 0 16px;
    -moz-border-radius: 16px 16px 0 16px;
    -ms-border-radius: 16px 16px 0 16px;
    -o-border-radius: 16px 16px 0 16px;
}
.message_sender span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_9E9E9E);
}
.message_footer{
    position: sticky;
    bottom: 0;
    padding: 12px 19px;
    border-top: 1px solid var(--color_E2E8F0);
    width: 100%;
}
.group_send_message{
    height: 52px;
    width: 98%;
    background-color: var(--color_EFF4FB);
    border: 1px solid var(--color_E2E8F0);
    padding: 0 12px;
}
.group_send_message input{
    border: 0;
    height: 100%;
    width: 93%;
    background-color: transparent;
    color: var(--color_9E9E9E);
    font-weight: 16px;
    font-weight: 400;
}
.group_send_message button{
    border: 0;
    background-color: transparent;
}
.btn_send_message{
    background-color: var(--color_3C50E0C);
    border: 0;
    height: 52px;
    width: 52px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.message_footer form{
    gap: 12px;
}
.sub_menu_sidbar{
    /*display: none;
    */
   
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transition:all ease-in 250ms ;
    transform-origin: top;
    -webkit-transition:all ease-in 250ms ;
    -moz-transition:all ease-in 250ms ;
    -ms-transition:all ease-in 250ms ;
    -o-transition:all ease-in 250ms ;
}
.sub_menu_sidbar.show_sub_menu{
    max-height: inherit;
    overflow: visible;
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
}
.dropdown_sidbar_menu {
    cursor: pointer;
}
.dropdown_sidbar_menu div *,.dropdown_sidbar_menu div{
    pointer-events: none;

}
.arrow_sub_menu{
    transition:all ease-in 250ms ;

}
.arrow_sub_menu.arrow_top{
    transform: rotate(181deg);
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    -ms-transform: rotate(181deg);
    -o-transform: rotate(181deg);
}

.first_row_wallet{
    display: flex;
    gap: 30px;
}
.wallet_cards_row{
    gap: 25px;
}
.wallet_cards{
    width: 75%;
}

.wallet_invoices{
    width: 25%;
}
.wallet_cards_bank{
    position: relative;
    width: 50%;
    height: 222px;
    padding: 2rem 1rem;
    background:url('../img/Mask\ Group.png') , linear-gradient(170deg,#3E3D45 45%,#202020);
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.wallet_cards_id{
    margin: 2rem 0 3rem 0;
    display: flex;
    gap: 17px;
}
.wallet_cards_id span{
    font-size: 20px;
    font-weight: 700;
    color: var(--color_white);
}
.wallet_cards_header{
    display: flex;
    gap: 3rem;
    margin-bottom: 1rem;
}
.wallet_cards_header span{
    font-size: 14px;
    font-weight: 300;
    color: var(--color_white);
    opacity: 50%;
}
.wallet_cards_user{
    display: flex;
    gap: 10px;
}
.wallet_cards_user span{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_white);
}
.logo_card_wallet{
    position: absolute;
    right: 21px;
    bottom: 14px;
}
.wallet_card_balance{
    padding: 1rem 1rem 0 1rem;
    width: 25%;
    height: 222px;
}
.wallet_card_balance_icon{
    width: 64px;
    height: 64px;
    background: linear-gradient(19deg,#E93B77,#DA1F63);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.wallet_card_balance_body{
    text-align: center;
    margin: 1.5rem 0;
}
.wallet_card_balance_body h5{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_344767);
    margin-bottom: 8px;
}
.wallet_card_balance_body span{
    font-size: 12px;
    font-weight: 400;
    color: var(--color_7B809A);
}
.wallet_card_balance_footer{
    width: 100%;
    border-top: 1px solid var(--color_F0F2F5);
    padding: 16px 0;
    text-align: center;
}
.wallet_card_balance_footer span{
    font-size: 20px;
    font-weight: 700;
    color: var(--color_344767);
}
.payment_method{
    margin-top: 2.5rem;
    padding: 1rem;
}
.payment_method_header h5{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_344767);
}
.payment_method_header button{
    background: linear-gradient(to bottom,#3E3D45,#202020);
    height: 42px;
    width: 100%;
    max-width: 145px;
    color: var(--color_white);
    border: 0;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.payment_method_cards{
    margin-top: 1.5rem;
    gap: 35px;
}
.payment_method_carditem{
    width: 50%;
    padding: 1.5rem;
    border: 1px solid var(--color_7B809A);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.gap_12{
    gap: 12px;
}
.payment_method_id span{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_344767);
}
.payment_method_carditem button{
    border: 0;
    background-color: transparent;
}
.wallet_invoices{
    padding: 25px 12px;
}
.wallet_shadow{
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 25%);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.wallet_invoices_header h6{
    font-size: 16px;
    font-weight: 700;
    color: var(--color_344767);
}
.wallet_invoices_header a{
    border: 1px solid var(--color_E91F63);
    height: 33px;
    font-size: 12px;
    color: var(--color_E91F63);
    width: 100%;
    max-width: 76px;
    font-weight: 700;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.wallet_invoices_content{
    margin-top: 1rem;
}
.wallet_invoices_date h6{
    font-size: 14px;
    font-weight: 700;
    color: var(--color_344767);
    margin-bottom: 5px;
}
.wallet_invoices_date span{
    font-size: 12px;
    font-weight: 400;
    color: var(--color_7B809A);
}
.wallet_invoices_price span{
    font-size: 14px;
    font-weight: 400;
    color: var(--color_7B809A);
}
.wallet_invoices_price div{
    gap: 2px;
}
.wallet_invoices_price div span{
  font-size: 14px;
  font-weight: 700;
  color: var(--color_344767);
}
.wallet_invoices_item{
    margin-bottom: 1.5rem;
}
.seconde_row_wallet{
    margin-top: 3rem;
    gap: 30px;
}
.wallet_billing{
    padding: 1rem 0.8rem;
}
.wallet_billing ,.wallet_transaction{
    width: 50%;
}
.wallet_billing_item{
    margin: 2rem 0;
    background-color: var(--color_F8F9FA);
    padding: 1.5rem 1rem;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.wallet_transaction{
    padding: 1rem 0.8rem;
}
.upload_darg{
    background-color: var(--bg_FFF);
    border: 1px dashed var(--color_EBEBEB);
    height: 216px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
/* :root[data-theme="dark"] .upload_darg,:root[data-theme="dark"] .search_box_upload{
    background-color: var(--color_1B2028);
} */
:root[data-theme="dark"] .text_white_dark{
    color: var(--color_white) !important;
}
.upload_darg label{
    background-color: var(--color_19161D);
    height: 24px;
    cursor: pointer;
    color: var(--color_white);
    padding: 4px 8px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}
.search_box_upload{
    position: relative;
    background-color: var(--bg_FFF);
    width: 100%;
    max-width: 368px;
    height: 48px;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}

.search_box_upload button{
    position: relative;
    left: 6px;
    top: 2px;

}
:root[data-theme="dark"] .search_box_upload button svg path{
    fill: var(--color_white);
}
.search_box_upload input{
    height: 100%;
    width: 92%;
}
.content_files_upload{
    height: 284px;
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
    border: 2px dashed var(--color_9747FF);
    margin: 1rem 0;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.section_file_uploading{
    padding: 12px;
    position: relative;
    margin-top: 2rem;
    background-color: var(--color_F2F2F2);
    width: 100%;
    max-width: 368px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
:root[data-theme="dark"] .section_file_uploading{
    background-color: var(--color_bg_gray);
} 
:root[data-theme="dark"] .path_color_white path{
    fill: var(--color_white);
}
.section_file_uploading button{
    position: absolute;
    right: 13px;
    top: 15px;
}
.porgress{
    width: 95%;
    height: 6px;
    overflow: hidden;
    background-color: var(--color_EBEBEB);
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
.porgress_bar{
    background-color: var(--color_2E61B4);
    height: 100%;
}
.mt_2{
    margin-top: 2rem;
}
.mt_1{
    margin-top: 1rem;
}
.mb_0_5{
    margin-bottom: 0.5rem;
}
.mb_1_5{
    margin-bottom: 1.5rem;
}
.mb_1{
    margin-bottom: 1rem;
}
.mt_0_3{
    margin-top: 0.3rem;
}
.my_0_5{
    margin: 0.5rem 0;
}
.fs_16{
    font-size: 16px;
}
.fs_14{
    font-size: 14px;
}
.fs_12{
    font-size: 12px;
}
.fw_700{
    font-weight: 700;
}
.fw_400{
    font-weight: 400;
}
.fw_500{
    font-weight: 500;
}
.text_color_344767{
    color: var(--color_344767);
}
.text_color_F44334{
    color: var(--color_F44334);
}
.text_color_7B809A{
    color: var(--color_7B809A);
}
.text_color_4CAF50{
    color: var(--color_4CAF50);
}
.text_color_19161D{
    color: var(--color_19161D);
}
.text_color_86888A{
    color: var(--color_86888A);
}
.text_color_53575A{
    color: var(--color_53575A);
}
.bg_transparent{
   background-color: transparent; 
}
.gap_6{
    gap: 6px;
}

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

::-webkit-scrollbar-thumb{
    background-color: #000;
}

::-webkit-scrollbar-track{
    background-color: #f5f5f5;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb{
    background-color: var(--color_white);
}
:root[data-theme="dark"] ::-webkit-scrollbar-track{
    background-color: #c2c0c0;

}
.content_loading{
    background-color: var(--bg_FFF);
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 9999;
}
.rote_loading{
    width: 11px;
    height: 11px;
    /*background-color: #1E78E9;
    */box-shadow:28px 0 0 0 #1E78E9,17px 21px 0 0 #1E78E9,-6px 27px 0 0 #1E78E9,-25px 12px 0 0 #1E78E9, -25px -12px 0 0 #1E78E9,    -6px -27px 0 0 #1E78E9,    17px -21px 0 0 #1E78E9;
    border-radius: 12px;
    animation: rote_loading 1s infinite linear;
    -webkit-animation: rote_loading 1s infinite linear;
}

@keyframes rote_loading {
    to{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
}
}






/* ------------------------ new css  */

.right_body_card_coin canvas {
    width: 100%;
    height: 100%;
}