/* bootstrap css grid, experimental in 5.3, copied from docs.css */
.grid{display:grid;grid-template-rows:repeat(var(--bs-rows, 1), 1fr);grid-template-columns:repeat(var(--bs-columns, 12), 1fr);gap:var(--bs-gap, 1.5rem)}.grid .g-col-1{grid-column:auto/span 1}.grid .g-col-2{grid-column:auto/span 2}.grid .g-col-3{grid-column:auto/span 3}.grid .g-col-4{grid-column:auto/span 4}.grid .g-col-5{grid-column:auto/span 5}.grid .g-col-6{grid-column:auto/span 6}.grid .g-col-7{grid-column:auto/span 7}.grid .g-col-8{grid-column:auto/span 8}.grid .g-col-9{grid-column:auto/span 9}.grid .g-col-10{grid-column:auto/span 10}.grid .g-col-11{grid-column:auto/span 11}.grid .g-col-12{grid-column:auto/span 12}.grid .g-start-1{grid-column-start:1}.grid .g-start-2{grid-column-start:2}.grid .g-start-3{grid-column-start:3}.grid .g-start-4{grid-column-start:4}.grid .g-start-5{grid-column-start:5}.grid .g-start-6{grid-column-start:6}.grid .g-start-7{grid-column-start:7}.grid .g-start-8{grid-column-start:8}.grid .g-start-9{grid-column-start:9}.grid .g-start-10{grid-column-start:10}.grid .g-start-11{grid-column-start:11}@media (min-width: 576px){.grid .g-col-sm-1{grid-column:auto/span 1}.grid .g-col-sm-2{grid-column:auto/span 2}.grid .g-col-sm-3{grid-column:auto/span 3}.grid .g-col-sm-4{grid-column:auto/span 4}.grid .g-col-sm-5{grid-column:auto/span 5}.grid .g-col-sm-6{grid-column:auto/span 6}.grid .g-col-sm-7{grid-column:auto/span 7}.grid .g-col-sm-8{grid-column:auto/span 8}.grid .g-col-sm-9{grid-column:auto/span 9}.grid .g-col-sm-10{grid-column:auto/span 10}.grid .g-col-sm-11{grid-column:auto/span 11}.grid .g-col-sm-12{grid-column:auto/span 12}.grid .g-start-sm-1{grid-column-start:1}.grid .g-start-sm-2{grid-column-start:2}.grid .g-start-sm-3{grid-column-start:3}.grid .g-start-sm-4{grid-column-start:4}.grid .g-start-sm-5{grid-column-start:5}.grid .g-start-sm-6{grid-column-start:6}.grid .g-start-sm-7{grid-column-start:7}.grid .g-start-sm-8{grid-column-start:8}.grid .g-start-sm-9{grid-column-start:9}.grid .g-start-sm-10{grid-column-start:10}.grid .g-start-sm-11{grid-column-start:11}}@media (min-width: 768px){.grid .g-col-md-1{grid-column:auto/span 1}.grid .g-col-md-2{grid-column:auto/span 2}.grid .g-col-md-3{grid-column:auto/span 3}.grid .g-col-md-4{grid-column:auto/span 4}.grid .g-col-md-5{grid-column:auto/span 5}.grid .g-col-md-6{grid-column:auto/span 6}.grid .g-col-md-7{grid-column:auto/span 7}.grid .g-col-md-8{grid-column:auto/span 8}.grid .g-col-md-9{grid-column:auto/span 9}.grid .g-col-md-10{grid-column:auto/span 10}.grid .g-col-md-11{grid-column:auto/span 11}.grid .g-col-md-12{grid-column:auto/span 12}.grid .g-start-md-1{grid-column-start:1}.grid .g-start-md-2{grid-column-start:2}.grid .g-start-md-3{grid-column-start:3}.grid .g-start-md-4{grid-column-start:4}.grid .g-start-md-5{grid-column-start:5}.grid .g-start-md-6{grid-column-start:6}.grid .g-start-md-7{grid-column-start:7}.grid .g-start-md-8{grid-column-start:8}.grid .g-start-md-9{grid-column-start:9}.grid .g-start-md-10{grid-column-start:10}.grid .g-start-md-11{grid-column-start:11}}@media (min-width: 992px){.grid .g-col-lg-1{grid-column:auto/span 1}.grid .g-col-lg-2{grid-column:auto/span 2}.grid .g-col-lg-3{grid-column:auto/span 3}.grid .g-col-lg-4{grid-column:auto/span 4}.grid .g-col-lg-5{grid-column:auto/span 5}.grid .g-col-lg-6{grid-column:auto/span 6}.grid .g-col-lg-7{grid-column:auto/span 7}.grid .g-col-lg-8{grid-column:auto/span 8}.grid .g-col-lg-9{grid-column:auto/span 9}.grid .g-col-lg-10{grid-column:auto/span 10}.grid .g-col-lg-11{grid-column:auto/span 11}.grid .g-col-lg-12{grid-column:auto/span 12}.grid .g-start-lg-1{grid-column-start:1}.grid .g-start-lg-2{grid-column-start:2}.grid .g-start-lg-3{grid-column-start:3}.grid .g-start-lg-4{grid-column-start:4}.grid .g-start-lg-5{grid-column-start:5}.grid .g-start-lg-6{grid-column-start:6}.grid .g-start-lg-7{grid-column-start:7}.grid .g-start-lg-8{grid-column-start:8}.grid .g-start-lg-9{grid-column-start:9}.grid .g-start-lg-10{grid-column-start:10}.grid .g-start-lg-11{grid-column-start:11}}@media (min-width: 1200px){.grid .g-col-xl-1{grid-column:auto/span 1}.grid .g-col-xl-2{grid-column:auto/span 2}.grid .g-col-xl-3{grid-column:auto/span 3}.grid .g-col-xl-4{grid-column:auto/span 4}.grid .g-col-xl-5{grid-column:auto/span 5}.grid .g-col-xl-6{grid-column:auto/span 6}.grid .g-col-xl-7{grid-column:auto/span 7}.grid .g-col-xl-8{grid-column:auto/span 8}.grid .g-col-xl-9{grid-column:auto/span 9}.grid .g-col-xl-10{grid-column:auto/span 10}.grid .g-col-xl-11{grid-column:auto/span 11}.grid .g-col-xl-12{grid-column:auto/span 12}.grid .g-start-xl-1{grid-column-start:1}.grid .g-start-xl-2{grid-column-start:2}.grid .g-start-xl-3{grid-column-start:3}.grid .g-start-xl-4{grid-column-start:4}.grid .g-start-xl-5{grid-column-start:5}.grid .g-start-xl-6{grid-column-start:6}.grid .g-start-xl-7{grid-column-start:7}.grid .g-start-xl-8{grid-column-start:8}.grid .g-start-xl-9{grid-column-start:9}.grid .g-start-xl-10{grid-column-start:10}.grid .g-start-xl-11{grid-column-start:11}}@media (min-width: 1400px){.grid .g-col-xxl-1{grid-column:auto/span 1}.grid .g-col-xxl-2{grid-column:auto/span 2}.grid .g-col-xxl-3{grid-column:auto/span 3}.grid .g-col-xxl-4{grid-column:auto/span 4}.grid .g-col-xxl-5{grid-column:auto/span 5}.grid .g-col-xxl-6{grid-column:auto/span 6}.grid .g-col-xxl-7{grid-column:auto/span 7}.grid .g-col-xxl-8{grid-column:auto/span 8}.grid .g-col-xxl-9{grid-column:auto/span 9}.grid .g-col-xxl-10{grid-column:auto/span 10}.grid .g-col-xxl-11{grid-column:auto/span 11}.grid .g-col-xxl-12{grid-column:auto/span 12}.grid .g-start-xxl-1{grid-column-start:1}.grid .g-start-xxl-2{grid-column-start:2}.grid .g-start-xxl-3{grid-column-start:3}.grid .g-start-xxl-4{grid-column-start:4}.grid .g-start-xxl-5{grid-column-start:5}.grid .g-start-xxl-6{grid-column-start:6}.grid .g-start-xxl-7{grid-column-start:7}.grid .g-start-xxl-8{grid-column-start:8}.grid .g-start-xxl-9{grid-column-start:9}.grid .g-start-xxl-10{grid-column-start:10}.grid .g-start-xxl-11{grid-column-start:11}}

