body {
  background-color: rgba(176, 196, 222) !important;
  font-family: "Open Sans", sans-serif;
  background-image: url('../images/background-photo.jpg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-blend-mode: screen;
}


:root {
  --customtrans-color: color;
  --customtrans-opacity: opacity;
  --customtrans-dur: 0.5s;
  --customtrans-timing-func: ease-out;
  --customtrans-delay: 0s; 
  --customtop: -1.4rem;
  --texthover: #0018A8;
  --color-danger: #dc3545;
  --color-warning: #EDAF00;
  --color-success: #28a745;
}

.first {
  background-color: rgba(0, 0, 0, 0.76) !important;
}

.myform {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 1.1rem;
  outline: 0;
  max-width: 500px;
}

.loginpage {
  height: 800px;
  background-color: #00246b;
}

li .nocircle {
  list-style: none;
}

.inspection {
  height: max-content;
  background-color: rgba(0, 0, 0, 0.76);
}

/*
.card {
  color: black;
}

.card-header {
  background-color: rgba(84, 175, 211, 0.514) !important;
}

.card-heaader.locationheader {
  background-color: rgba(86, 91, 94, 0.514) !important;
}

.blueborder {
  margin: auto;
  border: 1px solid blue;
}

.blueborder .table {
  border: 1px solid;
  background-color: #fff;
}
*/

.card {
  background-clip: content-box !important;
  border: none !important;
  background-position: center;
  transition: background 0.5s;
  /*perspective: 1000px;*/
}

.card:hover>.card-body p {
  color: var(--texthover);
  transition-property: var(--customtrans-color);
  transition-duration: var(--customtrans-dur);
  transition-timing-function: var(--customtrans-timing-func);
  transition-delay: var(--customtrans-delay);
}

/*@media (hover: none) {
  .card-body {
    background-position: center;
    transition: background 0.8s;
  }

  .card-body:hover {
    background: #FFFFFF radial-gradient(circle, transparent 1%, #FFFFFF 1%) center/20000%;
  }

  .card:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
  }
}*/

.card-text {
  line-height: 1.3rem; 
  font-size: small;
}

.bar-text {
  display: inline-block;
  font-size: medium;
  padding-left: 5px;
  position: relative;
  top: var(--customtop);
  /*visibility: visible;
  opacity: 1.0;
  transition: opacity var(--customtrans-dur) var(--customtrans-timing-func) var(--customtrans-delay);*/
}

.bar-subtext {
  opacity: 0.0;
  transition-property: var(--customtrans-opacity);
  transition-duration: var(--customtrans-dur);
  transition-timing-function: var(--customtrans-timing-func);
  transition-delay: var(--customtrans-delay);
}

.bar {
  display: block; 
  height: calc(-1 * var(--customtop));
}

.bar-bkground {
  background-color: #F5F5F5;
  width: 100%;    
}

.bar-issue {
  /*background-color: #ADD8E6;*/
  overflow: hidden;
  display: flex;
  text-align: center;
  opacity: 0.5;
}

.bar-issue-none {
  background-color: #C7F2FF;
}

.bar-issue-lo {
  background-color: #ADD8E6;
}

.bar-issue-med {
  background-color: #94BFCD;
}

.bar-issue-hi {
  background-color: #7AA5B3;
}

.bar-site {
  background-color: #FFCCCB;     
  text-align: center;
  opacity: 0.5;
}

.bar-distinct {
  /*background-color: #D8BFD8;*/
  overflow: hidden;
  display: flex;
  text-align: center;
  opacity: 0.5;
}

.bar-distinct-none {
  background-color: #F2D9F2;
}

.bar-distinct-lo {
  background-color: #D8BFD8;
}

.bar-distinct-med {
  background-color: #BFA6BF;
}

.bar-distinct-hi {
  background-color: #A58CA5;
}

@keyframes animIn {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}

@-o-keyframes animIn {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}

@-moz-keyframes animIn {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}

@-webkit-keyframes animIn {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}

.card:hover .bar-issue, 
.card:hover .bar-site, 
.card:hover .bar-distinct {
  /*-webkit-animation: animIn 0.5s ease-out;
  -webkit-animation-delay: calc(var(--animation-order) * 150ms);
  -moz-animation: animIn 0.5s ease-out;
  -moz-animation-delay: calc(var(--animation-order) * 150ms);
  -o-animation: animIn 0.5s ease-out;
  -o-animation-delay: calc(var(--animation-order) * 150ms);
  animation: animIn 0.5s ease-out;  
  animation-delay: calc(var(--animation-order) * 150ms);*/
  opacity: 1.0;
}

.card:hover .bar-text {
  visibility: hidden;
  /*opacity: 0.0;
  transition: visibility 0s var(--customtrans-dur), opacity var(--customtrans-dur) var(--customtrans-timing-func) var(--customtrans-delay);*/
}

.card:hover .bar-subtext {
  opacity: 1.0;
}

.card:hover .fa {
  transition-property: var(--customtrans-color);
  transition-duration: var(--customtrans-dur);
  transition-timing-function: var(--customtrans-timing-func);
  transition-delay: var(--customtrans-delay);
}
.card:hover .fa-sliders {
  color: #87CEEB;
}
.card:hover .fa-map-marker {
  color: #F08080;
}
.card:hover .fa-star-o {
  color: #DA70D6;
}

/*
.tab { 
	display: inline-block; 
        margin-left: 10px; 
} 

.card-body:active {
  background-color: #F0F8FF !important;
  background-size: 100% !important;
  transition: background 0.3s !important;
}
*/
.card-header {
  box-shadow: 0px 2px 10px gray;
  /*z-index: 1;*/
}

.indexpage {
  color: white;
}

.btn-primary a {
  color: #fff;
}

.sitelist {
  background-color: #fff;
}

.pagetitle {
  font-size: 20px;
  margin: 10px;
  border-bottom: 1px solid;
  padding: 10px;
  margin-bottom: 10px;
}

p {
  /*background-color: white;*/
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: hidden;
}

.base_error {
  background-color: #ff0000 !important;
}

.base_filled {
  background-color: green !important;
}

.error {
  color: #ff0000 !important;
}

.success {
  color: green;
  padding: 10px;
}

.invisible {
  display: none;
}

.singlecategory.visible {
  display: table;
  width: 100%;
}

.singlecategory.visible th {
  background-color: #fbf7f7;
  padding: 10px;
  color: #000;
  vertical-align: middle;
  text-align: center;
}

.singlecategory.visible td {
  text-align: center;
}

.singlecategory button.special {
  background-color: #2fa8d7;
  width: auto;
  padding: 7px 40px;
  color: #fefefe;
  float: right;
  margin-right: 27px;
  margin-bottom: 15px;
  margin-top: 29px;
}

input[type="checkbox"][readonly] {
  pointer-events: none;
}

.banner {
  position: absolute;
  display: block;
  padding-left: 50px;
  padding-top: 160px;
  width: fit-content;
  color: #2F4F4F !important;
}

.banner>h5 {
  color: #2F4F4F !important;
}

/* updated stylesheet */
.form-group>label {
  font-size: 0.9rem;
  margin-bottom: 0rem !important;
}

.navigation {
  box-shadow: 0px 3px 10px gray;
}

h5 {
  color: rgb(63, 55, 55) !important;
  text-decoration: none;
}

h5:hover {
  text-decoration: none !important;
  /* color: rgba(63, 55, 55, 0.651) !important; */
}

.itembgnd {
  background-color: #98989724;
  border-bottom: 2px solid lightgray;
  border-top: 1px solid lightgray;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.form-control {
  border: 0px !important;
  border-radius: 0px !important;
  border: 1px solid rgba(169, 169, 169) !important;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.page-title {
  color: #2F4F4F !important;
}

.sitesvisited,
.datefilters,
.status,
.boxplot,
.dashdetails,
.maps {
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: #94a0b073;
  padding-top: 10px;
  padding-bottom: 10px;
}

.info-box {
  display: block;
  min-height: 90px;
  background: #fff;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 15px;
}

.info-box-icon {
  border-top-left-radius: 5px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 5px;
  display: block;
  float: left;
  height: 90px;
  width: 90px;
  text-align: center;
  font-size: 45px;
  line-height: 90px;
  background: rgba(0, 0, 0, 0.2);
}

.info-box-content {
  padding: 5px 10px;
  margin-left: 90px;
}

.info-box-text {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-box-number {
  display: block;
  font-weight: bold;
  font-size: 18px;
}

.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #337ab7;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

/*
.progress,
.progress>.progress-bar,
.progress .progress-bar,
.progress>.progress-bar .progress-bar {
  border-radius: 1px;
}*/

.progress,
.progress>.progress-bar {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.progress-bar-green,
.progress-bar-success {
  background-color: #00a65a;
}

.progress {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  height: 0.25rem !important;
  /*background: #696969 !important;*/
  /*border: 1px solid #696969;*/
}

.progress>.progress-bar,
.progress .progress-bar,
.progress>.progress-bar .progress-bar {

  background: #1E90FF !important;
  -webkit-animation: progressBar 2s ease-out 500ms;
  -webkit-animation-fill-mode: both;
  -moz-animation: progressBar 2s ease-out 500ms;
  -moz-animation-fill-mode: both;
  -o-animation: progressBar 2s ease-out 500ms;
  -o-animation-fill-mode: both;
  animation: progressBar 2s ease-out 500ms;
  animation-fill-mode: both;
}

@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-o-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

.progress-group .progress-number {
  float: right;
}

.progress-group .progress-text {
  font-weight: 600;
  color: #2F4F4F;
}

.progress-number {
  color: #2F4F4F;
}

.progress-group:hover .progress-text,
.progress-group:hover .progress-number {
  color: var(--texthover);
}

/* Animation for running counter */
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.progress-count {
  -webkit-animation: progressCount 2s ease-out 500ms;
  -webkit-animation-fill-mode: both;
  -moz-animation: progressCount 2s ease-out 500ms;
  -moz-animation-fill-mode: both;
  -o-animation: progressCount 2s ease-out 500ms;
  -o-animation-fill-mode: both;
  animation: progressCount 2s ease-out 500ms;
  animation-fill-mode: both;
  counter-increment: num var(--num, var(--countinspect));
}

@-webkit-keyframes progressCount {
  0% { --num: 0; }
  100% { --num: var(--countinspect); }
}

@-moz-keyframes progressCount {
  0% { --num: 0; }
  100% { --num: var(--countinspect); }
}

@-o-keyframes progressCount {
  0% { --num: 0; }
  100% { --num: var(--countinspect); }
}

@keyframes progressCount {
  0% { --num: 0; }
  100% { --num: var(--countinspect); }
}

.progress-count::after {
  content: counter(num);
}

.datefilters label {
  font-weight: 600;
  color: #2F4F4F !important;
}

.datefilters a {
  color: #2F4F4F;
  text-decoration: none;
}

.datefilters a:hover {
  color: #323245;
  text-decoration: none;
}

.dashtable {
  background-color: white;
  border-radius: 5px;
  padding: 0.5rem;
}

.card-deck .card:hover {
  box-shadow: 0 0 10px #708090;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.bg-operations {
  background-color: #db7093 !important;
}

.bg-risk {
  background-color: #ff8c00 !important;
}

.bg-one {
  background-color: #31BCD2 !important;
}

.bg-two {
  background-color: #ff8c00 !important;
}

.bg-three {
  background-color: #DDA0DD !important;
}

.bg-four {
  background-color: #F2D1A0 !important;
}

.bg-five {
  background-color: #0096FF !important;
}

.bg-six {
  background-color: #FF7054 !important;
}

.riskitems {
  background-color: white;
  width: 100%;
}

.risks {
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: #94a0b073;
  padding-top: 10px;
  padding-bottom: 10px;
}

.cover-container {
 
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
	background: #1E90FFB4;	/*#dc4682B4*/
}

.product {
  position: relative;
  display: inline-block;
  width: 210px;
  height: 210px;
  box-shadow: 3px 11px 10px 0px rgba(0, 0, 0, .5);
  border-radius: 5px;
  background: #0e0e0f;
  	
  margin-right: 20px;
	color: white;
}

.product .imgbox {
  height: 100%;
  box-sizing: border-box;
  overflow:hidden;
	text-align: center;
	width: 210px;
}

/*
.product .imgbox img {
  display: block;
  max-height: 100%; 	
   margin: 10px auto 0; 
  object-fit: cover;
}
*/
.product .imgbox object {
  		display: block;
  		/* max-height: 100%; */		height: 100%;
  		/* margin: 10px auto 0; */
  		object-fit: cover;
		width: 210px;
}
/*
@mixin commonspec {
  position: absolute;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
*/

.specifies {		/* same as .btncontainer */
  position: absolute;
  width: 100%;
  bottom: -200px;
  background: #fff; 	/* #dcdcdceb */
  padding: 10px;
  box-sizing: border-box;
  transition: .5s
}

.product:hover .specifies {
  bottom: 0;
}

.specifies h2 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  width: 100%;
}

.specifies h2 span {
  font-size: 14px;
  color: rgb(71, 71, 71);
  font-weight: normal;
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
	display: -webkit-box;
  	-webkit-line-clamp: 2;
  	-webkit-box-orient: vertical;  
  	overflow: hidden;
}

.specifies p {
	font-size: 13px;
	color: #708090;
	margin-bottom: 0.3rem;
	flex: 1;
	white-space: nowrap;
  	overflow: hidden;
  	text-overflow: ellipsis;
}


label {
  display: block;
  margin-top: 5px;
  font-weight: bold;
  font-size: 15px
}
/*
.product .chevron {
    bottom: 0px;
    position: absolute;
    right: 5px;
	color: #007bff;
}
*/
/*
.product .btn:focus { 
	outline: none; 
	box-shadow: none;
}
*/

.product .btn:hover { 
	background-color: #1E90FF;
  	color: white;
}

.product .btn {
  /*display: block;*/
  /*padding: 0px 10px;*/
  color: #1E90FF;
  /*width: 100%;*/
  	height: 45px;
  	width: 45px;
  	border-radius: 50%;
	background-color: transparent; 
  	border: 2px solid #1E90FF;
  	text-decoration: none;  
	display: flex;
    	justify-content: center;
    	align-items: center;
	font-size: 1.5rem;
	font-weight: 600;
}

.product .btncontainer { 	/* same as .specifies */
	position: absolute;
  	width: 100%;
  	bottom: 0px;
  	padding: 10px;
  	box-sizing: border-box;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

.datefilterheader .fa {
  transition: .3s transform ease-in-out;
}
.datefilterheader .collapsed .fa {
  transform: rotate(-90deg);
}

.alignleft { float: left; }
.alignright { float: right; }

.btn-excel {
  color: white !important;
  background-color: #1D6F42 !important;
  border-color: #1D6F42 !important;
}

.loader {
  position: fixed; 
  top: 0; 
  left: 0; 
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

.upload {
  background-color: #FFFFFFB3;
}

.download {
  background-color: #FFFFFF;
}

.span-alert-danger::after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 900ms infinite;      
  animation: ellipsis steps(4,end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to { width: 1.25em; }
}

@-webkit-keyframes ellipsis {
  to { width: 1.25em; }
}

p.file-upload {
  line-height: 20px;
  margin: 0;
  padding: 0;
  color: #444;
  font-size: 12px;
}


/*.transparent-back {
  background-color: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}*/


.card-container {
  padding-right: 15px;
  padding-left: 15px;
  /*width: 100%;
  height: 100%;
  display: flex;*/
  perspective: 1000px;
}

.card-flip/*, .card-container*/ {
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
    display: grid; grid-template: 1fr / 1fr;
    grid-template-areas: "frontAndBack";
}

.card-flip div {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.front {
    grid-area: frontAndBack;
  display: flex;

}

.back {
    grid-area: frontAndBack;
    transform: rotateY(-180deg);
  display: flex;

}

.card-flip-toggle:checked ~ * .card-flip {
  transform: rotateY(180deg);
}

.card-flex-flow {
  display: flex;
  flex-flow: column;
}

.card-flex-flow:hover {
  cursor: pointer;
}

.card:hover .circle,
.card:hover .circle-text,
.card:hover .column-bar {
  opacity: 1.0;
  transition-property: var(--customtrans-opacity);
  transition-duration: var(--customtrans-dur);
  transition-timing-function: var(--customtrans-timing-func);
  transition-delay: var(--customtrans-delay);
}

.card:hover h6 {
  fill: var(--texthover);
  transition-property: var(--customtrans-color);
  transition-duration: var(--customtrans-dur);
  transition-timing-function: var(--customtrans-timing-func);
  transition-delay: var(--customtrans-delay);
  color: var(--texthover);
}

/*.card-container:hover .card-flip {
    transform: rotateY(180deg);
}*/

/*
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;

}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-flow: column;
  border-radius: .25rem;
}

.flip-card-front {
  background-color: #fff;
  color: var(--color-danger);
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

.flip-card-content {
  padding: 1.25rem 1.25rem 0;
  flex-grow : 1;
  cursor: pointer;
}

.flip-card-outline {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: .25rem;
}
*/
.front:hover,
.back:hover {
  box-shadow: 0 0 10px #708090;
  transition: box-shadow 0.3s;
}

label { cursor: pointer; }

label:hover .lbl {
  font-weight: bold;
}

.circular-chart {
  width: 55%;
  height: 55%;
  flex-grow : 1;
  align-self: center;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 1;
}

.circle {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.7;
}

.circular-chart.color-danger .circle {
  stroke: var(--color-danger);
}

.circular-chart.color-warning .circle {
  stroke: var(--color-warning);
}

.circular-chart.color-success .circle {
  stroke: var(--color-success);
}

.circle-text {
  /*fill: #696969;*/
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  opacity: 0.8;
}

.circle-text.color-danger {
  fill: var(--color-danger);
}

.circle-text.color-warning {
  fill: var(--color-warning);
}

.circle-text.color-success {
  fill: var(--color-success);
}

.column-chart {
  --scale: 100;
  display: grid;
  /*grid-template-columns: repeat(6, 1fr);*/
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(var(--scale), 1fr) 0rem;
  column-gap: 5px;
  /*grid-row-gap: 3px;*/
  /*width: 100%;*/
  height: 100%;
  /*flex-grow : 1;*/
  /*background: #fff;*/
  padding: 0 5px;
  margin-bottom: 1.25rem;
  --line-every: 10;
  background-image: linear-gradient(to bottom, #DCDCDC 1px, transparent 1px);
  background-size: 100% calc((100% - 0rem) / var(--scale) * var(--line-every));
}

[class*="column"] {
  /*border-radius: 0;*/
  /*transition: all .6s ease;*/
  /*background-color: #EAF6FD;*/
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 2px solid rgba(0, 0, 0, 0.2);
  border-left: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid #9C9C9C;
  grid-row-start: 1;
  box-sizing: border-box;
  grid-row-end: 101;
  text-align: center;
  margin-top: auto;
}

[class*="column"] span{
  position: relative;
  top: -23px;
  /*color: #3DA5EC;*/
  font-size: 1rem;
  /*font-weight: bold;*/
}
/*[class*="column"] label{
  position: absolute;
  width: auto;
  bottom: -23px;
  color: #3DA5EC;
  font-size: 12px;
  font-weight: bold;
  margin: auto;

  left: 0;
  right: 0;
}*/

.lable{
  /*background-color: #212529;*/
  font-weight: bold;
  text-align: center;
  padding: 0 0 1.5rem;
  /*background-clip: content-box;*/
}

.column-bar{
  position: relative;
  opacity: 0.8;
}

.chart-footer-1 {
  grid-row: 100 / 101;
  grid-column: 0 / 1;
}

.chart-footer-2 {
  grid-row: 100 / 101;
  grid-column: 1 / 2;
}

.chart-footer-3 {
  grid-row: 100 / 101;
  grid-column: 2 / 3;
}

.chart-footer-4 {
  grid-row: 100 / 101;
  grid-column: 3 / 4;
}

.chart-footer-5 {
  grid-row: 100 / 101;
  grid-column: 4 / 5;
}

.chart-footer-6 {
  grid-row: 100 / 101;
  grid-column: 5 / 6;
}