/* this is needed only for card- don't really want to override body here */


.table-scroll {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
  border: 0px solid #000;
}

.table-wrap {
  width: 100%;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  /* margin: auto; */
  border-collapse: separate;
  border-spacing: 0;
  /* border-width: 0px; */
  /* border-color: red; */
}

.table-scroll th,
.table-scroll td {
  /* padding: 5px 10px; */
  border: 0px solid #00000038;
  background: #fff;
  white-space: nowrap;
  vertical-align: top;
}

.table-scroll thead,
.table-scroll tfoot {
  background: #f9f9f9;
}

.table-scroll .comment {
  margin-bottom: 5px !important;
}

/* enable-card-background */

.flip-card-front {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 462px;
  /* min-width: 310px; */
  background: linear-gradient(-90deg, var(--card-heading-background) 0%, var(--card-heading-background) 29%, #fff 29%, #fff 100%);
  background: -moz-linear-gradient(-90deg,  var(--card-heading-background) 0%, var(--card-heading-background) 29%, #fff 29%, #fff 100%);
  background: -webkit-linear-gradient(-90deg,  #f9f9f9 0%, #f2f2f3 29%, #fff 29%, #fff 100%);
  /*
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#545454", endColorstr="#2C2C2C", GradientType=1);
  */
}

.flip-card-front {
}
.investment-class-real-estate.investment-type-debt .flip-card-front {
}
.investment-class-real-estate.investment-type-equity .flip-card-front {
}



.enable-card-background .flip-card-front {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 465px;
  background-repeat: no-repeat;
}
 
.enable-card-background .flip-card-front {
  background: url(../img/card-bg-other.png);
  background-repeat: no-repeat;
}
.enable-card-background .investment-class-real-estate.investment-type-debt .flip-card-front {
  background: url(../img/card-bg-debt.png); 
  background-repeat: no-repeat;
}
.enable-card-background .investment-class-real-estate.investment-type-equity .flip-card-front {
  background: url(../img/card-bg-equity.png);
  background-repeat: no-repeat;
}


.counts .flip-card-front {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 250px;
}
.offcanvas .counts .flip-card-front {
  height: 240px;
}

.counts-expand {
    /* position: absolute; */
    top: 10px;
    right: 0px;
}

.card-menu-box {
  font-size: 12px;
}

.offcanvas .card-menu-box {
  display: none;
}

.card-menu-box .heading {
  font-weight: 700;
}

.card-inner .nav-item {
  font-size: 14px;
}

.inner {
  /* padding-left: 12px; */
  /* padding-right: 12px; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-clip: text;
}
.card-iconified {
  height: 70px;
}
.card-tab-content {
  /* padding: 4px; */
  /* overflow: auto; */
  flex-grow: 1;
  margin-top: 4px;
}

#table-wrapper {
  height: 255px;
}
#table-scroll {
  height: 100%;
}

.my-custom-scrollbar {
  position: relative;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}

/* careful- there is a card.scss in vendor/ */
.card-heading {
    color: var(--card-heading-color);
    /* margin-bottom: 10px; */
}
.card-heading .card-expand {
}
.card-heading .edit-investment-button {
  /* font-size: 10px; */
  /* padding-top: 0px !important; */
  /* padding-bottom: 0px !important; */
  /* margin-bottom: 0px !important; */
  /* line-height: 10px !important; */
}
.card-title {
  font-weight: 600;
  font-size: 20px;
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  font-family: 'Poppins';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 200px; */
  /* line-height: 16px; */
  margin-bottom: 0px;
  margin-top: 14px;
}
.offcanvas-body .card-title {
  /* margin-top: 0px; */
  font-size: 26px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.flip-card-front .card-title {
  margin-top: 6px;
}
.card-sponsor,
.entity-name {
  font-size: 14px;
  display: flex;
  /* justify-content: space-between; */
  /* font-variant: all-petite-caps; */
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 5px;
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offcanvas-body .card-sponsor {
  margin-top: 0px;
  font-size: 14px;
}
.offcanvas-body #ocSponsorName,
.offcanvas-body #ocSponsorNameTools {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 18px;
}
.offcanvas-body #ocInvestedEntity,
.offcanvas-body #ocInvestedEntityTools {
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 14px;
}
.card-heading .sponsor-name {
  /* font-variant: all-petite-caps; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* width: 270px; */
  /* width: 100%; */
}
.card-count-title {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  line-height: 28px;
  margin-top: 2px;
  font-weight: 600;
  /* color: #343a408f; */
  margin-left: 4px;
}
.icon-xirr {
  color: #448ffe;
  font-size: 26px;
  margin-right: 12px;
  margin-top: 6px;
}
.icon-nav {
  color: #00d68a;
  font-size: 26px;  
  margin-right: 12px;
  margin-top: 6px;
}
.icon-em {
  color: #f8913d;
  font-size: 26px;
  margin-right: 12px;
  margin-top: 6px;
}
.icon-yield {
  color: #868585;
  font-size: 26px;
  margin-right: 12px;
  margin-top: 6px;
}
.icon-income {
  color: #1774fe;
  font-size: 26px;
  margin-right: 12px;
  margin-top: 6px;
}
.card-count-title i {
  /* font-size: 1.2em; */
  /* width: 1.4em; */
  /* text-align: center; */
  /* line-height: 1.4em; */
  /* background: #666; */
  /* color: #fff; */
  /* border-radius: 0.7em; */
  /* color: #444444d4; */
}

.counts-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 80%;
}
#overall-income-container .counts-card-content {
  justify-content: start;
}
#investment-income-container .counts-card-content {
  justify-content: start;
}
.counts-card-content-container {
    display: flex;
    flex-direction: row;
    /* padding-left: 10px; */
    justify-content: center;
}
.count-card-heading-small {
  font-size: 16px;
}

.random-line-chart {
  margin-bottom: 0px;
  width: 100%;
  height: 100%;
}

.random-line-chart-container {
  /* This is in counts_template which is used by both large and small counts, small = card. Need to parameterize the class. */
  height: 140px;
}

.investment-card .random-line-chart-container {
  height: 100px;
}

#offcanvasCount .random-line-chart-container {
  /* these have a legend and only one chart so there is plenty of space */
  height: 360px;
}

#overall-income-container .random-line-chart-container {
  /* these have a legend and only one chart so there is plenty of space */
  height: 200px !important;
}

#investment-income-container .random-line-chart-container {
  /* these have a legend and only one chart so there is plenty of space */
  height: 190px !important;
}

.status-and-sponsor-container {
  display: flex;
  width: 100%;
}
.card-sponsor-name {
  /* flex-grow: 1; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csn-sen-spacer {
  flex-grow:1
}
.card-entity-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* width: 100px; */
  /* flex-grow: 1; */
  /* width: 100%; */
}

#status-tag-list {
  margin-right: 10px;
}

.altracka-count-box {
  /* background: linear-gradient(90deg, rgba(53, 42, 226, 1) 0%, rgba(100, 100, 250, 1) 5%, rgba(254, 254, 254, 1) 5%, rgba(255, 255, 255, 1) 100%); */
  /* background: aqua; */
}

