/* color palette: https://coolors.co/0e3b43-eff1f3-470024-5688c7-f6828c */
:root {
    --colors-g1: #EEF2E3;
    --colors-g1-5: #DAF89B;
    --colors-g2: #C8F169;
    --colors-g3: #78C51C;
    --colors-g4: #2A6F2B;
    --colors-g5: #043F2E;
    --colors-r1: #FFBBBE;
    --colors-r2: #FB848B;
    --colors-r3: #DB4049;
    --colors-r4: #A91E27;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;
    --radius-20: 20px;
}

@media (max-width: 699px) {
    table {
        font-size: 14px;
      }
    .flag-table {
        height: 24px;
        width: 24px;

     }
    .card-body {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .card-comp-stats {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
    .card-text-company-stats {
        font-size: 16px !important;
        margin-bottom: 0 !important;
        
    }
    .card-title-company-stats {
    font-size: 12px !important;
    margin-bottom: 0;
    }
}


 @media (min-width: 699px) {
    .flag-table {
        height: 28px;
        width: 28px;
        
     }
     
 }

body {
    /* background-color: var(--bs-background-brown-200); */
    background-color: var(--colors-g5);
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: normal;
  }

  .badge-nav-notactive {
    background-color: var(--colors-g3);
    color:var(--colors-g5);
    font-weight: 500;
  }
  .badge-nav-active {
    background-color: var(--colors-g1);
    color:var(--colors-g5);
    font-weight: 500;
  }
.navbar{
    /*max-height: 150px;  */
    height: 100px;
    overflow: visible;
    background-color: var(--colors-g1);
    z-index: 1;
    border-bottom-left-radius: var(--radius-16);
    border-bottom-right-radius: var(--radius-16);
      padding-left: 20px;
  padding-right: 20px;
}
.navbar-brand{
    color: var(--colors-g5) !important;
    font-weight: 600;
    font-style: normal;
}


.navbar-brand:hover {
    color: var(--colors-g4) !important;;
}

.header-search-container {
    overflow: visible;
      width: 50%;
  max-width: 400px;
  min-width: 200px;
}

.nav-bar-search {
    font-size: 14px;
    background-color: var(--colors-g2);
    border:0;
    color:var(--colors-g5);
}

.search-results-li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.search-results-a{
    color:var(--colors-g5);
    text-decoration: none;
}
.search-results-ul{
    margin: 10px;
    padding-left: 0;

}

#search-results-1{
    margin-top: 5px;
    overflow: visible;
    position: absolute;
    background-color: var(--colors-g1);
    border-radius: 5px;
}
.disclaimer {
    color:var(--colors-g1);
    font-weight: normal;
    font-size: 12px;
    width: 75%;
    margin:auto;
    margin-top:50px;
}




.card{
    margin-bottom: 20px;
    border: 0px;
    padding: 15px;
    background-color: var(--colors-g1);
    border-radius: var(--radius-16);
}

.header-box{
    background-color: var(--colors-g5);
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.header-box-text{
    color: var(--colors-g1);
    width: var(--body-width); /* Or whatever max-width your body uses */
  margin: 0 auto;
  padding-bottom: 10px;
  padding-top: 20px;
}
.header-box-text-expanding{
    background-color: var(--colors-g5);
    position: absolute;
    width: 100vw;
    height: 15vh;
    z-index: -1;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -2rem;
}
.table-dark-head{
    background-color: var(--colors-g5) !important; 
    font-size: 18px;
}
.custom-striped-table > tbody > tr:nth-of-type(odd) {
  --bs-table-accent-bg: var(--colors-g1); /* light blue */
}
.custom-striped-table td {
  border: none !important;
}
.a-table{
    color: var(--colors-g5);
    text-decoration: none;
}
.a-nav-tree-structure {
    color: var(--colors-g3);
    text-decoration: none;
}

table th{
    white-space: nowrap;
  }
table th:first-child{
    border-top-left-radius: var(--radius-8);
  }
  
  table th:last-child{
    border-top-right-radius:var(--radius-8);
  }
  .btn-primary{
    background-color: var(--colors-g5); 
    border:0px;
    color:var(--colors-g1)
}
.btn-primary:hover{
    background-color: var(--colors-g2); 
    border:0px;
    color:var(--colors-g5)
}
.btn-primary:disabled{
    background-color: var(--bs-background-white);
    color:var(--colors-g5);
    border: 0px;
}
.card-h2 {
    padding-bottom: 20px;
    font-weight: 700;
    color:var(--colors-g5);
}

.h1-header{
    font-weight: 600;
    padding-top: 80px;
    font-size: clamp(1.5rem, 5vw, 2.75rem); /* scales font between 1.5rem and 3rem based on screen width */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word; /* avoid breaking in the middle unless needed */
  line-height: 1.1;
  text-wrap: balance; /* optional: better line breaking in supporting browsers */
}
.footer-nav{
    color:var(--colors-g1);
}
.a-footer-nav{
    color:var(--colors-g1);
}
.nav-item a{
    color:var(--colors-g5);
}
.nav-item:hover {
    background-color: var(--colors-g2);
    border-radius: 5px;
}
.nav-item a:hover {
    color:var(--colors-g5);
}
.nav-item a:active {
    color:var(--colors-g5);
}
.navbar-toggler {
    border-color:var(--colors-g5);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23043F2E' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  
.navbar-collapse.show  {
    padding: 20px;
    background-color: var(--colors-g1);
    border-radius: var(--radius-12);
}

.dropdown:hover .dropdown-menu{
    display: block;
}
.dropdown-menu {
    margin-top: 0;
    right: 0;
    left: unset !important;
}
.dropdown-menu-item-nav-bar:active {
    background-color: var(--colors-g1);
    color: var(--colors-g5);
}
.dropdown-menu-nav-bar a {
    border-color: var(--colors-g5);
    color: var(--colors-g5);
}

.card-title-company-stats {
    font-size: 14px;
    margin-bottom: 0;
}

.card-text-company-stats {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0;
    color:var(--colors-g5);
}
.active-position-date-comp{
    font-size: 14px;
    font-weight: normal;
}
.active-position-position-h-comp{
    font-size: 16px;
    font-weight: 700;
}

.active-position-table-comp-tr:hover {
  background-color: var(--colors-g2); /* Slightly deeper lime green on hover */
  transform: scale(1.01);     /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional: soft shadow */
}
.card-comp-stats-hover:hover {
      background-color: var(--colors-g3); /* Slightly deeper lime green on hover */
  transform: scale(1.01);     /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional: soft shadow */
}
.card-comp-stats-hover {
transition: all 0.2s ease;
  cursor: pointer;
}
.card-comp-stats-body {
    padding-bottom: 0;
}

.active-position-table-comp-tr {
transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white; /* light green */
  color: var(--colors-g5);
  border-radius: var(--radius-12);
  margin-bottom: 10px;
  padding: 10px 15px; /* spacing inside the row */
}
.active-position-short-comp {
    font-size: 16px;
    font-weight: 700;
}

.card-comp-stats{
    background-color: var(--colors-g2);
    border-radius: var(--radius-16);
    height: 90%;
}

.home-page-table-tr {
    transition: all 0.2s ease;
  cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white; /* light green */
    border-radius: var(--radius-12);
    margin-bottom: 10px;
    padding: 10px 15px; /* spacing inside the row */
    height: 60px;
}
.home-page-table-tr-th {
  cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--colors-g1);
    padding-left: 5px; /* spacing inside the row */
    padding-right: 10px;
    padding-bottom: 10px;
    color: var(--colors-g5);
}


.home-page-table-tr:hover {
      background-color: var(--colors-g2); /* Slightly deeper lime green on hover */
  transform: scale(1.01);     /* Optional: adds a subtle zoom-in */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Optional: soft shadow */
}

.home-page-table {
    width: 100%;
}
.home-page-table-left-text {
    font-size: 16px;
    font-weight: 700;
}
.company-row {
  display: flex;
  align-items: center;
}

.flag-table {
  width: 20px;
  height: auto;
  margin-right: 15px;
}

.company-info {
  display: flex;
  flex-direction: column;
}

.ticker-label {
  font-size: 0.75em;
  color: var(--colors-g5);
  margin-top: -0.25em; /* or try 0 for no gap at all */
}
.home-page-table-comp-name {
    padding-left: 0px;
    padding-right: 15px;
    font-weight: 600;
    color:var(--colors-g5);
    font-size: clamp(0.75rem, 0.95rem, 1.0rem); /* min, preferred, max */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  
}

.breadcrumb-deactive a {
  color: #ccc;
  text-decoration: none;  /* Removes underline */
}
.breadcrumb-active {
    color:var(--colors-g2)
}

.breadcrumb-delimiter {
    margin-left: 10px;
    margin-right: 10px;
}

.nav-tabs {
  border-bottom: none;
  display: flex;
  gap: 1rem;
  margin-bottom: 10px;
}

.nav-tabs .nav-link {
  border: none;
  background-color: var(--colors-g1-5);
  color: var(--colors-g5); /* your theme's text color */
  font-weight: 500;
  border-radius: var(--radius-8);
  padding: 6px 14px;
  transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
  background-color: var(--colors-g3);
  color: var(--colors-g5);
}

.nav-tabs .nav-link.active {
  background-color: var(--colors-g5); /* match your green design */
  color: var(--colors-g1);
}

.custom-success-badge {
    background-color: var(--colors-g4);
    font-weight: 500;
    color: var(--colors-g1);
}
.custom-danger-badge{
    background-color: var(--colors-r4);
    font-weight: 500;
    color: white;
}
.home-short-percentage-text{
    color:var(--colors-g5)
}