body {
    background: url(../imgs/body-bg.jpg) fixed no-repeat center center / contain;
    border-top: 10px solid #1c83c6;
    color: #595959;
    font-family: 'Open Sans';
}

header {
    font-size: 4em;
    text-transform: uppercase;
}
body.home-page header .number-wrap {
    font-weight: 100;
    border-right: 2px solid #595959;
}
header .title-wrap {
    font-weight: 800;
    padding-left: 40px;
    line-height: 1.2;
    font-size: 0.7em;
    align-items: center;
    display: flex;
}
header .logo-col .logo-wrap {
    display: inline-block;
    width: 100%;
    max-width: 270px;
}
@media all and (min-width:991px) {
  header .logo-col .logo-wrap {
    padding-right: 40px;
  }
}

.page {
    border: 0;
}
.page:not(.active) {
    display: none;
}

.page.slide-target h2 {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 2em;
    text-align: center;
    margin-bottom: 40px;
}
.page.slide-target .card-body > .row > .col {
    padding: 0 50px;
}
.page.slide-target .volume-col img {
    width: 125px;
    vertical-align: middle;
    margin-right: 30px;
}
.page.slide-target .volume-col span {
    color: #1c83c6;
    font-size: 5em;
    font-weight: 100;
    line-height: 1.3;
}
.page.slide-target .volume-col span strong {
    font-weight: 800;
}



.pdf-viewer {
    width: 100%;
    height: 500px;
}

.image-viewer {
  height: 100%;
  height: calc(100% + 45px);
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-pointer:hover {
    opacity: 0.7;
}

body.admin-page #slides .card-title {
    padding: 10px 0;
    margin-top: -10px;
    cursor: move;
}

body.admin-page #slides .card-title span {
    font-size: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -9px;
    margin-right: 5px;
}

.volume-div {
    height: 45vh;
}

.datepicker-dropdown {
	padding: 10px;
}

.input-daterange input {
    background: #fff !important;
}


.loader-wrap {
    position: fixed;
    padding: 5%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.7);
}
body:not(.loading) .loader-wrap {
    display: none;
}

.loader {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
}
.loader:before {
    content: '';
    display: block;
    padding-top: 100%;
}

  .loader .circular {
      -webkit-animation: rotate 2s linear infinite;
              animation: rotate 2s linear infinite;
      height: 100%;
      -webkit-transform-origin: center center;
              transform-origin: center center;
      width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }

  .loader	.path {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
              animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
      stroke-linecap: round;
  }


@-webkit-keyframes rotate {
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }

  @keyframes rotate {
    100% {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  @-webkit-keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
  @keyframes dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -35px;
    }
    100% {
      stroke-dasharray: 89, 200;
      stroke-dashoffset: -124px;
    }
  }
  @-webkit-keyframes color {
    100%,
    0% {
      stroke: #d62d20;
    }
    40% {
      stroke: #0057e7;
    }
    66% {
      stroke: #008744;
    }
    80%,
    90% {
      stroke: #ffa700;
    }
  }
  @keyframes color {
    100%,
    0% {
      stroke: #d62d20;
    }
    40% {
      stroke: #0057e7;
    }
    66% {
      stroke: #008744;
    }
    80%,
    90% {
      stroke: #ffa700;
    }
}

 .dc-display-page header .online {
  color: green;
 } 
 .dc-display-page header .offline {
  color: red;
 } 

.dc-display {

}

.dc-display ul {
	list-style: none;
	column-count: 3;
	height: calc(100vh - 175px);
	margin: 0;
  padding: 0 20px;
  column-fill: auto;
}

.dc-display ul li {
  width: 100%;
  padding: 15px;
}

.dc-display ul li .item {
  background:#fff;
  border: 1px solid#d9d9d9;
  font-size: 3em;
  font-weight: 800;
  border-radius: 10px;
  padding: 10px 20px;
}

.dc-display ul li .item.new {
  background:rgb(182, 241, 202);
  border-color: #98c186;
  animation: new-donor 1s infinite;
}

@-webkit-keyframes new-donor {
  0%, 49% {
    background-color: rgb(182, 241, 202);
  }
  50%, 100% {
    background-color: rgb(116, 228, 153);
  }
}

.nav-item {
    font-size: 0.85em;
}

body:not(.loading) .loader-wrap {
	display: none;
}

.chosen-container {
    line-height: 36px;
    font-size: 1rem !important;
}

.chosen-container > ul {
    border-radius: .25rem;
    border: 1px solid #ced4da !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
    line-height: 22px !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top: 9px !important;
}