.content {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  width:100%;
  height: calc(100vh - 150px);
}

.pie{
	width: 70px;
	height: 70px;
	transform: rotate(-90deg);
	background: #95A5A6;
	border-radius: 50%;
  margin-bottom: 0px;


}
.pietext {
	transform: rotate(90deg);
}
.square {
  width:100%;
  padding-bottom:80%;
  padding-top:20%;
  margin: .75rem 0;
  line-height:normal;
  text-transform: none;
  vertical-align: middle;
}

.square i.large {
  font-size: 6rem;
  line-height:normal;
}

.smallerij {
  margin-bottom: 5px;
}

.aanwezigheidspanel {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  
}

.subtle-shadow {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}

.circle {
	fill: none;
	stroke-width: 32;
}

.small-padding {
  padding-left:10px!important;
  padding-right:10px!important;
}

.groot {
  font-size: large!important;
  font-weight: bold;
}

.groter {
  font-size: x-large!important;
}
.tw-toggle {
  /* background: #95A5A6; */
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 2px 0px;
  margin-left: 0px!important;
  margin-right:0px!important;

  position:relative;

  width:100%

}



.tw-toggle label {
  text-align: center;
  font-family: sans-serif;
  display: inline-block;
  position:relative;
  z-index:2;
  margin: 0;
  text-align: center;
  padding: 4px 8px;
  font-size: large;
  transition: background-color 1s;
  /* cursor: pointer; */
}

.tw-toggle .aanwezig {
	color: #28a745;
}

.tw-toggle .aanwezig:checked {
  color: white;
  background-color:#28a745;
}

.tw-toggle .afwezig {
	color: #dc3545;
}

.tw-toggle .afwezig:checked {
  color: white;
  background-color: #dc3545;
}

.tw-toggle .onbekend {
	color:#95A5A6;
}

.tw-toggle .onbekend:checked {
  color: #fff;
  background-color: #95A5A6;
}

.tw-toggle input {
  /* display: none; */
  position: absolute;
  z-index: 3;
  /* opacity: 0; */
  cursor: pointer;
	pointer-events: all!important;
	height: 18px;
	width: inherit;
}

.tw-toggle input[value="1"]:checked + label{
  color:#fff;
  background-color: #28a745;
  border-radius: 5px;
}

.tw-toggle input[value="-1"]:checked + label{
  color:#fff;
  background-color: #dc3545;
  border-radius: 5px;
}


.tw-toggle input[value="0"]:checked + label{
  color: #fff;
  background-color:#95A5A6;
  border-radius: 5px;
}

.dnaanwezig {
  background: #28a745;
  color: #fff;
}
.dnafwezig {
  background: #dc3545;
  color: #fff;
}

.dnonbekend{
  background: #cfd8dc;
  color: #000;
}

span.badge {
  margin-left: 0px!important;
}


@keyframes spin{
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.spinner {
  opacity: 0.5;
	animation: spin 2s linear infinite;
}

.activityplus {
  border: 4px gray dashed;
  color: gray;
  width: 100%;
}

.scrollup {
  position: fixed;
  right: -40px;
  bottom: 100px;
  width: 40px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color:#e65100;
  color: white;
  padding-left:10px;
  z-index: 100;
  transition: right .5s;
}

.btn {
  width: 100%;
  text-align: center;
  border: none;
}
.btn .save {
  color: darkblue;
}
.btn .cancel {
  color: gray;
}

.btn-block {
  width:100%;
}

.installbutton {
	position:fixed;
	bottom:0px;
	z-index: 3;
}

.installtext {
	padding: 8px;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin: auto;
  border-top: 20px solid #ffca28 ;
}

.updatebutton, .sidebar {
	bottom:80px;
	display:none;
	width:100%;
	position: fixed; 
  border:0;
  z-index:999;
}


.header {
  border-bottom: 1px solid grey;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Secular One", sans-serif;
}

.verlopen {
  filter:grayscale(.8);
  opacity:50%;
}

.switch {
  padding-top: 10px;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: 2px solid #e65100 ;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: #dc3545;
}

[type="checkbox"].filled-in:checked + span:not(.lever):after{
  border: 2px solid black;
  background-color: #e65100 ;
}

.switch label input[type="checkbox"]:checked + .lever {
  background-color: #dc3545; 
}
.switch label input[type="checkbox"]:checked + .lever:after {
  background-color: #e65100 ;
}

.groen {
  background-color: #28a745!important;
}

.groen-text {
  color: #28a745;
}

.rood {
  background-color: #dc3545!important;
}

.rood-text {
  color: #dc3545
}

.oranje {
  background-color: #e65100 !important;
}

.oranje-gradient {
  background: linear-gradient(180deg, #e65100 0%, #ffCa28 150%);
}

.oranje-text {
  color: #e65100 ;
}

.geel {
  background-color: #ffca28!important;
}

.geel-text {
  color: #ffca28;
}
textarea.materialize-textarea:disabled {
  color: black;
  border:0;
  opacity:1!important;
}

.input-field input:focus, .input-field textarea:focus {
  border-bottom: 2px solid #e65100 !important;
  box-shadow: 0 1px 0 0 #e65100 !important;
} 


.cropped {
  width: 75px;
  height: 75px;
  overflow: hidden;
  margin-top:10px;
  margin-bottom:10px;
}
.cropped image {
  margin: -75px 0px 0px -75px;
}