@font-face {
  font-family: "rubik";
  src: url("/wp-includes/fonts/Rubik-VariableFont_wght.ttf");
}

html {
  font-family: "rubik", arial;
  direction: rtl;
  height: 100%;
  /* text-align: center; */
}
body {
  height: 100%;
}
#site-members-stocks-bag {
  height: auto; /*prevoiusly 94%*/
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  /* min-height: 710px; */
  font-size: 14px;
  margin: 0;
}

table {
  width: 100%;
  border-spacing: 0px;
}

th,
td {
  box-sizing: border-box;
  /* width: 12%; */
  width: auto;
  padding: 3px;
  direction: ltr;
}

th {
  cursor: default;
  text-align: center;
  margin-right: 10px;
}

.favorite-tr:not(:first-child):hover,
.folder-content:hover,
#my-stocks-table thead .folder-content:hover {
  background-color: transparent;
  /*rgb(170, 186, 186)*/
}

.folder-content {
  position: relative;
}

#current,
#daily-minimum,
#daily-maximum {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5px;
  line-height: 1.8;
}

/* #folder-values {
  width: 100%;
  margin: 7px 5px 39px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border: 1px solid #3d7fb8;
} */

#title-folder-value {
  font-size: 18px;
  font-weight: bold;
}

.green {
  color: #008000;
  /*seagreen*/
}

.red {
  color: #ff0000;
  /*tomato*/
}

/* .stars {
  direction: ltr;
  min-width: 80px;
}

.stars > span {
  color: #ef9b4b;
  
  -webkit-text-stroke: 1px #ef9b4b;
  
} */

.folder {
  cursor: pointer;
}

.folder-chart {
  /* width: 45%; */
  margin-top: 50px;
  width: 100%;
  /* float: left; */
}

.appendComments,
.displayComments {
  width: 711px;
  margin: 0px;
  display: inline-block;
  max-height: 300px;
}

.appendComments {
  width: 1080px;
}

#comments,
#comments > li > ul,
#addComment {
  list-style-type: none;
  padding-inline-start: 0px;
  padding: 0;
  margin: 0;
}

.username-comment {
  color: white;
  background-color: #3d7fb8;
  font-weight: bold;
  /* width: 100%; */
  text-align: right;
  border-radius: 5px;
  padding-right: 10px;
}

#username-comment,
#username-comment-guest-page {
  color: #3d7fb8;
  background-color: white;
  padding: 0;
}

.text-comment {
  width: 100%;
  text-align: right;
  margin-bottom: 16px;
}

.time-comment {
  width: 100%;
  font-size: 0.7em;
  text-align: left;
  margin-bottom: 30px;
}

#addStock {
  list-style-type: none;
  position: relative;
  text-align: right;
  /* background-color: silver; */
  background-color: white;
  direction: rtl;
  padding-inline-start: 10px;
  animation: easy-in 0.4s;
  max-width: 340px;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
  /* align-items:center; */
  box-shadow: 1px 1px 1px 1px;
  border-radius: 15px;
}

#add-stock-container-content {
  display: flex;
  flex-direction: row;
}

#labels-only,
#container-for-inputs {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#container-for-inputs input {
  background-color: #e8f4ff !important;
  border-bottom: 2px solid #346cad !important;
  border-right: none;
  outline: none;
  border: 2px solid #f1f1f1;
}

#addStock li:last-child {
  align-self: center;
}

#addStock li:first-child {
  display: flex;
  align-items: center;
  gap: 55px;
}

#popup-heading {
  display: flex;
  align-items: center;
  gap: 55px;
}

#addStock li input {
  background-color: #e8f4ff !important;
  border-bottom: 2px solid #346cad !important;
}

#addStockPanelTitle {
  font-size: 19px;
  font-family: "rubik";
}

#addStockToBagBtn {
  color: white;
  background-color: #60a8c4 !important;
  width: 62px;
  border-radius: 10px;
  align-self: center;
}

#close-add-stock-panel {
  margin-right: 0.5rem;
  margin-top: 0.5rem;
  background-color: transparent;
  display: flex;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  color: black;
  position: relative;
  top: -7px;
  right: -3px;
}

#editStock {
  padding: 0;
}

#editStock input {
  outline: none;
  background-color: #e8f4ff !important;
}

.edit-stock-title {
  align-self: center;
  margin: 0;
  position: relative;
  top: 10px;
}

.edit-stock-container {
  list-style-type: none;
  position: relative;
  text-align: right;
  background-color: silver;
  direction: rtl;
  padding-inline-start: 10px;
  animation: easy-in 0.4s;
  max-width: 340px;
  margin: 15px auto;
  display: flex;
  flex-direction: column;
  padding-top: 15px;
}

#edit-stock-container {
  position: relative;
  background-color: white;
  direction: rtl;
  padding-inline-start: 10px;
  box-shadow: 1px 1px 1px 1px;
  border-radius: 15px;
}

#popup-button-on-close,
#add-stock-to-bag-button {
  /* background-color:#346cad !important; */
  align-self: center;
  /* color:white; */
  width: 55px;
}

#addStockbutton {
  /* float: right; */
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
  border: 1px solid #3d7fb8;
  color: #3d7fb8;
  background-color: white;
  height: 30px;
  position: relative;
  top: 11px;
  border: 1px solid #e5b485;
}

#folder-stocks-content {
  /* max-height: 409px; */
  /* overflow-y: scroll; */
  direction: ltr;
}

#folder-history-content {
  max-height: 300px !important;
  /*400px*/
  /* overflow-y: scroll !important; */
}

#folder-stocks-content,
#folder-history-content {
  /* overflow-y: scroll; */
  display: block;
}

/* #folder-stocks-content tr td:nth-child(2) {
  text-align: right;
} */

/* #folder-history-content tr td:nth-child(1),
#folder-history-content tr td:nth-child(2),
#folder-history-content tr td:nth-child(3),
#folder-history-content tr td:nth-child(4),
#folder-history-content tr td:nth-child(5),
#folder-history-content tr td:nth-child(6),
#folder-history-content tr td:nth-child(7) {
  text-align: center;
} */

/* #folder-stocks-content tr td:nth-child(2) a {
  color: blue;
}
#folder-stocks-content tr td:nth-child(1),
#folder-stocks-content tr td:nth-child(3),
#folder-stocks-content tr td:nth-child(4),
#folder-stocks-content tr td:nth-child(5),
#folder-stocks-content tr td:nth-child(6),
#folder-stocks-content tr td:nth-child(7),
#folder-stocks-content tr td:nth-child(8) {
  text-align: center;
} */

#folder-history > thead > tr,
#my-stocks-table > thead > tr {
  /* width: 100%; */
}

#my-stocks-table tr {
  display: grid;
  grid-template-columns: 20% 10% 10% 10% 6% 10% 10% 9% 15%;
  align-items: center;
  text-align: center;
  justify-items: center;
  direction: rtl;
}

