/*********
* Top Level Styling
*********/
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Oswald:wght@400&display=swap');

*, html, body {
	color: #4C535C;
}
html, body {
	height: 100%;
}
body {
	display:flex;
	flex-direction:column;
	background: url("/img/white-horse.png") bottom right no-repeat, linear-gradient(white, #E2E2E2);
	background-attachment:fixed;
	font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	text-align:center;
	margin: 0.6rem 0;
}

h3, h4, h5, h6 {
	text-align:left;
}

p {
	font-family: 'Lato', sans-serif;
}

a {
	text-decoration: none;
}

.radio-inline, .checkbox-inline {
    padding: 0 0.5rem;
}

label {	font-size: 0.8rem; width:100%; position:relative;}
.form-check-input + label {width:auto;}
.bi {position:relative; color:white; text-shadow: 2px 2px 5px black;}
.bi:hover {color:white; text-shadow: 3px 3px 3px black;}
.bi:active {color:white; text-shadow: 0 0 3px black;}

.bi:hover + .tooltip {display:block;}
.tooltip {
	opacity:1;
	display:none;
	top: 3.5rem;
	width:100%;
	padding: 0.1rem 0.3rem;
	background-color: rgb(255,255,255);
	border: 1px solid #ced4da;
	border-top: 0px solid #fff;
	border-radius: 0 0 5px 5px;
	font-style: italic;
	font-size: 0.75rem;
	min-width: 95px;
}
.form-check-input + label .tooltip {top: 1rem;}

select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 10px;
}

table {
	caption-side: top;
}

#masthead {
	display:flex;
}

#mainwindow {
	display:flex;
	flex-direction:row-reverse;
	flex:1;
	height:75%;
}

.content-box {
	flex:1;
	padding: 1rem;
  overflow-y: auto;
  overflow-x: auto;
}

.no-sidebar {
	max-width: 960px;
	margin:0 auto;
}

#sidebar {
    flex: 0 0 275px;
	background:white;
}

#footer {
    background-color: lightgrey;
    text-align: right;
    padding: 0.4rem 2rem;
}

.horiz-menu {
	padding: 0 0 1rem 0;
}

.aligncenter {text-align: center;}
.alignleft {text-align: left;}
.alignright {text-align: right;}

@media only screen and (max-width: 600px) {
  #masthead, #mainwindow, .content-box, #sidebar, #footer {
    display:block;
  }
}

.content-box.horiz {
	overflow-x: auto;
}

