@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;700&display=swap');

html, body {
	margin:0px;padding:0px;width:100%;height:100%;background:#fff;
	font-family:'Open Sans', sans-serif, helvetica;font-weight:100;color:#333;position:relative;
}
textarea {font-family:'Open Sans', sans-serif, helvetica;color:#333;}
body {background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(200,200,200,1) 100%);}

a, a:visited {color:#333;text-decoration:none;}
a:hover {color:#333;text-decoration:underline;}
a:active {color:#000;text-decoration:underline;}

/* DATATALBE EXCEPTIONS */
span.titleSum {display: none!important;}
.dataTables_filter input {
    padding: 9px;
    margin: 9px 0px;
    border-radius: 100px;
    border: 1px solid #ccc;
    box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%);
    background-size: auto 70%;
    background-position: 97% 43%;
    background-repeat: no-repeat;
    display: inline-block;
}
th.sorting:not(.sort) {
    pointer-events: none!important;
    background-image: none!important;
}
/*
#billingTable td.skip {
    text-decoration: line-through;
}
*/

/* LOGIN STYLES */
.loginHolder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    min-width: 360px;
    max-width: 480px;
}
.loginHolder form {
    padding-bottom:36px;padding-top:36px;
}
.loginHolder img {display:block;width:50%;margin:0px auto;}
.loginHolder h1 {text-transform:uppercase;text-align:center;}



/* HOME TEMPLATE */
.topBar {
	position:fixed;top:0px;left:0px;height:80px;background:#fff;
	box-shadow:0px 0px 4px rgba(0,0,0,0.2);width:100%;z-index:3;
}

.topBar a.logoLink {
    display: block;
    height: 100%;
    width: auto;
    float: left;
	margin:0px 36px;
    vertical-align: top;
}
.topBar .logoLink img.logo {
    height: calc(100% - 30px);
	margin:15px;
}

.topBar ul.mainNav {
    margin: 0px 36px;
    padding: 0px;
    float: right;
    vertical-align: top;
}
.topBar ul.mainNav li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
	position:relative;
}
.topBar ul.mainNav li a {
	padding:0px 18px;
	display:block;
	font-size:14px;
	font-weight:400;
	text-transform:uppercase;
    line-height: 80px;
	background:transparent;
	transition:0.2s;
}
.topBar ul.mainNav li a:hover {
    background:#f4f4f4;
	text-decoration: none;
}
.topBar ul.mainNav li.active a {
    color: #286eb5!important;
}
.topBar ul.mainNav li ul {
    display:none;
	position:absolute;top:100%;left:0px;
	margin:0px;padding:9px;
	width:auto;max-width:250px;
	box-shadow:0px 5px 5px rgba(0,0,0,0.1);
	z-index:3;
}
.topBar ul.mainNav li:hover ul {
    display:block;
	background:#fff;
}
.topBar ul.mainNav li ul li {
    display:block;
}
.topBar ul.mainNav li ul li a {
	padding:0px 18px;
    line-height: 50px;
}

a.home:before, a.add:before, a.login:before, a.list:before, a.options:before, a.subnav:after {
	margin-right:4px;
	font-family: "Material Icons Outlined";
	font-size:24px;
	vertical-align: bottom;
}
/*
a.home:before {content: '\e88a';} 
a.login:before {content: '\e73c';}
a.list:before {content: '\e8ef';}
a.options:before {content: '\e8b8';}
*/
a.add:before {content: '\e147';} 
a.subnav:after {content: '\e5cf';}


/* INFO TOGGLER */
.infoToggler {
    position: absolute;
    top: 18px;
    right: 18px;
	border-radius:100%;
	transition:0.2s;
	opacity:0;
}
.infoToggler.ready {opacity:1;}
.infoToggler.active {
    position: absolute;
    top: 18px;
    right: 418px;
	border-radius:100%;
	transition:0.2s;
}
.infoToggler:after {
	content: '\e88e';
	font-family: "Material Icons Outlined";
	font-size:30px;
	line-height:32px;width:32px;text-align:center;
	vertical-align: bottom;
    border-radius: 100%;
    background: #fff;
	box-shadow:0px 0px 5px rgba(255,255,255);
	transition:0.2s;
}
.infoToggler.active:after {content: '\e5c9'}

.infoToggler:hover {
	cursor:pointer;
	transform:scale(1.1);
    background: #f4f4f4;
}

