@charset "utf-8";

@font-face {
font-family: 'Helvetica Neue Light';
font-style: normal;
font-weight: normal;
src: local('../fonts/Helvetica Neue Light.woff'), url('../fonts/HelveticaNeueLight.woff') format('woff');
}

@font-face {
font-family: 'Helvetica Neue';
font-style: normal;
font-weight: normal;
src: local('../fonts/helvetica-neue-light.woff2'), url('../fonts/helvetica-neue-light.woff2') format('woff');
}

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/sanspro/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
       url('../fonts/sanspro/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/sanspro/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/sanspro/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/sanspro/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/sanspro/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}


header {
font-family: candara, sans-serif;
background-color: rgba(255,255,255,0.95);	
z-index: 60;	
	}

body{	
  margin:0;
  color:#515151;
  font-family: 'Source Sans Pro';
  font-size: 16px;
  width: 100%;
height: 100%;
min-height: 700px;	
position: absolute;
/*background: url(../img/cpr.jpg) no-repeat fixed top;*/
background: #fff;
background-size: cover;
}

.wrapper {
background-color: rgba(245,125,23,0.30);	
position: relative;
width: 70%;
min-width: 1350px;
min-height: 650px;
height: 85vh;
margin: 10vh auto;	
border: 3px solid #f57f17;

	}

.group label {
margin: 0 0 10px 0 !important;	
	}
	
.group .button {
margin: 35px 0 0 0 !important;	
	}	

*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}

.errormessage, .errormessage2 {
color: #cc3300;
width: 100%;
font-size: 20px;
text-align: center;
background: rgba(255,255,255,0.8);
padding: 25px;
border: 1px solid #000;	
border-radius: 5px;
display: none;
	}

.login-wrap{
  width:100%;
  margin:auto;
  margin-top: 100px;
  max-width:525px;
  min-height:700px;
  position:relative;
  /*background:url(../img/cpr.jpg) no-repeat center; */
  background: #fff;
  background-size: cover;
  box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
  width:100%;
  height:100%;
  position:absolute;
  padding:90px 70px 50px 70px;
  background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  -webkit-transform:rotateY(180deg);
          transform:rotateY(180deg);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
  display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
  text-transform:uppercase;
}
.login-html .tab{
  font-size:22px;
  margin-right:15px;
  padding-bottom:5px;
  margin:0 15px 10px 0;
  display:inline-block;
  border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
  color:#fff;
  border-color:#1161ee;
}
.login-form{
  min-height:365px;
  position:relative;
  -webkit-perspective:1000px;
          perspective:1000px;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
}
.login-form .group{
  margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
  width:100%;
  color:#fff;
  display:block;
}
.login-form .group .input,
.login-form .group .button{
  border:none;
  padding:15px 20px;
  border-radius:25px;
  background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
  text-security:circle;
  -webkit-text-security:circle;
}
.login-form .group .label{
  color:#aaa;
  font-size:12px;
}
.login-form .group .button{
  background:#1161ee;
}
.login-form .group label .icon{
  width:15px;
  height:15px;
  border-radius:2px;
  position:relative;
  display:inline-block;
  background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
  content:'';
  width:10px;
  height:2px;
  background:#fff;
  position:absolute;
  transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
  left:3px;
  width:5px;
  bottom:6px;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
  top:6px;
  right:0;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
  color:#fff;
}
.login-form .group .check:checked + label .icon{
  background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
  -webkit-transform:scale(1) rotate(45deg);
          transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
  -webkit-transform:scale(1) rotate(-45deg);
          transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}


.hr{
  height:2px;
  margin:60px 0 50px 0;
  background:rgba(255,255,255,.2);
}
.foot-lnk{
  text-align:center;
}/* CSS Document */

.topbar {	
position: relative;
text-align: center;
margin: 2% auto;
height: 40px;
	}
		

.topbar div {
display: inline-block;	
vertical-align: top;	
	}	
	
