body {
	background-color: #232323;
	color: #eeeeee;
	font-family: "Inter", system-ui, sans-serif;

    /*overflow: hidden;*/
}

body.no-scroll {
  overflow: hidden;
}


a { color: #eeeeee; }
.wide_bar:not(:hover) a.name:visited .name_label { color: #ccd5dd; }
.wide_bar:hover                      .name_label { color: #32a9ff; }

.plain_link { color: inherit; }

.dark_bar { background-color:#333333 !important; }
.light_bar { background-color:#3c3c3c !important; }

.wide_bar {
  background-color:#4c4c4c;
  /*transition: background-color 0.08s;*/
  /*transition-timing-function: ease-in;*/

  height: 24px;

  padding: 5px;
  gap: 5px;

  display: flex;
  align-items: center;
}

.clickable_bar, .name {
  text-decoration: none;
  user-select: text;
}

.clickable_bar .wide_bar:hover {
  background-color:#5c5c5c !important;
}

.repo_table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 4fr;

  box-sizing: border-box;
}

.separator {
  background-color:#2e2e2e;

  height:3px;
  width: 100vw;

  box-sizing: border-box;
  position: absolute;
  left: 0;
}

.wide_bar .col {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flag_bar {
 background-color:#4c4c4c;

  height: 24px;

  display: flex;
  flex-direction: column;
  position: relative;
}

.flag_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header_container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;

  gap: 5px;
  padding: 5px;

  background-color: #3F3F3F5F;
}

.stripe {
  flex: 1 1 0;
  width: 100%;
  display: flex;
}

.shrink_text {
  overflow: hidden;
  white-space: nowrap;
}

.wide_bar .col.name    { flex: 3 3 40px; }
.wide_bar .col.created { flex: 2 2 40px; }
.wide_bar .col.latest  { flex: 2 2 40px; }
.wide_bar .col.loc     { flex: 2 2 40px; }
.wide_bar .col.stage   { flex: 2 2 40px; }
.wide_bar .col.desc    { flex: 6 0; }



.scrollable {
  max-height: 100vh;
  overflow-y: auto;
}

.dont_touch {
  user-select: none;
}

footer {
  color: #5a5a5a;
  text-align: center;
  margin: 0;
  padding: 5px 10px;
}

select {
    padding: 4px 8px;
    font-size: 1rem;
    display: inline-block;

    background-color: #4c4c4c;
    color:#eeeeee;
    font-family: "Inter", system-ui, sans-serif;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  background: #f0f0f0;
  border: 1px solid #aeaeae;
  border-radius: 0; /* Square corners */
  font-size: 16px;
}

.form-input:focus {
  background: #e8e8e8;
  border-color: #ccc;
  outline: none;
}

.collapsible {
  background-color: #454545;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsed_content {
  padding: 0 18px;
  overflow: hidden;
  background-color: #5d5d5d;
}