@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";

/* company colours: red #ED1B24, blue #1A489D */

/* HTML elements */
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; }
img { border: 0; }
a { color: #1A489D; }
form { margin: 0; padding: 0; display: inline; }
label { font-size: 1em; }
input::placeholder { color: #999999; }
input[type="checkbox"] { cursor: pointer; }

/* global classes */
.Hidden { display: none; }
.nowrap { white-space: nowrap; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.float-right { float: right; }
.inline-block { display: inline-block; }

.input-group { padding: 0; margin: 0; }

.btn { background-color: #1A489D; color: #ffffff; border: 1px solid #1A489D; padding: 0.5em 1em; border-radius: 1.5em; transition: all 0.5s ease; }
.btn:hover { background-color: #ffffff; color: #1A489D; cursor: pointer; }

.page-nav { margin: 0 0.5em; }
.trInvoice:hover { background-color: #cceeff; cursor: pointer; }

.InvoiceTableHeader { background-color: #f0f0f0; padding: 0.5em; }
.InvoiceTableHeader-Text { font-size: 1.3em; font-weight: bold; line-height: 1.3em; }

.InvoiceTable { padding: 0; margin: 0; }

.InvoiceTableFooter { border: 1px solid #f0f0f0; padding: 1em; text-align: right; }

.StatusCompleted  { font-weight: bold; color: #009900; }
.StatusInProgress { font-weight: bold; color: #ffff00; }
.StatusFailed     { font-weight: bold; color: #ff0000; }

.TextOutline  { text-shadow: -1px -1px 0 rgba(0,0,0,0.5), 1px -1px 0 rgba(0,0,0,0.5), -1px  1px 0 rgba(0,0,0,0.5), 1px  1px 0 rgba(0,0,0,0.5); }
.TextOutline2 { text-shadow: -2px -2px 0 rgba(0,0,0,0.5), 2px -2px 0 rgba(0,0,0,0.5), -2px  2px 0 rgba(0,0,0,0.5), 2px  2px 0 rgba(0,0,0,0.5); }
.DropShadow   { text-shadow: 2px 2px 0 rgba(0,0,0,0.3) }

.trInvoice {
	padding: 5px;
}

.CDLogo { width: 25em; }
.fa-icon-with-label { padding-right: 0.7em; }
.search-text { border: 1px solid #cccccc; border-right: 0 !important; border-radius: 1.5em 0 0 1.5em !important; width: 12em; padding-left: 1em; }
.search-submit { border: 0; border-radius: 0 1.5em 1.5em 0; color: #ffffff; background-color: #1A489D !important; font-size: 0.9em; }

.ProgressBar-BG { position: relative; height: 2em; width: 50em; background-color: #808080; border-radius: 1em; transition: all 0.5s ease; }
.ProgressBar-Percent { position: absolute; width: 100%; text-align: center; color: #ffffff; font-weight: bold; padding-top: 0.2em; }
.ProgressBar-Bar { position: absolute; height: 2em; background-color: #009900; border: #66ff66 solid 1px; border-radius: 1em; transition: all 0.5s ease; }
.ProgressBar-BG:hover { background-color: #999999; transition: all 0.5s ease; }
.ProgressBar-BG:hover .ProgressBar-Bar { background-color: #00cc00; transition: all 0.5s ease; }

/* FontAwesome tweaks */
i.with-text { padding-right: 0.7em; }

/* content panels */
.content-panel { position: relative; }
.panel-image { background-color: #000000; overflow: hidden; }
.panel-image img { height: 25em; opacity: 0.5; transition: all 1s ease; }
.content-panel .panel-text { position: absolute; left: 0; bottom: 0; padding: 1em; border-top-right-radius: 5em; color: #ffffff; transition: all 1s ease; }
.content-panel:hover .panel-image img { opacity: 1; transform: scale(1.05); }
.content-panel:hover .panel-text { background-color: rgba(0, 0, 0, 0.5); }

.titlebar-small { display: none; }

/* page section-limited */
.topbar { padding: 0.5em 0; }
.topbar, .topbar a { color: #ffffff; background-color: #000000; } 
.topbar .social { padding: 0 0.5em; }
.topbar .social, .topbar a { transition: all 0.5s ease; }
.topbar a:hover { color: #77bbff }
.topbar .social, .topbar .social:before { color: #ffffff; }
.topbar .linkedin:hover, .topbar .linkedin:focus { color: #00aeff; }
.topbar .twitter:hover, .topbar .twitter:focus { color: #00aeff; }
.topbar .youtube:hover, .topbar .youtube:focus { color: #ff0000; }

.StickyTop { font-size: 0.9em; z-index: 99; transition: all 0.1s ease; }
.StickyTopData { width: 100%; box-shadow: 0px 1px 10px #000000; }

.titlebar-large { padding: 1.5em 0; background-color: #ffffff; transition: all 0.25s ease; }
.titlebar-shrink { padding: 0.5em 0; }
.titlebar-floats { float: right; margin-top: 0.55em; margin-left: 1em; }
.btnShopNow, .btnShopNow:hover { background-color: #ED1B24; border-radius: 1.5em; }

ul.dropdown > li > ul { background-color: #efefef; }
ul.dropdown li > a, li.is-dropdown-submenu-parent, .dropdown.menu .is-active > a { color: #000000 !important; }
ul.dropdown > li ul > li:hover, ul.dropdown > li ul > li:hover > a { color: #ffffff !important; background-color: #1A489D; }

.zoom5, .zoom10, .zoom20, .zoom50 {
    transition: transform .25s;
    margin: 0 auto;
}

.content { background-color: #ffffff; padding: 1em 0; }

.zoom5:hover { transform: scale(1.05); }
.zoom10:hover { transform: scale(1.1); }
.zoom20:hover { transform: scale(1.2); }
.zoom50:hover { transform: scale(1.5); }

/* Page: Connect to Quickbooks Online */
a.c2qb-Connect:hover img { src: '/portal/img/qb/C2QB_green_btn_lg_hover.png'; }
p.c2qb-Connected { border: #009900 solid 5px; background-color: #ffffff; color: #009900; font-weight: bold; border-radius: 3px; width: 18em; padding: 0.5em; text-align: center; }
div.CurrentStep, div.DisabledStep {border-radius: 1em; padding: 1em; position: relative; }
div.DisabledStep { background-color: #e0e0e0; }
div.CurrentStep { border: #cccccc solid 1px; }
div.StepNumber, div.StepContent { position: absolute; top: 50%; transform: translate(-50%, 0%); }
div.StepNumber { font-size: 3em; padding: 0 1em; margin-right: 1em; border-right: #cccccc solid 1px; }
div.DisabledStep p:last-of-type, div.CurrentStep p:last-of-type { margin-bottom: 0; }

.fdnDatePicker { display: inline-block; width: 10em; }

/* .footer { position: fixed; bottom: 0; width: 100%; } */
.footer { color: #ffffff; background-color: #1A489D; padding: 1em 0; }
.footer a { color: #ffffff; }
.footer a:hover { text-decoration: underline; }
.footer-legal { margin: 0 1.5em; }