@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,600italic,600,300,300italic);
@import url(https://fonts.googleapis.com/css?family=Arvo:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
*{ margin: 0;}
html, body { height: 100%; }
body {
    min-width: 1100px;
    background-color: #3e3e3e;
    font-family: 'Open sans';
}

/********************************** HEADER ***************************************/

.showMsg {
    position:fixed;
    display: none;
    height: 100%;
    width: 100%;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 900;
    text-align: center;
}

.showMsgText {
    position: fixed;
    display: none;
    text-align: center;
    background-color: #fff;
    width: 300px;
    height: 100px;
    min-height: 100px;
    overflow-y: scroll ;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 910;
    padding: 10px;
    border-radius: 5px;
}

.headerMenu {
    position: relative;
    width: 100%;
    background-color: transparent;
    background-image: url("images/bgOver.png");
    padding-bottom: 60px;
    margin-top: 0;
    text-align: center;
}
.headerMenu img {height: 80px; opacity: 0.8;}
.headerMenuFull {
    height: 100%;
    margin: 0;
}
.headerHeight {
    position:relative; 
    height: 0px;
    width: 100%;
}

.links {
    position: relative;
    height: 35px; 
    margin-top: 0px;
    line-height: 35px;
    z-index: 20;
}


.headerMenu a:link, .headerMenu a  { color: #fff; 
    text-decoration: none; 
    font-family: 'Roboto', Arial, Helvetica, sans-serif; 
    margin: 0px 10px; 
    font-size: 1.1rem; 
    font-weight: 400;
    text-shadow: 0px 0px 4px #808080;
    text-align: center;
    letter-spacing: 2px; 
    transition: ease 0.2s all;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    padding: 3px;
}

.headerMenu a:visited { color: #fff;}
.headerMenu a:hover { color: #fff; border-bottom: 2px solid #fff; }
.headerMenu a:active { color: #fff;}

.navContainer
{
    width: 100%;
    position: relative;
}
#navList {
    position: relative;
    margin: 0 auto;
    width: fit-content;
}

#navList ul { 
    position: relative;
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}

#navList ul a {
    display: block;
}

#navList ul li { 
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}

#navList ul ul {
    visibility: hidden;
    opacity: 0;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0;
    box-shadow: 0 0 10px -4px #000;
    border-radius: 5px;
    transition: all 0.2s ease;
}

#navList ul ul li
{
	float: none;
    max-width: 200px;
}

#navList ul ul a:link
{
	line-height:120%;
	padding: 10px 15px;
    margin: 0;
}

#navList ul li:hover > ul
{
	visibility: visible;
	opacity: 1;
}



#navList ul li ul { 
    list-style: none; 
    text-align: left; 
    padding:0; 
    position: absolute; 
    top: 100%; 
    float: none; 
    background-color: #fff;
}

#navList ul li ul a:hover {
    background-color: #cacaca;
    border-radius: 5px;
}

#navList ul li ul a:link, #navList ul li ul a:visited  
{ 
    display: block; 
    color: #000;
    text-shadow: none;
    background-image: none;
    text-align: left;
}




.sidebar{
    position: fixed;
    height: 100%;
    width: 150px;
    overflow: auto;
    text-align: center;
    float:left;
    background-color: #f4f4f4;
    z-index: 1;
    top: 0;
}