:root {
  --sa-custom-blue: #275C91;
  --sa-custom-blue-rgb: 39,92,145;
  --sa-header-blue: #031D44;
  --sa-header-blue-rgb: 3,29,68;
  --sa-font-serif: "Times New Roman", Times, serif;
  --bs-secondary-light: #b5babe;
  --bs-danger-light: #e56874;
  --bs-success-light: #53a57f;
}
.h-1em { height: 1em; }
.h-2em { height: 2em; }
.h-1rem { height: 1rem; }
.small, .form-text { font-size: 0.75em; }
.x-small { font-size: 0.6em; }
.xx-small { font-size: 0.4em; }
.me-n1 { margin-right: -.25rem !important; }
.me-n2 { margin-right: -.5rem !important; }
.me-n3 { margin-right: -1rem !important; }
.me-n4 { margin-right: -1.5rem !important; }
.ms-n1 { margin-left: -.25rem !important; }
.ms-n2 { margin-left: -.5rem !important; }
.ms-n3 { margin-left: -1rem !important; }
.ms-n4 { margin-left: -1.5rem !important; }
.mt-n1 { margin-top: -.25rem !important; }
.mt-n2 { margin-top: -.5rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.ms-n1px { margin-left: -1px; }
.ms-n3em { margin-left: -.3em; }
.ms-n4em { margin-left: -.4em; }
.ms-n5em { margin-left: -.5em; }
.w-1 { width: 1%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-99 { width: 99%; }
.mw-50 { max-width: 50%; }
.mw-80 { max-width: 80%; }
.mw-50vw { max-width: 50vw; }
.mh-100vh { max-height: 100vh; }
.mh-90vh { max-height: 90vh; }
.mh-80vh { max-height: 80vh; }
.mh-70vh { max-height: 70vh; }
.mh-60vh { max-height: 60vh; }
.mh-50vh { max-height: 50vh; }
.mh-40vh { max-height: 40vh; }
.mh-30vh { max-height: 30vh; }
.mh-20vh { max-height: 20vh; }
.nh-1em { min-height: 1em; }
.nh-2em { min-height: 2em; }
.nh-3em { min-height: 3em; }
.nh-4em { min-height: 4em; }
.w-1em { width: 1em; }
.w-2em { width: 2em; }
.w-3em { width: 3em; }
.w-4em { width: 4em; }
.w-inherit { width: inherit; }
.w-10vw { width: 10vw; }
.w-20vw { width: 20vw; }
.w-30vw { width: 30vw; }
.w-40vw { width: 40vw; }
.w-50vw { width: 50vw; }
.w-60vw { width: 60vw; }
.w-70vw { width: 70vw; }
.w-80vw { width: 80vw; }
.w-90vw { width: 90vw; }
.nw-1em { min-width: 1em; }
.nw-2em { min-width: 2em; }
.nw-3em { min-width: 3em; }
.nw-4em { min-width: 4em; }
.pt-1px { padding-top: 1px; }
.top-45 { top: 45%!important; }
.top-n1 { top: -1px; }
.top-n120 { top: -120%; }
.bottom-n1 { bottom: -1px; }
.end-n1 { right: -1px; }
.start-n1 { left: -1px; }
.z-10 { z-index: 10 !important }
.z-20 { z-index: 20 !important }
.z-30 { z-index: 30 !important }
.z-40 { z-index: 40 !important }
.z-50 { z-index: 50 !important }
.z-60 { z-index: 60 !important }
.z-70 { z-index: 70 !important }
.z-80 { z-index: 80 !important }
.z-90 { z-index: 90 !important }
.bg-dark-blue { background-color: var(--sa-header-blue); }
.bg-custom-blue { background-color: var(--sa-custom-blue); }
.text-custom-blue { color: var(--sa-custom-blue); }
.text-justify { text-align: justify; }
.text-bg-secondary-light { color: #fff !important; background-color: var(--bs-secondary-light) !important; }
.text-bg-success-light { color: #fff !important; background-color: var(--bs-success-light) !important; }
.text-bg-danger-light { color: #fff !important; background-color: var(--bs-danger-light) !important; }
.hidden { display: none !important; }
.fs-7 { font-size: .9rem; }
.fs-8 { font-size: .75rem; }
.fs-9 { font-size: .6rem; }
.mb-6 { margin-bottom: 6rem!important; }
.h-15rem { height: 15rem!important; }
.bg-blur-1 { backdrop-filter: blur(.1em); }
.bg-blur-2 { backdrop-filter: blur(.2em); }
.bg-blur-3 { backdrop-filter: blur(.3em); }
.bg-gray-100 { background-color: var(--bs-gray-100); }
.bg-gray-200 { background-color: var(--bs-gray-200); }
.bg-gray-300 { background-color: var(--bs-gray-300); }
.bg-gray-400 { background-color: var(--bs-gray-400); }
.bg-gray-500 { background-color: var(--bs-gray-500); }
.bg-gray-600 { background-color: var(--bs-gray-600); }
.bg-gray-700 { background-color: var(--bs-gray-700); }
.bg-gray-800 { background-color: var(--bs-gray-800); }
.bg-gray-900 { background-color: var(--bs-gray-900); }
.bg-opacity-95 { --bs-bg-opacity: 0.95; }
.bg-opacity-90 { --bs-bg-opacity: 0.90; }
.bg-opacity-85 { --bs-bg-opacity: 0.85; }
.bg-opacity-80 { --bs-bg-opacity: 0.80; }
.bg-opacity-70 { --bs-bg-opacity: 0.70; }
.bg-opacity-60 { --bs-bg-opacity: 0.60; }
.bg-opacity-65 { --bs-bg-opacity: 0.65; }
.bg-opacity-55 { --bs-bg-opacity: 0.55; }
.bg-opacity-45 { --bs-bg-opacity: 0.45; }
.bg-opacity-40 { --bs-bg-opacity: 0.40; }
.bg-opacity-35 { --bs-bg-opacity: 0.35; }
.bg-opacity-30 { --bs-bg-opacity: 0.30; }
.bg-opacity-20 { --bs-bg-opacity: 0.20; }
.bg-opacity-15 { --bs-bg-opacity: 0.15; }
.bg-opacity-10 { --bs-bg-opacity: 0.10; }
.bg-opacity-5 { --bs-bg-opacity: 0.05; }
.bg-blue { background-color: var(--bs-blue); }
.bg-indigo { background-color: var(--bs-indigo); }
.bg-purple { background-color: var(--bs-purple); }
.bg-pink { background-color: var(--bs-pink); }
.bg-red { background-color: var(--bs-red); }
.bg-orange { background-color: var(--bs-orange); }
.bg-yellow { background-color: var(--bs-yellow); }
.bg-green { background-color: var(--bs-green); }
.bg-teal { background-color: var(--bs-teal); }
.bg-cyan { background-color: var(--bs-cyan); }
.bg-secondary-light { background-color: var(--bs-secondary-light); }
.bg-danger-light { background-color: var(--bs-danger-light); }
.bg-success-light { background-color: var(--bs-success-light); }
.opacity-95 { opacity: 0.95; }
.opacity-90 { opacity: 0.90; }
.opacity-85 { opacity: 0.85; }
.opacity-80 { opacity: 0.80; }
.opacity-70 { opacity: 0.70; }
.opacity-60 { opacity: 0.60; }
.opacity-65 { opacity: 0.65; }
.opacity-55 { opacity: 0.55; }
.opacity-45 { opacity: 0.45; }
.opacity-40 { opacity: 0.40; }
.opacity-35 { opacity: 0.35; }
.opacity-30 { opacity: 0.30; }
.opacity-20 { opacity: 0.20; }
.opacity-15 { opacity: 0.15; }
.opacity-10 { opacity: 0.10; }
.opacity-5 { opacity: 0.05; }
.flex-grow-0 { flex-grow: 0 !important; }
.resize-1 { transform: scale(1.25); }
.resize-2 { transform: scale(1.5); }
.resize-3 { transform: scale(1.75); }
.resize-4 { transform: scale(2); }

.grid_table {
  display: grid;
  grid-template-columns: var(--sa-gt-cols, 1fr);
  grid-template-rows: repeat(var(--sa-gt-rows), 1fr);
  gap: var(--sa-gt-gap, .25rem 1rem);
}

.label-info{
  background-color: var(--sa-header-blue);
  margin-top: 5px;
  margin-right: 5px;
}

.close{
    margin-left: 5px;
    color: #fff;
}

.label{
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    /* vertical-align:baseline; */
    border-radius: .25em;
}
/*.bg-light-blue {
  background-color: var(--sa-light-blue) !important;
}*/
.navbar-logo {
  height: 42px;
}
header.navbar .nav-link.text-light { /* top navbar active menu */
  --bs-text-opacity: 0.8;
}
header.navbar .nav-link.text-light.active {
  --bs-text-opacity: 1;
}
/*.height-10vh {
  height: 10vh;
}*/
/*.height-13vh {
  height: 13vh;
}*/
/*.square-box {
  height: 20vh;
  width: 20vh;
}*/
/*.fs-custom {
  font-size: calc(1.375rem + 2.5vw)!important;
}*/
#search-stock .bi-search {
  top: .55em;
  left: .7em;
  z-index: 10;
  color: var(--bs-gray-600); /*same color as .text-muted*/
}
#search-stock .search-stock {
  padding-left: 2.2em;
}
#search-stock .spinner {
  z-index: 10;
}
#search-stock .spinner-border {
  top: .85em;
  right: .85em;
}
.btn-primary,
.btn-secondary {
  --bs-btn-border-width: 0;
}
.btn.fb {
  --bs-btn-bg: #405FA0;
  --bs-btn-hover-bg: #677fb1;
  --bs-btn-active-bg: #677fb1;
}
.dropdown-toggle .fi {
  width: 2em;
  height: 1.5em;
  top: -1px;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--sa-custom-blue);
}
.dropdown-menu li a {
  cursor: pointer;
}
.ui-menu-item {
  border-bottom: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-right: 1px solid #aaa;
  background-color: white;
  cursor: pointer;
}
.ui-menu-item:nth-child(even) {
  background-color: #f2f2f2;
}
.list-container {
  color: black;
  cursor: pointer;
  width: 100%;
}
.list-container:hover {
  color: black;
}
.ui-helper-hidden-accessible {
  display: none !important;
}
/*.card-body .table:not(.table-bordered) thead th:first-child,
.card-body .table:not(.table-bordered) tbody td:first-child {
  padding-left: 0;
}
.card-body .table:not(.table-bordered) thead th:last-child,
.card-body .table:not(.table-bordered) tbody td:last-child {
  padding-right: 0;
}
.card-body .table:last-child:not(.table-bordered) tbody tr:last-child td,
.card-body .table:last-child:not(.balanced-rows) tbody tr:last-child td {
  padding-bottom: 0px;
  border-bottom-color: transparent;
}*/
/* table inside card-body, last row remove border */
.table-last-row-0 > thead > th:first-child,
.table-last-row-0 > tbody > td:first-child {
  padding-left: 0;
}
.table-last-row-0 > thead > th:last-child,
.table-last-row-0 > tbody > td:last-child {
  padding-right: 0;
}
.table-last-row-0 > tbody > tr:last-child td {
  padding-bottom: 0px !important;
  border-bottom-color: transparent;
}

