.dasboardContainer {
    background-color: #ececef;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.dashboard {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.dashboardItem {
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 20px;
}

.dashboardItem2 {
    grid-column: span 2;
}

.dashboardItem3 {
    grid-column: span 3;
}

.dashboardItem4 {
    grid-column: span 4;
}

.dashboardItem5 {
    grid-column: span 5;
}

.dashboardItem6 {
    grid-column: span 6;
}

.dashboardItem7 {
    grid-column: span 7;
}

.dashboardItem8 {
    grid-column: span 8;
}

.dashboardTop {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 18px;
    width: 100%;
    padding: 0;
    background-color: transparent;
}

.dashboardItemLeft {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 2px;
    cursor: pointer;
}

.dashboardItemTitle {
    font-size: 14px;
    margin: 0;
    user-select: none;
}

.dashboardItemTitleSmall {
    user-select: none;
    font-size: 13px;
    color: #999;
}

.dashboardItemUserImg {
    width: 48px;
    height: 48px;
    background-color: #FFF;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    font-size: 22px;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 1);
}

.dashboardItemUserImgFile {
    width: 48px;
    height: 48px;
}

.dashboardItemRight {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 20px;
}

.dashboardStatInfo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    gap: 0px;
}

.dashboardStatInfoTitleSmall {
    font-size: 13px;
    color: #999;
    margin-bottom: 20px;
}

.dashboardStatInfoTitleSmall1 {
    font-size: 13px;
    color: #999;
    margin-bottom: 0;
    user-select: none;
}

.dashboardStatInfoBigText {
    font-size: 20px;
}

.dsbBtnSmall {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 10px;
    padding: 6px 8px 6px 8px;
    background-color: #FFF;
    border: 1px solid #d7d7d7;
    user-select: none;
    cursor: pointer;
}

.dsbOrderList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 21px;  
    margin-top: 20px; 
}

.dsbOrderListItem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 40px;
    row-gap: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 16px 15px 20px;
    border-radius: 7px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.dsbOrderListItem:after {
    display: block;
    content: "";
    width: calc(100% - 14px);
    height: 1px;
    position: absolute;
    bottom: -11px;
    left: 7px;
    right: 7px;
    background-color: #E6E6E6;
}

.dsbOrderListItem:last-child:after {
    display: none;
}


.dsbOrderListItemIcon {
    position: absolute;
    bottom: -10px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    position: relative;
    top: 5px;
    left: 5px;
}

.dsbOrderListItem:hover {
    background-color: #E0E0E0;
}

.dsbOrderListItemOrder {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 5px;
}

.dsbOrderListItemNumber {
    font-size: 20px;
}

.dsbOrderListItemValue {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    align-content: flex-end;
    gap: 5px;
    margin-left: auto;
    font-size: 14px;
}

.dsbOrderListItemSmallText {
    font-size: 12px;
    color: #999;
}

.dashboardItemHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 12px;
}

.dsbSmBtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 8px;
    padding: 7px 12px 7px 12px;
    border-radius: 7px;
    background-color: #FFF;
    color: #999;
    user-select: none;
    cursor: pointer;
}

.dsbSmBtn:hover {
    color: #000;
    background-color: #EFEFEF;
    text-decoration: none;
}

.dsbSmBtnIcon {
    position: relative;
    top: -1px;
    font-size: 16px;
}

.chartContainer {
    width: 100%;
    height: 480px;
}

.dashboardUserInfoBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 16px;
    background-color: #FFF;
    padding: 16px 18px 16px 16px;
    border-radius: 14px;
}

.dashboardModuleSlider {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    column-gap: 5px;
    row-gap: 20px;
    overflow: hidden;
}

.moduleListItem {
    color: #444;
    text-decoration: none;
    width: calc(10% - 19px);
    height: 96px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 15px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1;
}

.moduleListItem:hover {
    color: #444;
    text-decoration: none;
    background-color: #EFEFEF;
}

.moduleListItemIcon {
    font-size: 28px;
}

.moduleListItemTitle {
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 10px);
}










.dsbList {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 21px;  
    margin-top: 20px; 
}

.dsbListItem {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 25px;
    row-gap: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 15px 16px 15px 20px;
    border-radius: 7px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s;
    position: relative;
}

.dsbListItem:after {
    display: block;
    content: "";
    width: calc(100% - 14px);
    height: 1px;
    position: absolute;
    bottom: -11px;
    left: 7px;
    right: 7px;
    background-color: #E6E6E6;
}

.dsbListItem:last-child:after {
    display: none;
}

.dsbListItemIcon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    position: relative;
    top: 5px;
    left: 5px;
}

.dsbListItem:hover {
    background-color: #E0E0E0;
}

.dsbListItemRow {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 5px;
}

.dsbListItemNumber {
    font-size: 20px;
}

.dsbListItemSmallText {
    font-size: 12px;
    color: #999;
}

.dsbListItemText {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;   
}

.dashboardStatInfoBigText1 {
    color: #444;
}








































.mainDateFilter {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-start;
    gap: 5px;
    margin: 7px 10px 7px 20px;
}

.filterItem {
    box-sizing: border-box;
    padding: 5px 8px;
    border-radius: 3px 20px;
    font-size: 12px;
    cursor: pointer;
}

.filterItem:hover {
    background-color: #EFEFEF;
}

