/*

    Common 

*/



.wizard,

.tabcontrol

{

    display: block;

    width: 100%;

    overflow: hidden;

}



.wizard a,

.tabcontrol a

{

    outline: 0;

}



.wizard ul,

.tabcontrol ul

{

    list-style: none !important;

    padding: 0;

    margin: 0;

}



.wizard ul > li,

.tabcontrol ul > li

{

    display: block;

    padding: 0;

}



/* Accessibility */

.wizard > .steps .current-info,

.tabcontrol > .steps .current-info

{

    position: absolute;

    left: -999em;

}



.wizard > .content > .title,

.tabcontrol > .content > .title

{

    position: absolute;

    left: -999em;

}

.pricelist{

    width: 85%;

    border-collapse: collapse;

  }

#pricelist tr:hover{

background: #f9f9f9;

cursor: pointer;

}

.pricelist thead{

border-bottom: 0;

}

.pricelist td{

    padding: 0;

    position: relative;

    text-align: right;

}

#pricelist td label:hover{

    cursor: pointer;

}

#pricelist td label{

    width: 100%;

    margin: 0;



}

#pricelist input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

  }

  

  /* Create a custom radio button */

  #pricelist .checkmark {

    position: absolute;

    top: 0;

    left: auto;

    right: 0;

    height: 13px;

    width: 13px;

    background-color: #eee;

    border-radius: 2px;

    border: 1px solid #cccccc;

}

  

  /* On mouse-over, add a grey background color */

  #pricelist tr:hover input ~ .checkmark {

    /* background-color: #ccc; */

  }

  

  /* When the radio button is checked, add a blue background */

  #pricelist input:checked ~ .checkmark {

    background-color: #91d10a;

  }

  

  /* Create the indicator (the dot/circle - hidden when not checked) */

  #pricelist .checkmark:after {

    content: "";

    position: absolute;

    display: none;

  }

  

  /* Show the indicator (dot/circle) when checked */

  .#pricelist input:checked ~ .checkmark:after {

    display: block;

  }

  

  /* Style the indicator (dot/circle) */

  #pricelist .checkmark:after {

       top: 9px;

      left: 9px;

      width: 8px;

      height: 8px;

      border-radius: 50%;

      background: white;

  }



/*

    Wizard

*/



.wizard > .steps

{

    position: relative;

    display: block;

    width: 100%;

}



.wizard.vertical > .steps

{

    display: inline;

    float: left;

    width: 30%;

}



.wizard > .steps .number

{

    font-size: 1.2em;

}



.wizard > .steps > ul > li

{

    width: 25%;

}



li[role='tab']

{

    width: auto !important;

}



.wizard > .steps > ul > li,

.wizard > .actions > ul > li

{

    float: left;

    text-transform: uppercase;

}



.wizard.vertical > .steps > ul > li

{

    float: none;

    width: 100%;

}

#example-embed{

    width: 100% !important;

    margin:0 auto;

}

.wizard > .steps a,

.wizard > .steps a:hover,

.wizard > .steps a:active

{

    display: block;

    width: auto;

    margin: 0 0.5em 0.5em;

    padding: 1em 1em;

    text-decoration: none;



    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

}



.wizard > .steps .disabled a,

.wizard > .steps .disabled a:hover,

.wizard > .steps .disabled a:active

{

    background: transparent;

    color: #aaa;

    cursor: default;

    border-radius: 0;

}



.wizard > .steps .current a,

.wizard > .steps .current a:hover,

.wizard > .steps .current a:active

{

    background: transparent;

    color: #666;

    border-bottom: 2px solid #2087f0;

    text-transform: uppercase;

    cursor: default;

    border-radius: 0;

}



.wizard > .steps .done a,

.wizard > .steps .done a:hover,

.wizard > .steps .done a:active

{

    background: transparent;

    color: #2087f0;

    text-transform: uppercase;

    border-radius: 0;

}



.wizard > .steps .error a,

.wizard > .steps .error a:hover,

.wizard > .steps .error a:active

