@import 'https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,900';

:root {
	--main-bg-color: #e84625;
	--zebracolor: #bcbcbc17;
	--zebrahovered: #e8e8e8;

}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}

input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
}
  



textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}

html,
body{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 12px;
	overflow: hidden;
}


/************************ LOGIN ***************************/
body#login{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: var(--main-bg-color);
	text-align: center;
}


body#login form{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 300px;
    height: auto;
    padding: 40px 20px;
    margin: -150px -170px;
    /* background: rgba(0, 0, 0, 0.3); */
    border-radius: 4px;
    background: #FFF;
    /* box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 10%); */
}
/************************ stage ***************************/
#stage_wrapper{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #EEE;
}

/************************ BAR ***************************/
#stage_wrapper #bar{
	position: relative;
	display: block;
	width: 100%;
	height: 74px;
	padding: 0;
	margin: 0;
	background: var(--main-bg-color);
	z-index: 1000;
}

#stage_wrapper #bar #menuBtn{
	position: relative;
	float: right;
	display: block;
	width: 74px;
	height: 74px;
	padding: 0;
	margin: 0;
	background: /* rgba(0,0,0,.3) */ url('data:image/svg+xml;utf8,<svg width="18px" height="12px" viewBox="-23 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="0" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="5" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="10" width="18" height="2"></rect></svg>') no-repeat center center;
	cursor: pointer;
}


#stage_wrapper #bar #logo{
	position: absolute;
	left: 20px;
	top: 0px;
	display: block;
	width: 213px;
	height: 74px;
	background: url(../img/logo.png) no-repeat center center;

}   


#stage_wrapper #bar #searchFrm{
	position: absolute;
	left: calc(50% - 180px);
	top: 13px;
	display: block;
	width: 360px;
	height: 48px;
}   

#stage_wrapper #bar #search{
	position: relative;
	display: block;
	width: 100%;
	height: 35px;
	border:none;
	border-radius: 3px;
	text-indent: 42px;
	font-size: 16px;
	background: #fff no-repeat left 10px center;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjY2NjcgMTguODk3NEgxOS42MDY3TDE5LjI0IDE4LjUzMDdDMjAuNTQ2NyAxNy4wMTc0IDIxLjMzMzMgMTUuMDUwNyAyMS4zMzMzIDEyLjg5NzRDMjEuMzMzMyA4LjExMDcxIDE3LjQ1MzMgNC4yMzA3MSAxMi42NjY3IDQuMjMwNzFDNy44OCA0LjIzMDcxIDQgOC4xMTA3MSA0IDEyLjg5NzRDNCAxNy42ODQgNy44OCAyMS41NjQgMTIuNjY2NyAyMS41NjRDMTQuODIgMjEuNTY0IDE2Ljc4NjcgMjAuNzc3NCAxOC4zIDE5LjQ3NzRMMTguNjY2NyAxOS44NDRWMjAuODk3NEwyNS4zMzMzIDI3LjU1MDdMMjcuMzIgMjUuNTY0TDIwLjY2NjcgMTguODk3NFpNMTIuNjY2NyAxOC44OTc0QzExLjg3ODcgMTguODk3MyAxMS4wOTg0IDE4Ljc0MjEgMTAuMzcwNSAxOC40NDA1QzkuNjQyNDkgMTguMTM4OSA4Ljk4MTA0IDE3LjY5NjkgOC40MjM4OSAxNy4xMzk3QzcuMjk4NjcgMTYuMDE0MyA2LjY2NjU4IDE0LjQ4ODEgNi42NjY2NyAxMi44OTY3QzYuNjY2NzYgMTEuMzA1MyA3LjI5OTAyIDkuNzc5MTUgOC40MjQzNiA4LjY1MzkzQzkuNTQ5NyA3LjUyODcyIDExLjA3NTkgNi44OTY2MiAxMi42NjczIDYuODk2NzFDMTQuMjU4NyA2Ljg5NjggMTUuNzg0OSA3LjUyOTA2IDE2LjkxMDEgOC42NTQ0MUMxOC4wMzUzIDkuNzc5NzUgMTguNjY3NCAxMS4zMDYgMTguNjY3MyAxMi44OTc0QzE4LjY2NzIgMTQuNDg4OCAxOC4wMzUgMTYuMDE0OSAxNi45MDk2IDE3LjE0MDJDMTUuNzg0MyAxOC4yNjU0IDE0LjI1ODEgMTguODk3NSAxMi42NjY3IDE4Ljg5NzRWMTguODk3NFoiIGZpbGw9IiMzMDMwMzAiLz4KPC9zdmc+Cg==");
}   






