/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 01.02.2019, 15:14:27
    Author     : andreasmethling
*/


/* fa Bottons für Go Back */
a.goback-link {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #000;
    text-decoration: none;
    font-family: inherit;
    text-decoration: none;
}

legend {
    background: gold;
}

i.fas.fa-chevron-left {
    display: inline-block;
    width: auto;
    height: auto;
    float: none;
    vertical-align: top;
    background-color: #e2060b; 
    color: #FFF;
    font-size: 1.625rem;
    line-height: 1.625rem;
    padding: 0.315rem 0.625rem 0.315rem 0.625rem;
    margin: 0% 2% 0% 0%;
}
.active {
   
}
div.set-points {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0.315rem 0rem 0.315rem;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    position: relative;
}
div.set-points:after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: 39%;
    background-color: #999999;
    z-index: -1;
}
@media screen and (max-width: 767px) {
   div.set-points:after {
        top: 33%;
    }
}
div.set-points > div.points {
    flex: 23%;
    height: auto;
    padding: 0;
    margin: 1%;
    position: relative;
    /*background: yellow;*/
}
div.set-points > div.points > span {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 1% 0% 1% 0%;
    float: none;
    vertical-align: top;
    color: #999999;
    font-size: 80%;
}
div.set-points > div.points.active > span {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 1% 0% 1% 0%;
    float: none;
    vertical-align: top;
    color: #000;
    font-size: 80%;
}
div.set-points > div.points.active > span.number,
div.set-points > div#point-two > span.number,
div.set-points > div#point-three > span.number,
div.set-points > div#point-four > span.number {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    font-size: 1.315rem;
    line-height: 4rem;
    margin: 1%;
    float: none;
    vertical-align: top;
    border: 1px solid grey;
    border-radius: 50%;
    outline: none;
    background: transparent;
    position: relative;
    overflow: hidden;  
}
div.set-points > div.points.active > span.number {
    background-color: #739fcd!important;
    color: #FFF!important;
    border: 0 none!important;
}
div.set-points > div#point-two > span.number,
div.set-points > div#point-three > span.number,
div.set-points > div#point-four > span.number {
    background-color: #FFF;
    color:  #999999;
}

div.set-points > div.points.checked > span.number,
div.set-points > div#point-one.points.checked > span.number,
div.set-points > div#point-two.points.checked > span.number,
div.set-points > div#point-three.points.checked > span.number,
div.set-points > div#point-four.points.checked > span.number {
    display: none;
}
div.set-points > div.points.checked > button {
    display: inline-block!important;
    width: 4rem;
    height: 4rem;
    padding: 0;
    margin: 1%;
    vertical-align: top;
    border: 0 none;
    border-radius: 50%;
    outline: none;
    background: transparent;
    position: relative;
    background-color: #319966;
    overflow: hidden;  
}

div.set-points > div.points > button > i.fas {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    color:  #FFF;;
    font-size: 1.625rem;
    line-height: 4rem;
    float: none;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
}
div.set-points > div.points > button.tabcontent-edit {
    display: none;
}
div.set-points > div.points.active > button.tabcontent-open {
    display: none;
}
div.set-points > div.points.active > button.tabcontent-edit {
    display: none;
}

div.tab {
    display: none;
}
div.tab.active {
    display: block;
}

/* Buttons neue Anmedlung */

button.registration,
button.reservation {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #FFF;
    text-align: left;
    position: relative;
}
button.registration,
button.reservation {
    background-color: #739fcd;
    color: #FFF;
}

button.registration > i,
button.reservation > i {
    max-width: 15%;
    font-size: 1.625rem;
    line-height: 1.625rem;
}
button > i.far {
    display: inline-block;
    height: 100%;
    padding: 0.625rem;
    margin: 0rem 1rem 0rem 0rem;
    float: none;
    vertical-align: top;
}
button > i.far.fa-user {
    background-color: #2c6298;
    color: #FFF;
}
button.registration.account.unregistered > i.far.fa-user {
    background-color: #e2060b;
}
button.registration > span,
button.reservation > span {
    display: inline-block;
    font-size: 1rem;
    line-height: 1.625;
    max-width: 70%;
    height: 100%;
    padding: 0.625rem 0rem 0rem;
    margin: 0;
    float: none;
    vertical-align: top;
    color: #FFF;
}
@media only screen and (max-width: 400px){
    button.registration > span,
    button.reservation > span {
        padding: 0.315rem 0rem 0rem;
    }
}
button > i.fas.fa-chevron-right {
   display: inline-block;
   height: auto;
   padding: 0.625rem;
   margin: 0rem 0rem 0rem 1rem;
   font-size: 1.625rem;
   line-height: 1.625rem;
   color: #FFF;
   float: right;
   position: absolute;
   right: 0;
   top: 0;
}


/* Buttons green */
button.green,
button.green:hover,
button.green:active,
button.green:focus,
button.reservation,
button.reservation:active,
button.reservation:focus
[type="button"],
[type="reset"],
[type="submit"] {
    outline: none;
    border: 0 none;
    background-image: none;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.green {
    display: inline-block;
    width: 100%;
    padding: 0.625rem;
    margin: 0.315rem 0rem 0.315rem 0rem;
    background-color: #319966;
    color: #FFF;
    font-size: 1.315rem;
    line-height: normal;
}
button.green:hover {
    background-color: #739fcd;
}
div.buttons > p {
    display: inline-block;
    padding: 0rem 0.315rem 0rem 0rem;
    float: none;
    vertical-align: top;
}
div.buttons > p.infored {
    color: #e2060b;
}

/* reservation */

button.reservation.to-reservate > i.far.fa-calendar-plus {
    background-color: #2c6298;
}
button.reservation.active {
    background-color: #319966;
}
button.reservation.active > i.far.fa-calendar-check {
    background-color: #319966;
}