@import url('../lib/bootstrap-icons.css');

@font-face {
  font-family: sans-wide;
  src: url('../lib/fonts/SweetSansProLight.otf');
}

@font-face {
  font-family: sans;
  src: url('../lib/fonts/SourceSans3-Regular.ttf');
}

@font-face {
  font-family: sans;
  font-weight: bold;
  src: url('../lib/fonts/SourceSans3-Bold.ttf');
}

@font-face {
  font-family: avec;
  src: url('../lib/fonts/FreightBigProBook.otf');
}

@font-face {
  font-family: avec;
  font-weight: bold;
  src: url('../lib/fonts/FreightBigProBold.otf');
}

:root {
  --dark: #404040;
  --primary-blue: #132136;
  --secondary-blue: #43425D;
  --secondary: #956253;
  --success: #71986F;
  --process: #F87171;
  --red: #DB4C40;
  --orange: orange;

  --white: white;
  --background: #F8F8F8;
  --light-grey: #F1F1F3;
  --grey: #8F8F8F;

  --main-text-bg: #EFEDEB;
  --footer-header: #F3F0EC;
  --footer-header-dark: #E9E5E1;
  
  --multi-select-dark-gray: #6C757D;
  --multi-select-light-gray: #CED4DA;


  /* here */

  --the-brownish-white: #EFEDEB;
  --la-creme: #F3F0EC;
  --the-gray: #C6C9CD;
  --the-blue: #0C1B32;
  --the-black: #43425D;
  --the-soft-blue: #746ece;
  --the-dark-gray: #696969;
  --the-green: #67b767;
  --the-yellow: #ffb52c;
  --the-brown: #956253;

  /* buttons */
  --btn-color: var(--the-blue);
  --btn-text-color: var(--white);
}

body, html {
  height: 100.1%;
}

body {
  color: var(--the-black);
  font-family: sans, sans-serif;
  margin: 0;
  background-color: var(--background);
  display: flex;
	flex-direction: row;
}

body > main {
  margin-left: 17em;
  width: calc(100% - 17em);
}

body > main.collapsed {
  margin-left: 6.5em;
  width: calc(100% - 6.5em);
}

body > main > content {
  display: block;
  padding: 2em;
  position: relative;
  min-height: 16em;
}

#mapbox-container {
  width: 100%;
  height: 500px;
  margin: auto;
}

.number {
  font-family: monospace;
}

a {
  text-decoration: underline;
  cursor: pointer;
}

.underline{
  text-decoration: underline;
}
.strikethrough{
  text-decoration: line-through;
  color: var(--grey);
}

.clickable {
  cursor: pointer;
}

hr {
  border: none;
  border-top: 1px solid var(--la-creme);
  margin: 3em 1em;
}

#mapbox-container a {
  color: unset;
}

a:link, a:active, a:visited, a:hover {
  color: var(--the-blue);
}

bubble-message {
  background-color: rgba(0,0,0,1);
  border-radius: 3px;
  box-shadow: 0 20px 30px 0 rgba(0,0,0,0.2);

  animation: pulse 3s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.5;
  z-index: 9999;
}

bubble-message * {
  color: white;
}

bubble-message main {
  padding: 1em;
}

bubble-message header {
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 0.7em;
}

bubble-message content {
  margin: auto;
  text-wrap: nowrap;
}

bubble-message .bubble-message-close-button::before {
  font-size: 1.5em;
  padding: 2px 7px;
  content: '×';
}

[table-sort]::after {
  content: '◇';
  /* float: right; */
  margin-left: 1em;
  opacity: 0.3;
}

[table-sort].up::after {
  content: "▲";
}

[table-sort].down::after {
  content: "▼";
}

.input-group {
  margin-bottom: 1em;
}

.badge,
.alert{
  padding: 1em;
  border-radius: 0.5em;
  color: var(--btn-text-color);
  background-color: var(--btn-color);
}

.badge {
  padding: 0.5em 1em;
}

.bar {
  display: block;
  height: 0.5rem;
  width: 100%;
  background-color: var(--btn-color);
}
.bar-1 {
  height: 1rem;
}
.bar-2 {
  height: 2rem;
}