button {
	font-family: Helvetica, sans-serif;
	text-align:center;
	margin: 0 0 0 0;
	padding: 8px 20px 20px 20px;
	display:block;
	height:42px;
	width:175px;
	cursor:pointer;
	font-size:20px;
	color:#000;
	border-radius:10px;
	border-bottom:4px solid #ab5407;
	box-shadow: 6px 6px 6px #999;
	
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	
	background: -webkit-linear-gradient(#f9ae6c, #f57f17);
    background: -o-linear-gradient(#f9ae6c, #f57f17);
    background: -moz-linear-gradient(#f9ae6c, #f57f17);
    background: linear-gradient(#f9ae6c, #f57f17);
	
	-webkit-transition: background 0.05s linear;  
    -moz-transition: background 0.05s linear;  
    -o-transition: background 0.05s linear;  
    transition: background 0.05s linear;
	background-size:1px 200px;
	transition: all .05s linear;
}

button img {
	float: left;
	display: inline-block;
	margin: -2px 5px 0 0;
	}

button:hover{
	background-position:100px;
}

button:active, #sehtestcancel:active {
	box-shadow: 2px 2px 2px #777;
	border-bottom:1px solid #0045A6;
	transform: translateY(3px);
}	

.sehtestbutton {
vertical-align: top;
margin: 0 0 0 10px !important;	
	}		
	
.idbutton button {
box-shadow: none;	
cursor: unset;
border-bottom:1px solid #ab5407;
pointer-events: none;
	}	
	
.passbildbutton {
vertical-align: top;
margin: 0 35px 0 10px !important;	
	}
	
#sehtestspeichern {
color: #fff;
background: linear-gradient(rgb(0, 153, 51), rgb(0, 128, 43));
background-size: 1px 200px !important;
border-bottom: 4px solid #006622;
margin-right: 30px;	
	}	
	
#sehtestspeichern:hover {
background-position: 100px !important;	
	}	
	
#sehtestcancel {	
color: #fff;
background-size: 1px 200px !important;
background: linear-gradient(#ff531a, #b32d00);
border-bottom: 4px solid #992600;
	}		
	
#sehtestcancel:hover {
	background-position: 100px !important;
	}	
	
.title {
line-height:0.9;
color: #000;	
position: relative;
width: 35%;
font-size: 2em;
display: block;
text-align: center;
margin: 0 auto;	
height: 70px;
	}
	
.table {
position: relative;		
clear: both;	
width: 95%;	
display: block;	
margin: 0 auto;
font-size: 0.9em;
overflow: auto;
height: calc(150px + 37vh);
transition: all 0.8s;
border: 2px solid #000;
	}	

.table2 {
position: relative;		
clear: both;	
width: 95%;	
display: block;	
margin: 0 auto;
font-size: 0.9em;
overflow-x: hidden;
overflow-y: auto;
height: 58vh;
	}	

.table3 {
height: 65vh	
	}	

.table table {
width: 100%;
border-collapse: collapse;
border-bottom: 2px solid #000;
box-shadow: 0px 0px 10px #808080;
	}	
	
.table2 table {
width: 100%;
border-collapse: collapse;
border-bottom: 2px solid #000;
box-shadow: 0px 0px 10px #808080;
	}		
	
thead tr th {
background-color: #fff;
color: #000;	
font-size: 1.2em;
box-shadow: 0px 0px 0px 1px #000 inset;	
	}

		
.table tbody{
height: 45vh;
overflow-y: auto;
width: 100%;
font-size: 1.1em;
	}
	
.table2 tbody tr{
font-size: 18px;
height: 2em;
	}			

.table2 thead tr {
height: 3em;
	}
th {
  	text-align: left;
    padding: .3rem 2rem .3rem .4rem;
	border-bottom: 1px solid #000;	
	}

td {
  text-align: left;
  padding: .2rem 1rem .2rem .4rem;
  border-bottom: 1px dotted #808080;
}

tr:nth-child(even) {
background-color: rgba(200,200,200, 0.6);	
	}

thead th:hover,
tbody tr:hover {
  background-color: rgba(245,126,23,0.7);
  color: #000;
}

.underedit {
background-color: rgba(245,245,0,0.5) !important;
color: #000 !important;  
}

.future {
border: 5px solid #000;
}

.future td {
  background-color: rgba(245,126,23,0.5);
  color: #000;
}


.responsive {
  max-width: 100%;
  max-height: 98vh;
  overflow: auto;
}

.sorting,
.sorting_asc,
.sorting_desc {
  cursor: pointer;
}

.sorting {
  background-image: url('../img/updown.png');
  background-position: right .8rem center;
  background-repeat: no-repeat;
}

.table1 .sorting:nth-of-type(1) {
width: 60px !important;	
	}
	
