@import url(/assets/css/mladu-bootstrap.css);
@import url(/cdn/shared/header/public/init/mladu-header.css);
@import url(/cdn/shared/footer/public/init/mladu-footer.css);

#about-side-nav {
  min-height: 32rem;
  height: 70vh;
}

#about-side-nav.phone {
  margin-top: 3rem;
  min-height: 40rem;
  height: 70vh;
}

.about-body-height {
  min-height: 32rem;
  height: 70vh;
}

.about-body-height.phone {
  min-height: 40rem;
  height: 70vh;
}

.about-side-nav-tab {
  font-family: Space-Grotesk-400;
  font-size: 0.9rem;
  color: #333;
  width: fit-content;
  padding-top: 0rem;
  padding-bottom: 0rem;
  cursor: pointer;
}

.about-side-nav-tab:focus {
  color: #333;
}

.about-side-nav-tab.phone {
  font-size: 1.3rem;
}

a.about-side-nav-tab.active {
  font-family: Space-Grotesk-700;
  color: #409356 !important;
  background-color: transparent !important;
}

a.about-side-nav-tab.active::selection {
  color: #409356;
}

/* For older Firefox versions */
a.about-side-nav-tab.active::-moz-selection {
  color: #409356;
}

/* For Webkit-based browsers (including Safari on iPhone) */
a.about-side-nav-tab.active::-webkit-selection {
  color: #409356;
}

.about-side-nav-tab:hover {
  color: #409356;
}

.about-arrow,
.collapse-arrow {
  display: inline-block;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease-in-out;
}

.about-arrow.collapsed,
.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}

.collapsing {
  transition: none;
  display: none;
}

.triangle-svg {
  stroke-width: 2px;
  stroke-linejoin: round;
}

.no-dropdown-margin {
  margin-left: 20px;
}

.about-header {
  font-family: Space-Grotesk-700;
  font-size: 2.3rem;
  color: #409356;
  margin-top: 0.8rem;
  text-shadow: 0.5px 0.5px #145225;
}

.about-text {
  font-family: Proxima Nova;
  color: #333 !important;
  font-size: 1.03rem;
}

.about-header-blue {
  font-family: Proxima Nova Bold;
  color: #0b3c95;
  font-size: 1.5rem;
}

.about-image {
  width: 75%;
}

.about-hr {
  opacity: 1;
  border-top: 1px solid #ccc;
}

.about-body-margin {
  margin-left: 0.5rem;
  margin-right: 1.1rem;
}

.frame-sizing {
  width: 100%;
  height: 100%;
}

.frame-style {
  width: 100%;
  height: 100%;
}

.about-container {
  min-height: 45rem;
}

.about-content-height {
  height: 60vh;
}

.about-wrapper {
  height: 100%;
}

.mladu-dropdown.about {
  font-size: 1rem;
  height: auto;
  width: 100%;
  box-shadow: 2px 1px 4px #000000d2;
  padding-left: 0.7rem;
}

.form-label.about {
  font-family: Space-Mono-400;
  font-size: 0.98rem;
}

#transfer-patterns-table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #b7b7b7;
  table-layout: fixed;
}

#transfer-patterns-table tr:last-child th,
#transfer-patterns-table tr:last-child td {
  border: none;
}

.col-3.side {
  width: 21%;
}

.row.side > * {
  padding-right: calc(var(--bs-gutter-x) * 0.1);
  padding-left: calc(var(--bs-gutter-x) * 0.1);
}

ol.about-text {
  margin-left: 1rem;
}

.list {
  padding-left: 2.5rem;
  list-style-position: inside;
}

.list-2 {
  list-style-position: outside;
  padding-left: 2.5rem;
}

.pointer-list {
  list-style-type: "👉";
}

.about-text.bold {
  font-family: Proxima Nova Bold;
}

.about-text .bolded {
  font-family: Proxima Nova Bold;
}

.about-link-search {
  color: #00f;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.about-link-search.green {
  color: #409356 !important;
  text-decoration: none;
  font-family: Proxima Nova Bold;
}

.about-link-search:hover {
  text-decoration: underline;
  color: #409356;
}

.container-corner-round {
  border-radius: 0.3rem;
  box-shadow: 2px 2px 5px #ddd;
}

.about-header-h2 {
  font-family: Proxima Nova;
  font-size: 1.6rem;
  color: #333;
}
.about-header-h3 {
  font-family: Proxima Nova;
  font-size: 1.17rem;
}