.table-partial tr.position-relative td { /* watchlist table overlay upgrade btn spacing - py-5 */
  padding-top: 0.5rem !important;
  padding-bottom: 3rem !important;
}
.h-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.v-scroll {
  overflow-x: hidden;
  overflow-y: auto;
}
.ui-autocomplete {
  z-index: 20;
}
.border-opacity-0 {
  --bs-border-opacity: 0;
}

#tutorial_modal.show ~ .ui-autocomplete {
  /* cant set ui-autocomplete z-index from JS */
  z-index: 1070;
}
.max-lines-2,
.max-lines-3,
.max-lines-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.max-lines-2 {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}
.max-lines-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}
.max-lines-4 {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}
.bi-bold:before {
  font-weight: bold !important;
}
.sticky-head {
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--bs-white) !important;
}
.form-control:focus,
.form-select:focus {
  box-shadow: none;
}
select,
button:hover {
  outline: none;
}
#retry {
  margin-top: -0.5em;
}
.apexcharts-tooltip * {
  font-family: var(--bs-body-font-family) !important;
}
.nav {
  --bs-nav-link-color: var(--sa-custom-blue);
  --bs-nav-link-hover-color: var(--sa-custom-blue);
}
.nav-pills {
  --bs-nav-link-hover-color: var(--bs-gray-700);
  --bs-nav-pills-link-active-bg: var(--sa-custom-blue); /* --bs-nav-tabs-link-active-color = --bs-gray-700 */
}
.sa-tabs {
  margin-bottom: -2px;
}
.sa-tabs .nav-link.active {
  border: 1px solid var(--bs-border-color-translucent);
  border-bottom: 1px solid var(--bs-white);
  position: relative;
  z-index: 1;
}
/*#price_target_table tr.last .firm,
#price_target_table tr.last_all td {
  border-bottom-width: 0;
}*/
.text-gray-700 {
  color: var(--bs-gray-700);
}
.text-blue-index {
  color: #2b6aa2;
}
.bg-linear-gradient,
.row-bg-linear-gradient td:not(.position-absolute) { /* shortcut to apply to table row cells */
  -webkit-mask-image: linear-gradient(#000,1%,transparent);
  mask-image: linear-gradient(#000,1%,transparent);
}
#portfolio_modal .modal-content {
  transform: none; /* by default, the longer modal content, top position of dialog become lower */
}
#portfolio_modal .modal-dialog,
#panel_modal .modal-dialog,
#insider_modal .modal-dialog,
#entitlement_modal .modal-dialog {
  max-width: 800px;
}
.popover {
  --bs-popover-max-width: 300px;
}
.popover-header {
  --bs-popover-border-width: 0;
}
/*.alert_tooltip .popover-header {
  --bs-popover-header-padding-x: 0.5rem;
}*/
.popover-arrow {
  --bs-popover-bg: var(--bs-popover-header-bg);
}
.popover-small {
  background-color: var(--bs-popover-header-bg);
}
.popover-small .popover-body {
  padding: .5rem;
}
.popover table td {
  vertical-align: top;
}
.timerange_select .nav-link.active {
  background: none;
  color: var(--bs-gray-700);
  font-weight: bold;
}
.table-layout-fixed {
  table-layout: fixed;
}
.equal-width-ch > * {
  flex-basis: 100%;
}

