/* style.css */



/* root */

:root {
	
	/* colors */
	--blue: #1e90ff;
	--white: #ffffff;

	/* texts */
	--standard-input-height: 2.25rem;
}



/* layouts */

    /* boxes */

@media only screen and (max-width: 64rem) {
    :root {
	    --standard-app-width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    :root {
	    --standard-app-width: 1024px; /* 1024px; */
		--standard-app-height: 100vh; 
    }
}



/* typefaces */

html {
  font-size: 16px; /* Sets the base font size to 16px */
}


/* fixes */
ul.ui-sortable { position: relative; } /* must explicitly define, otherwise the sortable item could randomly jump elsewhere on the page during the sortable drag */
/* ul.ui-sortable-placeholder { height: var(--standard-input-height) !important; }; *//* this doesn't work, because an inline style is happening somewhere */


/* defaults */
.page { display: none; }


/* tags */
body {

	/* basis */
	box-sizing: boreder-box;

	/* alignment */
	margin: auto;
	text-align: center;

	/* background */
    background-image: url('/media/images/backgrounds/bg_blueprint.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

#wrap {

	/* background */
	background-color: white;

	/* size */
	width: var(--standard-app-width);
	height: var(--standard-app-height);
	overflow-x: hidden;

	/* alignment */
	margin: auto;
}

header {

}

main {

	/* background */
	background-color: white;

	/* size */
	width: var(--standard-app-width);

	/* alignment */
	margin: auto;
	padding: 1em;
	box-sizing: border-box;
}

footer {
/*
	position: fixed;
	bottom: 0;
*/
}

ul {
}

li {
}

fieldset {
	text-align: left;
}

table {
	text-align: left;
}

tr {
	background-color: inherit;
	color: inherit;
}

hr {
	margin-top: 1em;
	margin-bottom: 1em;
}

section {
	/*min-height: 300px;*/
}

strong {
}

button {
	margin: 0 0.25em 0 0.25em;
}


/* class */

.left {
	float: left;
	text-align: left;
}

.right {
	float: right;
	text-align: right;
}

.ppu, .price, .subtotal, .total {
	text-align: right;
}

.quantity {
	text-align: center;
	width: 3em;
}


/* id */

#quotes {
    background-color: white;
}

#quote_mh {
	background-color: lightsteelblue;
}

#quote_gc {
	background-color: lightgrey;
}



/* quote page template */
form {}
fieldset { 
	display: flex; 
	flex-direction: column; 
	gap: 1em;

	margin-bottom: 2em; 
	text-align: right;
}


/* tag[attr="val"] */
	input[type="text"] { height: var(--standard-input-height); display: inline; margin: 0.2em; }
		.field_group	{ width: 20%; }
		.field_item 	{ width: 44%; }
		.field_qnty 	{ width: 5%; }
		.field_unit 	{ width: 5%; }
		.field_price 	{ width: 10%; text-align: right; }
		.field_subtotal	{ width: 20%; text-align: right; }

		.field_total	{ text-align: right; }

		.field_base_item	{ width: 40%; }
		.field_base_qnty,
		.field_base_price,
		.field_option_qnty,
		.field_option_price	{ width: 10%; }

		.field_calc { width: 18%; }

/* tag.class */
p.note {
	color: gray;
	font-size: 0.8em;
}

section.controls {
	background-color: lightgray;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 1em;
	margin: 1em;
}


/* all lines, line and line input styles */
ul.lines { list-style: none; display: flex; flex-direction: column; gap: 0.25em; align-items: end; }
	li.line { display: flex; flex-wrap: wrap; height: 100%; }
		li.line input { height: var(--standard-input-height); }

div.break_row {
	width: 100%; flex-basis: 100%; height: 0;
}
div.tab_row {
	width: 3%; height: 0;
}

div.toggle_group { 
	display: none; 
	width: 100%; 
	text-align: left;
}

li.subtotal.line { display: block !important; }

/* only line items */
ul.items li {
	height: 100%;
	width: 100%;
	margin: 0;
}

ul.items, li.item {
	margin: 0;
	padding: 0;
}


/* jquery-ui menu */
.ui-menu { text-align: left !important; }

legend { width: 100%; }

input.field_package_label { width: 70%; font-size: 1.25em; }

fieldset.package {
	background-color: #EEEEEE;
	margin-bottom: 1em;
}

fieldset.profile, fieldset.totals {
	display: flex;
	align-content: center;
	justify-content: right
}

/* progress bar */
#Progress_Status {
  width: 50%;
  background-color: lightgray;
  text-align: center;
}
#myprogressBar {
  width: 1%;
  height: 35px;
  background-color: lightblue;
  text-align: center;
  line-height: 32px;
  color: black;
}

