body  {
	font-family: 'Poppins', sans-serif;
	background:linear-gradient(#000000,#00ccff) #111111 no-repeat;
	background-position: top center;
	background-size:cover;
	background-attachment:fixed;
	line-height:normal;
}
/* WRAPPER */
@media (min-width: 768px) {
    .wrapper {
        display: flex;
        flex-direction:row;
        align-items: stretch;
        width:100vw;
        min-height:100vh;
    }
    .wrappermenusmheader  {
        display:none;
    }
    .wrappermenu  {
        background:#303030;
        border-right:1px solid rgba(0,0,0,0.08);
        transition:width 0.3s;
    }
    .wrappermenutoggle  {
        padding:4px 10px;
        border-bottom:1px solid rgba(0,0,0,0.08);
        text-align:right;
    }
    .wrappermenutoggleicon  {
        cursor:pointer;
        color:#999999;
        font-size:20px;
        transition:color 0.3s, transform 0.3s;
        position:relative;
        top:3px;
    }
    .wrappermenutoggleicon:hover  {
        color:#222222;
    }
    .wrappermenulogo  {
        border-bottom:1px solid rgba(0,0,0,0.08);
        text-align:center;
        background:#404040;
    }
    .wrappermenulogoimg  {
        width:100%;
    }
    .wrappermenulink  {
        display:block;
        color:#ffffff;
        transition:color 0.25s;
    }
    .wrappermenulink:hover  {
        color:#f1f1f1;
        text-decoration:none;
    }
    .wrappermenulink .fas  {
        transition:font-size 0.3s;
    }
    .wrappermenulink.active  {
        color:#00ccff;
    }
    .wrappermenu:not(.active)  {
        width:80px;
        text-align: center;;
    }
    .wrappermenu:not(.active) .wrappermenulogo  {
        padding:3px 6px;
        margin-bottom:12px;
    }
    .wrappermenu:not(.active) .wrappermenulink  {
        font-size:12px;
        padding:10px 0;
    }
    .wrappermenu:not(.active) .wrappermenulink .fas {
        display:block;
        width:100%;
        font-size:20px;
        margin-bottom:3px;
    }
    .wrappermenu.active .wrappermenulogo  {
        padding:10px 12px;
        margin-bottom:10px;
    }
    .wrappermenulink.active:hover  {
        color:#48daff;
    }
    .wrappermenu.active  {
        width:220px;
    }
    .wrappermenu.active  .wrappermenutoggleicon  {
        transform:rotate(180deg);
    }
    .wrappermenu.active .wrappermenulink  {
        padding:3px 12px;
        font-size:15px;
    }
    .wrappermenu.active .wrappermenulink .fas {
        display:inline-block;
        width:24px;
    }
    .wrappercontent  {
		flex:1;
    }
    .wrappercontentbreadcrumb  {
        background:#303030;
        padding:6px 20px;
        border-bottom:1px solid rgba(0,0,0,0.1);
        height:36px;
        margin:0;
    }
    .wrappercontentbreadcrumb li  {
        display:inline-block;
        list-style:none;
        font-size:15px;
    }
    .wrappercontentbreadcrumb > li + li:before {
        color:#ffffff;
        content:"/";
        padding:0 5px;
    }
    .wrappercontentbreadcrumb li a {
        color:#ffffff;
    }
    .wrappercontentbreadcrumb li a:hover {
        color:#cccccc;
        text-decoration:none;
    }
    .wrappercontentbreadcrumb li.active  {
        color:#dddddd;
    }
    .wrappercontentbody  {
        padding:10px;
    }
}
@media (max-width: 767px) {
    .wrappermenutoggle  {
        display:none;
    }
    .wrappermenulogo  {
        display:none;
    }
    .wrappermenusmheader  {
        background:#404040;
        padding:5px 14px;
        border-bottom:1px solid rgba(0,0,0,0.1);
    }
    .wrappermenusmheaderline  {
        display:flex;
        flex-direction:row;
        align-items:center;
    }
    .wrappermenusmheadermenu  {
        flex:1px;
    }
    .wrappermenusmheaderlogoimg  {
        max-width:150px;
    }
    .wrappermenusmheadermenubtn  {
        background:rgba(0,0,0,0.1);
        border:1px solid rgba(0,0,0,0.1);
        border-radius:5px;
        padding:0px 8px;
        font-size:20px;
        color:rgba(255,255,255,0.8);
    }
    .wrappermenusmheadermenubtn:hover  {
        background:rgba(0,0,0,0.2);
        border:1px solid rgba(0,0,0,0.2);
    }
    .wrappermenusmheadermenubtn .fas  {
        position:relative;
        top:3px;
    }
    .wrappermenucontent  {
        display:none;
        background:#404040;
        padding:8px 8px;
    }
    .wrappermenu.activesm .wrappermenucontent  {
        display:block;
    }
    .wrappermenulink  {
        display:block;
        color:#e1e1e1;
        transition:color 0.25s;
        font-size:15px;
        padding:4px 6px;
    }
    .wrappermenulink:hover  {
        color:#f1f1f1;
        text-decoration:none;
    }
    .wrappermenulink  .fas  {
        display:inline-block;
        width:28px;
    }
    .wrappermenulink.active  {
        color:#00ccff;
    }
    .wrappercontentbreadcrumb  {
        background:#ffffff;
        padding:5px 10px;
        border-bottom:1px solid rgba(0,0,0,0.1);
        height:36px;
        margin:0;
    }
    .wrappercontentbreadcrumb li  {
        display:inline-block;
        list-style:none;
        font-size:15px;
    }
    .wrappercontentbreadcrumb > li + li:before {
        color:#cccccc;
        content:"/";
        padding:0 5px;
    }
    .wrappercontentbreadcrumb li a {
        color:#707070;
    }
    .wrappercontentbreadcrumb li a:hover {
        color:#303030;
        text-decoration:none;
    }
    .wrappercontentbreadcrumb li.active  {
        color:#c0c0c0;
    }
    .wrappercontentbody  {
        padding:10px;
    }
}
/* WRAPPER */

.alert  {
	margin-bottom:10px;
}

/* COMMON */

.cmheader  {
	font-family: Oswald;
	font-size:26px;
	color:#ffffff;
	margin-bottom:8px;
	margin-top:20px;
}
.cmpageheader  {
	font-family: Oswald;
	font-size:26px;
	color:#222222;
}
.cmalert  {
	background:rgba(255,255,255,0.25);
	border-radius:5px;
	padding:10px 8px;
	font-size:17px;
	font-weight:500;
	color:#fdfdfd;
	text-align:center;
}
.cmbadge  {
	font-size:0.75em;
	font-weight:bold;
	background:rgba(255,255,255,0.3);
	border-radius: 50%;
	padding:1px 10px;
	user-select:none;
}
.cmmorelink  {
	font-size:15px;
	font-weight: 500;
	color:rgba(255,255,255,0.9);
	transition: all 0.3s;
}
.cmmorelink:hover  {
	text-decoration:none;
	color:rgba(255,255,255,1);
}
.cmchart  {
	background:#ffffff;
	padding:6px;
	border-radius:5px;
}
.cmrow  {
	margin:-8px;
}
.cmrow>div  {
	padding:8px;
}

/* PROJECTS GRID */

.pgrow  {
	margin:-8px;
}
.pgrow>div  {
	padding:8px;
}
.pgcell  {
	border-radius:5px;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
	transition: all 0.2s;
}
.pgcell:hover  {
	transform:scale(1.03);
	box-shadow:0 3px 6px rgba(0,0,0,0.2);
}
.pgcelllink:hover  {
	text-decoration:none!important;
}
.pgcellheader  {
	font-size:15px;
	font-weight: 500;
	padding:4px 10px;
	color:#222222;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	background:#fafafa;
	border-top-right-radius:5px;
	border-top-left-radius:5px;
}
.pgcelllogo  {
	height:90px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0.2));
}
.pgcelllogotext  {
	font-weight:bold;
	font-size:20px;
	color:#ffffff;
	user-select:none;
}
.pgcelldetails  {
	padding:8px 4px;
	background:#fafafa;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
}
.pgcelldetailsparts  {
	width:64%;
}
.pgcelldetailspart  {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:12px;
	line-height:1.4;
	color:#666666;
}
.pgcelldetailspart>i  {
	display:inline-block;
	text-align:center;
	width:16px;
	color:#bbbbbb;
}
.pgcelldetailstasks  {
	width:12%;
}
.pgcelldetailstask  {
	text-align:center;
	line-height:1.2;
	font-weight:bold;
	font-size:13px;
	color:#ffffff;
	white-space:nowrap;
	overflow:hidden;
	padding:2px 0;
	border-radius:5px;
	margin:0 2px;
}
.pgcelldetailstask>i  {
	font-size:11px;
	opacity:0.8;
}

/* INVOICES LIST */

.ilitemlink:hover  {
	text-decoration:none;
}
.ilitem  {
	padding:8px;
	background:#ffffff;
	border-radius:5px;
	margin-bottom:6px;
	box-shadow:0 2px 4px rgba(0,0,0,0.1);
	transition: all 0.2s;
	cursor:pointer;
}
.ilitem:hover  {
	transform:scale(1.01);
	box-shadow:0 3px 6px rgba(0,0,0,0.2);
}
.ilitemrow  {
	margin:-5px;
}
.ilitemrow>div  {
	padding:5px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.ilitemseries  {
	color:#333333;
	font-size:20px;
}
.ilitempart  {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:12px;
	line-height:1.4;
	color:#666666;
}
.ilitempart>i  {
	display:inline-block;
	text-align:center;
	width:16px;
	color:#bbbbbb;
}
.ilitemdate  {
	color:#333333;
	font-size:16px;
}
.ilitemvalue  {
	color:#333333;
	font-weight:500;
	font-size:16px;
}