/* support & resistance bar with dotted limit line */
.sr_bar {
	width: 5em;
}
.sr_bar .border-bottom {
	height: 1em;
}
.sr_bar .bi {
	bottom: -1.2em;
}
.sr_bar .border-bottom .border-style-dotted {
	width: 1em;
}

/* layout for prices range bar with price indicator, to replace .sr_bar & .range_52w */
/*.page_stock .range_bar {
  width: 10em !important;
}*/
.range_bar .border-bottom {
	height: 1em;
}
.range_bar .bi {
	bottom: -1.2em;
}
.range_bar .border-bottom .border-style-dotted {
	width: 25%;
}

/* from footer */
.custom-footer-vh {
  min-height: 50px;
}
.feature-link:hover {
  opacity: 100% !important;
}
.feature-link{
  font-size: 14px;
  opacity: 75%;
  transition: 0.3s;
  color: white;
}

@media (any-hover: none) {
  .popover.d-sm-block {
    display: none !important; /* hide popover in touch screen */
  }
}
td.text-center > .progress { /* table row contains progress bar */
  width: 12vw;
}
#holding_table td.text-center > .progress {
  width: 15vw;
}
#monthly_alloc .progress {
  width: 100%;
}
.range_52w {
  width: 4em;
}
.range_52w .border-bottom { /* 52w range bar */
  height: .5em;
}
.range_52w .bi {
  top: .3em;
}
.ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  float: left;
  width: 65% !important;
}
.ui-menu .ui-menu-item {
  margin: 0;
  padding: 5px;
  zoom: 1;
  float: left;
  clear: left;
  width: 100%;
  color: black;
}
.w-max-100, .img-fluid-100 {
  max-width: 100%!important;
}
.popover_tutorial {
  --bs-popover-font-size: 1rem;
  --bs-popover-max-width: 450px;
}