.about-nav-container {
  padding-top: 4.2rem;
}

.italic {
  font-style: italic;
}

.foot-note {
  font-style: italic;
  color: #b7b7b7 !important;
}

a.nav-link.about-side-nav-tab:visited {
  color: #333 !important;
}

a.nav-link.about-side-nav-tab:active {
  color: #333;
}

.pricing-date {
  font-family: Space-Mono-400-Italic;
  color: #333;
  font-size: 0.7rem;
}

.user-permissions-table td {
  border: 1px solid #333;
}

.user-permissions-table td:first-child {
  width: 1px;
  white-space: nowrap;
}

.user-permissions-table thead td {
  background-color: #409356;
  font-family: Proxima Nova Bold;
  color: #fff;
}

.user-roles-table {
  min-width: 25rem;
  width: 71%;
}

.user-roles-table td {
  border: 1px solid #333;
}

.user-roles-table td.center {
  border: 1px solid #333;
  text-align: center;
}

.user-roles-table thead td {
  background-color: #409356;
  font-family: Proxima Nova Bold;
  color: #fff;
}

.user-roles-table thead tr th {
  background-color: #dedede;
  font-family: Proxima Nova Bold;
  color: #333;
  border: 1px solid #333;
  text-align: left;
  font-size: 1.13rem;
}

.user-roles-table.green {
  text-decoration: none;
  color: #409356 !important;
}

.user-roles-table.green:hover {
  text-decoration: underline;
  color: #409356;
}

.hotlink {
  color: #00f;
  width: fit-content;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  font-family: Proxima Nova;
}

.hotlink:hover {
  text-decoration: underline;
}