#stage_wrapper #bar #barTitle{
	position: relative;
	float: left;
	clear: none;
	display: none;
	width: calc(100% - 48px);
	height: 36px;
	padding: 12px 0px 0px 0px;
	text-indent: 10px;
	margin: 0;
	font-size: 20px;
	/* 	font-weight: 400; */
	color: #fff;
	/* text-transform: capitalize; */
}


/************************ MENU ***************************/
#stage_wrapper #menu{
	position: absolute;
	top: 0px;
	right: 0px;
	float: right;
	clear: none;
	display: block;
	width: 250px;
	height: calc(100% - 0px);
	padding: 0;
	margin: 0;
	background: #303030;
	/* box-shadow: -2px 0px 2px rgb(0 0 0 / 40%); */
	transition: left .3s;
	z-index: 1100;
	overflow-y: auto;
}


#stage_wrapper #menu_bg{
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    border: 1px solid red;
    background: rgba(0,0,0,.7);
    z-index: 1000;
}

#stage_wrapper.menuOpen #menu_bg{
	display: block;
}

#stage_wrapper.menuOpen #menu{
	right: 0px;
}

#stage_wrapper #menu{
	right: -250px;
}


#stage_wrapper #menu .apps{
	display: block;
	/* height: calc(100% - 50px); */
	padding: 0;
	margin: 0;
	list-style: none;
	color: #FFF;
}


#stage_wrapper #menu .apps li{
	display: block;
	padding: 0px 0px;
	border-bottom: 1px solid #000;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23fff"> <polygon id="Shape" fill="%23fff" points="7.0546875 0.03125 3.57421875 5.1875 0.09375 0.03125 1.44140625 0.03125 3.57421875 3.1484375 5.70703125 0.03125"></polygon></svg>');
	background-position: calc(100% - 15px) 23px;
	background-repeat: no-repeat;
	
}

#stage_wrapper #menu .apps li.active{
	background: #000;
	transition: background .1s 0s;
	border-right: 3px solid var(--main-bg-color);
	border-bottom: 0px;
	background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23fff"><polygon id="Shape" fill="%23FFF" transform="translate(3.574219, 2.609375) scale(1, -1) translate(-3.574219, -2.609375) " points="7.0546875 0.03125 3.57421875 5.1875 0.09375 0.03125 1.44140625 0.03125 3.57421875 3.1484375 5.70703125 0.03125"></polygon></svg>');
	background-position: calc(100% - 15px) 23px;
	background-repeat: no-repeat;
}

#stage_wrapper #menu .apps li.activeapp{
	background: #fff;
    color: var(--main-bg-color);
}

#stage_wrapper #menu .apps li div{
	display: block;
	padding: 18px 0px 16px 0px;
	text-indent: 40px;
	text-transform: uppercase;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: left 10px center;
	background-size: 24px;
}



#stage_wrapper #menu .apps li.active div{
}


#stage_wrapper #menu .apps li ul{
	display: block;
	padding: 0px 0px 0px 0px;
/*	max-height: 0px;

	list-style: none;
	overflow: hidden;
	transition: max-height 0s 0s;
*/
}

#stage_wrapper #menu .apps li.active ul{
/*
	max-height: 500px;
	padding: 0px 0px 5px 0px;
	transition: max-height 1.5s 0s;
*/
}

#stage_wrapper #menu .apps li ul li{
	border-bottom:none;
	padding: 9px 0px;
	text-indent: 40px;
	cursor: pointer;
	background: none;
}

#stage_wrapper #menu .apps li ul li:hover{
	background: #fff;
	color: var(--main-bg-color);

}


#stage_wrapper #menu #user{
    position: relative;
    bottom: 0px;
    left: 0px;
    display: block;
    width: calc(100% - 20px);
    height: 53px;
    padding: 10px;
    border-bottom: 1px solid #000;
    /* background: rgb(179, 5, 5); */
}

#stage_wrapper #menu #user a{
    color: rgb(149 149 149 / 90%);
    padding: 0px 20px;
}

#stage_wrapper #menu #user .name{
	display: flex;
	flex: 0 0 auto;
	padding: 14px 0px 0px 19px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	align-items:center;
}