.popover-video {
  --bs-popover-font-size: 1rem;
  --bs-popover-max-width: 60%!important;
}

.hide-bottom-border {
  border-bottom-style: hidden;
}
/*.img-fluid {
  max-width: 90%!important;
}*/
.rotate-n90 {
  transform: rotate(-90deg);
}
.border-style-dotted {
  border-style: dotted !important;
}
.vis-collapse {
  visibility: collapse !important;
}
.zoomable img {
  transform-origin: 0 0;
}

.stock_logo,
.stock_logo .img-fluid,
.stock_logo .stock_logo_label {
  width: 4em;
  height: 4em;
}
.page_stock .stock_logo,
.page_stock .stock_logo .img-fluid,
.page_stock .stock_logo .stock_logo_label {
  width: 6em;
  height: 6em;
}
.page_dividend .stock_logo,
.page_dividend .stock_logo .img-fluid,
.page_dividend .stock_logo .stock_logo_label {
  width: 1.6em;
  height: 1.6em;
}
.stock_logo .stock_logo_label {
  font-family: var(--sa-font-serif);
}

/*
media min-width based on bootstrap breakpoints:
https://getbootstrap.com/docs/5.3/layout/breakpoints/
*/
@media (max-width: 577px) { /* sm only */
  .tab,
  .form-tab,
  .wl-tab {
    margin-left: -.8em;
    margin-right: -.8em;
  }
  .modal .form-tab {
    margin-left: -1.03em;
    margin-right: -1.03em;
  }
}
@media (min-width: 576px) {/* sm */
	.w-sm-10 { width: 10% !important; }
	.w-sm-15 { width: 15% !important; }
	.w-sm-20 { width: 20% !important; }
	.w-sm-25 { width: 25% !important; }
  .w-sm-30 { width: 30% !important; }
  .w-sm-35 { width: 35% !important; }
  .w-sm-40 { width: 40% !important; }
  .w-sm-45 { width: 45% !important; }
  .w-sm-50 { width: 50% !important; }
  .w-sm-55 { width: 55% !important; }
  .w-sm-60 { width: 60% !important; }
  .w-sm-65 { width: 65% !important; }
  .w-sm-70 { width: 70% !important; }
  .w-sm-75 { width: 75% !important; }
  .mw-sm-50 { max-width: 50% !important; }
  .h-sm-100 { height: 100% !important; }
  .fs-sm-1 { font-size: calc(1.375rem + 1.5vw)!important; }
  .fs-sm-2 { font-size: calc(1.325rem + .9vw)!important; }
  .fs-sm-3 { font-size: calc(1.3rem + .6vw)!important; }
  .fs-sm-4 { font-size: calc(1.275rem + .3vw)!important; }
  .fs-sm-5 { font-size: 1.25rem!important; }
  .fs-sm-6 { font-size: 1rem!important; }
  .invisible-sm { visibility: hidden !important }

  td.text-center > .progress { /* table row contains progress bar */
    width: 69px; /*12% of min-width*/
  }
  #holding_table td.text-center > .progress,
  #monthly_alloc .progress {
    width: 86px; /*15% of min-width*/
  }
  .ui-menu {
    width: 374px !important; /*65% of min-width*/
  }
  .max-lines-sm-2 {
    line-clamp: 2 !important;
    -webkit-line-clamp: 2 !important;
  }
  .max-lines-sm-3 {
    line-clamp: 3 !important;
    -webkit-line-clamp: 3 !important;
  }
  .max-lines-sm-4 {
    line-clamp: 4 !important;
    -webkit-line-clamp: 4 !important;
  }
  .position-sm-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
  }
  /*.change-image-order {
    order: 2;
    justify-content: center!important;
  }
  .change-text-order {
    order: 1;
    justify-content: start!important;
  }*/
}
@media (min-width: 768px) {/* md */
  .ui-menu {
    width: 345px !important;/*45% of min-width*/
  }
  .w-md-5 { width: 5% !important; }
  .w-md-10 { width: 10% !important; }
  .w-md-15 { width: 15% !important; }
  .w-md-20 { width: 20% !important; }
  .w-md-25 { width: 25% !important; }
  .w-md-30 { width: 30% !important; }
  .w-md-35 { width: 35% !important; }
  .w-md-40 { width: 40% !important; }
  .w-md-45 { width: 45% !important; }
  .w-md-50 { width: 50% !important; }
  .w-md-55 { width: 55% !important; }
  .w-md-60 { width: 60% !important; }
  .w-md-65 { width: 65% !important; }
  .w-md-70 { width: 70% !important; }
  .w-md-75 { width: 75% !important; }
  .mh-md-90vh { max-height: 90vh; }
  .fs-md-1 { font-size: calc(1.375rem + 1.5vw)!important; }
  .fs-md-2 { font-size: calc(1.325rem + .9vw)!important; }
  .fs-md-3 { font-size: calc(1.3rem + .6vw)!important; }
  .fs-md-4 { font-size: calc(1.275rem + .3vw)!important; }
  .fs-md-5 { font-size: 1.25rem!important; }
  .fs-md-6 { font-size: 1rem!important; }
  .invisible-md { visibility: hidden !important }
  .border-bottom-md-0 { border-bottom: 0 !important; }

  .image-container {
    width: 20rem;
    height: 15rem;
    overflow: hidden;
    position: relative;
  }
  .text-md-left {
    text-align: left !important;
  }
  /*.card-body .table.balanced-rows tbody tr:last-child td {
    padding-bottom: 0px;
    border-bottom-color: transparent;
  }*/
  .position-md-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
  }
}
@media (min-width: 992px) {/* lg */
  .w-lg-5 { width: 5% !important; }
  .w-lg-10 { width: 10% !important; }
  .w-lg-15 { width: 15% !important; }
  .w-lg-20 { width: 20% !important; }
  .w-lg-25 { width: 25% !important; }
  .w-lg-30 { width: 30% !important; }
  .w-lg-35 { width: 35% !important; }
  .w-lg-40 { width: 40% !important; }
  .w-lg-45 { width: 45% !important; }
  .w-lg-50 { width: 50% !important; }
  .w-lg-55 { width: 55% !important; }
  .w-lg-60 { width: 60% !important; }
  .w-lg-65 { width: 65% !important; }
  .w-lg-70 { width: 70% !important; }
  .w-lg-75 { width: 75% !important; }
  .w-lg-80 { width: 80% !important; }
  .w-lg-85 { width: 85% !important; }
  .w-lg-90 { width: 90% !important; }
  .w-lg-95 { width: 95% !important; }
  .w-lg-100 { width: 100% !important; }
  .fs-lg-1 { font-size: calc(1.375rem + 1.5vw)!important; }
  .fs-lg-2 { font-size: calc(1.325rem + .9vw)!important; }
  .fs-lg-3 { font-size: calc(1.3rem + .6vw)!important; }
  .fs-lg-4 { font-size: calc(1.275rem + .3vw)!important; }
  .fs-lg-5 { font-size: 1.25rem!important; }
  .fs-lg-6 { font-size: 1rem!important; }

  .ui-menu {
    width: 595px !important;/*60% of min-width*/
  }
  .image-container {
    height: 300px;
    width: 50%;
    object-fit: cover;
    overflow: hidden;
    position: relative;
  }
}
@media (min-width: 1200px) {/* xl */
  .fs-xl-1 { font-size: calc(1.375rem + 1.5vw)!important; }
  .fs-xl-2 { font-size: calc(1.325rem + .9vw)!important; }
  .fs-xl-3 { font-size: calc(1.3rem + .6vw)!important; }
  .fs-xl-4 { font-size: calc(1.275rem + .3vw)!important; }
  .fs-xl-5 { font-size: 1.25rem!important; }
  .fs-xl-6 { font-size: 1rem!important; }

  .ui-menu {
    width: 780px !important;/*65% of min-width*/
  }
}
@media (min-width: 1400px) {/* xxl */
  .h-scroll {
    overflow-x: visible;
  }
  .ui-menu {
    width: 910px !important;/*65% of min-width*/
  }
}
@media (max-width: 767.98px) {
  .text-md-center { text-align: center !important; }
  .d-hide-md { display: none!important; }
  .justify-content-md-center { justify-content: center!important; }
}