#my-stocks-table tr:hover,
#my-stocks-table tr:not(:first-child):hover,
#folder-history-content tr:hover,
#favorite-tbody tr:hover {
  background-color: #e9e9e9;
}

/* #my-stocks-table thead,
#folder-history thead,
#favorite-tbody  thead{
    background-color:none !important;
} */

#my-stocks-table-body {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  top: 20px;
  border: 1px solid #3d7fb8;
  margin-top: 20px;
  margin-bottom: 20px;
}

#bag-value-title {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

#social-table-body {
  width: 100%;
}

#social-table-body tr td,
#social-table thead tr th {
  text-align: center;
}

#favorite-tbody tr td:nth-child(2),
#favorite-tbody tr td:nth-child(3),
#favorite-tbody tr td:nth-child(4),
#favorite-tbody tr td:nth-child(5),
#favorite-tbody tr td:nth-child(6),
#favorite-tbody tr td:nth-child(7),
#favorite-tbody tr td:nth-child(8) {
  text-align: center;
}

#favorite-tbody {
  max-height: 390px;
  overflow-y: scroll;
}

#folder-history tr {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 1.3fr;
  direction: rtl;
}

#sum {
  display: grid;
  grid-template-columns: repeat(8, 1fr) 1.4fr;
}

#addStock {
  display: none;
}

#editStock > li::before {
  opacity: 0;
}

#editStock > li:last-child {
  text-align: center;
}

#editStock > li {
  transition: opacity 0.3s;
}

#search-results {
  height: fit-content;
  overflow: hidden scroll;
  max-height: 170px;
  position: absolute;
  background-color: whitesmoke;
  z-index: 5;
  width: 59%;
  /*80%*/
}

#search-results > li:hover {
  background-color: lightgray;
}

button {
  margin: 10px;
  border: 0px;
  border-radius: 5px;
  background-color: #aababa;
  padding: 5px;
}

button:hover {
  cursor: pointer;
}

.inner-cont {
  border-radius: 10px;
  background-color: #fff;
  margin: 0px;
  padding: 10px;
}

.folder-scroll {
  max-height: 350px;
  overflow-y: auto;
}

.cont-followers .folder-scroll {
  max-height: 152px;
}

.cont {
  display: grid;
  grid-template-columns: 50% 50%;
}

/* #editRow {
  animation: easy-in 0.4s;
} */

.pro-background {
  background-image: url("https://weinvest.co.il/wp-content/uploads/logo-pro-transparent-30.png") !important;
  background-size: 80%;
  background-position: 80% 50%;
  background-repeat: no-repeat;
}

.normal-background {
  /* background-image: url('/wp-content/uploads/2023/04/graph-bg.png') !important; */
  /* background-image:url("https://weinvest.co.il/wp-content/uploads/2024/03/logo.png") !important; */
  background-image: url("/wp-content/uploads/2023/08/weinvest-10.png") !important;
  background-size: 77% 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.apexcharts-canvas {
  /* background-image: url('/wp-content/uploads/2023/04/graph-bg.png') !important; */
  background-size: 77% 50%;
  background-position: center;
  background-repeat: no-repeat;
}

@-webkit-keyframes easy-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#add-stock-container {
  position: fixed;
  z-index: 2;
  width: 100%;
}

#addStock > li,
#editStock > li {
  padding: 5px;
  display: block;
}

li > input {
  border: 0px;
  border-radius: 5px;
  padding: 5px;
}

.exit-button {
  border-radius: 3px;
  position: relative;
  /* right: 133px; */
  right: 192px;
  /* top: -10px; */
  top: -52px;
  background-color: tomato;
  color: white;
  border: 0;
  margin: 0px;
  padding: 4px 7px;
}

#add-comment-button {
  padding: 5px;
  background: #f1f7ff;
  /*#f2f9fc*/
  border: 1px solid #3d7fb8;
  border-radius: 2px;
}

#add-comment-button:hover {
  background: #ffebcd80;
}

.option-stock > a {
  background-color: #ffebcd80;
  padding: 3px;
  margin: 0px;
  color: #000;
  text-decoration: none;
  border-radius: 1px;
  cursor: pointer;
  font-size: 0.9em;
}

.option-stock > a:first-child {
  display: none;
}

#addStock > li:first-child {
  text-align: left;
}

#addStock > li > .exit-button {
  right: -4px;
  top: -10px;
}

.graph-btns-container {
  display: flex;
  justify-content: center;
}

.graph-btns-container button {
  background-color: #fff9f4;
  border: 1px solid #97133f;
  margin-right: 1px;
  border-radius: 0;
}

.graph-btns-container button:focus {
  background-color: rgb(151, 19, 63);
  color: white;
}

.folder-tabs {
  display: flex;
  /* justify-content: space-evenly; */
  justify-content: center;
  align-items: center;
  position: relative;
  top: -20px;
}

#folder-tbody tr td {
  text-align: center;
}

#mybag-data {
  width: 86%;
}

#container-table-and-add-stock {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 43px;
  justify-content: space-between;
}

#folder-tabs-header {
  border: none !important;
}

.folder-tab {
  width: 15%;
  border: 2px solid black;
  margin: 0;
  padding: 15px;
  position: relative;
  cursor: pointer;
  color: #3d7fb8;
  text-align: center;
}

.apexcharts-menu-item.exportCSV {
  display: none;
}

.folder-tab.active {
  /* background-color: rgb(170, 186, 186);
     */
  /* background-color:#f1f7ff; */
  background-color: transparent;
}

#editRow,
#editRowFavorites,
#popupAddFavorite,
#popupCannotAddFavorite {
  position: fixed;
  top: 0px;
  width: 100%;
  display: flex !important;
  z-index: 99;
}

#editRow:hover {
  background-color: transparent !important;
}

.popup-td {
  width: 100%;
  margin: auto auto;
}

.option-stock > a.active {
  background-color: #e8f4ff !important;
  color: black;
  border: 1px solid black;
  box-shadow: 2px 2px 5px black;
}

#delete-stock-from-bag,
#add-stock-to-bag-button,
#popup-button-on-close {
  border: 1px solid #e5b485;
  color: #3d7fb8 !important;
  background-color: white;
}

.title {
  margin: 0;
  font-weight: normal;
  font-size: 19.5px;
  color: #333333;
  text-align: center;
}

.folder-value-table {
  width: 250px;
  margin: 0 auto;
}

.apexcharts-tooltip-text-y-value {
  direction: ltr;
}

.apexcharts-toolbar {
  right: unset !important;
}

.action-icon {
  cursor: pointer;
}

@media only screen and (orientation: portrait) and (max-width: 650px) {
  .folder-chart,
  .appendComments,
  .displayComments {
    width: 100%;
  }

  .cont {
    grid-template-columns: 100%;
  }

  /* textarea {
    width: 97%;
    resize: none;
  } */

  .folder-content > td:nth-child(4),
  .folder-content > td:nth-child(n + 6) {
    display: none;
  }

  .folder-content > th:nth-child(4),
  .folder-content > th:nth-child(n + 6) {
    display: none;
  }

  .option-stock > a:first-child {
    display: initial;
  }

  .exit-button {
    right: 0px;
  }
}

