div.form_wrapper {
    margin: 0 30px;
}

#modal_box {
    padding: 30px 40px;
}

#modal_box h4,
#modal_box h6 {
    display: block;
    margin: 0.8em 0;
}

#modal_box h2 {
    display: block;
}

#modal_box p {
    display: block;
    margin: 10px 0;
}

/*
#modal_box h1:last-child,
#modal_box h2:last-child,
#modal_box h3:last-child,
#modal_box h4:last-child,
#modal_box h5:last-child,
#modal_box h6:last-child,
#modal_box p:last-child {
	margin-bottom:0 !important;
	padding-bottom:0 !important;
}
*/
div.form {
    margin: 0 -30px; /* equalize alignment due to padding of inner form_box */
}

div.form .flexbuttongroup {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: -3% -2%;
}

div.form .flexbuttongroup .flexbuttongroup__button {
    flex: 1;
    width: auto;
    margin: 3% 2%;
    min-width: 50px;
}

div.form .flexrow {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-left: -2%;
    margin-right: -2%;
}

div.form .flexrow .flexrow__item {
    flex: 1;
    width: auto;
    margin-left: 2%;
    margin-right: 2%;
}

/* standard form boxes */
div.form_box {
    display: block;
    width: auto;
    padding: 0 30px;
    margin: 0;
    vertical-align: top;
}

/* spezieller Kundenwunsch: GRÜNE BUTTONS! */
div.form_box .button:enabled {
    background-color: #D4FF82 !important;
}

div.form_box button.button--delete:enabled,
div.form_box button.button--delete:hover {
    background-color: #FFC9BF !important;
}

div.payment_providers_box {

}

div.payment_providers_box div {
    margin: -6px;
}

div.payment_providers_box p {
    margin-top: -0.3em !important;
    margin-bottom: 0.6em !important;
}

div.payment_providers_box img.img_payment_provider {
    margin: 6px;
    width: auto;
    height: auto;
    max-width: 66px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
}

/* wrapped form_boxes: remove outer padding */
div.form_box.one_half,
div.form_box div.form_box_inner.one_half {
    vertical-align: top;
    display: inline-block;
    width: 50%;
}

div.form_box.one_half:first-child {
    border-right: 1px solid #ccc;
}

div.form_box div.form_box_inner.one_half:first-child {
    padding-right: 30px !important;
    border-right: 1px solid #ccc;
}

div.form_box div.form_box_inner.one_half + div.form_box_inner.one_half {
    padding-left: 30px !important;
}


div.form_box div.fieldset {
    position: relative;
    display: block;
    padding: 0;
    margin: 10px -2%;
    vertical-align: top;
}

div.form_box div.fieldset:first-child {
    margin-top: 0;
}

div.form_box div.fieldset.bordered {
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 4px 0;
    margin: 0 -2%;
}

div.form_box .field {
    position: relative;
    display: inline-block;
    padding: 0 2%;
    margin: 4px 0;
    vertical-align: top;
}

div.form .field > .field {
    padding: 0 2% 0 0;
}

div.form .field > .field ~ .field {
    padding: 0 0 0 2%;
}

div.form_box .field.one {
    width: 100%;
}

div.form .one_third,
div.form_box .field.one_third {
    vertical-align: top;
    display: inline-block;
    width: 33.3%;
}

div.form .two_thirds,
div.form_box .field.two_thirds {
    vertical-align: top;
    display: inline-block;
    width: 66.6%;
}

div.form .one_half,
div.form_box .field.one_half {
    vertical-align: top;
    display: inline-block;
    width: 50%;
}

div.form_box .field.one .button,
div.form_box .field.one_third .button,
div.form_box .field.two_thirds .button,
div.form_box .field.one_half .button {
    margin-top: -0.3em;
}

div.form_box label,
div.form_box .label {
    position: relative;
    display: block;
    width: auto;
    margin: 3px 0;
    padding: 0;
    font-family: 'open_sanssemibold', Arial, Helvetica, sans-serif !important;
    font-weight: normal;
    font-size: 1.4em;
    color: #333;
}