.card-activity-header {
  font-size: 1.5em;
  margin: 15px;
  color: #777;
}
.card-activity {
  height: 210px;
}
.card-grip {
  display: flex;
  justify-content: center;
  margin-top: 3px;
}


form.is-readonly .btn-save {
  display: none;
}
form.is-readonly input[disabled],
form.is-readonly textarea[disabled] {
  cursor: text;
  background-color: #fff;
  border-color: transparent;
  outline-color: transparent;
  box-shadow: none;
}
form.is-editing .btn-edit {
  display: none;
}
.form-group {
  display: flex;
}
.form-group label {
  /* width: 160px; */
  vertical-align: middle;
}
.form-row {
  /* margin-bottom: 16px; */
}

.portfolio-section-title {
  font-size: 22px;
  /* margin-left: 20px; */
  /* font-variant: small-caps; */
  /* font-weight: 600; */
  color: #5e5e5e;
  font-family: Poppins;
}

.tag-container {
  width: 100%;
  display: flex;
  justify-content: start;
  /* color: #343a40; */
}

.tag-container-row {}

#tag-list {
  list-style: none;
  margin: 0px;
  margin-top: 0px;
  padding: 0px;
  display: inline-block;
  white-space: nowrap;
}

.tag-li {
  display: inline-block !important;
  font-size: 12px;
  font-weight: 600;
  margin-right: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: #8886868f;
  padding: 0 10;
  padding: 0px 8px;
  border-radius: 4px;
  line-height: 25px;
  background-color: #ffffff;
  color: #414141;
}

/*
.tag-real-estate {
  background-color: #e4a54bde;
  color: white;
}
.tag-life-settlements {
  background-color: #b99c5e;
}
.tag-litigation-finance {
  background-color: #8f88aa;
}
.tag-medical-receivables {
  background-color: #b398b3;
}
.tag-housing {
  background-color: #88a567;
}
.tag-office {
  background-color: #747e87;
}
.tag-industrial {
  background-color: #747e87;
}
.tag-retail {
  background-color: #747e87;
}
.tag-hospitality {
  background-color: #747e87;
}
.tag-equity {
  background-color: #73a9dc;
}
.tag-debt {
  background-color: #e29a74;
}
*/

/* offcanvas and general */
.tag-inactive {
  background-color: transparent;
  color: #242424;
  margin-right: 10px;
  font-style: normal;
}
/* card, on dark bg */
.card-heading .tag-inactive {
  background-color: transparent;
  color: #6c757d;
}
.tag-inactive:before {
  content: "\f023";
  font-family: FontAwesome;
  font-size: 16px;
}
.edit-investment-button {
    font-size: 16px;
}

.card-inner .chart-time-selector {
  display: flex;
  justify-content: space-between;
}


.period-selector,
.duration-selector {
  white-space: nowrap;
}

.duration-selector a {
  color: #ee693e;
  font-weight: 500;
  width: 2e;
  display:  inline-block;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 16px;
  vertical-align: bottom;
}

.duration-selector .durationSelected {
  color: white;
  background-color: #f49358;
  font-weight: 500;
}



.period-selector a {
  color: #2f2f2f;
  font-weight: 500;
  width: 2e;
  display: inline-block;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 13px;
  line-height: 16px;
  vertical-align: bottom;
}

.period-selector .periodSelected {
  color: white;
  background-color: #2f2f2f;
  font-weight: 500;
}





hr {
  margin: 0px;
  /* border: 0; */
}

.big-number-row {
  display: flex;
  justify-content: space-between;
  /* margin-top: 10px; */
  /* margin-bottom: 10px; */
}

.big-number-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: gray;
  margin-bottom: 8px;
  /* font-variant: all-petite-caps; */
  flex-grow: 1;
  margin-top: 8px;
  /* border-style: solid; */
  /* padding: 9px; */
  /* margin-left: 5px; */
  /* margin-right: 5px; */
  /* border-width: 1px; */
  padding-top: 4px;
  padding-bottom: 8px;
  /* border-radius: 4px; */
  /* border-color: gainsboro; */
  background-color: white;
}

.big-number-container-spacer {
  width: 10px;
}

.big-number {
  font-size: 19px;
  font-weight: 700;
  color: #444;
  text-align: center;
  font-family: 'Poppins';
}

.chart-time-selector .button {
  color: gray;
  font-size: 13px;
}

.title-period-spacer {
  width: 10px;
}

.period-duration-spacer {
  flex-grow: 1;
  /* min-width: 20px; */
}

/*
.demo-card-0 {
  transform: rotateZ(-8deg) scale(0.9);
  filter: drop-shadow(0 20px 6px #ddd);
}
*/
.demo-card {
  width: 70%;
}


.item {
  display: flex;
  margin: 10px;
  flex-direction: column;
  height: 150px;
  padding: 10px 10px 0 10px;
  border-radius: 2px;
  background-color: #444;
  border: 1px solid #242424;
}

.meta-title {
  font-weight: 600;
  margin: 4px;
  font-size: 22px;
  color: #343a40;
}

.meta-percent {
  display: block;
  font-family: sans-serif;
    color: #888;
    font-size: 16px;
    margin-left: 6px;
    font-weight: 400;
}

.meta-describe {
  display: block;
  /* font-family: Arial, Helvetica, sans-serif; */
  display: block;
  font-size: 13px;
  font-weight: 600;
  /* margin: 0px 8px; */
  color: #888;
  text-align: left;
width: 100%;margin-left: 10px;font-variant: all-small-caps;/* text-decoration: underline; */}

.card-card {
  height: 60px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  border-radius: 8px;
  align-items: center;
  border-style: solid;
  border-width: 1px;
  border-color: #dcdcdc73;
  height: 70px;
  flex-direction: column-reverse;}


.card-alert {
  padding: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  /* margin-top: 3px; */
  line-height: 38px;
  /* vertical-align: baseline; */
}

.card-alert i {
  color: #ff5a24;
  margin-right: 4px;
  font-size: 1.4em;
}

.card-check {
  padding: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  margin-top: 3px;
}
.card-check i {
  color: green;
  margin-right: 4px;
}

.chart-container {
  padding: 5px;
}
.chart-inner-container {
  background-color: #fff;
}


.income-chart-small
 {
  height: 100px;
}

#card-container-0 {
  margin-bottom: 16px;
  min-height: 350px;
}

#search, #sort, #filter {
  /* max-width: 130px; */
  /* margin-left: 10px; */
  border-radius: 5px;
}

#search-box {
  /* display: flex; */
  /* min-width: 200px; */
  /* width: 100%; */
  /* display: none; */
}
.btn-search {
  padding: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: lightgray;
}

.chart-title {
  color: #777;
  font-weight: 700;
  font-size: large;
  margin-left: 10px;
}

.chart-icon {
  margin-right: 6px;
}


#activity-container {
  background-color: white;
}

.activity-box {
  /* background-color: white; */
  /* padding: 10px; */
  /* margin-top: 10px; */
  /* padding-top: 20px; */
}
.big-activity-box {
  /* margin: 10px; */
}

.ph-active {
  opacity: 0;
}
.ph-inactive {
  display: none;
}