.filterItemActive {
    background-color: #5692dc !important;
    color: #FFFFFF;
}

.filterItemMore {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
}

.filterItemMore:hover {
    background-color: #EFEFEF;
}

.mainDateFilterIcon {
    font-size: 17px;
}
.mainLayout {
    width: 100%;
    height: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    box-sizing: border-box;
    background-color: #ececef;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
}

.mainLayoutItem {
    background-color: #FFF;
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.mainLayoutItemSpan2 {
    grid-column: span 2;
}

.mainLayoutItemSpan3 {
    grid-column: span 3;
}

.mainLayoutItemSpan4 {
    grid-column: span 4;
}

.mainLayoutItemSpan5 {
    grid-column: span 5;
}

.mainLayoutItemSpan6 {
    grid-column: span 6;
}

.mainLayoutItemSpan7 {
    grid-column: span 7;
}

.mainLayoutItemSpan8 {
    grid-column: span 8;
}

.mainStats {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    user-select: none;
    overflow: hidden;
    /*
    height: 541px;
    */
}

.mainStatsBox {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.mainStatsBoxItem {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 5px;
    border-left: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;
    /*
    background-color: #EFEFEF;
    */
    padding: 20px;
    cursor: pointer;
}

.mainStatsBoxItem:hover {
    background-color: #F6F6F6;
}

.mainStatsBoxItemActive {
    background-color: #FFFFFF;
}

.mainStatsBoxItem:nth-child(1) {
    border: 0;
}

.mainStatsBoxItemTitle {
    font-size: 11px;
    margin-bottom: 10px;
}

.mainStatsBoxItemBigText {
    font-size: 26px;
    
}

.mainStatsBoxItemBigTextCompare {
    font-size: 14px;
}

.mainStatsBoxItemInfoCompare {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    gap: 7px;
    font-size: 14px;
}

.mainStatsTopbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    padding: 20px 10px 0 20px;
    gap: 20px;
    width: calc(100% - 30px);
}

.mainStatsBoxItemFull {
    font-size: 16px;
    padding: 20px;
    grid-column-start: 1;
    grid-column-end: 5;
    border-bottom: 1px solid #d7d7d7;
}

.mainStatsTopbarFilter {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 5px;
}

.filterItem {
    box-sizing: border-box;
    padding: 5px 8px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
}

.filterItem:hover {
    background-color: #EFEFEF;
}

.filterItemActive {
    background-color: #5692dc !important;
    color: #FFFFFF;
}

.filterItemMore {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    font-size: 18px;
}

.filterItemMore:hover {
    background-color: #EFEFEF;
}

.mainStatsTopbarTitle {
    font-size: 16px;
}

.mainList {
    width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 40px;
    border-radius: 3px;
    border: 1px solid #D7D7D7;
}

.mainListItem {
    width: 100%;
    background-color: #FFF;
    border-radius: 6px;
    overflow: hidden;
    display: flex;  
}

.mainListItemTitle {
    padding: 16px;
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #EFEFEF;
}

.mainIconDashboard {
    width: calc(100% - 40px);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    margin: 20px;
}

.appItemDashboard {
    color: #444;
    text-decoration: none;
    width: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 15px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1;
}

.appItemDashboard:hover {
    color: #444;
    text-decoration: none;
    background-color: #f2f2f2;
}

.mainLayoutItemInfo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    margin: 20px;
    gap: 10px;
    width: calc(100% - 40px);
}

.mainLayoutItemInfoTitle {
    font-size: 12px;
}

.mainLayoutItemInfoValue {
    font-size: 26px;
}

.centerInfo {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 20px;
    color: #999;
    margin: 0 auto;
    user-select: none;
}

.centerInfoIcon {
    color: #999;
    font-size: 48px;
    margin: 0;
}

.centerInfoText {
    text-align: center;
    line-height: 1.5em;
}

.myaccountHeader {
    background-color: #EFEFEF;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 75%);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;
    min-width: 420px;
    border-bottom: 1px solid #d7d7d7;
    position: relative;
}

.mahAvatar {
    width: 96px;
    height: 96px;
    background-color: #FFFFFF;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid #d7d7d7;
    user-select: none;
    cursor: pointer;
}

.mahAvatarImg {
    width: 100%;
    height: 100%;
    user-select: none;
    cursor: pointer;
}

.mahInput {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    padding: 20px 20px 0 20px;
}

.mahInput label {
    margin: 0;
}

.mahRole {
    font-size: 12px;
    color: #666666;
}

.mahMail {
    font-size: 16px;
    color: #666666;
}

.mahSetPassword {
    position: absolute;
    top: 11px;
    right: 11px;
}

#myaccountsetpassword {
    min-width: 320px;
}

.userPasswordGenneratorInput {
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 0;
    cursor: pointer;
}

.userPasswordGenneratorInputBtn {
    box-sizing: border-box;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 33px;
    height: 33px;
    transition: background-color 0.2s;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #d7d7d7;
    border-left: 0;
    background-color: #EFEFEF;
}

.userPasswordGenneratorInputBtn:hover {
    background-color: #dadada;
}

#suggestPassword {
    border: 1px solid #d7d7d7;
    box-sizing: border-box;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-right: 0;
    width: 155px;
    height: 33px;
    background-color: #EFEFEF;
    color: #AAAAAA;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}