/* = reset ================================================================= */
/*
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}*/

/* body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
} */

main {
  min-height: 75rem;
  padding-top: 4.8rem;
}

/*used in core */
div .padded {
  padding: 20px;
  padding-top: 50px;
}

/*used in home hero-header */
div .banner {
  text-align: center;
}

/*used in header */
div .user-info-name {
  font-weight: bold;
}

/*extracted from inline header-view home.cljs */
.hidden.menu {display: none;}
.ui.vertical.stripe {padding: 8em 0em;}
.ui.vertical.stripe h3 {font-size: 2em;}
.ui.vertical.stripe .button + h3,.ui.vertical.stripe p + h3 {margin-top: 3em;}
.ui.vertical.stripe .floated.image {clear: both;}
.ui.vertical.stripe p {font-size: 1.33em;}
.ui.vertical.stripe .horizontal.divider {margin: 3em 0em;}
.quote.stripe.segment {padding: 0em;}
.quote.stripe.segment .grid .column {padding-top: 5em;padding-bottom: 5em;}
.footer.segment {padding: 5em 0em;}
.secondary.pointing.menu .toc.item {display: none;}

/* =hero-header================================================================ */
/*used in login */
.logincolumn {
  max-width: 700px;
}

/* = avatar = */
figure {
  display: block;
}

.avatar {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  height: 2rem;
  width: 2rem;
}

.statusdot {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  height: 1.4rem;
  width: 1.4rem;
}