#offcanvasCount,
#offcanvasInvestment,
#offcanvasEditInvestment,
#offcanvasTransaction,
#offcanvasInvestmentTools{
  width: 800px;
}
#oc-calculations-table_wrapper {
  padding: 10px;
}
.offcanvas-body .activity-container {
  margin-bottom: 20px;
}
.offcanvas-body .tag-container {
  margin-bottom: 20px;
}
.hidden-button {
  width: 0px;
  height: 0px;
  display: none;
}

#myTab {
  display: none;
}
#myTabContent {
  /* background-color: #e5ecff4d; */
}

.new-activity-row {
  max-width: 400px;
}

.input-sponsor-name-hidden {
  display: none;
}
.input-sponsor-name-hidden {
  display: visible;
}

.demo-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#submit-transaction-status,
#submitting-transaction-spinner {
 color: #0d6efd; 
}

.card-expand {
  /* cursor: pointer; */
  /* font-size: small; */
}
.footnote {
  font-style: italic;
}

.offcanvas-body .card-expand {
  display: none
}

#new-distribution-form {
  width: 100%;
}

/*
.activity-box .dataTable-table td:nth-child(5) {
  text-align: right;
}
.offcanvas-body .dataTable-table td:nth-child(3) {
  text-align: right;
}
*/

.card-inner .btn-primary {
  width: 40%;

}

.button-row {
  display: flex;
  justify-content: end;
  padding: 0px;
}

.card-form {
  margin-left: 1px;
  margin-top: 5px;
}

.hamburger-hint {
  font-size: 13px;
  font-style: italic;
  line-height: 50px;
}


/* Form Wizard */
.fw {
  display: block;
  position: relative;
  /* width: 400px; */
  /* max-height: 90%; */
  padding: 12px 22px;
  border-radius: 5px;
  /* box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2), 0 2px 30px rgba(0, 0, 0, 0.1); */
  overflow: auto;
}

/*===============
Form Title
===============*/

.fw__title {
  text-align: center;
  color: #5E3C58;
}

/*===============
Form Progress
===============*/
.fw__progress {
  margin-bottom: 24px;
}

.fw__breadcrumbs {
  display: flex;
  padding: 0;
  margin: 0 auto;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  list-style: none;
}

.fw__breadcrumbs .fw__breadcrumbs__item {
  display: inline-block;
  position: relative;
}

.fw__breadcrumbs .fw__breadcrumbs__item:not(:last-child) {
  padding-right: 12px;
}

.fw__breadcrumbs .fw__breadcrumbs__element {
  width: 14px;
  height: 14px;
  padding: 4px;
  border-radius: 50%;
  border: 1px solid #aaa;
  transition: all 0.3s;
}

.fw__breadcrumbs .fw__breadcrumbs__element.fw__breadcrumbs__element--active {
  background: var(--altracka-green);
}

.fw .title {
  font-size: 24px;
  margin-bottom: 12px;
}

/*===============
Form Input Fields
===============*/
.fw__inputs {
  border: none;
  padding: 16px 0;
  margin: 0;
  transition: all 0.3s;
}

.fw__inputs input,
.fw__inputs label,
.fw__inputs {
  display: block;
}

.fw__inputs input {
  /* width: 100%; */
  /* height: 32px; */
  /* margin: 4px 0 16px; */
}

.fw__inputs input[type="text"],
.fw__inputs input[type="email"],
.fw__inputs input[type="number"] {
  padding: 4px 8px;
  outline: none;
  border: none;
  background-color: #EFEFEF;
  transition: all 0.3s;
}

.fw__inputs input[type="text"]:hover,
.fw__inputs input[type="email"]:hover,
.fw__inputs input[type="number"]:hover {
  opacity: 0.7;
}

.fw__inputs input[type="text"]:focus,
.fw__inputs input[type="email"]:focus,
.fw__inputs input[type="number"]:focus {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  opacity: 0.7;
}

.fw__inputs .fw__inputs__label {
  display: block;
  padding: 0 8px;
  color: #BFB5B2;
  font-size: 12px;
  text-transform: uppercase;
}

.fw__inputs .fw__inputs__label.fw__inputs__label--inline {
  display: inline-block;
}

.fw__inputs .fw__inputs__selector {
  display: inline-block;
  min-width: 160px;
  height: 32px;
  padding: 4px 8px;
  margin-bottom: 16px;
  border: none;
  color: #BFB5B2;
  background-color: #EFEFEF;
  -webkit-appearance: unset;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
}

.fw__inputs .fw__inputs__selector:hover {
  opacity: 0.7;
}

.fw__inputs__error {
  display: flex;
  width: 100%;
  height: 32px;
  margin-bottom: 16px;
  border: 1px solid darkred;
  border-radius: 2px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.fw__inputs__error .fw__inputs__error--message {
  margin: 0;
  color: darkred;
}

/*===============
Results
===============*/

.fw__result {
  transition: all 0.3s;
}

.fw__result__title {
  text-align: center;
  color: #5E3C58;
}

.fw__result__item {
  display: block;
  width: 100%;
  margin: 16px 0;
}

.fw__result__label {
  display: block;
  margin-bottom: 4px;
  color: #2E4045;
}

.fw__result__value {
  display: block;
  color: #83adb5;
  word-wrap: break-word;
}

.fw__result__button {
  width: 100%;
  height: 40px;
}

/*===============
Icons
===============*/
.done {
  display: inline-block;
  transform: rotate(45deg);
  height: 12px;
  width: 6px;
  border-bottom: 4px solid lightgreen;
  border-right: 4px solid lightgreen;
}

/*===============
Components
===============*/
.fw__button {
  cursor: pointer;
  transition: all 0.3s;
}

.fw__button--negative {
}

.fw__button:hover {
  opacity: 1;
}

/* This is how form wizards hides pages. Since I'm using BS, can chance the code to use collapsed or something. */
.hidden {
  display: none;
}

#new-investment-form {
  min-height: 420px;
}


/* Image radio button in new investment dialog */

div.radio-with-Icon {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1;
}

div.radio-with-Icon p.radioOption-Item {
  display: inline-block;
  width: 100px;
  /* height: 100px; */
  box-sizing: border-box;
  /* margin: 25px 15px; */
  border: none;
  margin-left: 5px;
  margin-right: 5px;
  /* margin-bottom: 30px; */
}

div.radio-with-Icon p.radioOption-Item label {
  display: block;
  height: 95px;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--altracka-green);
  color: var(--altracka-green);
  cursor: pointer;
  /* opacity: .8; */
  transition: none;
  font-size: 13px;
  /* padding-top: 25px; */
  text-align: center;
  /* margin: 0 !important; */
}

