html,body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
}
body.rtl{direction: rtl;}
body:not([section="app"]) section[name="app"] {display: none;}
body[section="app"] {overflow-x: hidden;}
body.with-content .without-content { display: none;}
body:not(.with-content) .with-content { display: none;}
.app-backgrounds{
    position: fixed;
    top:0; left:0; width: 100%; height: 100%;
    overflow: hidden;
}
.app-background {
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    background-image: url('../images/png/meat.png');
    background-repeat: no-repeat;
    background-size: cover;
    filter:blur(10px);
    transform: scale(1.05);
}
body[vision="dark"] .app-light-background{
    opacity: 0;
}
body[vision="dark"] .app-dark-background{
    transform: scale(1.5) translateX(0) translateY(0);
}
body[vision="light"] .app-dark-background{
    transform: scale(1.5) translateX(-150vw) translateY(150vh);
}
.accent{
    color:var(--accent-color);
    text-shadow: 0 0 5px white;
}
.app-side-navigator{
    position:fixed;
    top:0;
    bottom: 0;
    transition: transform 0.3s,width 0.3s;
    transform: translateX(0);
}
body:not(.rtl) .app-side-navigator{
    left:0;
}
body.rtl .app-side-navigator{
    right:0;
}
body[sidebar="hidden"]:not(.rtl) .app-side-navigator{
    transform: translateX(-100vw);
}
body[sidebar="hidden"].rtl .app-side-navigator{
    transform: translateX(100vw);
}
.fill{
    background-color: var(--form-back-color);
}
body.port .app-side-navigator{
    width: 75vw;
    z-index: 2;
    background-color: var(--solid-form-back-color);
    top:0 !important;
    padding-top:3em;
}
body.port:not(.rtl) .app-side-navigator{
    border-right: 1px solid orange;
}
body.port.rtl .app-side-navigator{
    border-left: 1px solid orange;
}
body[sidebar="normal"]:not(.port) .app-side-navigator{
    width: 15em;
}
body[sidebar="thin"]:not(.port) .app-side-navigator{
    width: 3em;
}
.app-side-navigator li {cursor: pointer;}
.app-side-navigator li .title{transition: font-size 0.3s;}
body[sidebar="thin"]:not(.port) .app-side-navigator li {margin:0 0.5em 0.5em 0.5em}
body[sidebar="thin"]:not(.port) .app-side-navigator li .title{font-size: 0;}
body[sidebar="normal"]:not(.port) .app-side-navigator li .title{font-size: 1em;}
.app-side-navigator ul{
    list-style: none;
    margin:2em 0 0.5em 0;
    padding:0;
}
.app-side-navigator li{
    display: block;
    margin-bottom: 0.5em;
    white-space: nowrap;
}
body:not(.rtl) .app-side-navigator li.blues-icon{
    position: relative;
    margin-left: 3em;
}
body.rtl .app-side-navigator li.blues-icon{
    position: relative;
    margin-right: 3em;
}
body:not(.rtl) .app-side-navigator li.blues-icon::before{
    position: absolute;
    left: -2em;
}
body.rtl .app-side-navigator li.blues-icon::before{
    position: absolute;
    right: -2em;
}
.app-side-navigator ul .icon{
    vertical-align: middle;
    height: 1.5em;
    width: 1.5em;
    margin:0 0.5em
}
.app-side-nav-container{
    max-height: 90%;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar ul .title{
    display: inline-block;
    vertical-align: middle;
}
.app-action-bar{
    position: fixed;
    top:0; left:0; width: 100%;
    height: 3em;
    line-height: 3em;
    z-index: 2;
}
.app-action-bar .item{
    vertical-align: middle;
}
body:not(.with-action-bar) .app-action-bar{display: none;}
body.with-action-bar .app-side-navigator{
    top:3em;
}
.app-action-bar>div{
    display: inline-block;
}
.app-action-bar .app-suggest-box{
    display: inline-block;
    vertical-align: middle;
    transition: width 0.3s;
    margin:0 1em;
}
body.suggesting .app-action-bar .app-suggest-box{
    width:15em;
}
body:not(.suggesting) .app-action-bar .app-suggest-box{
    width:7em;
}
.app-action-bar .app-search-box{
    border-radius: 1em;
    padding:0 0.5em 0 1em;
    display: inline-block;
    line-height: 2em;
    transition: background-color 1s;
}
.app-action-bar .app-search-box input{
    color: var(--input-text-color);
    display: inline-block;
    vertical-align: middle;
    outline:none;
    border:0;
    background-color: transparent;
    transition: 0.5s;
}
.app-action-bar:not(.searching) .app-search-box { background: transparent;}
.app-action-bar:not(.searching) .app-search-box input{width: 0em;}
.app-action-bar.searching .app-search-box{background-color: var(--input-back-color);outline:2px solid var(--outline-color);outline-offset: 2px;}
.app-action-bar.searching .app-search-box input{width: min(15em,85vw);}
body.port .app-action-bar.searching .app-tool-box{display: none;}
.app-action-bar .action-search-btn{
    display: inline-block;
    vertical-align: middle;
    height: 1.35em;
    width: 1.35em;
    cursor: pointer;
}
body[vision="dark"] .app-action-bar .app-search-box img{
    filter:invert(1);
}
.app-work-container ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    opacity: 0.1;
}
.app-work-container ::-webkit-scrollbar:hover {
    opacity: 1;
}
.app-work-container ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}
.app-work-container ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}
.app-work-container ::-webkit-scrollbar-thumb:hover {
    background: #555;
    border-radius: 5px;
}
.app-work-container:not(.port){
    box-sizing: border-box;
    position: absolute;
    padding:0.5em;
    /* background-color:black; */
    min-height: calc(100% - 3.5em);
    white-space: nowrap;
    overflow-x: hidden;
    font-size: 1em;
    transition: left 0.5s, right 0.5s;
}
body.port .app-work-container{
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
}
body.port .app-work-container{left:0; right:0;}
body:not(.with-action-bar) .app-work-container{top:0;}
body.with-action-bar .app-work-container{top:3em}
body[sidebar="hidden"]:not(.port) .app-work-container{left:0;right:0;}
body[sidebar="normal"]:not(.port):not(.rtl) .app-work-container{left:15em;}
body[sidebar="normal"]:not(.port).rtl .app-work-container{right:15em}
body[sidebar="normal"]:not(.port) .app-work-container{width: calc(100% - 15.5em);}
body[sidebar="thin"]:not(.port):not(.rtl) .app-work-container{left:3em;}
body[sidebar="thin"]:not(.port).rtl .app-work-container{right:3em;}
body[sidebar="thin"]:not(.port) .app-work-container{width: calc(100% - 3.5em);}
body[bottom-navigator="true"] .app-work-container{padding-bottom: 4.3em;min-height: calc(100% - 3.5em);}
body[bottom-navigator="false"] .app-work-container{padding-bottom: 0.5em;}
body .app-work-container .work-area{
    display: inline-block;
    border-radius: 0.5em;
    vertical-align: top;
    
    transition: all 0.5s;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
    white-space: normal;
}
body.plug:not(.port) .app-work-container .work-area{
    width: calc(100% - 16.5em);
}
body:not(.plug):not(.port) .app-work-container .work-area{
    width: calc(100% - 1em);
}
body:not(.plug).port .app-work-container .work-area{
    transform: translateY(-41vh);
    margin-bottom: -41vh;
    margin-top:-2em;
}
body[bottom-navigator="false"] .app-work-container .work-area{
    min-height: calc(100vh - 5.5em);
}
body[bottom-navigator="true"] .app-work-container .work-area{
    min-height: calc(100vh - 9.5em);
}
/* Plug Area */
.app-plug-area{
    display: inline-block;
    border-radius: 0.5em;
    transition: 0.3s;
    vertical-align: top;
    transition: transform 0.5s;
    overflow: hidden;
    /* position: relative; */
}
body:not(.port) .app-plug-area{
    width: 15em;
    margin:0 0.5em;
}
body[bottom-navigator="false"]:not(.port) .app-work-container .app-plug-area{
    min-height: calc(100vh - 5.5em);
}
body[bottom-navigator="true"]:not(.port) .app-work-container .app-plug-area{
    min-height: calc(100vh - 9.5em);
}
body.port .app-plug-area{
    margin:0.5em 0;
    height:40vh
}
body:not(.plug):not(.rtl):not(.port) .app-plug-area{
    transform: translateX(50vw);
}
body:not(.plug).rtl:not(.port) .app-plug-area{
    transform: translateX(-50vw);
}
body.plug:not(.port) .app-plug-area{
    transform: translateX(0);
}
body:not(.plug).port .app-plug-area{
    transform: translateY(-100vh);
}
body.plug.port .app-plug-area{
    transform: translateY(0);
}
/* body:not(.port):not(.plug):not(.rtl) .app-plug-area{transform: translateX(100vw);}
body:not(.port):not(.plug).rtl .app-plug-area{transform: translateX(-100vw);}
body:not(.port).plug .app-plug-area{
    transform: translateX(0);
}
body:not(.with-action-bar) .app-plug-area{ top: 0.5em}
body.with-action-bar .app-plug-area{ top: 3.5em}
body:not(.rtl) .app-plug-area{right:0.5em}
body.rtl .app-plug-area{left:0.5em}

body.port .app-plug-area{
    left:0.5em; right:0.5em;
    height: 50vh;
    transform: translateY(0);
}
body.port:not(.plug) .app-plug-area{
    transform: translateY(-100vh);
} */

