.main-control{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; border: 0px solid var(--main-control-border-color); background-color: var(--main-control-bg-color); overflow:hidden; z-index: 1;}

.app-main > .app-list-header{position:absolute; top:0px; left:0px; right: 0px; bottom:auto; background-color: var(--default-light-color); border-bottom: 1px solid var(--app-list-header-border-color); text-align:right; width:auto; height: auto;}
.app-main > .app-list-header > span{position:absolute; top: 50%; left: 0px; width:auto; height:auto; transform:translateY(-50%); max-width: calc(100% - 125px); overflow:hidden; text-overflow: ellipsis; white-space:nowrap; padding-left: 10px; color: #fff; display:block;}
.app-main > .app-list-header .curent-user-tool-bar{top:0px; left:0px; width:auto; height:auto; padding: 0px; background-color: var(--app-list-header-curent-user-tool-bar-bg-color); color: var(--app-list-header-curent-user-tool-bar-font-color);}
.app-main > .app-list-header .curent-user-tool-bar .item .sub-panel::after{border-color: var(--app-list-header-curent-user-tool-bar-item-sub-panel-after-border-color);}
.app-main > .app-list{position:absolute; top:33px; left:0px; right:0px; bottom:0px; background-color: var(--app-list-bg-color);}

.app-list .app-item{position:relative; top:0px; left:0px; width:250px; height:86px; max-width: 100%; display:inline-block; margin: 10px; border: 1px solid var(--app-item-border-color); border-radius: 5px; padding: 15px; cursor:pointer; text-align:left; overflow:hidden; transition: 0.3s;}
.app-list .app-item:hover{border-color: var(--app-item-hover-border-color); box-shadow: var(--bubble-notification-shadow);}
.app-list .app-item *{pointer-events: none;}
.app-list .app-item .icon{position:relative; top:0px; left:0px; width:32px; height:32px; color: var(--app-item-icon-font-color); font-size: 32px; margin-right: 15px; vertical-align: top; display:inline-block; float:left;}
.app-list .app-item div{position:relative; top:0px; left:0px; width: calc(100% - 60px); height:auto; line-height:18px !important; text-align:left; cursor:pointer; white-space:normal; word-wrap:break-word; vertical-align:top; display:inline-block; float:left;}
.app-list .app-item .name{color: var(--app-item-name-font-color); font-weight:500; height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.app-list .app-item .description{color: var(--app-item-description-font-color); font-size: 12px; margin-top: 5px; height:36px; overflow:hidden;}
.app-list .app-item.disabled{cursor:default; pointer-events:none;}
.app-list .app-item.disabled .name, .app-item.disabled .icon{color: var(--app-item-disabled-name-font-color);}
.app-list .app-item.disabled .description{color: var(--app-item-disabled-description-font-color);}
.app-list .app-item.disabled:hover{border-color: var(--app-item-disabled-hover-border-color);}

.app-main{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:100%;}
.app-main .app-header{position:relative; top: 0px; left: 0px; width: 100%; height:65px; padding: 0px; margin: 0px; display:none;}
.app-main .app-header > i:first-of-type{position:absolute; top: 50%; left: 5px; width: 40px; height: 40px; transform:translateY(-50%); font-size: 25px; z-index: 2; display:block;}
.app-main .app-header > i:first-of-type:before{position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); display:block;}
.app-main .app-header > span:first-of-type{position:absolute; top: 50%; left: 50px; right: 110px; width:auto; height:auto; transform:translateY(-50%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size: 25px; line-height: 40px;}
.app-main .app-menu{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height: auto; background-color: var(--app-menu-bg-color); z-index:2; border-bottom: 1px solid var(--ribbon-tab-pages-border-color);}
.app-main .app-menu .menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; list-style:none; padding: 0px; margin: 0px; background-color: var(--default-light-color);}
.app-main .app-menu .menu li{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline-block; vertical-align:middle; padding: 0px; margin: 0px;}
.app-main .app-menu .menu > li > div:first-child{border-top: 2px solid transparent; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.app-main .app-menu .menu > li > div:first-child:hover{background-color: var(--tabs-tab-header-tab-item-hover-bg-color); border-top-color: var(--tabs-tab-header-tab-item-hover-bg-color);}
.app-main .app-menu .menu > li > div:first-child.selected{background-color: var(--tabs-tab-pages-bg-color); color: var(--ribbon-button-font-color); border-top-color:var(--ribbon-tab-header-selected-border-color);}
.app-main .app-menu .menu > li > div:first-child > .icon{display:none;}
.app-main .app-menu .menu .menu-title{width: 60px; height: 34px; background-image: url(../images/tab-title-bg.png); background-repeat:no-repeat; background-size: 25px 13px; background-position:center;}
.app-main .app-menu .menu .item{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 5px 10px; margin: 0px; color: #fff; outline: 0px;}
.app-main .app-menu .menu .item:after{content: ""; position:absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; width:auto; height:auto; border: 1px dotted var(--border-color); border-radius: 5px; display:none;}
.app-main .app-menu .menu .item:not(.selected):not(:hover):not(:active):focus:after{display:block;}
.app-main .app-menu .sub-menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 40px; background-color: var(--tabs-tab-pages-bg-color); padding: 3px; margin: 0px; list-style:none; white-space:nowrap; overflow:hidden; display:none;}
.app-main .app-menu .sub-menu.selected{display:block;}
.app-main .app-menu .sub-menu .item{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 5px 10px; margin: 0px; color: var(--ribbon-button-font-color);}
.app-main .app-menu .sub-menu li:not(:first-child) .item[data-group='1']{margin-left: 10px;}
.app-main .app-menu .sub-menu li:not(:first-child) .item[data-group='1']:before{content: ""; position:absolute; top: 0px; left: -5px; width: 1px; height: 100%; background-color: var(--ribbon-ribbon-bar-border-color);}
.app-main .app-menu .sub-menu .item{border: 1px solid transparent; border-radius: 5px;}
.app-main .app-menu .sub-menu .item .icon{color: var(--default-light-color); margin-right: 5px;}
.app-main .app-menu .sub-menu .item:not(.disabled):hover{background-color: var(--ribbon-button-hover-bg-color); border-color: var(--button-hover-border-color);}
.app-main .app-menu .sub-menu .item:not(.disabled):active{background-color: var(--ribbon-button-active-bg-color); border-color: var(--ribbon-button-active-bg-color);}
.app-main .app-menu .sub-menu .item.disabled{filter: grayscale(1) opacity(0.45);}
.app-main .app-menu .sub-menu .item.disabled:after{display:none !important;}
.app-main .app-menu .sub-menu .btn-collapsed{position:absolute; top: 0px; left: auto; right: 0px; width:20px; height: 100%; border-left: 1px solid var(--border-color); background-color: var(--tabs-tab-pages-bg-color);}
.app-main .app-menu .sub-menu .btn-collapsed:before{content: "\f078"; position:absolute; top: 50%; left: 50%; width:auto; height: auto; transform:translate(-50%, -50%); font-size: 11px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.app-main .app-menu .sub-menu .btn-collapsed:hover{background-color: var(--ribbon-button-hover-bg-color); border-color: var(--button-hover-border-color);}
.app-main .app-menu .sub-menu .btn-collapsed:active{background-color: var(--ribbon-button-active-bg-color); border-color: var(--ribbon-button-active-bg-color);}
.app-main .app-content{position:absolute; top:80px; left:0px; right:0px; bottom:31px; width: auto; height:auto; background-color: var(--app-content-bg-color); z-index:1;}
.app-main .app-status{position:absolute; top:auto; left:0px; right:0px; bottom:0px; width:auto; height: 26px; border-top: 1px solid var(--app-status-border-color); background-color: var(--app-status-bg-color); font-size: 13px; padding: 5px; overflow:hidden; z-index:0; }
.app-main .app-status > div{position:relative; top:0px; left:0px; width:auto; height:auto; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; text-align:left; vertical-align: top;}
.app-main .app-status .server-status{float:right; width: 16px; height: 16px; margin-right: 10px; vertical-align:top;}
.app-main .app-status .center-label{padding-left: 10px; color: #999;}
.app-main .app-status .center-label span{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline-block; vertical-align:middle; margin: 0px 5px;}
.app-main .app-status .right-label{float:right; margin-right: 10px;}
.app-main > .curent-user-tool-bar{position:fixed; top: 0px; left:auto; right: 0px; width:auto; height:auto; z-index: 3;}

.mobile-menu{display: none;}

.resize{position:absolute; z-index: 10; background-color: var(--resize-bg-color);}
.top-left-resize{position:absolute; top:0px; left:0px; width: 10px; height: 10px; cursor:nwse-resize;}
.top-resize{position:absolute; top: 0px; left: 10px; right: 10px; width: auto; height: 4px; cursor:n-resize;}
.top-right-resize{position:absolute; top:0px; left:auto; right: 0px; width: 10px; height: 10px; cursor:nesw-resize;}
.right-resize{position:absolute; top: 10px; left:auto; right: 0px; bottom: 10px; width: 4px; height:auto; cursor:e-resize;}
.bottom-right-resize{position:absolute; top:auto; left:auto; right: 0px; bottom: 0px; width: 10px; height: 10px; cursor:nwse-resize;}
.bottom-resize{position:absolute; top:auto; left: 10px; right: 10px; bottom: 0px; width:auto; height: 4px; cursor:s-resize;}
.bottom-left-resize{position:absolute; top:auto; left:0px; right:auto; bottom: 0px; width: 10px; height: 10px; cursor:sw-resize;}
.left-resize{position:absolute; top: 10px; left: 0px; right:auto; bottom: 10px; width: 4px; height:auto; cursor:w-resize;}

.avatar{position:relative; top:0px; left:0px; width: 24px; height:24px; background-repeat:no-repeat; background-size:cover; background-position:top center; border-radius:50%; display:inline-block; vertical-align:middle; text-align:center; background-image:url(../images/user_no_image.png);}
.avatar span{position:relative; top:2px; left:0px; width:auto; height:auto; margin:auto; font-size: 14px;}

.curent-user-info-panel{position:relative; top:0px; left:0px; width:auto; height:auto; min-height:30px; white-space:nowrap; padding: 5px !important; color: #ededed;}
.curent-user-info-panel .avatar{width: 24px; height:24px; margin-right: 5px;}
.curent-user-info-panel .avatar span{top:2px; font-size: 20px; font-weight:500;}
.curent-user-info-panel i{margin-left: 5px; font-size: 18px;}
.curent-user-info-panel > span{font-size: 13px;}
.cuip-menu-item i{color: var(--cuip-menu-item-font-color);}
.curent-user-info-panel > *{display:inline-block; vertical-align:middle;}

.curent-user-tool-bar{position:relative; top:0px; left:0px; width:auto; height:auto; color: var(--current-user-tool-bar-font-color); background-color: var(--current-user-tool-bar-bg-color); border-radius:0px; white-space:nowrap; display:inline-block;}
.curent-user-tool-bar .item{position:relative; top:0px; left:0px; width:auto; height:auto; min-height: 100%; background-color: var(--current-user-tool-bar-item-bg-color); border-radius: 0px; padding: 3px 10px; margin-right: 10px; display:inline-block; vertical-align:top;}
.curent-user-tool-bar .item:last-child{margin-right: 0px;}
.curent-user-tool-bar .item:hover{background-color: var(--current-user-tool-bar-item-hover-bg-color); color: var(--current-user-tool-bar-item-hover-font-color);}
.curent-user-tool-bar .item i{font-size: 20px; pointer-events:none;}
.curent-user-tool-bar .item .has-new-info{position:absolute; bottom:0px; right:0px; min-width: 20px; height: 16px; border-radius: 8px; background-color: var(--current-user-tool-bar-item-has-new-info-bg-color); font-size: 10px; color: var(--current-user-tool-bar-item-has-new-info-font-color); line-height: 16px; font-weight:bold; padding: 1px 3px; overflow-x:auto; overflow-y:hidden; text-align:center; pointer-events:none;}
.curent-user-tool-bar .item .sub-panel{display:none;}

.curent-user-tool-bar-sub-panel{position:relative; top: 0px; left:0px; width:300px; height:auto; max-width: 100%; background-color: transparent; border: 0px; white-space:normal; }
.curent-user-tool-bar-sub-panel .app-list{position:relative; top: 0px; left:0px; width: 100%; height:auto; overflow:auto; padding: 10px 0px; overflow-x:hidden; overflow-y:auto;}
.curent-user-tool-bar-sub-panel .app-list .app-item{width: calc(100% - 20px); margin: 0px 10px;}
.curent-user-tool-bar-sub-panel .app-list .app-item .icon{color: var(--current-user-tool-bar-item-sub-panel-app-list-app-item-icon-font-color); font-size: 32px;}
.curent-user-tool-bar-sub-panel .app-list .app-item.disabled{display:none;}


.message-list .list-content{position:relative; top:0px; left:0px; width: 100%; height: auto; min-height: 20px; max-height: calc(100% - 125px); overflow-x:hidden; overflow-y:auto;}
.message-list .list-footer{position:relative; top:0px; left:0px; width: 100%; height: 35px; padding: 8px 12px; border-top: 1px solid var(--border-color); text-align:left; overflow:hidden;}
.message-list .list-footer span{position:relative; top:0px; left:0px; width: 50%; text-align: left; color: var(--current-user-tool-bar-item-message-list-list-footer-span-font-color); text-decoration:none; display:inline-block; vertical-align:middle; cursor:pointer;}
.message-list .list-footer span:last-child{float:right; text-align:right;}
.message-list .list-footer span:hover{text-decoration:underline;}

.alert-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow-x:hidden; overflow-y:auto;}
.alert-list .notification .avatar{border-radius: 50%;}

.user-list .search-box{position:relative; top:0px; left:0px; width:100%; height:auto; background-color: var(--user-list-search-box-bg-color); border-bottom: 1px solid var(--border-color); padding: 5px;}
.user-list .search-box input{padding-right:23px; background-size:16px 16px; background-position: right 5px center; background-repeat:no-repeat; background-image:url(../images/search-icon-disabled.png);}
.user-list .user-list-item{position:relative; top: 0px; left:0px; right: 0px; bottom: 0px; width: 100%; height:auto; padding:0px; overflow-x:hidden; overflow-y:auto;}
.user-list .user-list-item .user-item{position:relative; top:0px; left:0px; width: 100%; height:auto; margin: 0px; padding: 5px 10px; overflow:auto; cursor:pointer;}
.user-list .user-list-item .user-item .avatar{width: 36px; height:36px; margin-right: 10px; display:inline-block; float:left; cursor:pointer; pointer-events:none;}
.user-list .user-list-item .user-item .avatar span{font-size: 28px; top: 10px;}
.user-list .user-list-item .user-item > div:not(:first-child):not(:last-child){position:relative; top:0px; left:0px; width:calc(100% - 70px); height:auto; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; vertical-align:top; display:inline-block; float:left; pointer-events:none;}
.user-list .user-list-item .user-item .name{color: var(--user-list-user-list-item-user-item-name-font-color); font-weight:500; text-align:left;}
.user-list .user-list-item .user-item .last-time-online{color: var(--user-list-user-list-item-user-item-last-time-online-font-color); font-size: 12px; text-align:left;}
.user-list .user-list-item .user-item .online-status{position:absolute; top:20px; left:auto; right: 10px;}
.user-list .user-list-item .user-item:hover{background-color: var(--user-list-user-list-item-user-item-hover-bg-color);}

.online-status{position:relative; top:0px; left: 0px; width: 10px; height: 10px; border-radius:50%; background-color: var(--online-status-bg-color);}
.online-status.active{background-color: var(--online-status-active-bg-color); display: block;}

.popup{ position:absolute; top:100px; left:100px; width:auto; height:auto; max-width: 100%; max-height: 100%; background-color: var(--popup-bg-color); border:1px solid var(--popup-border-color); outline: 0px; box-shadow: var(--popup-shadow); border-radius: 5px; overflow:hidden; }

.popup .popup-header{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:32px; padding:0px; margin:0px; background-color: var(--popup-popup-header-bg-color);}
.popup .popup-header .popup-title{position:absolute; top:6px; left:0px; right:0px; width: 60%; height:20px; padding: 0px 5px; text-align:left; text-transform: capitalize; color: var(--popup-popup-header-popup-title-font-color); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.popup .popup-header .popup-action{position:absolute; top:6px; left:30px; width:auto; height:20px; border-left:1px solid var(--popup-popup-header-popup-action-border-color); padding-left:2px;}
.popup .popup-header .popup-action button{min-height:20px;}
.popup .popup-main{position:absolute; top:32px; left:0px; right:0px; bottom:0px; width:auto; height:auto; padding:0px; margin:0px; background-color: var(--popup-popup-main-bg-color);}

.popup .btn-left{position:absolute; top:0px; left:0px; width: 48px; min-width:48px; height: 31px; background:url(../images/btn-arrow-left-normal.png) no-repeat center center; background-size:cover; border-width:0px; border-radius:0px; cursor:default;}
.popup .btn-left:hover{background-image: url(../images/btn-arrow-left-light.png);}
.popup .btn-left:focus{border-width:0px !important;}
.popup .btn-left.right-icon{background-image:url(../images/btn-arrow-right-normal.png);}
.popup .btn-left.right-icon:hover{background-image:url(../images/btn-arrow-right-light.png);}

.popup.disabled{border-color:var(--popup-disabled-border-color) !important; box-shadow: var(--popup-disabled-shadow);}
.popup.disabled .popup-header{background-color: var(--popup-disabled-popup-header-bg-color) !important;}

.popup:has(.full-screen) .popup-header{display:none;}
.popup:has(.full-screen) .popup-main{top: 0px;}
.popup:has(.full-screen) .control-box{background-color: rgba(171, 171, 171,0.65); border-bottom-left-radius: 5px; overflow:hidden;}

.progress{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px;}
.progress span{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width: 100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.progress-bar{position:relative; top:0px; left:0px; width:100%; height:20px; border:1px solid rgb(126,180,234); text-align:center;}
.progress-bar .success{position:absolute; top:0px; left:0px; width:0%; height:100%; background-color:rgb(205,230,247);}
.progress-bar span{position:relative; top:0px; left:0px; width:auto; height:auto; margin:auto; padding:0px; color:rgb(126,180,234);}
.progress .row:first-child span:last-child{font-weight: bold;}

.console{position:absolute; top:5px; left:5px; right:5px; bottom:5px; width:auto; height:auto; border: 1px solid #ababab; padding: 5px; overflow:hidden;}
.console div{position:relative; top:0px; left:0px;  width: 100%; height:auto; padding: 3px 3px 3px 12px; box-sizing:border-box; background-image: url(../images/chevron-right-solid.svg); background-repeat:no-repeat; background-size: 12px 12px; background-position: left center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.console div.error{background-image:url(../images/chevron-right-solid-red.svg); color: #ff0000;}
.console div.finish{font-weight:bold;}

.popup-container{position:relative; top:0px; left:0px; width: 100%; height:auto; min-height: 100vh; background-color: var(--bg-color); overflow-x:hidden; overflow-y:auto; display:none; z-index:2 !important;}

.popup-menu, .popup-panel{position:absolute; top:0px; left:0px; width:auto; height:auto; min-width: 180px; white-space:nowrap; border: 1px solid var(--popup-menu-border-color); padding: 5px; background-color: transparent; box-shadow: var(--popup-menu-shadow); border-radius: 10px; overflow: hidden; display:block; }
.popup-menu:before, .popup-panel:before{content: ''; position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 10px; background-color: var(--popup-menu-bg-color);}
.popup-menu button{position:relative; top:0px; left:0px; width:auto; height:auto; min-width: 100%; padding: 0px 10px 0px 30px; font-size:14px; color: var(--popup-menu-button-font-color); text-align:left; background-color: var(--popup-menu-button-bg-color); background-size: 16px 16px; background-repeat:no-repeat; background-position: center left 5px; border: 1px solid var(--popup-menu-button-border-color); border-radius: 5px; display:block;}
.popup-menu button.startgroup:not(:first-child){margin-top: 10px;}
.popup-menu button.startgroup:not(:first-child):before{position:absolute; content: ''; top: -6px; left: -1px; right: -1px; width: auto; height: 1px; background-color:var(--popup-menu-button-startgroup-border-color);}
.popup-menu button:hover{background-color: var(--popup-menu-button-hover-bg-color); border: 1px solid var(--popup-menu-button-hover-border-color); color: var(--popup-menu-button-hover-font-color);}
.popup-menu button:hover i{color:inherit;}
.popup-menu button:disabled:hover, .popup-menu button:disabled:focus{background-color: var(--popup-menu-button-disabled-hover-bg-color); border-color: var(--popup-menu-button-disabled-hover-border-color) !important; color: var(--popup-menu-button-disabled-i-font-color);}
.popup-menu button:disabled{ -webkit-filter: grayscale(100%); filter: grayscale(100%); color: var(--popup-menu-button-disabled-i-font-color); font-weight: normal !important;}
.popup-menu button:disabled i{color: var(--popup-menu-button-disabled-i-font-color);}
.popup-menu button:active, .popup-menu button:focus{background-color: var(--popup-menu-button-active-bg-color); border-color: var(--popup-menu-button-active-bg-color) !important;}
.popup-menu button i{position:absolute; top: 50%; left: 5px; font-size: 14px; width: 20px; height: 14px; transform:translateY(-50%); text-align: center; color: var(--popup-menu-button-i-font-color);}
.popup-menu button.default{font-weight:bold;}
.popup-menu button img{position:absolute; top: 50%; left: 5px; width: 16px; height: 16px; transform:translateY(-50%); object-fit: contain;}
.popup-menu button span{line-height: 36px; position:relative; display:block; top: 0px; left: 0px; width: auto; height:auto;}
.popup-menu .back{background-image:url(../icons/History/Undo_16x16.png)}
.popup-menu .refresh{background-image:url(../icons/actions/Refresh_16x16.png)}
.popup-menu .paste{background-image:url(../icons/edit/Paste_16x16.png)}
.popup-menu .cut{background-image:url(../icons/edit/Cut_16x16.png)}
.popup-menu .copy{background-image:url(../icons/edit/Copy_16x16.png)}
.popup-menu .selectall{background-image:url(../icons/actions/SelectAll_16x16.png)}
.popup-menu .unselect{background-image:url(../icons/actions/un_select_16x16.png)}
.popup-menu .delete{background-image:url(../icons/actions/DeleteList2_16x16.png)}
.popup-menu .rename{background-image:url(../icons/edit/Edit_16x16.png)}
.popup-menu .new{background-image:url(../icons/filetype/folder.png)}
.popup-menu .properties{background-image:url(../icons/setup/Properties_16x16.png)}
.popup-menu .expandall{background-image:url(../icons/categories/expand-16x16.png)}
.popup-menu .expandall:disabled{background-image:url(../icons/categories/expand-16x16-disabled.png)}
.popup-menu .collapseall{background-image:url(../icons/categories/collapse-16x16.png)}
.popup-menu .collapseall:disabled{background-image:url(../icons/categories/collapse-16x16-disabled.png)}

.popup-panel{width:auto; height:auto; min-width: 262px; padding: 0px;}
.popup-panel .sub-panel{display: block !important;}
.autocomplete-panel{position:absolute; top: 0px; left:0px; height: auto; max-height:302px; min-height: 32px; background-color: var(--autocomplete-panel-bg-color); border-radius: 5px; border: 1px solid var(--autocomplete-panel-border-color); overflow:hidden;}
.autocomplete-panel ul{position:relative; top:0px; left:0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style:none;}
.autocomplete-panel ul li{padding: 5px;}
.autocomplete-panel ul li:hover{background-color: var(--autocomplete-panel-ul-li-hover-bg-color);}
.autocomplete-panel ul li.selected{background-color: var(--autocomplete-panel-ul-li-selected-bg-color);}

.overlay{position:fixed; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: var(--overlay-bg-color); background-repeat:no-repeat; background-size:cover;}
.overlay.loading-overlay{background-color: transparent;}

.control-box{position:absolute; top:0px; left:auto; right:0px; bottom:auto; width:auto; height: 31px; white-space:nowrap; z-index:4;}
.control-box .btn{position:relative; top:0px; left:0px; width: 45px; height: 100%; display:inline-block; overflow:hidden; background-color: var(--control-box-btn-bg-color); background-repeat:no-repeat; background-size: 10px; background-position:center center;}
.control-box .btn:hover{background-color: #e6e6e6;}
.control-box .minimize-button{background-image:url(../images/minimize-window.png);}
.control-box .maximize-button{background-image:url(../images/max-window.png);}
.control-box.full-screen .maximize-button{background-image:url(../images/min-window.png);}
.control-box.full-screen .maximize-button:before{display:none;}
.control-box .close-button{background-image: url(../images/close.svg);}
.control-box .close-button:hover{background-color: #e81123; background-image: url(../images/close_white.svg);}

.login-page{background-size:cover;}
.login-page:before {position:fixed; content: ''; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: inherit; background-size: cover; background-repeat:no-repeat; background-position: center center; background-attachment:fixed; filter: blur(30px); transform:scale(2);}
.login-page .main-control{background-color:transparent;}

.app-login{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width:100%; height:100%; background-repeat:no-repeat; background-size: cover; background-position: center center; background-image: none;}
/*.app-login:before{position:absolute; content: ''; top: 0px; left: 0px; right: 0px; bottom: 0px; background-image: inherit; background-size: cover; background-repeat:no-repeat; background-position: center center; background-attachment:fixed; filter: blur(30px); transform:scale(2);}*/
.app-login .login-header-gradient{position:fixed !important; top: 0px; left: 0px; width: 100%; height: 100% !important; display:block; background-color: #2a579a;  /* fallback for old browsers */
                                                background: -webkit-linear-gradient(to bottom, #2a579a, transparent);  /* Chrome 10-25, Safari 5.1-6 */
                                                background: linear-gradient(to bottom, #2a579a, transparent); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}

.app-login .login-form .login-header-gradient{display:none;}
.app-login .login-form{position:absolute; top: 50%; left: 50%; margin-top: -220px; margin-left: -200px; width: 400px; height: 440px; border-radius: 5px; box-shadow: rgb(0, 0, 0) 0px 0px 5px; max-width: 100%; max-height: 100%; overflow: hidden;
    background-image:inherit; background-size:cover; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-color: rgba(0,0,0,0.4);
}
.app-login .login-form:before{position:absolute; content: ''; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; background-image:inherit; background-size:cover; background-attachment:fixed; background-position:center center; background-repeat:no-repeat; filter: blur(30px); transform:scale(2); -webkit-transform: scale(2);}

.app-login .login-form input[type='checkbox'], .app-login .login-form label{display:none;}

.login-form{position:relative; top:0px; left:0px; width: 100%; height: 100%;}
.login-form .login-form-header{position:absolute; top:0px; left:0px; right: 0px; bottom:auto; width:auto; height: 185px;  background-color: var(--login-form-header-bg-color);  border: 0px; border-bottom:1px solid var(--login-form-header-border-color); background-repeat:no-repeat; background-size:128px 128px; background-position: center bottom;}
.login-form .login-form-header:before{position:absolute; content: ''; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; background-image:url(../images/black-male-user-symbol.png); background-repeat:no-repeat; background-size: 128px 128px; background-position: center bottom; opacity: 0.5;}
.login-form .login-form-header .login-icon{position:absolute; top: 10px; left:10px; width: 48px; height: 48px; background-color: var(--login-form-header-login-icon-bg-color); background-image: url(../images/logo_50.png); background-repeat: no-repeat; background-position:center center; background-size: cover; background-color: #fff; border-radius: 3px;}
.login-form .login-form-header .login-title{position:absolute; top: 15px; left: 65px; width:auto; height:auto; font-size: 15px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; font-weight:bold; color: var(--login-form-header-login-title-font-color);}
.login-form .login-form-header .login-des{position:absolute; top: 35px; left: 65px; width:auto; height:auto; font-size: 14px; color: var(--login-form-header-login-des-font-color);}
.login-form .login-form-header .login-welcome{position:absolute; top: 80px; left:0px; right:0px; width:auto; height:auto; text-align:center; font-size: 26px; text-transform:uppercase; color: var(--login-form-header-login-welcome-font-color);}
.login-form .login-form-header .login-user-info{position:absolute; top: 120px; left:0px; right:0px; width: auto; height:auto; text-align:center;}
.login-form .login-form-header .login-user-info .content{position:relative; top:0px; left:0px; width: auto; height: auto; min-height: 30px; border: 1px solid var(--login-form-header-login-user-info-content-border-color); border-radius: 21px; overflow:auto;  font-size: 16px; color: var(--login-form-header-login-user-info-content-font-color); display:inline-block; margin:auto; padding: 5px 10px;}
.login-form .login-form-header .login-user-info .content .avatar{position:relative; top:0px; left:0px; width:30px; height: 30px; font-size: 24px; padding: 3px 0px; background-color: var(--login-form-header-login-user-info-content-avatar-bg-color); float:left; margin-right: 5px; vertical-align:top;}
.login-form .login-form-header .login-user-info .content .avatar span{font-size: 24px;}
.login-form .login-form-header .login-user-info .content .name{position:relative; top:0px; left:0px; width:auto; height:auto; float:left; vertical-align:top; margin-top: 4px;}

.login-form .login-form-body{position:absolute; top: 185px; left:0px; right: 0px; bottom: 0px; padding: 40px 20px; color: var(--login-form-body-font-color);}
.login-form .login-form-body input[type='text'], .login-form .login-form-body input[type='password']{position:relative; top:0px; left:0px; width: 100%; height: 40px; font-size: 16px; padding:0px 10px 0px 45px; background-color: rgba(255, 255, 255, 0.6); border: 0px; border-radius: 5px; outline:0px; margin-bottom: 10px; background-repeat:no-repeat; background-size:20px 20px; background-position: left 10px center;}
.login-form .login-form-body input[data-field='UserName']{background-image:url(../images/user-solid.svg) !important;}
.login-form .login-form-body input[type='password'], .login-form .login-form-body input[data-field='SecurityKey']{background-image:url(../images/key-solid.svg);}
.login-form .login-form-body input[data-field='NewPassword']{background:url(../images/asterisk-solid.svg) left 20px bottom 8px no-repeat, url(../images/key-solid.svg) left 11px center no-repeat; background-color: rgba(255, 255, 255, 0.6); background-size: 10px, 16px; }
.login-form .login-form-body input[data-field='Email']{background-image:url(../images/envelope-solid.svg);}
.login-form .login-form-body input[data-field='ActivationCode']{background-image:url(../images/file-certificate.svg);}
.login-form .login-form-body  table{width: 100%; height:auto; border: 0px;}
.login-form .login-form-body  table tr td{text-align:left; vertical-align:middle; color: var(--login-form-body-table-tr-td-font-color);}
.login-form .login-form-body  table tr td label{color: var(--login-form-body-table-tr-td-label-font-color);}
.login-form .login-form-body  table tr td:first-child{width: 20px;}
.login-form .login-form-body  table tr td:last-child{text-align:right;}
.login-form a{color: var(--login-form-a-font-color); text-decoration:none; outline: 0px; padding: 3px; border: 1px dotted transparent;}
.login-form a:hover{color: var(--login-form-a-hover-font-color);}
.login-form a:focus{border: 1px dotted #fff; border-radius: 3px;}
.login-form button{position:absolute; top:auto; left:0px; right: 0px; bottom: 0px; width:100%; height:auto; padding: 10px 0px; font-size: 16px; cursor:pointer; background-color: var(--login-form-button-bg-color); border: 0px; border-top:1px solid var(--login-form-button-border-color); border-top-left-radius: 0px; border-top-right-radius:0px; color: var(--login-form-button-font-color);}
.login-form button:hover{background: var(--login-form-button-hover-bg-color); border-width: 0px !important; border-top:1px solid var(--login-form-button-hover-border-color) !important;}
.login-form button:focus, .login-form button:active{outline-width:0px; border-width: 0px !important; border-top:1px solid var(--login-form-button-focus-border-color) !important;}

input.username{background: url(../images/user-solid.svg) left 10px center no-repeat; background-size: 16px; padding:0px 10px 0px 45px !important;}
input.password{background: url(../images/key-solid.svg) left 10px center no-repeat; background-size: 16px; padding:0px 10px 0px 45px !important;} 
input.new-password, input.confirm-password{background:url(../images/asterisk-solid.svg) left 15px bottom 3px no-repeat, url(../images/key-solid.svg) left 6px center no-repeat; background-size: 10px, 16px; padding:0px 10px 0px 45px !important;}

.loading-overlay ~ .overlay{background: #fff;}
.loading-overlay ~ .overlay .popup iframe{display:none;}
.waiting{position:fixed; top:50%; left:50%; width:244px; height:76px; margin:-33px 0px 0px -122px; background-color: var(--waiting-bg-color); border: 1px solid var(--border-color); border-radius: 5px; z-index:999; overflow:hidden;}
.waiting *{pointer-events: none;}
.waiting img{position:absolute !important; top: 15px !important; left: 15px !important; width: 44px !important; height: 44px !important;}
.waiting .bigtext{position:absolute; top:18px; left:70px; font-weight:bold; color: var(--waiting-bigtext-font-color); font-size:13px;}
.waiting .smalltext{position:absolute; top:36px; left:70px; color: var(--waiting-smalltext-font-color); font-size:11px;}
.waiting .title{position:absolute; top:0px; left:0px; width:100%; height:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.buttonlist, .button-list, .btnlist, .btn-list{position:absolute; top:auto; left:0px; right:0px; bottom:0px; height: auto; text-align:right; padding: 5px;}
.buttonlist button:not(:first-child), .button-list button:not(:first-child), .btnlist button:not(:first-child), .btn-list button:not(:first-child){margin-left: 5px;}


.alert{ background-color: var(--alert-bg-color) !important;}
.alert .control-box .close-button{width: 31px;}
.alert .popup-main{top: 37px; left: 5px; right: 5px; bottom: 5px; background-color: var(--alert-popup-main-bg-color);}
.alert .message{position:absolute; top: 5px; left: 5px; right: 5px; bottom: 35px; overflow:hidden;}
.alert .message table{width: 100%; height: 100%; vertical-align:middle;}
.alert .message table tr td:first-child{width: 50px; background-repeat:no-repeat; background-position:center center; background-size:32px 32px;}
.alert .message .normal{background-image:url(../images/alert_32x32.png);}
.alert .message .confirm{background-image:url(../images/confirm_32x32.png);}

.tabs{position:relative; top:0px; left:0px; width: 100%; height: 100%; background-color: var(--tabs-bg-color);}
.tabs .tab-header{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:30px; white-space:nowrap;}
.tabs .tab-header .tab-title{position:relative; top:0px; left:0px; width:60px; height: 100%; padding:0px; margin:0px; background-repeat:no-repeat; background-position:center center; background-size: 25px 13px; background-image: url(../images/tab-title-bg.png); display:inline-block; vertical-align:top;}
.tabs .tab-header .tab-item{position:relative; top:0px; left:0px; width:auto; height: 100%; padding: 6px 10px; margin-right: 5px; display:inline-block; color: var(--tabs-tab-header-tab-item-font-color); cursor:default; vertical-align:top; background-color: var(--tabs-tab-header-tab-item-bg-color); border-top-left-radius: 5px; border-top-right-radius: 5px;}
.tabs .tab-header .tab-item span:last-child{border: 1px solid transparent;}
.tabs .tab-header .tab-item:focus{outline: 0px;}
.tabs .tab-header .tab-item:focus span:last-child{border: 1px dashed;}
.tabs .tab-header .tab-item:hover{background-color: var(--tabs-tab-header-tab-item-hover-bg-color);}
.tabs .tab-header .selected{background-color: var(--tabs-tab-header-selected-bg-color) !important; color: var(--tabs-tab-header-selected-font-color);}
.tabs .tab-pages{position:absolute; top: 30px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: var(--tabs-tab-pages-bg-color);}
.tabs .tab-pages .tab-page-item{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; display:none;}
.tabs .tab-pages .tab-page-item.selected{display:block;}

.ribbon{position:relative; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:100%; background-color: var(--ribbon-bg-color);}
.ribbon .tab-header{z-index:3; background-color: var(--ribbon-tab-header-bg-color);}
.ribbon .tab-header .selected{border-top: 2px solid var(--ribbon-tab-header-selected-border-color); padding-top: 4px;}
.ribbon .tab-pages{border-bottom: 1px solid var(--ribbon-tab-pages-border-color); z-index:2;}
.ribbon .tab-pages .tab-page-item{padding: 4px; z-index:1;}
.ribbon .ribbon-bar{position:relative; top:0px; left:0px; width:auto; height: 100%; padding: 0px 5px; display:inline-block; border-right: 1px solid var(--ribbon-ribbon-bar-border-color);}
.ribbon .ribbon-bar .ribbon-bar-title{position:absolute; top:auto; left:0px; right:0px; bottom:0px; width:auto; height: 14px; font-size: 12px; color: var(--ribbon-ribbon-bar-ribbon-bar-title-font-color); text-align:center; cursor:default; z-index:0;}
.ribbon .ribbon-bar .button-group{position:relative; top:0px; left:0px; width:auto; height:70px; overflow:visible; display:inline-block; vertical-align:top;}
.ribbon button{position:relative; top:0px; left:0px; width:auto; height:auto; border:1px solid var(--ribbon-button-border-color); text-align:left; display:block; color: var(--ribbon-button-font-color); white-space:normal; background-color: var(--ribbon-button-bg-color);}
.ribbon button:hover{background-color: var(--ribbon-button-hover-bg-color);}
.ribbon button:active{ background-color: var(--ribbon-button-active-bg-color);}
.ribbon button:disabled{background-color: var(--ribbon-button-disabled-bg-color); color: var(--ribbon-button-disabled-font-color); cursor:default; -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.ribbon button:disabled:hover{border-color: var(--ribbon-button-disabled-hover-border-color);}
.ribbon button:focus{border:1px solid var(--ribbon-button-focus-border-color) !important;}
.ribbon button:disabled:focus{border-color: var(--ribbon-button-disabled-focus-border-color);}
.ribbon button .title{display:inline-block; max-height: 32px !important; white-space:normal;}
.ribbon button:focus .sub-menu{display:block;}
.ribbon button .sub-menu{position:absolute; top: calc(100% + 1px); left:-1px; border-radius: 5px; width:auto; height:auto; min-width:200px; white-space:nowrap; background-color: var(--ribbon-button-sub-menu-bg-color); box-shadow: var(--ribbon-button-sub-menu-shadow); display:none; z-index:2;}
.ribbon button .sub-menu .sub-menu-item{position:relative; top:0px; left:0px; min-width: 100%; padding:5px 10px; margin:0px; text-align:left; display:block;}
.ribbon button .sub-menu .sub-menu-item:hover{background-color: var(--ribbon-button-sub-menu-sub-menu-item-hover-bg-color) !important; color: var(--ribbon-button-sub-menu-sub-menu-item-hover-font-color);}
.ribbon .btn32 {padding:4px; text-align:center; max-height:75px; max-width:80px; line-height: 15px; float:left; display:block;}
.ribbon .btn32 .icon{position:relative; top:0px; left:0px; width:32px; height:32px; display:block; font-size: 32px; color: var(--ribbon-btn32-icon-font-color); margin:0px auto 3px auto; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.ribbon .btn32 .fa, .ribbon .btn32 .fas, .ribbon .btn32 .far{width: 100%;}
.ribbon .btn32:disabled .icon{color: var(--ribbon-btn32-disabled-icon-color);}
.ribbon .btn32 i{display:block; margin:auto; color: var(--ribbon-btn32-i-font-color);}
.ribbon .btn16{max-height:23px !important; min-width:100%;  overflow:hidden; padding:2px 4px; white-space:nowrap; box-sizing:border-box;}
.ribbon .btn16 .icon{position:relative; top:0px; left:0px; width:16px; height:16px; font-size: 16px; color: var(--ribbon-btn16-icon-font-color); display:inline-block; margin: 0px 10px 2px 0px; vertical-align:middle; background-repeat:no-repeat; background-position:center center; background-size:cover;}
.ribbon .btn16:disabled .icon{color: var(--ribbon-btn16-disabled-icon-font-color);}
.ribbon .btn16 .title{vertical-align: middle;}
.ribbon .btn16 i{margin-left:5px; color: var(--ribbon-btn16-i-font-color);}
.ribbon .ribbon-pin{position:absolute; top:auto; left:auto; bottom:0px; right:0px; width: 29px; height:17px; font-size:14px; color: var(--ribbon-ribbon-pin-font-color); vertical-align:middle; z-index:2; text-align:center;}
.ribbon .ribbon-pin:hover{background-color: var(--ribbon-ribbon-pin-hover-bg-color); color: var(--ribbon-ribbon-pin-hover-font-color);}

.ribbon.low, .ribbon.low .tab-header{background-color: var(--ribbon-tab-pages-border-color);}
.ribbon.low .tab-header .tab-item{border-top-left-radius: 0px; border-top-right-radius: 0px;}

.action-tool-bar .ribbon-bar{width:auto !important; height:auto !important; vertical-align:top;}
.action-tool-bar .ribbon-bar .button-group{height:auto !important;}
.action-tool-bar .ribbon-bar .button-group button{display:inline-block !important; vertical-align:middle; min-width:unset;}
.action-tool-bar .ribbon-bar .button-group button .icon{margin: 0px 3px 0px 0px;}

.sys-menu{position:relative; top:0px; left:0px; width: 100%; height: 100%; padding:0px; margin:0px; border-bottom: 1px solid var(--sys-menu-border-color); background-color: var(--sys-menu-bg-color);}
.sys-menu ul{padding:0px; margin:0px; list-style:none;}
.sys-menu > ul{position:relative; top:0px; left:0px; width: 100%; height:100%;}
.sys-menu > ul > li{position:relative; top:0px; left:0px; width:auto; height:24px; padding: 3px 10px; margin:0px; display:inline-block; color: var(--sys-menu-ul-li-font-color); cursor:default; vertical-align:top;background-color: var(--sys-menu-ul-li-bg-color);}
.sys-menu > ul > li > ul{position:absolute; top: 100%; left: 0px; width: 100vw; height: 92px; background-color:var(--sys-menu-ul-li-ul-bg-color); display:none;}
.sys-menu > ul > li:last-child > ul{display:block;}
.sys-menu > ul > li > ul > li{position:relative; top:0px; left:0px; width:auto; height:auto; color:var(--sys-menu-ul-li-ul-li-font-color); display:inline-block;}
.sys-menu > ul > li > ul > .btn32{padding:4px; text-align:center; height:70px; max-width:80px; line-height: 15px;}
.sys-menu > ul > li > ul > .btn16{max-height:23px !important; min-width:inherit;  overflow:hidden; padding:0px 4px; white-space:nowrap; box-sizing:border-box;}

.tree-view{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width: 100%; height:auto; overflow:hidden; font-family:Helvetica, Arial, sans-serif; }
.tree-view .tree-view-search{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:30px; padding:0px; background-color: var(--tree-view-tree-view-search-bg-color); border-bottom: 1px solid var(--tree-view-tree-view-search-border-color); } 
.tree-view .tree-view-search input{position:relative; top:0px; left:0px; width: 100%; height: 100%; padding: 3px 23px 3px 3px; background-repeat:no-repeat; background-position:right 4px center; background-size: 16px 16px; background-image:url(../images/search-icon-disabled.png); background-color: var(--input-bg-color); border: 0px; border-radius: 0px;}
.tree-view .tree-view-content{position:absolute; top: 0px; left:0px; right:0px; bottom:0px; width:100%; height:auto; overflow-x:hidden; overflow-y:hidden;}
.tree-view .tree-view-content:hover{overflow-y:auto;}
.tree-view .tree-view-content ul{position:relative; top:0px; left:0px; width:100%; height:auto; list-style:none; padding: 0px; margin: 0px;}
.tree-view .tree-view-content ul li{position:relative; top:0px; left:0px; width: 100%; height: auto; padding: 0px; margin:0px; cursor:default;}
.tree-view .tree-view-content ul li > div{padding: 5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-view .tree-view-content ul li .selected{background-color: var(--tree-view-tree-view-content-ul-li-selected-bg-color) !important;}
.tree-view .tree-view-content ul li > div:hover{background-color: var(--tree-view-tree-view-content-ul-li-div-hover-bg-color);}
.tree-view .tree-view-content ul li > div input[type='checkbox']{vertical-align:middle; margin:0px 5px 0px 0px;}
.tree-view .tree-view-content ul li > div span:not(.btn-collapsed){vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none;}
.tree-view .tree-view-content ul li > div .highlighted{vertical-align:bottom !important;}
.tree-view .tree-view-content ul li > div .btn-collapsed{position:absolute; top: 6px; left: 0px; display: inline-block; width: 20px; height: 20px; margin:0px; color: var(--tree-view-tree-view-content-ul-li-div-btn-collapsed-font-color); padding:3px 6px; transition: transform .1s linear; transform: rotate(90deg); background-repeat:no-repeat; overflow:hidden;}
.tree-view .tree-view-content ul li > div .btn-collapsed.fa-chevron-right:before{position:absolute;}
.tree-view .tree-view-content ul li > div .btn-collapsed:hover{color: var(--tree-view-tree-view-content-ul-li-div-btn-collapsed-hover-font-color);}
.tree-view .tree-view-content ul li > div .icon{position:relative; top:0px; left:0px; width: 16px; height: 16px; display:inline-block; padding:0px; margin: 0px 5px 0px 0px; background-repeat:no-repeat; background-position:center center; background-size:cover; pointer-events:none; color: var(--default-light-color);}
.tree-view .tree-view-content ul li > div .folder{background-image:url(../images/Folder-16x16.png);}
.tree-view .tree-view-content ul li > div .file{background-image:url(../images/file-16x16.png);}
.tree-view .tree-view-content ul li .disabled{color: var(--tree-view-tree-view-content-ul-li-disabled-font-color); background-color: var(--tree-view-tree-view-content-ul-li-disabled-bg-color); -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.tree-view .tree-view-content ul li .disabled:hover{background-color: var(--tree-view-tree-view-content-ul-li-disabled-hover-bg-color) !important;}
.tree-view .tree-view-content ul li .disabled .icon{color: var(--tree-view-tree-view-content-ul-li-disabled-icon-font-color);}

.pager{position:relative; top:0px; left:0px; width:auto; height: 25px; line-height: 16px; font-size: 13px; text-align:right;}
.pager > span{position:absolute; top: 50%; left: 5px; width:auto; max-width: 50%; height: auto; margin-top: -7.5px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; font-weight: normal;}
.pager > span > span{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline-block; vertical-align:middle; margin-right: 5px;}
.pager > span > span:last-child{margin-right: 0px;}
.pager ul{position:relative; top:0px; left:0px; width:auto; height:100%; padding:0px; margin:0px; list-style:none; white-space:nowrap;}
.pager ul li{position:relative; width:auto; min-width: 25px; text-align:center; font-size:14px; font-weight:bold; height: 100%; display:inline-block; padding: 3px; margin: 0px 0px 0px 5px; cursor:pointer; border: 1px solid var(--border-color);}
.pager ul li:hover{background-color: var(--pager-ul-li-hover-bg-color);}
.pager ul li.selected{background-color: var(--pager-ul-li-selected-bg-color); cursor:default; font-weight:normal;}

.grid{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width: auto; height:auto; overflow:hidden; font-family:Helvetica, Arial, sans-serif; }
.grid .grid-header{position:absolute; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto; max-width:100%; overflow-y:auto; overflow-x:hidden; background: var(--grid-grid-header-bg-color); border: 1px solid var(--grid-grid-header-border-color); border-bottom-width:0px;}
.grid .grid-header .grid-header-content{position:relative; top:0px; left:0px; width:auto; height:auto; float: left; min-width: 100%;}
.grid .grid-header table{position:relative; top:0px; left:0px; width:auto; height:auto; min-width: 100%; table-layout: auto; overflow:auto; background: var(--grid-grid-header-table-bg-color); border-spacing: 0px; border-collapse:separate; border: 0px;}
.grid .grid-header table tr th, .grid .grid-header table tr td{position:relative; padding: 2px 5px; text-align:center; background-color: var(--grid-grid-header-table-tr-th-bg-color); font-weight:500; color:var(--grid-grid-header-table-tr-th-font-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
.grid .grid-header table tr th:last-child{border-right: 0px;}
.grid .grid-header table tr th[data-field='STT'], .grid .grid-header table tr th[data-field='Stt']{width: 40px; min-width: 40px;}
.grid .grid-header table tr th.sticky{position:sticky; z-index: 2;}
.grid .grid-header table tr th.sticky:first-child{left: 0px;}
.grid .grid-content{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: var(--grid-grid-content-bg-color); border: 1px solid var(--border-color); border-top-width: 0px; overflow:auto; padding-bottom: 10px; outline: 0px;}
.grid .grid-content img{position:relative; top: 0px; left: 0px; max-width: 100%; height: auto;}
.grid .tbl-grid{position:relative; top:0px; left:0px; width:auto; height:auto; table-layout: auto; overflow:auto;  background: var(--grid-tbl-grid-bg-color); border-spacing: 0px; border-collapse:separate; border: 0px; margin-bottom: 10px;}
.grid .tbl-grid tr{position:relative; background-color: var(--grid-tbl-grid-tr-bg-color);}
.grid .tbl-grid tr:hover, .grid .tbl-grid tr:hover td.sticky{background-color: var(--grid-tbl-grid-tr-hover-bg-color);}
.grid .tbl-grid tr.selected, .grid .tbl-grid tr.selected td.sticky{background-color: var(--grid-tbl-grid-tr-selected-blur-bg-color);}
.grid .grid-content:focus .tbl-grid tr.selected, .grid .grid-content:focus .tbl-grid tr.selected td.sticky{background-color: var(--grid-tbl-grid-tr-selected-bg-color);}
.grid .tbl-grid tr td{position:relative; padding: 3px 6px 3px 5px; min-height: 25px !important; cursor:default; border-right: 0px; border-bottom: 1px solid var(--grid-tbl-grid-tr-td-border-color);  white-space:normal; word-break:break-word; word-wrap:break-word; overflow-x:hidden; overflow-y:visible; text-overflow:ellipsis; text-align: justify;
                      /*-webkit-touch-callout: initial; -webkit-user-select: text; -khtml-user-select: initial; -moz-user-select:text; -ms-user-select: text; user-select: text; cursor: initial;*/
}
.grid .tbl-grid tr td[data-field='STT'], .grid .tbl-grid tr td[data-field='Stt']{text-align: center; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}
.grid .tbl-grid tr .action-menu{position:absolute; top: 50%; left:auto; right: 0px; width:auto; height:auto; transform:translateY(-50%); padding: 5px; line-height: 14px; font-size: 16px; color: var(--border-color); cursor:pointer; z-index: 2;}
.grid .tbl-grid tr .action-menu:hover{color: var(--default-font-color);}
.grid .tbl-grid tr .action-menu:before{content: "\f142"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-family: "Font Awesome 5 Pro"; font-weight: 900;}

.grid .tbl-grid tr td.sticky{position:sticky; background-color: #fff; z-index: 2;}
.grid .tbl-grid tr td.sticky:first-child{left: 0px;}

.grid.card .grid-header{width: 0px; height: 0px; overflow:hidden; visibility:hidden;}
.grid.card .grid-content{top: 0px !important;}
.grid.card .tbl-grid{padding: 5px; display:grid; grid-column-gap: 0px; grid-template-rows:max-content; background-color: transparent;}
.grid.card .tbl-grid tr{position:relative; top: 0px; left: 0px; width: 100%; height:auto;  display:block; padding: 5px; background-color: transparent;}
.grid.card .tbl-grid tr:before{content: ""; position:absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; width:auto; height:auto;  background: radial-gradient(ellipse at center, #ffffff 51%,#d6d6d6 100%); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.grid.card .tbl-grid tr td{position:relative; top: 0px; left: 0px; padding: 5px; width: 100% !important; min-width:unset !important; max-width: unset !important; height:auto; text-align:left !important; border-bottom: 0px; display:block !important; z-index: 1;}
.grid.card .tbl-grid tr td:before{content: attr(data-title); position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline; margin-right: 5px; font-weight: bold;}
.grid.card .tbl-grid tr td[data-field='STT'], .grid.card .tbl-grid tr td[data-field='stt']{display:none !important;}
.grid.card .tbl-grid tr:hover{background-color: transparent;}
.grid.card .tbl-grid tr.selected{background-color: transparent;}
.grid.card .tbl-grid tr.selected .card-header{background-color: #3e6db6; border-top-left-radius: 8px; border-top-right-radius: 8px; color: #fff;}
.grid.card .tbl-grid tr.selected td.card-header{background-color: var(--grid-tbl-card-selected-tbl-card-header-bg-color); border-top-left-radius: 8px; border-top-right-radius: 8px;}
.grid.card .grid-content:focus .tbl-grid tr.selected{background-color: transparent;}
.grid.card .grid-content .tbl-grid tr.selected:before{border-color: var(--grid-tbl-card-selected-tbl-card-header-bg-color); box-shadow: var(--grid-tbl-card-selected-tbl-card-header-bg-color) 0px 1px 4px;}
.grid.card .tbl-grid tr .action-menu{position:absolute; top: 6px; right: 6px; width:auto; height:auto; padding: 5px 10px; transform:none; line-height: 14px; font-size: 16px; color: var(--border-color); cursor:pointer; z-index: 2;}
.grid.card .tbl-grid tr .action-menu:hover{color: var(--default-font-color);}
.grid.card .tbl-grid tr .action-menu:before{content: "\f141"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-family: "Font Awesome 5 Pro"; font-weight: 900;}
.grid.card .tbl-grid tr.selected .action-menu{color: #fff;}

.grid .pager{position:absolute; top:auto; left:0px; right: 0px; bottom: 0px; width: 100%; height: 35px; padding: 5px; border-top: 1px solid var(--border-color); display:none;}

.grid .grid-content input[data-type='text'], .grid .grid-content select{border-radius: 0px; border-color:var(--grid-grid-content-input-border-color); background-color:var(--grid-grid-content-input-bg-color); height: 24px;}

.grid .row-header{position:absolute; top: 0px; left:0px; right:auto; bottom: 0px; width: 30px; height:100%; padding: 0px 0px 10px 0px; background-color: var(--grid-row-header-bg-color); border-right: 1px solid var(--grid-row-header-border-color); overflow:hidden;}
.grid .row-header .row{background-color: var(--grid-row-header-row-bg-color); border-bottom: 1px solid var(--grid-row-header-row-border-color); min-height: 25px; overflow:hidden;}
.grid .row-header .row:last-child{margin-bottom: 10px;}
.grid .row-header .row i{font-size: 20px; margin: 3px 0px 0px 10px; color: var(--grid-row-header-row-i-font-color); pointer-events:none;}
.grid .row-header-top{position:absolute; top: 0px; left:0px; right: 0px; width: 30px; height:auto; padding: 0px; background-color: var(--grid-row-header-top-bg-color); border-right: 1px solid var(--grid-row-header-top-border-color); border-bottom: 1px solid var(--grid-row-header-top-border-color); overflow:hidden;}
.grid[data-editgrid-info] .grid-header, .grid[data-editgrid-info] .grid-content{ border: 0px; }
.grid[data-editgrid-info] .grid-header th:last-child{border-right: 0px;}

.row {position: relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; white-space:normal; font-size: 0px;}
.row .col{display:block; width: 100% !important;}
.row .col-lg-1, .row .col-lg-2, .row .col-lg-3, .row .col-lg-4, .row .col-lg-5, .row .col-lg-6, .row .col-lg-7, .row .col-lg-8, .row .col-lg-9, .row .col-lg-10,
.row .col-md-1, .row .col-md-2, .row .col-md-3, .row .col-md-4, .row .col-md-5, .row .col-md-6, .row .col-md-7, .row .col-md-8, .row .col-md-9, .row .col-md-10,
.row .col-sm-1, .row .col-sm-2, .row .col-sm-3, .row .col-sm-4, .row .col-sm-5, .row .col-sm-6, .row .col-sm-7, .row .col-sm-8, .row .col-sm-9, .row .col-sm-10,
.row .col-xs-1, .row .col-xs-2, .row .col-xs-3, .row .col-xs-4, .row .col-xs-5, .row .col-xs-6, .row .col-xs-7, .row .col-xs-8, .row .col-xs-9, .row .col-xs-10{
    position:relative; top:0px; left: 0px; padding: 5px; margin: 0px; display:inline-block; white-space:normal; vertical-align: top; font-size: var(--default-font-size);
}
.row .col-lg-1, .row .col-md-1, .row .col-sm-1, .row .col-xs-1{width: 10%; height:auto;}
.row .col-lg-2, .row .col-md-2, .row .col-sm-2, .row .col-xs-2{width: 20%; height:auto;}
.row .col-lg-3, .row .col-md-3, .row .col-sm-3, .row .col-xs-3{width: 30%; height:auto;}
.row .col-lg-4, .row .col-md-4, .row .col-sm-4, .row .col-xs-4{width: 40%; height:auto;}
.row .col-lg-5, .row .col-md-5, .row .col-sm-5, .row .col-xs-5{width: 50%; height:auto;}
.row .col-lg-6, .row .col-md-6, .row .col-sm-6, .row .col-xs-6{width: 60%; height:auto;}
.row .col-lg-7, .row .col-md-7, .row .col-sm-7, .row .col-xs-7{width: 70%; height:auto;}
.row .col-lg-8, .row .col-md-8, .row .col-sm-8, .row .col-xs-8{width: 80%; height:auto;}
.row .col-lg-9, .row .col-md-9, .row .col-sm-9, .row .col-xs-9{width: 90%; height:auto;}
.row .col-lg-10, .row .col-md-10, .row .col-sm-10, .row .col-xs-10{width: 100%; height:auto;}

.form{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.form table, .row table{width: 100%; height: auto; border-collapse: collapse}
.form table tr td, .row table tr td{padding: 3px;}
.form .field-list{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 35px; width: 100%; height:auto; border-bottom: 1px solid var(--border-color); overflow-x:hidden; overflow-y:auto;}

.tbl-single-file{width: 100%; border:0px; border-collapse: collapse;}
.tbl-single-file tr td:first-child{padding-top: 0px; padding-bottom: 0px; padding-left: 0px;}
.tbl-single-file tr td:last-child{width: 33px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;}
.tbl-single-file tr td button{min-width: 30px; padding: 0px; border-radius: 5px; height:28px;}

.buble-button{display:none;}

.modern-window{position:absolute; top:0px; left:0px; right: 0px; bottom: 0px; width:100%; height:100%; /*overflow:auto;*/}
.modern-window .left-panel{position:absolute; top:0px; left:0px; right:auto; bottom:0px; width: 30%; height:auto; border-right: 1px solid var(--border-color);  background-color: var(--modern-window-left-panel-bg-color); background-repeat:no-repeat; background-position:left top; background-size:cover; overflow:hidden;}
.modern-window .left-panel .left-panel-conent{position:absolute; top: 50px; left:0px; right:0px; bottom:0px; width:auto; height:auto; overflow:hidden;}
.modern-window .left-panel .left-panel-conent .tree-view .tree-view-search{height: 35px; padding: 3px; border-bottom-width:0px; background-color: var(--modern-window-left-panel-left-panel-conent-tree-view-tree-view-search-bg-color);}
.modern-window .left-panel .left-panel-conent .tree-view .tree-view-search input{border: 1px solid var(--border-color); border-radius: 5px; background-color: var(--modern-window-left-panel-left-panel-conent-tree-view-tree-view-search-bg-color);}
.modern-window .left-panel .left-panel-conent .tree-view .tree-view-content ul li > div:hover{background-color: var(--modern-window-left-panel-left-panel-conent-tree-view-tree-view-content-ul-li-div-hove-bg-color);}
.modern-window .right-panel{position:absolute; top: 0px; left: 30%; right:0px; bottom:0px;  width:auto; height:auto; background-color: var(--modern-window-right-panel-bg-color);}
.modern-window .right-panel .form-container{position:absolute; top: 82px; left:0px; right: 0px; bottom:39px; outline: 0px; overflow-x:hidden; overflow-y:auto;}
.modern-window .right-panel .form-container .form{position:relative; top:0px; left:0px; width: 100%; height:auto; overflow:auto;}
.modern-window .right-panel .form-title{position:relative; top: 0px; left:0px; width:100%; height: 50px; border-bottom: 1px solid var(--border-color);}
.modern-window .right-panel .form-title span{position:absolute; top:auto; left:0px; right:auto; bottom: 5px; font-size: 25px; line-height: 28px;}
.modern-window .right-panel .btnlist{border-top: 1px solid var(--border-color);}
.modern-window .title-panel{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:32px; background-color: var(--modern-window-title-panel-bg-color); color: var(--modern-window-title-panel-font-color); padding: 5px 92px 5px 50px;}

.simple{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: auto;}
.simple .header{position:absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: auto; padding: 5px; background-color: var(--btn-list-bg-color); border-bottom: 1px solid var(--border-color); font-style: italic; color: var(--border-color);}
.simple .content{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 38px; width:auto; height: auto; overflow: auto; padding: 5px;}
.simple .btn-list{ background-color: var(--btn-list-bg-color); border-top: 1px solid var(--border-color);}

.simple-window {position:absolute; top:0px; left:0px; right:0px; bottom:0px;}
.simple-window .user-info, .simple-window .header{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width: 100%; height: 50px; border-bottom: 1px solid var(--simple-window-user-info-border-color);}
.simple-window .user-info .avatar{position:relative; width: 40px; height: 40px; margin: 5px; padding-top: 8px; float:left;}
.simple-window .user-info .avatar span{ font-size: 36px;}
.simple-window .user-info .name, .simple-window  .user-info .username{position:relative; top:0px; left:0px; width:calc(100% - 50px); height:auto; line-height: 16px; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.simple-window .user-info .name{margin-top: 5px; font-weight:bold;}
.simple-window .user-info .username{color: var(--simple-window-user-info-username-font-color);}
.simple-window .header p{position:relative; display: block; margin: 5px 0px; padding: 0px 5px; width: 100%; height: 40px; overflow: hidden; text-align: justify; color: var(--border-color);}
.simple-window .content{position:absolute; top: 50px; left:0px; right:0px; bottom: 35px; width: 100%; height:auto; border-bottom: 1px solid var(--simple-window-content-border-color);}
.simple-window .content .tab-header{background-color: var(--simple-window-content-tab-header-bg-color);}
.simple-window .content .tab-pages .tab-page-item{padding: 10px;}
.simple-window .grid{position:absolute; top: 0px; bottom: 0px;}
.simple-window .grid .grid-header, .simple-window .grid .grid-content{border:0px;}
.simple-window .grid .grid-header-content table tr th[data-field='STT']{width: 40px;}
.simple-window .grid .grid-header-content table tr th[data-field='HCreateDate']{width: 100px;}
.simple-window .grid .grid-header-content table tr th[data-field='HCreateDate_time']{width: 80px;}
.simple-window .grid .grid-header-content table tr th[data-field='HFunction'], .simple-window .grid .grid-header-content table tr th[data-field='HSource'],
.simple-window .grid .grid-header-content table tr th[data-field='HModule']{width: 150px;}
.simple-window .grid .grid-content table tr td[data-field='STT']{text-align:center;}
/*.simple-window .grid .pager{padding-right: 5px;}*/

.dal{position:absolute; top:5px; left:5px; right:5px; bottom:5px; width:auto; height:auto; border: 0px solid var(--border-color); overflow:hidden;}
.dal .search-box{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:30px;}
.dal .data-table-list{position:absolute; top:30px; left:0px; right:0px; bottom: 35px; width:auto; height:auto; border: 1px solid var(--border-color); border-radius: 5px; overflow-x:hidden; overflow-y:auto;}
.dal .data-table-list table{width: 100%; border-collapse:collapse;}
.dal .data-table-list table tr:hover{background-color: var(--dal-data-table-list-table-tr-hover-bg-color);}
.dal .data-table-list table tr td{padding: 3px;}
.dal .data-table-list table tr td:first-child{width: 20px; text-align:left;}
.dal .data-table-list table tr td:last-child{text-align:right; color: var(--dal-data-table-list-table-tr-td-last-child-font-color); font-style:italic;}
.dal .button-list{padding-left:0px; padding-right:0px; padding-bottom: 0px; margin-bottom:0px;}
.dal .button-list .btn-select, .dal .button-list .btn-unselect{float:left;}

.sir-item-list{position:absolute; top: 5px; left: 5px; right: 5px; bottom: 36px; width: auto; height: auto; padding: 5px; margin: 5px; border: 1px solid var(--border-color); overflow:auto;}

/*Quản lý menu*/
.mdl, .spl, .ftl, .wbl, .dft{position: relative; width: 100%; height: 400px; border: 1px solid var(--border-color);}
.sbl, .appl{position: relative; width: 100%; height: 200px; border: 1px solid var(--border-color);}
.mdl select{position:absolute; top:3px; left:auto; right: 10px; width:auto; height: 25px; display:inline-block; padding-right: 20px; background-color: var(--mdl-select-bg-color); border: 1px solid var(--border-color);}
.ftl a{position:absolute; top: 5px; left:auto; right: 10px; width:auto; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:auto; color: var(--ftl-a-font-color); text-decoration:none;}
.ftl a span{position:relative; top:0px; left:0px; vertical-align:top !important; cursor:pointer;}
.ftl .selected a{color: var(--ftl-selected-a-font-color);}

.dft .grid .grid-header{border-width: 0px;}
.dft .grid .grid-header th:last-child{border-right-width: 0px;}
.dft .grid .grid-content{border-width: 0px;}

.error-file-content{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}
.error-file-content .content{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 35px; overflow-x:hidden; overflow-y:auto;
                             -webkit-touch-callout:initial; -webkit-user-select:text; -moz-user-select: text; -ms-user-select:text; user-select:text;
                             padding: 5px; line-height: 22px; border-bottom: 1px solid var(--border-color); color: var(--error-file-content-content-font-color);
}

.ui-datepicker-month, .ui-datepicker-year{height: 25px; margin:0px !important;}
.ui-datepicker-year{margin-left: 5px !important;}

.server-status{position:relative; top:0px; left:0px; width: 16px; height: 16px; border-radius:50%; background-color: var(--server-status-bg-color);}
.server-status.red{background-color:rgb(240,0,15);}

.switch{position:relative; top: 0px; left: 0px; width: 35px; height: 20px; display:inline-block; border: 0px; outline: 0px;}
.switch span{position:relative; top: 0px; left: 0px; width: 35px; height: 100%; background-color: var(--switch-bg-color); border-radius: 10px; -webkit-transition: .4s; transition: .4s; display: block; cursor:pointer;}
.switch span:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color:  var(--switch-button-color); -webkit-transition: .4s; transition: .4s; border-radius: 50%; border: 0px;}
.switch:focus span:before{border: 1px dashed var(--border-color);}
.switch input:checked + span {background-color: var(--switch-on-bg-color); -webkit-transition: .4s; transition: .4s; }
.switch input:checked + span:before{left: auto; right: 2px; -webkit-transition: .4s; transition: .4s; }
.switch input:disabled + span{background-color: var(--border-color); cursor:default;}
.switch > input{display: none !important;}

/*.object-manager .workspace .center{border-width: 0px;}*/
/*.object-manager .workspace .center .title{border:1px solid var(--workspace-center-border-color); border-bottom-width: 0px;}*/
/*.object-manager .workspace .center .grid .pager{border:1px solid var(--workspace-center-border-color);}*/
.object-manager .workspace .left .tabs .item .has-new-info{position:absolute; top: auto; left: auto; right: 0px; bottom: 0px; width: 8px; height: 8px; background-color: rgba(0, 255, 0, 1); display: block; border-radius: 50%;}

.sl_item{position:relative; top:0px; left:0px; width:auto; height:auto; max-width:200px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; border:1px solid #9daccc; border-radius:3px; background:#e2e6f0; float:left; padding:5px; margin:5px;}
.sl_item span{white-space:nowrap; color:#1c2a47; width:auto; max-width: calc(100% - 21px); overflow:hidden; text-overflow: ellipsis; display:inline-block; vertical-align:middle; }
.sl_item span.fa-check{color: green; margin-right: 5px;}
.sl_item i{position:relative; top: 0px; left: 0px; width: 16px; height: 16px; font-size: 16px; color:#9caecd; display:inline-block; vertical-align:middle; margin-left: 5px; cursor:pointer;}
.sl_item i:hover{color: #5e7eae;}
.sl_item .btn_sl_item_close{position:absolute; top:50%; right:2px; width:16px; height:16px; margin-top: -8px; background-image:url(../images/fb_close_low.png); background-repeat:no-repeat; background-size: cover; cursor:pointer;}
.sl_item .btn_sl_item_close:hover{background-image:url(../images/fb_close.png); }
.sl_item.error{border-color: rgba(255, 0, 0, 0.8); background-color: rgba(255, 0, 0, 0.4);}
.sl_item.success{border-color:green; background-color:lightgreen;}
.sl_item.unknown{border-color:var(--border-color); background-color:var(--button-bg-color);}

.selected-item{position:relative; top: 0px; left: 0px; width: auto; height: auto; max-width: 100%; background-color: var(--main-control-bg-color); padding: 5px; margin: 5px; display:inline-block; vertical-align: middle; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.selected-item.allow-close{padding-right: 35px;}
.selected-item:hover{background-color: var(--border-color); color: var(--font-hover-color)}
.selected-item .avatar{padding: 0px; margin: 0px 5px 0px 0px; border-radius: 0px; pointer-events:none;}
.selected-item span{position:relative; top: 0px; left: 0px; width: auto; height: auto; max-width: 100%; display:inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;}
.selected-item .close{position:absolute; top: 0px; left: auto; right: 0px; width: 35px; height: 100%; padding: 0px; margin: 0px; background-color: inherit; background-image: url(../images/close.svg); background-repeat: no-repeat; background-position: center center; background-size: 10px; cursor:pointer;}
.selected-item:hover .close{background-image:url(../images/close_white.svg);}

.obj-data-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 100%; outline: 0px;}
.obj-data-list:focus{outline: 0px;}
.obj-data-list .item:focus{outline: 0px;}
.obj-data-list .item:focus:before{content: ""; position:absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 1px dashed var(--border-color); border-radius: 5px;}
.obj-data-list .item .action-menu{position:absolute; top: 0px; left:auto; right:0px; width:auto; height:auto; padding: 0px 8px; cursor:pointer; background-color: rgba(171,171,171,0.65); color: rgba(0,0,0,0.65); display:none;}
.obj-data-list .item .action-menu:before{content: "\f141"; position:relative; font-weight:900; font-family: "Font Awesome 5 Pro";}
.obj-data-list .item .action-menu:hover{background-color: #fff; color: rgba(0,0,0,1);}
.obj-data-list .item:hover .action-menu{display:block;}
.obj-data-list .item.loading{pointer-events:none; animation: blinker 2s infinite; -webkit-animation: blinker 2s infinite;}

.look-up .content{padding: 0px; overflow:hidden;}
.look-up .filter-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; border-bottom: 1px solid var(--border-color); overflow:hidden;}
.look-up .filter-bar .keyword{width: 100%; height:100%; line-height: 24px; padding: 5px; max-width: 100%; border: 0px; border-radius: 0px; margin-left: 0px;}
.look-up .data-list{position:absolute; top: 35px; left: 0px; right: 0px; bottom: 0px; width: 100%; height:auto; border: 0px; border-radius: 0px; overflow:auto; outline: 0px;}
.look-up .data-list .item{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; cursor:pointer;}
.look-up .data-list .item:hover{background-color: #ccc;}
.look-up .data-list .item *[data-field]{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline-block; vertical-align: middle; padding: 0px 5px; pointer-events:none;}
.look-up .data-list .item *[data-field='avatar']{width: 30px; height: 30px; border-radius: 50%; background-size:cover; background-position:center;}
.look-up .data-list .item.checked *[data-field='avatar']:before{content: ""; position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--border-color); border-radius: 50%;}
.look-up .data-list .item.checked *[data-field='avatar']:after{content: "\f00c"; position:absolute; top: 50%; left: 50%; width:auto; height:auto; transform:translate(-50%, -50%); color: #fff; font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.look-up .data-list .item *[data-field='text']{width:max-content; max-width: calc(100% - 30px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.look-up .data-list .item i:first-child{position:relative; display:inline-block; vertical-align:middle; margin-right: 5px; font-size: 20px; color: var(--default-light-color);}
.look-up .data-list .item.checked i:first-child + div:after{content: "\f00c"; position:relative; width:auto; height:auto; margin-left: 5px; color: var(--success); font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.lang-look-up-obj{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.lang-look-up-obj input{padding-right: 33px;}
.lang-look-up-obj button{position:absolute; top:0px; left:auto; right: 0px; width:auto; height: 100%; padding: 5px 8px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; cursor:pointer;}

.look-up-obj{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.look-up-obj input{padding-right: 33px;}
.look-up-obj button{position:absolute; top:0px; left:auto; right: 0px; width:auto; height: 100%; padding: 5px 8px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; cursor:pointer;}
.look-up-obj .lookup-img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9;border: 1px solid var(--border-color); border-radius: 5px; background-repeat: no-repeat; background-size:contain; background-position:center; background-image: url('/files/noimage'); background-color: #fff; cursor:pointer;}

.group-button{position:relative; top: 0px; left: 0px; right: auto; bottom: auto; width:auto; height: auto; min-height: 0px; display:inline-block; list-style-type: none; padding: 0px; margin: 0px; vertical-align:middle; background-color: var(--app-header-bg-color); border: 1px solid var(--app-header-bg-color); overflow: hidden; line-height: 16px; border-radius: 5px;}
.group-button li{position:relative; top: 0px; left: 0px; width: auto; height:auto; min-height: 0px; padding: 3px 5px; margin: 0px; display:inline-block; vertical-align:middle; background-color: var(--main-bg-color); color: var(--border-color); line-height: 16px;}
.group-button li > *{pointer-events: none; vertical-align: bottom;}
.group-button li i{font-size: 16px; margin-right: 5px;}
.group-button li.selected{background-color: transparent; color: var(--main-bg-color);}

.dropdown-list-button{position:relative; top: 0px; left: 0px; right: auto; bottom: auto; width:auto; height: auto; min-height: 0px; overflow: hidden; line-height: 16px; border-radius: 5px; padding-left: 5px !important;}
.dropdown-list-button i:first-child{font-size: 16px; margin-right: 5px; pointer-events:none;}

.category-select{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 36px; width: 100%; height:auto; overflow: hidden; background-color: var(--main-bg-color); border-bottom: 1px solid var(--border-color);}
.category-select .search-box{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px; border-bottom: 1px solid var(--border-color);}
.category-select .item-list{position:absolute; top: 39px; left: 0px; right: 0px; bottom: 0px; padding: 5px; overflow-x: hidden; overflow-y:auto;}
.category-select .item-list .item{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px; margin: 0px 0px 5px 0px; border-radius: 5px;}
.category-select .item-list .item:hover{background-color: var(--main-control-bg-color);}
.category-select .item-list .item:focus{border: 0px; outline: 0px; background-color: var(--main-control-bg-color);}
.category-select .item-list .item.selected{background-image: url(../images/tick.svg); background-repeat: no-repeat; background-size: 16px; background-position: right 10px center;}
.category-select .item-list .item *{pointer-events: none;}
.category-select .item-list .item .avatar{margin: 0px 5px 0px 0px;}
.category-select .item-list .item span{display:inline-block; vertical-align:middle; max-width: calc(100% - 40px); height:auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.category-select .item-list .item .action{position:absolute; top: 0px; left: auto; right: 36px; width: auto; height: 100%; cursor:pointer; padding: 8px; margin: 0px; color: var(--border-color); text-align: center; display: none; pointer-events:visible;}
.category-select .item-list .item .action:hover{color: var(--main-font-color);}
.category-select .item-list .item:hover .action{display: block;}

.datetime-select{position:absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; background-color: var(--main-bg-color); overflow:hidden;}
.datetime-select .btn-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto;}
.datetime-select .item{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 3px; background-color: var(--main-bg-color); border-radius: 3px; border: 1px solid var(--border-color); overflow: hidden;}
.datetime-select .item.selected{border: 1px solid var(--red);}
.datetime-select .item .place-holder{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px; color: var(--border-color);}
.datetime-select .item .date{position:relative; top: 0px; left: 0px; width: calc(100% - 86px); height: auto; background-color: var(--main-control-bg-color); border-radius: 3px; padding: 5px; display: none; vertical-align: middle;}
.datetime-select .item .time{position:relative; top: 0px; left: 0px; width: 55px; height: 100%; display:none; vertical-align: middle; overflow: hidden; background-color: transparent;}
.datetime-select .item .time input{border: 0px; background-color: transparent; max-width: 24px;}
.datetime-select .item .time input:first-child{text-align:right;}
.datetime-select .item .close{position:relative; top: 0px; left: 0px; width: 30px; height: 30px; display:none; vertical-align: middle; cursor: pointer; background: url(../images/close.svg) no-repeat center center; background-size: 12px; opacity: 0.5;}
.datetime-select .item .close:hover{opacity: 1;}
.datetime-select .ui-datepicker.ui-datepicker-inline {width: 100% !important;}

.color-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow-x: hidden; overflow-y: auto;}
.color-item{position:relative; top: 0px; left: 0px; width: 26px; height: 26px; padding: 2px; margin: 0px 5px 0px 0px; display:inline-block; vertical-align: top; border-radius: 50%; border: 2px solid transparent; background-color: transparent; overflow: hidden; opacity: 0.5; -webkit-transition: opacity .2s ease-out; transition: opacity .2s ease-out;}
.color-list:not(.disabled) .color-item:hover, .color-item.selected{border-color: var(--main-font-color); opacity: 1;}
.color-item .color{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 50%; padding:0px 0px 4px 0px; pointer-events: none; text-align: center;}
.color-item .color i{position:relative; top: 0px; left: 0px; vertical-align:unset; display:none; color: #fff;}
.color-list:not(.disabled) .color-item.selected:hover .color i{display: inline-block;}

.smart-chosen-container{position:relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: auto; min-height: 100%; padding: 0px 0px 1px 0px; line-height: 25px;}
.smart-chosen-container .chosen-container{width: 100%; max-width: 100%;}

.smart-selector-container{position:relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: auto; min-height: 100%; padding: 0px; line-height: 25px;}
.smart-selector-container .btn-select-file{right: 0px; bottom: 0px;}
.smart-selector-container input{padding-right: 35px !important;}

.card-view{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow-x:hidden; overflow-y:auto; white-space:nowrap; padding-right: 17px;}
.card-view .column{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:inline-block; vertical-align: top; padding: 10px;}
.card-view .column .card{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-bottom: 20px; border: 0px solid var(--border-color); border-radius:5px;
                white-space:normal; overflow:hidden; background-color: #fff;
}
.tool-tip{position:fixed; top: 0px; left: 0px; width:auto; height:auto; padding: 3px 10px; text-align:center; border-radius: 5px; background-color: rgba(0, 0, 0, 0.7); color: #fff; display:none;}
.tool-tip:before{content: ''; position:absolute; top: 100%; left: calc(50% - 4px); width: 8px; height: 8px; border: 4px solid rgba(0,0,0,0.7); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.tool-tip.tool-tip-left:before{top: calc(50% - 4px); left: 100%; border-left-color: rgba(0,0,0,0.7); border-top-color: transparent; border-right-color: transparent; border-top-color: transparent;}
.tool-tip.tool-tip-right:before{top: calc(50% - 4px); left: -8px; border-left-color: transparent; border-top-color: transparent; border-right-color: rgba(0,0,0,0.7); border-top-color: transparent;}

.slider-bar{position:relative; top: 0px; left:0px; right: 0px; width: 100%; height: 18px; padding: 0px; overflow:hidden;}
.slider-bar .total{position:relative; top: calc(50% - 3px); left: 0px; width: 100%; height: 6px; background-color: var(--default-low-color); border-radius: 3px; overflow:hidden;}
.slider-bar .total .selected{position:relative; top: 0px; left: 0px; width:0px; height: 100%; background-color: var(--default-light-color); border-radius: 3px; display:block; z-index: 1}
.slider-bar .total .total-selected{position:absolute; top: 0px; left: 0px; width:auto; height: 100%; background-color: var(--success); border-radius: 3px; display:inline-block; z-index: 0;}
.slider-bar .handle{position:absolute !important; top: 0px; left: 0px; width: 18px; height: 100%; border-radius: 50%; background-color: #fff; border: 2px solid var(--default-light-color); cursor:pointer; z-index:2;}
.slider-bar.disabled .handle{display:none;}

.star-rating{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 0px; margin: 0px;}
.star-rating i{position:relative; top: 0px; left: 0px; color: var(--main-font-color); display: inline-block; vertical-align:middle; cursor: pointer; margin-right: 3px;}
.star-rating.disabled i{cursor:default; pointer-events:none;}
.star-rating.disabled i.fal{color: var(--border-color);}
.star-rating i.fas, .star-rating i.selected{color: gold;}

.user-card{position:relative; top: 0px; left: 0px; width:auto; height: auto; min-height: 40px; border-radius: 5px; max-width: 100%; overflow:hidden;}
.user-card:hover{background-color: var(--main-control-bg-color);}
.user-card > *{position:relative; top: 0px; left: 0px; width:auto; height: 100%; display:inline-block; vertical-align: top; pointer-events: none;}
.user-card > .avatar{width: 40px; height: 40px; margin-right: 5px; border-radius: 5px;}
.user-card > .user-card-info{max-width: calc(100% - 45px); padding: 3px;}
.user-card > .user-card-info .name{position:relative; top: 0px; left: 0px; width:auto; height:auto; line-height: 16px; margin-bottom: 3px; display:block; color: var(--main-font-color);}
.user-card > .user-card-info .info{position:relative; top: 0px; left: 0px; width:auto; height:auto; line-height: 16px; font-size: 12px; color: var(--border-color);}
.user-card > .user-card-info .slider-bar{width: calc(100% - 10px);}
.user-card > .user-card-info .slider-bar .total .selected{background-color: rgba(0,0,0, 0.25);}

.has-new-info{position:absolute; min-width: 20px; height: 16px; border-radius: 8px; background-color: var(--current-user-tool-bar-item-has-new-info-bg-color); font-size: 10px; color: var(--current-user-tool-bar-item-has-new-info-font-color); line-height: 16px; font-weight:bold; padding: 1px 3px; overflow-x:auto; overflow-y:hidden; text-align:center; pointer-events:none;}

.comment-control{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 0px; margin: 0px; background-color: transparent;}
.comment-control .comment-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; margin: 0px;}
.comment-control .comment-list .comment-list-load{position:relative; top: 0px; left: 0px; width: auto; height:auto; cursor:pointer; display:inline-block; font-size: 12px; color:#65676b; font-weight: bold; vertical-align: middle; cursor:pointer;}
.comment-control .comment-list .comment-list-load span{pointer-events:none;}
.comment-control .comment-list .comment-list-load:hover{text-decoration: underline;}
.comment-control .comment-list .comment-item{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-top: 5px;}
.comment-control .comment-list .comment-item > *{position:relative; top: 0px; left: 0px; display:inline-block; vertical-align:top;}
.comment-control .comment-list .comment-item > .avatar{width: 32px; height: 32px; margin-top: 6px;}
.comment-control .comment-list .comment-item > .comment-item-content{width: calc(100% - 37px); background-color: #f0f2f5; border-radius: 21px; padding: 10px; margin-left: 5px;}
.comment-control .comment-list .comment-item > .comment-item-content .comment-item-name{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-weight: bold;}
.comment-control .comment-list .comment-item > .comment-item-content .comment-item-message{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin-top: 5px; word-break: break-word;}
.comment-control .comment-list .comment-item > .comment-item-content .attach-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.comment-control .comment-list .comment-item > .comment-item-content .attach-list img{width: 100%; height:auto; border-radius: 10px; display:block;}
.comment-control .comment-list .comment-item > .comment-item-content .attach-list .selected-item{cursor:pointer; margin: 5px 5px 5px 0px;}
.comment-control .comment-list .comment-item > .comment-item-content .attach-list .selected-item > *{pointer-events:none;}
.comment-control .comment-list .comment-item > .comment-item-content .attach-list .selected-item .avatar{border-radius: 0px;}
.comment-control .comment-list .comment-item > .comment-item-content .comment-item-like-count{position:absolute; top: auto; left:auto; right: 0px; bottom: -10px; width:auto; height: 20px; min-width: 30px; border-radius: 10px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); display:none; z-index: 2; padding: 2px 5px 2px 2px; font-size: 13px; line-height: 13px; pointer-events:none;}
.comment-control .comment-list .comment-item > .comment-item-content .comment-item-like-count img{position:relative; top: 0px; left: 0px; width: 16px; height: 16px; margin-right: 5px; vertical-align: middle;}
.comment-control .comment-list .comment-item > .comment-item-content .comment-item-like-count span{position:relative; display:inline-block; margin-top: 2px; vertical-align: middle;}
.comment-control .comment-list .comment-item > .comment-item-tool{position:relative; top: 0px; left: 0px; height:auto; width: calc(100% - 37px); margin-left: 37px;}
.comment-control .comment-list .comment-item > .comment-item-tool > *{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding-right: 15px; font-size: 12px; color:#65676b; font-weight: bold; display:inline-block; vertical-align: middle; cursor:pointer;}
.comment-control .comment-list .comment-item > .comment-item-tool > *:hover{text-decoration:underline;}
.comment-control .comment-list .comment-item > .comment-item-tool > *:before{content:''; position:absolute; top: 9px; left:auto; right: 7px; bottom:auto; width: 2px; height: 2px; background-color: #65676b; border-radius: 50%;}
.comment-control .comment-list .comment-item > .comment-item-tool > .time{color: var(--border-color); font-weight:normal; cursor:default;}
.comment-control .comment-list .comment-item > .comment-item-tool > .time:hover{text-decoration:none;}
.comment-control .comment-list .comment-item > .comment-item-tool > .time:before{display:none;}
.comment-control .comment-list .comment-item > .comment-item-tool > .action-like.mylike{color: rgb(32, 120, 244);}
.comment-control .comment-list .comment-item .sub-comment{position:relative; top: 0px; left: 0px; width: calc(100% - 37px); max-width: calc(100% - 37px); height:auto; margin-left: 37px;}
.comment-control .comment-list .comment-item .sub-comment > .comment-item > .avatar{width: 24px; height:24px;}
.comment-control .comment-list .comment-item .sub-comment > .comment-item > .comment-item-content{width: calc(100% - 29px); margin-left: 5px;}
.comment-control .comment-list .comment-item .sub-comment > .comment-item > .comment-item-tool{width: calc(100% - 29px); margin-left: 29px;}
.comment-control .comment-list .comment-item .sub-comment > .comment-list-load{margin-top: 10px;}
.comment-control .comment-form{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; margin: 0px;}

.comment-editor{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 36px; padding: 10px; border-radius: 21px; background-color: #f0f2f5;}
.comment-editor .comment-placeholder{position:absolute; top: 10px; left: 10px; width:auto; height:auto; line-height: 22px; color:var(--border-color); pointer-events:none;}
.comment-editor .comment-message{position:relative; top: 0px; left: 0px; width: auto; height:auto; line-height: 22px; border: 0px; outline: 0px; cursor:text; max-width: 100%; min-width: 50%; display:inline-block; vertical-align: top;}
.comment-editor .comment-attach-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px;}
.comment-editor .comment-attach-list .selected-item.allow-close{padding-left: 0px; padding-top: 0px; padding-bottom: 0px; margin: 10px 0px 0px 0px;}
.comment-editor .comment-attach-list .selected-item.allow-close .avatar{border-radius: 0px;}
.comment-editor i{position:absolute; top:auto; left:auto; right: 5px; bottom: 5px; width: 32px; height: 32px; font-size: 16px; padding: 8px; border-radius: 50%; text-align:center; cursor:pointer; color: var(--border-color);}
.comment-editor i:hover{background-color: #e4e6e9; color: var(--main-font-color);}

.duration{position:relative; top: 0px; left: 0px; width:auto; height: auto; min-width: 30px; max-width: 100%; overflow:hidden; white-space: normal; text-overflow: ellipsis; padding: 5px; text-align: center; background-color: var(--main-control-bg-color); border-radius: 5px; cursor: pointer; display: inline-block; vertical-align: top;}
.duration.disabled, .duration.disabled *{color: var(--border-color); cursor: default;}
.duration span{position:relative; width: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;}
.duration:hover{background-color: var(--app-header-bg-color); color: var(--main-bg-color);}
.duration.disabled:hover, .duration.disabled:hover i{background-color: var(--main-control-bg-color); color: var(--border-color); cursor: default;}
.duration:hover i{color: var(--main-bg-color);}
.duration *{pointer-events: none;}
.duration i{font-size: 11px; vertical-align:unset; color: var(--main-font-color); margin: 0px 3px 0px 5px;}

*[data-allow-edit='1'], *[data-allow-change='1']{padding: 5px 24px 5px 5px; border-radius: 5px; cursor: pointer; outline: 0px; min-height: 20px;}
*[data-allow-edit='1']:hover, *[data-allow-change='1']:hover{ background-color: #e6e8ec; background-image:url(../images/pencil.svg); background-size: 14px; background-position: right 3px center; background-repeat: no-repeat;}

.check-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px;}
.check-list label{margin: 0px !important; padding: 5px 0px !important;}
.check-list .check-list-item{position:relative; top: 0px; left: 0px; width:100%; height:28px; margin-bottom: 5px;}
.check-list .check-list-item input:first-child{position:relative; top: 0px; left: 0px; width: calc(100% - 90px); height: 100%;}
.check-list .check-list-item input:nth-child(2){position:absolute; top: 0px; left:auto; right: 35px; width: 50px; height: 100%;}
.check-list .check-list-item button{position:absolute; top: 0px; left: auto; right: 0px; width: 30px; min-width: 30px; height: 100%; padding: 0px; border-radius: 5px; text-align:center; border: 1px solid var(--border-color); cursor:pointer;}
.check-list .check-list-item button i{color: var(--default-light-color); pointer-events: none;}

.bubble-button{position:fixed; top:auto; left: auto; right: 20px; bottom: 55px; width: 55px; height: 55px; border-radius: 50%; background-color: var(--app-header-bg-color); box-shadow: var(--chat-box-container-chat-box-shadow); display:none; z-index: 5; padding: 15px; text-align:center;}
.bubble-button > i{position:relative; top: 0px; left: 0px; margin: 0px; font-size: 25px; color: var(--button-bg-color); pointer-events:none;}
.bubble-button:hover{background-color: var(--ribbon-button-active-bg-color);}
.bubble-button:hover > i{color: var(--app-header-bg-color);}

.time-picker{background-color: #fff;}
.time-picker label{color: #000; text-transform:uppercase; font-weight: bold;}
.time-picker .hour, .time-picker .minute{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align: left; white-space:normal;}
.time-picker .item{position:relative; top: 0px; left: 0px; width: 55px; height:auto; padding: 5px; margin: 5px; border: 1px solid var(--border-color); border-radius: 5px; cursor:pointer; text-align:center; display:inline-block; vertical-align: top;}
.time-picker .item:hover{background-color: #f1f1f1;}
.time-picker .item:focus{outline-color: var(--default-light-color);}
.time-picker .item.selected{border-color: var(--default-light-color); background-color: var(--default-light-color); color: #fff;}
.time-picker .item > *{pointer-events: none;}

.expand-img{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-height: 100%; max-height: 100%; background-color: #fff;}
.expand-img > div{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-repeat:no-repeat; background-size:contain; background-position:center;}
.expand-img .controlHolder{display:none;}

.gallery-expand{position:fixed; top: 0px; left: 0px; width: auto; height: auto; max-height: 100%; max-width: 100%; overflow:hidden; background-color: rgba(0,0,0,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.gallery-expand .close{position:absolute; top: 20px; left: auto; right: 20px; width: 32px; height: 32px; font-size: 32px; background-color: rgba(0,0,0,0.25); color: #fff; cursor:pointer; text-align: center; border-radius: 5px; z-index: 2;}
.gallery-expand .next{position:absolute; top: 50%; left:auto; right: 10px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0,0,0,0.45); color: #fff; cursor:pointer; font-size: 24px; z-index: 2;}
.gallery-expand .back{position:absolute; top: 50%; left:10px; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(0,0,0,0.45); color: #fff; cursor:pointer; font-size: 24px; z-index: 2;}
.gallery-expand .next i, .gallery-expand .back i{position:absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform:translate(-50%, -50%); text-align:center; pointer-events: none;}
.gallery-expand .content{position:absolute; top: 0px; left: 0px; width:100%; height:100%; min-width: 100%; min-height: 100%; z-index: 1; opacity: 1 !important; background-repeat:no-repeat; background-size:cover; background-position:center; background-color: transparent;}

.field-unit{position:absolute; top: auto; left:auto; right: 10px; bottom: 9px; font-size: 12px; color: var(--border-color); pointer-events:none;}
.field-unit + input{padding-right: 45px !important;}

.change-password{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.change-password .btn-list{border-top: 1px solid var(--border-color); background-color: #f1f1f1;}

.user-setting .content{padding: 0px;}
.user-setting table{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 0px; border-collapse: collapse;}
.user-setting table tr td{padding: 5px;}
.user-setting table.general tr td:first-child{width: 100px;}
.user-setting table tr td img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border-radius: 5px;}
.user-setting table tr td select{text-transform:capitalize;}
.user-setting table.security tr td{padding: 10px 5px;}
.user-setting table.security tr td:last-child{width: 50px; text-align:right;}

.field i{position:absolute; top: auto; left: 13px; bottom: 12px; font-size: 16px; color: var(--label-font-color);}
.field input, .field select{padding-left: 30px;}
.field input:focus + i, .field select:focus + i {color: var(--input-focus-border-color);}

.folder-manager{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow:hidden;}
.folder-manager .filter-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; margin: 0px; white-space:nowrap; overflow:hidden; background-color: var(--tabs-tab-pages-bg-color);}
.folder-manager .filter-bar > div{position:relative; top: 0px; left: 0px; width:auto; height: auto; min-height: 100%; display:inline-block; vertical-align:middle;}
.folder-manager .filter-bar > div:not(:last-child){margin-right: 5px;}
.folder-manager .filter-bar .left-control i{position:relative; top: 0px; left: 0px; width: auto; height: 30px; padding: 6px; font-size: 18px; color: var(--border-color); border: 1px solid var(--border-color); border-radius: 5px; cursor:pointer;}
.folder-manager .filter-bar .left-control i:not(:last-child){margin-right: 5px;}
.folder-manager .filter-bar .left-control i:hover{color: var(--default-light-color); border-color: var(--default-light-color);}
.folder-manager .filter-bar .right-control i{position:relative; top: 0px; left: 0px; width: auto; height: 30px; padding: 6px; font-size: 18px; color: var(--border-color); border: 1px solid var(--border-color); border-radius: 5px; cursor:pointer;}
.folder-manager .filter-bar .right-control i:not(:last-child){margin-right: 5px;}
.folder-manager .filter-bar .right-control i:hover{color: var(--default-light-color); border-color: var(--default-light-color);}
.folder-manager .filter-bar .address{border: 1px solid var(--border-color); border-radius: 5px; padding: 0px 29px 0px 20px; width: calc(100% - 316px); min-height: 30px; white-space:nowrap; overflow:hidden; background: url(../images/Folder-16x16.png) no-repeat; background-size: 16px; background-position: 2px center;}
.folder-manager .filter-bar .address .item{position:relative; top: 0px; left: 0px; width:auto; height:100%; display:inline-block; vertical-align: top; padding: 0px 20px 0px 3px; line-height: 28px; cursor:pointer;}
.folder-manager .filter-bar .address .item:after{content: "\f105"; position:absolute; top: 50%; left:auto; right: 5px; transform:translateY(-50%); font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.folder-manager .filter-bar .address .item:last-of-type{padding-right: 3px;}
.folder-manager .filter-bar .address .item:last-of-type:after{display:none;}
.folder-manager .filter-bar .address .item:hover{background-color: var(--button-active-bg-color);}
.folder-manager .filter-bar .address i:last-child{position:absolute; top: 0px; left:auto; right: 0px; width:auto; height: 100%; padding: 7px; font-size: 14px; color: var(--border-color); border-left: 1px solid var(--border-color); border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: var(--tabs-tab-pages-bg-color); cursor:pointer;}
.folder-manager .filter-bar .address i:last-child:hover{color: var(--default-light-color); border-color: var(--default-light-color);}
.folder-manager .filter-bar .search-box .keyword{margin-left: 0px;}
.folder-manager .folder-list{position:absolute; top: 40px; left: 0px; right: 0px; bottom: 0px; width: 100%; height:auto; overflow:auto; border-top: 1px solid var(--border-color); padding: 10px; background-color: #fff;}
.folder-manager .folder-list .item{position:relative; top: 0px; left: 0px; width: 100px; height:auto; padding: 5px; margin: 5px; display:inline-block; vertical-align: top; border-radius: 5px; border: 1px solid transparent;}
.folder-manager .folder-list .item *{pointer-events:none;}
.folder-manager .folder-list .item:focus:before{display:none;}
.folder-manager .folder-list .item:hover{background-color: var(--file-manager-body-file-list-item-hover-bg-color); border: 1px solid var(--file-manager-body-file-list-item-hover-border-color);}
.folder-manager .folder-list .item.selected{border: 1px solid var(--file-manager-body-file-list-item-selected-border-color); background-color: var(--file-manager-body-file-list-item-selected-bg-color);}
.folder-manager .folder-list .item *[data-field='icon']{position:relative; top: 0px; left: 0px; width: auto; height:auto; min-width: 32px; min-height: 32px; padding: 0px; margin:auto; background-image: url(../images/folder.png); background-repeat: no-repeat; background-size:contain; background-position:center;}
.folder-manager .folder-list .item *[data-field='title']{position:relative; top: 0px; left: 0px; width: 100%; height: 36px; max-width: 90px; white-space:normal; text-align: center; line-height: 18px; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow: ellipsis; word-break:break-word;}
.folder-manager .folder-list .file-content{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto; display:none;}
.folder-manager .folder-list .file-content img{position:relative; top: 0px; left: 0px; width:auto; height:auto; max-width:100%; margin: 0px auto; display:block;}
.folder-manager .folder-list .file-content iframe{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;}
.folder-manager .folder-list .file-content .file-item{position:absolute; top: 50%; left: 50%; width:auto; height:auto; transform:translate(-50%, -50%); border: 1px solid var(--border-color); border-radius: 5px; padding: 5px 5px 5px 42px; background-repeat: no-repeat; background-position: 5px center; background-size: 32px auto;}
.folder-manager .folder-list .file-content .file-item .name{font-weight: bold;}
.folder-manager .folder-list .file-content .file-item .size{color: var(--border-color); font-size: 11px;}
.folder-manager .folder-list .file-content .download{position:absolute; top: 0px; left:auto; right:5px; width:auto; height:auto; padding: 5px 5px 5px 35px; margin: 0px; cursor:pointer; border: 1px solid var(--border-color); border-top-width: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #fff;}
.folder-manager .folder-list .file-content .download:hover{border-color: var(--file-manager-body-file-list-item-hover-border-color); background-color: var(--file-manager-body-file-list-item-hover-bg-color);}
.folder-manager .folder-list .file-content .download:active{border-color: var(--file-manager-body-file-list-item-selected-border-color); background-color: var(--file-manager-body-file-list-item-selected-bg-color);}
.folder-manager .folder-list .file-content .download:before{content: "\f019"; position:absolute; top: 50%; left: 5px; width: auto; height:auto; transform:translateY(-50%); color: var(--default-light-color); font-size: 24px; font-weight: 900; font-family: "Font Awesome 5 Pro";}
.folder-manager .folder-list .file-content .download *{pointer-events:none;}
.folder-manager .status-bar{position:absolute; top: auto; left:0px; right: 0px; bottom: 0px; width: 100%; height:auto; padding: 5px; border-top: 1px solid var(--border-color); text-align:right;}
.folder-manager .status-bar button:not(:last-child){margin-right: 5px;}
.folder-manager .status-bar > span{position:absolute; top: 50%; left: 5px; width:auto; height:auto; transform:translateY(-50%); display:block;}

.data-list{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 300px; border: 1px solid var(--border-color); border-radius: 5px; overflow:hidden;}
.filter-bar{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px;}
.filter-bar input[type='text']{max-width: 200px; margin-left: 5px;}
.simple-category .grid .grid-header, .simple-category .grid .grid-content{border: 0px;}
.simple-category .grid .grid-header th[data-field='Action']{width: 50px; min-width: 50px; max-width: 50px;}
.simple-category .grid .grid-content td[data-field='Action']{text-align: center;}
.simple-category .grid .grid-content .btn-del{padding: 5px; width: 30px; height: 30px; cursor:pointer;}
.simple-category .grid .grid-content .btn-del:disabled{cursor:default;}
.simple-category .grid .grid-content .btn-del:before{left: 50%; transform:translate(-50%, -50%);}

.bottom-plugin{position:fixed; top:auto; left:auto; right: 15px; bottom: 0px; width:auto; height:auto; background:transparent; z-index: 2;}
.bottom-plugin .plugin-handle{position:relative; top:auto; left:auto; right: 0px; bottom: 0px; width:auto; height:auto; transform:translateY(100%); background-color:var(--default-light-color); color: #fff; cursor:pointer; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: 0.5s; opacity: 0; filter: opacity(0); -webkit-filter: opacity(0); display:block;}
.bottom-plugin .plugin-handle span{position:relative; top: 0px; left: 0px; width: max-content; height: max-content; padding: 12px 10px 3px 10px; font-size: 12px; pointer-events:none; display:block; line-height: 16px;}
.bottom-plugin .plugin-handle span:before{content: "\f077"; position:absolute; top: 0px; left: 50%; transform:translateX(-50%); font-size: 12px; font-weight: 300; font-family: "Font Awesome 5 Pro"; line-height: 12px;}
.bottom-plugin .plugin-handle:hover{background-color:var(--tabs-tab-header-tab-item-hover-bg-color); box-shadow: var(--bubble-notification-shadow);}
.bottom-plugin .plugin-body{position:absolute; top:auto; left:auto; right: 0px; bottom: 15px; width:auto; height:auto; opacity: 1; filter: opacity(1); -webkit-filter: opacity(1); border-radius: 10px; box-shadow: var(--bubble-notification-shadow); overflow:hidden; transition: 0.5s;}
.bottom-plugin.hide .plugin-handle{transform:translateY(0px); opacity: 1; filter: opacity(1); -webkit-filter: opacity(1);}
.bottom-plugin.hide .plugin-body, .bottom-plugin .plugin-body.hide{transform:translateY(100%); opacity: 0; filter: opacity(0); -webkit-filter: opacity(0);}

.access-statistics{position:relative; top:0px; left:0px; width: 250px; height:auto; background-color: rgba(241, 241, 241, 0.25); border: 0px; border-radius: 10px; overflow:hidden;}
.access-statistics .title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; color: #fff; background-color: var(--default-light-color); font-weight: bold;}
.access-statistics .title .close{position:absolute; top: 0px; left:auto; right: 0px; bottom: 0px; width: 32px; height: 100%; cursor:pointer; color: #ababab;}
.access-statistics .title .close:hover{color: #fff;}
.access-statistics .title .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.access-statistics span{position:relative; display:block; width: 100%; height:auto; overflow:hidden; text-overflow:ellipsis; font-weight: bold; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);}

@media (min-width: 769px) {
    .collapse{top: 0px !important; height: 67px !important;}
    .collapse .ribbon .tab-pages{height:37px;}
    .collapse .ribbon .ribbon-bar .ribbon-bar-title{display:none;}
    .collapse .ribbon button .title{white-space:nowrap; vertical-align: top; margin: 0px 0px 0px 5px;}
    .collapse .ribbon .ribbon-bar .button-group{height:100%; white-space:nowrap; vertical-align: middle; margin-right: 10px;}
    .collapse .ribbon .btn32 .icon, .collapse .ribbon .btn16 .icon{position:relative; top:0px; left:0px; width:16px; height:16px; display:inline-block; font-size: 16px; margin:0px; vertical-align: top;}
    .collapse .ribbon .btn32, .collapse .ribbon .btn16{padding: 4px; max-height: 100% !important; min-width: 70px; max-width: none; display: inline-block; margin-right: 10px; text-align: left; float: left; line-height: 15px; white-space: nowrap; vertical-align: middle;}
    .collapse .ribbon .tab-pages .ribbon-pin{display:none;}
    .collapse .ribbon .tab-pages{white-space:nowrap;}
    .collapse .ribbon .tab-pages .tab-page-item .ribbon-bar:last-child{border-right: 0px;}
    .collapse + div{top: 72px !important;}
}

/* Landscape tablets and medium desktops : md*/
@media (min-width: 1025px) and (max-width: 1199px) {
}

/* Portrait tablets and small desktops: sm */
@media (min-width: 769px) and (max-width: 1024px) {
}

/* Landscape phones and portrait tablets: xs*/
/*@media (min-width: 480px) and (max-width: 768px) {
   
}*/
/*@media (max-width: 480px){}*/