@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900');


body { font-family: 'Montserrat', sans-serif; margin: 0px; padding: 0px; line-height: 1.2; font-size: 14px; color: #000000; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }

.aligned-row:before { display: block; }

.aligned-row {
    display: flex;
    flex-flow: row wrap;

    &::before {
        display: block;
    }
}

#contentMain { display: table; height:100%; }
#contentSub { display: table-cell; vertical-align: middle; height:100%; }


/* Login */
#loginContainer { width: 100%; padding: 30px; border:1px solid #000000; margin-top: 100px; }
#loginContainer .fieldSplit { margin-bottom: 8px; }

/* Header */
header { background: #000000; padding-top: 20px; padding-bottom: 20px; }
header ul { list-style: none; margin: 0px; padding: 0px; text-align: center; }
header ul li { display: inline-block; margin: 0px 25px; color: #FFFFFF; text-transform: uppercase; }
header ul li a, header ul li a:focus, header ul li a:hover { color: #FFFFFF; text-decoration: none; }

.topMargin { margin-top: 30px; }

ul.leftSideNav { list-style: none; margin: 0px 0px; padding: 0px 20px; }
ul.leftSideNav li { display: block; margin: 0px 0% 15px 0%; }


/* Form */
input[type=text], input[type=password], textarea, input[type=number], input[type=datetime-local], input[type=date] { padding: 8px; width: 100%; font-weight:300; color: #000000; border:1px solid #000000; outline: none; font-family: 'Montserrat', sans-serif; }
input[type=date] { padding: 6px 8px !important; }
input[type=submit] { margin: 0px 0px 0px 0px; text-transform: uppercase; font-size: 14px; border:1px solid #000000; padding: 8px 40px 8px 8px; background: #FFFFFF url(/images/form/submitArrow.svg) center right no-repeat; color: #000000; text-decoration: none; display: block; width: 100%; text-align: left; }
.styled_select select { float:left; background: transparent; width:120%; padding:0px 0px 0px 0px; border:0; overflow: hidden; color:#000000; font-size:14px; font-weight: 300; }
.styled_select { width: 100%; border:1px solid #000000; background: #FFFFFF url(/images/form/selectArrow.svg) center right no-repeat; color:#000000; font-size:14px; display:inline-block; padding: 6px 0px; overflow: hidden; }



/* Buttons */
.processButton { width: 100%; margin: 0px 0px 0px 0px; text-transform: uppercase; font-size: 14px; border:1px solid #000000; padding: 8px 40px 8px 8px; background: url(/images/form/processArrow.svg) center right no-repeat; color: #000000; text-decoration: none; display: block; }
.processButton:hover, .processButton:focus, .active { background: url(/images/form/processArrowHover.svg) center right no-repeat !important; color: #000000; text-decoration: none; }
.addItemButton, .addItemButton:hover, .addItemButton:focus { border:1px solid #000000; background: #8DC63F; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 4px 10px 6px 10px; font-size:18px; color: #000000; text-decoration: none; margin-top: 0px; display: inline-block;}
.removeItemButton, .removeItemButton:hover, .removeItemButton:focus { border:1px solid #000000; background: #ED2024; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 4px 10px 6px 10px; font-size:18px; color: #000000; text-decoration: none; margin-top: 0px; display: inline-block; transform: rotate(45deg); }

input[type=submit].addItem { border:1px solid #000000; background: #8DC63F; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 4px 10px 6px 10px !important; font-size:18px; color: #000000; text-decoration: none; margin-top: 0px; width:74%; }
input[type=submit].deleteItem { border:1px solid #000000; background: #ff4850; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 2px 8px 4px 9px !important; font-size:18px; color: #000000; text-decoration: none; margin-top: -10px; width: 28px; }

.deleteItem { border:1px solid #000000; background: #ff4850; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 2px 8px 4px 9px !important; font-size:18px; color: #000000; text-decoration: none; margin-top: -10px; width: 28px; height: 28px; }



/* Text */
h1 { width: 100%; font-weight: 700; text-transform: uppercase; font-size: 22px; margin-bottom: 30px; }
h2 { width: 100%; font-weight: 700; text-transform: uppercase; font-size: 16px; margin-bottom: 15px; }
.itemLabel { width: 100%; font-weight:300; color: #58595B; }
.itemText { width: 100%; font-weight:300; }
.itemSplit { margin-bottom: 15px; }


/* Grid */
.headerRow { background: #000000; padding-top: 8px; padding-bottom: 8px; font-weight: 500; color: #FFFFFF; }
a.tableOrder, a.tableOrder:hover, a.tableOrder:focus { color: #FFFFFF; text-decoration: none; }


/* Invoices */
.invoicePending { background: #E5D500; }


/* POs */
.poReceived { background: #accd65; }
.poPending { background: #fab54d; }
.listingLink, .listingLink:hover, .listingLink:focus { color: #000000; text-decoration: none; }


/* Jobs */
.freelanceTime { background: #fab54d; }
.trelloActionText { text-transform: none; margin-bottom: 20px; }
#hideTrello { display: none; }
.workspaceLink, .workspaceLink:hover, .workspaceLink:focus { color: #000000 !important; text-decoration: none !important; }


/* Performance */
.performanceContainer { background: #000000; color: #FFFFFF; width: 100%; padding: 10px; font-size: 18px; }
.performanceContainer span { font-size: 30px; }
.chartSet { border:1px solid #000000; margin-top: 20px; margin-bottom: 20px; }



/* Print */
#printContainer { width: 710px; height: 800px; margin: 0px 0px 0px 0px; padding: 20px 0px 0px 0px; display: block; text-transform: none !important; font-family: Helvetica, Arial, "sans-serif"; letter-spacing:0px !important; }
#printContainer .lightTextBlock { width: 100%; display: block; font-weight:300; }
#printContainer .documentHeading { text-transform: uppercase; font-size: 28px; letter-spacing: 1px; margin-bottom: 45px; }
#printContainer .darkTextBlock {  width: 100%; display: block; font-weight:bold; }

.printBarStyles { font-size: 10px; margin-bottom: 20px; color: #FFFFFF; background: #097001; padding-top: 10px; padding-bottom: 10px; }
#timingsGraph { margin: 20px 0px; }