/* 
Written by Joachim Reichwaldt for Ancora
All rights reserved  
 */

body{

    background-image: url('../Images/registration_background.JPG');
    background-repeat: no-repeat;   
    background-clip: border-box;
    background-position: center center;
    background-size: cover;   
    background-attachment: fixed;
    margin: 0 0 0 0;
    /*! overflow-x: hidden; */
    width: 100%;
    position: relative;
    box-sizing: border-box;
}
#main_wrapper, .main_wrapper_menu{
    display:flex;
    position:relative;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height:100vh;
    box-sizing: border-box;
    z-index:1;
}
#main_wrapper{
    justify-content: center;
}
.main_wrapper_menu{
    justify-content: flex-start;
}

.infotext{
   margin-top:0.382em;
   margin-bottom:1.5em;
   color:#333;   
}
.maintext{
   margin-top:0em;
   margin-bottom:1.6086em;
   color:#333;   
}
.maintext.separator{
border-top: 1px solid black;
  padding-top: 0.8em;
  margin-bottom: 0.8em;
  margin-top: 0.8em;
}

.customer_input, textarea {
   background-color:#f7f9fb;
   border-radius:calc(2.3586em / 2);
   border:0px;
   width:100%;
   margin-bottom:1.1793em;
   box-shadow: -1px -1px #5a8eaa;
   padding-left:12px;
   color:#555;
   box-sizing: border-box;
}
.customer_input{
   height:2.3586em;
   overflow:hidden;
   z-index:2;
   position:relative;
}
textarea{
    overflow:hidden;
    resize: none;
    height:6em;
    border-radius: 1.5em;
    padding:1em;
}
.customer_input.validated{
    background-image:url('../Images/SVG/green_check_arrow.svg');
    background-size:contain;
    background-position: right center;
    background-repeat: no-repeat;
}
.customer_input.invalid{
    background-image:url('../Images/SVG/attention.svg');
    background-size:contain;
    background-position: 98% 50%;
    background-repeat: no-repeat;
}
.customer_form_button{
   background-color:#f7f9fb;
   border-radius:3em;
   height:2.3586em;   
   border:0px;
   width:100%;
   margin-bottom:1.1793em;
   box-shadow: 2px 2px #000;
   color:#555;
   box-sizing: border-box;
       appearance:none;
    -webkit-appearance:none;
}
.customer_form_button:active{ 
    box-shadow: none;
    transform: translateY(2px);
}
.no_margin{
  margin-bottom:0em;  
}
.margin_top{
  margin-top:1.1793em;  
}
.no_margins{
  margin-bottom:0em;
  margin-top:0em;
}
input.customer_input:focus, textarea:focus{
   background-color:#cdd4d7;
   border:none !important;
   box-shadow: -2px -2px #4481a2;
   outline: 0;
   letter-spacing: 0.081em;
}
::-ms-input-placeholder { /* Edge 12-18 */
  color:#000;
}
::placeholder {
  color:#000;
}

label{ 
   box-sizing: border-box;
   position: relative;
}
label.accept{  
   box-sizing: border-box;
   left: 0.5em;
   position: relative;
}
legend{
   color:#555;
   margin-bottom: var(--small_size);
}
.form_fieldset{
   background-color:#7db6dd;
   padding: 1.1793em;
   position:relative;
   border-radius:1em;
   margin: 0 auto;
   margin-bottom:1em;
   box-shadow: 1px 1px 4px black;
   box-sizing: border-box;
}
@media screen and (max-width: 600px) {.form_fieldset{width:95%;}}
@media screen and (min-width: 601px) {.form_fieldset{width:550px;}}

.cash_register_fieldset{
   background-color:#7db6dd;
   padding: 1.1793em;
   position:relative;
   border-radius:1em;
   margin: 0 auto;
   margin-bottom:1em;
   box-shadow: 1px 1px 4px black;
   box-sizing: border-box;
}


@media screen and (max-width: 600px) {.cash_register_fieldset{width:95%;}}
@media screen and (min-width: 601px) {.cash_register_fieldset{width:550px;}}