body[bottom-navigator="true"] .app-plug-area{bottom: 4.3em !important;}
body:not([bottom-navigator="true"]) .app-plug-area{bottom: 0.5em;}

.app-search-map{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

.app-adjust-pan{
    /* background-color: var(--form-back-color); */
    border-radius: 0.5em;
    position:absolute;
    left:0.5em; right:0.5em; bottom: 0.5em;
    height:3em;
    line-height: 3em;
    padding:0 0.5em;
    text-align: center;
}
body.rtl .app-adjust-pan{left:0}
body:not(.rtl) .app-adjust-pan{right:0}
.app-img-btn{
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    margin:0 0.25em;
}
body:not(.port) .app-adjust-pan .app-img-btn{
    font-size: 0.7em;
}
body:not(.port)[bottom-navigator="true"] .app-side-navigator{bottom: 3.8em;}
/* body:not([bottom-navigator="true"]) .app-side-navigator{bottom: 0;} */

body[sidebar="thin"] #app-thin-btn{display: none;}
body[sidebar="normal"] #app-fat-btn{display: none;}
body[vision="dark"] #app-dark-mode-btn{display: none;}
body[vision="light"] #app-light-mode-btn{display: none;}
body[sidebar="thin"] #app-thin-btn{display: none;}
body[sidebar="thin"] #app-dark-mode-btn{display: none;}
body[sidebar="thin"] #app-light-mode-btn{display: none;}
body[sidebar="thin"] #app-full-screen-btn{display: none;}
body[sidebar="thin"] #app-support-btn{display: none;}

body.port #thin-btn{display: none;}
body.port #fat-mode-btn{display: none;}
body.port #full-screen-btn{display: none;}



/* Bottom Navigator */
body:not([bottom-navigator="true"]) .app-bottom-navigator{transform:translateY(100vh)}
.app-bottom-navigator{
    position: fixed;
    bottom: 0; left:0; width: 100%;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background-color: var(--solid-form-back-color);
    border-top: 1px solid silver;
    text-align: center;
    padding:0.5em;
    transform: translateY(0);
    transition: transform 0.3s;
    z-index: 2;
}
.app-bottom-navigator ul{
    list-style: none;
    padding:0; margin:0;
    display: table;
    width: 100%;
}
.app-bottom-navigator li{
    display: table-cell;
    text-align: center;
    font-size: 0.75em;
}
.app-bottom-navigator .icon{
    display: block;
    margin:0.25em auto;
    height: 2em;
    width: 2em;
}


/* Menu Button */
section[name="app"] .app-side-menu-button{
    position: fixed;
    top:calc(0.5em - 3px);
    z-index: 10;
}
body:not(.rtl) section[name="app"] .app-side-menu-button{
    left:0.5em;
}
body.rtl section[name="app"] .app-side-menu-button{
    right:0.5em;
}
.app-side-menu-button {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    transform: scale(0.7);
    transition: transform 0.4s;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--slave-text);
    margin: 6px 0;
    transition: 0.4s;
}
body:not(.port)[sidebar="normal"] .app-side-menu-button,
body:not(.port)[sidebar="thin"] .app-side-menu-button{transform: rotate(-90deg) scale(0.7);}

