/*Global Variables*/
:root {
  --site-background: #fdf6f4;
  --main-one: #6d4c41;
  --main-two: #777;
  --link-side-nav: #cccccc;
  --link-side-nav-active: #ffffff;
  --link-side-nav-hover-bg: #000000;
  --link-side-nav-hover-bg: rgba(0, 0, 0, 0.3);
  --lightest-grey: #d0cfcb;
  --link-highlight: #ca6f1e;
  --page-header: #3b0e3d;
  --side-nav-width: 14rem;
}

* {
  font-family: calibri, sans-serif;
  font-style: normal;
  /*font-weight: 400;*/
}

a {
  color: var(--link-highlight);
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

hr {
  margin: 0.9em 0 1em 0;
  border-bottom: 1px solid #999;
}

/*Layout*/
/*------------------------------------------------*/
html {
  font-size: 14px;
  position: relative;
  background-color: var(--lightest-grey);
}

body {
  background-color: var(--site-background);
  margin: 0 auto;
  /* max-width: 1920px; */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-left: 0px;
}

header {
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  bottom: auto;
}

main {
  padding-top: 12px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 30px;
  background: #fff;
  text-align: center;
  padding: 0 0 0 var(--side-nav-width);
}

fieldset {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 3px;
}

legend {
  width: auto;
  padding: 0 5px;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  border-bottom: none;
  text-align: left;
  float: none !important;
}

/*Sidebar Nav ------------------*/

#pageContentWrapper {
  padding: 4rem 0 2rem calc(var(--side-nav-width) + 1rem);
  overflow: auto;
}

.navbar {
  height: 4rem;
}

#sideNavWrapper {
  position: fixed;
  /* top: 3.2rem; */
  top: 4rem;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  max-width: var(--side-nav-width);
  color: var(--main-one);
  /* padding: 1.5rem 0; */
  font-size: 1.02rem;
  background-color: var(--main-one);
}

#sideNavWrapper ul {
  list-style: none;
  padding-left: 0;
}

#sideNavWrapper .title {
  font-size: 1.05rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--link-side-nav-active);
  border-bottom: 1px solid #dddddd;
}

#sideNavWrapper .section {
  margin-top: 2rem;
  border-top: 1px dotted #dddddd;
}

#sideNavWrapper ul {
  width: var(--side-nav-width);
}

#sideNavWrapper li a {
  text-decoration: none;
  color: var(--link-side-nav);
  margin-left: 0;
}

#sideNavWrapper li a:hover {
  background-color: var(--link-side-nav-hover-bg);
  color: var(--link-side-nav-active);
}

#sideNavWrapper li a.active {
  background-color: var(--link-side-nav-hover-bg);
  color: var(--link-side-nav-active);
}

/*Layout Fix jsTree height*/
.jstree-container-ul {
    height: calc(90vh - 4rem);
}

/*Layout Plus*/
/*------------------------------------------------*/
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
  font-size: 1.2rem;
  font-weight: bold;
}

a.navbar-brand img {
  width: 3rem;
}

a.navbar-brand .logo-img {
  padding: 0 3rem;
}

a.navbar-brand .logo-title {
  font-size: 1.5rem;
  color: #444444;
  vertical-align: middle;
}

a.navbar-brand .logo-tag {
  font-size: 0.6em;
  color: #fff;
  background-color: var(--main-one);
  border-radius: 3px;
  padding: 0 4px;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

header navbar-nav-link {
  line-height: 18px;
}

#logout {
  padding: 0 3px;
  color: #777777;
  border-radius: 3px;
  font-weight: bold;
}
#logout:hover {
  color: rgb(220, 53, 69);
  font-weight: bold;
}

.navbar-nav-link,
.navbar-nav-link a:link {
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

/*Utilities*/
.fill-space {
  flex: 1 1 auto;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.nowrap {
  white-space: nowrap;
}

.nopadding {
  padding: 0 !important;
  margin: 0 !important;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.vertical-scroll {
  overflow-y: auto;
}

/*Page Specific Styles*/
/*------------------------------------------------*/
.page-header,
h1.page-header {
  color: var(--page-header);
  font-size: 1.5em;
  margin: 0 0 0.9em 0;
  padding: 0 0 0.5em 0;
  border-bottom: 1px solid #dfdfdf;
}

.page-header a {
  text-decoration: none;
  /*color: var(--link-highlight);*/
  /*background: linear-gradient(to right, var(--link-highlight), var(--second-brown));
        background: -webkit-linear-gradient(to right,#eee, #333);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;*/
}

.page-header a:hover {
  text-decoration: underline;
}

.page-title {
  border-bottom: 2px solid #dddddd;
  font-size: 1.25rem;
  padding-bottom: 0.25rem;
  text-align: left;
  color: var(--main-one);
  margin: 0 0 1rem 0;
  font-weight: bold;
}

.app-card {
  margin: 20px auto;
  max-width: 340px;
  min-width: 285px;
}

/* .app-card .card-title {
        border-bottom: 1px solid #eee;
        font-size: 1.25rem;
        font-weight: bold;
        padding: 5px 5px 10px 10px;
        text-align: center;
    }*/

.app-card-lg {
  margin: 20px auto;
  max-width: 440px;
  min-width: 285px;
}

.app-card-md {
  margin: 20px auto;
  max-width: 340px;
  min-width: 285px;
}

.card .card-title,
.app-card .card-title,
.app-card-md .card-title {
  border-bottom: 1px solid #eee;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 5px 5px 10px 10px;
  text-align: left;
  color: var(--main-one);
}

h1.landing-page-section-header {
  color: var(--main-one);
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  opacity: 0.8;
}

.document-row {
  justify-content: flex-start;
}

#side-nav-toggle-button {
  display: none;
  pointer-events: none;
}

.document-info-card .form-label {
  color: var(--main-one);
  font-weight: bold;
}

.document-search-result {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--main-one);
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.25rem;
} 

.filter-label {
  font-weight: bold;
  color: var(--main-one);
}

#load-more-documents-button {
  margin-top: 1rem;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  position: relative;
  outline: none;
  border: none;
  background-color: transparent;
  padding-bottom: 2px;
}