div.radio-with-Icon p.radioOption-Item label:hover,
div.radio-with-Icon p.radioOption-Item label:focus,
div.radio-with-Icon p.radioOption-Item label:active {
  opacity: .5;
  background-color: var(--altracka-green);;
  color: #fff;
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item label::after,
div.radio-with-Icon p.radioOption-Item label:after,
div.radio-with-Icon p.radioOption-Item label::before,
div.radio-with-Icon p.radioOption-Item label:before {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item label i.fa {
  display: block;
  font-size: 32px;
  margin-bottom: 4px;
}

div.radio-with-Icon p.radioOption-Item label i.short {
  margin-top: 10px;
}

div.radio-with-Icon p.radioOption-Item input[type="radio"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

div.radio-with-Icon p.radioOption-Item input[type="radio"]:active~label {
  opacity: 1;
}

div.radio-with-Icon p.radioOption-Item input[type="radio"]:checked~label {
  opacity: 1;
  border: none;
  background-color: var(--altracka-green);
  color: #fff;
}

div.radio-with-Icon p.radioOption-Item input[type="radio"]:hover,
div.radio-with-Icon p.radioOption-Item input[type="radio"]:focus,
div.radio-with-Icon p.radioOption-Item input[type="radio"]:active {
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item input[type="radio"]+label:before,
div.radio-with-Icon p.radioOption-Item input[type="radio"]+label:after {
  margin: 0 !important;
}


/* https: //codepen.io/ys-programmer/pen/rNxmLqm 
Makes the table collapse into card-like chunks when too narrow.
*/

.table {
  width: 100%;
  border-collapse: collapse;
}

.table td,
.table th {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: right;
  font-size: 16px;
}

.table th {
  /* altrackaGrey1 */
  background-color: #4a4444;
  color: #ffffff;
  font-weight: 500;
}

.table tbody tr:nth-child(even) {
  /* altrackaBlue3 */
  background-color: #0477ee22;
}

/*responsive*/

@media (max-width: 500px) {
  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: 15px;
  }

  .table td {
    padding-left: 50%;
    text-align: left;
    position: relative;
  }

  .table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
  }
}

/* These are for the card tables, probably not for the offscreen tables: */

.card-table td {
  padding: 2px !important;
  margin: 0px !important;
  font-size: 12px;
  /* border-bottom-width: 1px; */
  width: 50%;
}

.card-table {
  margin-top: 10px;
  width: 100%;
}

.card-table-container {
  padding-left: 20px;
}


.ticker-arrow {
  font-size: 13px;
}

.fa-arrow-up {
  color: #0b0;
}

.fa-arrow-down {
  color: orangered;
}

.ticker-arrow-label {
  font-size: 11px;
}

.cont-dist-chart-container {
  max-height: 60px;
  display: flex;
  width: 100%;
}
.card-inner .cont-dist-chart-container {
  max-height: 70px;
  display: flex;
  margin-bottom: 6px;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
}
.card-inner .cont-dist-chart-wrapper {
  flex-grow: 1;
  /* The following two lines are the key to resizing the chart.
    Position must be relative, and width must be set, however width
    can be set to anything- 100%, 1%, 42px... all work the same. */
  position: relative;
  width: 1px;
}

.card-inner .cont-dist-chart-labels {
  line-height: 14px;
}

.cont-dist-chart-container-detailed {
  display: flex;
  flex-direction: row;
  padding: 5px;
  width: 100%;
}

.cont-dist-chart-container-detailed .cont-dist-chart-labels {
  /* font-size: 15px; */
}

#cont-dist-chart-overall {
  height: 150px !important;
}
@media only screen and (max-width: 700px) {
  #cont-dist-chart-overall {
    height: 180px !important;
  }
}

#cont-dist-chart-investment {
  height: 150px !important;
}
@media only screen and (max-width: 700px) {
  #cont-dist-chart-investment {
    height: 180px !important;
  }
}

.cont-dist-chart-labels {
  font-size: 11px;
  text-wrap: nowrap;
  margin-top: 22px;
  line-height: 28px;
}
.card-inner .cont-dist-chart-labels {
  width: 130px;
  font-size: 11px;
  margin-top: 12px;
  line-height: 16px;
}

.cont-dist-chart-wrapper {
  /* width: 100%; */
  /* flex-grow: 1; */
  flex-grow: 1;
    /* The following two lines are the key to resizing the chart.    */
    /* position must be relative, and width must be set, however width can be set to anything- 100%, 1%, 42px... all work the same. */
  position: relative;
  width: 1px;
}
.card-inner .cont-dist-chart-wrapper {
  width: 1px;
  height: 55px;
}

.income-container-detailed {
  /* margin: 10px; */
  /* padding: 20px; */
  margin-top: 10px;
  padding-top: 20px;
}
.income-chart-container-large {
  height: 200px;
}
.income-chart-container-small {
  height: 145px;
}
.income-stats {
  font-size: small;
    font-weight: 500;
    margin: 5px;
}

/* See comments in php that I will set the height of allocation-chart-container-detailed
and capital-stack-chart-container-detailed dynamically, based on the number of bars in
the allocation chart. And analysis-containter-detailed unless it can be scaled to its
two children. */
.allocation-chart-container-detailed {
  height: 230px;
  padding: 20px;
}
.capital-stack-chart-container-detailed {
  height: 230px;
  padding: 15px;
}
.analysis-container-detailed {
  /* height: 240px; */
  /* padding: 20px; */
  /* margin: 10px; */
}
.performance-container-detailed {
  height: 100%;
  padding: 20px;
  margin: 10px;
}

/* adjust the spacing of the title and sponsor sections of the cards */
.card-item {
  /* block-size: 40px; */
}

.full-width {
  padding-left: 10px;
  padding-right: 10px;
}

.metrics-changes-container {
  display: flex;
  justify-content: space-around;
}

.recent-income {
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 10px;
}

#oc-chart-title {
  font-size: x-large;
  padding: 10px;
}
#chart-calculation {
  padding: 10px;
}

.income-chart-super-container-detailed {
  padding: 10px;
}

.card-bottom-tray {
  display: flex;
  /* justify-content: space-between; */
  margin-top: 5px;
  /* justify-content: end; */
}
.card-bottom-tray button {
  /* padding: 0.1rem 0.3rem; */
}

.card-top-tray {
  display: flex;
  /* justify-content: space-between; */
  /* justify-content: end; */
}

.card-bottom-tray button {
  /* padding: 0.1rem 0.3rem; */
}

.get-started-button {
  /* background-color: #0b0; */
  /* color: white; */
}

.room-for-calendar {
  padding-bottom: 20px;
}

.TransactionWrap .col-2 {
  margin-bottom: 10px;
  padding: 4px;
}
.TransactionWrap .col-3 {
  margin-bottom: 10px;
  padding: 4px;
}
.TransactionWrap .col-6 {
  margin-bottom: 10px;
  padding: 4px;
}

.dataTable-bottom {
   padding: 8px 10px;
   display: flex;
   justify-content: space-between;
 }
 .dataTable-info {
   margin: 0px 0;
 }

 div.dataTables_wrapper {
   width: 100%;
   margin: 0 auto;
 }

 .dataTables_info .select-info {
  margin-left: 20px;
 }

 .altracka-offcanvas-header {
  justify-content: end;
 }

 /*
 .em-container {
  width:30%;
  flex-grow: 1;
 }

 .thing {
  
 }
 */

