#terminvereinbarung {
position: relative;
width: 70%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1000px) {
#terminvereinbarung {
width: 100%;
}
}
#terminvereinbarung .selectize-input {
font-size: 1rem;
}
#terminvereinbarung .monat {
border-radius: 5px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
margin-top: 2rem;
}
#terminvereinbarung .monat thead.monat-beschriftung {
background-color: #47734f;
color: white;
}
#terminvereinbarung .monat thead.monat-beschriftung th {
font-size: 2rem;
font-weight: 500;
padding: 1.5rem 0.75rem;
border: none;
}
#terminvereinbarung .monat thead.monat-beschriftung th img {
height: 2rem;
}
#terminvereinbarung .monat thead.monat-beschriftung th.next img {
transform: rotate(180deg);
}
#terminvereinbarung .monat thead.monat-beschriftung th.next, #terminvereinbarung .monat thead.monat-beschriftung th.previous {
cursor: pointer;
}
@media screen and (max-width: 500px) {
#terminvereinbarung .monat thead.monat-beschriftung th {
font-size: 1.25rem;
}
#terminvereinbarung .monat thead.monat-beschriftung img {
height: 1.25rem;
}
}
#terminvereinbarung .monat thead.weekdays * {
border: none;
}
#terminvereinbarung .monat thead.weekdays th {
color: #47734f;
}
#terminvereinbarung .monat tbody tr td {
pointer-events: none;
background-color: #f1f1f1;
color: #afafaf;
border: 0;
}
#terminvereinbarung .monat tbody tr td.offen {
background-color: white;
cursor: pointer;
pointer-events: auto;
color: #1b1e21;
}
#terminvereinbarung .monat tbody tr td.today {
background-color: rgba(71, 115, 79, 0.4);
color: #1b1e21;
pointer-events: none;
}
#terminvereinbarung .monat tbody tr td.selected {
background-color: #47734f;
color: white;
}
@media screen and (max-width: 420px) {
#terminvereinbarung .monat {
font-size: 0.7rem;
width: 90%;
margin-left: auto;
margin-right: auto;
}
#terminvereinbarung .monat thead.monat-beschriftung th {
font-size: 1rem;
}
#terminvereinbarung .monat thead.monat-beschriftung th img {
height: 1rem;
}
}
#terminvereinbarung .ende {
margin-top: 2rem;
}
#terminvereinbarung .ende h2 {
text-align: left;
}
#terminvereinbarung .ende .anmeldung-termin input[type=submit] {
margin-top: 15px;
padding: 5px 15px;
background-color: #cebd85;
color: white;
border-radius: 5px;
border: none;
transition: 0.2s ease-in-out;
cursor: pointer;
}
#terminvereinbarung .ende .anmeldung-termin input[type=submit]:hover {
background-color: #47734f;
}
#terminvereinbarung .form-group {
position: relative;
padding-top: 0.75rem;
margin-bottom: 1rem;
display: block;
}
#terminvereinbarung .form-group .label {
position: absolute;
top: 0;
font-size: 0.75rem;
transition: 0.3s ease;
}
#terminvereinbarung .form-group .input {
border: none;
background: none;
outline: none;
padding: 0.25rem;
width: 100%;
}
#terminvereinbarung .form-group::before, #terminvereinbarung .form-group:after {
position: absolute;
content: "";
left: 0;
width: 100%;
bottom: 0;
height: 2px;
display: block;
background-color: rgba(206, 189, 133, 0.2);
}
#terminvereinbarung .form-group::after {
transition: 0.3s ease;
background-color: #cebd85;
}
#terminvereinbarung .form-group.empty .label {
top: 0.75rem;
font-size: 1rem;
}
#terminvereinbarung .form-group.empty::after {
width: 0;
}
#terminvereinbarung .message {
padding: 1rem 0;
}
#dayview .blocks {
display: flex;
flex-wrap: wrap;
cursor: pointer;
}
#dayview .blocks .block {
width: 10%;
padding: 0.5rem;
}
#dayview .blocks .block[data-besetzt=true] {
background-color: #f1f1f1;
color: #afafaf;
display: none;
}
#dayview .blocks .block.grau {
background-color: #f1f1f1;
color: #afafaf;
}
#dayview .blocks .block.selected {
background-color: #cebd85 !important;
color: #575757 !important;
}
@media screen and (max-width: 1000px) {
#dayview .blocks .block {
width: 20%;
}
}
@media screen and (max-width: 500px) {
#dayview .blocks .block {
width: 25%;
}
}
.page-cover {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(71, 115, 79, 0.65);
z-index: 99;
top: 0;
left: 0;
}
.page-cover.light {
background-color: rgba(71, 115, 79, 0.7);
}  @-moz-keyframes rotate-loading {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-o-keyframes rotate-loading {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate-loading {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@keyframes rotate-loading {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
@-moz-keyframes loading-text-opacity {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes loading-text-opacity {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes loading-text-opacity {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes loading-text-opacity {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loading-container,
.loading {
height: 100px;
position: relative;
width: 100px;
border-radius: 100%;
}
.loading-container .loading-smaller,
.loading .loading-smaller {
height: 60px;
width: 60px;
border-radius: 100%;
border: 2px solid transparent;
border-color: transparent #fff transparent #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-50deg);
}
.loading-container {
margin: 160px auto;
}
.loading {
border: 2px solid transparent;
border-color: transparent #fff transparent #FFF;
-moz-animation: rotate-loading 1.5s linear 0s infinite normal;
-moz-transform-origin: 50% 50%;
-o-animation: rotate-loading 1.5s linear 0s infinite normal;
-o-transform-origin: 50% 50%;
-webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
-webkit-transform-origin: 50% 50%;
animation: rotate-loading 1.5s linear 0s infinite normal;
transform-origin: 50% 50%;
}
.loading-container .loading {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#loading-text {
-moz-animation: loading-text-opacity 2s linear 0s infinite normal;
-o-animation: loading-text-opacity 2s linear 0s infinite normal;
-webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
animation: loading-text-opacity 2s linear 0s infinite normal;
color: #ffffff;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
margin-top: 45px;
opacity: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 0;
width: 100px;
}