@-moz-document url-prefix() { /* firefox only */
  .table-hover {
    /* to fix table border not showing when using with position:sticky in firefox */
    border-collapse: separate;
  }
}

:root {
  --bs-default-highlight: rgba(255, 255, 255);
  --bs-blue-highlight: rgba(188,214,250);
  --bs-red-highlight: rgba(240,183,183);
  --bs-green-highlight: rgba(204,227,194);
  --bs-yellow-highlight: rgba(255,237,183);
  --bs-purple-highlight: rgba(202,193,226);
}

/* Custom styles for round radio button */
.highlight-radio {
  display: inline-block;
  cursor: pointer;
  margin-right: 4px;
}

.highlight-radio input[type="radio"],
.highlight-radio input[type="checkbox"] {
  display: none; /* Hide the default radio button */
}

/* Styles for the radio button */
.highlight-radio-label {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid black; /* Border color */
  position: relative;
  transition: background-color 0.3s ease-in-out;
}

.highlight-filter {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid black; /* Border color */
  position: relative;
  transition: background-color 0.3s ease-in-out;
}

.highlight-radio-label:hover::after {
  content: "";
  display: block;
  width: 10px; /* Adjust the size of the small dot on hover */
  height: 10px; /* Adjust the size of the small dot on hover */
  border-radius: 50%;
  background-color: #6c757d; /* Grey dot color on hover */
  opacity:0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.highlight-radio input[type="radio"]:checked + .highlight-radio-label::after,
.highlight-radio input[type="checkbox"]:checked + .highlight-radio-label::after {
  content: "";
  display: block;
  width: 24px; /* Adjust the size of the checked circle */
  height: 24px; /* Adjust the size of the checked circle */
  border-radius: 50%;
  background-color: transparent; /* Transparent background when checked */
  border: 3px solid white; /* White border color when checked */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.highlight-label {
    width: 10px;
    margin-top: -0.5em;
    margin-bottom: -0.5em;
}

.highlight-logo {
    width: auto !important;
}

.highlight-stock-logo {
    height: 6em;
    width: 10px;
}

.highlight-label-container.stock-highlight {
  position: relative;
  overflow: hidden; /* Ensure the overlay is contained within the container */
}

.highlight-label-container.stock-highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(33, 37, 41, 0.5); /* Semi-transparent overlay */
  z-index: 1;
  opacity: 0; /* Initially hide the overlay */
  transition: opacity 0.3s ease; /* Smooth transition for opacity change */
  cursor: pointer;
}

.highlight-label-container.stock-highlight:hover::before {
  opacity: 1; /* Show overlay on hover */
}

.mobile-only {
    display: none !important;
}

/* Custom CSS for mobile display */
@media (max-width: 576px) {
  .mt-mobile-10 {
    margin-top: 10px !important;
  }

  .mobile-only {
      display: block !important;
  }
}

.icon-container {
    width: 20px; 
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom right, #2196F3 0%, #0D47A1 100%); 
    border-radius: 4px;
}

.icon {
    color: white; 
    font-weight: bold;
    font-size: 10px;
    line-height: 1; 
}
#promo {
  background: linear-gradient(rgba(3, 29, 68, 0.2), rgba(3, 29, 68, 0.2)), url('https://cdn.700tb.com/sa/index_bg_v4.jpg') no-repeat center center;
  background-size: cover;
}

