.progress-container {
            display: inline-block;
            margin: 1vw;
            background-color:#ccc;
            padding:1.5vw;
            border-radius:2vw;
        }
        .donut {
            width: 6vw;
            /*height: 100px;*/
        }
        .donut-circle-bg {
            fill: none;
            stroke: #eee;
            stroke-width: 2vw;
        }
        .donut-circle {
            fill: none;
            /*stroke: #4caf50;*/
            stroke: #8c0000;
            stroke-width: 2vw;
            stroke-dasharray: 0 100;
            transition: stroke-dasharray 0.3s;
        }

.buttonBackgroundColour { color:#F2F2F2 }
.secondButtonBackgroundColour { background-color:#1A77CC }
.custMainColour { color:#333333 }
.custSecondaryColour { color:#6FCF97 }
.custBackgroundColour { background-color:#2D3239 }

.hml-xsmall	{ font-size:2vw }
.hml-vsmall	{ font-size:3vw }
.hml-small	{ font-size:4vw }
.hml-medium	{ font-size:5vw }
.hml-large	{ font-size:6vw }
.hml-between	{ font-size:8vw }
.hml-vlarge	{ font-size:10vw }
.hml-xlarge	{ font-size:13vw }

.hml-bold { font-weight:300 }

.hml-blue { color:#007AFF }
.hml-red { color:#C83F3F }
.hml-yellow { color:#EAB52F }

.hml-bg-red { background-color:#C83F3F }
.hml-bg-blue { background-color:#007AFF }

.hml-btnLink { background-color:#F2F2F2; color:#111111 }
.hml-btnActive { background-color:#1A77CC; color:#eeeeee }

.fa-stack.small {
  font-size: 8vw;
}

#searchMembersInput {
/*  background-image: url('/images/searchicon.png'); /* Add a search icon to input */
/*  background-position: 10px 12px; /* Position the search icon */
/*  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 4vw; /* Increase font-size */
  padding: 1vw 2vw 1vw 7vw; /* Add some padding */
/*  border: 1px solid #ddd; /* Add a grey border */
	border-radius:2vw;
  margin-bottom: 12px; /* Add some space below the input */
}

.roundBadge {
    width: 5vw;
    line-height: 5vw;
    border-radius: 50%;
    text-align: center;
}
.rectangleButton {
  /*width:25vw;
  height:calc(10vw  * 0.85);*/
  /*background-color:#F2F2F2;*/
  /*border:2px solid #333333;*/
  border-radius:2vw;
  /*font-size:4vw;*/
  padding-top:1vw;
  padding-bottom:1vw;
  padding-left:3vw;
  padding-right:3vw;
  color:#333333;
  /*box-shadow: 0vw 1vw 1vw 0vw rgba(0, 0, 0, 0.3);*/
  box-shadow: 0vw 1vw 1vw 0vw rgba(0, 0, 0, 0.5), 1vw 1vw 4vw 0vw rgba(0, 0, 0, 0.25) inset;
}
.rectangleButtonSpacer {
 	font-size:4vw;
  width:10vw; 
}
.squareButton {
  aspect-ratio: 1/1;
  width:28vw;
  /*height:calc(26vw * 0.85);*/
  margin:1.3vw;
  padding:4vw 0 0 0;
  background-color:#F2F2F2;
  /*border: 2px solid #333333;*/
  border-radius:5vw;
  /*font-size:calc(70vw / 7);*/
  color:#333333;
  box-shadow: 0vw 1vw 1vw 0vw rgba(0, 0, 0, 0.5), 1vw 1vw 4vw 0vw rgba(0, 0, 0, 0.25) inset;
}

.squareButtonSpacer {
 	width:5vw; 
}

.switch {
  position: relative;
  display: inline-block;
  width: 10vw;
  height: 6vw;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 5vw;
  width: 5vw;
  left: 0.5vw;
  bottom: 0.5vw;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #6FCF97;
}

input:focus + .slider {
  box-shadow: 0 0 1px #6FCF97;
}

input:checked + .slider:before {
  -webkit-transform: translateX(4vw);
  -ms-transform: translateX(4vw);
  transform: translateX(4vw);
}

/* Rounded sliders */
.slider.round {
  border-radius: 3vw;
}

.slider.round:before {
  border-radius: 50%;
}

.accordion {
  /*background-color: #333333;
  color: #444;
  cursor: pointer;
 /* padding: 18px;*/
 /* width: 100%;
  border: none;
  border-radius: 0px 0px 15px 15px;
  text-align: center;
  outline: none;
  /*font-size: 25px;*/
  transition: 0.4s;
}

.accordion:after {
  /*content: '\02c5';*/
  color: #fff;
  font-weight: bold;
  margin-left: 5px;
}
.active:after {
  /*content: "\02c4";*/
}
.panel {
  /*padding: 0 18px;
  background-color: white;*/
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.sectionNames {
	font-size:40%;
  padding-top:2vw; 
  color:#FFF; 
  float:left  
}

.infoBar {
	color:#6FCF97;
  font-size:2vw;  
  margin:0vw 0vw 1vw 0vw;
}
.tileTitle {
  font-size:3.5vw;
  margin:0px;
}
.tileIcon {
  font-size:12vw;
  margin-top:2vw;
  /*text-shadow: 0vw 1vw 1vw rgba(0, 0, 0, 0.3);*/
}

/*---------------------*/
div.scrollmenu {
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu::-webkit-scrollbar {
  /*display: none;*/
}
div.scrollmenu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}