.sunbeam-copyright {
    color: #869099;
    font-size: x-small;
    text-align: center;
}

body {
    min-height: 100%;
}

.faint-underline {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
}

li.user-header {
    padding: 10px;
    text-align: center;
}

ul.user-menu {
    padding: 10px;
}

.wrapper {
    background: #DEE2E6;
}

.content-wrapper {
    background: #DEE2E6;
}

.main-footer {
    background: #DEE2E6;
    border-top: 1px solid #ADB7C0;
    color: #869099;
    padding: 1rem;
}

.main-footer a {
    color: #869099;
}


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

hr.dashed {
    border-top: 2px dashed #444;
}

hr.dotted {
    border-top: 2px dotted #444;
}

hr.solid {
    border-top: 2px solid #444;
}


hr.hr-text {
  position: relative;
    border: none;
    height: 1px;
    background: #444;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #444;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Added this to customize the select2 control to better fit BS4 */
.select2-selection__rendered {
    margin-top: -9px !important;
    }


/* Allows building CSS-based pie charts */
@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;

  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:25px;
  font-weight:bold;
  font-family:sans-serif;
}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}

/*  Use like:  <div class="pie animate no-round" style="--p:80;--c:green;"> 80%</div>  */

/* Make bootstrap columns the same height */
.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}