/* CSS Document */

/*colors*/

h2 {
    font-weight: bold;
    color: #da2b1b;
}


.bg-gradient-primary {
    background-color: #da291c!important;
    background-image: linear-gradient(
180deg
,#da291c 10%,#da291c 100%)!important;
    background-size: cover!important;
}

.text-primary {
    color: #d41f1f!important;
}

.btn-primary {
    color: #fff;
    background-color: #d41f1f;
    border-color: #d41f1f;
}

/*spacing etc*/
#wrapper #content-wrapper #content {
    flex: 1 0 auto;
   padding-top: .5rem;
	    background-color: #cecece;
}

footer.sticky-footer {
background:transparent!important;
 padding: 1rem 0;   
}

/*branding*/
img.toplogo {max-width:100px; width:100%; height:auto; display:block; margin:auto;}
.sidebar .sidebar-brand {
    height: auto;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    z-index: 1;
}

/*diagram*/

div.stadium >img {    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 83vh;
    margin-bottom: 20px;}

table.statsgrid {
	    position: absolute;
    top: 0;
    z-index: 2;
    height: 100%;	
}
table.statsgrid > tbody > tr td {width:33%;}

table.statsgrid > tbody > tr {width:33%;}

.bubble {
	background-color: rgba(102, 102, 102, 0.82);
    display: inline-block;
    padding: 1rem;
    width: 100px;
	opacity:0.8;
    height: 100px;
    color: #ffffff;
    font-weight: 700;
    font-size: 38px;
    border-radius: 50%;}
.bubble::after {content:'%'; position:relative; width:60px; height:50px; border-radius:50%; font-size:14px; top:-30px; padding:7px 10px; background:#333333; color:#f5f5f5; font-size:20px; right:0; z-index: 3;}

.people {
	margin-top: -32px;
    background: white;
    display: block;
    width: fit-content;
    padding: 0.35rem 1rem;
    overflow: hidden;
    font-size: 1.5vw;
    border-radius: 1.5rem;
    z-index: 4;
    position: relative;
    top: 20px;
    background-color: #ffffff!important;
        color: #3e4465;
    border: none;
    box-shadow: 2px 2px 5px 0px #666666;
}

/*alert classes*/
.red {background:red!important; color:#ffffff;}

.green {background:green!important; color:#ffffff;}

.amber {    background: #ff9800!important; color:#000000;}

/*some basic responsiveness for small screens*/
@media only screen and (min-width: 1567px) {
.people {
	font-size: 1vw!important;}


}




@media only screen and (max-width: 967px) {
  .bubble {

    display: inline-block!important;
    padding: 0.5rem!important;
    width: 52px!important;
    opacity: 0.8!important;
    height: 50px!important;
    color: #ffffff!important;
    font-weight: 700!important;
    font-size: 20px!important;
    border-radius: 50%!important;
}

.people {
    background: white;
    margin-top: -20px!important;
    display: block!important;
    width: fit-content!important;
    padding: 0.35rem 1rem!important;
    overflow: hidden!important;
    font-size: 1.5vw!important;
    border-radius: 1.5rem!important;
    z-index: 4!important;
    position: relative!important;
    top: 20px!important;
    background-color: #ffffff!important;
    color: #3e4465!important;
    border: none!important;
    box-shadow: 2px 2px 5px 0px #666666!important;
}
	div.flowtime { font-size: 1.25vw!important;
	text-align: center;
	}


.bubble::after {
    content: '%'!important;
    position: relative!important;
    width: 35px!important;
    height: 37px!important;
    border-radius: 50%!important;
    font-size: 13px!important;
    top: -14px!important;
    padding: 5px 7px!important;
    background: #333333!important;
    color: #f5f5f5!important;
    font-size: 20px!important;
    right: -1px!important;
    z-index: 3!important;
}


}

.table td, .table th {
    padding: .25rem;
    vertical-align: top;
    border-top: 1px solid #e3e6f0;
}
.h5, h5 {
    font-size: 1rem;
    line-height: 147%;
}

/*flow rate bollocks*/