#load-more-documents-button::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--main-one);
}

#load-more-documents-button:hover {
  opacity: 0.8;
}

#load-more-documents-button > i {
  color: var(--main-one);
  margin-right: 4px;
}

#load-more-documents-button > .fa-spinner {
  display: none;
}

#load-more-documents-button.loading > .fa-spinner {
  display: inline-block;
}

#load-more-documents-button.loading > .fa-angles-down {
  display: none;
}

#load-more-documents-button > .fa-angles-down {
  display: inline-block;
}

.sortControl {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.sortControl > label {
  font-weight: bold;
  color: var(--main-one);
}

.sortControl > div {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
}

.sortControl > div > button {
  background: none;
  border: none;
  border-top-right-radius: var(--bs-border-radius-sm);
  border-bottom-right-radius: var(--bs-border-radius-sm);
  opacity: 0.7;
}

.sortControl > div > button:hover, .sortControl > div > button.active {
  opacity: 1;
}

.sortControl > div > button > i {
  display: none;
  color: var(--main-one);
}

.sortControl > div > button:not(.desc) > i.fa-angle-up {
  display: inline-block;
}

.sortControl > div > button.desc > i.fa-angle-down {
  display: inline-block;
}

/*Responsiveness*/

@media (max-width: 991.98px) {
    #advanced-search-container {
        position: fixed;
        right: 0px;
        top: 4rem;
        /**/
        width: 70% !important;
        background: white;
        padding: 5px;
        border: solid #eee;
        border-width: 0 1px 1px;
        border-radius: 0 0 0 5px
    }

    #side-nav-toggle-button {
        transform: translate(44px, 2px);
    }

  #advanced-search-container > a {
    background-color: #fff;
    border-radius: 0;
  }

  #searchTextUniversal {
    border-color: #6c757d;
  }

  main {
    padding-top: 3rem;
  }
}

@media (min-width: 767.98px) {
  html {
    font-size: 1rem;
  }
  .navbar-collapse {
    margin-left: 1rem;
  }
}

@media (max-width: 767.98px) {
    #advanced-search-container {
        position: fixed;
        right: 0px;
        top: 4rem;
        /**/
        width: 89% !important;
        background: white;
        padding: 5px;
        border: solid #eee;
        border-width: 0 1px 1px;
        border-radius: 0 0 0 5px
    }

  #sideNavWrapper {
    left: -100vw;
    max-width: 100vw;
    width: 100vw;
    transition: transform 0.2s ease-in-out;
    z-index: 99;
  }

    #sideNavWrapper ul {
        width: 100%;
    }

  #side-nav-toggle-button {
    display: block;
    pointer-events: auto;
    transform: translate(44px, 2px);
  }

  #side-nav-toggle-button > .fa-angles-right {
    display: block;
    color: var(--main-one);
  }

  #side-nav-toggle-button > .fa-angles-left {
    display: none;
    color: #fff;
  }

  #sideNavWrapper.expanded {
    transform: translateX(100vw);
  }

  #sideNavWrapper.expanded #side-nav-toggle-button {
    transform: translateX(0px);
  }

  #sideNavWrapper.expanded #side-nav-toggle-button > .fa-angles-right {
    display: none;
  }

  #sideNavWrapper.expanded #side-nav-toggle-button > .fa-angles-left {
    display: block;
  }

  #pageContentWrapper {
    padding: 4rem 3rem 2rem 3rem;
  }

  #details-container {
    flex-direction: column-reverse;
    gap: 1rem;
  }

    /*Layout Fix jsTree height - mobile*/
    .jstree-container-ul {
        height: calc(90vh - 4rem);
        overflow: auto !important;
    }
}

@media (max-width: 575.98px) {
  .navbar-collapse {
    background-color: white;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -24px;
    padding: 0px 12px 4px;
    z-index: 9;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0.25rem 0.75rem;
    border-bottom: 1px solid rgb(222, 226, 230);
  }

  .navbar-collapse .navbar-nav-link {
    flex-direction: row;
    justify-content: space-between;
  }

  .document-row {
    justify-content: space-around;
  }

  .document-info-card .form-label {
    margin-bottom: 0;
  }
}

@media (max-width: 420px) {
  .navbar-toggler {
    position: fixed;
    right: 10px;
  }
}