div.form_box label span.fa,
div.form_box .label span.fa {
    position: absolute;
    bottom: 2px;
    right: 0;
    z-index: 50;
    font-size: 1.2em;
    color: #999;
    cursor: pointer;
}

div.form_box label.label_white_image {
    display: table;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
    height: 40px;
    overflow: hidden;
    width: auto;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #bbb;
    text-align: center;
    padding: 2px 18px;
}

div.form_box label.label_white_image:hover {
    border: 1px solid #999;
}

div.form_box label.label_white_image > div {
    display: table-cell;
    vertical-align: middle;
}

.to_left {
    text-align: left;
    margin-left: 0 !important;
}

.to_right {
    text-align: right;
    margin-right: 0 !important;
}

div.form div.navibuttons {
    display: block;
    margin-top: 10px;
}

div.form_box .input,
div.form_box input[type="text"],
div.form_box input[type="email"],
div.form_box input[type="password"],
div.form_box input[type="tel"],
div.form_box select,
div.form_box textarea {
    display: block;
    width: 100%;
    height: 33px;
    position: relative;
    font-family: 'open_sansregular', Arial, Helvetica, sans-serif !important;
    font-weight: normal;
    font-size: 1.4em;
    color: #444;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0.4em;
    border: 1px solid #999;
    /* background:url(../../img/bg_button_shadow_up.png) center center no-repeat; */
    background-color: #fff;
    background-size: auto 100%;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

div.form_box textarea {
    height: auto !important;
}

div.form_box .input {
    font-size: inherit;
    padding: 0.8em 1.2em !important;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}


/* DATE-DROPDOWN */

div.form_box select.day,
div.form_box select.month,
div.form_box select.year {
    width: 40%;
    display: inline-block;
}

div.form_box select.day,
div.form_box select.month {
    width: 26%;
    margin-right: 4%;
}


div.form_box input[type="checkbox"],
div.form_box input[type="radio"] {
    display: inline-block;
    width: auto;
    margin-right: 8px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 0.4em;
    border: 1px solid #999;
    background-color: #fff;
    background-size: auto 100%;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

div.form_box tr.row_header th input[type="checkbox"],
div.form_box td.td_standard input[type="checkbox"],
div.form_box td.td_standard input[type="radio"] {
    margin-right: 0;
}


div.form_box .input:hover,
div.form_box input[type="text"]:focus,
div.form_box input[type="email"]:focus,
div.form_box input[type="password"]:focus,
div.form_box input[type="tel"]:focus,
div.form_box input[type="checkbox"]:focus,
div.form_box input[type="radio"]:focus,
div.form_box select:focus,
div.form_box textarea:focus {
    z-index: 5000;
    color: #333;
    -webkit-box-shadow: 0px 0px 4px rgba(30, 30, 30, 0.5);
    -moz-box-shadow: 0px 0px 4px rgba(30, 30, 30, 0.5);
    box-shadow: 0px 0px 4px rgba(30, 30, 30, 0.5);
    border: 1px solid #666;
    /* background:url(../../img/bg_button_shadow_up.png) center center no-repeat; */
    background-color: #fff;
    background-size: auto 100%;
}

div.form_box input[disabled],
div.form_box select[disabled],
div.form_box textarea[disabled] {
    z-index: 5000;
    color: #444;
    background-color: #eee;
    background-size: auto 100%;
}

div.form_box .required:after {
    content: '\f005';
    font-family: 'Fontawesome';
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.0em;
    font-size: 0.4em;
    color: #999;
    margin-left: 3px;
    vertical-align: top;
}

:invalid {
    box-shadow: none;
    border-bottom-color: inherit;
}

:-moz-submit-invalid {
    box-shadow: none;
    border-bottom-color: inherit;
}

:-moz-ui-invalid {
    box-shadow: none;
    border-bottom-color: inherit;
}

/*
<select>
  <caption>...</caption>
  <button />
  <popup>
     <option>1</option>
     <option>2</option>
  </popup>
<select>
*/

div.form_box select {
    -webkit-appearance: none;
    /*padding:0.3em 0 0.2em 0;*/
    padding: 0.3em 0.3em 0.2em 0.3em;
}

div.form_box select caption,
div.form_box select optgroup,
div.form_box select popup {
    padding: 0;
    margin: 0;
}

div.form_box select optgroup {
    margin: 4px 0;
    padding: 4px 0;
    border-top: 1px dotted #aaa;
}

div.form_box select option {
    padding: 1px 0.4em;
    -webkit-appearance: none;
    line-height: 1.0em;
}

div.form_box select > option:first-child {
    margin-top: 4px;
}

div.form_box select optgroup option {
    padding-left: 1.2em;
}

div.form_box .datedropdown {
    display: inline-block;
    width: auto;
}

div.form_box .datedropdown select.year {
    display: inline-block;
    width: auto;
}

div.form_box .datedropdown select.month,
div.form_box .datedropdown select.day {
    display: inline-block;
    width: auto;
}


div.form_box .timedropdown {
    display: inline-block;
    width: auto;
}

div.form_box .timedropdown select.hour,
div.form_box .timedropdown select.minute {
    display: inline-block;
    width: auto;
}

div.form_box div.captcha {
    display: none;
}

div.form .captcha_html {
    display: inline-block;
    text-align: left;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    padding: 0.4em 0.1em;
    border: 1px solid #999 !important;
}

div.notdisplayed,
div.form div.form_box div.abgedunkelt {
    display: none !important;
}

div.form_box .result_box {
    display: block;
    width: auto;
    margin: 10px 0;
}

div.form_box .form_price {
    padding: 5px 0 7px 0 !important;
    border-top: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
}

div.form_box .separator_top {
    padding: 5px 0 !important;
    border-top: 1px solid #bbb;
}

div.form_box .separator_bottom {
    padding: 5px 0 !important;
    border-bottom: 1px solid #bbb;
}

div.form_box .form_price h6 {
    /*font-family:'open_sanssemibold', Arial, Helvetica, sans-serif!important;*/
    font-weight: normal;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.6em;
}

#modal_box p.form_note,
.form .form_note {
    font-size: 1.2em !important;
    line-height: 1.5em;
    color: #222;
}

#modal_box div.form_box div.videotogo_box {
    position: relative;
}

#modal_box div.form_box div.videotogo_box div {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    margin: -10px 0 20px 0;
    overflow: hidden;
    border: 1px solid #bbb !important;
}