@media (max-width: 767px) {
  #promo {
    background-position: 90% center;
    position: relative;
  }

  #promo::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
}


.custom-line-height {
      line-height: 0.6;
    }


.display-3{
    color: #FFFFFF;
}

  .country-btn .fi {
    filter: grayscale(1);
    transition: filter 0.3s ease;
    font-size: 2rem;
  }
  .country-btn:hover .fi {
    filter: grayscale(0);
  }
  .country-btn.selected .fi {
    filter: grayscale(0);
    transition: filter 0.3s ease;
  }
  .w-icon {
    width: 2.5em;
  }
  .desc{
      color:grey;
  }
  .descMain{
      color:#bac3cc;
  }
  .icon{
      color:#cc9106;
  }
  .input-group{
      color:grey;
  }
  .search-stock::placeholder {
  color: #FFFFFF;
}

.box-border {
    border: 15px solid grey;
    border-radius: 15px;
    background-color:grey;
}
.clickable-text {
    cursor: pointer;}

#explore_btn {
    background: linear-gradient(to right, #007BFF, #00BFFF);
    -webkit-background-clip: text;
    color: transparent;
    display: inline;
    overflow: visible;
  }

  .bottom-center-icon {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        cursor: pointer;
        bottom: 10px;
        animation: hoverUpDown 1s infinite alternate;
    }

    @keyframes hoverUpDown {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-10px);
        }
    }
    
  .bottom-center-icon-mobile {
        cursor: pointer;
        animation: hoverUpDown 1s infinite alternate;
    }

    @keyframes hoverUpDown {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-10px);
        }
    }
  /* blog post carousel */
  .carousel-inner .carousel-item.active,
  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    display: flex;
  }
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    background-image: none;
  }
  .carousel-control-next-icon {
    right: -1rem;
  }
  .carousel-control-prev {
    left: -1rem;
  }
  .carousel .link-dark:hover {
    color: var(--bs-link-color) !important;
  }
  @media (min-width: 576px) { /* sm */
    .country-btn .fi {
      font-size: 3rem;
    }
    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
      transform: translateX(33.33%);
    }
    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
      transform: translateX(-33.33%);
    }
    .carousel-inner .carousel-item-end,
    .carousel-inner .carousel-item-start {
      transform: translateX(0);
    }
    .w-icon {
      width: 3em;
    }
    #latest_news {
      --bs-gap: 1rem 3rem;
    }
  }
  @media (min-width: 768px) {/* md */
  }