button:has([icon]),
a.button:has([icon]){
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

a.button:link,
a.button:active,
a.button:visited,
a.button:hover {
  color: var(--btn-text-color);
  text-decoration: none;
}

[icon][color="current"]{
  background-color: currentColor;
}

.bar[color="brown"],
.badge[color="brown"],
.alert[color="brown"],
.button[color="brown"],
button[color="brown"] {
  --btn-color: var(--the-brown);
  --btn-text-color: var(--white);
}
.bar[color="red"],
.badge[color="red"],
.alert[color="red"],
.button[color="red"],
button[color="red"] {
  --btn-color: var(--red);
  --btn-text-color: var(--white);
}
.bar[color="orange"],
.badge[color="orange"],
.alert[color="orange"],
.button[color="orange"],
button[color="orange"] {
  --btn-color: var(--orange);
  --btn-text-color: var(--white);
}
.bar[color="green"],
.badge[color="green"],
.alert[color="green"],
.button[color="green"],
button[color="green"] {
  --btn-color: var(--success);
  --btn-text-color: var(--white);
}
.bar[color="gray"],
.badge[color="gray"],
.alert[color="gray"],
.button[color="gray"],
button[color="gray"],
.alert[color="grey"],
.button[color="grey"],
button[color="grey"] {
  --btn-color: var(--light-grey);
  --btn-text-color: var(--dark);
}

.button,
button {
  display: inline-block;
  appearance: none;
  background-color: var(--btn-color);
  color: var(--btn-text-color);
  border: none;
  border-radius: 2em;
  padding: 0.8em 1.5em;
  font-family: sans-wide, sans, sans-serif;
  transition: opacity 0.3s linear;
  vertical-align: middle;
}
a.button,button{
  cursor: pointer;
}
p > button:has(+ button){
  margin-bottom: 0.5rem;
}

.button:has(i),
button:has(i){
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7em;
}
.button:has(i) i,
button:has(i) i{
  margin: 0;
}
/*button i ~ span {
  margin-left: 0.7em;
}*/
.button.downloading,
button.downloading {
  animation: fadeInOut 2s ease-in-out infinite;
}
.button.is-loading,
button.is-loading {
  position: relative;
  pointer-events: none;
}

.button.is-loading::after,
button.is-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2em;
  background: rgba(0,0,0, 0.3);
  animation: fadeInOut 2s ease-in-out infinite;
  pointer-events: none;
}


.download-link{
  appearance: none;
  background: none;
  color: var(--the-brown);
}
.download-link:has(i){
  gap: 0.4em;
}
.download-link:has(i) i{
  margin: 0;
}

.badge.outline,
.alert.outline,
.button.outline,
a.button.outline:link,
a.button.outline:active,
a.button.outline:visited,
button.outline{
  background-color: transparent;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
}

.button.outline [icon],
button.outline [icon]{
  background-color: var(--btn-color);
}

a.button.outline:link:hover,
a.button.outline:hover,
button.outline:hover {
  background-color: var(--btn-color);
  color: var(--btn-text-color);
}
.button.outline:hover:not(:disabled) [icon],
button.outline:hover:not(:disabled) [icon]{
  background-color: var(--btn-text-color);
}
.button.outline:disabled [icon],
button.outline:disabled [icon]{
  background-color: var(--white);
}

.badge.ghost,
.alert.ghost,
.button.ghost,
button.ghost{
  background-color: transparent;
  color: var(--btn-color);
}

.button.ghost [icon],
button.ghost [icon]{
  background-color: var(--btn-color);
  color: var(--btn-color);
}

.button.ghost:hover,
button.ghost:hover {
  background-color: var(--btn-color);
  color: var(--btn-text-color);
}
.button.ghost:hover [icon],
button.ghost:hover [icon]{
  background-color: var(--btn-text-color);
  color: var(--btn-text-color);
}

.button[disabled],
button[disabled],
button:disabled,
button[disabled]:hover,
button:disabled:hover {
  border: none;
  background-color: var(--grey);
  color: var(--white);
  cursor: not-allowed;
}



[size="xs"]{
  font-size: 0.6em;
}
[size="sm"] {
  font-size: 0.8em;
}
[size="md"] {
  font-size: 1em;
}
[size="lg"] {
  font-size: 1.2em;
}
[size="xl"] {
  font-size: 1.5em;
}
[size="2xl"] {
  font-size: 2em;
}

.rot90{
  transform: rotate(90deg);
}