#folder-content tr td,
#folder-most-followers tr,
#my-followed-folders tr {
  cursor: pointer;
  white-space: nowrap;
}

#folder-content tr td,
#my-followed-folders tr td {
  text-align: right;
}

/* #folder-content tr, */
#table-my-stocks-in-bag thead tr,
#table-my-stocks-in-bag #folder-content tr,
#folder-history-content tr,
#table-history-stocks-in-bag thead tr {
  display: grid;
  grid-template-columns: repeat(7, 1fr) 1.3fr;
}

#table-my-stocks-in-bag {
  direction: rtl;
}

#table-history-stocks-in-bag {
  max-height: 180px;
  margin-bottom: 15px;
  overflow: scroll;
  direction: rtl;
}

#folder-content tr td:nth-child(1):hover,
#my-followed-folders tr td:nth-child(1):hover {
  /* color: blue; */
}

#my-stock-table {
  /* width: 250px; */
  margin: 0 auto;
}

#all-folders-link {
  position: absolute;
  right: 15px;
  top: -1px;
  font-size: 14px;
}

.subTitle {
  text-align: center;
  margin: 15px;
}

#social-table {
  /* width: 250px; */
  width: 800px;
  border-spacing: 0px;
  position: relative;
  top: 37px;
}

#social-table-follow-button-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sortable-personal-bag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

ul#addComment {
  /* width: 710px; */
  margin-left: 5px;
}

/* textarea {
  font-size: 15px;
  height: 150px;
  width: 100%;
} */

.tables-cotnainer {
  display: flex;
  justify-content: space-evenly;
}

#comment-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.appendComments {
  flex: 0 1 50%;
  padding: 10px;
  box-sizing: border-box;
}

.displayComments {
  margin-top: 10px;
  flex: 0 1 50%;
  overflow-y: auto;
}

#personal-folder-tab,
#follow-folder-tab,
#favorite-folder-tab {
  border: none;
}

#personal-folder-tab:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 85%;
  width: 0%;
  height: 5px;
  background-color: #e5b485;
  transition:
    width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

#follow-folder-tab:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 0%;
  height: 5px;
  background-color: #e5b485;
  transition:
    width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

#favorite-folder-tab:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 15%;
  width: 0%;
  height: 5px;
  background-color: #e5b485;
  transition:
    width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

/* #personal-folder-tab:hover:after{
    content: "";
    position: absolute;
    bottom: 3px;
    left: 10%;
    width: 0%;
    height: 5px;
    background-color: #e5b485;
    transition: width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
        left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
} */
#personal-folder-tab.active:after,
#personal-folder-tab:hover:after,
#personal-folder-tab:focus:after {
  content: "";
  position: absolute;
  bottom: 3px;
  /* left: 50%;
    width: 0%; */
  height: 5px;
  background-color: #e5b485;
  transition:
    width 500ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  left: 50% !important;
  /*535%*/
  right: 19% !important;
  width: 121px !important;
}

#follow-folder-tab.active:after,
#follow-folder-tab:hover:after,
#follow-folder-tab:focus:after {
  content: "";
  position: absolute;
  bottom: 3px;
  /* left: 50%;
    width: 0%; */
  height: 5px;
  background-color: #e5b485;
  transition:
    width 500ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  left: 70% !important;
  right: 43% !important;
  width: 146px !important;
}

#favorite-folder-tab.active:after,
#favorite-folder-tab:hover:after,
#favorite-folder-tab:focus:after {
  content: "";
  position: absolute;
  bottom: 3px;
  /* left: 50%;
    width: 0%; */
  height: 5px;
  background-color: #e5b485;
  transition:
    width 500ms cubic-bezier(0.25, 0.8, 0.25, 1),
    left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
  left: 25% !important;
  right: 17.1% !important;
  width: 143px !important;
}

#sum-values-of-table {
  /* display:flex;
    flex-direction:row;
    justify-content:space-evenly; */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* Creates 9 equal-width columns */
  grid-gap: 10px;
}

#sum-values-of-table div {
  padding: 4px;
  text-align: left;
}

#sum-values-of-table div:nth-child(8) {
  position: relative;
  left: 70px;
}

#sum-values-of-table div:nth-child(6) {
  position: relative;
  right: 51px;
}

#user-comment-text-area {
  height: 98px;
  font-family: "rubik", arial;
}

#user-comment-textarea {
  font-family: "rubik", arial;
}

#comment-user-and-time,
#comment-user-and-time-guest-page {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-bottom: 1px solid #e5b485;
}

#comments-display-section {
  max-height: 150px;
  overflow-y: scroll;
}

#comments-display-guest-page {
  max-height: 183px;
  overflow-y: scroll;
  width: 50%;
}

#add-comments-section-guest-page {
  width: 50%;
}

#time-comment,
#time-comment-guest-page {
  margin-bottom: 0;
  color: #3d7fb8;
  font-size: 13px;
  font-weight: 600;
  width: 31%;
}

#comments-section-container,
#comments-section-container-guest-page {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
}

#comment-description,
#comment-description-guest-page {
  margin-top: 10px;
}

#container-display-append-comments {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  top: 13px;
}

/* #icon-delete-stock-tooltip{
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: black;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
  
} */

/* #icon-delete-stock:hover #icon-delete-stock-tooltip{
    visibility: visible;
} */

/* #open-tab-btn.active::after,
#open-tab-btn:hover:after,
#open-tab-btn:focus:after {
    left: 535% !important;
    right: 34% !important;
    width: 128px !important;
}

#close-tab-btn.active::after,
#close-tab-btn:hover:after,
#close-tab-btn:focus:after {
    left: 9% !important;
    right: 39% !important;
    width: 88px !important;
} */
#message-invalid-amount-message,
#error-details {
  color: red;
}

.message-invalid-amount {
  display: none;
}

#popup-exit-btn,
#popup-exit-btn-favorites {
  background-color: white;
  color: black;
  position: relative;
  right: -184px;
  top: -17px;
}

#popup-exit-btn-favorites {
  background-color: white;
  color: black;
  position: relative;
  right: 0px;
  top: -44px;
  cursor: pointer;
}

#popup-delete-favorites-title {
  z-index: 1;
}

#search-input-container {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 5px;
}

#search-input-container input {
  font-family: "Rubik", sans-serif;
  /* border: 1px solid #7da7cc !important; */
  border: 2px solid #00367c !important;
  border-radius: 3px;
  background-color: white !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" ><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" fill="%237da7cc"/></svg>')
    no-repeat;
  text-align: center;
  box-sizing: border-box;
  background-position: 50px center;
  background-size: 16px 16px;
  height: 30px;
  width: 250px;
  padding-right: 0;
  padding-left: 5px;
}

#search-stocks-favorites::placeholder {
  font-weight: 350;
  color: #3472a7;
  font-size: 15px;
}