.mainHolder {position:fixed;top:80px;left:0px;height:calc(100% - 80px);width:calc(100%);}

.mainIframe {
    width: 100%;
    height: 100%;
    padding: 0px;
    display: block;
    border: none;
}


/* MAIN VIEWS */

.contentHolder {
	position:fixed;top:0px;right:0px;
	height:calc(100% - 70px);width:calc(100%);
	background: linear-gradient(45deg, #eeeeee 0%,#ffffff 100%);
	overflow-y:scroll;z-index:1;transition:0.2s;
}
.sideBar {
	position:fixed;top:0px;right:0px;width:0px;height:calc(100% - 70px);
	background:#fff;z-index:2;box-shadow:0px 0px 4px rgba(0,0,0,0.2);
	overflow-y:scroll;transition:0.2s;
}
.footerTools {
	position:fixed;bottom:0px;left:0px;width:100%;height:70px;text-align:right;
	background:#f4f4f4;z-index:3;box-shadow:0px 0px 4px rgba(0,0,0,0.2);
}


body.helpOpen .contentHolder {width:calc(100% - 400px);right:400px;}
body.helpOpen .sideBar {width:400px;}


/* MAIN VIEW CONTENTS */

.mainContentHolder {padding:36px 36px 100px;}
.breadcrumb {border-bottom:1px solid #ccc;padding:9px;}

/* SIDEBAR CONTENTS */
.additionalInfo {
    display: block;
    margin: 0px;
    padding: 18px;
    vertical-align: top;
}
.additionalInfo h3, .additionalInfo p {
	padding:0px 18px;
}
.additionalInfo ul {
    margin: 0px;
    padding-left: 36px;
	font-size:small;
}
.additionalInfo ul li {
    display: inline-block;
    width: 100%;
    padding: 9px 0px;
    list-style: none;
}
.additionalInfo ul li strong {
    display:block;
}

/* QUICK INFO */
.quickInfo {border: 1px solid #ccc;background: #fff;padding:18px;}
.quickInfo h4 {margin: 0px;text-transform: uppercase;}
.quickInfo ul {margin: 0px;padding: 0px;list-style: none;}
.quickInfo ul li {padding: 9px;width: calc(20% - 22px);display: inline-block;font-size:14px;}
.quickInfo ul li strong {display:block;}


/* CARDVIEWS */
.customerCard {
    display: inline-block;
    width: calc(25% - 26px);
    height: auto;
    min-height: 180px;
    padding: 0px 0px 220px;
    margin: 9px;
	border-radius:4px;overflow:hidden;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
    vertical-align: top;
    position: relative;
}
.customerCard h3 {
    font-size: 20px;
    background: linear-gradient(to bottom, #215e9d 0%,#3975b2 50%,#437bb2 51%,#4079b2 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    transition: 0.2s;
    padding: 18px;
	margin-top:0px;
}
.customerCard ul {
	list-style: none;
	margin:0px;padding:9px 18px;
}
.customerCard ul li {
	padding:4px;
	font-size:14px;
	margin:0px;
}
.customerCard .actionsBtn {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: calc(100% - 18px);
    margin: 9px;
}

/* TABLE STYLES */
.tableData {
	display: block;
	vertical-align: top;
	padding:18px;
}

.tableHolder {
	display:block;
	overflow-x:auto;
	padding:9px;background:#fff;
	box-shadow:0px 0px 5px rgba(0,0,0,0.2);
}
table.dataListing {
    text-align: left;
    padding: 9px;
    width:100%;
    border-radius: 10px;
	border-collapse: collapse;
}
table.dataListing thead {
	background: linear-gradient(to bottom, #215e9d 0%,#3975b2 50%,#437bb2 51%,#4079b2 100%);
	color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);transition:0.2s;}
table.dataListing th, table.dataListing td {padding:18px 9px;transition:0.2s;}
table.dataListing th {text-transform:uppercase;font-weight: 400;}
table.dataListing tbody tr:nth-child(even), table.dataListing tbody tr.childs:nth-child(odd) {background:#f4f4f4;}
table.dataListing tbody tr.childs:nth-child(even) {background: #fff;}
table.dataListing tbody tr td.highlight {background: aliceblue;padding:9px;font-weight: 500;}
table.dataListing tbody tr.hidden {display:none;}

table.dataListing tbody tr.childs {border: 1px solid #ccc;border-top: none;box-shadow: 0px 5px 5px rgba(0,0,0,0.1);}
table.dataListing table.dataListing tr.childs .dataTables_filter {display: none!important;}
table.dataListing table .subtable th {background: #f4f4f4!important;border-top: 1px solid #ccc;}
table.dataListing table .subtable th:first-child {border-left: 1px solid #ccc;}
table.dataListing table .subtable th:last-child {border-right: 1px solid #ccc;}
/*
table.dataListing th.sort:hover {
	background: #215e9d;
	cursor:pointer;
}
table.dataListing th.sort.sortedBy:after, table.dataListing th.sort:hover:after {
	font-family: "Material Icons";
	content: '\e5d7';
	position:absolute;
	margin-left:5px;
}
*/
span.titleSum {
    font-size: 50%;
    font-weight: 400;
	display:block;
}
tr.childs table {
    display: inline-table;
    width: 100%;
    border-collapse: collapse;
}
tr.childs table thead.subtable th {
    background: #fff;
	border-bottom:2px solid #333;
	color:#333;
    font-size: 14px;
	text-shadow:none;
}
tr.childs {display:none;}
tr.childs tr {
    background: transparent!important;
    border-bottom: 1px solid #ccc;
}
/*
tr.parentData {transition:0.2s;background:#fff;}
tr.parentData:hover {cursor:pointer;background:#f4f4f4;}
*/

/* BUTTONS */
.btn {
    padding: 12px 18px;
	transition:0.5s;
	text-shadow:1px 1px 3px rgba(255,255,255,0.5);
	box-shadow:1px 1px 1px rgba(0,0,0,0.1);
	display:block;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
	line-height:24px;
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);border-radius:4px;
    color: #333;
    font-weight:400;
	border:1px solid #ccc;
}

.btn:hover {cursor:pointer;text-decoration:none;background:linear-gradient(to top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);}
.btn.block {margin:9px 0px;}

button.btn.block {
    width: 100%;
	max-width:220px;
    display: inline-block;
}
.btn.inline {
    display: inline-block;
	background: linear-gradient(to bottom, #ffffff 0%,#eeeeee 100%);
	margin:9px 9px;
}
.btn.inline:hover, input.btn.inline:hover {background: linear-gradient(to bottom, #eeeeee 0%,#ffffff 100%);box-shadow:0px 0px 0px rgba(0,0,0,0.2);}

.btn.green, input.btn.green {background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#83b700 51%,#9ecb2d 100%);color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.btn.green:hover, input.btn.green:hover {background: linear-gradient(to top, #bfd255 0%,#8eb92a 50%,#83b700 51%,#9ecb2d 100%);box-shadow:0px 0px 0px rgba(0,0,0,0.2);}
.btn.blue, input.btn.blue {background: linear-gradient(to bottom, #7db9e8 0%,#207cca 49%,#2b88d9 50%,#3b679e 100%);color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.btn.blue:hover, input.btn.blue:hover {background: linear-gradient(to bottom, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);box-shadow:0px 0px 0px rgba(0,0,0,0.2);}
.btn.red, input.btn.red {background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.btn.red:hover, input.btn.red:hover {background: linear-gradient(to bottom, #cf0404 0%,#ff3019 100%);box-shadow:0px 0px 0px rgba(0,0,0,0.2);}
.btn.yellow, input.btn.yellow {background: linear-gradient(to bottom, #ffa84c 0%,#ff7b0d 100%);color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}
.btn.yellow:hover, input.btn.yellow:hover {background: linear-gradient(to bottom, #ff7b0d 0%,#ffa84c 100%);box-shadow:0px 0px 0px rgba(0,0,0,0.2);}

.btn.toggleVisibility {display:none;}

table td .btn {
    padding: 9px 9px;
	margin:2px -9px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);border-radius:4px;
    color: #333;
    font-weight:400;
	border:1px solid #ccc;
}
.btn.icon:before {
    font-family: "Material Icons";
    font-size: 24px;
	margin-right:4px;
    padding: 0px!important;
    vertical-align: middle;
}
.btn.icon.edit:before {content:'\e3c9'}
.btn.icon.add:before {content:'\e147'}
.btn.icon.show:before {content:'\e8f4'}
.btn.icon.save:before {content:'\e161'}
.btn.icon.delete:before {content:'\e872'}

.btn.disabled {pointer-events:none;filter:grayscale(1);}
.btn.disabled:hover {cursor:not-allowed;}

input.searchInput {display:none;}

button.save.processing, button.delete.processing {filter:grayscale(1)!important;}

/*
input.searchInput {
    padding: 9px;
    margin: 9px 0px;
    border-radius: 100px;
    border: none;
    width: calc(100% - 18px);
    box-shadow: inset 2px 2px 2px rgb(0 0 0 / 10%);
    background-image: url(../img/search-icon.png);
    background-size: auto 70%;
    background-position: 97% 43%;
    background-repeat: no-repeat;
}
*/

/* FORM STYLES */
form.editForm {
    padding: 18px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 5px 5px rgb(0 0 0 / 20%);
	width:calc(100% - 36px);
}
form.editForm p.label {
    font-size: 14px;
    font-weight: bold;
    width: 30%;
    display: inline-block;
    margin: 1%;
	vertical-align:top;
}
form.editForm input, form.editForm select, form.editForm textarea {
    width: calc(100% - 18px);
	box-sizing:content-box;
    display: block;
    padding: 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
	font-size:16px;
}
form.editForm textarea {height:auto;min-height:100px;}
form.editForm input.btn {margin:18px 0px 9px 0px;}

form.editForm p.tapahtuma {display:none;}

.jatkuva, .kerta, .tila, .kaikki {display:none;}

/* CONFIRM DIALOG */
.ui-widget {
    font-family: 'Open Sans', sans-serif, helvetica;
    font-size: 1.1em;
}
.ui-dialog-titlebar.ui-corner-all.ui-widget-header.ui-helper-clearfix.ui-draggable-handle {
    background: linear-gradient(to bottom, #215e9d 0%,#3975b2 50%,#437bb2 51%,#4079b2 100%);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
    transition: 0.2s;
	font-family: 'Open Sans', sans-serif, helvetica;
}
.ui-dialog .ui-dialog-title {
    float: left;
    margin: 0.1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Open Sans', sans-serif, helvetica;
}


/* SUFFIX LIST */
.suffix:after {padding-left:4px;}
.suffix.negative {color:orangered;}
.suffix.positive {color:forestgreen;}
.suffix.m2:after {content:'m2'}
.suffix.m3:after {content:'m3'}
.suffix.eur:after {content:'€'}
.suffix.eurHour:after {content:'€/h'}
.suffix.eurDay:after {content:'€/pv'}
.suffix.kpl:after {content:'kpl'}

/* PREFIX LIST */
.prefix:before {padding-right:4px;}
.prefix.icon:before {
	font-family: "Material Icons";
    font-size: 24px;
	margin-right:4px;
    padding: 0px!important;
    vertical-align: middle;
}
.prefix.image:before {content:'\e3f4'}
.prefix.document:before {content:'\e873'}



/* RESPONSIVE STYLES */
@media screen and (max-width: 1500px) {
	.customerCard {width: calc(33% - 26px);}
}
@media screen and (max-width: 1100px) {
	.customerCard {width: calc(50% - 26px);}
}

@media screen and (max-width: 640px) {
	h1 {font-size:20px;}
	h2 {font-size:16px;}
	h3 {font-size:14px;}
	td,th,p,span,a,strong {font-size:12px;}
	.sideBar {transform: translateX(-100%);}
	.mainHolder {left: 0px;width: 100%;}
	.mainContentHolder {padding: 0px;}
	.mainContentHolder .tableData {display: block;width: 100%;padding: 0px;}
	.mainContentHolder .additionalInfo {display: block;width: 100%;padding: 0px;}
	span.titleSum {display: block;clear: both;float: none;margin: 9px 0px;}
	input#tableSearch {float: none;min-width: auto;display: block;clear: both;margin:18px 0px;}

	ul.mainNav {display: none;}
	a.logoLink {margin-left: 0px!important;}

	.contentHolder {padding: 9px!important;}
	.mainContentHolder {padding: 9px 9px 150px 9px!important;}
	
	.addNew {bottom: 9px;right: 9px;width: 40px;height: 40px;}
	.addNew:after {font-size: 30px;line-height: 40px;}
	.customerCard {width: calc(100% - 26px);}
}

@media screen and (max-width: 450px) {

}