@import "style-theme.css";

body.body-overflow {
  overflow: hidden;
}

/****************Login***************/

.bg-img-auth{
    background-image: url(../images/loginBg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.auth-content-inner{
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.auth-illustration{
    max-width: 535px;
    width: 100%;
}
.auth-contents{
    max-width: 570px;
    padding-left: 10px;
    padding-right: 10px;
}
.auth-title{
    display: flex;
    width: 100%;
    color: var(--white);
    font-size: 40px;
    line-height: 45px;
    font-family: var(--heavy);
    padding-top: 20px;
}
.auth-text{
    display: flex;
    width: 100%;
    color: var(--white);
    font-size: 15px;
    line-height: 22px;
    font-family: var(--regular);
    margin-top: 12px;
    margin-bottom: 50px;
}
.auth-form-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.auth-form-inner{
    display: flex;
    width: calc(100% - 30px);
    max-width: 435px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.card-auth{
    display: flex;
    width: 100%;
    background-color: #FFF0EB;
    border-radius: 20px;
    flex-wrap: wrap;
    padding: 52px 30px 68px 30px;

}
.auth-heading{
    display: flex;
    width: 100%;
    color: var(--secondary-color);
    font-size: 30px;
    font-family: var(--heavy);
    text-align: center;
    justify-content: center;
}
.auth-welcome{
    display: flex;
    width: 100%;
    color: #6D6D70;
    font-size: 16px;
    text-align: center;
    justify-content: center;
    padding-top: 3px;
    margin-bottom: 20px;
}
.toggle-password, .toggle-password-confirm {
    position: absolute;
    top: 13px;
    right: 12px;
    color: var(--secondary-color);
    font-size: 16px !important;
    cursor: pointer;
}


.main-container {
    display: flex;
    width: 100%;
    padding-right: 30px;
    gap: 20px;
    min-height: 100vh;
}
.trigger-heading{
    display: flex;
    width: fit-content;
    gap: 15px;
}
.header-welcome{
    display: block;
    font-size: 16px;
    color: var(--white);
    font-family: var(--thin);
    padding-bottom: 2px;
}
.header-title{
    display: block;
    font-size: 14px;
    color: var(--white);
    font-family: var(--heavy);
}
.cursor-pointer{
    cursor: pointer;
}

/*********************Top Header Start**********************/

.header-wrapper{
    position: fixed;
    top: 0px;
    padding-top: 30px;
    right: 30px;
    left: 340px;
    background-color: var(--white);
    z-index: 100;
    transition: 0.4s;
}
header#page-topbar {
    background-color: var(--secondary-color);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding-top: 16px;
    padding-bottom: 18px;
    padding-right: 20px;
    padding-left: 20px;
}

header .navbar-header {
    float: right;
}
.header-icons{
    width: 12px;
    height: 12px;
}
.logo-primary{
    width: 148px;
    transition: width 0.4s ease;
}
.top-bar-avatar{
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.top-bar-avatar span{
    font-size: 12px;
    color: var(--white);
}


.top-bar-avatar::after {
    margin-left: 1px;
    color: var(--white);
}

.pageTitle {
    font-size: 25px;
    color: var(--theme-darkgray);
    font-family: var(--semibold);
    line-height: 30px;
    padding-left: 20px;
    float: left;
}

.top-bar-sets {
    display: flex;
    align-items: center;
}

.top-bar-notification {
    position: relative;
    float: left;
    cursor: pointer;
    margin-left: 5px;
}



.top-bar-notification::after {
    display: none;
}

.notify-number {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--theme-red);
    top: -3px;
    right: -7px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
}
.headerMenu{
    display: none;
}
.sidebar.open + .header-menu-backdrop {
    opacity: 1;
    visibility: visible;
}

ul.dropdown-menu{
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}
ul.dropdown-menu li hr{
    margin-top: 0;
    margin-bottom: 0;
}
ul.dropdown-menu li a.dropdown-item{
    padding-top: 10px;
    padding-bottom: 10px;
}


/*********************Top Header End************************/


/*************************Sidebar Start***************************/
.sidebar {
    display: block;
    padding: 30px 0px 30px 0px;
    width: 280px;
    min-width: 280px;
    flex-wrap: wrap;
    background: var(--secondary-color);
    position: fixed;
    top: 30px;
    bottom: 30px;
    left: 30px;
    z-index: 110;
    transition: 0.4s;
    border-radius: 20px;
    
}

.row-logo {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.row-logo a.logoPrimary img {
    height: 51px;
    width: auto;
}

.row-logo a.logoIcon {
    display: none;
}
.row-logo .logo{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
}


.sidebar-nav {
    float: left;
    width: 100%;
    height: calc(100% - 72px);
    padding-left: 30px;
    padding-right: 30px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    transition: padding 0.4s ease;
}

.sidebar-nav ul.main-category-menu {
    float: left;
    width: 100%;
}

.sidebar-nav ul.main-category-menu li.sidebar-list {
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.sidebar-nav ul.main-category-menu li.sidebar-list > a {
    display: flex;
    width: 100%;
    gap: 15px;
    align-items: center;
    font-size: 16px;
    line-height: 18px;
    padding: 11px 25px 11px 19px;
    border-radius: 0 10px 10px 0;
    color: #E0E0E0;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.sidebar-nav ul.main-category-menu li.sidebar-list > a span.menu-name{
    opacity: 1;
    transition: opacity 0.4s ease;
}

.sidebar-nav ul.main-category-menu li.sidebar-list > a span.icon {
    width: 24px;
    min-width: 24px;
    text-align: center;
}

.sidebar-nav ul.main-category-menu li.subNav > a::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    width: 5px;
    height: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
}

.sidebar-nav ul.main-category-menu li.sidebar-list.active > a {
    
    background: #FFF0EB;
    color: var(--secondary-color);
    font-family: var(--heavy);
    position: relative;

}
.sidebar-nav ul.main-category-menu li.sidebar-list.active > a:before {
    position: absolute;
    content: '';
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--primary-color);
}
.sidebar-nav ul.main-category-menu li.sidebar-list > a:hover:before {
    position: absolute;
    content: '';
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--primary-color);
}

.sidebar-nav ul li.sidebar-list > a:hover {
    background: #FFF0EB;
    color: var(--secondary-color);
}

.menu-icon-active{
    display: none;
}
.sidebar-nav ul li.sidebar-list > a:hover .menu-icon,
.sidebar-nav ul li.sidebar-list.active > a .menu-icon{
    display: none;
}
.sidebar-nav ul li.sidebar-list > a:hover .menu-icon-active,
.sidebar-nav ul li.sidebar-list.active > a .menu-icon-active{
    display: block;
}



.main-category-menu {
    height: 100%;
}
body.bodyClosed .sidebar {
  width: 92px;
  min-width: 92px;

}
body.bodyClosed .sidebar-nav {
  padding-left: 15px;
  padding-right: 15px;
}

body.bodyClosed .logo-primary{
    width: 0;
    
}
body.bodyClosed .main-content-container {
  padding: 140px 0 40px 152px;
}
body.bodyClosed .header-wrapper {
  left: 152px;
}

body.bodyClosed .sidebarMenu{
    margin-right: 4px;
}

body.bodyClosed .sidebar-nav ul.main-category-menu li.sidebar-list > a span.menu-name{
    opacity: 0;
}
.header-menu-backdrop {
    z-index: 998;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -khtml-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -ms-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    opacity: 0;
    visibility: hidden;
}
.sidebar{
    z-index: 999;
}

body.bodyClosed.bodyClosedHover .sidebar:hover {
  width: 280px;
  min-width: 280px;
}
body.bodyClosed.bodyClosedHover .sidebar:hover .logo-primary {
  width: 148px;
}
body.bodyClosed.bodyClosedHover .sidebar-nav ul.main-category-menu li.sidebar-list > a span.menu-name {
  opacity: 1;
}
body.bodyClosed .sidebar-nav ul.main-category-menu li.subNav > a::after {
    opacity: 0;
}
body.bodyClosedHover .sidebar-nav ul.main-category-menu li.subNav > a::after {
    opacity: 1;
}


/****Sidebar SubMenu****/

.sidebar-nav ul.main-category-menu li.subNav > a::after {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    width: 8px;
    height: 18px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    margin: auto;
    font-size: 16px;
}


ul.subNavList {
    padding-left: 50px !important;
    margin-bottom: 0px;
    position: relative;
    overflow: hidden;
    display: none;
}

ul.subNavList::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 30px;
    top: 10px;
    bottom: 5px;
    margin: auto;
    background: var(--primary-color);
}

.sidebar-nav li ul.subNavList a {
    margin: 12px 0px 12px 0;
    font-size: 14px;
    color: var(--grey1);
    width: 188px;
}

.sidebar-nav li ul.subNavList a:hover,
.sidebar-nav li ul.subNavList li.active a {
    color: var(--theme-red);
}

.sidebar-nav li ul.subNavList a:hover {
    color: var(--grey2);
}

body.bodyClosed .sidebar-nav li ul.subNavList a{
    opacity: 0;
}
body.bodyClosed.bodyClosedHover .sidebar-nav li ul.subNavList a{
    opacity: 1;
}

/* 
.sidebar-nav ul.main-category-menu li.subNav>a::after {
    transform: rotate(90deg);
}
.sidebar-nav ul.main-category-menu li.sidebar-list.active > a {
    padding: 11px;
    background: var(--theme-red);
    color: var(--theme-white);
    font-family: var(--semibold);
}

.sidebar-nav ul.main-category-menu li.sidebar-list.active > a:hover {
    color: #fff;
}

.sidebar-nav ul li.sidebar-list > a:hover {
    background: var(--white);
    color: var(--primary-color);
}

ul.subNavList {
    display: none;
    padding-left: 50px !important;
    margin-bottom: 0px;
    position: relative;
    overflow: hidden;
}

ul.subNavList::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 23px;
    top: 10px;
    bottom: 5px;
    margin: auto;
    background: var(--secondary-color);
}

.sidebar-nav li ul.subNavList a {
    margin: 12px 0px 12px 0;
    font-size: 14px;
    color: #6e6c85;
}

.sidebar-nav li ul.subNavList a:hover,
.sidebar-nav li ul.subNavList li.active a {
    color: var(--theme-red);
} */


/*************************Sidebar End***************************/

/***********************Notifications and Settings*************/
.top-bar-notification {
    position: relative;
    float: left;
    cursor: pointer;
}

.top-bar-notification img {
    width: 24px;
    float: left;
}

.top-bar-notification::after {
    display: none;
}

.notify-number {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--primary-color);
    top: -12px;
    right: -5px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    font-size: 11px;
}