#results-stocks-favorites {
  height: fit-content;
  /* overflow: hidden scroll; */
  overflow-y: hidden;
  overflow-x: hidden;
  align-items: center;
  justify-content: center;
  max-height: 206px;
  position: absolute;
  background-color: white;
  z-index: 5;
  width: 245px;
  list-style-type: none;
  top: 33px;
  padding-inline-start: 0;
  /* border: 1px solid #c5c5c5; */
  border: 2px solid #00367c;
  margin: 0;
}

#results-stocks-favorites > li {
  padding: 2px 0px;
  text-align: center;
  color: #333333;
  font-size: 14px;
  font-family: "rubik", Arial, sans-serif !important;
  background-color: white;
}

#results-stocks-favorites > li:hover {
  /* background-color: #3472a7d1;
  color: white; */
  color: black;
  background-color: #e6ebf2;
}

#delete-stock-from-favorites,
#add-stock-to-favorites {
  color: #3d7fb8;
  background-color: white !important;
  width: 62px;
  align-self: center;
  border: 1px solid #e5b485;
}

#personal-folder-of-user {
  padding: 5px 327px;
  color: #3d7fb8;
  text-decoration: 3px underline #e5b485;
}

.bag-value-parameters {
  line-height: 1.6;
}

/* #personal-folder-of-user:after{
    content: "";
    position: absolute;
    display:block;
    top:71px;
    bottom: 3px;
    left: 36%;
    width: 35%;
    height: 5px;
    background-color: #e5b485;
    transition: width 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
        left 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
} */

#user-follow button {
  position: relative;
  top: 47px;
  left: 55px;
  border: 1px solid #e5b485;
  color: #3d7fb8;
  height: 30px;
  background-color: White !important;
}

#my-stocks-history-title {
  display: flex;
  justify-content: center;
  margin-top: 5%;
}

#user-stocks-in-bag {
  position: relative;
  top: 50px;
  margin-bottom: 45px;
}

#add-favorite-stock-container,
#add-favorite-stock-container-error {
  position: relative;
  background-color: white;
  direction: rtl;
  padding-inline-start: 10px;
  box-shadow: 1px 1px 1px 1px;
  border-radius: 15px;
}

#message-no-history,
#no-comments-message {
  text-align: center;
  display: flex;
  justify-content: center;
}

#folder-graph-section {
  margin-top: 35px;
}

#add-comment-btn-container,
#add-comment-button-guest-page {
  display: flex;
  justify-content: center;
}

#name-time-comment-container,
#name-time-comment-container-guest-page {
  display: flex;
  flex-direction: column;
  width: 90%;
}

#user-profile-picture,
#user-profile-picture-guest-page {
  width: 10%;
}

#chart-user-profits {
  width: 100%;
  height: 309px;
}

#chart-user-profits .apexcharts-canvas {
  background-image: none !important;
}

.profit-btn-active,
.chosen-filter-graph-btn {
  background-color: #97133f !important;
  color: white;
}

/* #main-content-AI-bag-pro{
    height:1700px;
} */

.tooltip-window {
  height: fit-content;
  width: 100px;
}

.tooltip-date {
  background-color: #eceff1;
  text-align: right;
  margin-top: 0;
  border-bottom: 1px solid #ddd;
}

.tooltip-date,
.tooltip-value {
  padding-right: 10px;
}

.filter-button-folder-profit {
  width: auto;
  height: 19.76px;
  line-height: 0.75;
  margin-left: 3px;
}

#graph-filter-by-time-buttons {
  margin-top: -50px;
  /*-17px*/
  margin-bottom: 22px;
  /*13px*/
}

#comment-wrapper,
.history-table-wrapper-container {
  position: relative;
}

/* NEW DESIGN CLASSES */
.folder-values,
.folder-details {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-radius: 5px;
  box-shadow: 2px 4px 4px #c9cfe0;
}

.guest-folder,
.guest-folder {
  width: 49%;
}

.folder-values-grid {
  width: 40%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto;
  border-radius: 5px;
  box-shadow: 2px 4px 4px gray;
}

.seprator {
  grid-column: 1 /5;
  grid-row: 2;
  height: 1px;
  background-color: #c7cfd7;
}

.folder-values-titles {
  display: flex;
  justify-content: space-evenly;
  padding-right: 45px;
  gap: 25px;
  width: 40%;
}

.folder-values-titles-grid,
.folder-values-data-grid,
.folder-details-titles-grid,
.folder-details-data-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
  align-items: center;
  text-align: center;
  text-wrap: auto;
}

.folder-values-titles-grid > div,
.folder-details-titles-grid > div {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

.folder-details-titles {
  display: flex;
  justify-content: space-evenly;
  padding-right: 18px;
  gap: 25px;
  width: 40%;
}

.folder-values-data {
  display: flex;
  justify-content: space-evenly;
  padding-right: 26px;
  gap: 22px;
  width: 40%;
}

.folder-details-data {
  display: flex;
  justify-content: space-evenly;
  padding-right: 26px;
  gap: 22px;
  width: 40%;
}

.folder-values-titles > div,
.folder-details-titles > div {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.add-stock-container {
  background-color: #45a6dd;
  text-align: center;
  color: white;
  /* box-shadow: 8px 9px #1477da40, 0 0 0 3px #1477da40; */
  box-shadow: 8px 9px #f5f5f5;
  border-radius: 5px;
  font-weight: 400;
  font-size: 1.1rem;
}

.add-stock-container:hover {
  box-shadow:
    4px 6px #c9cfe0,
    0 0 0 3px #f5f5f5;
  background-color: #71bbe5;
  transform: translate(2px, 2px);
}

.folder-headers-container {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  gap: 200px;
}

.folder-header {
  font-weight: 700;
}

.icon-container,
.icon-container.is-down {
  flex-shrink: 0;
  cursor: pointer;
  /* z-index: 1; */
}

.icon-container:hover {
  animation: moveArrowIconUp 1s ease-in-out infinite;
}

.icon-container.is-down:hover {
  cursor: pointer;
  animation: moveArrowIconDown 1s ease-in-out infinite;
}

@keyframes moveArrowIconUp {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(3px, -3px);
  }

  100% {
    transform: translate(0);
  }
}

@keyframes moveArrowIconDown {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(3px, 3px);
  }

  100% {
    transform: translate(0);
  }
}

.graph-container {
  width: 400px;
  height: 200px;
  border: 2px solid black;
  border-radius: 5px;
  transform: scale(0.4);
  display: none;
  position: absolute;
  z-index: 10000;
  background-color: white;
}

.action-icon:hover {
  color: #3199f4;
}

.chart-btn {
  color: #3199f4;
  border-radius: 10px;
  box-shadow: 0 2px 4px gray;
  background-color: white;
  width: 60px;
}

.chart-btn-active {
  color: white;
  background-color: #3199f4;
}

.graph-btns-panel {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 20px;
}

.chart-btn-wraper {
  display: flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 2px 4px #c9cfe0;
  position: relative;
  top: 0px;
}

