#header {
    background-color: #13289E;
}
body, h1, h2, h3, h4, h5, h6, p {
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
}

a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
}

.paginator {
  .results, .page-selected {
    background-color: #1A73D8;
    color: #f7f7f7;
  }
}

.object-tools .button {
  padding: 6px 12px;
  background: var(--object-tools-bg);
  color: var(--object-tools-fg);
  font-weight: 400;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 15px;
  vertical-align: middle;
  margin: 0;
}

.object-tools {
  .button:hover {
    background: var(--object-tools-hover-bg);
  }
  a.changelink {
    background-image: url(/static/white-icon-changelink.svg);
    background-repeat: no-repeat;
    background-position: 5px 6px;
    padding-left: 20px;
  }
}

.recalculate{
  margin-left:90%;
  margin-bottom:20px;
  text-transform: uppercase;
}

.filter-dropdown-select{
  width: 90%;
  margin-left: 15px;
  margin-bottom: 10px;
}

.btn-link{  
    float: left;
    padding: 3px 12px;
    background: #1A73D8;
    color: #fff !important;
    font-weight: 400;
    font-size: 0.6875rem;
    text-transform: uppercase;
    border-radius: 15px;
    text-decoration: none;
    display: flex;           
    align-items: center;     
    display: flex;           
    justify-content: center; 
    align-items: center;     
    text-align: center; 
}

a.btn-link:visited, a.btn-link:active, a.btn-link:focus {    
  color:  #fff;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

a.btn-link:hover{
  background: #333;
}

.center-vertical{
    display: block;
    padding: 4px 10px 0 0;
    text-align: center; 
    display: inline-block;
}

.non-field-errors, .field-errors {
  color: red;
  margin: 5px 0;
}

@media (prefers-color-scheme: light) {
 :root {
      --primary: #13289E;
      --accent: #1AAED7;
      --link-fg: #13289E;
      --primary-fg: #e0e0e0;
      --darkened-bg: #f0f2fa;
      --hairline-color: #1f285a;
      --link-selected-fg: #6173D8;
      --object-tools-bg: #1A73D8;
      --default-button-bg: #1A73D8;
      --link-hover-color: #6173D8;
      --body-bg: #f7f7f7;
    }
  .viewlink, .inlineviewlink {
    background: url(/static/icon-viewlink.svg) 0 1px no-repeat;
  }

  .addlink {
    background: url(/static/icon-addlink.svg) 0 1px no-repeat;
  }

  .changelink, .inlinechangelink {
    background: url(/static/icon-changelink.svg) 0 1px no-repeat;
  }

}

@media (prefers-color-scheme: dark) {

 :root {
      --primary: #13289E;
      --accent: #1AAED7;
      --link-fg: #1AAED7;
      --primary-fg: #e0e0e0;
      --hairline-color: #1f285a;
      --link-selected-fg: #6173D8;
      --object-tools-bg: #1A73D8;
      --default-button-bg: #1A73D8;
      --link-hover-color: #6173D8;
      --body-fg: #e0e0e0;
    }
  .viewlink, .inlineviewlink {
    background: url(/static/dark-icon-viewlink.svg) 0 1px no-repeat;
  }

  .addlink {
    background: url(/static/dark-icon-addlink.svg) 0 1px no-repeat;
  }

  .changelink, .inlinechangelink {
    background: url(/static/dark-icon-changelink.svg) 0 1px no-repeat;
  }

  input[type=datetime-local]::-webkit-calendar-picker-indicator
  {
    filter: invert(1) brightness(1.5) contrast(1.2);
    cursor: pointer;
  }
 
  input[type="date"]::-webkit-calendar-picker-indicator 
  {
    filter: invert(1) brightness(1.5) contrast(1.2);
    cursor: pointer;
  }
}


.logotree {
    height: 30px;
    background-image: url('/static/white_tree.png');
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 30px;
    padding-top: 40px;
    font-weight: 700;
    color: #e0e0e0;
}

.logom {
    width: 163px;
    height: 163px;
    background-image: url('/static/logom.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.logo {
    width: 163px;
    height: 163px;
    background-image: url('/static/logo.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.green_on_white {
    background-position: 0 0;
}

.white_on_green {
    background-position: -177px 0;
}

.black_on_white {
    background-position: -354px 0;
}

.white_on_black {
    background-position: -531px 0;
}


#client-info {
  .table {
    width: 100%;
    overflow: auto; 
  }

}


.change-form .modal {
  background-color: var(--body-bg);
  color: var(--body-fg);

  button {
    padding: 6px 12px;
  }

}

input[type=datetime-local], input[type=date] {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 0;
    color: var(--body-fg);
    background-color: var(--body-bg);
    accent-color: var(--accent);
}

.inline-header {
  display: inline-block;
}

.messagelist {
  float: right;
}


.submit-row-custom {
    padding: 12px 14px 12px;
    margin: 0 0 20px;
    background: var(--darkened-bg);
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.popup .submit-row-custom {
    overflow: auto;
}

.submit-row-custom input {
    height: 2.1875rem;
    line-height: 0.9375rem;
}

.submit-row-custom input, .submit-row-custom a {
    margin: 0;
}

.submit-row-custom input.default {
    text-transform: uppercase;
}

.submit-row-custom a.deletelink {
    margin-left: auto;
}

.submit-row-custom a.deletelink {
    display: block;
    background: var(--delete-button-bg);
    border-radius: 4px;
    padding: 0.625rem 0.9375rem;
    height: 0.9375rem;
    line-height: 0.9375rem;
    color: var(--button-fg);
}

.submit-row-custom a.closelink {
    background: var(--close-button-bg);
    border-radius: 4px;
    color: var(--button-fg);
    margin: 2px 0;
    padding: 6px 15px;
    vertical-align: middle;
    font-family: var(--font-family-primary);
    font-weight: normal;
    font-size: 0.8125rem;
}

.submit-row-custom a.deletelink:focus,
.submit-row-custom a.deletelink:hover,
.submit-row-custom a.deletelink:active {
    background: var(--delete-button-hover-bg);
    text-decoration: none;
}

.submit-row-custom a.closelink:focus,
.submit-row-custom a.closelink:hover,
.submit-row-custom a.closelink:active {
    background: var(--close-button-hover-bg);
    text-decoration: none;
}