/* handles, for items */
.handle {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: sans-serif;
	font-size: 0.75em;
	color: lightgray;
	background-color: darkgray; 
	width: 3em; 
	text-align: center;
	padding: 0.25em;
	border-radius: 3px;
}

/* no-select text */
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* table */
table {
	font-size: 0.8em;
}
tr {
	margin: 0.25em;
}
td {
	padding: 0.5em;
}

/* popup */
#popup {
	display: none;
	position: fixed;
	z-index: 99999;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	background-color: lightgray;
	color: black;
	border: 0.5em groove darkgray;
	border-radius: 15px;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5)  ; 
	-webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5)  ; 
}
	#popup_x {
		position: absolute;
		top: 1em;
		right: 1em;
		cursor: crosshair;
	}


/* dialog */
#dialog, .dialog {
    display: none;
    /*visibility: hidden;*/
    position: fixed;
    z-index: 9999999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    /* */
    text-align: center;
}
    #dialog > div {
        display: flex;
        align-items: center;
        justify-content: center;
        /* // */
        position: fixed;
        z-index: inherit;
        width: 100%;
        height: 100%;
        /* // */
        background-color: rgba(255,255,255,0.88);
        color: black;
        overflow: scroll;
    }



/* tabs */

.tabs, #quotes {
	margin: auto; 
	/*width: var(--standard-app-width);*/
}

.tabs {
	/* min-height: 500px; */
}

.tabs .tabs {
	width: 100%;
}

.ui-widget.ui-widget-content { 
	background: transparent;
}

.ui-widget-header { 
	border: navy;
	background: #1D3767; /* #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x */
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
	color: black; /* #1D3767; */
	text-decoration: none;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
	color: royalblue;
}


/* layout elements, forms, reports */
.form, .report {
	margin-bottom: 1em;
}


/* forms */
.tabs form fieldset ul {
	display: flex;
	flex-direction: column;
}
.tabs form fieldset li {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	list-style: none;
}

.tabs form fieldset li label {
	flex-grow: 0;
	min-width: 33%;
	text-align: left;
}
.tabs form fieldset li input {
	flex-grow: 1;
}


/* reports */
.report_table {
	width: 100%;
	margin-top: 2em;
}

#selected_td input[type="text"],
.selected_td input[type="text"] {
	background-color: white;
	width: 100%;
}

div.report {
	max-height: 300px;
	overflow-x: auto;
	overflow-y: auto;
}

/* logos */

#logo_header { 
    float: left;
    height: 50%; 
}

/* stickey headers / freeze headers on tables */

/* Style the header 
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}
*/

/* Page content
.content {
  padding: 16px;
}
*/


/* sticky styles */

html {
    /*transform: scale(1.0);*/ /* position: known bug: "fixed" breaks when "transform" is used, because a new coordinate system is drawn and it fixes that */
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
#sticky_header {
    top: 0 !important;
	position: fixed !important;
    left: 50%; transform: translate(-50%,0%) scale(1.0,1.0);
    z-index: 999999999;
    width: inherit; max-width: var(--standard-app-width); min-width: var(--standard-app-width);
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
}
	#sticky_header, #sticky_header_stub { 
		height: 17.5%; /* 100px; */
	}
        #sticky_header_stub {
            width: 100vw !important;
			height: 15vh !important;
            position: relative;
            background: transparent;
            display: flex; 
            justify-content: center;
        }

#sticky_footer {
    bottom: 0 !important;
	position: fixed !important;
    left: 50%; transform: translate(-50%,0%) scale(1.0,1.0);
    z-index: 999999999;
    width: inherit; max-width: var(--standard-app-width); min-width: var(--standard-app-width);
	background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
}
	#sticky_footer, #sticky_footer_stub { 
		height: 17.5%; /* 100px; */
	}
        #sticky_footer_stub {
			/*bottom: 0;*/
            width: 100vw !important;
			height: 15vh !important;
            /*position: fixed;*/
			position: relative;
            background: transparent;
            display: flex; 
            justify-content: center;
        }


/* visual effects */
.hidden { visibility: hidden !important; }
.shown { visibility: visible !important; }


/* unselectable text */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
}


/* selecing ranges via nth-child */
/* :nth-child(n+X)     /* all children from the Xth position onward */
/* :nth-child(-n+x)    /* all children up to the Xth position       */

div.report table thead { /* freeze top header fields via sticky */
	top: 0;
	position: sticky;
	z-index: 999999;
	opacity: 1.0;
	color: white;
	background-color: #1D3767;
	height: 2em;
	text-align: center;
	vertical-align: middle;
}

/*
div.report#report_items table th:nth-child(-n+5), 
div.report#report_items table td:nth-child(-n+5),
*/
div.report table th:nth-child(1),
div.report table td:nth-child(1) { /* example, field, id */
	/* freeze columns */
	left: 0;
	position: sticky;
	z-index: 99999;
	/* stylize */
	color: white;
    background-color: #1D3767;
}

	/* alternating background color */