.approved { color:#43b754; }
.denied { color:#ff6060; }

.thumb { height:70px; }
.newbooklist { margin-bottom: 1rem; clear:both; }

.table {
	width:unset;
	margin:0 auto;
}

hr.line {margin:1rem auto; width: 85%;}

/* when no entries are available on a list page */
tr.error {background-color: #ff000050 !important; text-align: center;}
/* for errors on tables */
td.error {background-color: #ff000050 !important;}
/* for warnings on tables */
tr.warning {background-color: #ffaa0075 !important;}
td.warning {background-color: #ffaa0075 !important;}

.debug {
	font-size: 0.8rem;
	font-family: monospace;
	line-height: 0.8rem;
	text-align: center;
	color: #aaa;
}


.custBox {
    border: 1px solid lightgrey;
    padding: 0.3rem 0.6rem;
    margin: 0.6rem 0;
    border-radius: 6px;
    background: #ffffff66;
}
.custBox:hover { border: 1px solid #43b754; }
.custBox .custOrg { font-weight:900; }
.custBox .custName { font-size: 0.8rem; }
.custBox .custAddress { font-size: 0.8rem; }
.custBox .custPhone { font-size: 0.8rem; }
.custBox .custEmail { font-size: 0.8rem; }

.normRow div:not(.row) {display:inline-block; font-size:1rem; border:1px solid #aaaaaa; border-left: 0; border-top: 0; padding: 0 0.3rem; vertical-align: top; margin:0 0 2px; background-color: #ffffffaa;}
.normRow div label {display:block; font-size:0.6rem; font-weight:bold; color:#aaaaaa;}
.normRow div span{display:block;min-height:1.5rem;}
.newline {width:100%;}

.row.layout {border:1px solid darkorchid;}
.row div.layout {border:1px solid burlywood;}

.dropdown-menu { max-height: 30em; overflow-x: hidden; }
.dropdown-menu a { color:#212529 !important; }
.dropdown-menu strong { padding-left: 0.5em; }

.table-sm { font-size: 0.8rem; }
.submitComments {	display: flex; padding-bottom:0.6rem;}
.submitComments input { flex-grow: 1; border-radius: 5px 0 0 5px; }
.submitComments button { padding:0 6px 0 0; border-radius: 0 5px 5px 0; }

/*********
* Gridly Styling
*********/
.grid-title {
	margin-top:0;
	border-bottom: 1px solid #bbbbbb;
}

#dashboard-grid {
		display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    grid-gap: 1rem;
	}

.brick {
	padding: 0.6rem;
	background-color: #00000010;
	overflow-y: auto;
}

.brick.wide {
	grid-column: span 2;
}
.brick.tall {
	grid-row: span 2;
}
.brick.large {
	grid-column: span 2;
	grid-row: span 2;
}

#config-gridly {
	position:fixed;
	right: 1.5rem;
	bottom: 2.75rem;
}
#config-gridly-menu {
	position:fixed;
	right: 1.5rem;
	bottom: 4.5rem;
	background-color: #fff;
	border-radius:6px;
	padding: 1rem;
}
#config-grid-list {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#config-grid-list input {
	margin-right: 5px;
}

/*********
* Top Bar Styling
*********/

ul#primary-menu {
	list-style: none;
	margin: 0 0 0 2rem;
	padding: 0;
}

li.menu-item {
    display: inline;
}

nav#site-navigation {
    background: #4C535C;
    width: 100%;
}

.menu-item a {
    padding: 1rem;
    font-weight: bold;
    display: inline-block;
		text-transform: uppercase;
		color:white !important;
}

a.disabled {
    color: black !important;
}

.menu-item a:hover {
    background-color: #e2e2e2 ;
    color: #4C535C;
    text-decoration: none;
}

.menu-item a.active {
    background-color: #6085FF;
}

.site-branding {
  flex: 0 0 275px;
	text-align: center;
	background-color: #EEEEEE;
}
.site-branding img {width:90%;padding-top:1rem;}

.adm .btn-primary, .tcd .btn-primary, .apb .btn-primary, .law .btn-primary, .ads .btn-primary {
	color: #4C535C;
}

.menu-adm a.active,.menu-adm a:hover, .adm .btn-primary { background-color:#ff6060; border-color:#ff6060; }
.menu-tcd a.active,.menu-tcd a:hover, .tcd .btn-primary { background-color:#43b754; border-color:#43b754; color: white; }
.menu-apb a.active,.menu-apb a:hover, .apb .btn-primary { background-color:#ffa660; border-color:#ffa660; }
.menu-law a.active,.menu-law a:hover, .law .btn-primary { background-color:#6085FF; border-color:#6085FF; color: white; }
.menu-ads a.active,.menu-ads a:hover, .ads .btn-primary { background-color:#b060ff; border-color:#b060ff; }

.adm .btn-outline-primary  {border-color:#ff6060; color: #ff6060;}
.tcd .btn-outline-primary  {border-color:#43b754; color: #43b754;}
.apb .btn-outline-primary  {border-color:#ffa660; color: #ffa660;}
.law .btn-outline-primary  {border-color:#6085FF; color: #6085FF;}
.ads .btn-outline-primary  {border-color:#b060ff; color: #b060ff;}

.adm .btn-outline-primary:hover  {background-color:#ff6060; color: #FFFFFF;}
.tcd .btn-outline-primary:hover  {background-color:#43b754; color: #FFFFFF;}
.apb .btn-outline-primary:hover  {background-color:#ffa660; color: #FFFFFF;}
.law .btn-outline-primary:hover  {background-color:#6085FF; color: #FFFFFF;}
.ads .btn-outline-primary:hover  {background-color:#b060ff; color: #FFFFFF;}

.adm a:not(.btn), .adm .nav-link {color:#ff6060}
.tcd a:not(.btn), .tcd .nav-link {color:#308c3c}
.apb a:not(.btn), .apb .nav-link {color:#ffa660}
.law a:not(.btn), .law .nav-link {color:#6085FF}
.ads a:not(.btn), .ads .nav-link {color:#b060ff}

.adm legend {border-bottom-color:#ff6060}
.tcd legend {border-bottom-color:#43b754}
.apb legend {border-bottom-color:#ffa660}
.law legend {border-bottom-color:#6085FF}
.ads legend {border-bottom-color:#b060ff}

.adm .table-striped>tbody>tr:nth-child(odd) { background-color: #ff606022; }
.tcd .table-striped>tbody>tr:nth-child(odd) { background-color: #43b75422; }
.apb .table-striped>tbody>tr:nth-child(odd) { background-color: #ffa66022; }
.law .table-striped>tbody>tr:nth-child(odd) { background-color: #6085FF22; }
.ads .table-striped>tbody>tr:nth-child(odd) { background-color: #b060ff22; }


.adm .form-check-input:checked { background-color: #ff6060; border-color: #ff6060; }
.tcd .form-check-input:checked { background-color: #43b754; border-color: #43b754; }
.apb .form-check-input:checked { background-color: #ffa660; border-color: #ffa660; }
.law .form-check-input:checked { background-color: #6085FF; border-color: #6085FF; }
.ads .form-check-input:checked { background-color: #b060ff; border-color: #b060ff; }


.top-error {
  padding: 0 1rem;
  text-align: center;
  color:darkred;
  background:rgba(211,211,211,0.85);
  font-weight: bold;
  position: absolute;
  top: 2rem;
  left: 2rem;
  display:block;
  border-radius: 6px;
  border: 1px solid darkred;
}
.top-error p {
	color: darkred;
	padding: 0.4rem 0;
}
.top-error span {
  color:black;
  font-weight:normal
}

.law-hilight {background-color: #6085FF30; border-color:#6085FF; }

tr[onClick]:hover {
	cursor: pointer;
	box-shadow: 0px 0px 5px #888;
}

.datareturn { margin: 1rem; padding: 1rem; background: rgba(0,0,0,.1); }

/*********
* Invoice Cart Styling
*********/
.item-discount {width:4em;}
.item-shipped {width:5em;}
.item-count {width:5em;}
#sub-total { text-align:right; }
.cart-total { font-weight:bold; }
.show-cart td:last-of-type { text-align:right; }
.productAddAmount {
	width:3em;
	border:0;
}
#product-list .add-to-cart {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 0 8px;
	vertical-align: top;
}
.ui-autocomplete { background-color: honeydew; color:black; }
.ui-widget { font-size: 0.8em; }
.ui-menu-item .ui-state-active { border: 0; background: #eeeeee; }
#ui-id-1 {z-index: 9999;} /* Brings customer auto-complete list to front. */

.cartHead td, .cartHead h6 {
	padding-top: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.cartFoot {
	background-color: #aaaaaa44;
}
.cartFoot td {
	padding: 0 3rem 0 0;
	border-bottom:0;
	font-size: 0.8rem;
	text-align: right;
}
#custInfo {
	background-color: #aaaaaa22;
	font-size: 0.8em;
	padding: 0.3em 0.6em;
	text-align: center;
	border-radius: 0 0 10px 10px;
}
.dollars { text-align: right; }

/*********
* Invoice Styling
*********/
#postPayment {
	margin: 0 auto;
	background-color: rgba(220,220,220,0.8);
	border-radius: 5px;
}
#postPayment td {
	padding:  0.6rem;
}

/*********
* Invoice Approval Styling
*********/
#invoiceApproval .logs {
	display:table-row;
}
#invoiceApproval .icons {
	font-size: 1.5rem;
}
#invoiceApproval .comment-input {
	width: 80%;
	display:inline;
}

/*********
* Sidebar Menu Styling
*********/

#sidebar h3 {
	font-size:18px;
	text-align:left;
}

#sidebar ul {
	list-style-type: none;
	padding-left:2rem;
}

.secondary-nav li {
	list-style-type: none;
	text-decoration: none;
}

/*********
* Footer Styling
*********/
#footer {
	display: flex;
	justify-content: space-between;
}

#footer .logout {
	font-weight:bold;
}
#footer .logout a {
	color:white;
	text-shadow: 2px 2px 5px black;
}

#footer .logout a:hover {
	text-decoration: none;
	text-shadow: 3px 3px 3px black;
}

#footer .logout a:active {
	text-decoration: none;
	text-shadow: 0 0 3px black;
}

.footer-warning {
    background: #FF8844;
    color: #FFFFFF;
    font-size: 16px;
    text-align: center;
    font-weight: 900;
}

.footCenter {
    font-size: 0.8rem;
    font-weight: bold;
    padding-top: 0.2rem;
}

/*********
* Dashboard Carousel Styling
*********/

.carousel {
  height:200px;
}
.carousel-inner {
  text-align:center;
}
.carousel-item {
  height: 200px;
}
.carousel-image {
  max-height: 190px;
  box-shadow: 3px 3px 10px grey;
}
.carousel-caption {
  background-color: #eeea;
  color: #000;
  font-weight: bold;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  padding: 0.5rem;
  text-shadow: 0 0 3px white;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/*********
* Time Off Requests Styling
*********/

tr.New {
	font-weight: bold;
	background-color: white;
}
tr.Approved {
	background-color: #43b75450;
}
tr.Denied {
	background-color: #ff606050;
}

.btn.btn-approve {
	background-color: #43b754;
}
.btn.btn-deny {
	background-color: #ff6060;
}

table.table.calendar {
	width:100%;
	background-color: #FFFFFF50;
}
table.table.calendar td.day {
	width: 14.285%;
	padding: 0;
	height: 4.8rem;
	border: 1px solid #dddddd;
}
.calendar span {
	display:block;
	width:100%;
	background-color: #43b75450;
	font-size:10px;
}

td.today {
	background-color: #dddddd;
	border-color: black;
}

.printFooter, .printHeader {
	display:none;
}

/*********
* APB Styles
*********/
.project {background-color:rgba(255,255,255,0.75); padding: 0.6rem; margin-top:0.6rem; border-radius:10px; height:160px; overflow:hidden; position:relative; }
.project.lead { border-left: 10px solid #ddd; }
.project.production { border-left: 10px solid #FF8844; }
.project.delivery { border-left: 10px solid #fffc60; }
.project.client { border-left: 10px solid #95ff00; }

.more {
	background-image: linear-gradient(#fff0, #fffa, #ffff); 
	text-align:center; 
	position:absolute; 
	bottom:0; 
	left:0;
	width:100%; 
	height:25px; 
	line-height:20px; 
	cursor:pointer; 
}

.subline td { font-size: 0.6rem; margin:0; padding:0; font-style:italic;}
.subline td:nth-child(2) { text-align: right; }
.subline form {display:inline;}
.subline button { background: none; border: 0; padding: 0 7px 0 3px;}

/*********
* Responsive Styling
*********/
@media (max-width: 600px) {

	#mainwindow {
		height:auto;
	}
	ul#primary-menu { margin:0;}
}

/*********
* Dark mode Styling
*********/
	body.dark-theme {
		color: #aaaaaa;
	}
	body.dark-theme {
		background: url(/img/dark-horse.png) bottom right no-repeat, linear-gradient(black, #2E2E2E);
	}
	.dark-theme #sidebar {
		background: black;
	}
	.dark-theme #footer {
		background: #444444;
		color: #aaa;
	}
	.dark-theme .ui-autocomplete { background-color:#334433 ; color:honeydew; }
	.dark-theme .normRow div:not(.row) {border:1px solid #888888 !important; border-left: 0; border-top: 0; background-color: #000000aa !important;}

	.dark-theme .form-control, .dark-theme .form-select, .dark-theme .form-check-input { color: #ced4da; background-color: #222; border-color: #444; }
	.dark-theme .form-control:disabled, .dark-theme .form-control[readonly] { color: #888; background-color: #333; }
	.dark-theme .form-control:focus, .dark-theme .form-select:focus, .dark-theme .form-check-input:focus { color: #eee; background-color: #333; }
	.adm.dark-theme .form-control:focus, .adm.dark-theme .form-select:focus, .adm.dark-theme .form-check-input:focus {border-color:#ff6060; box-shadow: 0 0 0 .25rem #ff606066; color:#ccc }
	.tcd.dark-theme .form-control:focus, .tcd.dark-theme .form-select:focus, .tcd.dark-theme .form-check-input:focus {border-color:#43b754; box-shadow: 0 0 0 .25rem #43b75466; color:#ccc }
	.apb.dark-theme .form-control:focus, .apb.dark-theme .form-select:focus, .apb.dark-theme .form-check-input:focus {border-color:#ffa660; box-shadow: 0 0 0 .25rem #ffa66066; color:#ccc }
	.law.dark-theme .form-control:focus, .law.dark-theme .form-select:focus, .law.dark-theme .form-check-input:focus {border-color:#6085FF; box-shadow: 0 0 0 .25rem #6085FF66; color:#ccc }
	.ads.dark-theme .form-control:focus, .ads.dark-theme .form-select:focus, .ads.dark-theme .form-check-input:focus {border-color:#b060ff; box-shadow: 0 0 0 .25rem #b060ff66; color:#ccc }

	.dark-theme .project { background-color:rgba(255,255,255,0.25); }

	.dark-theme .xdebug-error th { color: black; background-color:#800; }
	.dark-theme .xdebug-error td { background-color:#400 }

	.dark-theme #dashboard-grid { color:white;}

/*********
* Loading Icon
*********/
.lds-ripple {
	display: inline-block;position: relative;width: 20px;height: 20px;
}
.lds-ripple div {
	position: absolute;border: 2px solid #333;opacity: 1;border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}
@keyframes lds-ripple {
	0% {top: 9px; left: 9px; width: 0; height: 0; opacity: 0;}
	4.9% {top: 9px; left: 9px; width: 0; height: 0; opacity: 0;}
	5% {top: 9px; left: 9px; width: 0; height: 0; opacity: 1;}
	100% {top: 0px; left: 0px; width: 20px; height: 20px; opacity: 0;}
}

.bi-check-circle, .bi-check-square  { color: #00FF00; }
.bi-pencil-square { color: #FFFF00; }
.bi-x-circle, .bi-x-square { color: #FF0000; }