{

    background: transparent;

    color: #666;

    border-bottom: 2px solid #ff3111;

}



.wizard > .content

{

    display: block;

    margin: 0.5em;

   /* min-height: 35em;*/

    overflow: hidden;

    position: relative;

    width: auto;



    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    display: flex;

    align-items: flex-start;

    padding: 0;

}

.tab-konfig {

    min-width: 33%;

    margin-top: 0 !important;

}

.wizard.vertical > .content

{

    display: inline;

    float: left;

    margin: 0 2.5% 0.5em 2.5%;

    width: 65%;

}

#list{

    margin-top: 3vh;

    /*width: 25%;*/

    /*padding: 22px 10px;*/

    background: #f9f9f9;

    border-left: 1px solid #0000000f;

    padding-left: 15px;

    padding-bottom: 2vh;

}

#list .selected_item_inf{

    margin-top: 0;

}

#list .selected_item_info b{

    width: 100%;

    display: block;

    margin-left: -7px;

}

.wizard > .content > .body

{

    /*float: left;*/

    /*position: absolute;*/

        width: 100%;

    height: fit-content !important;

    padding: 2.5%;

}



.wizard > .content > .body ul

{

    list-style: disc !important;

}



.wizard > .content > .body ul > li

{

    display: list-item;

}



.wizard > .content > .body > iframe

{

    border: 0 none;

    width: 100%;

    height: 100%;

}



.wizard > .content > .body input

{

    display: block;

    border: 1px solid #ccc;

}



.wizard > .content > .body input[type="checkbox"]

{

    display: inline-block;

}



.wizard > .content > .body input.error

{

    background: rgb(251, 227, 228);

    border: 1px solid #fbc2c4;

    color: #8a1f11;

}



.wizard > .content > .body label

{

    display: inline-block;

    margin-bottom: 0.5em;

}



.wizard > .content > .body label.error

{

    color: #8a1f11;

    display: inline-block;

    margin-left: 1.5em;

}



.wizard > .actions

{

    position: relative;

    display: block;

    text-align: right;

    width: 100%;

}



.wizard.vertical > .actions

{

    display: inline;

    float: right;

    margin: 0 2.5%;

    width: 95%;

}



.wizard > .actions > ul

{

    display: inline-block;

    text-align: right;

}



.wizard > .actions > ul > li

{

    margin: 0 0.5em;

}



.wizard.vertical > .actions > ul > li

{

    margin: 0 0 0 1em;

}



.wizard > .actions a,

.wizard > .actions a:hover,

.wizard > .actions a:active

{

    background: #2087f0;

    color: #fff;

    display: block;

    padding: 0.5em 1em;

    text-decoration: none;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 0;

}



.wizard > .actions .disabled a,

.wizard > .actions .disabled a:hover,

.wizard > .actions .disabled a:active

{

    background: #eee;

    color: #aaa;

}



.wizard > .loading

{

}



.wizard > .loading .spinner

{

}



a[href="#finish"]{

    background-color: #94d60a !important;

}



/*

    Tabcontrol

*/



.tabcontrol > .steps

{

    position: relative;

    display: block;

    width: 100%;

}



.tabcontrol > .steps > ul

{

    position: relative;

    margin: 6px 0 0 0;

    top: 1px;

    z-index: 1;

}



.tabcontrol > .steps > ul > li

{

    float: left;

    margin: 5px 2px 0 0;

    padding: 1px;



    -webkit-border-top-left-radius: 5px;

    -webkit-border-top-right-radius: 5px;

    -moz-border-radius-topleft: 5px;

    -moz-border-radius-topright: 5px;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

}



.tabcontrol > .steps > ul > li:hover

{

    background: #edecec;

    border: 1px solid #bbb;

    padding: 0;

}



.tabcontrol > .steps > ul > li.current

{

    background: #fff;

    border: 1px solid #bbb;

    border-bottom: 0 none;

    padding: 0 0 1px 0;

    margin-top: 0;

}



.tabcontrol > .steps > ul > li > a