#stage_wrapper #menu #user .name #profile_img{
	display: none;
	background: #000;
	border-radius: 3px;
	width: 48px;
	height: 48px;
	margin-right: 10px;

}

#stage_wrapper #menu #close{
    position: absolute;
	top:0px;
	right:0px;
    float: right;
    display: block;
    width: 74px;
    height: 74px;
    padding: 0;
    margin: 0;
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC40MzY3NjgiIHk9IjEuODUwNzEiIHdpZHRoPSIyIiBoZWlnaHQ9IjE3IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgMC40MzY3NjggMS44NTA3MSkiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjEyLjQ1NzYiIHk9IjAuNDM2NTIzIiB3aWR0aD0iMiIgaGVpZ2h0PSIxNyIgdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTIuNDU3NiAwLjQzNjUyMykiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=") no-repeat center center;
    cursor: pointer;
}

/************************ APP AREA ***************************/
#stage_wrapper #appArea{
	position: absolute;
	left: 0px;
	float: left;
	display: block;
	width: calc(100% - 10px);
	height: calc(100% - 84px);
	padding: 5px;
	margin: 0;
	background: #FFF;
	z-index: 900;
	transition: width .3s;
	overflow: hidden;
	background: #f2f2f2;
}

#stage_wrapper #bar{
	/* width:calc(100% - 250px); */
}

#stage_wrapper.menuOpen  #bar{
	width:calc(100% - 0px);
}

#stage_wrapper.menuOpen #appArea{
	width: calc(100% - 10px);
}




#stage_wrapper #appArea{
	/* width:calc(100% - 260px); */
}

#stage_wrapper #appArea .appContainer{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 0px;
	background: #f2f2f2;
	overflow: hidden;
}
#stage_wrapper #appArea .appid_23{
display: flex;
}

#stage_wrapper #appArea .appContainer .body{
	overflow: hidden;
	width: 100%;
	height: 100%;
}


#stage_wrapper #appArea .appContainer .task{
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 8px;
}

#stage_wrapper #appArea .appContainer .footer.central{
	display: block;
	overflow: hidden;
	width: calc(100% - 16px);
	height: 16px;
	padding: 8px;
	position: absolute;
	bottom: 0px;
	color: #333;
	background: #f2f2f2;
}




@media (max-width: 950px){
	
/************************ MENU ***************************/
#stage_wrapper #menu{
	position: absolute;
	top: 0px;
	right: -250px;
	float: right;
	clear: none;
	display: block;
	width: 250px;
	height: calc(100%);
	padding: 0;
	margin: 0;
	background: #303030;
	box-shadow: 2px 0px 2px rgba(0,0,0,.4);
	transition: left .5s;
	z-index: 1100;
}


#stage_wrapper #bar{
	display: sticky;
}


/* #stage_wrapper.menuOpen #menu_background{
    display: none !important;
} */

#stage_wrapper.menuOpen #menu{
	left: calc(0);
}


#stage_wrapper.menuOpen #bar #menuBtn{
	background:/*  rgba(0,0,0,.3) */ url('data:image/svg+xml;utf8,<svg width="18px" height="12px" viewBox="-23 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="0" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="5" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="10" width="18" height="2"></rect></svg>') no-repeat center center;
}
#stage_wrapper #bar #menuBtn{
	background: /* rgba(0,0,0,.3) */ url(data:image/svg+xml;utf8,<svg width="18px" height="12px" viewBox="-23 0 18 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="0" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="5" width="18" height="2"></rect><rect id="Rectangle-1" stroke="none" fill="%23FFFFFF" fill-rule="evenodd" x="-23" y="10" width="18" height="2"></rect></svg>) no-repeat center center;
}



#stage_wrapper #menu{
	right: -250px;
}


#stage_wrapper #appArea {
    width: calc(100% - 10px);
}
	

#stage_wrapper #bar #logo{
	display: none;
}

#logo_responsive {
    /* position: sticky;
    display: block;
    z-index: 190;
    background: #fff url(../img/logo.png) no-repeat center center;
	background-size: contain;
    height: 16px;
	width: 100%;
    padding: 5px 6px 6px 6px;
    overflow: hidden;
    text-align: center;
    border-top: 2px solid var(--main-bg-color);; */
}

#stage_wrapper #bar #searchFrm {
    position: absolute;
    left: 20px;
    top: 13px;
    display: block;
    width: calc(100% - 181px);
    height: 48px;
}


	
}