.sidebar a:link { color: #808080; text-decoration: none; font-size: 1.1rem; letter-spacing: 2px;}
.sidebar a:visited { color: #808080;}
.sidebar a:hover { color: #3e3e3e;}
.sidebar a:active { color: #808080;}

.headerInfo header { color: #fff; font-size: 2.5rem; text-align: center;}


/***************** MISC *************************/

a {cursor: pointer;}

.wrapper {
    position: relative;
    width:98%;
    margin: -40px auto 40px;
    border-radius: 5px;
    background-color: #fff;
    text-align: center;
    box-shadow: 0px 0px 10px -2px #000;
}

.wrapper button { cursor: pointer; font-size: 1rem; font-weight: 300; font-family: 'Roboto';}

.wrapperStart {
    background-color: transparent;
    box-shadow: 0 0 0 0;
    margin: 0;
    border-radius: 0;
    position: absolute;
    top: 35%;
    right: 0;
    left: 0;
    margin: auto;
}

.wrapper h1 {
    color: #ffb051;
    font-size: 3rem;
}

.startHeader { text-align: center; font-size: 3rem; margin-top: 20px;}

a:link { color: #808080; text-decoration: none; }
a:visited {color: #808080; }
a:hover { color: #3e3e3e; }

.boxShadow { box-shadow: 0px 0px 0px 0x #000; -webkit-box-shadow: 0px 0px 0px 0px #000; }

header { font-size: 1.6rem; text-align: left; padding-left: 10px; margin: 0px 0px 10px; color: #3e3e3e; font-family: Quicksand;}

input[type="number"] { -moz-appearance: textfield; -webkit-appearance: none; }
input[type="submit"] { font-size: 1.1em;}

.searchTop h1 { color: #3e3e3e; font-weight: 400; font-family: Quicksand;}
.searchTop h3 { font-weight: 300; font-style: italic; }

.redShadow { box-shadow: 0px 0px 10px 0px red; -webkit-box-shadow: 0px 0px 10px 0px red; }

.changeToInput { cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none;}
.changeToInput:hover { color: #3ed060;}

.siteInactive { position: absolute; right: 0; left: 0; margin: 0 auto; top: 40%; z-index:200; background-color: #fff; margin: 0 auto; width: 90%; border-radius: 5px; box-shadow: 0px 0px 10px -5px #000;}
.inactivePage { font-size: 2.5rem; color:#f44336; padding: 30px 0;}
.inactivePageAdmin { font-size: 1.5rem; color: #f44336;}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.backupShadow {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 150;
}

.backupDialog {
    position: absolute;
    vertical-align: middle;
    margin: auto auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    box-shadow: 0 0 10px -4px #000;
    z-index: 200;
    width: 300px;
    height: 100px;
    border-radius: 5px;
    padding: 10px;
}

/********************************** FOOTER ************************************/

footer {
    width: 100%;
    height: 35px;
    z-index:10;
}

footer {
    text-align: center;
    color: #fff;
    background-color: #3e3e3e;
    line-height: 35px;
}

.footerLink { width: 100%; text-align: center; margin: 0 0 10px;}

.footerLink a:link { color: #fff; }
.footerLink a:visited {color: #fff; }
.footerLink a:hover { color: #cacaca; }

/************************ START ****************************/

.startWrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 300px;
    margin: 0px auto;
    text-align: center;
    padding-bottom: 10px;
}

.startInfo {
    position: relative;
    width: 49%;
    display: inline-block;
    background-color: #fff;
    break-inside: avoid;
    vertical-align: top;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 5px 6px;
    border: 1px solid #cacaca;
}

.funFact {
    max-width: 35%;
    margin: 0 auto;
}

@media (max-width:1400px) { 
    .startInfo {
    position: relative;
    width: 98%;
    display: inline-block;
    background-color: #fff;
    break-inside: avoid;
    vertical-align: top;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 5px 6px;
    border: none;
    border-bottom: 1px solid #cacaca;
    }

    .funFact {
        max-width: 100%;
    }
}


.startInfo table {
    width: 100%;
}

.startInfo a:link { color: #40b5ff;}
.startInfo a:visited { color: #40b5ff;}
.startInfo a:hover { color: #3ed060;}

.test {
    width: 300px;
    height: 200px;
    background-color: #fff;
    margin: 0 auto;
}

/*********************** LOGIN *****************************/

.loginDiv {
    width: 300px;
    margin: 0px auto;
    background-color: #fff;
    padding: 20px 0px 0px;
    margin-top:25px;
}

.loginDiv input[type="text"], .loginDiv input[type="password"] { width: 95%; border: none; border-bottom: 1px solid #cacaca; height: 30px; outline: none; font-size: 1.2rem; text-align: center;}
.loginDiv input[type="submit"] { width: 100%; height: 35px; margin-top: 20px;}


/**************** REGISTRERING ***********************/

.regDiv {
    position: relative;
    width: 300px;
    margin: 25px auto 0px;
    background-color: #fff;
}

.regForm h2 { margin: 3px 0px 0px; font-size: 1.2rem; font-weight: 400;}

.regForm input[type="text"], .regForm input[type="password"] { border: 1px solid #cacaca; margin-bottom: -1px; width: 250px; height: 25px; font-size: 1.1rem; text-align: center;}
.regForm input[type="submit"]{width: 100%; margin: 0; height: 35px; font-size: 1rem;}


/********************************** TID *******************************************/

.timeWrapper { width: 100%; margin: 0px auto 0px; border-radius: 5px;}
@media (max-width:1400px) { 
	.timeWrapper {
		width: 99%;
	}
}
.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 0px 10px;
    width: 500px;
    height: 35px;
}
.ui-button {height: 37px; top: -1px;}

.orderNums { display: none; width: 600px; max-height: 500px; overflow: auto; background-color: #fff; margin: 10px auto; }
.orderNums table { width: 100%; text-align: center; }

.timeContent { width: 99%; margin-bottom: 30px; text-align: left; background-color: #fff; border-radius: 5px;}

.timeContent button { width: 150px; height: 35px; margin: 0; font-size: 0.9rem; cursor:pointer;}

.timeContent select { width: 90px; height: 30px; border: 1px solid #cacaca; cursor: pointer; background-color: #f8f8f8; }

.newTimeContent { width: 80%; margin: 0 auto 30px; background-color: #fff; padding-bottom: 10px;}

.newTimeContent button { width: 150px; height: 35px; margin: 0; font-size: 0.9rem; cursor:pointer;}

.newTimeContent select { width: 90px; height: 30px; border: 1px solid #cacaca; cursor: pointer; background-color: #f8f8f8; }

.newTimeContent .selectUser {width: 250px; height: 40px; font-size: 1.5rem; text-align: center; cursor: pointer; background-color: #fff; border: 1px solid #cacaca;}

.weekButton, .showOrders { margin: 20px;}

.timeInfo { width: 60%; color: #808080; margin: 10px auto; border-radius: 5px;}

.leftColumn {
    display: inline-block;
    margin-left: 0;
    vertical-align: top;
    width: 10%;
    padding: 0 15px;
    border-radius: 5px 0 0 5px;
    background-color: #e3e3e3;
    box-shadow: -5px 0px 5px -8px #000 inset;
    -webkit-box-shadow: -5px 0px 10px -8px #000 inset;
}

.timeUsers { 
    width: 100%;
    margin-bottom: 20px;
    }
.timeUsers select { background-color: transparent; border: none; width: 100%; text-align: center; font-size: 1.1rem;}
.timeUsers select option { border: none;}

.newWeekForm, .newWeekformUpdated { width: 100%; padding-bottom: 10px; }
.newWeekform h2, .editWeek h2, .newWeekformUpdated h2 { margin: 10px 5px 0px; font-size: 1.3rem; font-family: Quicksand;}
.newWeekform .week, .editWeek .week, .newWeekformUpdated .week { border: 1px solid #cacaca; height: 30px; width: 50px; text-align: center; font-size: 1.5rem;}
.newWeekform .year, .newWeekformUpdated .year { border: 1px solid #cacaca; height: 30px; width: 80px; text-align: center; font-size: 1.5rem; }
.newWeekform .descInput, .editWeek .descInput, .newWeekformUpdated .descInput { width: 100%; font-family: arial; height: 20px; }
.hoursTbl, .editTimeTbl { width: 100%; border-spacing: 0;}
.hoursTbl select {
    width: 300px;
}
.hoursTbl .desc, .editTimeTbl .desc { min-height: 40px;}
.hoursTbl i, .editTimeTbl i { cursor: pointer;}

.editTimeTbl select { min-width: 300px;}

.fileUpload { display: none; width: 250px; position: absolute; background-color: #fff; margin: 0px 0px 0px 50px; z-index: 99; }
.fileUpload button { width: 100%; height: 30px;}

.materialsUpload { display: none; width: 350px; position: absolute; background-color: #fff; margin: 0px 0px 0px 50px; z-index: 100;  box-shadow: 0px 0px 10px -5px #000;}
.materialsUpload span { width: 100%; font-style: italic; font-weight: 300; }
.materialsUpload button { width: 100%; height: 30px;}
.materialsUpload a { color: #ffb051; font-size: 1rem; font-style: italic; cursor: pointer;}
.materialsUpload table { width: 100%;}
.amountInput {width: 80px; }
.materialInput { width: 220px;}
.weekend { display: none;}
.newWeekform .hours, .editWeek .hours, .newWeekformUpdated .hours { width: 45px; border: none; border-bottom: 1px solid #808080; font-size: 1.2rem; text-align: center;}

.newWeekform input[type="submit"], .editWeek button, .newWeekformUpdated input[type="submit"] { margin-top: 20px;}

.newWeektbl { width: 200px; text-align: center; margin: 0 auto;} 
.editWeek  {width: 100%; text-align: center;}

.editWeek .saveRow { width: 60px; height: 30px;}

.editWeek h1 { font-size: 2rem; color: #3ed060; margin: 0;}

.materialDiv { display: none; position: absolute; background-color: #fff;}


.timeTbl {
    width: 100%; 
    text-align: center; 
    position: relative; 
    border-spacing: 0; 
    margin-bottom: 10px;
    }

.timeTbl header { color: #607d8b; text-align: center; font-weight: 600; margin: 0; font-size: 1.8rem; cursor: pointer; }
.timeTbl header:hover {color: #e29d49;}


.timeTbl td { text-align: center; width: 100%;}

.timeTbl h1 { margin: 0px; font-family: 'Roboto'; font-weight: 400; text-align:center; font-size: 1.5rem; color: #40b5ff;}
.timeTbl h1 i { color: #3ed060;}

.timeTbl tr.showTime:hover { cursor: pointer; background-color: #f8f8f8; }

.hideWeeks {display: none;}

.rightSide {display: inline-block; width: 85%; text-align: center; margin: 0 auto;}
.timeExpand { background-color: #fff; width: 100%; margin: 0px 0px 20px; border-spacing: 0; text-align: center;}

.timeExpand h3 { display: inline-block; }

.timeExpand td { width: 30px; padding: 3px 0px}

.timeExpand .bigInput input { width: 300px;}
.timeExpand .smallInput input {width: 20px;}
.timeExpand .bigInput button, .timeExpand .smallInput button { 
    font-size: 1rem; width: 20px;  vertical-align: top; margin: 1px -1px 0; text-align: center; padding: 0 2px; height: 23px; border: none; border-radius: 0;}

.timeExpand tr:nth-child(odd) {background-color: #f8f8f8;}
.timeExpand tr:first-child, .timeExpand tr:last-child {background-color: transparent;}
.timeExpand tr:hover { background-color: #eeeeee;}

.totalDaytime { font-weight: 600; font-size: 1rem;}

.mainTr.selected {background-color: #f4f4f4; font-weight: 600;}

.timeExpand.smallTd { width: 5px;}
.timeExpand i.plus:hover { cursor: pointer; color: #808080; }

.timeExpand .italicComment { font-style: italic; color: #808080; font-size: 0.9rem;}

.timeExpand button {float: right; margin: 0;}



.timeExpand td:first-child,
 .timeExpand td:nth-child(2),
 .timeExpand td:nth-child(3)
 {
     width: 5px;
 }
 

.timeNum { width: 40px;}
.timeDesc { min-width: 25%; }
.timeComment { min-width: 200px; }

.timeExpandHeader {width: 100%; height: 30px;}
.timeExpandHeader h1 { margin: 0; font-size: 1.3rem; }
.timeExpandHeader td:first-child { width: 150px; text-align: left;}
.timeExpandHeader td:nth-child(2) { width: 50%; text-align: center;}
.timeExpandHeader td:last-child {width: 150px; text-align: right;}

.fileAttach { display:none;}
.fileAttach td { padding-left: 20px; text-align: left; }

.fileAttach a:link { text-decoration: none; color: #ffb051; font-size: 1.2rem;}
.fileAttach a:visited { color: #ffb051; }
.fileAttach a:hover { color: #e29d49;}

.timeMaterial { display: none; text-align: left;}

.timeMaterial td {  padding-left: 40px; }

.timeMaterial h2 { font-size: 1.3rem; color: #40b5ff; margin-bottom: 5px;}

#trSep { display: none;}
.timeSep { border-bottom: 1px solid #cacaca; height: 1px;}


.searchTime { width: 400px; height: 40px; margin:10px 0; font-size: 1.5rem; text-align: center; border: 1px solid #cacaca; box-sizing: border-box;}
.searchSelect { width: 150px; height: 40px; vertical-align: top; margin: 10px 0 0 -1px; font-size: 1rem; box-sizing: border-box; border: 1px solid #cacaca;}

.searchResultBox {width: 800px; min-height: 100px; background-color: #fff; margin: 10px auto;}

.pointerClass { transition: ease 0.2s all; }
.pointerClass:hover { cursor: pointer; box-shadow: 0px 0px 10px -3px #000; transition: ease 0.2s all; }


/************************** ORDERS ***************************************/

.orderSearchButton { width: 300px; height: 40px; margin: 10px 0; font-size: 1rem;}

.orderWrapper {
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule: 1px solid #cacaca;
    -moz-column-rule: 1px solid #cacaca;
    -webkit-column-rule: 1px solid #cacaca;
}

@media (max-width:1900px) { 
	.orderWrapper {
		width: 100%;
		column-count: 2;
	    -webkit-column-count: 2;
	    -moz-column-count: 2;
        column-rule: 1px solid #cacaca;
        -moz-column-rule: 1px solid #cacaca;
        -webkit-column-rule: 1px solid #cacaca;
	}
}

@media (max-width:1300px) { 
	.orderWrapper {
		width: 100%;
		column-count: 1;
	    -webkit-column-count: 1;
	    -moz-column-count: 1;
	}
}

.allOrders { 
    min-width: 600px; 
    width: 90%; 
    border-bottom: 1px solid #cacaca;
    margin: 10px 5px; 
    display: inline-block; 
    vertical-align: top;
}

.allOrders table {width: 100%; border-spacing: 0;}
.allOrders table tr:nth-child(even) { background-color: #f8f8f8;}
.allOrders table tr:hover { background-color: #eeeeee;}
.allOrders table td { padding: 3px 2px;}
.allOrders td:nth-child(3) { max-width: 270px;}

.allOrders header, 
.orderBox header,
.createOrder header {
    color: #607d8b;
    /*box-shadow: 0px 5px 15px -14px #000;*/
}

.orderBox {
    width: 600px; 
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background-color: #fff;
    margin: 10px 5px 0px;
    padding: 0;
    position: relative;
    display: inline-block;
     vertical-align: top;
     border-bottom: 1px solid #cacaca;
}

.changeOrder textarea { width: 80%; height: 80px; margin-bottom: 20px; font-family: Arial, Helvetica, sans-serif; }

.createOrder h2, .changeOrder h2  { margin: 0; font-size: 1.2rem; }

.createOrder { min-width: 600px; width: 90%; margin: 10px 5px; border-bottom: 1px solid #cacaca; background-color: #fff; text-align: center; display: inline-block; vertical-align: top;}

.flexWidth { min-width: 600px; width: 90%; }

.createOrder input[type="text"], .changeOrder input[type="text"], .createOrder textarea { margin-bottom: 20px; width: 80%; height: 25px; font-size: 1.1rem;}
.createOrder textarea { min-height: 80px;}
.createOrder input[type="submit"], .changeOrder input[type="submit"] { display: block; margin: 0 auto 5px; color:#fff; }
.createOrder h3 { font-size: 0.8rem; font-style: italic; font-weight: 300;}

.orderBox header, .allOrders header, .createOrder header { font-size: 1.8rem; color: #607d8b; margin: 0; font-weight: 600; text-align: center;}
.orderBox .biggerHead {font-size: 2.5rem;}
.orderBox h3 { font-size: 1rem; margin: 0px 0px 10px;}
.orderBox h4 {color: red; margin: 0; font-size: 1.7rem; }
.orderBox .expandMaterial { color: #40b5ff;}
.orderBox table { width: 100%; text-align: center;}

.orderBox .green,
.allOrders .green,
.orderBox .green a:link,
.orderBox .green a:visited,
.allOrders .green a:link,
.allOrders .green a:visited { color: #3ed060; font-weight: 600; }

.orderBox a:link, .allOrders a:link { color: #000; }
.orderBox a:visited, .allOrders a:visited { color: #000; }
.orderBox a:hover, .allOrders a:hover { color: #40b5ff; }

.orderBox .materials { display: none;}
.orderBox .materials table { width: fit-content; margin: 0px auto;}
.orderBox .materials table td { padding: 0px 40px;}

.orderBox .halfWay { width: 50%; display: inline-block; margin: 10px auto 0px;}
.halfWay button { width: 100%; height: 30px;}

.inactiveOrders { display: none;}

.orderBox .buttons { position: absolute; top: 50px; right: 3px; }

.orderBox table.orderTime { width: 100%; text-align: center; margin: 20px auto 10px;}
.orderTime tr:first-child { font-size: 1.4rem; font-weight: 700; color: #40b5ff;}
.orderTime tr:last-child {font-weight: 600; }
.orderTime td:first-child, .orderTime td:last-child { width: 80px;}

.notesH2 {color: #40b5ff; }


.prefixForm input { width: 50%; white-space: 0; height: 30px; font-size: 1.2rem; text-align: center; box-sizing: border-box;}

.orderInfos { font-style: italic; font-size: 0.8rem; text-align: left;}

.changeDate { margin: 10px 0 0; font-size: 1.6rem;}
.changeDate h2 { font-size: 1.8rem; color: #3e3e3e; font-weight: 300; margin: 0 0 10px;}
.changeDate input[type='text'] { width: 200px; height: 30px; font-size: 1.2rem; text-align: center; border: 1px solid #cacaca;}
.changeDate input[type='submit'] { margin: 0 0 20px; width: 200px; height: 30px; font-size: 1rem; }

.mergeOrders {padding: 15px 0;}
.mergeOrders h2 { color: #e29d49;}
.mergeOrders h3 { color: #808080; font-weight: 300; font-style: italic;}
.mergeOrders select { height: 30px; cursor: pointer;}

.addMaterial .small { width: 100px; height: 28px; font-size: 1.2rem; border: 1px solid #cacaca; border-radius: 3px;}
.addMaterial .tags  { width: 300px; height: 28px; border-radius: 3px; border: 1px solid #cacaca; font-size: 1.2rem; }
.addMaterial input {  box-sizing: border-box; }
.addMaterial input:focus { border: 1px solid #40b5ff; }
.addMaterial table { width: 450px; margin: 0 auto;}
.addMaterial select { width: 100px; height: 28px; box-sizing: border-box; cursor: pointer; font-size: 1.1rem;}

/********************************* KONTO **************************************************/

.userInfo, .userPass { width: 100%; margin: 0px auto 0px;  background-color: #fff;}
.userInfo header { font-size: 2.5rem; text-align: center; }
.userInfo table { width: 30%; border-spacing: 0; display: inline-block; vertical-align: top; }
.userInfo table td { text-align: center; width: 50%; }
.userInfo h1 {font-size: 1.5rem;}
.userInfo h2 { font-size: 1.2rem; }
.updateUserInfo h2, .userPass h2 { margin: 10px auto 0px; font-size: 1.2rem;}
.userInfoTbl {
    display: inline-block;
}
.userInfoTbl td:first-child {
    font-weight: 600;
}


.updateUserInfo input[type="text"], .changePass input[type="password"] { width: 300px; height: 25px; text-align: center; font-size: 1.1rem;}
.updateUserInfo input[type="submit"], .changePass input[type="submit"] { height: 40px; margin-top: 20px;}

.userInfoSmallTbl {
    width: 600px;
    margin: 0 auto 30px;
}

.yearTotalTimeTbl {
    width: 33%;
    padding: 0 5px;
    margin: 0 auto;
    border: 1px solid #cacaca;
    border-radius: 3px;
    background: linear-gradient(#fff, #efefef);

}

.yearTotalTimeTbl td:nth-child(1) {
    width: 80%;
    text-align: left;
}

.yearTotalTimeTbl td:nth-child(2){
    width: 20%;
    text-align: right;
}


.yearTotalTimeTbl th {
    color: #66BB6A;
}


/********************************* BILLS **************************************************/

.billWrapper {width: 98%; margin: 10px auto 0;}
.billOverviewWrapper table { width: 100%; }
.billOverviewWrapper table td { vertical-align: top;}
.billBottom {width: 98%; min-height: 100px; vertical-align: top;}
.billTop {width: 98%; min-height: 100px; vertical-align: top;}


.billChart { margin: 10px auto 0; padding: 10px; background-color: #fff; width: 600px; display: inline-block; border: 1px solid #cacaca; border-radius: 3px; vertical-align: top; }
.billIncomeInfo { width: 600px; display: inline-block; vertical-align: top; padding: 10px;}
.billIncomeInfo .iconBox { width: 30px; background: #f5f5f5; display: inline-block; border: 1px solid #cacaca; border-radius: 3px 0 0 3px;}
.billIncomeInfo .infoBox { border: 1px solid #cacaca; border-radius: 0 3px 3px 0; display: inline-block; padding: 0 5px; margin-left: -1px;}

.incomeInfoBox {
    border-radius: 3px;
    box-shadow: 0 0 10px -3px #000;
    display: inline-block;
    padding: 5px;
    
}

.billOverviewBox { width: 100%; margin: 10px auto 25px; border-bottom: 1px solid #cacaca; padding-bottom: 5px;}
.separate { width: 10px; height: 10px;}

.billOverviewBox table { width: 100%; border-spacing: 0;}
.billOverviewBox table td:nth-child(1), .billOverviewBox table td:nth-child(2) { width: 90px;}
.billOverviewBox table td:nth-child(3) {width: 250px;}
.billOverviewBox table tr:nth-child(even) { background-color: #f0f0f0;}
.billOverviewBox table tr:hover { background-color: #cacaca; }

.billSmallTd { width: 80px;}

.yearBox {display: inline-block; padding: 2px 5px; background-color: #EEEEEE; margin: 0 2px 0 0; font-size: 1.2rem; color: #607d8b;}
.yearBox.selected {color: #fff; background-color: #A5D6A7;  font-weight: 600;}
.yearBox:hover { background-color: #B2DFDB; }

.monthBox { display: inline-block;  background-color: #EEEEEE;border: 1px solid #cacaca; padding: 2px 5px; margin: -1px -1px 0 0;}
.monthBox.selectable:hover { background-color: #B2DFDB; }
.monthBox.selected {color: #fff; background-color: #A5D6A7; font-weight: 600; }
.monthBox.roundedLeft { border-radius: 5px 0 0 5px; }
.monthBox.roundedRight { border-radius: 0 5px 5px 0; }

.newBillOverview {width: 100%; min-width: 1300px; background-color: #fff; margin: 10px auto;}
.newBillOverview button { cursor: pointer;}
.newBillOverview h1 { font-size: 1.8rem; color: #707070; font-weight: 300;}
.newBillOverview .leftTbl td:first-child { width: 70px; font-size: 0.9rem;}

.newBillOverview .roundTop {border-radius: 3px 3px 0px 0px; }
.newBillOverview .roundBottom {border-radius:  0px 0px 3px 3px; }
.newBillOverview .roundAll { border-radius: 3px;}

.billNumInput { border: none; border-bottom: 1px solid #cacaca; width: 60px; color: #66BB6A; font-size: 1.3rem; text-align: center;}

.chooseOrder { text-align: center; border: 1px solid #cacaca; padding: 5px 10px; width: 300px; border-radius: 5px 0 0 0; background-color: #f0f0f0;  display: inline-block; vertical-align: top;}
.chooseOrder select { cursor: pointer;  font-family: Arial, Helvetica, sans-serif; height: 30px; }

.bigTbl td:last-child { width: 100%;}

.chooseCustomer { border: 1px solid #cacaca; width: 300px; padding: 5px 10px; border-radius: 0 5px 0 0; margin-left: -1px; vertical-align: top; background-color: #f0f0f0;  display: inline-block;}

.infoTbl { width: 643px; margin: -1px auto; padding-bottom: 10px; background-color: #f0f0f0; border: 1px solid #cacaca;}
.infoTbl th { font-family: Quicksand; font-weight: 400;}
.infoTbl input { width: 250px; height: 25px; font-size: 1.1rem; border: 1px solid #cacaca;}

.custInfo { width: 320px; display: inline-block; background-color: #f0f0f0; border: 1px solid #cacaca; margin-right: -1px; height: 80px; vertical-align: top;}
.compInfo { width: 320px; display: inline-block; background-color: #f0f0f0; border: 1px solid #cacaca; height: 80px; vertical-align: top;}

.custInfo input, .compInfo input { border: 1px solid #cacaca; }

.loadContainer {
    width: 100%;
    margin: 0 auto;
}

.articlesOverview {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.articlesList {
    width: 100%;
    text-align: center;
    border: 1px solid #cacaca;
    border-radius: 3px;
}

.overviewContainer {
    width: fit-content;
    display: inline-block;
    width: 400px;
    max-height: 300px;
    overflow-y: scroll;
    text-align: center;
    margin: 0 auto;
}

.listContainer {
    width: fit-content;
    max-height: 300px;
    overflow-y: scroll;
    text-align: center;
    margin: 0 auto;
    display: inline-block;
}

.rightTbl { width: 100%; margin: 0 auto; }

.rightTbl .refTbl {width: 300px; border-spacing: 0;}
.rightTbl .refTbl td:first-child {width: 100px; font-size: 0.9rem; text-align: right;padding: 0; }
.rightTbl .refTbl td:last-child {width: 200px; padding: 0;}
.rightTbl .refTbl input { display: block; border: 1px solid #cacaca; margin: 0 0 -1px 10px; height: 20px; box-sizing: border-box;}

.newBillForm textarea { min-width: 638px; min-height: 80px; font-family: Arial, Helvetica, sans-serif;margin-top: -1px; border: 1px solid #cacaca; }
.newBillForm input[type="checkbox"] { cursor: pointer;}
.newBillForm select { height: 27px;}

.mainTbl { width: 100%; border: 1px solid #cacaca; border-spacing: 0;}
.mainTbl img {max-height: 23px; }

.mainTbl td input[type='text'], .mainTbl td input[type='number'] { height: 23px;}

.mainTbl td:nth-child(2) { width: 10%; text-align: left;}
.mainTbl td:nth-child(2) input { width: 95%; }
.mainTbl td:nth-child(3) { width: 55%; text-align: left;}
.mainTbl td:nth-child(3) input { width: 95%;}
.mainTbl td:nth-child(4) { width: 5%;}
.mainTbl td:nth-child(4) input { width: 70%; text-align: center;}
.mainTbl td:nth-child(5) { width: 5%;}
.mainTbl td:nth-child(5) input { width: 95%;}
.mainTbl td:nth-child(6) { width: 10%;}
.mainTbl td:nth-child(6) input { width: 60%; text-align: center;}
.mainTbl td:nth-child(8) { width: 5%;}
.mainTbl td:nth-child(8) input { width: 60%; text-align: center;}
.mainTbl td:nth-child(9) { width: 100px;}                               /* Totalkolumn */
.mainTbl td:nth-child(10), .mainTbl td:nth-child(10) {width: 5px; }      /* Sista ikonerna */
.mainTbl td:nth-child(10) i:hover, .mainTbl td:nth-child(11) i:hover { cursor: pointer; color: #808080;}/* Sista ikonerna */

.nettoprice, .nettopricelabel { font-size: 0.7rem;}

.mainTbl input, select { border: 1px solid #aaaaaa; border-radius: 2px;}
.mainTbl select {cursor: pointer;}
.mainTbl tr.border td {border-bottom: 1px solid #aaaaaa;}

.billCopyRows { display: none;}

.mainTbl tr:first-child td {border-bottom: 1px solid #3e3e3e;}

.selectCustomer { font-size: 1.1rem; cursor: pointer; border-radius: 4px; border: 1px solid #cacaca; font-weight: 300; font-family: 'Open sans';}

.newBillForm input[type="submit"] { cursor: pointer; font-size: 1rem; font-weight: 300; font-family: 'Roboto';}

.oneBillWrapper {width: 70%; min-width: 600px; margin: 0 auto;}
.oneBillWrapper header { font-family: 'Open sans'; color: #607d8b; font-weight: 600; text-align: center; font-size: 2rem;}
.oneBillWrapper h2 { font-size: 1.3rem;}
.oneBillWrapper h4 { font-weight: 300; font-style: italic; margin: 10px 0 0;}

.billInfoTbl {width: 100%;}
.billInfoTbl td:nth-first() { width: 90px;}
.billInfoTbl td:nth-child(2) {width: 390px;}

.billInfoTbl .bigInput, .billInfoTbl .smallInput { height: 25px; box-sizing: border-box; vertical-align: top; }
.billInfoTbl .bigInput input { width: 300px;}
.billInfoTbl .smallInput input {width: 50px;}
.billInfoTbl .bigInput button, .billInfoTbl .smallInput button { font-size: 1rem; width: 30px;  vertical-align: top; margin: 1px -1px 0; text-align: center; padding: 0 2px; height: 23px; border: none; border-radius: 0;}



.billSearch input[type="text"] { width: 500px; height: 35px; font-size: 1.5rem; margin-bottom: 5px; }
.billSearch select { font-size: 1.2rem; height: 40px;}



/********************************* COMPANY **************************************************/

.companyWrapper { width: 90%; margin: 10px auto 0; }
.companyBox { width: 700px; background-color: #fff; margin: 5px 3px; border-bottom: 1px solid #cacaca; display: inline-block; vertical-align: top;}
.companyBox header { font-size: 2rem; color: #808080; text-align: center;}
.companyBox h2 { margin: 10px 0 0;}
.companyBox h3 { margin: 10px 0 0;}
.companyBox h4 {}
.companyBox input[type="text"] {width: 200px;}
.companyBox input.big { width: 500px; height: 35px; font-size: 1.5rem; text-align: center; border: 1px solid #cacaca;}

.companyBox .companyTbl { width: 50%; margin: 0 auto;}
.companyBox .companyTbl td:first-child { text-align: right; padding-right: 10px;}
.companyBox .companyTbl td:last-child { text-align: center; width: 25%;}

.companyBox input { font-family: Arial, Helvetica, sans-serif; font-size: 1rem;}
.companyBox input[type="submit"] { margin: 20px 0 0;}

.companySettBox { border-bottom: 1px solid #cacaca; padding: 3px 0;}

/********************************* CUSTOMERS **************************************************/

.customerOverview h1 { font-size: 1.5rem; }

.customerWrapper {width: 100%; margin: 10px auto 0; }
.customerBox {width: 600px; background-color: #fff; margin: 0 auto;}
.customerBox h1 { font-size: 1.5rem;}
.customerBox h2 { margin: 10px 0 0; }
.customerBox a:link { color: #e29d49;}
.customerBox a:visited { color: #e29d49;}
.customerBox a:hover { color: #40b5ff;}

.customerBox input.big { width: 500px; height: 35px; font-size: 1.5rem; text-align: center; border: 1px solid #cacaca;}

.customerBox .customerTbl { width: 50%; margin: 0 auto;}
.customerBox .customerTbl td:first-child { text-align: right; padding-right: 10px;}
.customerBox .customerTbl td:last-child { text-align: center; width: 25%;}

.addCustomer { margin: 10px 0;}

.customerEditWrapper {
    width: 100%;
}

.customerEditBox {
    display: inline-block;
    border: 1px solid #cacaca;
    vertical-align: top;
    margin: 10px 0 0;
}


/********************************* ARTICLES **************************************************/

.articleWrapper {width: 100%; margin: 10px auto 0;}

.importMsg { display: none; width: 100px; margin: 0 auto;}

.importList { width: 500px; background-color: #fff; margin: 10px auto;}

.importList h1 { margin: 10px auto; font-size: 1.2rem; color: #000; }

.importList input[type="text"] { width: 250px; height: 25px;margin-bottom: 5px; text-align: center; font-size: 1.2rem;}
.importList input.small {width: 150px; height: 25px; margin-bottom: 10px; text-align: center;}

.articleList { position: relative; width: 60%; min-width: 1000px; background-color: #fff; margin: 5px auto; text-align: left;}
.articleList h1 { margin: 0; text-align: left; }
.articleList i { font-size: 1.2rem; cursor: pointer;}
.articleList i.fave { color: #ffb051; font-size: 1.6rem;}
.articleList i:hover { color: #40b5ff;}
.articleList table { width: 100%; border-spacing: 0;}
.articleList .shortCenterTd { text-align: center; width: 80px; }

.articleList table tr:nth-child(even) {background-color: #eeeeee;}

.articleFirst {
    width: 80%;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    margin: 10px auto 0;
}

@media (max-width:1400px) { 
	.articleFirst {
		width: 100%;
		column-count: 1;
	    -webkit-column-count: 1;
	    -moz-column-count: 1;
	}
}

.listBox {
    width: 600px;
    margin: 10px auto;
    background-color: #fff;
    border-spacing: 10px;
    break-inside: avoid;
    page-break-inside: avoid;
}
.listBox header { width: 100%;}

.listBox .listColumns {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

.faveTbl {
    width: 100%;
}

.addArticleInput { width: 250px; height: 25px; font-size: 1.2rem; }
.shortInput { width: 70px; text-align: center;}

.addArticleForm input[type="checkbox"] {cursor: pointer;}
.addArticleForm select { width: 110px; text-align: center; cursor: pointer;}
.addArticleForm h2 {margin: 10px auto 0;}

.addArticleForm input[type="submit"] { margin: 15px auto;}



.articleBox { width: 500px; background-color: #fff; margin: 15px auto;}
.articleBox header {text-align: center; }
.articleBox h2 { font-weight: 600; margin: 0; font-size: 1.3rem; }
.articleBox h3 { font-weight: 300; margin: 0; }

.articleBox input[type='text'] { width: 250px; height: 20px;}
.articleBox input[type='submit'] { width: 100%; height: 35px;}



/******************************** KUNDER ****************************************************/




/********************************* SERVICE **************************************************/

.serviceTbl { width: 60%; margin: 0 auto; text-align: center;}
.serviceTbl td.serviceWide { width: 300px;}

.addServiceTbl { width: 200px; margin: 0 auto; text-align: center; }
.shortWidth { width: 50px; text-align: center; font-size: 1.1rem; }
.normalWidth { width: 125px; text-align: center; font-size: 1.1rem; }
.longWidth { width: 200px; text-align: center; font-size: 1.1rem; }


/********************************* PLANERING **********************************************/

.planningContent {
    width: 100%;
    display: inline-block;
}

.planningContent h1 {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    color: #000;
    font-weight: 300;
}

.planningContent h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    display: inline-block;
    margin: 15px auto 0;
}

.planningContent h3 {
    font-family: 'Quicksand', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
}

.addPlan, .addFree {
    width: 250px;
    margin: 5px 5px;
    display: inline-block;
    vertical-align: top;
    border: 1px solid #cacaca;
    padding: 10px;
}



.addPlan input[type="text"],
.addPlan input[type="date"],
.addFree input[type="text"],
.addFree input[type="date"]{
    width: 80%;
}

.workPlanTbl {
    width: 48%;
    margin: 5px 5px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    border: 1px solid #cacaca;
    padding: 10px;
}

.workPlanTbl table {
    width: 100%;
}


/********************************* ADMIN **************************************************/

.adminContent { width: 100%; margin: 0; }

.usersBox, .adminSettings { border: 1px solid #cacaca; margin: 5px auto; border-radius: 5px; display: inline-block;}

.backupInfo { display: block; padding-top: 15px;}

.usersBox { width: 80%; background-color: #fff; margin: 10px auto;}

.usersTbl {width: 100%;}

.adminSettings { min-width: 400px; }
.adminSettings h2 { font-size: 1.2rem; }
.adminSettings input[type="submit"] { width: 100%; height: 30px; margin: 5px 0 0}

.logDiv {
    width: 98%;
    text-align: center;
    border: 1px solid #cacaca;
    margin: 0 auto 40px;
}

.logDiv h1 { font-size: 2rem;}

.logDiv table { width: 100%; margin: 0 auto; border-spacing: 0;}
.logDiv table tr:nth-child(even) { background-color: #fafafa;}
.logDiv table td:nth-child(2) { max-width: 600px; word-wrap: break-word;}