body.port[sidebar="normal"] .bar1, body.port[sidebar="thin"] .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px);
    transform: rotate(-45deg) translate(-8px, 6px);
}

body.port[sidebar="normal"] .bar2, body.port[sidebar="thin"] .bar2 {opacity: 0;}

body.port[sidebar="normal"] .bar3, body.port[sidebar="thin"] .bar3 {
    -webkit-transform: rotate(45deg) translate(-10px, -8px);
    transform: rotate(45deg) translate(-10px, -8px);
}

.app-tool-box .icon{
    height: 1.5em;
    width: 1.5em;
    margin:0 0.5em;
    display: inline-block;
    vertical-align: middle;
}
body:not(.rtl) .app-user-avatar{margin-right: 3em;}
body.rtl .app-user-avatar{margin-left: 3em;}
.app-user-avatar{
    height: 2.5em;
    width: 2.5em;
    margin:0 1em;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background-image: url('../images/svg/user.svg');
}

.app-user-avatar img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    cursor:pointer;
}
.app-user-avatar img:hover{
    box-shadow: 0 0 5px orangered;
}
body:not(.rtl) .front{float:right}
body.rtl .front{float:left}
.hide-scroll {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.center{
    text-align: center;
}

/********************** Buttons **********************/
section[name="app"] button.pos{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--pos-button-back);
    border:2px solid var(--pos-button-border);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="app"] button.neg{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neg-button-back);
    border:2px solid var(--neg-button-border);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="app"] button.neutral{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neutral-button-back);
    border:2px solid var(--neutral-button-border);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