#oc_activity_table {
   /* white-space: nowrap; */
}
#activity_table {
   /* white-space: nowrap; */
}
#oc_activity_table td,
#oc_activity_table th
{
  /* doesn't seem to matter on oc bc width is 100% */
}
#activity_table td,
#activity_table th
{
  padding: 0px 20px;
}
#activity_table.dataTable tbody td {
  vertical-align: bottom;
}
 #activity_table_wrapper {
  /* padding: 10px; */
 }
.activity-table-button {
  background-color: transparent;
  border: none;
}
.activity-table-button i {
  color: #686868;
}

#oc-calculations-table {
  width: 90% !important;
}

/* investment modal */
.radio-group {
  margin-bottom: 30px;
}

.button-group {
  margin-bottom: 20px;
}

.counter {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 10px;
}

.posts {
  clear: both;
  list-style: none;
  padding-left: 0;
  width: 100%;
  text-align: left;
}

.posts li {
  /* background-color: #fff; */
  /* border: 1.5px solid #d8d8d8; */
  /* border-radius: 10px; */
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  /* margin-bottom: 10px; */
  /* word-wrap: break-word; */
  min-height: 42px;
  /* box-shadow: 8px 8px 5px #888888; */
}

.comment-container {
  padding-top: 20px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.comment-controls {
  display: flex;
  justify-content: end;
}

.form-button-panel {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.comment-container .fas {
  color: #ff865f;
  font-size: larger;
}

.capital-calls-container {
  margin-top: 8px;
  margin-bottom: 8px;
}

.k1-tracking-container {
  margin-top: 8px;
  margin-bottom: 8px;
}

.offcanvas .dt-buttons {
  /* margin-bottom: 30px; */
}

.dt-buttons .btn-secondary {
  background-color: #ffffff;
  color: black;
}

.leading_investments {
  display: flex;
}
.leading_investments_name {
  font-weight: 500;
}

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  opacity: 0;
}

input::placeholder {
  color: gray;
  padding: 7px;
  margin: 7px;
  border: 2px;
}


.todo-container {
  display: flex;

  justify-content: center;
  align-items: center;
}
.todo-list {
  display: flex;
  flex-direction: column;
  padding: 2px;
  width: 100%;
}
.todo {
  margin-block-end: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s ease;
  flex-direction: column;
}
.todo-tray {
  display: flex;
  justify-content: end;
  width: 100%;
}
.todo-container-top-tray {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.todo-textdiv {
  width: 100%;
}
#edit-investment-button {
  margin-left: 20px;
  font-size: 0.7em;
  cursor: pointer;
}

#altracka-navbar-filters {
  display: flex;
  flex-grow: 1;
}
#altracka-navbar-account {
  display: flex;
}
.altracka-navbar-buttons {
  display: flex;
  white-space: nowrap;
  font-size: 0.9em;
}
.altracka-navbar-icon {
  font-size: 1.2em;
  color: #ccc;
}
@media only screen and (max-width: 500px) {
    .navbar-long-words {
      font-size: 12px;
    }
}
@media only screen and (max-width: 460px) {
    .navbar-long-words {
      display: none;
    }
}

.navbar-long-words {
  /* vertical-align: bottom; */
}




.altracka-nav-flex-container {
  display: flex;
}
.altracka-navbar-2 {
  display: flex;
  padding: 10px;
  /* padding-right: 5px; */
  /* margin-left: 20px; */
  /* margin-right: 20px; */
  justify-content: space-between;
}
.altracka-navbar-2 .row {
  width: 100%;
}
.navbar a {
  color: #ebebeb;
}
.navbar .fas {
  color: #ccc;
  margin: 10px;
}.navbar .lg-icon {
  font-size: 1.4em;
}
.dropdown-toggle.nav-link {
  color: white;
}
.nav-item .dropdown-menu {
  background-color: #18181b;
  width: 240px;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}
.nav-content {
  display: flex;
  align-items: center;
  padding: 2;
}

#overall-xirr-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
#overall-nav-container {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#porfolio-page-content {
  background-color: #fff;
}

table tr {
  height: 28px;
}

.template-info-container .row {
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 0.85em;
}

.template-info-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

.template-info-container p {
  min-height: 130px;
}

.template-info-row {
  display: flex;
  flex-direction: row;
}

.template-image {
  /* width: 100%; */
}

/* modal-lg ish */
.template-modal-dialog {
  max-width: 600px;
}

.lightbulb-tip {margin-bottom: 20px;}

.lightbulb-tip i {
  color: #ff9800;
  margin-right: 4px;
  font-size: 1.2em;
}

.template-modal-footer {
  margin-top: 20px;
}

.template-upload-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.fa-circle-exclamation {
  color: #dc3545;
  font-size: 50px;
}

#delete-investment-link {
  color: red;
}
#close-investment-link {
  color: rgb(10, 31, 188);
}

.screenshot-got-spreadsheets {
  max-width: 280px;
}
.center-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.got-paid-img {
  max-width: 100px;
  display: none;
}
.really-hidden {
  display: none !important;
}
.not-ready-to-render {
  display: none !important;
}
.do-not-take-space {
  display: none !important;
}

/* works but not needed with new navbar layout
@media (max-width: 550px) {
  #sort-droplist {
    display: none;
  }

  #status-droplist {
    display: none;
  }
}
*/

@media (max-width: 450px) {
  #search-box {
    display: none !important;
  }
}

/* This is too broad but trying to ellipsize just sponsor name and deal name.
Problem is the table must be fixed-width for overflow to work, but that doesn't
play nice with Editor */
/*
td {
  overflow: hidden;
  text-overflow: ellipsis;
}
*/
table {
  /* font-size: 0.9em; */
}
th {
  vertical-align: bottom;
  /* padding-left: 3px; */
}

.new-investment-button {
  margin-right: 5px;
}

.danger {
  color: red !important;
}

.sponsor-row {
  display: flex;
  flex-direction: row;
}
.not-found {
  min-width: 70px;
  margin: 5px;
}

.recent-income-table {
  text-align: center;
  width: 100%;
  /* margin-top: 32px; */
}
.recent-income-table td {
  min-width: 140px;
  /* padding-left: 100px; */
}

.recent-income-values {
  font-weight: 600;
  font-size: 24px;
}
.recent-income-labels {
  font-weight: 400;
  font-size: 18px;
  color: gray;
}

#get-started {
  display: flex;
  flex-direction: row;
  margin: 20px;  
}
/* margin on all children */
#get-started > * {
  /* margin: 20px; */
}
#get-started ul {
  margin-top: 20px;
}

#exit-demo-mode-button {
}


/* Only want 100% if income, either overall or investment offcanvas */
#overall-income-container .counts-card-content-2 {
  width: 100%;
}
.metric-nonequity_return .counts-card-content-2 {
  width: 100%;
}
#overall-income-container .counts-card-content {
  height: 90%;
}

.metric-nonequity_return .counts-card-content {
  height: 85%;
}

#oc-calculations-table {
  /* font-family: Lucida Console, Lucida Sans Typewriter, monaco, Bitstream Vera Sans Mono, monospace; */
  /* font-size: 1em; */
  /* color: #6c6c6c; */
}