.table1 .sorting:nth-of-type(4) {
width: 60px !important;	
	}
	
.table1 .sorting:nth-of-type(5) {
width: 80px !important;	
	}	
	
.table1 .sorting:nth-of-type(6) {
width: 50px !important;	
	}	
	
.table1 .sorting:nth-of-type(7) {
width: 80px !important;	
	}	
		
.table1 .sorting:nth-of-type(9), .table1 .sorting:nth-of-type(10), .sorting:nth-of-type(11) {
width: 66px !important;	
	}
	

.table1 .sorting:nth-of-type(11) {
width: 75px !important;	
	}	
	

.sorting_asc {
  background-image: url('../img/up.png');
}

.sorting_desc {
  background-image: url('../img/down.png');
}	

.table1 tbody tr td:nth-of-type(4), .table1 tbody tr td:nth-of-type(5), .table1 tbody tr td:nth-of-type(7), .table1 tbody tr td:nth-of-type(9), .table1 tbody tr td:nth-of-type(10), .table1 tbody tr td:nth-of-type(11), .table1 tbody tr td:nth-of-type(12){
	text-align: center;
	}
	
	
.underbar2 {
text-align: center;	
position: relative;
margin: 0 auto 40px;
width:90%;	
height: 120px;
	}
	
 .underbar {
 margin: 0 0 0.5em 0;  
 } 
.underbar2 div {
display: inline-block;	
	}

.anmeldungsbar {	
border-top: 2px solid #000;
width: 95%;
height: 6em;
margin: 0 auto; 
padding-top: 0.5em;

}



.anmeldungsbar div {
display: inline-block;

}

.anmeldungsbar input[type="text"], .anmeldungsbar input[type="email"], .anmeldungsbar input[type="date"] {
  padding: 3px 0 0 5px;
  font-size: 16px; 
  height: 35px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  outline: none;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
}
.anmeldungsbar input[type="text"]:hover, .anmeldungsbar input[type="email"]:hover, .anmeldungsbar input[type="date"]:hover {
  background: #fafafa;
}
.anmeldungsbar input[type="text"]:focus, .anmeldungsbar input[type="email"]:focus, .anmeldungsbar input[type="date"]:focus {
  -webkit-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
  -moz-box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
  box-shadow: 0 0 2px 1px rgba(255, 169, 0, 0.5);
  border: 1px solid #f57f17;
  background: #fafafa;
}	

	
.anmeldungsbar input[type="radio"] {
width: 1.6em;
height: 1.6em;
margin: 0 0 0px 0;
	}	

.anmeldungsbar input {
margin: 0 1.4em 1em 0;	
	}	

#day {
width: 35px;
margin: 0;	
}

#month {
width: 40px;
margin: 0;	
	}
#year {
width: 55px;
	}	

#hausnr {
width: 60px;	
	}	
#plz {
width: 75px;	
	}	
	
