/*sm --- Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) {
    html,body, form {font-size: 15px; overflow-y:auto; overflow-x:hidden; }
    .main-control{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto; min-height: 100vh; overflow-x:hidden; overflow-y:auto;}
    .main-control .app-container{position:relative; top:0px; left:0px; width: 100%; height:auto; min-height: 100vh;}

    .mobile_active_effect:active:after{
        position:absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; margin: 0px; border: 0px; border-radius: 50%; background-color: rgba(1, 115, 199, 0.2); animation: fadeOut 0.1s; -webkit-animation: fadeOut 0.1s;
    }
    
    .app-main{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:100%; height:auto; min-height: 100vh; padding: 0px;}
    .app-main .app-header{position:fixed; top: 0px; left:0px; right:auto; bottom:auto; width:100%; height: 65px; padding: 0px; background: var(--app-header-xs-bg-color); border-bottom: 0px solid var(--app-header-border-color); z-index:3; display:block;}
    .app-main .app-menu{position:fixed; top:auto; left:0px; right:0px; bottom:0px; width:100%; height:50px; max-width: 576px; border-bottom: 0px; background-color: var(--app-menu-xs-bg-color); z-index:4; margin: 0px auto 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; border-radius: 8px;}
    .app-main .app-menu > ul.menu{position:absolute; top: 0px; left:0px; width: 100%; height: 100%; background-color: var(--app-menu-ribbon-tab-header-bg-color); white-space:nowrap; border-radius: 8px; z-index: 2; display:grid; grid-auto-flow:column; grid-gap: 5px;}
    .app-main .app-menu > ul.menu > li{position:relative; top: 0px; left: 0px; width:auto; height: 100%; display:inline-block; vertical-align: middle; padding: 0px; margin: 0px;}
    .app-main .app-menu > ul.menu > li > .item{position:relative; top: 0px; left: 0px; width: auto; height: 100%; padding: 5px; border-top: 0px; border-radius: 0px; text-align:center; color: var(--app-menu-ribbon-tab-header-tab-item-span-last-child-font-color);}
    .app-main .app-menu > ul.menu > li > .item.selected{background-color:transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; color: var(--app-menu-ribbon-tab-header-tab-item-selected-icon-font-color);}
    .app-main .app-menu > ul.menu > li > .item span{position:relative; position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block;}
    .app-main .app-menu > ul.menu > li > .item span.icon{display:block; font-size: 20px; margin-bottom: 5px; color: var(--app-menu-ribbon-tab-header-tab-item-icon-font-color);}
    .app-main .app-menu > ul.menu > li > .item.selected span.icon{color: inherit;}
    .app-main .app-menu > ul.menu > li > .item span:last-child{font-size: 12px; line-height: 16px; margin: 0px; padding: 0px; text-align:center;}
    .app-main .app-menu .menu > li > div:first-child:hover{background-color:transparent;}
    .app-main .app-menu > ul.menu > li:has(.menu-title){display:none;}
    .app-main .app-menu > ul.menu > ul.sub-menu{position:absolute; top:auto; left: 0px; right: 0px; bottom: 0px; width: 100%; height: auto; padding: 0px; display:block; border-radius: 8px; overflow:hidden; transform:translateY(100%);  filter:opacity(0); -webkit-filter:opacity(0); transition:0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s;}
    .app-main .app-menu > ul.menu > ul.sub-menu:before{content: attr(data-title); position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px; border-bottom: 1px solid var(--border-color); background-color: var(--app-menu-ribbon-tab-page-item-title-bg-color); display:block; text-align:center; font-size: 16px; font-weight: bold;}
    .app-main .app-menu > ul.menu > ul.sub-menu:after{content: "\f078"; position:absolute; top: 10px; left:auto; right: 10px; font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
    .app-main .app-menu > ul.menu > ul.sub-menu.selected{bottom: calc(100% + 5px); transform:unset; filter:opacity(1); -webkit-filter:opacity(1); border: 1px solid var(--border-color); padding-bottom: 15px;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li{position:relative; top: 0px; left: 0px; width: calc(100% - 30px); height:auto; margin: 0px 15px; background-color: #fff; display: block; overflow:hidden;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li:not(:first-child) .item[data-group="1"]{margin-left: 0px;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li:not(:first-child) .item[data-group="1"]:before{display:none;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li:has(.item[data-group="1"]),
    .app-main .app-menu > ul.menu > ul.sub-menu > li:first-of-type{margin-top: 15px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li:last-of-type,
    .app-main .app-menu > ul.menu > ul.sub-menu > li:has(.item[data-last-of-group="1"]){border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li .item{border: 0px; border-radius: 0px; padding: 10px; display:grid; grid-template-columns: 18px 1fr; grid-column-gap: 15px; align-items: center;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li .item .icon{font-size: 18px; text-align:center; margin-right: 0px;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li .item span{display:block; align-items:center; align-content:center;}
    .app-main .app-menu > ul.menu > ul.sub-menu > li .item span:last-child:after{content: "\f054"; position:absolute; top: 50%; left:auto; right: 10px; transform:translateY(-50%); font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

    .app-main .app-content{position:absolute; top: 65px; left:0px; right:auto; bottom:0px; width: 100%; height:auto; background-color: var(--app-content-xs-bg-color); overflow:auto; z-index:2;}
    .app-main .app-status{display:none;}

    .curent-user-info-panel .avatar{margin-right: 0px;}
    .curent-user-info-panel > span, .curent-user-info-panel > i{display:none !important;}

    .app-main > .app-list{position:absolute; top:65px; left:0px; right:0px; bottom:0px; padding: 0px 10px; width: 100%; height:auto; overflow:auto;}
    .app-main > .app-list-header{position:fixed; top:0px; left:0px; right: 0px; width:100%; height:65px; padding: 0px; border-bottom: 1px solid var(--app-list-header-xs-border-color); background-color: var(--app-list-header-bg-color); text-align:right; z-index: 2;}
    .app-main > .app-list-header > span{ font-size: 20px; line-height: 25px; color: var(--default-font-color);}
    .curent-user-tool-bar{background-color: var(--current-user-tool-bar-bg-color) !important;}
    .curent-user-tool-bar .item{padding: 11px 10px; text-align:center;}
    .curent-user-tool-bar .item:hover{background-color: transparent; color: inherit;}
    .curent-user-tool-bar .item:not(:last-child){display:none;}
    /*.curent-user-tool-bar .item:nth-child(3){width: 40px; height:40px; min-height: 40px; margin: 12.5px 0px; background-color: #e1e1e1; border-radius: 50%; display:inline-block;}
    .curent-user-tool-bar .item:nth-child(3) .has-new-info{bottom: -5px; right: -5px; padding: 0px 3px;}*/
    .curent-user-tool-bar .item .avatar{width: 45px; height: 45px;}
    /*.curent-user-tool-bar .item:hover, .app-main .app-header .mobile-menu-icon:hover{background-color: var(--current-user-tool-bar-item-hover-xs-bg-color);}*/
    .curent-user-tool-bar .item .has-new-info{bottom: 5px; right: 5px;}
    .curent-user-info-panel{ padding: 11px 10px 10px !important;}

    .mobile-header{position:fixed; top: 0px; left: 0px; right: 0px; width: 100%; height: 65px; background-color: var(--app-header-xs-bg-color); z-index: 3; padding: 10px 10px 10px 40px; border-bottom: 1px solid var(--border-color);}
    .mobile-header .fa-chevron-left{position:absolute; top: calc(50% - 20px); left: 0px; width: 40px; height: 40px; font-size: 25px; text-align:center; padding: 7.5px 0px;}
    .mobile-header i:last-child{position:absolute; top: calc(50% - 15px); left:auto; width: 30px; height: 30px; right: 5px; font-size: 30px; text-align: center;}
    .mobile-header span{position: relative; top: calc(50% - 12.5px); left: 0px; width: 100%; height:auto; font-size: 25px; font-weight: normal; line-height: 25px; padding: 0px; margin: 0px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}

    .app-item{width: 100% !important; margin: 10px 0px 0px !important; color: #ababab !important; border-radius: 10px; background: #fff; background-position: center right 10px; background-size: 16px 25px; border: 1px solid #ababab !important;}
    .app-item:before{content: "\f054"; position:absolute; top: 50%; left:auto; right: 10px; transform:translateY(-50%); font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
    .app-item.mobile_active_effect:active:after{border-radius: 10px;}
    .sub-panel{position:relative !important; top:0px !important; left:0px !important; right: auto !important; bottom:auto !important; width:100% !important; height:auto !important; background-color: var(--sub-panel-bg-color); overflow:auto; display:block;}
    .user-list .search-box, .user-list .user-list-item{position:relative; top:0px; left:0px; width: 100%; height:auto;}

    .tree-view{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:auto; overflow:auto;}
    .tree-view .tree-view-search{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height: auto; background-color: var(--popup-container-tree-view-tree-view-search-bg-color); border-bottom: 1px solid var(--border-color); } 
    .tree-view .tree-view-search input{position:relative; top:0px; left:0px; width: 100%; height: 40px; padding: 5px 25px 5px 10px; background-repeat:no-repeat; background-position:right 5px center; background-size: 16px 16px; border-radius: 0px; background-image:url(../images/search-icon-disabled.png); background-color: var(--bg-color); border: 0px;}
    .tree-view .tree-view-content{position:relative; top: 0px !important; left:0px; right:auto; bottom:auto; width:100%; height:auto; overflow:auto;}
    
    .popup:not(.normal){border: 0px !important; top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; width: 100% !important; height: 100vh !important; border-radius: 0px; box-shadow:none !important;}
    .popup:not(.normal) .control-box{top: 0px; left: 0px; right:auto; width: 50px; height: 50px;}
    .popup:not(.normal) .control-box .close-button, .popup:not(.normal) .control-box .close-button:hover{width: 100%; height: 100%; background-image:none; background-color: transparent;}
    .popup:not(.normal) .control-box .close-button:before{content: "\f053"; position:absolute; top: 50%; left: 50%; width: auto; height:auto; transform: translate(-50%, -50%); font-size: 25px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
    .popup:not(.normal) .control-box > div:not(.close-button){ display: none; }
    .popup:not(.normal) .popup-header{height: 50px; background-color: var(--app-header-xs-bg-color); border-bottom: 1px solid var(--border-color);}
    .popup:not(.normal) .popup-header .popup-title{position:absolute; top: 50%; left: 50px; width: calc(100% - 50px); height:auto; transform:translateY(-50%); font-size: 25px; line-height: 28px; color: var(--modern-window-title-panel-font-color);}
    
    .popup:not(.normal) .popup-main{top: 50px;}
    .popup:not(.normal) .buttonlist, .popup .button-list{padding: 5px 5px 6px; border-top: 1px solid var(--border-color);}
    .popup:not(.normal) .popup-main .modern-window .left-panel{border-right-width: 0px;}
    .popup:not(.normal) .popup-main .modern-window .right-panel > .form-title span{position:relative;}

    .popup:not(.normal) .tabs .tab-header{background-color: var(--popup-container-tabs-tab-header-bg-color);}
    .popup:not(.normal) .tabs .tab-header .tab-item{color: var(--popup-container-tabs-tab-header-tab-item-font-color); border-top-left-radius: 0px; border-top-right-radius: 0px;}
    .popup:not(.normal) .tabs .tab-header .tab-item.selected{border-top: 0px;}
    .popup:not(.normal) .tabs .tab-header .tab-item:hover{background-color:transparent;}
    
    .popup:has(.full-screen) .control-box{background-color: transparent; border-bottom-left-radius: 0px; overflow:hidden;}
    .popup:has(.full-screen) .popup-header{display:unset;}

    .popup.alert{max-width: 90%;}
    .popup.alert .btnlist{padding: 5px;}
    .popup.alert button{border-radius: 0px; padding-top: 3px; padding-bottom: 3px; border: 1px solid var(--button-xs-bg-color);}
    .popup.alert button.btn-cancel, popup.normal button.btn-close{background-color: var(--button-bg-color); border: 1px solid var(--border-color); color: var(--button-font-color);}

    .popup .popup-main .ribbon .tab-pages{border-bottom: 0px;}

    .modern-window .left-panel{right:0px; width: 100% !important; display:none;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-search{background-color: var(--app-header-xs-bg-color); padding: 10px; height: auto;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-search input{border-radius: 14px; height: 28px; background-color: var(--input-bg-color); padding-left: 15px;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content{background-color: var(--main-control-bg-color);}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content > ul{background-color: var(--main-bg-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content ul li > div{background-color: var(--main-bg-color); background-image:url(../images/chevron-right-solid.svg);background-repeat: no-repeat; background-position: center right 5px; background-size: 8px 12.5px;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content ul li > div .btn-collapsed{top: 10px;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content ul li:last-child > div > span:last-child{margin-bottom: 0px;}
    .modern-window .left-panel .left-panel-conent .tree-view .tree-view-content ul li > div{padding-top: 10px; padding-bottom: 10px;}
    .modern-window .right-panel button:focus{border-width: 0px !important;}
    .modern-window .right-panel .form-title{display:none;}
    .modern-window .right-panel{left:0px; background-color: var(--modern-window-right-panel-xs-bg-color);}
    .modern-window .right-panel .form-container{top: 50px; bottom: 49px;}
    .modern-window .title-panel{position:relative; top: 0px; left: 0px; width: 100%; height: 50px; padding: 0px; margin: 0px; border-bottom: 1px solid var(--border-color); background-color: var(--app-header-xs-bg-color); z-index: 2;}
    .modern-window .title-panel span{position:absolute; top: 50%; left: 50px; width: auto; height:auto; max-width: calc(100% - 110px); transform:translateY(-50%); font-size: 25px; line-height: 28px;}
    .modern-window .title-panel button {position:absolute; top: 50%; left:auto; right:10px; bottom:auto; width: 40px; height: 40px; transform:translateY(-50%); padding: 0px; margin: 0px; background-image:unset; z-index: 2;}
    .modern-window .title-panel button:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; width: auto; height:auto; transform:translate(-50%, -50%); font-weight: 300; font-family: "Font Awesome 5 Pro"; font-size: 30px;}
    .modern-window .title-panel button.right-icon, .modern-window .title-panel button:hover, .modern-window .title-panel button.right-icon:hover{background-image:unset;}
    .modern-window .title-panel button.right-icon:before{content: "\f0c9"; position:absolute; top: 50%; left: 50%; width: auto; height:auto; transform:translate(-50%, -50%); font-weight: 300; font-family: "Font Awesome 5 Pro"; font-size: 30px;}

    .simple-window {position:relative; top:0px; left:0px; right:0px; bottom:auto; width: 100%; height:auto;}
    .simple-window .user-info, .simple-window .header{position:relative; top:0px; left:0px; right:0px; bottom:auto; width: 100%; height: auto; min-height: 50px; background-color: var(--simple-window-user-info-bg-color); border-bottom: 1px solid var(--simple-window-user-info-border-color);}
    .simple-window .content{position:relative; top: 0px; left:0px; right:0px; bottom: auto; width: 100%; height:auto; border-bottom: 1px solid var(--simple-window-content-border-color);}
    .simple-window .content .tabs{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto;}
    .simple-window .content .tab-header{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:32px; padding: 0px 10px;}
    .simple-window .content .tab-pages{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:auto;}
    .simple-window .content .tab-pages .tab-page-item{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:auto; padding: 10px;}
    .simple-window .grid{position:relative; top: 0px; bottom: auto; background-color: var(--simple-window-grid-xs-bg-color);}
    .simple-window .grid .grid-content{min-height: 100px;}
    .simple-window .grid .pager{position:relative; margin: 5px 0px; padding-right: 5px;}
    .simple-window .btnlist{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:auto;}
    .simple-window .btnlist button:disabled{display:none;}

    .simple .content{bottom: 49px; padding: 0px;}

    .buble-button{position:fixed; top:auto; left:auto; right: 10px; bottom: 55px; width:48px; height:48px; border-radius: 50%; background-color: var(--buble-button-bg-color); color:var(--buble-button-font-color); text-align:center; font-size: 20px; padding: 14px; display:block; box-shadow: var(--buble-button-shadow); z-index:10;}

    .dal{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto; overflow:auto;}
    .dal .search-box{position:relative; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto; padding: 5px; background-color: var(--dal-search-box-bg-color); border-bottom: 1px solid var(--dal-search-box-border-color);}
    .dal .data-table-list{position:relative; top:0px; left:0px; right:auto; bottom: auto; width:100%; height:auto; border: 0px solid var(--border-color); border-radius: 0px; overflow-x:hidden; overflow-y:auto;}
    
    .mdl, .spl, .ftl, .wbl, .sbl, .appl{height:auto !important;}

    .category-select .item-list{position:relative; top: 0px; min-height: 200px;}

    .grid{position:relative; top:0px; left:0px; right:auto; bottom:auto; width: 100%; height:auto; overflow-x:hidden; overflow-y:auto;}
    .grid .grid-header{display:none;}
    .grid .grid-content{position:relative; top:0px !important; left:0px; right:auto; bottom:auto; width:100%; height:auto; overflow-x:hidden; overflow-y:auto;}
    .grid .tbl-card .tbl-card-header i:active:after{
        position:absolute; content: ''; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; border: 0px; border-radius: 50%; background-color: rgba(1, 115, 199, 0.2); animation: fadeOut 0.1s; -webkit-animation: fadeOut 0.1s;
    }
    .grid .pager{position:relative; top:0px; left:0px; right:auto; bottom:auto; margin: 5px 0px 0px;}

    .popup-menu{position:fixed; top:auto !important; left: 0px !important; right: 0px !important; bottom: 0px !important; width: 100% !important; height:auto; min-height: 25%; background-color: #fff !important; padding: 0px; background-color: var(--popup-menu-xs-bg-color); border:0px; border-top-left-radius: 10px; border-radius:0px; overflow:unset !important; box-shadow: unset; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: 0.5s; transform: translateY(110%);}
    .popup-menu:before{content: ""; position:fixed; top: auto; left: 0px; right: 0px; bottom: calc(100% - 40px); width: 100%; height: 200vh; background-color: rgba(0,0,0,0.25); border-radius: 0px;}
    .popup-menu:after{content: ""; position:absolute; top: 0px; left: 50%; width: 50px; height: 6px; border-radius: 3px; background-color: #fff; transform:translate(-50%, -14px);}
    .popup-menu button:first-child{border-top-left-radius: 10px; border-top-right-radius: 10px;}
    .popup-menu button{height: 45px; color: var(--popup-menu-button-xs-font-color); font-size: 16px; background-color: var(--popup-menu-button-xs-bg-color); padding-left: 10px; margin: 0px; border-radius: 0px; display:grid; grid-template-columns: 20px 1fr; grid-column-gap: 15px; align-items: center;}
    .popup-menu button:disabled, .popup-menu button:disabled:hover{background-color: var(--popup-menu-button-xs-bg-color) !important;}
    .popup-menu button i{position:relative; top: 0px; left: 0px; width: auto; height:auto; transform:unset; color:inherit; font-size: 18px; color: var(--popup-menu-button-i-xs-font-color); }
    .popup-menu button img{position:relative; top: 0px; left: 0px; width: auto; height:auto; transform:unset;}
    .popup-menu button.startgroup:not(:first-child):before{background-color: #fff; top: -11px; left: -1px; right: -1px; bottom: auto; height: 10px; width: auto; transform:unset;}
    .popup-menu button.startgroup:not(:first-child):after{position:absolute; content: ''; top: -6px; left: -1px; right: -1px; bottom:auto; width: auto; height:1px; background-color: var(--popup-menu-button-startgroup-border-color);}
    .popup-menu .popup-menu-bar{position:absolute; top:-14px; left:calc(50% - 25px); width: 50px; height: 6px; border-radius: 3px; background-color: var(--popup-menu-popup-menu-bar-bg-color); pointer-events:none;}
    .popup-menu .overlay{background-color: var(--popup-menu-overlay-bg-color);}
    .popup-menu .bg{border-radius: 10px;}


    .mdl, .spl, .ftl, .wbl, .dft{height:auto;}

    .object-manager .workspace .center .title{border-width: 0px; border-bottom: 1px;}
    .object-manager .workspace .center .grid .grid-content{border-width: 0px;}
    .object-manager .workspace .center .grid .pager{border-width:0px; border-top-width: 1px; margin-top: 0px;}

    .card-view{position:relative; padding-right: 0px;}

    .system-setting .btnlist{position:relative; height: 45px; margin-top: 0px;}

    .app-preload .app-list-header span{width: calc(100% - 125px); max-width: 60%; height: 25px; border-radius: 12.5px; overflow:hidden; text-overflow:ellipsis;}
    .app-preload .app-list-header i{width: 45px; height: 45px; border-radius: 50%; float: right; margin: 10px 10px 10px 0px;}
    .app-preload .app-list-header i:last-child{width: 40px; height: 40px; margin-top: 12.5px;}
    .app-preload .app-item{background-image:none;}
    .app-preload .app-item > *, .app-preload .app-list-header > *{background-color: var(--button-bg-color); animation: fadeIn2 2.5s infinite ease-in-out both; -webkit-animation: fadeIn2 2.5s infinite ease-in-out both;}
    .app-preload .app-item .icon{border-radius: 50%;}
    .app-preload .app-item .name{width: 50%; height: 18px; border-radius: 9px;}
    .app-preload .app-item .description{width: 80%; height: 18px; border-radius: 9px;}

    .login-page .app-login{position:relative; top: 0px; left: 0px; width: 100%; height: auto; min-height: 100vh; overflow:hidden;}
    .login-page .app-login .login-form, .login-page .app-login .login-form > * {position:relative; top: 0px; left: 0px; right:auto; bottom:auto; margin-left: auto; margin-top: auto; width: 100%; height:auto; border-radius: 0px; box-shadow:none; transform: unset;}
    .login-page .app-login .login-form, .login-page .app-login .login-form > .control-box{position:fixed; top: 0px; left: auto; right: 0px; width: auto; height: 45px;}
    .login-page .app-login .login-form{min-height: 100vh;}
    .login-page .app-login .login-form .login-header-gradient{display:block;}
    .login-page .app-login .login-form .login-form-header{height: 185px;}
    .login-page .app-login .login-form .login-form-header .avatar{border-radius: 50%;}
    .login-page .app-login .login-form .login-form-body table tr td:not(:last-child){display:none;}
    .login-page .app-login .login-form input[type='text'], .login-page .app-login .login-form input[type='password']{border-radius: 15px; margin-bottom: 20px; background-color: rgba(255, 255, 255, 0.8);}
    .login-page .app-login .login-form button{position:relative; border: 0px !important; border-radius: 20px; margin-top: 20px; height: 50px;}
    .login-page .app-login .login-form-body{max-width: 420px; margin:auto;}

    .login-page .popup-container .popup .login-form, .login-page .popup-container .popup .login-form > * {position:relative; top: 0px; left: 0px; right:auto; bottom:auto; margin-left: auto; margin-top: auto; width: 100%; height:auto; border-radius: 0px; box-shadow:none;}
    .login-page .popup-container .popup .login-form{min-height: 100vh;}
    .login-page .popup-container .popup .login-form .login-form-header{height: 185px;background-color: #0076ff;  /* fallback for old browsers */
                                                background: -webkit-linear-gradient(to bottom, #0076ff, transparent);  /* Chrome 10-25, Safari 5.1-6 */
                                                background: linear-gradient(to bottom, #0076ff, transparent); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .login-page .popup-container .popup .login-form .login-form-header:after{position:absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/black-male-user-symbol.png) no-repeat center bottom; background-size: auto; opacity: 0.5;}
    .login-page .popup-container .popup .login-form .login-form-header .avatar{border-radius: 50%;}
    .login-page .popup-container .popup .login-form .login-form-body table tr td:not(:last-child){display:none;}
    .login-page .popup-container .popup .login-form input[type='text'], .login-page .popup-container .popup .login-form input[type='password']{border-radius: 15px; margin-bottom: 20px; background-color: rgba(255, 255, 255, 0.8); background-image: none !important; padding: 0px 10px;}
    .login-page .popup-container .popup .login-form button{position:relative; border: 0px !important; border-radius: 20px; margin-top: 20px; height: 50px;}
    .login-page .popup-container .popup .login-form-body{max-width: 420px; margin:auto;}

    .login-page .popup-container .popup .control-box{left:auto; right: 0px; padding: 0px 10px; background-color: rgba(255, 255, 255, 0.5);}
    .login-page .popup-container .popup .control-box .close-button{transform: rotate(180deg); -webkit-transform: rotate(180deg);}
    .login-page .popup-container .popup .bg .bg-img{transform: scale(2); -webkit-transform: scale(2);}

    .popup.password-recover .control-box{left:auto; right: 0px;}
    .popup.password-recover .control-box .close-button{background-color: rgba(0,0,0,0.25); color: #fff; border-bottom-left-radius: 10px;}
    .popup.password-recover .control-box .close-button:before{content: "\f00d";}

    .hidden-xs{display: none;}

    .bubble-button{display:block;}

    .form .field-list{position:relative; top: 0px; left: 0px; right: auto; bottom:auto; width: 100%; height:auto;}

    .expand-img{min-height:calc(100vh - 65px) !important; }

    .row .col-xl-1, .row .col-lg-1, .row .col-md-1,
    .row .col-xl-2, .row .col-lg-2, .row .col-md-2,
    .row .col-xl-3, .row .col-lg-3, .row .col-md-3,
    .row .col-xl-4, .row .col-lg-4, .row .col-md-4,
    .row .col-xl-5, .row .col-lg-5, .row .col-md-5,
    .row .col-xl-6, .row .col-lg-6, .row .col-md-6,
    .row .col-xl-7, .row .col-lg-7, .row .col-md-7,
    .row .col-xl-8, .row .col-lg-8, .row .col-md-8,
    .row .col-xl-9, .row .col-lg-9, .row .col-md-9{width: 100%;}
}

/*xs --- Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 
    .app-main .app-menu{border-radius: 0px; box-shadow: none; margin: 0px; border-top: 1px solid var(--app-menu-ribbon-tab-header-border-color);}
    .app-main .app-menu > ul.menu{border-radius: 0px;}
    .row .col-xl-1, .row .col-lg-1, .row .col-md-1, .row .col-sm-1,
    .row .col-xl-2, .row .col-lg-2, .row .col-md-2, .row .col-sm-2,
    .row .col-xl-3, .row .col-lg-3, .row .col-md-3, .row .col-sm-3,
    .row .col-xl-4, .row .col-lg-4, .row .col-md-4, .row .col-sm-4,
    .row .col-xl-5, .row .col-lg-5, .row .col-md-5, .row .col-sm-5,
    .row .col-xl-6, .row .col-lg-6, .row .col-md-6, .row .col-sm-6,
    .row .col-xl-7, .row .col-lg-7, .row .col-md-7, .row .col-sm-7,
    .row .col-xl-8, .row .col-lg-8, .row .col-md-8, .row .col-sm-8,
    .row .col-xl-9, .row .col-lg-9, .row .col-md-9, .row .col-sm-9{width: 100%;}

    .row-10, .row-12{grid-template-columns:repeat(2, 1fr);}
    .row-10 .col, .row-10 .col-1{position:relative;  grid-column:auto / span 2; padding: 5px;}
    .row-10 .col-2, .row-10 .col-3, .row-10 .col-4, .row-10 .col-5, .row-10 .col-6, .row-10 .col-7, .row-10 .col-8, .row-10 .col-9, .row-10 .col-10,.row-10 .col-11,
    .row-10 .col-12{grid-column:unset}

    .row-12 .col, .row-12 .col-1{position:relative;  grid-column:auto / span 2; padding: 5px;}
    .row-12 .col-2, .row-12 .col-3, .row-12 .col-4, .row-12 .col-5,
    .row-12 .col-6, .row-12 .col-7, .row-12 .col-8, .row-12 .col-9,
    .row-12 .col-10, .row-12 .col-11, .row-12 .col-12{grid-column:unset}

    .region-selector{grid-template-columns: 1fr;}

    .popup-panel{position:fixed; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; max-height: unset !important; padding-top: 42px; border-radius: 0px; display:block;}
    .popup-panel:before{content: attr(data-title); position:absolute; top: 0px; left: 0px; right:unset; bottom: unset; width: 100%; height:auto; padding: 10px; padding-left: 30px; display:block; background-color: #f6f6f6; border-radius: 0px; border: 0px; font-size: 20px;}
    .popup-panel:after{content: "\f053"; position:absolute; top: 10px; left: 10px; font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
    .popup-panel .sub-panel{height: 100% !important;}
    .popup-panel .item{width: 100% !important;}
    .popup-panel .alert-container .tool-bar{border-top-left-radius: 0px; border-top-right-radius: 0px;}

    .filter-bar input[type='text']{max-width: 100px;}
    .folder-manager .filter-bar .address{width: calc(100% - 216px);}
}

@media (max-width: 430px) { 
    .row-10, .row-12{grid-template-columns: 1fr;}
    .row-10 .col, .row-10 .col-1,
    .row-10 .col-2, .row-10 .col-3, .row-10 .col-4, .row-10 .col-5, .row-10 .col-6, .row-10 .col-7, .row-10 .col-8, .row-10 .col-9, .row-10 .col-10,.row-10 .col-11,
    .row-10 .col-12{grid-column:unset}

    .row-12 .col, .row-12 .col-1,
    .row-12 .col-2, .row-12 .col-3, .row-12 .col-4, .row-12 .col-5,
    .row-12 .col-6, .row-12 .col-7, .row-12 .col-8, .row-12 .col-9,
    .row-12 .col-10, .row-12 .col-11, .row-12 .col-12{grid-column:unset}
}

/*md --- Small devices (landscape phones, 576px and up)*/
@media (max-width: 992px) { 
    .row .col-xl-1, .row .col-lg-1,
    .row .col-xl-2, .row .col-lg-2,
    .row .col-xl-3, .row .col-lg-3,
    .row .col-xl-4, .row .col-lg-4,
    .row .col-xl-5, .row .col-lg-5,
    .row .col-xl-6, .row .col-lg-6,
    .row .col-xl-7, .row .col-lg-7,
    .row .col-xl-8, .row .col-lg-8,
    .row .col-xl-9, .row .col-lg-9{width: 100%;}
}


/*--lg --- Extra large devices (large desktops, 1200px and up)*/
@media (max-width: 1200px) {
    .row .col-xl-1,
    .row .col-xl-2,
    .row .col-xl-3,
    .row .col-xl-4,
    .row .col-xl-5,
    .row .col-xl-6,
    .row .col-xl-7,
    .row .col-xl-8,
    .row .col-xl-9{width: 100%;}
}