#modal_box div.form_box div.videotogo_box h6 {
    display: block;
    background: url(../img/bg_button_shadow_up.png) center center no-repeat;
    background-size: 100% 100%;
    background-color: #d92b48;
    font-family: 'open_sanssemibold', Arial, Helvetica, sans-serif !important;
    font-weight: normal;
    font-size: 1.7em;
    line-height: 1.3em;
    color: #eee;
    text-align: left;
    margin: 0 !important;
    padding: 6px 90px 6px 30px !important;
    text-shadow: 0px 1px 2px rgba(20, 20, 20, 0.6);
}

#modal_box div.form_box div.videotogo_box p {
    display: block;
    font-family: 'open_sansregular', Arial, Helvetica, sans-serif !important;
    font-weight: normal;
    font-size: 1.3em;
    line-height: 1.4em;
    color: #222;
    background: url(../img/bg_button_shadow_up.png) center center no-repeat;
    background-size: 100% 100%;
    background-color: #fff;
    text-align: left;
    margin: 0 auto !important;
    padding: 10px 90px 11px 30px !important;
}

div.form_box div.videotogo_box img {
    position: absolute;
    top: -10px;
    right: -6px;
    z-index: 61;
}


/* spinning animation */

div.form .spinner_box {
    text-align: center;
    font-size: 2.0em;
}

