@use "../../../plugins/bootstrap-5.1.3/scss/functions";
@use "../../../plugins/bootstrap-5.1.3/scss/variables";
@use "../../../plugins/bootstrap-5.1.3/scss/mixins";
@use "../../../plugins/bootstrap-5.1.3/scss/utilities";
@use "../../../plugins/bootstrap-5.1.3/scss/reboot";
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto !important;
  }
}

:root {
  --primary: #CD0511;
  --consumed-by-js: $primary;
  --bs-primary: #CD0511;
  --bs-primary-rgb: 205, 5, 17;
  --success: #179149;
  --consumed-by-js: $success;
  --bs-success: #179149;
  --bs-success-rgb: 23, 145, 73;
  --bs-dark: #161616;
  --bs-dark-rgb: 22, 22, 22;
  --bs-font-open-sans:'Open Sans', sans-serif;
  --bs-body-font-family: var(--bs-font-open-sans);
  --bs-body-color: #161616;
  --bs-link-color: $primary;
}

@use "../../../plugins/bootstrap-5.1.3/scss/bootstrap";
body {
  overflow-x: hidden;
}

section {
  padding: 40px 0;
}

section:last-of-type {
  padding: 80px 0;
}

#sp-info {
  max-width: 100%;
}

.text-grey-dark {
  color: #373737;
}

.text-grey-dark:hover {
  color: #373737;
}

.sp-icon {
  width: 80px;
  height: 80px;
  background-color: #E5E9EC;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80px;
}

.default-icon {
  background-image: url("/assets/myhf/images/hfcopy/hfcopy_avatar.png");
}

.risk-score-profile {
  border: 2px solid;
  height: 23px;
  width: 23px;
  line-height: 1.3;
  display: block;
  font-size: 14px;
  text-align: center;
  margin-top: -2px;
}

.color-risk-score-level-5 {
  color: #d85159;
}

.color-risk-score-level-4 {
  color: #dc912e;
}

.color-risk-score-level-3 {
  color: #dcc12e;
}

.color-risk-score-level-2 {
  color: #52bd07;
}

.info-icon {
  border: 0;
  background-image: url(/assets/hfappnew/websites/common/images/info-circle.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  height: 20px;
  width: 20px;
}

.sp-info-box {
  border-color: #EBEBEB !important;
}

.box-info-titles {
  padding: 0 0 10px 0;
}

.info-table {
  border: none;
}

.info-table td, .info-table th {
  border: none !important;
  border-top: 1px solid #DDD !important;
  font-size: 14px;
}

.info-table tr:first-child td {
  border-top: none !important;
}

.info-table tr:first-child th {
  border-top: none !important;
}

.nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs .nav-item .nav-link {
  color: #A5A5A5;
  font-weight: 700;
  font-size: 15px;
  border: 0;
}

.nav-tabs .nav-item .nav-link.active {
  border-bottom: 4px solid #A5A5A5 !important;
  color: #161616 !important;
  width: max-content;
  margin: auto;
}

.nav-tabs .nav-item .nav-link.active:hover {
  border-bottom: 4px solid #A5A5A5;
  color: black;
}

.nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:focus {
  border-bottom: 0;
  color: #A5A5A5;
}

#trading-activity table th {
  color: #888888;
}

tr:nth-child(odd) td, tr:nth-child(odd) th {
  background-color: #f4f4f4;
  --bs-table-accent-bg: initial !important;
  color: initial !important;
}

.gray-box:hover {
  background: #F4F4F4;
}

body.body-lang-rtl .tooltip-div .tooltip-slug {
  right: 120%;
}

body.body-lang-rtl .tooltip-div .tooltip-slug:after {
  right: -10px;
  transform: rotateY(180deg);
}

.tooltip-div .tooltip-slug {
  visibility: hidden;
  width: auto;
  min-width: 250px;
  max-width: 360px;
  background-color: #161616;
  z-index: 1000;
  top: -19%;
  left: 130%;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-div .tooltip-slug:after {
  content: "";
  position: absolute;
  top: 1vh;
  right: 100%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #161616 transparent transparent;
}

.tooltip-div .tooltip-img {
  padding: 5px;
  width: 610px;
  min-width: 610px;
  max-width: 610px;
  top: -13vh;
  left: 104%;
}

.tooltip-div .tooltip-img:after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent #161616 transparent transparent;
}

.tooltip-div:hover .tooltip-slug {
  visibility: visible;
  opacity: 1;
}

/* Past Performance */
.badge {
  border-radius: 6px !important;
  padding: .60em .8em;
  background-color: #E5E9EC;
}

.login-overlay {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(3.5px);
}

@media (max-width: 991.98px) {
  .box-info-titles {
    overflow-x: scroll;
  }
  .performance_box {
    width: 100%;
    display: block;
    overflow-x: scroll;
  }
  .performance_box_inner {
    min-width: 900px;
    display: inline-block;
  }
  #sp-details .btn-success {
    margin-top: 0 !important;
  }
  .sp-icon {
    width: 68px;
    height: 68px;
    background-size: 68px;
  }
}

@media (min-width: 992px) {
  .rounded-lg-2 {
    border-radius: .25rem !important;
  }
}

@media (max-width: 991.98px) {
  .rounded-top-2 {
    border-top-left-radius: .25rem !important;
    border-top-right-radius: .25rem !important;
  }
  .rounded-bottom-2 {
    border-bottom-left-radius: .25rem !important;
    border-bottom-right-radius: .25rem !important;
  }
}

@media (max-width: 767.98px) {
  .info-table tr:first-child .border-top-dev {
    border-top: 1px solid #DDD !important;
  }
  .table-striped-dev-reversed tr:nth-child(odd) td, .table-striped-dev-reversed tr:nth-child(odd) th {
    background-color: #FFFFFF;
    --bs-table-accent-bg: initial !important;
    color: initial !important;
  }
  .table-striped-dev-reversed tr:nth-child(even) td, .table-striped-dev-reversed tr:nth-child(even) th {
    background-color: #f4f4f4;
    --bs-table-accent-bg: initial !important;
    color: initial !important;
  }
  .nav-tabs .nav-item {
    padding: 0 15px;
  }
  .sp-icon {
    width: 55px;
    height: 55px;
    background-size: 55px;
  }
  #sp-info .gray-box .col-7 {
    position: relative;
  }
  #sp-info .gray-box .col-7 .tooltip-div {
    position: initial !important;
  }
  body.body-lang-rtl .tooltip-div .tooltip-slug {
    right: 20%;
  }
  body.body-lang-rtl .tooltip-div .tooltip-slug:after {
    left: unset !important;
    right: 5%;
  }
  .tooltip-div .tooltip-slug {
    width: auto;
    min-width: 250px;
    max-width: 300px;
    top: 4vh;
    left: 20%;
  }
  .tooltip-div .tooltip-slug:after {
    top: -10px;
    left: 5%;
    border-color: transparent transparent #161616 transparent;
  }
  .tooltip-div .tooltip-img {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    top: 5vh;
    left: auto;
    right: auto;
  }
  .tooltip-div .tooltip-img img {
    width: 290px;
  }
  .tooltip-div .tooltip-img:after {
    top: -5px;
    right: 93%;
    border-color: transparent transparent #161616 transparent;
  }
}