/* .top-bar-avatar img {
    width: 40px;
} */

.top-bar-avatar::after {
    margin-left: 0.455em;
    color: var(--orange);
}

.dropdown-menu-notification {
    width: 300px;
    padding-top: 0;
    padding-bottom: 0;
}



.dropdown-menu-notification hr {
    margin: 0;
}

.dropdown-item-notify span {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notifyTitle {
    font-size: 14px;
    font-family: var(--extraBold);
    color: var(--dark1);
}
.notifyDesc{
    font-size: 14px;
    font-family: var(--regular);
    color: var(--dark1);
}
a.dropdown-item-notify:hover span.notifyTitle,
a.dropdown-item-notify:hover span.notifyDesc{
    color: var(--dark1);
}


.dropdown-item-notify:hover span {
    color: #fff;
}

.seeAllNotify {
    display: flex;
    width: 100%;
    padding: 7px;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
    border-top: 1px solid #c4c4c4;
}


.seeAllNotify a {
    font-size: 15px;
    font-family: var(--medium);
    color: var(--primary-color);
}

.seeAllNotify a:hover {
    text-decoration: underline;
}




/***********************Notifications and Settings End*************/


.main-content-container {
    width: 100%;
    padding: 140px 0 40px 340px;
    transition: 0.4s;
}




/**************************Dashboard***************************/

.col-statistics-inner{
    display: flex;
    height: 100%;
    border: 1px solid #dad9dc;
    padding: 20px;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
}
.statistics-content{
    padding-right: 10px;
}
.statistics-content-title{
    font-size: 16px;
    color: var(--black-color);
}
.statistics-content-number{
    font-size: 32px;
    color: var(--black-color);
    font-family: var(--bold);
}
.statistics-icon{
    max-width: 48px;
    min-width: 48px;
}

.income-profit{
    margin-top: 30px;
}
.card-income-profit{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    border: 1px solid #dad9dc;
    padding: 20px;
    border-radius: 10px;
}
.card-income-profit-title{
    display: flex;
    width: 100%;
    font-size: 22px;
    color: #1E1E1E;
}
.card-income-profit-filter{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-family: var(--bold);
    font-size: 30px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.attendance-filter-title{
    font-family: var(--heavy);
    font-size: 20px;
    color: var(--dark1);
}

select.form-control.card-filter-select {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14L8 10H16L12 14Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0rem center;
    background-size: 24px 24px;
    padding: 0.3rem 1.9rem 0.3rem 0.75rem;
    background-color: var(--primary-color);
    width: 110px;
    color: var(--white);
    border: none;
    height: 30px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
}
select.form-control.card-filter-select-admin {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 14L8 10H16L12 14Z' fill='%2316151C'/%3E%3C/svg%3E");
    background-color: var(--white);
    color: var(--black-color);
    border: 1px solid #dad9dc;
    width: 115px !important;
}
select.form-control.card-filter-select option{
    font-family: Arial, Helvetica, sans-serif;
}

.card-income-profit-price{
    display: flex;
    width: 100%;
    font-family: var(--extraBold);
    font-size: 20px;
    color: #46BC4A;
    margin-top: 5px;
}
.card-income-profit-comp{
    display: flex;
    width: 100%;
    font-size: 14px;
    color: #7A7A7A;
    margin-top: 5px;
}
.saleChart{
    display: block;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.saleChartMonthly{
    opacity: 1;
    visibility: visible;
    height: auto;
}

.row-table{
    margin-top: 30px;
}
.card-table{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    border: 1px solid #dad9dc;
    padding: 20px;
    border-radius: 10px;
}
.card-title-common{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.card-title{
    display: flex;
    width: 100%;
    font-size: 20px;
    font-family: var(--heavy);
    color: var(--black-color);
}
.card-table-responsive{
    width: 100%;
}
table.tableCommon th{
    color: var(--secondary-color);
    font-size: 15px;
    line-height: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: var(--extraBold);
    font-weight: normal;
}
table.tableCommon tr td{
    color: var(--secondary-color);
    font-size: 14px;
    line-height: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: var(--regular);
    font-weight: normal;
}
.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-accent-bg: transparent;
    color: var(--bs-table-striped-color);
}
.tbl-amount{
    font-family: var(--bold);
    color: var(--primary-color);
}
.card-table-responsive{
    overflow-x: auto;
}



/**********************Admin Dashboard*********************/

.statistics-admin > div{
    margin-bottom: 20px;
}
.col-statistics-inner-admin{
    display: flex;
    height: 100%;
    border: 1px solid #dad9dc;
    flex-wrap: wrap;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
}
.statistics-content-admin{
    width: 100%;
    padding: 20px 16px 13px 16px;
    border-bottom: 1px solid #dad9dc;
}
.statistics-content-title-admin{
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 14px;
    color: var(--secondary-color);
    font-family: var(--extraBold);
    margin-bottom: 20px;
}
.statistics-content-number-admin{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.statistics-content-number-admin > span{
    font-size: 32px;
    color: var(--black-color);
    font-family: var(--heavy);
    line-height: 1;
}
.statistics-percent-admin{
    display: flex;
    width: fit-content;
    align-items: center;
    background-color: var(--green);
    border-radius: 5px;
    padding: 3px 7px 2px 4px;
    color: var(--white);
}
.update-date{
    display: flex;
    width: 100%;
    color: #A2A1A8;
    line-height: 1.2;
    padding: 12px 16px 12px 16px;
}
.statistics-percent-admin-down{
    background-color: var(--red2);
}

.box-activities{
    gap: 15px;
}
.col-activities-container{
    display: flex;
    width: 100%;
    border: 1px solid #dad9dc;
    flex-wrap: wrap;
    border-radius: 10px;
}
.activities-content-header{
    display: flex;
    width: 100%;
    padding: 24px 24px 0 24px;
    background-color: var(--white);
    border-radius: 10px 10px 0 0;
}
.activities-content-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 5px;
    border-bottom: 1px solid #dad9dc;
    padding-bottom: 20px;
}
.activities-content-title span{
    display: flex;
    font-size: 20px;
    font-family: var(--heavy);
}
.activities-content-wrapper{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding: 0px 24px 24px 24px;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.schedules-action{
    min-width: 24px;
    max-width: 24px;
    cursor: pointer;
    margin-top: 32px;
}
.activities-wrapper{
    display: flex;
    width: 100%;
    padding-top: 20px;
    flex-wrap: wrap;
    gap: 40px;
}
.schedules-inner{
    width: 100%;
}
.schedules-box{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.schedules-status-pill{
    display: flex;
    position: relative;
    border-radius: 10px;
    background-color: green;
    font-size: 10px;
    line-height: 1;
    color: var(--white);
    padding: 3px 15px 3px 15px;
    width: fit-content;
}
.schedules-status-pill:before{
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 3px;
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: var(--white);
}
.schedules-box.routine .schedules-status-pill{
    background-color: var(--green);
}
.schedules-box.critical .schedules-status-pill{
    background-color: var(--red3);
}
.schedules-content-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 7px;
    margin-top: 9px;
}
.schedules-content-inner{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 7px;
    border: 0;
    border-left: 1px;
    border-style: solid;
    padding-top: 7px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.schedules-box.critical .schedules-content-inner{
    border-color: var(--red3);
}
.schedules-box.routine .schedules-content-inner{
    border-color: var(--green);
}
.schedules-content-inner .schedules-content-title{
    display: flex;
    font-size: 16px;
    font-family: var(--extraBold);
    width: 100%;
}
.schedules-stats{
    display: flex;
    font-size: 14px;
    width: 100%;
    color: rgba(0, 0, 0, .5);
    padding: 5px 0 9px 0;
}


.schedules-user-time{
    display: flex;
    width: 100%;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.schedules-user-time-col{
    display: flex;
    width: fit-content;
    gap: 8px;
    align-items: center;

}
.schedules-user-time-col img{
    display: flex;
    max-width: 24px;
    min-width: 24px;
}
.schedules-user-time-txt{
    display: flex;
    font-size: 13px;
    color: var(--black-color);
}
.activities-content-wrapper-announce{
    max-height: 182px;
}
.announce-box,
.user-list-wrapper,
.user-list-inner{
    display: flex;
    width: 100%;
}
.announce-box{
    flex-wrap: wrap;
    gap: 22px;
}
.user-list-inner{
    gap: 10px;
}
.user-list-avatar-container{
    display: flex;
    max-width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}
.user-list-avatar-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.user-list-content-box{
    display: flex;
    width: 100%;
    flex-wrap: wrap;    
}
.user-list-title{
    display: flex;
    width: 100%;
    color: var(--black2);
    font-size: 16px;
    line-height: normal;
    margin-bottom: 5px;
}
.user-list-txt{
    display: flex;
    width: 100%;
    color: var(--grey2);
    font-size: 14px;
    line-height: normal;
}
.user-action{
    margin-top: 0;
}

.user-tbl{
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-tbl-avatar{
    display: flex;
    max-width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}
.user-tbl-avatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}