#speichern, .speichern {
	color: #fff !important;
	text-shadow: 0px 0px 5px #808080 !important;
	background: -webkit-linear-gradient(#009933, #00802b) !important;
    background: -o-linear-gradient(#009933, #00802b) !important;
    background: -moz-linear-gradient(#009933, #00802b) !important;
    background: linear-gradient(#009933, #00802b) !important;
	border-bottom:4px solid #006622 !important;
	
	-webkit-transition: background 0.05s linear !important;  
    -moz-transition: background 0.05s linear !important;  
    -o-transition: background 0.05s linear !important;  
    transition: background 0.05s linear !important;
	background-size:1px 200px !important;
	transition: all .05s linear !important;	
	}	

	
#speichern:hover, .speichern:hover {
background-position:100px !important;	
	}	
	
#abbrechen, .abbrechen {
	color: #fff !important ;
	text-shadow: 0px 0px 5px #808080 !important ;
	background: -webkit-linear-gradient(#ff531a, #b32d00) !important ;
    background: -o-linear-gradient(#ff531a, #b32d00) !important ;
    background: -moz-linear-gradient(#ff531a, #b32d00) !important ;
    background: linear-gradient(#ff531a, #b32d00) !important ;
	border-bottom:4px solid #992600 !important ;
	
	-webkit-transition: background 0.05s linear !important ;  
    -moz-transition: background 0.05s linear !important ;  
    -o-transition: background 0.05s linear !important ;  
    transition: background 0.05s linear !important ;
	background-size:1px 200px !important ;
	transition: all .05s linear !important ;	
	}	
	
#abbrechen:hover, .abbrechen {
background-position:500px !important ;	
	}	
	
#anwesend, #bezahlt, #sehtest, #passbilder {
width: 20px;
height: 20px	
	}	
	
.radio_option input {
zoom: 1.8	
	}
	
.checkboxes {
float: right;
display: block;
margin: -92px 180px 0 0;
max-height: 40px;
	}
	
.leistungcheckboxes {
float: right;
display: block;
margin: 0 0 0 0;
max-height: 40px;
	}		
	
.passbildextras {
text-align: right;
margin: 0 -20px 0 50px;
	}	
	
.checkboxes input, .leistungcheckboxes input {
zoom: 1.5;
	}	

#anmeldungsbar {
transition: all 0.5s;
display: none;
opacity: 0;
}

/* SPINNING DOTS */ 

/* Loading Bar */ 
.loading {
position: absolute;
background-color: rgba(128, 128, 128, 0.6);
width: 100%;
left: 0;
top: 0;
height: 100%;
display: block;  
  }
.container3 {
  margin: 200px 20px 20px 20px;
  width: calc(100% - 40px);
  height: auto;
  font-size: 18px;
  text-align: center;
  line-height: 3.0;
}

.loadingtext {
  font-size: 25px;
font-weight: bold;
  position: absolute;
width: 280px;
left: -15%;
top: 180px;
color: #000;
z-index: 1000;
opacity: 1; 
  }

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color .2s ease-out;
}

.loading-anim {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
  perspective: 800px;
  transform-style: preserve-3d;
  transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
  opacity: 0;
  transition: all .2s ease-out;
}
.loading-anim .circle {
  width: 100%;
  height: 100%;
  animation: spin 5s linear infinite;
}
.loading-anim .border {
  position: absolute;
  border-radius: 50%;
  border: 3px solid #f57f17;
}
.loading-anim .out {
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 2s linear reverse infinite;
}
.loading-anim .in {
  top: 18%;
  left: 18%;
  width: 64%;
  height: 64%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: spin 2s linear infinite;
}
.loading-anim .mid {
  top: 40%;
  left: 40%;
  width: 20%;
  height: 20%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: spin 1s linear infinite;
}

.loading .loading-anim {
  transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
  opacity: 1;
}

.loading .loading-overlay {
  background: rgba(255, 255, 255, 0.5);
}

.dot {
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f57f17;
  animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
}

.dot:nth-child(1) {
  top: 90px;
  left: 180px;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  top: 135px;
  left: 168px;
  animation-delay: 0.41667s;
}

.dot:nth-child(3) {
  top: 168px;
  left: 135px;
  animation-delay: 0.83333s;
}

.dot:nth-child(4) {
  top: 180px;
  left: 90px;
  animation-delay: 1.25s;
}

.dot:nth-child(5) {
  top: 168px;
  left: 45px;
  animation-delay: 1.66667s;
}

.dot:nth-child(6) {
  top: 135px;
  left: 12px;
  animation-delay: 2.08333s;
}

.dot:nth-child(7) {
  top: 90px;
  left: 0px;
  animation-delay: 2.5s;
}

.dot:nth-child(8) {
  top: 45px;
  left: 12px;
  animation-delay: 2.91667s;
}

.dot:nth-child(9) {
  top: 12px;
  left: 45px;
  animation-delay: 3.33333s;
}

.dot:nth-child(10) {
  top: 0px;
  left: 90px;
  animation-delay: 3.75s;
}

.dot:nth-child(11) {
  top: 12px;
  left: 135px;
  animation-delay: 4.16667s;
}

.dot:nth-child(12) {
  top: 45px;
  left: 168px;
  animation-delay: 4.58333s;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes jitter {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 0.7);
  }
  50% {
    transform: scale(1, 1);
  }
  75% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes fade-in-out {
  0% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
  }
}

img {
z-index: 10;
}

.dimscreen {
position: absolute;
left:0;
top: 0;  
z-index: 50;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
transition: all 0.5s;
display: none;
}

.deletevalidation {width: 27%; margin-left: 16em;}


.dimscreen2 {
position: absolute;
left:0;
top: 0;  
z-index: 50;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
transition: all 0.5s;
display: none;
}

.dimscreen3 {
position: absolute;
left:0;
top: 0;  
z-index: 50;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
transition: all 0.5s;
display: none;
}

