/**********************************
CSS FOR STORY MODE
**********************************/

.story .only-on-print {
  display: none;
}

.story .story-summary-panel {
  background-color: #61ff8c;
  border-radius: 5px 5px 0 0;
}

.personal-data .story-summary-panel {
  background-color: #176aa0;
  color: white;
  margin-bottom: 1em;
}

.personal-data .story-summary-panel-recap {
  font-size: 145%;
  padding: 0.5em;
}

.story .story-section-divider {
  height: 2px;
  background-color: #00063c;
  margin-bottom: 2em;
}

.story .story-section-divider-arrow {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-top: 10px solid white;
}

.story .story-summary-panel h1 {
  line-height: 1.7em;
  font-size: 220%;
}

.story .story-summary-panel-recap {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  line-height: 2em;
  letter-spacing: 0.02em;
  font-size: 115%;
  color: #136c64;
  /* padding: 0 1em; */
}

.story .story-summary-panel-recap strong {
  font-size: 125%;
}

.story .story-summary-panel-separator {
  height: 1px;
  background-color: white;
  margin: 2em auto;
  max-width: 33.33%;
  display: none;
}

.story .story-summary-panel-kpi {
  margin: 0 0.5em 1em 0.5em;
  font-size: 115%;
  display: none;
}

.story .story-summary-panel-kpi-number {
  color: white;
}

.story .story-summary-panel-kpi-text {
  color: #aecfe5;
}

.story .story-panel {
  min-height: 6em;
}

.story-panel-left {
}

.story .story-panel-description {
  text-align: justify;
  padding: 0 1em;
}

.story .story-panel-title {
  text-align: center;
  padding-bottom: 0.7em;
}

.story .story-panel-title h4 {
  margin-top: 1em;
  font-size: 175%;
  font-weight: bold;
}

.story .story-panel-chart {
  padding: 0 1em;
}

.story .story-structuration-table {
  width: 100%;
}

.story #allocation-donut-chart-container {
  margin-top: -0.6em;
}

.story .pure-table {
  border: none;
}

.story .pure-table th {
  padding: 0 0.2em 0.2em 0.2em;
}

.story .pure-table tbody td {
  padding: 0.2em 0.2em;
}

.story .pure-table tbody tr:first-child td {
  padding: 0.4em 0.2em 0.2em 0.2em;
}

.story .pure-table tbody tr:last-child td {
  padding: 0.2em 0.2em 0.4em 0.2em;
}

.story .pure-table tfoot td {
  padding: 0.4em 0.2em;
}

.story .pure-table thead {
  background-color: transparent !important;
}

.story .story-structuration-table th {
  width: 33%;
  vertical-align: bottom;
  background-color: transparent;
  border: none;
  /* border-bottom: 0.25px solid #aecfe5; */
  border-bottom: 1px solid #dbe3e5;
  color: #00063c;
  font-weight: bold;
  /* text-transform: capitalize; */
}

.story .story-structuration-table td {
  border: none;
  width: 33%;
  vertical-align: top;
}

.story .story-structuration-table tbody tr:not(:first-child) {
  border-top: 0px solid #dbe3e5;
}

.story .story-structuration-table tfoot tr {
  /* border-top: 0.25px solid #aecfe5; */
  border-top: 1px solid #dbe3e5;
  color: #00063c;
  font-weight: bold;
}

.story .story-table-amount {
  text-align: right;
}

.story .story-summary-number-animated {
  color: #00063c;
  font-size: 115%;
  font-weight: bolder;
}

.story #allocation-donut-output {
  text-align: center;
}

.story-summary-action .story-next-button {
  background-color: #61ff8c;
  border: 2px solid #00063c;
  color: #00063c;
  font-size: 120%;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.75em 1.5em;
  text-decoration: none;
  box-shadow: -4px 4px #00063c;
  font-weight: bold;
}

.story-next-button-container .story-next-button {
  background-color: #61ff8c;
  border: 2px solid #00063c;
  color: #00063c;
  font-size: 120%;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  padding: 0.75em 1.5em;
  text-decoration: none;
  box-shadow: -4px 4px #00063c;
  font-weight: bold;
}

.story-next-button-container-modal .story-next-button {
  background-color: #61ff8c;
  border: 2px solid #00063c;
  color: #00063c;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  padding: 0.75em 1.5em;
  text-decoration: none;
  box-shadow: -4px 4px #00063c;
  font-weight: bold;
  width: 100%;
}

.story-next-button-container-mobile .story-next-button {
  background-color: #61ff8c;
  border: 2px solid #00063c;
  color: #00063c;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  padding: 0.75em 1.5em;
  text-decoration: none;
  box-shadow: -4px 4px #00063c;
  font-weight: bold;
}