{

    color: #5f5f5f;

    display: inline-block;

    border: 0 none;

    margin: 0;

    padding: 10px 30px;

    text-decoration: none;

}



.tabcontrol > .steps > ul > li > a:hover

{

    text-decoration: none;

}



.tabcontrol > .steps > ul > li.current > a

{

    padding: 15px 30px 10px 30px;

}



.tabcontrol > .content

{

    position: relative;

    display: inline-block;

    width: 100%;

    height: 35em;

    overflow: hidden;

    border-top: 1px solid #bbb;

    padding-top: 20px;

}



.tabcontrol > .content > .body

{

    float: left;

    position: absolute;

    width: 95%;

    height: 95%;

    padding: 2.5%;

}



.tabcontrol > .content > .body ul

{

    list-style: disc !important;

}



.tabcontrol > .content > .body ul > li

{

    display: list-item;

}

a[href='#previous'], a[href='#next']{

    display: none !important;

}



/*

 * HTML5 Boilerplate

 *

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */



/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */



html,

button,

input,

select,

textarea {

    color: #222;

}



body {

    font-size: 1em;

    line-height: 1.4;

}



/*

 * Remove text-shadow in selection highlight: h5bp.com/i

 * These selection rule sets have to be separate.

 * Customize the background color to match your design.

 */



::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



::selection {

    background: #b3d4fc;

    text-shadow: none;

}



/*

 * A better looking default horizontal rule

 */



hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



/*

 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440

 */



img {

    vertical-align: middle;

}



/*

 * Remove default fieldset styles.

 */



fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



/*

 * Allow only vertical resizing of textareas.

 */



textarea {

    resize: vertical;

}



/* ==========================================================================

   Chrome Frame prompt

   ========================================================================== */



.chromeframe {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ==========================================================================

   Author's custom styles

   ========================================================================== */



































/* ==========================================================================

   Helper classes

   ========================================================================== */



/*

 * Image replacement

 */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    /* IE 6/7 fallback */

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 150%;

}



/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */



.hidden {

    display: none !important;

    visibility: hidden;

}



/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screenreaders, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

    *zoom: 1;

}



.panel-heading{

    width: 80%;

}



@media (max-width: 500px){



.wizard > .content

{

    display: block;

}

#list{

    width: 100% !important;

    display: block;

}



}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media print,

       (-o-min-device-pixel-ratio: 5/4),

       (-webkit-min-device-pixel-ratio: 1.25),

       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



/* ==========================================================================

   Print styles.

   Inlined to avoid required HTTP connection: h5bp.com/r

   ========================================================================== */



@media print {

    * {

        background: transparent !important;

        color: #000 !important; /* Black prints faster: h5bp.com/s */

        box-shadow: none !important;

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    a[href]:after {

        content: " (" attr(href) ")";

    }



    abbr[title]:after {

        content: " (" attr(title) ")";

    }



    /*

     * Don't show links for images, or javascript/internal links

     */



    .ir a:after,

    a[href^="javascript:"]:after,

    a[href^="#"]:after {

        content: "";

    }



    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    thead {

        display: table-header-group; /* h5bp.com/t */

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    img {

        max-width: 100% !important;

    }



    @page {

        margin: 0.5cm;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}















label {

    width: 100%;

}



.card-input-element {

    display: none !important;

    transform: all 0.5s ease-in-out;

}



.card-input {

    margin: 0 0 0 20px;

    padding: 0;

    height: 80px;

    text-align: center;

    border: 1.5px solid #efeded;

    border-radius: 6px;

   /* overflow: hidden;*/

}



.card-input:hover {

    cursor: pointer;

}



.card-input-element:checked + .card-input {

    /*border: 1.5px solid #1e87f0;*/

    position: relative;



 }

.panel:after{

    content: "";

    position: absolute;

}

.outline:after{

    top: -6px;

    left: -6px;

    width: 100%;

    height: 100%;

    position: absolute;

    border: 1.5px solid #2295f2;

    padding: 5px;

    border-radius: 5px;



}