/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Fonts & colors ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

:root {
  --forstone-dark: rgba(145, 23, 27);
  --forstone: rgba(182, 29, 34);
  --forstone90: rgba(182, 29, 34, 0.90);
  --forstone25: rgba(182, 29, 34, 0.25);
  --bg-light-grey: rgba(248, 249, 250);
  --lightforstone: #FFE2E2;
  --mediumforstone: #e09aa5;
  --transparent-forstone: #bc1f3748;
  --forstone-grey: rgb(116, 116, 116);
  --forstone-grey25: rgb(116, 116, 116, 0.25);
  --bs-font-sans-serif: "Open Sans",
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    "Liberation Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --top-bar-height: 60px;
  --side-bar-width: max(min(17%, 360px), 180px);
  --approved: #3d0a91;
  --approved-40: #3d0a9140;
  --light-approved: #e0cffc;
  --validated: #0f5132;
  --validated-40: #0f513240;
  --light-validated: #d1e7dd;
  --rejected: #842029;
  --rejected-40: #84202940;
  --light-rejected: #f8d7da;
  --submitted: #997404;
  --submitted-40: #99740440;
  --light-submitted: #fff3cd;
  --auto-calc: #087990;
  --auto-calc-40: #08799040;
  --light-auto-calc: #cff4fc;
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Icons ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

[class^="icon-"],
[class*=" icon-"] {
  font-size: 115%;
}

span[class^="icon-"]:has(+ span),
span[class*=" icon-"]:has(+ span) {
  margin-right: .15rem !important;
}

[class^="icon-"],
[class*=" icon-"] {
  vertical-align: middle !important;
}

.btn:has(span[class^="icon-"]:only-child) {
  padding: 0.15rem 0.35rem;
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ URL ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.main-content a:not(.btn),
#modal a:not(.btn) {
  color: var(--forstone) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border-bottom: 3px solid transparent;
}

.main-content a:not(.btn):hover,
#modal a:not(.btn):hover {
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
}

.main-content a:not(.btn)>span:last-child,
#modal a:not(.btn)>span:last-child {
  position: relative;
}

.main-content a:not(.btn)>span:last-child:before,
#modal a:not(.btn)>span:last-child:before {
  position: absolute;
  margin: 0 auto;
  top: 92%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--forstone);
  content: '';
  opacity: .3;
  transform: scaleX(.9);
  transition-property: opacity, transform;
  transition-duration: .1s;
}

.main-content a:not(.btn):hover>span:last-child:before,
#modal a:not(.btn):hover>span:last-child:before {
  opacity: 1;
  height: 3px;
  transform: scaleX(1);
}

#table_wrapper table a:not(.btn) div,
.boxed-url {
  color: var(--forstone) !important;
  border: var(--transparent-forstone) solid 1px !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  text-decoration: none !important;
  border-radius: 0.5rem !important;
  text-wrap: balance;
}

.boxed-url {
  line-height: calc(1.5rem + .5rem);
}

#table_wrapper table a:not(.btn):hover div,
.boxed-url:hover {
  color: var(--forstone) !important;
  border-color: var(--forstone) !important;
  box-shadow: 0 0 0 0.25rem var(--forstone25);
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Buttons ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.btn.my-btn {
  color: var(--forstone-grey);
  background-color: rgba(9, 30, 66, 0.06);
  border: none;
}

.btn.my-btn:focus,
.btn.my-btn:hover,
.btn.my-btn:active {
  color: var(--forstone) !important;
  background-color: white;
  box-shadow: 0 0 0 0.25rem var(--forstone25);
}

.clickable {
  cursor: pointer;
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Font variations ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.red-light {
  color: var(--forstone);
  font-weight: 300;
}

.small-light {
  color: var(--forstone-grey);
  font-weight: 300;
  font-size: 0.9rem;
}

.simple-highlight {
  background-color: #FFFF0070;
  padding: 0.2em 0.35em;
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Modal ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.modal-content {
  min-height: 150px;
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ NAV validation states ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.auto-calc {
  --btn-color: var(--auto-calc);
  --btn-color-40: var(--auto-calc-40);
  --btn-background: var(--light-auto-calc);
}

.submitted {
  --btn-color: var(--submitted);
  --btn-color-40: var(--submitted-40);
  --btn-background: var(--light-submitted);
}

.rejected {
  --btn-color: var(--rejected);
  --btn-color-40: var(--rejected-40);
  --btn-background: var(--light-rejected);
}

.validated {
  --btn-color: var(--validated);
  --btn-color-40: var(--validated-40);
  --btn-background: var(--light-validated);
}

.approved {
  --btn-color: var(--approved);
  --btn-color-40: var(--approved-40);
  --btn-background: var(--light-approved);
}

/*═════════════════════════════════════════════════════════════════════════════╗
║ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ Accordion ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ ║
╚═════════════════════════════════════════════════════════════════════════════*/

.accordion {
  --bs-accordion-active-color: black !important;
  --bs-accordion-active-bg: var(--lightforstone) !important;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--forstone25) !important;
}