/* Pricing page */
.pricing-blue-header {
  font-family: Proxima Nova Bold;
  color: #0b3c95;
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.streamline-text {
  font-family: Proxima Nova Bold;
  color: #333;
  font-size: 1.2rem;
  margin-top: 4.5rem;
}

.pricing-text {
  font-family: Proxima Nova;
  color: #333;
  font-size: 1rem;
}

.pricing-text .bolded,
.pricing-text.bold,
.pricing-features-list .bolded {
  font-family: Proxima Nova Bold;
}

.accordion-collapse.collapsing {
  transition: height 0.5s ease;
  display: block;
}

.accordion-button::after {
  background-image: url("/assets/imgs/components/chevron-down.svg") !important;
  filter: drop-shadow(1px 1px 1px #555);
  width: 1.5rem;
  height: 1.5rem;
  background-size: 1.5rem;
}

#pricing-options {
  width: 35rem;
  margin-bottom: 10px;
}

.tw-toggle {
  display: flex;
  padding: 9px 3px;
  border-radius: 5px;
  position: relative;
  border: 1px solid #ccc;
  width: 33.5rem;
  align-items: center;
  font-family: Proxima Nova;
}

.tw-toggle label {
  display: inline-block;
  color: #333;
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  padding: 2px 3px;
  font-size: 1.2rem;
  cursor: pointer;
  width: 100%;

  @media (576px <= width <= 990px) {
    &.monthly {
      left: 15px;
    }

    &.biannually {
      right: 15px;
    }
  }

  @media (576px <= width <= 990px) {
    &.monthly {
      left: 15px;
    }

    &.biannually {
      right: 15px;
    }
  }
}

.tw-toggle input {
  display: none;
  position: absolute;
  z-index: 3;
  opacity: 0;
  cursor: pointer;
}

.tw-toggle span {
  height: 45px;
  width: 150px;
  border-radius: 5px;
  background: #35bf59;
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
  transition: all 0.5s ease-in-out;

  @media (576px <= width <= 767px) {
    width: 135px;
  }

  @media (768px <= width <= 990px) {
    width: 115px;
  }
}

.tw-toggle input[value="Monthly"]:checked ~ span {
  left: 14px;

  @media (576px <= width <= 990px) {
    left: 10px;
  }
}

.tw-toggle input[value="1-Year"]:checked ~ span {
  left: 50%;
  transform: translateX(-50%);
}

.tw-toggle input[value="2-Year"]:checked ~ span {
  left: calc(100% - 14px);
  transform: translateX(-100%);

  @media (576px <= width <= 990px) {
    left: calc(100% - 9px);
  }
}

.tw-toggle input:checked + label {
  color: #fff;
  text-shadow: 1px 1px #444;
}

.accordion-button {
  color: #fff !important;
  font-family: Proxima Nova;
  font-size: 2.2rem;
  text-shadow: 1px 1px #333;
}

.best-value {
  height: 2.4rem;
  width: auto;
  margin-left: auto;
  margin-right: 1rem;
}

.accordion-button.bronze {
  background: url(/assets/imgs/about/Bronze.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-button.silver {
  background: url(/assets/imgs/about/Silver.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-button.gold {
  background: url(/assets/imgs/about/Gold.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-button.gold::after {
  margin-left: 0;
}

.accordion-button.platinum {
  background: url(/assets/imgs/about/Platinum.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-button.titanium {
  background: url(/assets/imgs/about/Titanium.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-button.vendor {
  background: url(/assets/imgs/about/Data-Vendor.jpg);
  background-size: cover;
  background-position: center;
}

.accordion-body {
  display: flex;
  flex-direction: column;
  gap: 1.55rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

#gold-info .accordion-body {
  background: url(/assets/imgs/about/Popular-Banner.png);
  background-position-x: -5.5rem;
  background-repeat: no-repeat;
  background-size: 19rem;
}

.monthly-selected .info-text {
  gap: 1.5rem;
}

.info-text {
  font-family: Proxima Nova;
  font-size: 1.2rem;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-top: 0.5rem;
}

.cost-total {
  font-size: 2.2rem;
  position: relative;
  line-height: 1.2rem;
}

.per-month {
  font-size: 0.9rem;
}

.crossed-out {
  text-decoration: line-through;
  color: #ccc;
  font-size: 1.6rem;
}

.crossed-out .per-month {
  color: #ccc;
}

.billing-cycle {
  font-size: 0.8rem;
  transform: translateX(-50%);
  left: 50%;
  top: 5rem;
  position: absolute;

  &.yearly {
    top: 6rem;
  }

  &.monthly {
    transform: unset;
    left: unset;
    position: unset;
    margin: 0;
  }
}

.free-months {
  font-size: 1.3rem;
  color: #ff0000;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 3.5rem;
  padding: 0.3rem;
}

.get-started {
  font-family: Proxima Nova;
  background-color: #35bf59;
  border-color: #0d8b2b;
  color: #fff;
  font-size: 1.3rem;
  box-shadow: 1px 1px 4px #ccc;
  width: 12rem;
  text-shadow: 1px 1px 2px #444;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
}

#data-vendor-info .get-started {
  margin-top: 2.5rem;

  .monthly-selected & {
    margin-top: 0.5rem;
  }
}

.get-started:hover,
.get-started:active {
  background-color: #0d8b2b;
  border-color: #0d8b2b;
  box-shadow: 2px 2px 4px #ccc;
}

.plans-section-link {
  font-family: Proxima Nova;
  font-size: 0.7rem;
  color: #00f;
  text-decoration: none;
  float: right;
  background: none;
  border: none;
  padding: 0;
}

.plans-subtext {
  font-family: Proxima Nova;
  font-size: 0.6rem;
  list-style: none;
  color: #555;
  padding-left: 1rem;
}

.plans-subtext > li::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background-image: url(/assets/imgs/about/asterisk.png);
  background-size: cover;
  background-position: center;
  margin-right: 0.3rem;
}

.pricing-features-list {
  font-family: Proxima Nova;
  font-size: 1rem;
  list-style: none;
  color: #333;
  padding-left: 1rem;
}

.pricing-features-list > li::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  background-image: url(/assets/imgs/components/plus-sign.png);
  background-size: cover;
  background-position: center;
  margin-right: 0.3rem;
}

.pricing-features-list li {
  padding-bottom: 0.4rem;
}

.plans-subtext ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.subheader-arrow {
  height: 0.7rem;
  width: auto;
  margin-bottom: 0.2rem;
  margin-right: 0.2rem;
}

.pricing-table {
  min-width: 34rem;
  width: 71%;
}

.pricing-table td {
  border: 1px solid #333;
}

.pricing-table thead td {
  background-color: #409356;
  font-family: Space-Mono-700;
  color: #fff;
  text-align: left;
}

.pricing-table tbody tr:first-child td {
  background-color: #dedede;
  font-family: Space-Mono-700;
}

.breakdown-table {
  width: 87%;
}

.breakdown-table td {
  border: 1px solid #333;
}

.breakdown-table thead td {
  background-color: #409356;
  font-family: Space-Mono-700;
  color: #fff;
}

.bld {
  font-weight: bold;
}

.patterns-list {
  margin-left: 1rem;
  list-style-type: none;
}

.patterns-list li {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #409356;
}

.patterns-list li:last-child {
  border-bottom: none;
}

.link-icon {
  width: 2.7rem;
  height: auto;
  margin-right: 1rem;
}

.up-icon {
  width: 1.5rem;
  height: auto;
}

.price-card {
  width: 30rem;
  box-shadow: 3px 3px 5px #0000008a;
  margin-left: auto;
  margin-right: auto;
}

.pricing-calculator-table {
  font-family: Space-Mono-400;
  color: #333;
  vertical-align: middle;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.pricing-calculator-table tr,
.pricing-calculator-table td {
  border: none;
}

.pricing-calculator-table tr td:first-child {
  width: 13.2rem;
}

td[id$="-note"] {
  font-family: Proxima Nova;
  font-style: italic;
  color: #b7b7b7;
}

[id$="-note"] {
  font-family: Proxima Nova;
  font-style: italic;
  color: #b7b7b7;
}

td[id$="-value"] {
  color: #409356;
  width: 1px;
  white-space: nowrap;
  text-align: right;
}

#subscription-duration-value {
  color: #ff0000;
}

.pricing-table-header {
  font-family: Proxima Nova Bold;
  color: #333;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.pricing-table-label {
  font-family: Proxima Nova;
  color: #333;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

.info-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.info-icon:active {
  border-color: transparent !important;
}

.popover-body {
  font-family: Proxima Nova;
  color: #5a5a5a;
  font-size: 0.7rem;
  width: 15rem;
}

.popup-link {
  color: #0b3c95;
  text-decoration: none;
}

.popup-link:hover {
  text-decoration: underline;
}

.price-card.top {
  height: 11.8rem;
}

.mladu-dropdown.price-calculator {
  width: 100%;
  height: auto;
  box-shadow: 1px 1px 5px #0000008a;
  font-size: 0.9rem;
  font-family: revert;
}

.monthly-usage-text {
  font-family: Space-Mono-400-Italic;
  font-size: 0.7rem;
  color: #333;
}

.cost-text {
  font-family: Space-Mono-400;
  font-size: 0.9rem;
  color: #409356;
}

.email {
  color: #00f;
}

.card-border {
  border-right: 1px solid #ccc;
}

#version-txt {
  color: #b7b7b7;
  font-size: 0.765rem;
}

/* dropdown styling */
.mladu-btn.dropdown-toggle,
.mladu-btn.dropdown-toggle:hover,
.mladu-btn.dropdown-toggle:active {
  font-family: Sans-Serif;
  width: 100%;
  height: auto;
  box-shadow: 1px 1px 5px #0000008a;
  font-size: 0.9rem;
  text-align: left;
  color: #333 !important;
  background-color: #fff !important;
  text-shadow: none;
}

.mladu-btn.dropdown-toggle:hover,
.mladu-btn.dropdown-toggle:active {
  border-color: #35bf59;
}

.dropdown-menu {
  max-height: 14rem;
  overflow: scroll;
  overflow-x: hidden;
  margin-top: 0px;
  text-shadow: none;
  width: 100%;
  box-shadow: 1px 1px 5px #0000008a;
}

.dropdown-menu li button {
  font-family: Sans-Serif;
  cursor: pointer;
  font-size: 0.9rem;
  color: #333;
}

.dropdown-menu li button:hover {
  background-color: #e9f3fd;
  color: #333;
}

.dropdown-toggle::after {
  float: right;
  margin-top: 9px;
}

.file-count-text-break {
  display: block;
}

@media (max-width: 991px) {
  .price-card {
    width: 100%;
  }

  .tw-toggle {
    gap: 2rem;
  }
}

@media (max-width: 767px) {
  .pricing-calculator-table tr td:first-child {
    width: 10rem;
    min-width: 10rem;
  }
  .about-arrow {
    margin-top: 0.2rem;
  }

  .about-image {
    width: 100%;
  }

  [id$="-note"] {
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .bytes-break,
  .workflow-break,
  .technical-break,
  .portal-break,
  .file-count-text-break-mobile,
  .directory-break {
    display: none;
  }
}

/* Testimonials Page */
.carousel-inner {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.carousel-item {
  background-color: #fff;
}

.carousel-indicators {
  margin-bottom: 0;
}

.carousel-indicators [data-bs-target] {
  background-color: #ccc;
  width: 10px;
  height: 10px;
  border-radius: 5rem;
  border: none;
}

.img-col {
  margin-right: 4rem;
  width: 28.2%;
}

.testimonial-img {
  width: 15rem;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 13px -13px #03154a;
  margin-bottom: 1rem;
  border: 1px solid #333;
  aspect-ratio: 2/2.7;
}

.testimonial-wrap {
  max-width: 15rem;
}

.testimonial-img-desc {
  font-family: Space-Mono-400, monospace;
  color: #333;
  font-size: 0.59rem;
  margin-bottom: 0;
}

.testimonials-font {
  font-family: Proxima Nova;
  font-size: 1rem;

  &.about-header-blue {
    font-size: 1.7rem;
    font-weight: bold;
  }
}

.quote-col {
  padding-right: 6rem;
}

.quote-symbol {
  font-family: Proxima Nova Bold;
  color: #0b3c95;
  font-size: 8rem;
  transform: translateY(-50%);
  right: 100%;
  top: 23px;
  text-shadow: 3px 3px 3px #333;
}

.testimonial-quote {
  font-family: Proxima Nova;
  color: #595959;
  font-size: 1.5rem;
  line-height: 1.2;
  font-style: italic;
  padding-left: 1rem;
  padding-top: 10px;
  text-shadow: 0.5px 0.5px #333;
}

.testimonial-btn {
  font-family: Proxima Nova;
  background-color: #ffffff;
  border-color: #0d8b2b;
  color: #333;
  font-size: 1rem;
  box-shadow: 1px 1px 4px #ccc;
  width: 12rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  text-shadow: none;
}

.testimonial-btn:hover,
.testimonial-btn:active {
  background-color: #0d8b2b;
  border-color: #0d8b2b;
  box-shadow: 2px 2px 4px #ccc;
  color: #fff;
  text-shadow: 1px 1px 2px #444;
}

.get-started.testimonial {
  margin-top: 0;
  font-size: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Testimonial Details */
.testimonial-details {
  font-family: Space-Mono-400, monospace;
  font-size: 1.25rem;
  box-shadow: 2px 2px 4px #333;
}

.testimonial-details:hover {
  box-shadow: 2px 2px 5px #333;
}

.testimonial-details.more-testimonials {
  border: 2px solid #0d8b2b;
  color: #333;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
}

.more-testimonials:hover {
  background-color: #35bf59;
  color: #fff;
}

.testimonial-details.get-started {
  margin-top: 0rem;
}

@media (max-width: 1399px) {
  .testimonial-img {
    width: 14rem;
  }

  .testimonial-quote {
    font-size: 1.5rem;
  }

  .quote-col {
    padding-right: 1rem;
  }

  .quote-symbol {
    right: 99%;
    font-size: 6rem;
  }
}
@media (max-width: 992px) {
  .quote-col {
    padding-right: 1rem;
  }
  .testimonial-img {
    width: 9.5rem;
  }
  .testimonial-quote {
    font-size: 1rem;
  }
  .quote-symbol {
    font-size: 4.5rem;
    right: 98%;
  }
  .testimonial-img-desc {
    width: 10rem;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .quote-col {
    margin-left: 2rem;
  }

  .go-buttons {
    margin-left: 4.5rem;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .testimonial-wrap {
    margin-left: 5rem;
  }
}

@media (max-width: 772px) {
  .breakdown-table {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .price-card.top {
    height: auto;
  }
}

@media (max-width: 520px) {
  .pricing-calculator-table tr td:first-child {
    width: 10rem;
    min-width: 10rem;
  }

  .file-count-text-break {
    display: none;
  }

  .about-body-margin {
    margin-left: 0;
    margin-right: 0;
  }

  .about-header-h2 {
    font-size: 1rem;
  }

  .card-border {
    border-right: none;
  }
}

@media (max-width: 475px) {
  .breakdown-table {
    width: 37rem;
  }
  .bytes-break,
  .workflow-break,
  .technical-break,
  .portal-break,
  .file-count-text-break-mobile,
  .directory-break {
    display: block;
  }
}

@media (max-width: 365px) {
  .directory-break {
    display: none;
  }
}