.story-next-button-container {
  text-align: center;
}

.story-next-button-container-modal {
  text-align: center;
  width: 100%;
}

.story-next-button-container-mobile {
  position: fixed;
  width: 100%;
  bottom: 0px;
  text-align: center;
  z-index: 10;
}

.story-action-panel-container {
  min-height: 5.6em;
}

.story-action-panel {
  text-align: center;
  margin-top: 1em;
}

.story-action-panel-modal {
  text-align: center;
  margin-top: 1em;
}

.story .story-triangle-dark {
  border-top-color: #595e7d;
}

.story .story-triangle-white {
  border-top-color: #fafdff;
}

.story .story-triangle-light {
  border-top-color: #edf2f5;
}

.story .story-panel-background-light {
  background-color: #edf2f5;
  padding-bottom: 2em;
}

.story .story-panel-background-white {
  background-color: #fafdff;
}

.modal-form-story .label-section {
  display: block;
}

.modal-form-story label {
  display: inline;
}

.modal-form-story .invisible-select {
  /* background-color:#f2f2f2; */
  cursor: pointer;
}

.modal-form-story i {
  color: #999;
  margin-left: 7px;
  cursor: pointer;
}

.modal-form-story input {
  width: 100%;
}

.modal-form-story .rc-slider {
  margin-bottom: 1.5em;
}

.modal-form-story .in-input {
  bottom: 22.5px !important;
}

.modal-form-story .success-label {
  margin-top: -1em;
}

.modal-form-story h3 {
  color: #00063c;
}

/* FROM easyvest.css */

.max-1024 {
  max-width: 1024px;
  margin: auto;
}

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

.max-750 {
  max-width: 750px;
  margin: auto;
}

.max-500 {
  max-width: 500px;
  margin: 0 auto;
}

.max-350 {
  max-width: 251px;
  margin: 0 auto;
}

.ev-white {
  /*color: white!important;*/
}

h1,
h2,
h4,
h5,
h6 {
  color: #00063c;
  font-weight: bold;
}

.ev-center {
  margin: 0 auto !important;
}

.story .story-panel-left,
.story .story-panel-right {
  padding-bottom: 1em;
}

.story #easyvestMap {
  max-width: 100%;
}

.accessModalIsOpen #story-content {
  -webkit-filter: blur(5px) grayscale(0%);
  -moz-filter: blur(5px) grayscale(0%);
  -o-filter: blur(5px) grayscale(0%);
  -ms-filter: blur(5px) grayscale(0%);
  filter: blur(5px) grayscale(0%);
}

#past-performance-chart {
  /* background-color: #ccc; */
}

#past-performance-chart text {
  font-family: sans-serif;
}

#past-performance-chart text.white {
  fill: rgb(255, 255, 255) !important;
  text-anchor: middle;
  /* font-weight: bold; */
}

.past-performance-chart-container {
  width: 100%;
}

#past-performance-chart text.easyvest {
  fill: #595d72;
  text-anchor: middle;
}

#past-performance-chart rect.easyvest {
  fill: #61ff8c;
}

#past-performance-chart text.others {
  /* fill: #47a3de; */
  fill: #595e7d;
  text-anchor: middle;
}

#past-performance-chart rect.others {
  /* fill: #47a3de; */
  fill: #595e7d;
}

.story-link {
  color: #595e7d;
  cursor: pointer;
}

/* Media queries */

@media (min-width: 48em) {
  .story-next-button-container {
    position: static;
    text-align: right;
    padding: 0em 1em 0 0;
    float: right;
  }
  .story-next-button-container .story-next-button {
    border-radius: 5px;
    max-width: 251px;
    text-align: center;
    margin: 0;
  }
  .story-summary-action .story-next-button {
    float: right;
    margin: 0;
  }

  .story-next-button-container-mobile {
    display: none;
  }

  .story-action-panel {
    padding: 1em 0em 0 1em;
    float: left;
    margin: 0;
  }
  .story-action-panel p {
    width: 251px;
    text-align: left;
  }
  .story-panel-left {
    padding-right: 10px;
  }
  .story-panel-right {
    padding-left: 10px;
  }
  .story .story-summary-panel {
    margin-top: 2em;
  }

  /* .story-action-panel-container{
        padding-top:1.5em;
    } */

  .max-400-md {
    max-width: 400px !important;
  }
}

@media (max-width: 48em) {
  .ev-disclaimer {
    margin-bottom: 50px;
  }
  .md-bottom-menu {
    display: none;
  }
  .embeddedServiceHelpButton .helpButton {
    bottom: 55px !important;
  }
}