/*
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 : 05.11.2018, 13:23:05
    Author     : Herz
*/

.error_msgs{
    margin-bottom:10px;
}
.error,
select.error{
    border:1px solid red;
}
.row{
    margin-bottom: 10px;
}
input,select{
    width:100%;
    box-sizing: border-box;
    padding:0.4em 0.6em;
    width:95%;
}
.row.submit .col-4{
    display:none;
}
.row.submit,
.row.submit .col-8{
    width:100% !important;
}
.form_hint{
    width:100%;
    box-sizing: border-box;
    text-align: center;
    padding:10px;
}
.row.submit_unplau .col-4{
    display:none;
}
.row.submit_unplau .col-8{
    width:100%;
}
.formular_area{
    margin-top:50px;
    margin-bottom:100px;
    z-index:1;
}
.submit input,
.submit_unplau input{
    background-color:#FF8A19;
    color:white;
    cursor:pointer;
    border:0 ;
    font-weight:bold;
    width:100%;
}
.formular_area .row{
    box-sizing: border-box;
    width:50%;
    display:inline-block;
    padding:5px;
}
.formular_area .row .col-4,
.formular_area .row .col-8{
/*    height:37px;*/
    vertical-align: middle;
}
.formular_area .row .col-8{
    position:relative;
}
.formular_area .row .col-4{
    padding: 0.4em 0.6em;
}
.formular_area .row:last-of-type{
    width:100%;
}
.paypal_logo{
    text-align: center;
    box-sizing: border-box;
    width:100%;
}
.paypal_logo img{
    display:inline-block;
    max-width:100px;
}
.tooltip_btn{
    cursor:pointer;
    color:#FF8A19;
}


[data-tooltip]{
    /*  position:relative;*/
}
[data-tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: #FF8A19 transparent transparent     transparent;
    z-index: 100;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: #FF8A19;
    text-align: center;
    color: #fff;
    padding:5px;
    font-size: 15px;
    border-radius: 5px;
    pointer-events: none;
    z-index:1;
}


[data-tooltip-position='left']::before{
    left:0%;
    top:50%;
    margin-left:-12px;
    transform:translatey(-50%) rotate(-90deg)
}
[data-tooltip-position='top']::before{
    left:50%;
}
[data-tooltip-position='bottom']::before{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[data-tooltip-position='right']::before{
    left:100%;
    top:50%;
    margin-left:1px;
    transform:translatey(-50%) rotate(90deg)
}
[data-tooltip-position='left']::after{
    left:0%;
    top:50%;
    margin-left:-8px;
    transform: translateX(-100%)   translateY(-50%);
}
[data-tooltip-position='top']::after{
    left:50%;
}
[data-tooltip-position='bottom']::after{
    top:100%;
    margin-top:8px;
    transform: translateX(-50%) translateY(0%);
}
[data-tooltip-position='right']::after{
    left:100%;
    top:50%;
    margin-left:8px;
    transform: translateX(0%)   translateY(-50%);
}
[data-tooltip]:after,[data-tooltip]:before{
    opacity:0;
}
[data-tooltip]:hover::after,[data-tooltip]:hover::before {
    opacity:1;
}
.error_msgs{
    color:red;
    text-align: center;
    font-weight:bold;
    font-size:1em;
}
.unplausibel{
    border:1px solid #FF8A19;
}


.unplausibel_box::before {
    border:1px dotted #FF8A19;
}
.unplausibel_box::after {
    background: white;
    border:1px dotted red;
    color: red;
    padding:7px;
    font-size:1em;
}
.unplausibel_box{
    font-size:.8em;
    box-sizing: border-box;
    padding:5px;
    position:absolute;
    left:-24px;
    top:4px;
    z-index:3;
}
.unplausibel_box i{
    color:red;
}
.unplausibel_box.hide{
    display:none;
}
.hover_bild{
    display:none;
}
.col-8:hover .hover_bild{
    display:block;
    position:absolute;
    bottom:100%;
    left:0px;
    right:0px;
    max-width:95%;
}
.col-8:hover .hover_bild img{
    display:block;
}
@media screen and (max-width:700px){
    .formular_area .row{
        width:100%;
    }
    .formular_area .row .col-4{
        padding-left:0px;
    }
    input,select{
        width:90%;
    }
    [data-tooltip]::after{
        width:100%;
    }
    .unplausibel_box::after {
        width:auto;
    }
}
@media screen and (max-width:400px){
    .unplausibel_box{
        left:0px;
        top:-24px;
    }

}