.app-work-container .def-dialog{
    white-space: normal;
}
.app-work-container .def-dialog input[type="text"],
.app-work-container .def-dialog input[type="number"],
.app-work-container .def-dialog input[type="date"],
.app-work-container .def-dialog input[type="time"],
.app-work-container .def-dialog input[type="datetime-local"],
.app-work-container .def-dialog select,
.app-work-container .def-dialog textarea{
    border-radius: 0.5em;
    padding: 0.5em;
    border:1px solid silver;
    outline:0;
}
.app-work-container .def-dialog input[type="text"]:focus,
.app-work-container .def-dialog input[type="number"]:focus,
.app-work-container .def-dialog input[type="date"]:focus,
.app-work-container .def-dialog input[type="time"]:focus,
.app-work-container .def-dialog input[type="datetime-local"]:focus,
.app-work-container .def-dialog select:focus,
.app-work-container .def-dialog textarea:focus{
    outline: 2px solid rgb(255, 136, 0);
    outline-offset: 2px;
}

.app-work-container .def-dialog input[type="text"].error,
.app-work-container .def-dialog input[type="number"].error,
.app-work-container .def-dialog input[type="date"].error,
.app-work-container .def-dialog input[type="time"].error,
.app-work-container .def-dialog input[type="datetime-local"].error,
.app-work-container .def-dialog select.error,
.app-work-container .def-dialog textarea.error{
    background-color: rgb(255, 175, 188);
    outline: 2px solid rgb(90, 42, 50);
    outline-offset: 2px;
}

.smooth-scroll{
    scroll-behavior: smooth;
}

.app-max-loading{
    position: fixed;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    /* background: linear-gradient(white, rgb(255, 227, 227)); */
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.app-max-loading.close{
    display: none;
}
.app-max-loading .loading-progress{
    width: 4em;
    height: 4em;
    background-image: url('../images/gif/loading.gif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.app-min-loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.2em;
    background-color: #888;
    box-shadow: 0 2px 5px #888;
    z-index: 101;
    overflow: hidden;
}
.app-min-loading.close{
    visibility: hidden;
    height: 0em;
}
.app-min-loading .loading-progress{
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 0.2em;
    /* background-color: rgb(1 125 255);
    box-shadow: 0 2px 5px rgb(1 125 255); */
    background-color: rgb(0 190 122);
    box-shadow: 0 2px 5px rgb(0 190 122);
    z-index: 100;
    transition: width 0.5s;
}
.app-popup-menu{
    margin:0;
    padding:0;
    list-style: none;
}
.app-popup-menu li:not(.separator){
    padding: 0.5em 1em;
}
.app-popup-menu li:not(.separator):hover{
    background-color: rgb(89, 97, 124);
    color:white;
}
.app-popup-menu li.separator{
    line-height: 1px;
    height:1px;
    border-bottom: 1px solid gray;
}
.app-top-badge{
    background: red;
    margin: 1.5em;
    position: absolute;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1em;
    color: white;
    font-size: 0.7em;
}
.app-notification-pan{
    background: var(--weighted-form-back-color);
    transform: translateX(0);
    transition: 0.3s;
    position: fixed;
    top:3em;
    bottom:0;
    box-sizing: border-box;
}
body.port .app-notification-pan{
    width: 100vw;
}
body:not(.port) .app-notification-pan{
    width: 15em;
}
.app-notification-pan .op{
    text-align: start;
    padding:0.5em;
    
}
.app-notification-pan .blues-icon{
    display: inline-block;
    height: 1.5em;
    cursor: pointer;
}
body:not(.rtl) .app-notification-pan{
    right:0;
}
body.rtl .app-notification-pan{
    left:0;
}
body:not(.port):not(.rtl) .app-notification-pan:not(.blues-active){
    transform: translateX(16em);
}
body.rtl:not(.port) .app-notification-pan:not(.blues-active){
    transform: translateX(-16em);
}
body.port:not(.rtl) .app-notification-pan:not(.blues-active){
    transform: translateX(120vw);
}
body.port.rtl .app-notification-pan:not(.blues-active){
    transform: translateX(-120vw);
}
.app-notification-pan h3{
    text-align: center;
    opacity: 0.8;
    margin: 3em 1em;
}
.app-thin-scroll::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.app-thin-scroll::-webkit-scrollbar:hover {
    opacity: 1;
}
.app-thin-scroll::-webkit-scrollbar-track {
    background: transparent; 
    border-radius: 5px;
}
.app-thin-scroll:hover::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.app-thin-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
}
.app-thin-scroll:hover::-webkit-scrollbar-thumb {
    background: #555;
}
.chart-area{
    position: relative;
    min-height: 330px;
    z-index: 0;
}