#request-preview {
  background-color: var(--white);
  padding: 1em 2em 2em;
  margin-top: 2em;
  text-align: center;
  width: fit-content;
  min-width: calc(100% - 4em);
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
}

#request-preview .buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}

.loading {
  display: flex;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  font-size: 24px;
  z-index: 1001;
  opacity: 0;
  transition: opacity 1s linear;
  justify-content: space-evenly;
  align-items: center;
  flex-flow: column;
}

.spinner {
  position: absolute;
  display: block;
  width: 48px;
  height: 48px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(241, 241, 241) rgb(51, 51, 51) rgb(51, 51, 51);
  border-image: initial;
  border-radius: 50%;
  border-top: 1px solid rgb(241, 241, 241);
  animation: 2s linear 0s infinite normal none running spin;
}

.loading .spinner {
  width: 120px;
  height: 120px;
  border-top: 3px solid rgb(241, 241, 241);
}

.spinner.sm{
  width: 1rem;
  height: 1rem;
  background: none;
  box-shadow: none;
}

.loading p {
  color: rgb(241, 241, 241);
  font-size: medium;
  text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 5px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

progress.progress-bar{
  -webkit-appearance:none;
  -moz-appearance:none;        
  appearance: none;
  width: 100%;
  height: 0.5em;
  border-radius: 1em;
  background-color: var(--light-grey);
  overflow: hidden;
  color: var(--secondary);
  margin: 0.5rem 0;
}

progress.progress-bar::-webkit-progress-bar,
progress.progress-bar::-webkit-progress-value,
progress.progress-bar::-moz-progress-bar {
  background-color: var(--secondary);
}

.progress-container{
  border: solid 1px var(--light-grey);
  padding: 1rem;
}

textarea,
select,
input {
  border: 1px solid transparent;
  font-size: 1.3em;
  padding: 0.5em 1em;
  box-shadow: 0px 0px 2px rgb(0 0 0 / 30%);
}
form[readonly] select,
form[readonly] input,
form[readonly] textarea,
select[disabled],
textarea[readonly],
textarea[disabled],
input[readonly],
input[disabled]{
  background-color: var(--light-grey);
  border-color: var(--light-grey);
  box-shadow: none;
  cursor: not-allowed;
  outline: none;
}

.input-container:has(input[required])~.valid,
.input-container:has(input[required])~.invalid,
input[required]~.valid,
textarea[required]~.valid,
select[required]~.valid,
input[required]~.invalid,
textarea[required]~.invalid,
select[required]~.invalid{
  display: none; 
}

.input-container:has(input[required]:valid)~.valid,
input[required]:valid~.valid,
textarea[required]:valid~.valid,
select[required]:valid~.valid{
  display: block; 
}
.input-container:has(input[required]:invalid)~.invalid,
input[required]:invalid~.invalid,
textarea[required]:invalid~.invalid,
select[required]:invalid~.invalid{
  display: block; 
}

select {
  background-color: var(--white);
}
select.rounded {
  border-radius: 2em;
  background-color: var(--light-grey);
  border: 1px solid var(--dark);
  font-size: 0.8rem;
}
select.end{
  order: 1;
}

textarea {
  font-size: 1.2em;
  min-width: 18em;
}
textarea:not([rows]) {
  min-height: 10em;
}

input[invalid] {
  border: 1px solid var(--red);
  background-color: rgba(255, 0, 0, 0.1);
}

input[corrected] {
  border: 1px solid var(--orange);
  background-color: rgba(255, 165, 0, 0.1);
}

input[format=uuid],
input[type=number] {
  font-family: monospace;
}

input[format=uuid] {
  width: 22em;
}

input[inputmode="numeric"] {
  font-family: monospace;
}

.field .files > label,
label[for="upload_files"] {
  cursor: pointer;
  font-size: 0.9em;
  color: var(--white);
  background-color: var(--primary-blue);
  padding: 12px 20px;
  border-radius: 2em;
}

/* drag and drop file upload hover */
[data-drop].over{
  background-color: var(--background);
}

.upload-block{
	border-radius: 0.5rem;
	background: var(--footer-header-dark);
	border: 2px dotted var(--secondary);
	display: flex;
	justify-content: center;
	align-items: center;
  min-height: 10rem;
  margin-bottom: 1rem;
}
.upload-block label{
	cursor: pointer;
	font-weight: bold;
	color: var(--secondary);
}
.upload-block label input{
	display: none;
}
.upload-block:has(input:disabled){
  background: var(--light-grey);
  border: 2px dotted var(--grey);
  cursor: not-allowed;
}
.upload-block:has(input:disabled) label{
  color: var(--grey);
}

.reject,
.fail {
  background-color: var(--red);
  color: var(--white);
  z-index: 999;
}

.reject-fg,
.fail-fg {
  color: var(--red);
}

.warn {
  background-color: var(--orange);
  color: var(--white);
}
.warn-fg {
  color: var(--orange);
}

.approve,
.success {
  background-color: var(--success);
  color: var(--white);
}

.approve-fg,
.success-fg {
  color: var(--success);
}

.clipboard-label {
  border-radius: 40px;
  border: 1px dashed var(--footer-header-dark);
  padding: 6px 16px;
}


.multi-org header{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.org-info{
  column-count: 2;
  gap: 2rem;
  max-width: 50rem;
}
.org-info > div {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: solid 1px var(--light-grey);
  flex-wrap: wrap;
}
.org-info *{
  font-size: 1rem;
}
@media (max-width: 768px){
  .org-info{
    column-count: 1;
  }
}


.field {
  display: block;
}
.flex{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.flex-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.flex-col{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inline-flex{
  display: inline-flex;
}
.flex-1{
  flex: 1;
}
.flex-align-start{
  align-items: flex-start;
}
.flex-align-center{
  align-items: center;
}
.flex-align-end{
  align-items: end;
}
.flex-gap-0{
  gap: 0;
}
.flex-gap-1{
  gap: 1rem;
}
.flex-gap-1-2{
  gap: 0.5rem;
}
.flex-gap-1-3{
  gap: 0.33rem;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-none{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.justify-start{
  justify-content: flex-start;
}
.justify-between{
  justify-content: space-between;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.break {
  flex-basis: 100%;
  height: 0;
}


.self-center{
  align-self: center;
}

.inline-block{
  display: inline-block;
}
.block{
  display: block;
}
.w-full{
  width: 100%;
  box-sizing: border-box;
}
.w-10{
  width: 10rem;
}
.w-20{
  width: 20rem;
}
.mw-5{
  max-width: 5rem;
}
.mw-8{
  max-width: 8rem;
}
.mw-10{
  max-width: 10rem;
}
.mw-15{
  max-width: 15rem;
}
.mw-20{
  max-width: 20rem;
}
.mw-25ch{
  max-width: 25ch;
}
.mw-50p{
  max-width: 50%;
}
.wrap-text{
  white-space: pre-wrap;
}
.uppercase{
  text-transform: uppercase;
}

.panel {
  background: var(--main-text-bg);
  color: var(--primary-blue);
  padding: 1rem;
}
.panel > div > span{
  display: inline-block;
  width: 7rem;
}
.cols-2{
  column-count: 2;
}
.m-0{
  margin: 0;
}
.mb-1-2{
  margin-bottom: 0.5rem;
}
.mb-1{
  margin-bottom: 1rem;
}
.mb-2{
  margin-bottom: 2rem;
}
.mt-0{
  margin-top: 0;
}
.mt-1{
  margin-top: 1rem;
}
.mt-2{
  margin-top: 2rem;
}
.mt-5{
  margin-top: 5rem;
}
.field.mr-1,
.mr-1{
  margin-right: 1rem;
}
.p-1-2{
  padding: 0.5rem;
}
.p-1{
  padding: 1rem;
}
.p-1-1-2{
  padding: 1.5rem;
}
.p-2{
  padding: 2rem;
}
.overflow-ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-right{
  position: sticky;
  right: 0;
}
.sticky-bottom{
  position: sticky;
  bottom: 0;
}

.bg-dark{
  background-color: var(--dark);
}
.bg-primary-blue{
  background-color: var(--primary-blue);
}
.bg-secondary-blue{
  background-color: var(--secondary-blue);
}
.bg-secondary{
  background-color: var(--secondary);
}
.bg-success{
  background-color: var(--success);
}
.bg-process{
  background-color: var(--process);
}
.bg-red{
  background-color: var(--red);
}
.bg-orange{
  background-color: var(--orange);
}
.bg-white{
  background-color: var(--white);
}
.bg-background{
  background-color: var(--background);
}
.bg-light-grey{
  background-color: var(--light-grey);
}
.bg-grey{
  background-color: var(--grey);
}
.bg-main-text-bg{
  background-color: var(--main-text-bg);
}
.bg-footer-header{
  background-color: var(--footer-header);
}
.bg-footer-header-dark{
  background-color: var(--footer-header-dark);
}
.bg-the-brownish-white{
  background-color: var(--the-brownish-white);
}
.bg-la-creme{
  background-color: var(--la-creme);
}
.bg-the-gray{
  background-color: var(--the-gray);
}
.bg-the-blue{
  background-color: var(--the-blue);
}
.bg-the-black{
  background-color: var(--the-black);
}
.bg-the-soft-blue{
  background-color: var(--the-soft-blue);
}
.bg-the-dark-gray{
  background-color: var(--the-dark-gray);
}
.bg-the-green{
  background-color: var(--the-green);
}
.bg-the-yellow{
  background-color: var(--the-yellow);
}
.bg-the-brown{
  background-color: var(--the-brown);
}

.font-sans {
  font-family: sans, sans-serif;
}
.font-sans-wide {
  font-family: sans-wide;
}
.font-avec {
  font-family: avec;
}


.border-b{
  border-bottom: 1px solid var(--light-grey);
}
.border-t{
  border-top: 1px solid var(--light-grey);
}
.border-none-last:last-child,
.border-none{
  border: none;
}

.notice{
  border: solid 1px var(--the-brown);
  border-radius: 0.25rem;
  padding: 1rem;
  font-size: 0.875rem;
}
.notice ol{
  color: var(--the-brown);
  margin: 0;
  padding: 0 0 0 1rem;
}
.notice a{
  color: var(--the-brown);
  font-weight: bold;
}

.subtle{
	color: var(--secondary);
}
.subtle[color="red"]{
  color: var(--red);
}
.subtle[color="gray"],
.subtle[color="grey"]{
  color: var(--grey);
}
.subtle[color="light-gray"],
.subtle[color="light-grey"]{
  color: var(--light-grey);
}

.centered{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
}
.break-word{
	word-break: break-word;
}

.hidden{
  display: none;
}

.grid-container {
  --grid-layout-gap: 1rem;
  --grid-column-count: 4;
  --grid-item--min-width: 280px;

  /**
   * Calculated values.
   */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--grid-layout-gap);
}
.grid-container.cols-2 {
  --grid-column-count: 2;
}

.circulars *{
  box-sizing: border-box;
}
.circulars {
  display: grid;
  grid-template-columns: repeat(auto-fill, 30rem);
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1rem;
}
.circulars .group{
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}
.circulars .group:first-child{
  grid-row: 1 / span 3;
}
.circulars [data-year] h2{
  background: var(--footer-header);
  font-family: sans, sans-serif;
  padding: 0.5rem;
}
.circulars ul{
  list-style: none;
  padding: 0;
}
.circulars ul li{
  padding: 1rem 0.5rem;
}
.circulars ul li:not(:last-child){
  border-bottom: 1px solid var(--footer-header-dark);
}
.circulars dnk-badge {
  padding: 0.5rem 1rem;
  display: flex;
  gap: 0.5rem;
}

.search-input{
  margin-bottom: 2rem;
}
.search-input input.search{
  background-color: var(--white);
}
.search-input input.search::placeholder{
  color: var(--grey);
}


.ur-arrow-right{
  color: var(--white);
  background-color: var(--primary-blue);
  text-align: center;
  border-radius: 2em;
  width: 2em;
  height: 2em;
  line-height: 2em;
}

.avatar{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6em;
  height: 6em;
  font-size: 1.5em;
}


/**
 * Tooltip Styles
 */

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  transition: opacity 0.15s linear;
  opacity: 0;
  pointer-events: none;
  word-break: break-word;
  white-space: break-spaces;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem;
  width: max-content;
  max-width: calc(min(20rem, 75vw));
  border-radius: 1rem;
  background-color: var(--light-grey);
  color: var(--dark);
  content: attr(data-tooltip);
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: calc(100% + 1rem - 5px);
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid var(--light-grey);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

*:has(> [data-tooltip]) {
  display: flex;
  gap: 0.5em;
  align-items: center;
}