/* ////////////////////////////////////////// */
.m_l_45 {
    margin-left: 45px;
}
.m_t_15 {
    margin-top: 15px;
}
.m_t_20 {
    margin-top: 20px;
}
.m_t_30 {
    margin-top: 30px;
}
.m_t_50 {
    margin-top: 50px;
}
.m_t_70 {
    margin-top: 70px;
}

@media (max-width:768px) {
    .m_t_70 {
        margin-top: 0;
    }
}

.m_b_15 {
    margin-bottom: 15px;
}
.m_b_20 {
    margin-bottom: 20px;
}
.m_b_30 {
    margin-bottom: 30px;
}


.p_y_10 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.p_y_15 {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
.p_t_20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.p_x_15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.p_x_50 {
    padding-left: 50px;
    padding-right: 50px;
}

.pdx_20_wh {
    padding-left: 10%;
    padding-right: 10%;
}


.width_80_wh {
    width: 80%;
}

.fsz_13_wh {
    font-size: 13px !important;
}
.fsz_17_wh {
    font-size: 17px !important;
}
.fsz_20_wh {
    font-size: 20px !important;
}
.fsz_24_wh {
    font-size: 24px !important;
}
.fsz_30_wh {
    font-size: 30px !important;
}

.f_bold_wh {
    font-weight: bold;
}
.ifsz_30_wh {
    font-size: 24px !important;
    height: 24px;
}
.card_title_wh {
    font-size: 16px;
    font-weight: bold;
}
.table{
    /* background: linear-gradient(180deg, #231F20 0%, rgba(35, 31, 32, 0) 100%); */
    /* border: 2px solid rgba(184, 184, 184, 0.1); */
    border-radius: 10px;
    border-collapse: collapse;
}
table, td, tr, th {
    color: white;
    
}

table > thead > tr > th {
    color: #999 !important;
    border: none !important;
}
table > thead > tr {    
    /* border-top: 1px solid #aaa; */
    border-bottom: 1px solid #aaa !important;    
    border-collapse: collapse;
}
table tbody tr {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: transparent !important;
}
.table-responsive::-webkit-scrollbar {
height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
background: #000;
}
.table-responsive::-webkit-scrollbar-thumb {
background: rgb(62, 62, 62);
}
.badge-success {
    color: #a8e863;
    border: 1px solid #a8e863 ;
}
.border_circle_wh {
    border-radius: 50% !important;
    overflow: hidden;
}
.text_primary_wh {
    color: #a8e863 !important;
}
.text_gold_wh {
    color: #ffa149 !important;
}
.text_white_wh {
    color: #fff !important;
}
.jcc_wh {
    display: flex;
    justify-content: center;
}
.jcc_flexdcol_wh {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* background: coral; */
}
.jcsb_wh {
    display: flex;
    justify-content: space-between;
}
.aic_wh {
    display: flex;
    align-items: center;
}
.posrel_wh {
    position: relative;
}
.gap_20_wh {
    gap: 20px !important;
}
.title_bold_grey_wh {
    font-size: 17px;
    font-weight: bold;
    color: #777 !important;
}
.view_icons {
    border: 1px solid #a8e863 ;
    border-radius: 35px;
    height: fit-content;
    display: flex;
    align-items: center;
    padding: 3px 5px;
    gap: 10px;
}
.view_icons i {
    font-size: 22px;
    height: 22px;
}
.primary_btn_wh {
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    background: #a8e863;
    border: none !important;
    border-radius: 10px;
    padding: 5px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
}
.primary_btn_wh.lg{
    font-size: 25px;
}
.primary_btn_wh i {
    height: 20px;
}
.primary_btn_outline_wh {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border: none;
    background: transparent !important;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: white;
}
.primary_btn_outline_wh i {
    height: 20px;
}
.primary_btn_outline_wh:hover {
    opacity: .9;
}
/* ************************* */
.secondary_btn_outline_wh {
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #aaa;
    background: transparent !important;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #aaa;
}
.secondary_btn_outline_wh i {
    height: 20px;
}
.secondary_btn_outline_wh:hover {
    /* border: 1px solid #fff !important; */
    color: #fff;
}


.search-form {
    position: relative;
    width: 200px;
}
.search-form i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -25px;
}
.search-form input {
    background: transparent;
    color: #fff;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 12px;
    border-radius: 0;
    border-bottom: 2px solid #a8e863;
}
.search-form input:focus {
    background: transparent;
    border: none;
    border-bottom: 2px solid #a8e863;
}