.spinner-grow {
  display: block;
  margin: 5px;
  animation-duration: 1s;
}
.stop {
  animation-name: none !important;
  -webkit-animation-name: none !important;
}
.spinners {
  display: flex;
  flex-direction: row;
  position: fixed;
  z-index: 1060;
  top: 20%;
  left: 50%;
  /* half the width: */
  margin-left: -65px;
  pointer-events: none;
}

.single-card-container .spinner-grow {
  display: block;
  margin: 5px;
  animation-duration: 1s;
}

.single-card-container .stop {
  animation-name: none !important;
  -webkit-animation-name: none !important;
}

.single-card-container .spinners {
  display: flex;
  /* flex-direction: row; */
  position: fixed;
  z-index: 2060;
  top: 40%;
  left: 50%;
  /* half the width: */
  margin-left: -22px;
  pointer-events: none;
}





.altracka-count-box-container .spinner-grow {
  display: block;
  margin: 5px;
  animation-duration: 1s;
}

.altracka-count-box-container .stop {
  animation-name: none !important;
  -webkit-animation-name: none !important;
}

.altracka-count-box-container .spinners {
  display: flex;
  /* flex-direction: row; */
  position: fixed;
  z-index: 2060;
  top: 40%;
  left: 100px;
  /* half the width: */
  margin-left: -22px;
  pointer-events: none;
}


#get-started-container {
  padding: 50px;
  flex-direction: column;
  display: flex;
  background-color: white;
}

.get-started-img-lg {
  width: 100%;
  max-width: 400px;
}


[data-dte-e="label"] {
  float: left;
  width: 50%;
}

[data-dte-e="input"] {
  float: right;
  width: 50%;
}

.editor-footnote {
  left: 15px;
  position: absolute;
  display: flex;
  flex-direction: column;
}


/*
.card-icons i {
  color: #444444d4;
  margin-left: 6px;
}

.card-icons i:hover {
  color: rgb(9, 165, 30);
  font-weight: 900;
}
*/

/*
.card-icons i {
  position: relative;
}

.card-icons i::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-in-out;
}

.card-icons i:hover::before {
  transform: scaleX(1);
}

.card-icons i[data-animation="to-left"] a::before {
  transform-origin: right;
}

.card-icons i[data-animation="center"] a::before {
  transform-origin: center;
}
*/

/** Flatted button %placeholder **/
.btn-iconed.btn-flat {
  border-radius: 0rem;
  /* margin-right: 2rem; Icon sample spacing */
}

/** Rounded button **/
.btn-rounded {
  /* border-radius: 2rem; */
  /* margin-right: 2rem;  Icon sample spacing */
}

/** Button Iconed **/
.btn-iconed {
  transition: .15s ease-in-out;
  /* padding-left: 1.3rem; */
  /* padding-right: 1.5rem; */
  /** Flatted button **/
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}







.navbar-button-container {
  /* min-width: 260px; */
  display: flex;
  /* flex-flow: row-reverse; */
  margin-top: 10px;
}

/* multiselect dropdown js is going to hide this and create its own thing. This hides it until then. */
#filter-droplist {
  display: none;
}

#filter-droplist-container {
  width: 100%;
}

#sort-droplist {
  /* width: 100%; */
  margin-right: 4px;
  max-height: 36px;
  border-color: #989898;
  border-radius: 6px;
}

.submit-investment.disabled {
  background-color: gray;
  border-color: lightgray;
}

.angel-svg {
  width: 50px;
}

#final_transaction {
  /* margin-left: 20px; */
}

.nav-input-container {
  display: flex !important;
}

.nav-label {
  display: flex;
  /* justify-content: space-between; */
}

.date-label {
  display: flex;
}

.DTE_Form_Content .col-form-label {
  display: flex;
  justify-content: space-between;
}

.DTE_Label_Info {
  margin-left: 4px;
  font-size: 14px;
  line-height: 27px;
  color: gray !important;
}

.DTE_Field_Name_transaction_comment {
  flex-direction: column;
}

/* child combinator and attribute selector */
.DTE_Field_Name_transaction_comment > [data-dte-e] {
  width: 100%;
}

.DTE_Field_Name_transaction_comment textarea {
  font-size: 14px;
}
#comment-textarea {
  font-size: 14px;
  background-color: white !important;
}

#accordionTransactionInfo {
  margin-top: 16px;
}

.details-span {
  font-family: 'Poppins';
  font-variant: normal;
  font-size: 12px;
  /* color: #444444d4; */
  font-weight: 500;
}

.card-count-heading {
  display: flex;
  /* justify-content: space-between; */
  /* margin-bottom: 4px; */
}

.svg-cards {
  width: 32px;
  height: 30px;
  display: inline-block;
  stroke-width: 16px;
}

#both-buttons-container, 
#both-droplists-container {
  display: flex;
  margin-top: 8px;
}


/* nice for large buttons but not for everywhere */
/*
a {
  text-decoration: none;
  color: inherit;
}

.btn-altracka {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all .2s ease;
}

.btn-altracka:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 28px;
  background: rgb(220 125 57 / 33%);
  width: 56px;
  height: 56px;
  transition: all .3s ease;
}

.btn-altracka span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.btn-altracka svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all .3s ease;
}

.btn-altracka:hover:before {
  width: 100%;
  background: #ffab9d;
}

.btn-altracka:hover svg {
  transform: translateX(0);
}

.btn-altracka:active {
  transform: scale(0.96);
}
*/




/*
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*/

/* Currently styling with only what is necessary. Add ideas below. */
.btn-altracka {
  /* need this if no addition styling */
  /*
  line-height: 0px;
  */
}



.btn-altracka {
  display: inline-block;
  font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  padding-left: 0.7em;
  padding-top: 0.2em;
  padding-right: 2.8em;
  padding-bottom: 0.2em;
  /* background: #009ED8; */
  background: #8e8e8e;
  border: none;
  color: white;
  transition: .2s;
  font-size: 14px;
  /* got-paid needs this to prevent scrollbar on animation. but it's probably related to other settings like padding.: */
  margin-right: 3px;
  white-space: nowrap;
}

.btn-altracka.hidden {
  display: none
}

.btn-altracka .spn,
.btn-altracka .spn
{
  margin-right: 10px;
}

.btn-altracka:before,
.btn-altracka:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-top: inherit;
  padding-bottom: inherit;
  width: 2.0em;
  content: "\00a0";
  font-family: 'FontAwesome', sans-serif;
  font-size: 14px;
  text-align: center;
  transition: .2s;
  transform-origin: 50% 60%;
}

.btn-altracka:before {
  background: '#0f0' /* fadeout(#000, 90%); don't see that this does anything */;
  /* background-color: black; */
}

.btn-altracka:hover {
  background: #83a849d4;
  /* needs to be in hover as well as normal for some reason: */
  color: white;
}







/* start details and got-paid */
.btn-altracka.details,
.btn-altracka.got-paid,
.btn-altracka.get-started,
.btn-altracka.tools
{
  background: #616161;
  font-weight: 500;
  font-size: 12px;
  /* This controls the overall width of the buttons. This is set big since there is lots of
  space, but reduce it if needed: */
  padding-right: 1.5em;
  padding-left: 0.5em;
  padding-top: 0.4em;
  padding-bottom: 0.4em;  
}