.chart-btn-wraper-guest {
  display: flex;
  align-items: center;
  border-radius: 10px;
  box-shadow: 0 2px 4px #c9cfe0;
  position: relative;
  top: -50px;
  left: 15%;
}

.tooltip-chart {
  width: 400px;
  height: 200px;
}

.date-picker {
  border: 2px solid #c9cfe0 !important;
  border-radius: 4px;
  height: 24px;
  background-color: white !important;
}

.date-picker-wraper {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  right: 280px;
}

.date-picker-wraper-guest {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  right: 210px;
  top: 10px;
}

.search-btn {
  cursor: pointer;
}

.comment-section-container,
.my-insights-container {
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 2px 4px gray;
  width: 49%;
}

.write-comment-block {
  display: flex;
  /* flex-direction: column;
  width: 80%; */
}

.post-insight-block {
  width: -webkit-fill-available;
  margin-right: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  width: 95%;
}

.post-insight-btn {
  margin: 10px;
  border: 0px;
  border-radius: 15px;
  background-color: #45a6dd;
  color: #fff;
  padding: 5px;
  height: 20%;
  width: 25%;
  align-self: flex-end;
}

.comment-text-area {
  resize: none;
  flex-grow: 1;
  height: 60px;
  font-family: "rubik";
  font-size: 14px;
}

.publish-comment-block {
  background-color: #f0f0f0;
}

.publish-comment-btn {
  margin: 0 10px;
  border-radius: 15px;
  background-color: #45a6dd;
  color: white;
  font-weight: 600;
  height: 20%;
  align-self: end;
}

.user-img {
  float: right;
  margin-top: -10px;
  margin-left: 5px;
  margin-right: 5px;
}

.comments-block,
.insights-block {
  max-height: 300px;
  direction: rtl;
  padding: 10px;
}

.insight-seperator,
.comment-seperator {
  height: 1px;
  background-color: gray;
  margin-top: 5px;
}

.view-insights-invisible {
  display: none;
}

.view-insights-visible {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  align-items: center;
}

.comments-scrollable-wraper,
.insights-scrollable-wraper,
.table-scrollable-wraper {
  direction: ltr;
  overflow-y: scroll;
  margin-top: 10px;
  width: 100%;
}

.insights-scrollable-wraper {
  margin-top: 10px;
}

.insight-textarea {
  width: 95%;
  height: 110px;
  position: relative;
  border: 3px solid #f5f5f5;
  font-family: "rubik";
  font-size: 14px;
}

.comment-details-container {
  display: flex;
  margin-right: 5px;
  gap: 15px;
  margin-bottom: 10px;
}

.insight-details-container {
  display: flex;
  margin-right: 5px;
  gap: 15px;
  margin-bottom: 10px;
  text-align: start;
}

.comment-interaction-container,
.insight-interaction-container {
  display: flex;
  align-items: end;
  font-size: smaller;
  align-self: end;
}

.comment-container,
.insight-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
}

.comments-scrollable-wraper::-webkit-scrollbar-track,
.insights-scrollable-wraper::-webkit-scrollbar-track,
#folder-stocks-content::-webkit-scrollbar-track,
.table-scroll-container::-webkit-scrollbar-track,
.history-table-scroll-container::-webkit-scrollbar-track {
  border-radius: 10px;
}

.comments-scrollable-wraper::-webkit-scrollbar-thumb,
.insights-scrollable-wraper::-webkit-scrollbar-thumb,
#folder-stocks-content::-webkit-scrollbar-thumb,
.table-scroll-container::-webkit-scrollbar-thumb,
.history-table-scroll-container::-webkit-scrollbar-thumb {
  background: #3199f4;
  border-radius: 10px;
}

.stocks-table tr,
.history-stocks-table tr,
.guest-stocks-table tr {
  border-collapse: collapse;
  border: 2px solid #d9d9d9;
}

.stocks-table th,
.history-stocks-table th,
.guest-stocks-table th,
.favorites-table th {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 5px;
}

.stocks-table td,
.history-stocks-table td {
  text-align: center;
  /* padding-right: 20px; */
}

.guest-stocks-table tr td {
  padding: 0px !important;
}

/* .stocks-table tr td:nth-child(2),
.stocks-table tr td:nth-child(5) {
  padding-right: 40px !important;
}
.stocks-table tr td:nth-child(3),
.stocks-table tr td:nth-child(6) {
  padding-right: 35px !important;
}
.stocks-table tr td:nth-child(4) {
  padding-right: 50px !important;
} */

.history-stocks-table tr td:nth-child(2) {
  padding-right: 45px !important;
}

.history-stocks-table tr td:nth-child(5) {
  padding-right: 15px !important;
}

.history-stocks-table tr td:nth-child(3) {
  padding-right: 35px !important;
}

.history-stocks-table tr td:nth-child(4) {
  padding-right: 20px !important;
}

.history-stocks-table tr td:nth-child(6) {
  padding-right: 0px !important;
}

.history-stocks-table tr td:nth-child(7) {
  padding-right: 4px !important;
}

.stocks-table-row {
  border-bottom: 2px solid rgb(215, 211, 211);
}

.arrows {
  display: flex;
  flex-direction: column;
}

.header-row {
  display: flex !important;
  justify-content: space-evenly;
  align-items: center;
}

/* stars classes */

.star {
  font-size: 20px;
}

.full-star {
  margin-right: -9px;
}

.full-star > label::before {
  content: "★";
}

/* .half-star > label::after {
} */
.half-star-container {
  display: flex;
}

.half-star {
  margin-right: -1rem;
}

.half-star > label:before {
  content: "⯨";
}

.reverse-half-star {
  /* margin-right: -1.5px !important;*/
}

.reverse-half-star > label:before {
  content: "⯨";
  display: inline-block;
  transform: rotateY(180deg);
}

.stars-row {
  /* display: grid;
  grid-template-columns: repeat(5, 1fr); */
  display: flex;
}

.gold-star {
  color: #ffa723;
}

.gray-star {
  color: #666;
}

/* .hide-gold {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 10s linear;
}

.animate-gold {
  clip-path: inset(0 0% 0 0);
} */
/*  */

/* toggle button my insights*/

/* Property 1=Default */

.insight-toggle-btn {
  position: absolute;
  width: 93.86px;
  height: 32.94px;
  scale: 0.75;
  left: -5px;
  /* top: 20px;  */
}

.page-toggle-btn {
  position: relative;
  display: block;
  width: 77.86px;
  height: 32.94px;
  scale: 0.75;
  margin-left: -8px;
}

/* Rectangle 66 */

.toggle-btn-privacy-container {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;
  background: #99c4de;
  border: 2px solid #000000;
  border-radius: 36px;
}

/* אישי */
.label-privacy {
  position: absolute;
  left: 10%;
  right: 60.58%;
  top: 22.22%;
  bottom: 18.52%;
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 17px;
  text-align: center;
  color: #000000;
}

/* Rectangle 68 */