.statusdot img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.avatar img {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.float--right {
  float: right !important;
  padding: .8rem;
}
.float--left {
  float: left !important;
  padding: .8rem;
}

.logo {
  width: 25vw;
  min-width: 160px;
  max-width: 380px;
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?z05uqw');
  src:  url('fonts/icomoon.eot?z05uqw#iefix') format('embedded-opentype'),
  url('fonts/icomoon.ttf?z05uqw') format('truetype'),
  url('fonts/icomoon.woff?z05uqw') format('woff'),
  url('fonts/icomoon.svg?z05uqw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-1065-Icon .path1:before {
  content: "\e900";
  color: rgb(0, 0, 0);
}
.icon-1065-Icon .path2:before {
  content: "\e901";
  margin-left: -3em;
  color: rgb(255, 255, 255);
}
.icon-1120-Icon .path1:before {
  content: "\e902";
  color: rgb(0, 0, 0);
}
.icon-1120-Icon .path2:before {
  content: "\e903";
  margin-left: -3em;
  color: rgb(255, 255, 255);
}
.icon-1120S-Icon .path1:before {
  content: "\e904";
  color: rgb(0, 0, 0);
}
.icon-1120S-Icon .path2:before {
  content: "\e905";
  margin-left: -3em;
  color: rgb(255, 255, 255);
}
.icon-xero-logo:before {
  content: "\78";
}
.icon-qbo-logo:before {
  content: "\e906";
}


/* =pricing needed for hero header======= */
.h1.pricing-headline {
  font-size: 80px;
  @include Pacifico()
  color: $deep_navy;
  min-width: 300px;
  margin: 0 auto;

  @include mobile() {
    margin: 0 auto;
    font-size: 36px;
    max-width: initial;
    padding: 0 24px;
  }
}

.h4.tm {
  font-size: 20px;
  @include Pacifico()
  color: $deep_navy;
  min-width: 100px;
  bottom: 0;

  @include mobile() {
    margin: 0 auto;
    font-size: 12px;
    max-width: initial;
    padding: 0 24px;
  }
}

.div.pricing-subheadline {
  color: $deep_navy;
  font-size: 30px;
  line-height: 38px;
  @include avenir_R();
  margin: 24px auto 0px;
  z-index: 2;
  position: relative;
  max-width: 800px;

  @include mobile(){
    margin-top: 16px;
    font-size: 20px;
    line-height: 26px;
    padding: 0px;
    color: $deep_navy;
    max-width: initial;
  }
}

.div.pricing-three-columns{
  margin: 80px auto 0;
  width: 1072px;
  padding: 0 24px;
}

@include pricing-tablet() {
  width: 100%;
}

@include mobile() {
  padding: 0;
}

/***** Pricing from - needed for hero header******/
div.pricing-wrap {
  background-color: #FFFFFF;
}
div.pricing-wrap div.main.pricing {
  width: 100%;
}
@media screen and (max-width: 980px) {
  div.pricing-wrap div.main.pricing section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
div.pricing-wrap div.main.pricing section {
  background-color: #FFFFFF;
}
div.pricing-wrap div.main.pricing section.pricing-header {
  padding: 100px 0 0 100px;
  text-align: left;
  position: relative;
}
@media screen and (max-width: 980px) {
  div.pricing-wrap div.main.pricing section.pricing-header {
    overflow: visible;
    padding: 131px 0 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
div.pricing-wrap div.main.pricing section.pricing-header h1.pricing-headline {
  font-size: 80px;
  font-family: "Pacifico", serif !important;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #34414F;
  min-width: 300px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  div.pricing-wrap div.main.pricing section.pricing-header h1.pricing-headline {
    margin: 0 auto;
    font-size: 36px;
    max-width: initial;
    padding: 0 24px;
  }
}
div.pricing-wrap div.main.pricing section.pricing-header div.pricing-subheadline {
  color: #34414F;
  font-size: 30px;
  line-height: 38px;
  font-family: "Pacifico", Muli, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 24px auto 0px;
  z-index: 2;
  position: relative;
  max-width: 800px;
}
@media screen and (max-width: 767px) {
  div.pricing-wrap div.main.pricing section.pricing-header div.pricing-subheadline {
    margin-top: 16px;
    font-size: 20px;
    line-height: 26px;
    padding: 0px;
    color: #34414F;
    max-width: initial;
  }
}

/* = trial-balance ================================================================ */
/* TODO remove most of these */
.tb-row td label {
  white-space: pre-line;
  word-break: break-all;
  margin-left: 5px;
  line-height: 1.5;
  transition: color 0.4s;
}

.tb-row td label {
  color: #3355cc;
  text-align: left;
}

.tb-row-subtotal {
  border-top: 2px;
  border-color: grey;
  border-top-style: solid;
  font-weight: bold;
}

.tb-row-subtotal-separator {
  border-top: 2px;
  border-color: grey;
  border-bottom-style: solid;
  background-color: white;
  
}

.tb-row-total {
  border-top: 4px;
  border-color: grey;
  border-top-style: solid;
  font-weight: bold;
  background-color: lightgrey;
}

.tb-row-tax-category {
  font-weight: bold;
  color: darkslategray;
  background-color: #fafafa
}

.tb-row-grouped {
  color: grey;
}

.tb-orig-name-override {
  text-decoration: line-through;
  opacity: 0.5;
}

.tb-name-override {
  font-weight: bold;
}

.tb-header-left {
  border-top: 1px solid #dee2e6 !important;
  border-bottom: none !important;
  border-left: 1px solid rgba(128,128,128, 0.8) !important;
  text-align: center;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;
}
.tb-header-right {
  border-top: 1px solid #dee2e6 !important;
  border-bottom: none !important;
  border-right: 1px solid #dee2e6 !important;
  text-align: center;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;

}
.tb-header-last {
  border-top: 1px solid #dee2e6 !important;
  border-bottom: none #dee2e6 !important;
  border-left: 1px solid rgba(128,128,128, 0.8) !important;
  border-right: 1px solid rgba(128,128,128, 0.8) !important;
  text-align: center;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;
}

.tb-header2 {
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  text-align: left;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;
}

.tb-header2-left {
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-left: 1px solid rgba(128,128,128, 0.8)!important;
  text-align: center;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;
}
.tb-header2-right {
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-right: 1px solid rgba(128,128,128, 0.8) !important;
  text-align: center;
  font-weight: bold !important;
  opacity: 0.6  !important;
  padding: 0.30em !important;

}
.tb-header2-last {
  border-top: none !important;
  border-bottom: 1px solid #dee2e6 !important;
  border-left: 1px solid #dee2e6 !important;
  border-right: 1px solid #dee2e6 !important;
  text-align: center;
  opacity: 0.6  !important;
  padding: 0.30em !important;
}

.act-button {
  color: rgba(128, 128, 128, 1.0);
}

.tb-body-left {
  border-left: 1px solid rgba(128,128,128, 0.8) !important;
  text-align: right !important;

}

.tb-body-right {
  border-right: 1px solid rgba(128,128,128, 0.8) !important;
  text-align: right !important;

}

/* for future work */
.dropdown-inner { background-color: red;}
.fadein-picker {
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 3s; /* Firefox < 16 */
  -ms-animation: fadein 3s; /* Internet Explorer */
  -o-animation: fadein 3s; /* Opera < 12.1 */
  animation: fadein 3s;}

@keyframes fadein-lightgreen {
  from {
    opacity: 1;
    background-color: lightgreen;
  }
  to {
    opacity: 1;
    background-color: white;
  }
}

/* = journal-entry ================================================================ */
/* TODO rationalize these */
.je-line td label {
  white-space: pre-line;
  word-break: break-all;
  margin-left: 5px;
  line-height: 1.5;
  transition: color 0.4s;
  color: #3355cc;
  text-align: left;
}

.je-line td.jelauth {
  font-size: 8pt;
  font-weight: normal;
  text-align: left;
}

.je-line td .editing {
  border-bottom: none;
  padding: 0;
}

.je-line td .edit {
  display: block;
  margin: 0 0 0 10px;
}

.je-line td label.editing {
  display: none;
}

.je-line td .view {
  display: inline-block;
}

.je-line td .edit {
  display: none;
}
/* = journal-entry ================================================================ */
.new-todoo,
.editing {
  position: relative;
  margin: 0;
  width: 100%;
  size: 100px;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  padding: 2px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.new-todoo {
  padding: 2px 2px 3px 6px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}

/* dialog boxes */
.new-client-label {
  width: 90px;
  padding: 5px;
  }
  

/*by Ben Wen for BS and IS */

div.accountsbox {
  margin-left:48px;
  padding-bottom:24px;
}

div.h.name {
  color:black;
  font-family:Arial;
  font-size:15pt;
  font-weight:bold;
  padding-top:64px;
  text-align:center;
  word-wrap:break-word
}
div.h.date {
  margin-top:4px;
  padding-bottom:36px;
  text-align:center
}

th.i {
  padding-top:40px;
  width:24px

}
th.n {
  padding-top:40px;
  width:328px

}
th.v {
  border-style: solid;
  border-width: 0px 5px 1px 5px;
  border-color: white white black white;
  padding:8px 2px 5px 2px;
  text-align:center;
  font-family: Arial;
  font-weight: normal;
  width:77px
}

tr.egp {
  opacity: 0.5
}

/* tr.b? for JE Report banding */
.b0 {
  background-color: white;
}

.b1 {
  background-color: #eee;
}

td.cat {
  color:black;
  font-family:Arial;
  font-size:12pt;
  font-weight:bold;
  height:18px
}

td.subcat {
  color:black;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  height:18px;
  padding-left:12px
}
td.nosubcat {
  color:black;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  height:18px;
  padding-left:12px
}
td.m {
  color:black;
  font-family:Arial;
  font-size:8pt;
  height:18px;
  padding: 0px 5px 0px 5px;
  text-align:left
}
td.d {
  color:black;
  font-family:Arial;
  font-size:8pt;
  height:18px;
  padding: 0px 5px 0px 5px;
  text-align:right
}
td.d.i { /* is/bs-report icon */
  color:black;
  font-family:Arial;
  font-size:8pt;
  height:18px;
  padding: 0px 5px 0px 5px;
  text-align:right
}

td.d.c {
  font-weight:normal
}

td.d.c.total { /* je-report text */
  font-weight:normal;
  border-top: 1px solid;
}

td.d.c.gt { /* je-report text for final grand total*/
  font-weight:bold;
  font-size:10pt;
  border-top: 3px double;
}
td.d.t { /* je-report text */
  text-align:left
}
td.d.dt { /* je-report date */
  text-align:left
}
td.d.t.gt { /* je-report text */
  font-weight:bold;
  font-size:10pt;
}

td.d.name {
  padding-left:5px;
  text-align:left;
  width:272px
}
td.d.namegroup {
  padding-left:0px;
  text-align:left;
  width:272px
}
td.d.name.member0 {
  padding-left:17px;
  text-align:left;
  width:272px
}
td.d.name.member1 {
  padding-left:29px;
  text-align:left;
  width:272px
}
td.d.name.member2 {
  padding-left:41px;
  text-align:left;
  width:272px
}
td.d.name.member3 {
  padding-left:53px;
  text-align:left;
  width:272px
}
td.d.name.member4 {
  padding-left:65px;
  text-align:left;
  width:272px
}

td.d.notaxcategory {
  text-align: center;
  color: red;
}

.notaxcategory {
  text-align: center;
  color: red;
  width: 3px;
}
/* these signal to the XLSX reporter. */
td.d.name.member0.report-snapshot {
  padding-left:17px;
  text-align:left;
  width:272px;
  color: #ddddd0
}
td.d.name.member1.report-snapshot {
  padding-left:29px;
  text-align:left;
  width:272px;
  color: #ddddd1
}
td.d.name.member2.report-snapshot {
  padding-left:41px;
  text-align:left;
  width:272px;
  color: #ddddd2
}
td.d.name.member3.report-snapshot {
  padding-left:53px;
  text-align:left;
  width:272px;
  color: #ddddd3
}
td.d.name.member4.report-snapshot {
  padding-left:65px;
  text-align:left;
  width:272px;
  color: #ddddd4
}
td.d.c.report-snapshot{
}
td.d.name.report-snapshot{
}
td.cat.report-snapshot{
  color:#000014;
}
td.gt.name.report-snapshot{
  color:#000014;
}
td.subcat.report-snapshot {
  color:#00beef;
}
td.sgn.report-snapshot {
  color:#badcaf;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  padding-bottom:16px;
}
td.m.report-snapshot {
  }
td.d.dt.report-snapshot {
  color:#defc0d
}
td.d.t.report-snapshot { /* je-report text */
}

/* category subtotals */
td.s {
  border-style:solid;
  border-width:1px 5px 0px 5px;
  border-color:black white white white;
  color:black;
  font-family:Arial;
  font-size:8pt;
  height:18px;
  text-align:right
}
td.s.c {
  padding: 5px 3px 2px 3px;
  font-weight:bold}

/* subtotal groups */
td.sgi {
  color:black;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  padding-left:0px;
}
td.sgn {
  color:#606060;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  padding-bottom:16px;
}

td.sg {
  color:black;
  font-family:Arial;
  font-size:8pt;
  text-align:right
}

td.sg.c {
  color:#606060;
  border-width: 3px 5px 3px 5px;
  border-color: grey white white white;
  border-style: solid solid none solid;
  padding: 3px 3px 16px 3px;
  font-weight:bold}

td.sgu {
  border-width: 0px 5px 3px 5px;
  border-color: white white grey white;
  border-style: solid solid solid solid;
  padding-top: 15px;
}

/*
div.s.v {
  padding: 5px 0px 2px;
  width 75px
}
*/
/* totals */
td.t {
  color:black;
  font-family:Arial;
  font-size:8pt;
  height:18px;
  padding:5px 3px 5px 3px;
  text-align:right
}

td.t.c {
  border-style: solid solid solid solid ;
  border-width: 3px 5px 3px 5px;
  border-color: black white black white;

  padding: 3px 3px 2px 3px;
  font-weight:bold
}
td.t.name {
  color:black;
  font-family:Arial;
  font-size:9pt;
  font-weight:bold;
  height:18px;
  text-align:left;
  width:272px
}

/* grand total */
td.gt.name {
  color:black;
  font-family:Arial;
  font-size:12pt;
  font-weight:bold;
  height:18px;
  text-align:left;
  padding-bottom:4px;
  padding-top:4px;
  width:272px
}
td.t.gc {
  border-style: double solid double solid ;
  border-width: 3px 5px 3px 5px;
  border-color: black white black white;
  padding: 1px 3px 1px 3px;
  font-weight:bold
}

/* for tax (category) view */
th.nt {
  padding-top:48px;
  width:300px
}
th.ct {
  padding-top:48px;
  width:276px
}

.report-panel {
  position:relative;
  width:1100px;
  min-height:1500px;
  background:white;
}

.report {
  width:100%;
  height:100%;
  left:0px;
  top:0px;line-height:1.0}

td.spacer {padding: 32px 0px 0px}

.flash {
  animation-duration: 1s;
  animation-name: flash;
}
@keyframes flash {
  from {
    opacity: 0.0;
  }
  to {
    opacity: 1.0;
  }
}

div.overlay {
  background-color: #eee;
  font-family: "ibm-plex-sans", "IBM Plex Sans", "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-align: center;
  font-size: 16pt;
  font-weight: bold;
  overflow: hidden;
  padding: 100px;
  position: absolute;
  height: 0%;
  width:  100%;
  top: 0px;
  left: 0px;
  opacity: 1.0;
  z-index: 100;
  pointer-events: none;
  transition-property: height;
  transition-duration: 1s;
  transition-timing-function: ease;
}


/* For tables */

/* These need to override Semantic UI's CSS which uses !important, hence the extra specificitiy for hover states*/

.total-valid {
  background-color: lightgrey;
}

.ui.selectable.table tbody tr.total-valid:hover, .total-valid:hover {
  background-color: rbga(0,0,0,.05)
}

.total-invalid {
  background: red;
}

.ui.selectable.table tbody tr.total-invalid:hover, .total-invalid:hover {
  background: #D6000A !important;
}

.grand-total-valid {
  background-color: lightgrey;
  font-weight: bold;
}

.grand-total-invalid {
  background: red;
  font-weight: bold;
}

.ui.table td.grand-total-name {
  text-align: right;
}

.ui.table td.right {
  text-align: right;
}
/* for TB Acconuts */

td.grouped0 {
  padding-left:20px !important;
}

td.grouped1 {
  padding-left:40px !important;
}

td.grouped2 {
  padding-left:60px !important;
}

td.grouped3 {
  padding-left:80px !important;
}

td.grouped4 {
  padding-left:100px !important;
}

td.grouped5 {
  padding-left:1200px !important;
}

.table td.tax-category {
  padding-top: .25em;
  padding-bottom: .25em;
  font-weight: bold !important;
}

.ui.table td.not-grouped {
}

.ui.icon.button>.icon.active {
}

.ui.icon.button>.icon.inactive {
  opacity: 0.3;
}

.obfuscator {
  opacity: 0.2;
}

.obfuscator.show {
  opacity: 1.0;
}

.edit-icon {
  opacity: 0.3;
}

td.returnid {
  width: 250px;
}

.invite-button-group {
  padding-top: 12px;
}

/* Validation Error card */
.error-card {
  width: 200px;
}

.older-returns {

}

.older-returns.hidden {
  display: none;
}

.new-return {

}

td .client-name {
  font-weight: bold;
}

td .client-id {
  color: grey;
  margin-left: 5px;
}

table .client-list {
}

/* No gutter for re-com h-split */

.container-fluid.full-width {
  padding-left: 0;
  padding-right: 0;
  overflow-x: hidden;
}
.row.row-no-gutter {
  margin: 0
}
.row.row-no-gutter [class*="col-"] {
  padding: 0
}
.img-full-width {
  width: 100.5%;
  height: auto;
}
.has-inner .row.row-no-gutter {
  margin-left: -10px;
  margin-right: -10px;
}
.row.row-no-gutter .inner {
  padding-left: 10px;
  padding-right: 10px;

}



.feature__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature__item__text {
  max-width: 500px;
  padding: 50px;
}