:root {
    --primary-color: rgb(1, 104, 250) ; /*#22baa0*/
    --primary-active: #0051d4; /*#008075*/
    --primary-hover: #52a5ff; /*#16af95*/

    --sub-color: #f0f0f0;
    --sub-border: #eee;
    --sub-border-1: #ddd;

    --color-yellow: #edff14;

    --color-white: #fff;
    --color-black-880: rgba(0, 0, 0, 0.88);
    --color-blue-700: rgba(29,78,216, 1);

    --height-header: 60px;

    --width-sidebar: 320px;
    --width-croll-body: 6px;
}

html{
    font-family: Fahkwang, 'segoe ui', Roboto, 'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji';
    overflow: hidden;
}

body {
    overflow-y: auto;
    overflow-x: hidden;
    line-height: 1.4;
    color: var(--color-black-880);
}


/* header  */
.w30s-header {
    width: 100%;
    height: var(--height-header);
    background: var(--color-white);
    border-bottom: 1px solid var(--sub-border-1);
    display: flex;
    align-items: stretch;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.w30s-header .ant-menu-light {
    flex: 1 0 auto;
    line-height: var(--height-header);
    /* background: var(--primary-color);
    color: var(--color-white); */
}
.w30s-header a {color: var(--color-black-880);}
.w30s-header .ant-menu-light >.ant-menu-item-selected{
    color: var(--color-white);
    background: var(--primary-active);
    
}
.w30s-header .ant-menu-light .ant-menu-item::after{
    border: 0 !important;
}
.w30s-header .ant-menu-light.ant-menu-horizontal >.ant-menu-item,
.w30s-header .ant-menu-light.ant-menu-horizontal >.ant-menu-submenu{
    border-radius: 0 !important;
}
.w30s-header>:last-child:hover,
.w30s-header .ant-menu-light .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected),
.w30s-header .ant-menu-light .ant-menu-submenu-title:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected){
    /* color: var(--color-white);
    background: var(--primary-hover); */
}
.w30s-header .w30s-icon-menu {
    padding: 0 20px;
    color: var(--color-black-880);
    align-self: center;
    cursor: pointer;
    font-size: 16px;
}
.w30s-header .w30s-icon-menu:hover{
    color: var(--primary-hover);
}
.w30s-header .w30s-icon-menu .ant-space-item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
}
.w30s-header .w30s-logo{
    padding-right: 20px;
    justify-content: center;
}
.w30s-header .w30s-logo img{
    /* height: calc(100% - 10px); */
    max-height: 40px;
    margin-right: 7px;
}
/* End header  */

/* Box content  */
.w30s-box-content {
    border-top: 1px solid var(--color-gray-200);
    padding: 1.5rem;
}
/* End Box content */

/* Sidebar left  */
.w30s-sidebar-box {
    width: var(--width-sidebar);
    height: calc(100vh - var(--height-header));
    border-right: 1px solid var(--color-gray-300);
    /* overflow: hidden; */
    position: sticky;
    top: var(--height-header);
}
.w30s-sidebar-box .w30s-sidebar-header{
    position: fixed;
    top: var(--height-header);
    width: var(--width-sidebar);
    height: 39px;
    left: 0;
    padding: 10px;
    font-size: 16px;
    background-color: #f3f3f3;
    border-bottom: 1px solid var(--color-gray-300);
    border-right: 1px solid var(--color-gray-300);
    z-index: 1;
    align-items: center;
}
.w30s-sidebar-box .w30s-sidebar {
    background-color: var(--primary-color);
    color: var(--color-white);
    text-align: center;
    height: calc(100vh - var(--height-header));
/*    overflow: auto;*/
}
.w30s-sidebar-box .w30s-sidebar .w30s-group-item{
    cursor: pointer;
    border: 1px solid transparent;
    padding-left: 2px;
    padding-right: 2px;
}
.w30s-sidebar-box .w30s-sidebar .w30s-group-item.actived{
    background-color: var(--color-blue-700);
}
.w30s-sidebar-box .w30s-sidebar i{
    font-size: 20px;
}
.w30s-sidebar-box .w30s-sidebar small{
    font-size: 70%;
    font-weight: 500;
}
.w30s-sidebar-box .w30s-sidebar-sub{
    height: 100vh;
    height: calc(100vh - var(--height-header));
    overflow-y: auto;
}

