:root {
    --page-background: #e9edf1;

    --surface-background: #ffffff;
    --surface-secondary: #f5f7f9;

    --header-background: #edf3f8;
    --header-border: #cbd8e3;

    --border-color: #d7dee5;

    --text-primary: #29343c;
    --text-secondary: #5d6871;

    --accent-color: #3f6f9f;
    --accent-hover: #315b84;
    --accent-background: #e8f1fa;

    --shadow-soft: 0 5px 16px rgba(44, 58, 72, 0.11);
    --shadow-hover: 0 11px 26px rgba(44, 58, 72, 0.18);
}

* {
    margin: 0;
    box-sizing: border-box;
    color: var(--text-primary);
    font-family: Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--page-background) !important;
}

body{background-color:#e0e0e0 !important}
.navbar {
    background: var(--surface-background);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 3px 12px rgba(35, 49, 66, 0.08);
    flex-wrap: wrap;
}
.navbar-inside{display:flex;list-style:none;justify-content:space-between;align-items:center;padding:10px 20px;max-width: 60rem;margin: auto;}
#searchBar {
    flex: auto;
    height: 3rem;

    padding: 0 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;

    background: var(--surface-secondary);
    box-shadow: none;

    font-size: 16px;
    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

#searchBar:focus {
    background: #ffffff;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(53, 104, 200, 0.14);
}
footer {
    width: 100%;
    padding: 1rem 1.5rem;
    margin-top: auto;

    display: flex;
    justify-content: space-between;

    background: var(--surface-background);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -3px 12px rgba(35, 49, 66, 0.06);
}
.footer-img{height:3.2rem}.flex-center{display:flex}
#myCards{position:relative;min-height:78.5vh;max-width:1600px;display:flex;align-content:flex-start;flex-wrap:wrap;flex-direction:row;justify-content:center;margin:2rem auto}
#nav-title{margin-right: 0.8rem;}
.filter-includes-box,
.sort-box {
    background: var(--surface-background);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    box-shadow: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.filter-includes-box:hover,
.sort-box:hover {
    background-color: var(--surface-secondary);
    border-color: #c8d2dc;
}

.filter-selected {
    background: var(--accent-background);
    border-color: #bdcff3;
    box-shadow: none;
}
.repo-icon-filter{height: 1.3rem;padding: 0.2rem;}
.sort-box{height: 1.8rem;margin:0.2rem;display: flex;align-items: center;justify-content: center;padding: 0 0.4rem;cursor: pointer;}
.filters{display: flex;align-items: center; overflow: hidden; white-space: nowrap; height: 3rem;}
.sort, .filter-includes{display: flex; margin-right: 1rem; flex-wrap: wrap; justify-content: center;}
.sort{justify-content: center; display: flex; width: 100%;}
.filter-includes-box{width: 1.8rem;height: 1.8rem;margin:0.2rem;display: flex;align-items: center;justify-content: center;cursor: pointer;}

.filters-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
    min-height: 3.5rem;
    max-width: 90rem;
    margin: auto;
    position: relative;
    left: 0.5rem;
}

.sort{
    justify-content: center;
    display: flex;
    width: auto;
    flex: 0 0 auto;
}

#owner-filter{
    display: flex;
    align-items: center;
    margin-left: 1rem;
    white-space: nowrap;
}

.owner-dropdown{
    padding: 0 1rem;
    margin-left: 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background:#e9e9e9;
    box-shadow:inset 5px 5px 10px #bebebe,inset -5px -5px 10px #fff;
    height: 1.5rem;
    width: 18rem;
    display: flex;
}
.owner-dropdown:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(53, 104, 200, 0.14);
}

.portal-loading {
  min-height: 45vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: #555;
}

.portal-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #d7d7d7;
  border-top-color: #4b7bec;
  border-radius: 50%;
  animation: portal-spin 0.8s linear infinite;
}

@keyframes portal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-spinner {
    animation: none;
  }
}

.tooltip{position:absolute;z-index:1070;display:block;font-style:normal;font-weight:400;line-height:1.42857143;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:12px;opacity:0}
.tooltip.in{opacity:.9}
.tooltip.top{padding:5px 0;margin-top:-3px}
.tooltip.right{padding:0 5px;margin-left:3px}
.tooltip.bottom{padding:5px 0;margin-top:3px}
.tooltip.left{padding:0 5px;margin-left:-3px}
.tooltip.top .tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-width:5px 5px 0;border-top-color:#3e3e3e}
.tooltip.top-left .tooltip-arrow{right:5px;bottom:0;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#3e3e3e}
.tooltip.top-right .tooltip-arrow{bottom:0;left:5px;margin-bottom:-5px;border-width:5px 5px 0;border-top-color:#3e3e3e}
.tooltip.right .tooltip-arrow{top:50%;left:0;margin-top:-5px;border-width:5px 5px 5px 0;border-right-color:#3e3e3e}
.tooltip.left .tooltip-arrow{top:50%;right:0;margin-top:-5px;border-width:5px 0 5px 5px;border-left-color:#3e3e3e}
.tooltip.bottom .tooltip-arrow{top:0;left:50%;margin-left:-5px;border-width:0 5px 5px;border-bottom-color:#3e3e3e}
.tooltip.bottom-left .tooltip-arrow{top:0;right:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#3e3e3e}
.tooltip.bottom-right .tooltip-arrow{top:0;left:5px;margin-top:-5px;border-width:0 5px 5px;border-bottom-color:#3e3e3e}
.tooltip-inner{max-width:200px;padding:3px 8px;color:#e0e0e0;text-align:center;background-color:#3e3e3e;border-radius:4px}
.tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}
.sort-filter-icon{width: 1rem;}
.row-filters{display: flex;}
.grey-color-svg{filter: brightness(0) saturate(100%) invert(26%) sepia(0%) saturate(9%) hue-rotate(190deg) brightness(93%) contrast(100%);}
@media only screen and (max-width: 1378px) { .navbar-inside{ width: 60rem; } }
@media only screen and (max-width: 944px) { 
    .navbar-inside, .filters-wrapper{ width: 28.2rem; } 
    .filters-wrapper{ margin: 0 auto; border-radius: 19px; display: block;padding: 0 1rem;position: static;} 
    .filter-includes, .sort{margin-bottom: 0.5rem; margin-top: 0.5rem;}
    .navbar{width: 28rem; border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem; margin: auto; padding-bottom: 0.5rem;}
    .filters{height: 5.30rem;}
    .owner-dropdown{ margin: auto; }
    .soca-card { min-width: 28rem !important; }

}