div.form .spinner {
    margin: auto;
    display: none;
}


/* tab button / tabs */

div.form a.tab_button {
    display: block;
    position: relative;
    z-index: 5000;
    font-family: 'open_sanssemibold', Arial, Helvetica, sans-serif !important;
    font-weight: normal;
    padding: 0.7em 1.3em 0.7em 1.3em;
    font-size: 1.4em;
    text-decoration: none;
    text-align: center;
    /* text-shadow: 0px 1px 0px rgba(250, 250, 250, 0.9); */
    /* text-transform:uppercase; */
    background: url(../img/bg_button_shadow_up.png) bottom center no-repeat;
    background-color: #fff;
    color: #444;
    background-size: 100% 100%;
    white-space: nowrap;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #bbb !important;
}

div.form a.tab_button:hover {
    background-color: #eee;
    text-decoration: none;
}

div.form a.tab_button:active {
    background-image: none;
    background-color: #fff;
}

div.form a.tab_button.selected {
    background-image: none;
    background-color: #fff;
    color: #75693d;
    text-decoration: none;
}

div.form a.tab_button:active > span.selected {
    color: #75693d;
}

div.form a.tab_button:focus {
    text-decoration: none;
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -7px;
}

div.form a.tab_button > span {
    margin: 0 0.4em 0 0;
    padding: 0;
    font-size: 1.4em;
    line-height: 1.0em;
    font-weight: normal;
    vertical-align: text-bottom;
    text-decoration: none;
}

div.form .tab_content_box {
    background: url(../img/bg_payment_modal.png) bottom center no-repeat;
    background-color: #fcf6e6;
    background-size: 100% 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 18px 30px 18px 30px;
    margin: 0;
    border: 1px solid #bbb !important;
}

@media only screen and (max-width: 767px) {

    div.form .tab_content_box {
        padding: 12px 25px 12px 25px;
    }
}

@media only screen and (max-width: 560px) {

    div.form .tab_content_box {
        /*background:url(../img/bg_unlock_option.png) bottom center no-repeat;*/
        padding: 10px 12px 10px 12px;
    }

}


/* AUTO-COMPLETE */

.ui-autocomplete-loading {
    background: #fcfcfc url('../img/ajax-loader_2.gif') right center no-repeat;
}

ul.ui-autocomplete {
    position: absolute;
    font-family: 'DejaVuSansBook', Verdana, Helvetica, sans-serif;
    font-weight: normal;
    border: none;
    outline: solid 1px #dddddd;
    display: block;
    color: #005580;
    margin-top: 2px;
    list-style: none;
    padding: 5px;
    text-align: left;
    background: #fcfcfc url('../img/form_bg_input.png') left top repeat-x;
}

li.ui-menu-item {
    display: block;
    width: auto;
    height: auto;
    padding: 7px 3px;
    border-bottom: dotted 1px #bbbbbb;
}

li.ui-menu-item a {
    font-size: 1.3em;
    line-height: 1.5em;
    display: block;
    text-decoration: none;
    cursor: pointer;
    color: #666666;
}

li.ui-menu-item a:hover,
li.ui-menu-item a:active {
    color: #75693d;
}


/* complexify */

div.form_box .pwstrength {
    display: block;
    width: auto;
    padding: 3px 0;
    margin: 0;
}

div.form_box .pwstrength p {
    text-transform: uppercase;
    font-size: 1.3em;
    color: #777;
    margin-top: 3px;
}

div.form_box #status {
    width: 100%;
    height: auto;
}

div.form_box #complexity {
    text-align: left;
}

div.form_box #progressbar {
    width: 100%;
    height: auto;
    border: 1px solid #999;
    background: none;
    overflow: hidden;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

div.form_box #progress {
    height: 6px;
    width: 0%;
}

