:root {
	--color-brand: #20CA99;
	--color-brand-old: #4CB694;
	--color-brand-toned: #98BCB1;
	--color-brand-dark: #1C4236;

	--color-red: #DF2626;
	--color-red-toned: #C7A9A9;

	--color-gold: #D7BA7D;

	--color-link: #E9F3F5;
	--color-link-hover: #86C1CC;

	--aside-width: 9rem;
	--main-aside-width: 9rem;
	--aside-background: #161616;

	--aside-subnav-background: #202020;

	--header-height: 6rem;

	--tabs-button-color: #666;
	--tabs-border-color: #333;

	--scroll-bar-color: #444;
	--scroll-bar-bg-color: #000;

	--table-hover-color: #151515;
	--table-divider-color: #474747;

	--color-text-toned: #555;
	--color-background: #000;

	--header-height-table: 21.7rem;

	--logout-height:28rem;
}

/* presentation mode */
body.tv {
	--aside-background: #242424;
	--table-hover-color: #242424;
	--color-brand-toned: #70bcb1;
	--color-red-toned: #c79595;
	--color-gold: #d7a669;
	--color-link-hover: #54c1cc;
	--tabs-button-color: #888;
	--color-text-toned: #777;
}

html * { box-sizing:border-box; }
html { font-size:62.5%; margin:0; padding:0; width:100vw; height:100%; }
body { background:var(--color-background); margin:0; padding:0; color:#ccc; font-family:"Raleway", sans-serif; font-size:1.3rem; overflow:hidden; display:flex; flex-direction:row; align-items:stretch; justify-content:space-between; flex-wrap:nowrap; }
a, a:link, a:visited, a:hover, a:active { color:var(--color-link); text-decoration:none; }
a:hover { color:var(--color-link-hover); }
.cf:after, .w:after {content:""; display:table; clear:both;}

::-webkit-scrollbar-corner { background:rgba(0,0,0,0.5); }
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar { width:12px; height:12px; }
*::-webkit-scrollbar-track { background:var(--scroll-bar-bg-color); }
*::-webkit-scrollbar-thumb { background-color:var(--scroll-bar-color); border-radius:20px; border:4px solid var(--scroll-bar-bg-color); }

aside *::-webkit-scrollbar-track { background:var(--aside-background); }
aside *::-webkit-scrollbar-thumb { border-color:var(--aside-background); }



.hide { display:none; }
.show { display:inline-block !important; }
.hidden { display:none !important; }

.add { padding:0 1rem; }
.btn { padding:1.1rem 3rem !important; cursor:pointer; text-align:center; color:#fff; background:var(--color-brand); border-radius:0.5rem; }
.btn:hover { color:#000; }

nav.cropped { top:1.1rem; margin-top:-2rem; }
nav.cropped .crop { display:block; width:calc(100% - 2rem); overflow-x:hidden; white-space:nowrap; text-overflow:ellipsis; }


.alert { padding:0 0.5rem; background-color:var(--color-red); color:#fff; }

aside nav { height:calc(100vh - var(--logout-height)); overflow:hidden; overflow-y:auto; margin-top:6.5rem; }

aside { width:var(--aside-width); height:100vh; padding:3rem 0 0 0; text-align:center; background-color:var(--aside-background); user-select:none; transition:background-color 0.2s; }
aside a { transition:opacity 0.2s; opacity:0.5; width:100%; }
aside a:hover { opacity:1; }
aside a.logo { height:2.7rem; display:block; margin-bottom:0; text-align:center; }
aside a.logo:before { font-size:2.7rem; float:none; }

aside a.main, aside a.sub { display:block; font-family:"Inter", sans-serif; font-weight:400; font-size:1.2rem; margin-bottom:5rem; color:#ccc !important; }
aside a.main:before, aside a.sub:before { width:var(--aside-width); text-align:center; margin-bottom:1.1rem; font-size:2.6rem; color:#fff; }
aside form { position:absolute; bottom:2rem; width:var(--aside-width); text-align:center; display:block; padding-top:2rem; background-color:var(--aside-background); }
aside form a.sub { margin-bottom:0; }
aside form a.sub.tv { margin-top:5rem; }
aside form a.sub.logout { margin-top:10rem; }
aside form a.sub:before { font-size:1.6rem; }
body.tv aside form a.tv:before { color:var(--color-brand) !important; opacity:1 !important; }
aside form a.sub.admin { font-weight:300; margin-top:10rem; margin-bottom:10rem; }

aside.subnav { padding-top:0; display:flex; flex-direction:column; justify-content:center; background-color:var(--aside-subnav-background); }
aside.subnav nav { margin:0; height:auto; }
aside.subnav nav a { color:#fea; }

main { width:calc(100% - var(--main-aside-width)); height:100vh; padding:3rem; overflow:hidden; }
main.subnav { width:calc(100% - (var(--main-aside-width) * 2)); }

main header { display:flex; justify-content:space-between; margin-bottom:3rem; user-select:none; }
main header section { display:block; margin-bottom:2rem; }
main header section.filters { }

main header nav.subnav a span { display:inline-block; font-size:80%; }

/*
	TOP NAV KEEPS JUMPING BETWEEN PAGES!!!
*/
body.sales main header .left { margin-top:-0.2rem; margin-left:0.5rem; }
body.orders main header .left { margin-top:-0.7rem; margin-left:-0.7rem; }
body.profits main header .left { margin-top:-0.2rem; margin-left:0.5rem; }
body.vendors main header .left { margin-top:-0.7rem; margin-left:-0.7rem; }
body.projects main header .left { margin-top:-0.7rem; margin-left:-0.7rem; }
body.volumes main header .left { margin-top:-1.3rem; margin-left:0.4rem; }
body.volumes.products main header .left { margin-top:-0.7rem; margin-left:-0.7rem; }
body.weeklyorders main header .left { margin-top:-0.7rem; margin-left:-0.7rem; }




/* pages with no chart */
/*
.uncharted main header { position:relative; }
.uncharted main header .filters { position:relative; top:0.7rem; }
*/

main header nav { display:inline-block; position:relative; }
main header nav a, header nav a:link, header nav a:visited, header nav a:hover, header nav a:active { font-family:"Inter", sans-serif; font-weight:300; color:#fff; }
main header nav a { padding:0.5rem 1rem; font-size:2rem; }
main header nav a.prev, header nav a.next, header nav a.dead { display:inline-block; transform:scaleX(0.6); transform-origin:50% 50%; font-weight:400; }
main header nav a.dead, header nav a.dead:hover { cursor:default; color:#666 !important; }
main header nav a.current { color:var(--color-brand); }
main header nav a:hover { color:var(--color-brand-toned); }
main header nav.agent a:first-of-type { text-align:center; padding:0.5rem 4.1rem; margin-right:0.8rem; }

main header nav.drop { margin-right:2rem; position:relative; }
main header nav.drop:before { content:attr(data-title); display:block; font-family:"Inter", sans-serif; font-weight:500; color:var(--tabs-button-color); font-size:1rem; letter-spacing:0.3px; width:100%; text-align:center; text-transform:uppercase; position:absolute; top:-2rem; }
main header nav.drop div.drop { display:none; z-index:999; position:absolute; width:100%; max-height:50vh;  overflow-x:auto; top:3.2rem; left:0; background:rgba(0,0,0,0.9); box-shadow:0 5px 30px rgba(0, 0, 0, 1); padding-bottom:1rem; }
main header nav.drop div.drop a { display:block; text-align:center; font-size:1.6rem; padding:5px 0; margin:5px 0 5px 0; width:100%; }
main header nav.drop div.drop.show { display:block; }

body.sales main header section.filters,
body.profits main header section.filters { margin-top:-1.1rem; }

main header nav.drop a.main { display:inline-block; text-align:center; padding:0.5rem 0; border-bottom:1px dashed #444; }
main header nav.drop.dataset a.main { width:5rem; }

main header nav.drop.view { top:1.1rem; margin-right:1rem; }
main header nav.drop.view a.main { width:auto; color:var(--color-brand); }
main header nav.drop.view:hover a.main { width:auto; color:var(--color-brand-toned); }
main header nav.drop.view a.main:before { display:block; width:3rem; padding:0; margin:0 0.5rem 0.3rem 0.5rem; }

main header nav.drop.year { margin-right:0; }
main header nav.drop.year a.main { width:5rem; }
main header nav.drop.month a.main { width:5rem; }
main header nav.drop.agent a.main { width:18rem; }

main header nav.drop.left { margin-right:2rem; }
main header nav.drop.left a.main { text-align:left; padding-left:1rem; }
main header nav.drop.left div.drop a { text-align:left; padding-left:1rem; }
main header nav.drop.left:before { text-align:left; padding-left:1rem; }

main header nav.drop.content a.main { width:24rem; }
main header nav.drop.type a.main { width:24rem; }
main header nav.drop.status a.main { width:20rem; }
main header nav.drop.costreg a.main { width:14rem; }
main header nav.drop.cost a.main { width:12rem; }
main header nav.drop.vendor a.main { width:30rem; }
main header nav.drop.producer a.main { width:30rem; }
main header nav.drop.type a.main { width:24rem; }
main header nav.drop.family a.main { width:18rem; }

main header nav.drop.lead a.main { width:20rem; }
main header nav.drop.supplier a.main { width:20rem; }

main header nav.drop.week a.main { width:10rem; }
main header nav.drop.crafts a.main { width:18rem; }
main header nav.drop.payment_status a.main { width:24rem; }
main header nav.drop.lead_status a.main { width:20rem; }
main header nav.drop.marked a.main { width:14rem; }
main header nav.drop.crafts a.main { width:14rem; }
main header nav.drop.notes a.main { width:8rem; }

main header nav.drop.saved a.main { width:8rem; }

main header section.brand { position:relative; }
main header section.brand .buttons { display:inline-block; position:relative; top:-1.4rem; right:1rem; }

main header section.brand .buttons nav.subnav { margin-right:30px; top:-1rem; }



/*
	Multi-select
*/
main header section.filters nav.drop span.multiselect_badge { display:block; position:absolute; top:-2rem; right:0rem; font-family:sans-serif; font-size:1.1rem; text-align:center; width:1.5rem; height:1.5rem; padding-bottom:-1rem; line-height:1.6rem; background:#4CB694; color:#000; border-radius:50%; }
main header section.filters nav.drop span.multiselect_badge:empty { display:none; }

main header section.filters nav.drop div.drop div.option { position:relative; }
main header section.filters nav.drop div.drop div.option input[type=checkbox] { display:none; position:absolute; left:0.5rem; top:5px; accent-color:var(--color-brand); }
main header section.filters.multiselect nav.drop div.drop div.option input[type=checkbox] { display:inline; }
main header section.filters.multiselect nav.drop div.drop div.option input[type=checkbox]:checked + a { color:var(--color-brand); }
main header section.filters.multiselect nav.drop div.drop div.option a { padding-left:3rem; pointer-events:none; }

main header section.filters a.multiselect-switch { transform:scale(0.8); display:inline-block; color:var(--color-brand); border:1px solid var(--color-brand); border-radius:0.3rem; padding:0.6rem 1rem 0.8rem 1rem; margin:0; background:transparent; cursor:pointer; opacity:0.6; transition:all 0.1s; }
main header section.filters a.multiselect-switch:hover { opacity:1; }
main header section.filters a.multiselect-switch.active { opacity:1; background:var(--color-brand); color:#000; }

main header section.filters .btn { color:#000; border-radius:2px; padding:0.4rem 1.5rem !important; position:relative; top:-1rem;}
main header section.filters .btn:hover { opacity:0.85; }



/*
main header nav.base { top:-1.1rem; }
*/

table { width:100%; display:table !important; table-layout:fixed !important; border-spacing:0; border-collapse:separate; }
table tr.head th { color:#888; text-align:left; font-size:1.35rem; text-transform:uppercase; letter-spacing:0.2rem; font-weight:600; padding-bottom:1rem; border-bottom:1px solid var(--table-divider-color); }
table tr:not(.head) th.orders:not(.percent), table tr:not(.head) td.orders:not(.percent) a { color:#eee !important; }
table tr:not(.head) th.reorders:not(.percent), table tr:not(.head) td.reorders:not(.percent) a { color:#eee !important; }

table tr:not(.head) th.income:not(.percent), table tr:not(.head) td.income:not(.percent),
table tr:not(.head) th.income:not(.percent), table tr:not(.head) td.income:not(.percent) a { color:var(--color-brand-toned) !important; }
table tr:not(.head) th.discount:not(.percent), table tr:not(.head) td.discount:not(.percent),
table tr:not(.head) th.discount:not(.percent), table tr:not(.head) td.discount:not(.percent) a { color:var(--color-red-toned) !important; }
table tr:not(.head) th.credit:not(.percent), table tr:not(.head) td.credit:not(.percent),
table tr:not(.head) th.credit:not(.percent), table tr:not(.head) td.credit:not(.percent) a { color:var(--color-red-toned) !important; }

table tr td.percent { text-align:right; color:#666 !important; }
table tr.data:not(:last-of-type) td { border-bottom:1px solid #2C2C2C; }
table tr:not(.head) td { padding:1.3rem 0; font-size:2rem; }
table tr:not(.head):not(.tot):hover td { background-color:var(--table-hover-color); }

table tr.head th.right, table tr td.right { text-align:right; }
table tr.nopad td { padding-top:0; }
table tr.empty td { color:#666; }

/* custom colored */
table tr.tot td { color:var(--color-gold); }
table tr td.sum, table tr td.sum a { color:var(--color-gold) !important; }

table tr th:first-of-type,
table tr td:first-of-type { padding-left:0.5rem; }
table tr th.last,
table tr td.last { padding-right:0.5rem; }

table tr td span.not-percent { display:inline; }
table tr td span.percent { display:none; }


/* tables with scrollable tbody */
table.scrollable thead { display:block; }
table.scrollable thead, table.scrollable tbody, table.scrollable tfoot { display:block; }
table.scrollable thead tr, table.scrollable tbody tr, table.scrollable tfoot tr { width:99.8%; display:table; table-layout:fixed; }
table.scrollable tbody { height:calc(100vh - var(--header-height-table)); overflow-x:scroll; width:calc(100% + 12px); }
table.scrollable tbody.notverflown tr td { padding-right:12px; }
table.scrollable tfoot { background-color:var(--color-background); /*position:absolute; bottom:0; padding-bottom:2rem;margin-right:3rem; */ }
	/* Projects */
table.scrollable.project-edit tbody { height:60vh; }



/*
	Sortable header
*/
.sortable th { cursor:pointer; user-select:none; position:relative; }
.sortable th:hover { color:#fff; }
.sortable th.dir-d,
.sortable th.dir-u { color:var(--color-brand); text-decoration:none; position:relative; }
.sortable th.dir-d::after,
.sortable th.dir-u::after { color:inherit; margin:0; padding:0; position:absolute; transform:scale(1.3); top:1px; }
.sortable th.dir-d::after { content:'\025BE'; }
.sortable th.dir-u::after { content:'\025B4'; }
.sortable th.no-sort { pointer-events:none; }


/*	table row 3-dot nav */
table tr .nav { width:7rem; position:relative; }
table tr .nav > a { opacity:0.5; cursor:pointer; padding-left:2rem; display:inline-block; }
table tr .nav > a.open { opacity:1; }
table tr .nav nav.context { z-index:9999; padding:1rem 0 0 0; border-radius:5px; position:absolute; height:30rem; width:25rem; top:4rem; right:0; background:#222; }
table tr .nav nav.context a { font-size:13px; color:#ccc; padding:1rem 2rem; margin-bottom:0.3rem; display:block; text-align:right; }
table tr .nav nav.context a:after { float:right; margin-left:2rem; }
table tr .nav nav.context a:hover { color:#fff; }
table tr .nav nav.context div.divider { border-bottom:1px dashed #333; margin:1rem; }



/* Sales - to show data based on cookie value */
table span.not-percent { display:inline; }
table span.percent { display:none; }
table.show_percent span.not-percent { display:none; }
table.show_percent span.percent { display:inline; }
/* fix for utf8icon pushing down 1px */
table.gross.show_percent { margin-top:-1px; }
table.gross.show_percent tr th span.percent { position:relative; top:1px; }

table.show_percent .not-percent { display:none !important; }
table.show_percent .is-percent { display:table-cell !important; }
table.show_other .not-percent { display:table-cell !important; }
table.show_other .is-percent { display:none !important; }


/*
    Hardcoded column widths
*/
.projects table tr .agent { width:auto; }
.projects table tr .project { width:auto; }
.projects table tr .orders { width:5.5%; }
.projects table tr .reorders { width:5.5%; }
.projects table tr .others { width:5.5%; }
.projects table tr .totorders { width:5%; }
.projects table tr .total_sqm { width:5%; }
.projects table tr .material { width:11%; }
.projects table tr .labour { width:8.5%; }
.projects table tr .other { width:8.5%; }
.projects table tr .discount { width:8.5%; }
.projects table tr .costs { width:8.5%; }
.projects table tr .total { width:8.5%; }

table.project-edit tr .checkbox { width:40px; }
table.project-edit tr .agent { width:auto; }
table.project-edit tr .ordernr { width:115px; }
table.project-edit tr .lead { width:auto; padding-right:2rem; }
table.project-edit tr .description { width:auto; padding-right:2rem; }
table.project-edit tr .sqm { width:6%; }
table.project-edit tr .pos { width:6%; }
table.project-edit tr .revenue { width:9%; }


.sales table tr .agent { width:auto; }
.sales table tr .orders { width:6%; }
.sales table tr .reorders { width:6%; }
.sales table tr .others { width:6%; }
.sales table tr .totorders { width:5.5%; }
.sales table tr .material { width:14%; }
.sales table tr .labour { width:8.5%; }
.sales table tr .other { width:8.5%; }
.sales table tr .discount { width:8.5%; }
.sales table tr .credit { width:8.5%; }
.sales table tr .total { width:8.5%; }

.orders table tr .agent { width:250px; padding-right:2rem; }
.orders table tr .ordernr { width:115px; }
.orders table tr .lead { width:auto; padding-right:2rem; }
.orders table tr .description { width:auto; padding-right:2rem; }
.orders table tr .sqm { width:8%; }
.orders table tr .pos { width:6%; }
.orders table tr .revenue { width:9%; }
.orders table tr .profit { width:9%; }

.profits table tr .agent { width:250px; padding-right:2rem; }
.profits table tr .ordernr { width:115px; }
.profits table tr .lead { width:auto; padding-right:2rem; }
.profits table tr .description { width:auto; padding-right:2rem; }
.profits table tr .income { width:9%; }
.profits table tr .discount { width:9%; }
.profits table tr .credit { width:9%; }
.profits table tr .total { width:9%; }
.profits table tr .cost { width:9%; }
.profits table tr .profit { width:9%; }
/*
.profits table tr > .percent { width:8rem; }
*/


.vendors table tr .vendor { width:auto; padding-right:2rem; }
.vendors table tr .types { width:350px; }
.vendors table tr .leads { width:10%; }
.vendors table tr .invoices { width:10%; }
.vendors table tr .amount { width:12%; }

.vendor_leads table tr .vendor { width:250px; padding-right:2rem; }
.vendor_leads table tr .ordernr { width:115px; }
.vendor_leads table tr .lead { width:15%; padding-right:2rem; }
.vendor_leads table tr .description { width:auto; padding-right:2rem; }
.vendor_leads table tr .cost { width:9%; }
.vendor_leads table tr .income { width:9%; }
.vendor_leads table tr .costs { width:9%; }
.vendor_leads table tr .profit { width:9%; }


.costs table tr .vendor { width:250px; padding-right:2rem; }
.costs table tr .ordernr { width:115px; }
.costs table tr .attachment { width:75px; }
.costs table tr .lead { width:15%;}
.costs table tr .description { width:auto; padding-right:2rem; }
.costs table tr .comment { width:auto; padding-right:2rem; }
.costs table tr .type { width:100px; }
.costs table tr .amount { width:10%; }



.volumes table tr .month { width:auto; padding-right:2rem; }
.volumes table tr .plane { width:11%; }
.volumes table tr .frame { width:11%; }
.volumes table tr .grip { width:11%; }
.volumes table tr .decor { width:11%; }
.volumes table tr .coverpanel { width:11%; }
.volumes table tr .total_sqm { width:5% !important; }
.volumes table tr .specialproduct { width:11%; }
.volumes table tr .crownlist { width:11%; }
/*body.volumes main header .left { margin-top:-1.1rem; }*/

.volumes table tr .type { width:25%; padding-right:2rem; }
.volumes table tr .category { width:25%; }
.volumes table tr .product { width:25%; }
.volumes table tr .pos { width:12.5%; }
.volumes table tr .sqm { width:12.5%; }


.supplierorders table tr .agent { width:12%; padding-right:2rem; }
.supplierorders table tr .ordernr { width:6%; }
.supplierorders table tr .supplier { width:12%; }
.supplierorders table tr .lead { width:auto; }
.supplierorders table tr .quantity { width:4%; }
.supplierorders table tr .status { width:7%; }
.supplierorders table tr .update { width:10%; }

.admin table tr .id { width:5rem; }


.weeklyorders table tr.divider td h2 span { font-size:2.8rem; margin-left:2rem; }
.weeklyorders table tr .ordernr { width:10rem; }
.weeklyorders table tr .lead { width:30rem; }
.weeklyorders table tr .description { width:auto; }
.weeklyorders table tr .products { width:auto; position:relative; }
.weeklyorders table tr .crafts { width:22rem; position:relative; }
.weeklyorders table tr .price { width:14rem; }
.weeklyorders table tr .leadstatus { width:24rem; }
.weeklyorders table tr .paymentstatus { width:24rem; }
.weeklyorders table tr .notes { width:8rem; }
.weeklyorders table tr .keys { width:8rem; }

.weeklyorders table tr .crafts a { display:inline-block; height:1.8rem; color:#fff; text-align:center; margin-right:1rem; }
.weeklyorders table tr .crafts a:hover { color:#ace; }
.weeklyorders table tr .crafts a:active { color:#8BBDD6; }
.weeklyorders table tr[data-analyzed] .crafts:after, .weeklyorders table tr[data-planned][data-invoiced] .nav:after { content:""; top:2.4rem; display:inline-block; position:absolute; width:0.5rem; height:0.5rem; background-color:transparent; border-radius:50%; }
.weeklyorders table tr[data-analyzed="no"] .crafts:after { left:-1.5rem; background-color:red; }
.weeklyorders table tr[data-analyzed="yes"][data-planned="no"] .nav:after { left:3.5rem; background:#38A7C7; }
.weeklyorders table tr[data-planned="yes"][data-worked="no"] .nav:after { left:3.5rem; background-color:orange; }
.weeklyorders table tr[data-worked="yes"][data-invoiced="no"] .nav:after { left:3.5rem; background-color:red; }

.weeklyorders table tr[data-worked="yes"][data-invoiced="yes"] .nav:after { display:none; left:3.5rem; background-color:green; }

.weeklyorders table tr[data-invoiced="yes"] td { color:#666; }
.weeklyorders table tr[data-invoiced="yes"] td > a:not(.threedot) { color:#666 !important; }
.weeklyorders table tr[data-invoiced="yes"] td.crafts a { pointer-events:none; }
.weeklyorders table tr[data-invoiced="yes"] td.crafts a:before { color:#666 !important; }


.weeklyorders table tr[data-planned="yes"] .crafts:after,
.weeklyorders table tr[data-planned="no"][data-worked="yes"] .crafts:after,
.weeklyorders table tr[data-planned="no"][data-worked="yes"] .crafts:after { display:none; }

.weeklyorders table tr[data-invoiced="yes"] .crafts:after { display:none; }
.crafts .planned_yes:before { color:var(--color-brand) !important; } /* this selector to is works in the crafts dialog too */

.weeklyorders table tr[data-analyzed="yes"] .mark-analyzed { opacity:0.5; }
.weeklyorders table tr[data-planned="yes"] .mark-planned { opacity:0.5; }
.weeklyorders table tr[data-worked="yes"] .mark-worked { opacity:0.5; }
.weeklyorders table tr[data-invoiced="yes"] .mark-invoiced { opacity:0.5; }

.weeklyorders table tr[data-analyzed="yes"] .nav nav.context a.mark-analyzed:after,
.weeklyorders table tr[data-planned="yes"] .nav nav.context a.mark-planned:after,
.weeklyorders table tr[data-worked="yes"] .nav nav.context a.mark-worked:after,
.weeklyorders table tr[data-invoiced="yes"] .nav nav.context a.mark-invoiced:after { color:var(--color-brand) !important; }


.weeklyordernotes table tr .ordernr { width:10rem; }
.weeklyordernotes table tr .lead { width:30rem; }
.weeklyordernotes table tr .author { width:25rem; }
.weeklyordernotes table tr .created_at { width:26rem; }
.weeklyordernotes table tr .text { width:auto; }
.weeklyordernotes table tr .text a:after { right:-2rem; }
.weeklyordernotes table tr .last { width:5rem; }


.weeklyorderkeychains table tr .transfer_date { width:26rem; }
.weeklyorderkeychains table tr .holder { width:32rem; }
.weeklyorderkeychains table tr .reason { width:auto; }
.weeklyorderkeychains table tr .admin { width:8rem; }
.weeklyorderkeychains table tr .last { width:5rem; }





/* Dialog styles */

.dialog-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); display:flex; justify-content:center; align-items:center; }
.dialog-box { background-color:#333; padding:2rem; border-radius:5px; width:36rem; max-width:100%; }
.dialog-title { font-size:1.8rem; margin-bottom:1rem; }
.loading-spinner { text-align:center; }
.dialog-content { text-align:left; margin-top:1rem; }
.dialog-content h2 { margin:0 0 1rem 0; padding:0; }
.dialog-content p { margin:0 0 1rem 0; }
.dialog-content .crafts .list { margin-top:2rem; }
.dialog-content .crafts .list label { display:block; opacity:0.7; font-size:1.6rem; padding:1rem 0.5rem; cursor:pointer; position:relative; }
.dialog-content .crafts .list label:before { font-size:2rem; position:relative; top:-3px; margin-right:2rem; }
.dialog-content .crafts .list label:hover { opacity:1; }
.dialog-content .crafts .list label p:after { display:block; float:right; cursor:pointer; }
.dialog-content .crafts .list label p.icon-toggle_on:after { color:var(--color-brand) !important; } /* this selector to is works in the crafts dialog too */
.dialog-content .products { margin:2rem 0; }
.dialog-content .buttons button { float:right; border:none; border-radius:5px; margin-top:2rem; padding:1rem 2rem; cursor:pointer; background:#222; color:#999; margin-left:2rem; }
.dialog-content .buttons button:hover { background:#181818; }



/*
	Notes
*/
.full { width:100%; display:flex; justify-content:space-between; }
.full .half { width:calc(50% - 6rem); }
.full h1 { padding-top:0; margin-top:0; }
.full h2 { padding-top:0; margin-top:0; }

body.ordernotes header { display:none; }
.order_notes { display:flex; margin-top:6rem; justify-content:space-between; }
.order_notes .notes-container { height:calc(100vh - 20rem); overflow-x:auto; }
.order_notes .note { margin-bottom:6rem; }
.order_notes .note .note-content { position:relative; border-radius:0.5rem; padding:2rem 2rem; background:#222; color:ccc; font-size:1.6rem; line-height:1.5 }
.order_notes .note .note-content::after { content:""; position:absolute; bottom:-7px; right:10px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid #222; }
.order_notes .note .note-details { text-align:right; position:relative; font-size:1.6rem; }
.order_notes .note .note-details .note-delete { margin-right:3rem; font-size:1.4rem; }
.order_notes .note .note-details .note-save { margin-right:3rem; font-size:1.4rem; }
.order_notes .note .note-details .note-author { margin-left:3rem; }
.order_notes .note .note-details .note-author img { border-radius:50%; position:relative; top:1.5rem; }
.order_notes .note .note-details .note-time span:before { content:"-"; display:inline-block; padding-right:1rem; opacity:0.6; }
.order_notes .note .note-details .note-time span { margin-left:1rem; }
.order_notes .note_form textarea { background:#777; border:none; border-radius:0.5rem; padding:1rem; width:100%; height:30rem; display:block; font-size:2rem; clear:both; outline:none; }
.order_notes .note_form:hover textarea { background:#ddd; }
.order_notes .note_form button { cursor:pointer; opacity:0.8; border:none; float:right; margin-top:1rem; border-radius:0.5rem; background:var(--color-brand); color:#fff; font-size:1.6rem; padding:1.5rem 3rem; }
.order_notes .note_form button:hover { opacity:1; background:var(--color-brand); }
.order_notes .note_form button[disabled] { background:#444; }


.totorders, .totorders a { color:var(--color-text-toned) !important;  }
.total_sqm, .total_sqm a { color:var(--color-text-toned) !important;  }


/*
	Keychains
*/

.orderkeychains table tr .nav nav.context { z-index:9999; padding:1rem 0 1rem 0; border-radius:5px; height:auto; width:25rem; top:4rem; right:0; background:#222; }
.orderkeychains table tr td img.avatar { border-radius:50%; }
.orderkeychains .dialog label { width:100%; display:block; margin:2rem 0 0 0; }
.orderkeychains .dialog label p { padding:0; margin:0 0 0.5rem 0; }
.orderkeychains .dialog label input { width:100%; padding:0.5rem; font-size:1.3rem; }
.orderkeychains .button { margin:-3rem 0 2rem 0; display:inline-block; padding:0.5rem 2rem; text-align:center; border:1px solid #eee; border-radius:5px; }



table tr td.bad { color:orange !important; }
table tr td.warning { color:red !important; }

table tr td.reorder_cost { color:var(--color-red-toned) !important; }

table tr td .crop { display:block !important; white-space:nowrap; width:calc(100% - 3rem) !important; overflow:hidden; text-overflow:ellipsis; }
table tr td.right .crop { text-align:right; float:right; }

table tfoot tr.tot td { font-weight:500; border-top:1px solid var(--table-divider-color); }

/* auto-comma for lists in tables */
.comma_after:not(:last-of-type):after { content:","; margin-right:0.3rem; }
.comma_after:not(:last-of-type):hover:after { color:#fff !important; }

table tr .checkbox { width:40px; }

nav.actions { position:relative; top:0; margin-left:0.5rem; display:flex; }
nav.actions button { font-family:"Inter", sans-serif; color:var(--color-brand-old); border:1px solid var(--color-brand-old); border-radius:0; padding:0.3rem 1rem; margin:0; background:transparent; cursor:pointer; }
nav.actions button:first-of-type { border-width:1px 1px 1px 1px; border-radius:0.3rem 0 0 0.3rem; }
nav.actions button:last-of-type { border-width:1px 1px 1px 0; border-radius:0 0.3rem 0.3rem 0;  }
nav.actions button.active { background:var(--color-brand-old); color:#fff; }

nav.toggle { position:relative; top:0; display:flex; float:left; margin-right:2rem; }
nav.toggle button { font-family:"Inter", sans-serif; color:var(--color-brand); border:1px solid var(--color-brand); border-radius:0.3rem; padding:0.3rem 1rem; margin:0; background:transparent; cursor:pointer; opacity:0.6; transition:all 0.1s; }
nav.toggle button:hover { opacity:1; }
nav.toggle button.active { opacity:1; background:var(--color-brand); color:#000; }



section#charts { display:block; margin-top:0; position:relative; width:100%; height:76vh; }

/* tabs */
nav.tabs { padding-bottom:0; border-bottom:1px solid var(--tabs-border-color); }
nav.tabs > * { background:none; display:inline-block; border:none; color:var(--tabs-button-color); cursor:pointer; padding:0 1rem 1rem 1rem; position:relative; top:1px; }
nav.tabs > *.active { color:var(--color-brand); border-bottom:1px solid var(--color-brand); }
div.chart { display:none !important; width:100%; height:100%; position:relative; margin-top:4rem; }
div.chart.active { display:block !important; }

footer { margin-top:0; color:#666 !important; }


/*
	PROJECTS
*/
form.project { margin:3rem 0; }
form.project * { width:100%; }
form.project label { width:30rem; display:block; margin:0 0 2rem 0; }
form.project label span { display:block; text-transform:uppercase; margin:0 0 0.5rem 0; }
form.project label select { padding:5px; }
form.project label input[type=text] { padding:5px; }
form.project label button { padding:5px; width:20rem; }
form.project table { margin-bottom:2rem; }


/*
	LOGIN
*/
body.login { display:flex; flex-direction:row; justify-content:center; align-items:center; }
div.login { display:flex; flex-direction:column; width:24rem; }
div.login h1 { display:block; text-align:center !important; font-weight:300; margin-bottom:2rem; }
div.login h1:before { margin-right:1rem; color:var(--color-brand); float:none; }
div.login p { margin-top:1rem; font-size:1.4rem; }
div.login form { display:flex; flex-direction:column; }
div.login form * { border:none; border-radius:3px; }
div.login form label { display:block; margin-bottom:1rem; }
div.login form label * { width:100%; padding:1.2rem 0.8rem; outline:none; font-family:"Raleway", sans-serif; }
div.login form label span { display:block; text-transform:uppercase; font-size:1.1rem; margin-bottom:-0.5rem; }
div.login form .button { display:block; float:right; width:12rem; margin:2rem auto; padding:1.2rem 3rem; cursor:pointer; text-align:center; border:1px dashed var(--color-brand-dark); }
div.login form .button:hover { background-color:var(--color-brand); color:#fff; border:1px solid var(--color-brand); }



/*
	NOTES
*/
/*	TD Badges */
td[data-unread], td[data-saved] { position:relative; padding-left:1.5em; }
td[data-unread]:before, td[data-saved]:after { z-index:888; position:absolute; display:inline-block; background-color:#ff6347; color:white; font-size:0.75rem; font-weight:bold; top:1.9rem; border-radius:50%; width:1.8em; height:1.8em; line-height:1.7em; text-align:center; visibility:hidden; }
td[data-unread]:before { content:attr(data-unread); background-color:#D04A33; right:6rem; }
td[data-saved]:after { content:attr(data-saved); background-color:#6F6B35; right:3rem; }
td[data-unread]:not([data-unread="0"]):before { visibility:visible; }
td[data-saved]:not([data-saved="0"]):after { visibility:visible; }
td[data-unread]:not([data-unread="0"])[data-saved="0"]:before { right:3rem; }

[data-badge] { position:relative; }
[data-badge]:after { visibility:hidden; content:attr(data-badge); background-color:#6F6B35; z-index:888; position:absolute; display:inline-block; color:#fff; font-size:1rem; font-weight:bold; top:5px; right:-1rem; border-radius:50%; width:1.8em; height:1.8em; line-height:1.7em; text-align:center; }
[data-badge]:not([data-badge="0"]):after { visibility:visible; }


/* varför jävlas det? */
@media only screen and (max-width:1920px) and (max-height:1080px)
{
/*
	aside { background-color:var(--aside-background-color); }
	table tr:not(.head):not(.tot):hover td { background-color:var(--table-hover-color); }
*/
}




/* MÄKBUK 13" */
@media only screen and (max-width:1680px)
{
	html { font-size:50%; }

	.order table tr .description span { width:40rem; height:19px; }
	.summary table tr .percent { width:9rem !important; }
	.summary table tr .material { width:9%; }
	.summary table tr .labour { width:9%; }
	.summary table tr .other { width:9%; }
	.summary table tr .discount { width:9%; }
	.summary table tr .credit { width:9%; }
	.summary table tr .total { width:9%; }

	.orders table tr .agent { width:200px; padding-right:2rem; }
	.orders table tr .ordernr { width:95px; }

	.profits table tr .agent { width:200px; padding-right:2rem; }
	.profits table tr .ordernr { width:95px; }
	.vendors table tr .types { width:250px; }

	.orders table tr .percent { width:9rem !important; }
	.profits table tr .percent { width:9rem !important; }
}


@font-face {
	font-weight:normal;
	font-style:normal;
	font-family:'AkronAnalytics';
	src:url('../fonts_v1.19/AkronAnalytics.woff2') format('woff2');
}
[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after { font-family:"AkronAnalytics"; font-style:normal; font-weight:normal; speak:none; display:inline-block; float:left; position:relative; text-decoration:none; top:1px; text-align:center; font-variant:normal; text-transform:none; font-size:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.icon-profits:before { content: "\e900"; }
.icon-logout:before { content: "\e901"; }
.icon-orders:before { content: "\e902"; }
.icon-sales:before { content: "\e903"; }
.icon-tv:before { content: "\e904"; }
.icon-logomark:before { content: "\e905"; transform:scaleX(-1); }
.icon-vendors:before { content: "\e906"; }
.icon-back:before { content: "\e907"; transform:rotate(-90deg); }
.icon-attachment:before { content: "\e908"; }
.icon-projects:before { content: "\e909"; }
.icon-chart:before { content: "\e90a"; }
.icon-pie-chart:before { content: "\e90b"; }
.icon-table:before { content: "\e90c"; }
.icon-multiselect:before { content: "\e90d"; transform:rotate(-90deg); }
.icon-agents:before { content: "\e90e"; }
.icon-salesboard:before { content: "\e90f"; transform:scale(1.3); }
.icon-volumes:before { content: "\e910"; }
.icon-m:before { content: "\e911"; transform:scale(0.75); }
.icon-w:before { content: "\e912"; transform:scale(0.75); }
.icon-admin:before { content:"\e913"; }
.icon-threedot:after { content:"\e918"; }
.icon-craft_labour:before { content:"\e914"; }
.icon-craft_painter:before { content:"\e915";}
.icon-craft_plumber:before { content:"\e916";}
.icon-craft_tilier:before { content:"\e917";}
.icon-craft_carpenter:before { content:"\e919";}
.icon-craft_delivery:before { content:"\e91a"; }
.icon-craft_electrician:before { content:"\e91b"; }
.icon-toggle_on:after { content:"\e91c"; }
.icon-toggle_off:after { content:"\e91d"; }