.anchor_logo_big{
    width:40%;
    float:right;
    margin-top: 0em;
    margin-bottom: 0.4em;
    margin-left: 0.4em;
    margin-right: 0em;
}
.anchor_logo_small{
    width:25%;
    float:right;
    margin-top: 0em;
    margin-bottom: 0.4em;
    margin-left: 0.4em;
    margin-right: 0em;
}
.animation_wrapper{
    display:flex; 
    background-color:#7db6dd; 
    flex-direction:row; 
    justify-content:center; 
    align-items:center; 
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
.animation_wrapper img{
width:50%;
}
.formrow{
    display:flex;
    flex-direction:row;
    width:100%;
    justify-content:space-between;
    box-sizing: border-box;    
    flex-wrap: wrap;
}
.formrow div{
    flex:1 1 1em;  
}
.animate_top	
{
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-delay: 0.2s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-play-state: running;
        animation-name: animateTop;
        transform: scale(0.01);
}
@keyframes animateTop{from{transform: scale(0.01);} to{transform: scale(1);}}
.animate_top_delay	
{
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-delay: 1s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-play-state: running;
        animation-name: animateTopDelay;
        transform: scale(0.01);
}
@keyframes animateTopDelay{from{transform: scale(0.01);} to{transform: scale(1);}}
.animate_closeBox	
{
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-play-state: running;
        animation-name: animateCloseBox;
        transform: scale(1);
        
}
@keyframes animateCloseBox{from{transform: scale(1);} to{transform: scale(0.01);}}
/*Fades out the darkgrey wrapper for messageboxes*/ 
.fade_in_opacity.fade_out_opacity	
{
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-direction:normal;
        animation-fill-mode: none;
        animation-iteration-count: 1;
        animation-play-state: running;
        animation-name: fadeOutOpacity;
        opacity:1;

}
@keyframes fadeOutOpacity{from{opacity:1;} to{opacity:0;}}

/* Fades out the darkgrey wrapper for messageboxes */ 
.fade_in_opacity	
{
        animation-duration: 1.2s;
        animation-timing-function: ease;
        animation-delay: 0s;
        animation-direction: normal;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-play-state: running;
        animation-name: fadeInOpacity;
        opacity:0;
}
@keyframes fadeInOpacity{from{opacity:0;} to{opacity:1;}}
.success_message
{ 
    background-image : url('../Images/SVG/green_check_arrow.svg');
    background-repeat : no-repeat;
    background-size : 2em;
    background-position-y: center;
    padding-left : 2.5em;
    padding-top : 0.5em;
    padding-bottom : 0.5em;
    margin-top:1em;
}
.error_message
{ 
    background-image : url('../Images/SVG/attention.svg');
    background-repeat : no-repeat;
    background-size : 2em;
    background-position-y: center;
    padding-left : 2.5em;
    padding-top : 0.5em;
    padding-bottom : 0.5em;
    margin-top:1em;
}
#error_message{
    animation-name: float;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes float{0%{transform: translateY(0em);}
                50%{transform: translateY(0.2em);}
                100%{transform: translateY(0em);}}

#datenschutz_long{    
    margin-top:0em;
    overflow:hidden;
    transition:max-height 1s, margin-bottom 0.5s 0.5s;
}
.address_line{margin-bottom:0em;margin-top: 0em;}

#star_field{display:flex; 
            flex-direction: row; 
            justify-content: space-between;
            position:relative; 
            margin-top: 0em;
            margin-bottom: 2em;
            max-height:100px;
}
.star{  position:relative;
       width:15%;
       cursor:pointer;
}

.star.gray{
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1697%) hue-rotate(179deg) brightness(80%) contrast(80%);
}



.phone_input{display:flex; 
            flex-direction: row; 
            position:relative; 
            width:100%;
            box-sizing: border-box;
            color:#555;
            line-height:2.3586em;
                appearance:none;
    -webkit-appearance:none;
    border:none;
    outline:none;
    margin-bottom: 1.1793em;
}
.country_code{
    min-width:7.5em;
    position:relative;
    border-right: 1px solid black;
    cursor:pointer;
}
#selected_country, #country_drop_down{
   position: absolute;
   width:100%;
   box-shadow: -1px -1px #5a8eaa;
   background-color:#f7f9fb;
   border-bottom-left-radius: calc(2.3586em / 2);
   padding-left:0.5em;
   border:0px;
   box-sizing: border-box;
} 
#selected_country{  
  border-top-left-radius: calc(2.3586em / 2);
  height:2.3586em;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items:center;
}
#country_drop_down {
  display:none;
  flex-direction:column;
  top: calc(2.358em / 2);
  z-index: 9;
  padding-top: calc(2.358em / 2);
  }