.btn-altracka.details:hover,
.btn-altracka.got-paid:hover,
.btn-altracka.get-started:hover,
.btn-altracka.tools:hover
{
  background: #797979;   
}

.btn-altracka.details:after,
.btn-altracka.got-paid:after,
.btn-altracka.get-started:after,
.btn-altracka.tools:after
{
  font-size: 10px;
  line-height: 18px; 
}

.btn-altracka.get-started {
  background: #1acc8d;   
}
.btn-altracka.get-started:after {
  background: #1acc8d; 
}

.btn-altracka.details:hover,
.btn-altracka.got-paid:hover,
{
}
.btn-altracka.get-started:hover {
  background: #00b676;    
}

.btn-altracka.details:after {
  content: "\f201";
}
.btn-altracka.got-paid:after {
  content: "\24";  
}
.btn-altracka.get-started:after {
  content: "\f1d8";  
}
.btn-altracka.tools:after {
  content: "\f0ad";  
}

.btn-altracka.details:hover:after,
.btn-altracka.got-paid:hover:after,
.btn-altracka.get-started:hover:after,
.btn-altracka.tools:hover:after
{
  -webkit-animation: bounceright .3s alternate ease infinite;
  animation: bounceright .3s alternate ease infinite;
}
.btn-altracka.get-started:hover:after {
  background: #00b676;    
}

.btn-altracka.got-paid,
.btn-altracka.get-started,
.btn-altracka.details,
.btn-altracka.tools
{
  margin-right: 4px;
}




.dt-buttons .btn-altracka {
  background: #0d6efd;
  color: white;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  top: 0.0px;  
  /* This controls the overall width of the buttons. This is set big since there is lots of
  space, but reduce it if needed: */
  padding-right: 0.8em;
  border-style: solid;
  border-width: 0px;
  margin-top: 6px;
}

.dt-buttons .btn-altracka:hover {

}

.dt-buttons .btn-altracka:hover:after {
  -webkit-animation: wiggle .3s alternate ease infinite;
  animation: wiggle .3s alternate ease infinite;
}

.dt-buttons .btn-altracka:before,
.dt-buttons .btn-altracka:after {
  font-size: 10px;
  line-height: 20px;
}






.btn-altracka.edit {
  background: #ffffff;
  color: #4e4e4e;
  font-weight: 400;
  font-size: 11px;
  /* line-height: 11px; */
  top: 0.0px;  
  /* This controls the overall width of the buttons. This is set big since there is lots of
  space, but reduce it if needed: */
  padding-right: 0.8em;
  border-style: solid;
  border-width: 1px;
  border-color: #8886868f;
}

.btn-altracka.edit:hover {
 
}

.btn-altracka.edit:after {
  content: "\F304";
}

.btn-altracka.edit:hover:after {
  -webkit-animation: wiggle .3s alternate ease infinite;
  animation: wiggle .3s alternate ease infinite;
}

.btn-altracka.edit:before,
.btn-altracka.edit:after {
  font-size: 10px;
  line-height: 20px;
}


.btn-altracka.edit.nag {
  background: #f06629;  
  color: #ffffff;
  border-color: white;
  font-weight: 600;
}
.btn-altracka.edit.nag:after {
  -webkit-animation: wiggle .3s alternate ease infinite;
  animation: wiggle .3s alternate ease infinite;
}

/* comment basically doens't have body that's visible- only an :after */
.btn-altracka.comment {
  background: #f8845da6;
  font-size: 16px;
  line-height: 24px;
  padding-right: 0.0em;
  padding-left: 0.0em;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  margin-right: 0px;
  margin-bottom: 0px;
  border-radius: 10px;
}

.btn-altracka.comment:hover {
  background: #ef7a45e0;
  /* darker */
}

.btn-altracka.comment:after {
  content: "\f075";
  font-size: 16px;
  line-height: 24px;
  background: #ef885ae0;
  border-radius: 5px; 
  color: white; 
}

.btn-altracka.comment:hover:after {
  /* animation triggers scrollbars on tables */
  background: #e94f0ae0;  
}



.btn-altracka.breakdown {
  background: #c9392c;
  font-size: 14px;
  line-height: 24px;
  border-color: #c9392c;
  border-width: 1px;
  border-style: solid;
  padding-right: 1.6em;
  padding-left: 0.4em;
  padding-top: 0.0em;
  padding-bottom: 0.0em;
  margin-right: 0px;
  border-width: 0px;
}

.btn-altracka.breakdown:hover {
  background: #dd2817;
  /* darker */
}

.btn-altracka.breakdown:after {
  content: "\e522";
  font-size: 14px;
  line-height: 24px; 
}

.btn-altracka.breakdown:hover:after {
  -webkit-animation: bounceright .3s alternate ease infinite;
  animation: bounceright .3s alternate ease infinite;
}




.btn-altracka.overview,
.btn-altracka.investments
{
  background: #ffffff00;
  color: #2ec08d;
  font-size: 14px;
  height: 35px;
  padding-right: 1.6em;
  border-color: #05b073;
  border-width: 1px;
  border-style: solid;
}

.btn-altracka.overview:hover,
.btn-altracka.investments:hover
{
  background: #05b07388;
  /* darker */
}

.btn-altracka.overview.active,
.btn-altracka.investments.active
{
  /* border-color: #85c08f; */
  /* border-width: 3px; */
  /* border-style: solid; */
  /* color: white; */
  background: #2ec08d;
  color: #ffffff;  
  outline: none;
  box-shadow: none;  
}

.btn-altracka.overview:after,
.btn-altracka.investments:after
{
  font-size: 18px;
  line-height: 32px;  
}

.btn-altracka.overview:after
{
  content: "\e473";
}
.btn-altracka.investments:after
{
  content: "\f1ad";
}


.btn-altracka.overview:hover:after,
.btn-altracka.investments:hover:after
{
  /* no animations. On mobile they like to stay animated after pressed. */
}

@media only screen and (max-width: 460px) {
  .btn-altracka.overview,
  .btn-altracka.investments
  {
      padding-left: 20px;
      padding-right: 20px;
  }
}







.btn-altracka#new-investment-button,
.btn-altracka#import-506-button,
.btn-altracka#exit-demo-mode-button,
.btn-altracka#new-todo-modal-button
{
  background: #2c81fd;
  font-size: 14px;
  height: 38px;
  padding-right: 1.7em;
}

.btn-altracka#submit-capital-committed-button
{
  background: #2c81fd;
  font-size: 14px;
  height: 38px;
  padding-right: 0.6em;
}

.btn-altracka#new-investment-button:hover,
.btn-altracka#import-506-button:hover,
.btn-altracka#exit-demo-mode-button:hover
{
  background: #0269ff;
  /* darker */
}

.btn-altracka#new-investment-button:after,
.btn-altracka#import-506-button:after,
.btn-altracka#exit-demo-mode-button:after
{
  font-size: 18px;
  line-height: 32px;  
}

.btn-altracka#new-investment-button:after
{
  content: "\f055";
}
.btn-altracka#exit-demo-mode-button:after
{
  content: "\f2f5";
}