div.form_box .progressbarValid {
    background-color: green;
    background-image: -o-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -moz-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -webkit-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: -ms-linear-gradient(-90deg, #8AD702 0%, #389100 100%);
    background-image: linear-gradient(-90deg, #8AD702 0%, #389100 100%);
}

div.form_box .progressbarInvalid {
    background-color: red;
    background-image: -o-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -moz-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -webkit-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: -ms-linear-gradient(-90deg, #F94046 0%, #92080B 100%);
    background-image: linear-gradient(-90deg, #F94046 0%, #92080B 100%);
}

div.form .field_value {
    display: inline-block;
    margin-right: 10px;
    padding: 0em 0 0.1em 0;
    color: #777;
}

div.buttongroup,
div.form div.buttongroup {
    text-align: right !important;
    margin: 0 -10px 0 -10px;
}

div.buttongroup .button,
div.form div.buttongroup .button {
    text-align: center !important;
    margin: 0 10px 0 auto !important;
}


/* monthly/yearly payment radio button switch */
div.billing_period_switch_box {
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
}

div.billing_period_switch_box label {
    white-space: nowrap !important;
    min-width: 144px;
    font-family: 'open_sansregular', Arial, Helvetica, sans-serif !important;
}

div.billing_period_switch_box label.radio {
    display: inline-block;
    color: #eee !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: none !important;
    padding: 0.5em 0.6em 0.6em 0.6em;
    margin: 0 4px 0 0;
    text-transform: uppercase;
    text-align: left;
    background: #444 url(../img/bg_button_shadow_up.png) center center no-repeat;
    background-size: auto 100%;
    vertical-align: bottom;
    font-size: 1.2em;
    line-height: 1.0em;
    cursor: pointer;
}

div.billing_period_switch_box label.radio:last-child {
    margin-top: 6px;
}

div.billing_period_switch_box label.radio:hover {
    background-color: #8c7e49;
}

div.billing_period_switch_box label.radio input {
    vertical-align: bottom;
    margin: 0 6px 0 0;
    padding: 0;
}


@media only screen and (max-width: 600px) {

    div.form_box.one_half,
    div.form_box div.form_box_inner.one_half {
        display: block;
        width: 100%;
    }

    div.form_box div.form_box_inner.one_half:first-child {
        padding-right: 0 !important;
        border-right: none;
    }

    div.form_box div.form_box_inner.one_half + div.form_box_inner.one_half {
        padding-left: 0 !important;
    }

    div.form_box.one_half:first-of-type {
        border-right: none;
    }

}


@media only screen and (max-width: 560px) {

    div.buttongroup,
    div.form div.buttongroup {
        margin: 0 -10px 0 0;
    }

}


@media only screen and (max-width: 480px) {

    div.form {
        margin: 0 -10px; /* equalize alignment due to padding of inner form_box */
    }


    div.form_box .field.one,
    div.form_box .field.one_third,
    div.form_box .field.two_thirds,
    div.form_box .field.one_half {
        display: block;
        width: auto;
        margin: 10px 2% !important;
        padding: 0 !important;
    }

    div.form_box .field.one .field,
    div.form_box .field.one_third .field,
    div.form_box .field.two_thirds .field,
    div.form_box .field.one_half .field {
        margin: 10px 0 !important;
    }

    div.form_box {
        display: block;
        width: auto;
        padding: 0 10px;
        vertical-align: top;
        margin: 20px 0;
    }

    div.form_box .field.one .button,
    div.form_box .field.one_third .button,
    div.form_box .field.two_thirds .button,
    div.form_box .field.one_half .button,
    div.form_box .field.one button,
    div.form_box .field.one_third button,
    div.form_box .field.two_thirds button,
    div.form_box .field.one_half button {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    #modal_box {
        padding: 15px 25px;
    }

    div.buttongroup,
    div.form div.buttongroup {
        margin: 0 0 0 0;
    }

}


#new_unread_message_box {
    background: url(../img/bg_payment_modal.png) bottom center no-repeat;
    background-color: #fcf6e6;
    background-size: 100% 100%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 10px 15px 10px 15px;
    margin: 0;
    border: 1px solid #999 !important;
}