.pagination_container_wh {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.pagination_container_wh .numbers{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.pagination_container_wh .numbers span {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination_container_wh .numbers .active {
    color: #a8e863;
    background: rgba(167, 232, 99, 0.1);
    height: 25px;
    width: 25px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination_container_wh .prev_wh,
.pagination_container_wh .next_wh {
    background:white;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25px;
    width: 50px;
}
.pagination_container_wh .prev_wh i,
.pagination_container_wh .next_wh i {
    color: #000;
    height: 22px;
    font-size: 20px;
}
.pagination_container_wh .prev_wh:hover,
.pagination_container_wh .next_wh:hover {
    background: #a8e863;
}
.pagination_container_wh .prev_wh:hover i,
.pagination_container_wh .next_wh:hover i {
    color: #fff;
}

.full_screen_wh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    padding-top: 50px;
    /* border: 1px solid coral; */
}

.fullw_wh {
    width: 100%;
}



/* ////////////////////////////////////////// */
#app > div.container-scroller > div > div > div > div:nth-child(1) > div > div > div.card-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.dash_infos_container {
    display: flex;
    justify-content: space-evenly;
}
.dash_info_item {
    display: block;
    padding: 25px;
    position: relative;
    /* border-left: 1px solid #777; */
}
.dash_info_item:first-child {
    border-left: none;
}
.dash_info_item::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background: #555;
}
.dash_info_item:first-child::after {
    background: transparent;
}


.icons_texts_container_wh {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.icon_text_big_wh {
    display: flex;
    width: 100%;
    gap: 10px;
}
.icon_text_big_wh i {
    /* height: 24px !important; */
    font-size: 28px !important;
}
.icon_text_big_wh span {
    font-size: 20px;
    font-weight: bold;

}
.icon_text_wh {
    display: flex;
    /* width: 100%; */
    gap: 10px;
}
.icon_text_wh .icon_box {
    height: 27px;
    width: 27px;
    border-radius: 50%;
    color: black;
    font-size: 18px;
    font-weight: bolder;
    background: linear-gradient(to bottom, #a8e863e6 50%, #a8e86300 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon_text_wh .icon_box.red_bg_wh {
    background: linear-gradient(to bottom, #E30000 50%, #231f20 100%);
}
.icon_text_wh .icon_box.orange_bg_wh {
    background: linear-gradient(to bottom, #FFAB00 50%, #FFAB0000 110%);
}
.icon_text_wh .icon_box.blue_bg_wh {
    background: linear-gradient(to bottom, #00a3ff 50%, #231f20 110%);
}
.icon_text_wh .text_box {
    font-size: 14px !important;
    font-weight: bold;
}
.amount_pill_wh {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.amount_box {
    font-size: 25px;
    font-weight: bold;
}
.amount_box span {
    opacity: 0.6;
}
.pill_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    font-weight: bold;
    height: 20px;
    color: #a8e863;
}
.pill_box.green_wh {
    color: #a8e863;
}
.pill_box.red_wh {
    color: #e86363;
}


/* ////////////////////////////////////////// */

.dash_activities_container {
    display: flex;
    flex-wrap: wrap;
}
.dash_activity_item {
    display: block;
    padding: 25px;
    border-left: 1px solid #555;
    max-width: 260px;
}
.dash_activity_item:first-child {
    border-left: none;
}


.avatar_paragraph_wh {
    position: relative;
    margin-left: 30px;
}
.avatar_paragraph_wh .avatar{
    position: absolute;
    box-sizing: border-box;
    top: -5px;
    left: -40px;
}
.avatar_thumbnail_wh {
    border-radius: 50%;
    overflow: hidden;
    //width: 33px;
    //height: 33px;
   height: 45px; width: 45px;
}
.avatar_thumbnail_wh img {
    object-fit: cover;
    width: 100%;
    height: auto;
}
/* #### */
.avatar_thumbnail_bigger_wh {
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
}
.avatar_thumbnail_bigger_wh img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* #### */ 
.avatar_paragraph_wh .paragraph{
    color: #777;
    font-weight: bold;
    font-size: 15px;
}
.avatar_paragraph_wh .paragraph .flag{
    position: absolute;
    top: -18px;
    left: 0;
}
.avatar_paragraph_wh .paragraph .text span {
    color: white;
}
.avatar_paragraph_wh .paragraph .timeframe {
    font-weight: normal;
    font-size: 13px;
}


/* //////////////////////////////////////////////////////////////////// */

.page_title_wh {
    font-size: 40px !important;
    font-weight: bold;
    border-left: 5px solid #a8e863 !important;
    padding-left: 20px;
}
.page_subtitle_wh {
    font-size: 30px !important;
    font-weight: bold;
}

/* //////////////////////////////////////////////////////////////////// */
 /* .search-form {
    position: relative;
    margin-right: 0;
    vertical-align: middle;
    height: 14px;
  }
  
  .rtl .search-form {
    margin-right: 0;
    margin-left: 0;
  }
  
 .search-form i {
    font-size: 1.25rem;
    position: absolute;
    left: 0;
    top: 60%;
    transform: translateY(-50%);
    color: #212121;
  }
  
  .rtl .search-form i {
    left: auto;
    right: 0;
  }
  
 .search-form input {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 0;
    height: 24px;
    padding: 0 0 0 20px;
    position: relative;
    transition: width 400ms ease, background 400ms ease;
  }
  
 .search-form input:focus {
    background-color: transparent;
    border-bottom: 1px solid #212121;
    border-radius: 0;
    padding-left: 30px;
    cursor: text;
    outline: 0;
    width: 140px;
  }
  
  .rtl .search-form input:focus {
    padding-right: 30px;
    padding-left: 0;
  } */



  .just_space_between_wh {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .just_space_between_wh .left_side_wh,
  .just_space_between_wh .right_side_wh {
    display: flex;
    align-items: center;
    gap: 25px;
  }

  .clients_grid_container_wh {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 30px;
  }
  .client_item {
    padding: 20px;
    background: #000;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 10px;
    margin: 15px;
    overflow: hidden;
    position: relative;
  }
  .client_item_clickable_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
  }
  /* .client_item:nth-child(3n+2) {
    border-left: 1px solid #555;
    border-right: 1px solid #555;
  } */

.avatar_title_container_wh {
    display: flex;
    /* gap: 80px; */
    width: 100%;
    padding-right: 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.avatar_title_wh {
    display: flex;
    align-items: center;
    gap: 10px;
}
.avatar_title_wh .title{
    border-bottom: 4px solid #A7E863;
    padding: 12px 2px;
    min-width: 290px;
}
.client_item .avatar_title_wh .title{
    border-bottom: none;
    padding: 12px 8px;
    min-width: auto;
}

.go_back_btn_wh {
    font-size: 40px;
    color: #a8e863 !important;
    position: absolute;
    top: 15px;
    right: -100px;
}
/* ///////////////////////////// CUSTOM DROPDOWN START ////////////////////////////////////// */
.custom_select_container_wh {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}
/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    font-family: Arial;
  }
  
  .custom-select select {
    display: none; /*hide original SELECT element:*/
  }
  
  .select-selected {
    background-color: #231F20;
    border: 1px solid #777;
    border-radius: 10px;
  }
  
  .custom-select i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  /*style the arrow inside the select element:*/
  /* .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
  } */
  
  /*point the arrow upwards when the select box is open (active):*/
  /* .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
  } */
  
  /*style the items (options), including the selected item:*/
  .select-items div,.select-selected {
    color: #ffffff;
    padding: 10px 16px;
    border: 1px solid rgba(184, 184, 184, 0.1);
    /* border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
    cursor: pointer;
    user-select: none;
  }
  
  /*style items (options):*/
  .select-items {
    position: absolute;
    background-color: #231F20;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /*hide the items when the select box is closed:*/
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }


  /* .select_chevron_wh {
    z-index: 10;
  } */
/* ///////////////////////////// CUSTOM DROPDOWN END ////////////////////////////////////// */

.dropdown_menu_icon_button,
.dropdown_menu_icon_button:hover {
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
}
.dropdown_menu_icon_button.dropdown-toggle:after {
    display: none !important;
}

.dropdown_menu_wh {
    background: #000;
    border: 1px solid #555;
    box-shadow: unset !important;
}
.dropdown_menu_wh .dropdown-item {
    font-weight: bold;
}
.dropdown_menu_wh .dropdown-item:hover {
    background-color: #555;
}

.dd_menu_mini_wh {
    transform: translate(-40px, 30px) !important;
}
/* ================================================================================ */
/* .bar_info_container_wh {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
} */
.bar_info_container_wh {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 100px;
}

.bar_info_container_wh .bar_titles_wh,
.bar_info_container_wh .bar_subtitles_wh {
    /* display: flex;    
    justify-content: space-between; */
}
.bar_info_container_wh .bar_titles_wh > div:last-child,
.bar_info_container_wh .bar_subtitles_wh > div:last-child {
    text-align: right;
}

.bar_info_container_wh .bar_visual_wh {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 15px;
    background-color: #ff4141;
    margin: 10px 0;
}
.bar_info_container_wh .bar_visual_wh .bar_filler_wh{
    /* width: 78%; */
    height: 5px;
    border-radius: 15px;
    background-color: #a8e863;
}


/* .bar_visuals_col_container_wh {
    width: 300px;
    display: flex;
    flex-direction: column;
} */
.bar_visuals_col_container_wh {
    width: 100%;
    display: flex;
  	align-items:end;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media (max-width:1200px) {
    .bar_info_container_wh {
        padding: 0 25px;
    }
}