.toggle-btn-privacy-thumb {
  position: absolute;
  left: 64.99%;
  right: 3.5%;
  top: 9.53%;
  bottom: 9.52%;

  background: #ffffff;
  border-radius: 10px;
}

/* Rectangle 66 */
.insight-privacy-checkbox:checked + .toggle-btn-privacy-container,
.page-privacy-checkbox:checked + .toggle-btn-privacy-container {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 0%;
  bottom: 0%;

  background: #ffc67c;
  border: 2px solid #000000;
  border-radius: 36px;
}

/* Rectangle 68 */
.insight-privacy-checkbox:checked
  + .toggle-btn-privacy-container
  .toggle-btn-privacy-thumb,
.page-privacy-checkbox:checked
  + .toggle-btn-privacy-container
  .toggle-btn-privacy-thumb {
  position: absolute;
  left: 4.26%;
  right: 64.23%;
  top: 9.53%;
  bottom: 9.52%;

  background: #ffffff;
  border-radius: 10px;
}

/* ציבורי */
.insight-privacy-checkbox:checked
  + .toggle-btn-privacy-container
  .label-privacy,
.page-privacy-checkbox:checked + .toggle-btn-privacy-container .label-privacy {
  position: absolute;
  left: 55.4%;
  right: 10.18%;
  top: 24.46%;
  bottom: 16.29%;

  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 17px;
  text-align: center;

  color: #000000;
}

/*  */

/* Popup window */

/* Rectangle 54 */
.popup-window {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 400px;
  height: 275px;
  left: 30%;
  top: 0;
  background: #ffffff;
  border: 1px solid #f5f5f5;
  box-shadow: 3px 10px 4px #c9cfe0;
  border-radius: 10px;
}

.popup-window-btns-container {
  /* Frame 38 */
  width: 80%;
  align-self: center;
  display: flex;
  justify-content: center;
}

.popup-window-buy-btn {
  /* Rectangle 77 */
  position: absolute;
  width: 85px;
  height: 42px;
  left: 206px;
  top: 11px;
  background: #ffffff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}

.popup-window-btn {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  background: #fff;
}

.popup-window-btn > label {
  color: #60a8c4;
}

.popup-window-btn-active {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
  background: #60a8c4 !important;
}

.popup-window-btn-active > label {
  color: #fff;
}

.popup-window-btn > .plus {
}

.popup-window-buy-btn-container {
  /* Rectangle 77 */
  width: 85px;
  height: 42px;
  transform: scale(0.65);
  /* left: 103px;
  top: 11px; */

  border-radius: 5px;
}

.popup-window-delete-btn-container {
  /* Rectangle 77 */
  width: 85px;
  height: 42px;
  transform: scale(0.65);
  /* left: 0px;
  top: 11px; */

  border-radius: 5px;
}

.popup-window-sell-btn-container {
  /* Rectangle 77 */
  width: 85px;
  height: 42px;
  transform: scale(0.65);
  /* left: 206px;
  top: 11px; */
  border-radius: 5px;
}

.popup-window-btn-sell-text {
  /* מכירה */
  position: absolute;
  width: 85px;
  height: 25.85px;
  left: 206px;
  top: 14px;
}

.popup-window-btn-buy-text {
  /* קנייה */
  position: absolute;
  width: 85px;
  height: 25.36px;
  left: 103px;
  top: 14.1px;
}

.popup-window-btn-delete-text {
  /* מחיקה */

  position: absolute;
  width: 85px;
  height: 25.85px;
  left: 0px;
  top: 14px;
}

.popup-window-btn-text {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  position: relative;
  bottom: 5px;
  /* color: #60a8c4; */
}

.popup-window-btn-active-text {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: center;

  /* color: #ffffff; */
}

.popup-window-edit-container {
  display: grid;
  margin-right: 40px;
  gap: 5px;
}

.popup-window-edit-line {
  display: grid;
  grid-template-columns: 20% 60%;
}

.popup-window-edit-input {
  height: 20px;
  align-self: center;
  border: 3px solid rgb(176, 173, 173, 0.2) !important;
  border-radius: 5px;
  background-color: white !important;
}

.popup-window-text {
  font-weight: 500;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #60a8c4;
}

.popup-window-warning-text {
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #000;
}

.popup-window-confirm-btn {
  box-shadow: 0px 4px 4px 0px #00000040;
  background: #60a8c4;
  width: 60px;
  height: 24px;
  color: white;
  border-radius: 10px;
  opacity: 1;
  position: absolute;
  bottom: 10px;
}

/*  */

.favorites-table tr {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  justify-items: center;
  border-collapse: collapse;
  border: 2px solid #d9d9d9;
}

#no-stocks-message,
#no-history-stocks-message {
  text-align: center;
}

/* scroll table */
.table-scroll-container {
  height: 409px;
  /* Set a fixed height for the scrollable area */
  overflow-y: auto;
  /* Enable vertical scrolling */
  direction: ltr;
  background-color: white;
}

.history-table-scroll-container {
  overflow-y: auto;
  /* Enable vertical scrolling */
  direction: ltr;
  background-color: white;
}

.table-scroll-container table,
.history-table-scroll-container table {
  width: 98%;
  border-collapse: collapse;
  /* Collapse borders for a cleaner look */
}

.table-scroll-container thead,
.history-table-scroll-container thead {
  /* Position the header at the top, making it fixed */
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

.table-scroll-container tfoot {
  /* Position the header at the top, making it fixed */
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 2;
}

/* chart toolbar */
.apexcharts-toolbar {
  direction: ltr;
  top: -40px !important;
  left: 240px;
}

.apexcharts-toolbar .apexcharts-menu.apexcharts-menu-open {
  position: absolute !important;
  top: 25px !important;
  left: 75px;
}

.apexcharts-menu-icon svg {
  /* visibility: hidden; */
  display: none;
}

.apexcharts-toolbar .apexcharts-reset-icon svg path {
  fill: white;
}

.apexcharts-toolbar .apexcharts-toolbar-custom-icon[title="Menu"] {
  position: relative;
  left: 5px;
}

.apexcharts-toolbar .apexcharts-toolbar-custom-icon[title="Search By Dates"] {
  position: relative;
  top: 2px;
  left: 14px;
}

.apexcharts-toolbar .apexcharts-pan-icon.apexcharts-selected svg {
  pointer-events: all !important;
}

/* Icons */
/* black trash */
.simple-line-icons--trash {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='m896.8 159.024l-225.277.001V71.761c0-40.528-33.008-72.496-73.536-72.496H426.003c-40.528 0-73.52 31.968-73.52 72.496v87.264h-225.28c-17.665 0-32 14.336-32 32s14.335 32 32 32h44.015l74.24 739.92c3.104 34.624 32.608 61.776 67.136 61.776h398.8c34.528 0 64-27.152 67.088-61.472l74.303-740.24h44.016c17.68 0 32-14.336 32-32s-14.32-31.985-32-31.985zM416.482 71.762c0-5.232 4.271-9.505 9.52-9.505h171.984c5.248 0 9.536 4.273 9.536 9.505v87.264h-191.04zm298.288 885.44c-.16 1.777-2.256 3.536-3.376 3.536h-398.8c-1.12 0-3.232-1.744-3.425-3.84l-73.632-733.856H788.45z'/%3E%3C/svg%3E");
}

/* blue trash */
.simple-line-icons--trash:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%2345A6DD' d='m896.8 159.024l-225.277.001V71.761c0-40.528-33.008-72.496-73.536-72.496H426.003c-40.528 0-73.52 31.968-73.52 72.496v87.264h-225.28c-17.665 0-32 14.336-32 32s14.335 32 32 32h44.015l74.24 739.92c3.104 34.624 32.608 61.776 67.136 61.776h398.8c34.528 0 64-27.152 67.088-61.472l74.303-740.24h44.016c17.68 0 32-14.336 32-32s-14.32-31.985-32-31.985zM416.482 71.762c0-5.232 4.271-9.505 9.52-9.505h171.984c5.248 0 9.536 4.273 9.536 9.505v87.264h-191.04zm298.288 885.44c-.16 1.777-2.256 3.536-3.376 3.536h-398.8c-1.12 0-3.232-1.744-3.425-3.84l-73.632-733.856H788.45z'/%3E%3C/svg%3E");
}