.dimscreensehtest {
position: absolute;
left:0;
top: 0;  
z-index: 50;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
transition: all 0.5s;
display: none;
}


.hiddenmitteilung {
display: none;
}

.container {
width: 40% ;
height: 45%;
margin: 15% auto;
}

.modalbox.success,
.modalbox.error {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  padding: 25px 25px 35px;
  text-align: center;
}
.modalbox.success.animate .icon,
.modalbox.error.animate .icon {
  -webkit-animation: fall-in 0.75s;
  -moz-animation: fall-in 0.75s;
  -o-animation: fall-in 0.75s;
  animation: fall-in 0.75s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.modalbox.success h1,
.modalbox.error h1 {
  font-family: 'Montserrat', sans-serif;
}
.modalbox.success p,
.modalbox.error p {
  font-family: 'Open Sans', sans-serif;
}
.modalbox.success button,
.modalbox.error button,
.modalbox.success button:active,
.modalbox.error button:active,
.modalbox.success button:focus,
.modalbox.error button:focus {
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  margin: 15px 0 0 0;
  width: 42%;
  background: transparent;
  color: #4caf50;
  border-color: #4caf50;
  outline: none;
  display: inline-block;
  font-size: 1.1em;
}
.modalbox.success button:hover,
.modalbox.error button:hover,
.modalbox.success button:active:hover,
.modalbox.error button:active:hover,
.modalbox.success button:focus:hover,
.modalbox.error button:focus:hover {
  color: #fff;
  background: #4caf50;
  border-color: transparent;
}
.modalbox.success .icon,
.modalbox.error .icon {
  position: relative;
  margin: 0 auto;
  margin-top: -75px;
  background: #4caf50;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.modalbox.success .icon span,
.modalbox.error .icon span {
  postion: absolute;
  font-size: 4em;
  color: #fff;
  text-align: center;
  padding-top: 20px;
}
.modalbox.error button, .buttonerror,
.modalbox.error button:active, .buttonerror:active, 
.modalbox.error button:focus, .buttonerror:focus {
  color: #f44336 !important;
  border-color: #f44336 !important;
}
.modalbox.error button:hover, .buttonerror:hover, 
.modalbox.error button:active:hover, .buttonerror:active:hover,
.modalbox.error button:focus:hover, .buttonerror:focus:hover {
  color: #fff !important;
  background: #f44336 !important;
}
.modalbox.error .icon {
  background: #f44336;
}
.modalbox.error .icon span {
  padding-top: 25px;
}
.center {
  float: none;
  margin-left: auto;
  margin-right: auto;
/* stupid browser compat. smh */
}
.center .change {
  clearn: both;
  display: block;
  font-size: 10px;
  color: #ccc;
  margin-top: 10px;
}
@-webkit-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-o-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-webkit-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 25%;
  }
}
@-moz-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 25%;
  }
}
@-o-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 25%;
  }
}
@-moz-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-webkit-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-o-keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes fall-in {
  0% {
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    transform: scale(3, 3);
    opacity: 0;
  }
  50% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
  60% {
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  100% {
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 15%;
  }
}
@-webkit-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 15%;
  }
}
@-o-keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 15%;
  }
}
@keyframes plunge {
  0% {
    margin-top: -100%;
  }
  100% {
    margin-top: 15%;
  }
}


.deleted {
text-decoration: line-through;
background-color: rgba(255,0,0,0.3) !important;
cursor: not-allowed !important;
}

.referred {
background-color: rgba(0,255,0,0.2) !important;
}

.referredandpresent {
background-color: rgba(0,255,0,0.4) !important;

}


.tooltip1, .tooltip2 {
 cursor: not-allowed; 
}
  
.tooltiptext1, .tooltiptext2 {
visibility: hidden; 
position: absolute;
z-index: 1;
border-radius: 12px;
text-align: center;
background-color: #f57f17;
color: #fff;
padding: 4px;
border: 1px solid #000;
margin: -102px 0 0 -205px;
max-width: 220px;
font-size: 14px;
opacity: 0;
transition: 0.5s;
  } 

  .tooltip1:hover + .tooltiptext1, .tooltip2:hover + .tooltiptext2 {
  visibility: visible;
  opacity: 1; 
    } 
    
  .tooltiptext1::after, .tooltiptext2::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  right: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}