div.report table tbody tr:nth-child(even) {
	background-color: #f2f2f2;
}

div.report table tbody tr:nth-child(odd) {
	background-color: white;
}

table.report thead th {
	padding: 1em 1em 1em 1em;
}

table.report tbody tr:hover {
	background-color: royalblue !important;
	color: white;
}

table.report tbody td {
	white-space: nowrap;
}

div.ui-menu-item-wrapper {
	background-color: white;
}

hr.dotted {
	border: 1px dashed black; 
	margin: 1em 0em 1em 0em;
}

/* hide elements */

#button_load_sample_data { display: block; }
div#report_quote { display: none; }

button[value="Remove Item"],
button[value="Remove Package"] {
	float: left;
}


/* flex */

a#control_mh,
a#control_gc { 
    color: black; 
    background-color: transparent;
    width: 50%;
    height: 2.5em;
}

a#control_mh:hover,
a#control_gc:hover { 
    color: white; 
    background-color: navy;
}


div.selectors {
	background-color: lightgray;
	padding: 1em;
	border-radius: 5px;
	text-align: center;
}


ul.units {
	column-count: 3;
}

ul.units li {
	width: 100%;
}

ul.units li input.field_unit_description {
	width: 50%;
}
ul.units li input.field_unit_unit {
	width: 20%;
}
ul.units li input.field_unit_quantity {
	width: 20%;
}


#progress_bar, #progress_bar_load_sample_data {
	background-color: lightgray;
	text-align: left;
	min-width: 13ch; /*11%;*/
	display: none;
}

#print {
	font-size: 8pt;
}

form[name="form_logout"] { display: inline; }


/* quote */
.quote {
    background-color: white;
    margin: 1em;
    border: 1px solid gray;
    border-radius: 0.5em;
    padding: 1em;
}

/* ui */

/*
ul.ui_list { 
	display: flex;
    flex-direction: column;
    gap: 1em;
	align-items: center;
	justify-content: center;	
	list-style-type: none; 
	padding: 0; 
}
	li.ui_list_item {
		display: flex;
		justify-content: center;
		align-items: center;
        user-select: none;
        width: 50%;
		height: 2em;
        border-radius: 0.25em;
        transition: 0.3s;
        background-color: white;
        filter: drop-shadow(0 0 0.5rem black);
	}
		li.ui_list_item:hover {
			background-color: var(--blue);
			color: var(--white);
		}
*/

ul.ui_list {
    list-style-type: square;
}

    li.ui_list_item {
        backround-color: transparent;
        line-height: 2em;
        margin: 0.5em 0 0.5em 0;
        padding-left: 1em;
        border: 1px dotted gray;
        border-radius: 3em;
    }
        li.ui_list_item::marker {
            /*content: '• label ';*/
            color: black !important;
        }

        li.ui_list_item::before {
            content: '';
        }

        li.ui_list_item::after {
            content: '';
        }

        li.ui_list_item:hover {
            background-color: var(--blue);
            color: white;
        }

            a.ui_list_item_anchor {
                text-decoration: none;
                color: inherit;
            }


/* library */

section#library li.item input[name="id"] { width: 5%; }
section#library li.item input[name="of"] { width: 10%; }
section#library li.item input[name="item"] { width: 25%; }
section#library li.item input[name="uom"] { width: 5%; }
section#library li.item input[name="qnty"] { width: 5%; }
section#library li.item input[name="base_price"] { width: 10%; }
section#library li.item input[name="calc"] { width: 5%; }
section#library li.item input[name="option_price"] { width: 10%; }


#library .items .item:hover { background-color: var(--blue); }
#library .items .item input[name="qnty"] { width: 10%; }


/* home */

ul.commands {
	display: flex;
    flex-direction: row;
    gap: 1em;
	align-items: center;
	justify-content: center;	
	list-style-type: none; 
	padding: 0;     
}
	ul.commands li {
		display: flex;
		justify-content: center;
		align-items: center;
        user-select: none;
        /* visual */
		width: 10rem;
		height: 10rem;
        border-radius: 0.25em;
        transition: 0.3s;
        background-color: white;
        filter: drop-shadow(0 0 0.5rem black);
        /* */
        word-spacing: 100vw; /* line break on each space between each word */
        font-size: 1.5em;
	}
	    ul.commands	li:hover {
			background-color: var(--blue);
			color: var(--white);
		}

#lists_home {
    text-align: left;
}

#list_contacts {
	text-align: center;
}

/*li.ui-sortable-placeholder,*/
.custom_class_for_placeholder {
	visibility: visbile !important;
	height: 3rem !important;
	border: 1px dashed gray;
	border-radius: 1em;
}

/* controls */
#controls_global {}
#controls_local * { display: none; } 
#controls_home, #controls_home *  { display: inline-block; }