/* black plus */
.mdi--plus-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 9h5V4h6v5h5v6h-5v5H9v-5H4zm7 4v5h2v-5h5v-2h-5V6h-2v5H6v2z'/%3E%3C/svg%3E");
}

/* blue plus */
.mdi--plus-outline:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2345A6DD' d='M4 9h5V4h6v5h5v6h-5v5H9v-5H4zm7 4v5h2v-5h5v-2h-5V6h-2v5H6v2z'/%3E%3C/svg%3E");
}

/* black minus */
.typcn--minus-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18 16H6c-1.654 0-3-1.346-3-3s1.346-3 3-3h12c1.654 0 3 1.346 3 3s-1.346 3-3 3M6 12c-.551 0-1 .449-1 1s.449 1 1 1h12c.551 0 1-.449 1-1s-.449-1-1-1z'/%3E%3C/svg%3E");
}

/* blue minus */
.typcn--minus-outline:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2345A6DD' d='M18 16H6c-1.654 0-3-1.346-3-3s1.346-3 3-3h12c1.654 0 3 1.346 3 3s-1.346 3-3 3M6 12c-.551 0-1 .449-1 1s.449 1 1 1h12c.551 0 1-.449 1-1s-.449-1-1-1z'/%3E%3C/svg%3E");
}

/*person */
.proicons--person {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 20.75a1 1 0 0 0 1-1v-1.246c.004-2.806-3.974-5.004-8-5.004s-8 2.198-8 5.004v1.246a1 1 0 0 0 1 1zM15.604 6.854a3.604 3.604 0 1 1-7.208 0a3.604 3.604 0 0 1 7.208 0'/%3E%3C/svg%3E");
}

/* Blue plus */
.plus {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360A8C4' d='M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6z'/%3E%3C/svg%3E");
}

.plus.active {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6z'/%3E%3C/svg%3E");
}

/* blue minus */
.minus {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360A8C4' d='M5 13v-1h13v1z'/%3E%3C/svg%3E");
}

.minus.active {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 13v-1h13v1z'/%3E%3C/svg%3E");
}

.trash {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2360A8C4' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m18 9l-.84 8.398c-.127 1.273-.19 1.909-.48 2.39a2.5 2.5 0 0 1-1.075.973C15.098 21 14.46 21 13.18 21h-2.36c-1.279 0-1.918 0-2.425-.24a2.5 2.5 0 0 1-1.076-.973c-.288-.48-.352-1.116-.48-2.389L6 9m7.5 6.5v-5m-3 5v-5m-6-4h4.615m0 0l.386-2.672c.112-.486.516-.828.98-.828h3.038c.464 0 .867.342.98.828l.386 2.672m-5.77 0h5.77m0 0H19.5'/%3E%3C/svg%3E");
}

.trash.active {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  bottom: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m18 9l-.84 8.398c-.127 1.273-.19 1.909-.48 2.39a2.5 2.5 0 0 1-1.075.973C15.098 21 14.46 21 13.18 21h-2.36c-1.279 0-1.918 0-2.425-.24a2.5 2.5 0 0 1-1.076-.973c-.288-.48-.352-1.116-.48-2.389L6 9m7.5 6.5v-5m-3 5v-5m-6-4h4.615m0 0l.386-2.672c.112-.486.516-.828.98-.828h3.038c.464 0 .867.342.98.828l.386 2.672m-5.77 0h5.77m0 0H19.5'/%3E%3C/svg%3E");
}

/* add folder */
.mdi--briefcase-add-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v5.53a5.7 5.7 0 0 0-2-1.19V8H4v11h8.08c.12.72.37 1.39.72 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2m4 4V4h-4v2zm0 11h3v-3h2v3h3v2h-3v3h-2v-3h-3z'/%3E%3C/svg%3E");
}

.mdi--briefcase-add-outline:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23006BB7' d='M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v5.53a5.7 5.7 0 0 0-2-1.19V8H4v11h8.08c.12.72.37 1.39.72 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4V4a2 2 0 0 1 2-2m4 4V4h-4v2zm0 11h3v-3h2v3h3v2h-3v3h-2v-3h-3z'/%3E%3C/svg%3E");
}

#site-members-stocks-bag th,
#followed-folders-head th {
  text-align: right;
}

#search_user::placeholder {
  font-weight: 300;
  color: #8295ae;
}

#search_user {
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid #00367cba;
  /* width: 115px; */
  /* height: 19px; */
  width: 150px;
  height: 30px;
  border-radius: 3px;
  border-width: 1px;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.9833 11.0165C6.4477 11.4809 6.99902 11.8493 7.60579 12.1006C8.21256 12.352 8.86289 12.4813 9.51965 12.4813C10.1764 12.4813 10.8267 12.352 11.4335 12.1006C12.0403 11.8493 12.5916 11.4809 13.056 11.0165C13.5204 10.5521 13.8888 10.0008 14.1401 9.39403C14.3915 8.78726 14.5208 8.13693 14.5208 7.48016C14.5208 6.8234 14.3915 6.17307 14.1401 5.5663C13.8888 4.95953 13.5204 4.40821 13.056 3.94381C12.1181 3.00591 10.846 2.479 9.51965 2.479C8.19326 2.479 6.9212 3.00591 5.9833 3.94381C5.0454 4.88171 4.51849 6.15377 4.51849 7.48016C4.51849 8.80655 5.0454 10.0786 5.9833 11.0165ZM5.9833 11.0165L2.83334 14.1665' stroke='%2300367C' stroke-opacity='0.89' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right;
  text-align: center;
}

table {
  border-collapse: collapse;
}

/* #folder-content tr:not(:nth-last-child(1)) { */
#folder-content tr,
#my-followed-folders tr {
  border-top: 1.5px solid #c9cfe080;
}