#country_drop_down.shown {
  display:flex;
}
.option_country{
    display:flex;
    flex-direction:row;
}
.option_country img, #selected_country img{
    width:2em;
    margin-right:0.5em;
}

.phone_number{
  border-bottom-right-radius: calc(2.3586em / 2);
  border-top-right-radius: calc(2.3586em / 2);
  background-color:#f7f9fb;
  box-shadow: -1px -1px #5a8eaa;
  height:2.3586em;
  overflow:hidden;
  border:0px;
  padding:0 12px;
  color:#555;
  box-sizing: border-box;
  position: relative;
  font:inherit;
 flex:1 1 0px;
    appearance:none;
    -webkit-appearance:none;
}
.phone_number:focus{
   background-color:#cdd4d7;
   border:none !important;
   box-shadow: -2px -2px #4481a2;
   outline: 0;
   letter-spacing: 0.081em;
}
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
html {
  touch-action: manipulation;
}
                .found_list{
                    background-color:  #8d9a9f;
                    top:calc(-2.358em / 2);
                    z-index:1;
                    box-shadow: -2px -0px #4481a2;
                    padding-top:calc(2.358em / 2);
                    position:relative;
                    border-bottom-left-radius: calc(2.3586em / 2);
                    border-bottom-right-radius: calc(2.3586em / 2);
                    padding-left:1em;
                }
                
                                .input_section{
                    display:flex; 
                    flex-direction:column;                     
                }
                .input_flex_column{
                    display:flex; 
                    flex-direction:column;
                    justify-content: flex-start;
                    align-items: stretch;
                }
                
                #city_button_container, .city_data_container, .street_data_container, #name_data_container{
                    display:flex; 
                    flex-direction:row;
                    justify-content: stretch;
                    flex-wrap: wrap;
                    margin-bottom: 0.5em;
                    margin-top: 0.5em;
                }
                .city_button{
                    flex: 0 0 1em;
                }
                .city_button{
                    background-color:#f7f9fb;
                    border-radius:3em;
                    height:2.3586em;   
                    border:0px;
                    margin-right:0.5em;
                    margin-bottom:0.5em;
                    padding-left:0.5em;
                    padding-right:0.5em;
                    box-shadow: 2px 2px #000;
                    color:#555;
                    box-sizing: border-box;
                }
                .city_button:active{ 
                    box-shadow: none;
                    transform: translateY(2px);
                }
                #postal_code_input_container{
                    flex:0 0 7.5ch;
                    margin-right:1em;
                }
                #city_input_container{
                    flex:1 1 7.5ch;
                    
                }
                #street_input_container{
                    flex:1 1 15ch;
                    margin-right:1em;
                }
                #housenumber_input_container{
                    flex:0 0 15ch;
                }
                #firstname_input_container{
                    flex:1 1 15ch;
                    margin-right:1em;
                }
                #lastname_input_container{
                    flex:1 1 15ch;
                }
.hidden_field{display:none;}
#address_list{text-align: center; max-height:400px; overflow-y: scroll;}
.pushbox {
  max-height: 0;
  overflow: hidden;

  transition: max-height 0.3s ease;
}

.pushbox.open {
  max-height: 500px;
}
#map { 
    height: 500px;
}

.birthday_input_field{
    display:flex; 
    flex-direction: row; 
    position:relative; 
    width:100%;
    box-sizing: border-box;
    margin-bottom: 1.1793em;  
    overflow:visible;
}

.day_input,.month_input,.year_input{
    background-color:#f7f9fb;
    box-shadow: -1px -1px #5a8eaa;
    height:2.3586em;
    overflow:hidden;
    padding:0 12px;
    color:#555;
    box-sizing: border-box;
    position: relative;
    flex:1 1 0;
    min-width:0;
    width:0;
    appearance:none;
    -webkit-appearance:none;
}
.day_input{
    border-bottom-left-radius: calc(2.3586em / 2);
    border-top-left-radius: calc(2.3586em / 2);  
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
  
}
.day_input:focus,.month_input:focus,.year_input:focus{
    background-color:#cdd4d7;
    border:none !important;
    box-shadow: -2px -2px #4481a2;
    outline: 0;
    letter-spacing: 0.081em;
    box-sizing: border-box;
}
.month_input{
    border-left:1px solid black;
    border-right:1px solid black;
    border-top: 0px;
    border-bottom: 0px;
}

.year_input{
    border-bottom-right-radius: calc(2.3586em / 2);
    border-top-right-radius: calc(2.3586em / 2);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 0px;
}