.w30s-sidebar-sub .ant-menu-dark{
    color: var(--color-white);
}
.w30s-sidebar-sub .ant-menu-dark .ant-menu-item:hover:not(.ant-menu-item-selected):not(.ant-menu-submenu-selected), 
.w30s-sidebar-sub .ant-menu-dark .ant-menu-item-selected, 
.w30s-sidebar-sub .ant-menu-dark>.ant-menu .ant-menu-item-selected {
    background-color: inherit;
    color: var(--color-yellow);
}

/* Custom scrollbar firefox*/
.w30s-sidebar,
.w30s-sidebar-sub,
.w30s-sidebar-box {
    scrollbar-width: thin;
    scrollbar-color:  #3e4150 var(--color-gray-600);
}
.w30s-sidebar::-webkit-scrollbar,
.w30s-sidebar-sub::-webkit-scrollbar,
.w30s-sidebar-box::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}
.w30s-sidebar::-webkit-scrollbar-thumb,
.w30s-sidebar-sub::-webkit-scrollbar-thumb,
.w30s-sidebar-box::-webkit-scrollbar-thumb {
    background: #3e4150; 
}
.w30s-sidebar::-webkit-scrollbar-thumb:hover,
.w30s-sidebar-sub::-webkit-scrollbar-thumb:hover,
.w30s-sidebar-box::-webkit-scrollbar-thumb:hover {
    background: #888;
}
.w30s-sidebar::-webkit-scrollbar-track,
.w30s-sidebar-sub::-webkit-scrollbar-track,
.w30s-sidebar-box::-webkit-scrollbar-track {
    background: var(--color-gray-600); 
}
/* End Sidebar left  */


.no-sidebar #w30s-main-body {
    --width-sidebar: 0px;
}
.no-sidebar .w30s-sidebar-box {
    display: none!important;
}

/* Main */
.w30s-main {
    margin-top: var(--height-header);
}
.w30s-box-header {
    /* background: var(--sub-color); */
    /* border-bottom: 1px solid var(--color-gray-200); */
    padding: 1rem 1.5rem 1rem 1.5rem;
}
.w30s-box-search {
    padding: 1rem 1.5rem;
}
/* .w30s-main .ant-layout #w30s-page-body {
    margin: 0;
    min-height: calc(100vh - 120px);
} */
#w30s-main-body .ant-table-wrapper .ant-table-thead >tr>th{
    background: #fff;
}
/* End Main */


/* File manager */
#w30s-file-manager {
    width: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100vh - 100px);
    z-index: 1200;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background: #fff;
}
/* End File manager */

/* End Progress bar */
.w30s-progress-bar {
    position: relative;
    height: 10px;
    background: #fff;
    border: 1px solid #0168fa; /*#2989ff*/
    --progress-percent: 0;
    transition: width 0.4s;
}
.w30s-progress-bar::before {
    transition: width 0.4s;
    position: absolute;
    content: "";
    top:0;
    left: 0;
    bottom: 0;
    width: var(--progress-percent, 5%);
    background-color: #0168fa;
    max-width: 100%;
}
/* End progress bar */



/* Button table */
td>a+a{
    margin-left: 15px;
}

/* custom expand */
.w30s-row-expand:hover>td,
.w30s-row-expand{
    background: var(--color-gray-200) !important;
}
.w30s-row-expand .ant-table-cell {
    border-bottom-color: var(--color-gray-200) !important;
}
.ant-table-expanded-row  .ant-table-cell .w30s-box-expanded{
    margin: -16px;
    border: 5px solid var(--color-gray-200);
    padding: 16px;
}
/* end expand */

/*carousel*/
.ant-carousel .slick-prev,
.ant-carousel .slick-next,
.ant-carousel .slick-prev:hover,
.ant-carousel .slick-next:hover {
  font-size: inherit;
  color: currentColor;
}

.slick-dots.w30s-dots li.slick-active button ,
.slick-dots.w30s-dots li button {
    background:var(--color-blue-700); /* var(--color-blue-700)  #642828 */
}
/* end carousel*/

/* Custom Scrollbar */
/* width */
::-webkit-scrollbar {
    width: var(--width-croll-body);
    height: var(--width-croll-body);
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: var(--width-croll-body);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
/* End Custom Scrollbar */