/* use  @media (prefers-color-scheme: light) around root to add light and dark themes*/
/* overrides admin panel colors */

html[data-theme="light"],
:root {
    --primary: #333;
    --secondary: #333;
    --accent: #ecb61c;
    --primary-fg: #fff;

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

    --header-color: var(--accent);
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: var(--accent);
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: rgb(59, 59, 59);

    --link-fg: var(--secondary);
    --link-hover-color: var(--accent);
    --link-selected-fg: var(--accent);

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

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: var(--accent);
    --message-error-bg: #ffefef;

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

    --button-fg: #fff;
    --button-bg: var(--accent);
    --button-hover-bg: #ecb41ca9;
    --default-button-bg: var(--secondary);
    --default-button-hover-bg: var(--accent);
    --close-button-bg: #333;
    --close-button-hover-bg: #5b5a5a;
    --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:
        "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";

    color-scheme: light;
}

.category_tag {
  font-size: 16px;
  border-radius: 0.3em;
  padding: 0.1em 0.5em;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.3);
  display: inline-block;
}

.img_container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  height: 250px;
  width: auto;
  background-color: white;
  outline: 4px solid #ecb61c;
  padding: 5px;
}

button.ssoButton {
  background-image: url('/static/image/ms-logo.svg'); 
  background-repeat: no-repeat; 
  background-position: 8px 8px;
  display: block;
  background-color: white;
  padding: 10px 15px;
  border: 1px solid #959595;
  color: #5f5f5f;
  border-radius: 4px;
  width: 100% ;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
  margin: 1em 0;
  text-align: center;
}

button.ssoButton:hover, button.ssoButton:focus-visible {
  background-color: var(--selected-bg);
  text-decoration: none;
}

.login .submit-row {
  padding: 1em 0;
}

.infobox {
  display: flex;
  align-items: center;
  font-style: italic;
  gap: 1em;
  margin: 1.5em 0;
}

.infobox a {
  color: #4a5bd6;
}

.infobox p {
  margin: 0;
}


#header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

div #user-tools {
  padding-top: 0.8rem;

}

#user-tools, #logout-form button {
    margin: 0;
    font-weight: 300;
    font-size: 0.6875rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#nav-filter {
    display:none;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 5px;
    margin: 5px 0;
    border: 1px solid var(--border-color);
    background-color: var(--darkened-bg);
    color: var(--body-fg);
}

.calendar caption {
    
    text-align: center;
}

.calendar-cancel a{
    color: var(--accent);
}

ul.timelist {
    margin: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-right: 0;
}

.timelist a{
    padding: 0;
}

.submit-row{
    display: flex;
    flex-direction: row-reverse;
}

a.deletelink:focus, a.deletelink:hover {
    color: var(--button-fg);
    text-decoration: none;
}
.object-tools {
    font-size: 0.625rem;
    font-weight: bold;
    padding-left: 0;
    float: right;
    position: relative;
    margin-top: -58px;
}

/*
a.button {
    padding: 4px 5px;
    display: none;
}
*/