/* VARIABLE DEFINITIONS */
html[data-theme="light"],
:root {
    /* --primary: #636e72;
    --secondary: #2d3436; */
    --primary: #79aec8;
    --secondary: #417690;
    --accent: #f5dd5d;
    --primary-fg: #fff;

    --tab-current-color: var(--secondary);

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-loud-color: #000;

    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: #34495e;
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: var(--header-bg);

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: #5b80b2;

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--primary);
    --button-hover-bg: #609ab6;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: #205067;
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        Roboto,
        "Helvetica Neue",
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace:
        ui-monospace,
        Menlo,
        Monaco,
        "Cascadia Mono",
        "Segoe UI Mono",
        "Roboto Mono",
        "Oxygen Mono",
        "Ubuntu Monospace",
        "Source Code Pro",
        "Fira Mono",
        "Droid Sans Mono",
        "Courier New",
        monospace,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
}

.d-none { display: none }

html[data-theme="light"] .visible-on-light { display: block }
html[data-theme="dark"] .visible-on-dark { display: block }

@media (prefers-color-scheme: dark) { html[data-theme="auto"] .visible-on-dark { display: block } }
@media (prefers-color-scheme: light) { html[data-theme="auto"] .visible-on-light { display: block } }

#content {
  padding-top: 40px;
}

#content-main {
  margin-top: 2.5rem;
}

#content.has-tabs #content-main {
  margin-top: 0;
}

.object-tools.second-level { margin-top: -58px!important }

.local_level_hierarchy {
  margin-top: 1rem;
  border-bottom: 2px solid var(--hairline-color)
}

th.column-flag_img_tag {
  width: 100px;
}

/**
 * Custom Top Links and Object Tools
 */
.related-object-tools {
  display: flex;
  justify-content: right;
}

#content.has-tabs .object-tools,
.related-object-tools .object-tools {
  margin-top: -55px!important;
}

.changelink.relative-top-2px {
  position:relative;
  top:2px;
}

#changelist .related-breadcrumbs-container {
  flex: 1 1 auto;
  min-width: 0;
}

.hierarchy-active-item > a.changelink {
  position: relative;
  top: 2px;
  margin-left: 2px;
}


/**
 * HEADER TOOLBAR
 */
.header-toolbar {
  display: flex;
  margin-bottom: 20px;
}


/**
 * TOOLS
 */

.toolset {
  display: flex;
  margin-left: 1rem;  
  /* border: 1px solid var(--border-color); */
  border-radius: 4px;
  white-space: nowrap;
}

.toolset > .tool-item {
  color: #666;
  position: relative;
  display: flex;
  padding: 15px 15px;
  border: 1px solid var(--border-color);
  border-right: 0;
  cursor: pointer;
  font-weight: 400;
}
.toolset > .tool-item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.toolset > .tool-item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid var(--border-color);
}

.toolset.narrow > .tool-item { padding: 10px 15px!important }
.toolset.narrow > .tool-item-separator {
  border: 1px solid var(--border-color);
  margin-right: 2px;
}

.toolset > .tool-item:focus { text-decoration: none }
.toolset > .tool-item:hover {
  background-color: var(--darkened-bg);
}

.toolset > .tool-item.current {
  background: var(--object-tools-bg);
  color: var(--object-tools-fg);
  /* border: 1px solid var(--border-color);
  border-bottom: 1px solid var(--body-bg); */
  /* margin-bottom: -1px; */
}

.toolset > .tool-item.current:hover { background-color: var(--object-tools-hover-bg) }

.toolset > .tool-item.current i { color: var(--tab-current-color) }


/**
 * PILLS
 */

.pillset {
  display: flex;
  /* border: 1px solid var(--border-color); */
  border-radius: 4px;
  white-space: nowrap;
}

.pillset > .pill-item {
  color: #666;
  position: relative;
  display: flex;
  padding: 15px 15px;
  border: 1px solid var(--border-color);
  border-right: 0;
  cursor: pointer;
  font-weight: 400;
}
.pillset > .pill-item:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pillset > .pill-item:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid var(--border-color);
}

.pillset.narrow > .pill-item { padding: 10px 15px!important }
.pillset.narrow > .pill-item-separator {
  border: 1px solid var(--border-color);
  margin-right: 2px;
}

.pillset > .pill-item:focus { text-decoration: none }
.pillset > .pill-item:hover {
  background-color: var(--darkened-bg);
}

.pillset > .pill-item.current {
  background: var(--object-tools-bg);
  color: var(--object-tools-fg);
  /* border: 1px solid var(--border-color);
  border-bottom: 1px solid var(--body-bg); */
  /* margin-bottom: -1px; */
}

.pillset > .pill-item.current:hover { background-color: var(--object-tools-hover-bg) }

.pillset > .pill-item.current i { color: var(--tab-current-color) }


/**
 * TABS
 */

 .tabset {
  padding: 20px 0 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.tabset > .tab-item {
  color: #666;
  position: relative;
  display: inline-block;
  padding: 15px 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 400;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tabset.narrow > .tab-item { padding: 10px 15px!important }
.tabset.narrow > .tab-item-separator {
  border: 1px solid var(--border-color);
  margin-right: 2px;
}

.tabset > .tab-item:focus { text-decoration: none }
.tabset > .tab-item:hover {
  background-color: var(--darkened-bg);
}

.tabset > .tab-item.current {
  color: var(--tab-current-color);
  border: 1px solid var(--border-color);
  border-bottom: 1px solid var(--body-bg);
  margin-bottom: -1px;
}

.tabset > .tab-item.current:hover { background-color: transparent }

.tabset > .tab-item.current i { color: var(--tab-current-color) }


/**
 * Country Header
 */

#country_header {
  position: fixed;
  right: 0;
  top: 84px;
  left: 201px;
  background: var(--darkened-bg);
  z-index: 2000;
  padding: 10px 40px;
  border-bottom: 1px solid #eaeaea;
}

#avatar_picture {
  margin-right: 15px;
}

#avatar_picture > img,
#avatar_picture .account_avatar {
  height: 75px;
  border-radius: 20%;
}

#avatar_picture  .account_avatar.square {
  border-radius: 20%;
}

#avatar_picture  .account_avatar.circle {
  border-radius: 100%;
}

#avatar_picture  .account_avatar.rect {
  border-radius: 20%;
}

#account_header_profile {}

#account_header_profile > h1 { margin-bottom: 0 }