#folder-content tr:nth-last-child(1),
#my-followed-folders tr:nth-last-child(1) {
  border-bottom: 1.5px solid #c9cfe080;
}

thead tr {
  height: 35px;
  vertical-align: baseline;
}

tbody tr:hover {
  background-color: #00367c1a;
}

/* #folder-content tr:nth-child(n + 11) {
            display: none;
        } */

/* 
        .grid-parent {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0px;
        }

        .grid-child-4 {
            grid-area: 1 / 1 / 3 / 2;
        } */
.title {
  color: #00367d;
  font-family: Rubik;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  vertical-align: middle;
}

.custom-scrollbar-track {
  right: 0 !important;
  left: unset;
  border: var(--border-size-small) #668fbd !important;
  background-color: #d5d5d5 !important;
  opacity: 1 !important;
}

.custom-scrollbar-thumb {
  background-color: #46a6dd87 !important;
  /* height: 170px; */
}

.scrollable-content {
  padding: 0 10px;
}

.add-to-follower,
.remove-follower {
  margin-left: 5px;
  position: relative;
}

.add-to-follower svg,
.remove-follower svg {
  margin-bottom: -3px;
}

.inner-cont.grid-child-4,
.inner-cont.grid-child-3 {
  /* box-shadow: -1px 4px 4px 0px #c9cfe0, 1px 0px 4px 0px #00000040; */
  box-shadow: 0px 2px 0px 1px #c9cfe0;
  border: 1px solid #f5f5f5;
}

.folder-noStocks-parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-cont.grid-child-3:has(#no-folders.active) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.inner-cont.grid-child-3 {
  min-height: 185px;
  width: 93%;
}

#no-folders {
  display: none;
}

#no-folders.active {
  display: block;
}

#site-members-stocks-bag {
  padding: 5px;
  margin-bottom: 5px;
}

.follow_message_inner {
  background-color: #6f7481;
  font-weight: 400;
  font-size: 13px;
  line-height: 23px;
  color: #ffffff;
  text-align: center;
  position: relative;
}

[id^="follow_message_"] {
  display: none;
  position: absolute;
  width: 82px;
  height: 23px;
  right: 7px;
  bottom: 15px;
  z-index: 2;
}

.follow_message_inner::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  transform: rotate(45deg);
  bottom: -2px;
  right: 7px;
  background-color: #6f7481;
}

.add-to-follower:hover [id^="follow_message_"],
.remove-follower:hover [id^="follow_message_"] {
  display: inline-block;
}

@media only screen and (max-width: 600px) {
  .grid-parent {
    display: flex;
    flex-direction: column;
  }
}

.td-follower,
.td-no-follower {
  white-space: nowrap;
}

.td-no-follower:hover rect {
  stroke: #006bb7;
}

.td-no-follower:hover path {
  fill: #006bb7;
}

.title-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/* stars */
#rating-stars {
  direction: ltr;
  position: relative;
  left: 5px;
  /* font-size: 30px; */
  font-size: 20px;
  unicode-bidi: bidi-override;
  /* color: #ccc; empty stars */
  color: #d0c5c5;
  /* display: inline-block; */
  display: flex;
  line-height: 1;
}

#rating-stars::before {
  content: "★★★★★";
  color: #ffa723;
  /* filled stars */
  position: absolute;
  left: 0;
  top: 0;
  width: var(--rating-width);
  overflow: hidden;
  white-space: nowrap;
  /* pointer-events: none; */
}

/* icons */
.line-md--link {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: -10px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%2345A6DD' stroke-dasharray='28' stroke-dashoffset='28' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 6l2 -2c1 -1 3 -1 4 0l1 1c1 1 1 3 0 4l-5 5c-1 1 -3 1 -4 0M11 18l-2 2c-1 1 -3 1 -4 0l-1 -1c-1 -1 -1 -3 0 -4l5 -5c1 -1 3 -1 4 0'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.6s' values='28;0'/%3E%3C/path%3E%3C/svg%3E");
}

.uit--bag {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300367C' d='M19.5 6H16V5a2.003 2.003 0 0 0-2-2h-4a2.003 2.003 0 0 0-2 2v1H4.5A2.5 2.5 0 0 0 2 8.5v10A2.5 2.5 0 0 0 4.5 21h15a2.5 2.5 0 0 0 2.5-2.5v-10A2.5 2.5 0 0 0 19.5 6M9 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H9zm12 13.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-6.473l5.842 1.948A.5.5 0 0 0 9 14h6a.5.5 0 0 0 .158-.025L21 12.027zm0-7.494a.5.5 0 0 0-.158.02L14.919 13H9.081l-5.923-1.975a.5.5 0 0 0-.158-.02V8.5A1.5 1.5 0 0 1 4.5 7h15A1.5 1.5 0 0 1 21 8.5z'/%3E%3C/svg%3E");
}

.uit--bag-yellow {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFA527' d='M19.5 6H16V5a2.003 2.003 0 0 0-2-2h-4a2.003 2.003 0 0 0-2 2v1H4.5A2.5 2.5 0 0 0 2 8.5v10A2.5 2.5 0 0 0 4.5 21h15a2.5 2.5 0 0 0 2.5-2.5v-10A2.5 2.5 0 0 0 19.5 6M9 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H9zm12 13.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5v-6.473l5.842 1.948A.5.5 0 0 0 9 14h6a.5.5 0 0 0 .158-.025L21 12.027zm0-7.494a.5.5 0 0 0-.158.02L14.919 13H9.081l-5.923-1.975a.5.5 0 0 0-.158-.02V8.5A1.5 1.5 0 0 1 4.5 7h15A1.5 1.5 0 0 1 21 8.5z'/%3E%3C/svg%3E");
}

.page-title {
  display: inline;
  font-family: Rubik;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  text-align: right;
  vertical-align: middle;
  color: #00367c;
  cursor: pointer;
  margin: 2px;
}

.page-title:hover {
  color: #006bb7;
}

.page-title-line {
  content: "";
  position: relative;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  /* center origin */
  transform-origin: center;
  width: 100%;
  height: 2px;
  bottom: 2px;
  background-color: #006bb7;
  transition: transform 0.3s ease;
}

.page-title-line.animate {
  transform: translateX(-50%) scaleX(1);
}

#search_user {
  margin: 8px 10px;
  padding: 7px 15px;
}

#site-members-stocks-bag {
  /* padding: 7px; */
  width: 94%;
}

#no-folders {
  text-align: center;
  margin-top: 15px;
  max-width: 200px;
}

#no-folders .user-notification {
  color: #00367c;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
}

#no-folders .user-add-stock svg {
  cursor: pointer;
}

#no-folders .user-add-stock {
  margin-top: 15px;
}

#no-folders .user-add-stock svg:hover rect {
  stroke: #ffa527;
}

#no-folders .user-add-stock svg:hover path {
  stroke: #ffa527;
  fill: #ffa527;
}

#folder-content {
  margin-top: 10px;
}