.btn-altracka#new-investment-button:hover:after,
.btn-altracka#exit-demo-mode-button:hover:after
{
  -webkit-animation: bounceright .3s alternate ease infinite;
  animation: bounceright .3s alternate ease infinite;
}





@-webkit-keyframes bounceright {
  from {
    -webkit-transform: translateX(0);
  }

  to {
    -webkit-transform: translateX(3px);
  }
}

@-webkit-keyframes wiggle {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(30deg);
  }
}

@keyframes bounceright {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(3px);
  }
}

@keyframes wiggle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(30deg);
  }
}




.recent-income-container {
  padding: 10px;
}

.recent-income-row {

}


.income-numbers {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  /* margin-top: 0px; */
  /* margin: 10px; */
}

.income-value {
  font-size: x-large;
  align-items: center;
  display: flex;
}

.income-label {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: row;
  text-align: center;
  justify-content: center;
}

.income-box-container {
  margin: 10px;
}

/* Customizing DTE text loses the formatting, so compensate */
.DTE_Header_Content {
  font-size: 22px;
}

.DTE_Form_Buttons {
  display: flex;
  align-items: baseline;
}

#overview-pane {
  /* background: url(../img/overview-bg.jpg);
  background-size: cover; */
  background-color: #f1f3f852;
}

.altracka-count-box-container {
  /* background: red; */
  min-height: 180px;
}

.get-started-text {
  margin-top: 30px;
}

#i-have-more-span {
  margin-right: 10px;
}
#i-have-more-select {
  margin-right: 20px;
  margin-left: 10px;
  display: ;
  height: 36px;
}

.income-rows-spacer {
  height: 10px;
}

/* 506 import table */
.dataframe {
  width: 100%;
  font-size: small;
  margin-top: 10px;
  margin-bottom: 40px;
  border-width: 1px;
}
.dataframe th {
  text-align: start;
}
.dataframe tr {
  /* margin-left: 2px; */
  /* width: 95%; */
}
.dataframe td {
  max-width: 100px;
}
.import-506-inv-name {
  font-size: larger;
  font-weight: 600;
  margin-top: 10px;
}
p.import-506-inv-sponsor {
  font-weight: 500;
}
p.import-506-inv-details
{
  line-height:10px;
}
p.import-506-inv-warning
{
  line-height:10px;
  color: orangered;
  background-color: yell;
}
.import-506-valid {
  border-width: 2px;
  border-color: #52e1ad;
  margin-top: 10px;
}
.import-506-invalid {
  border-width: 2px;
  border-color: #ff0000;
  margin-top: 10px;
}
.import-506-exists {
  border-width: 2px;
  border-color: #dcdcdc;
  margin-top: 10px;
  border-color: 'gray';
  /* background-color: gainsboro; */
  color: #909090;
}
#import506Modal .import-instructions {
  margin: 30px;
}

.validation_error {
  color: red;
}
.validation_error h2 {
  color: red;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 1px;
}

.card-count-title-bar {
  display: flex;
  justify-content: space-between;
  width:  100%;
}

.question-icon {
  padding: 0px;
  font-size: 14px;
  color: #3c3c3c !important;
}

.card-inner .question-icon {
  font-size: 11px;
}

.question-auto-nav {
  margin-right: 12px;
}

.compare-table {
  width: 100%;
}

.altracka-compare-box {
  margin-bottom: 20px;
}

.altracka-compare-box .btn-altracka {
  background: #00000070;
}

.altracka-compare-box.no-data {
  height: 80px;
  color: lightgray;
}

.compare-time-chart {
  margin-top: 10px;
  margin-bottom: 10px;
}


.compare-time-chart-container {
  height: 260px;
}

.too-many-to-plot {
  display: none;
}

.compare-horizontal-chart-container {
  height: 300px;
}

.random-line-chart.no-plot {
  height: 10px !important;
}

/*
.too-many-to-plot {
  text-align: center;
  color: #aaa;
  font-style: italic;
  display: none;
}
*/

.altracka-spinner {
  /* height: 100vh; */
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0.1;
  filter: alpha(opacity=10);
  /* top: 40%; */
  /* left: 150px; */
  margin-left: 150px;
  margin-top: 60px;
  /* margin-top: 50vh; */
}


table {
  font-family: system-ui;
}

#oc_activity_table {
  Font-family: system-ui;
}

.table-bottom-tray {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: 3px;
  margin-top: 5px;
}
.dataTables_info {
  padding-top: 0px !important;
}


#investment-callable-container {
  margin-top: 20px;
}

.capital-calls-called-row td {
}
.capital-calls-today-row td {
  background-color: #9e9e9e21;
}
.capital-calls-projected-row td {
  // background-color: #85e4c2;
}
.capital-calls-projected-in-past-row td {
}
.altracka-success {
  color: #59d2a6;
  font-size: 20px;
  margin-right: 20px;
  /* font-weight: 300; */
}
.altracka-warning {
  color: #ff6927;
  font-size: 20px;
  margin-right: 20px;
}
.fa-hourglass-half{
    font-weight: 100 !important;
}

.inputCapitalCommittedDiv {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  white-space: nowrap;
  align-items: baseline;
}

#inputCapitalCommitted {
  /* width: 260px; */
  margin-left: 10px;
}

.capital-calls-chart-container {
  height: 240px;
  margin-top: 30px;
}

.altracka-spacer {
  flex-grow: 1;
}

.hint-span {
  display: flex;
}

.question-click-on-legend {
  margin-left: 4px;
}

.capital-call-footer {
  display: flex;
}

#overall-capital-metrics-div {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: 6px;
}

.income-chart-container-small .counts-card-title {
  font-size: 18px;
}

#overall-yield-container .altracka-count-box-container {
  display: none;
}

.k1-tracking-container-top-tray {
  margin-bottom: 12px;
}

#k1-radios {
  display: flex;
  margin-bottom: 10px;
}
#k1-radios .form-check {
  margin-right: 20px;
}

#load-demo-investments-spinner {
  margin-left: 10px;
}

/* we show all the years now; hide the select element */
/* but users asked for it, as expected, so restoring it */
#k1-tracking-fiscal-year-select-elements {
  /* display: none; */
}

#k1-tracking-overall-table {
  max-height: 200px;
}

#activity-container-top-tray {
  margin-bottom: 10px;
}

#capital-calls-overall-table {
  width: 100% !important;
}

#capital-calls-table td,
#capital-calls-table th,
#capital-calls-overall-table td,
#capital-calls-overall-table th {
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
}

.altracka-compare-box .dataTables_wrapper {
  margin-top: 20px;
}

#overall-capital-metrics-div table {
  min-width: 250px;
}

#thisInvestmentShareToken {
  font-size: small;
  word-wrap: break-word; /* Breaks long words */
  overflow-wrap: break-word; /* Ensures text breaks */
  white-space: normal; /* Allows wrapping */
  max-width: 100%; /* Prevents overflowing */
}

#copyShareTextButton {
  background-color: #4CAF50; /* Modern green */
  color: white;
  border: none;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#copyShareTextButton:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

#copyShareTextButton:active {
  transform: scale(0.95);
}