/* CSS info
--------------------------------------------------------

product: X-CONFIG CIM
version: base edition
version: 1.1.0
last modified: 04.08.2015 by Xioni AG

---------------------------------------------------------*/

/* CSS structure new
--------------------------------------------------------

1. accordion
    1.1. header
        1.1.1. headline
        1.1.2. toggle
    1.2. body
        1.2.1. image
        1.2.2. font
    1.3. input
        1.3.1. image select
        1.3.2. select box & btn
        1.3.3. checkbox with image
        1.3.4. checkbox without image
    1.3. button
2. accordion footer
    2.1. successful configuration
    2.2. refresh configuration
    2.3. configuration listing
3. staff price
4. shopware style
5. checkbox styling

---------------------------------------------------------*/

.value-img-select,
.value-img-select,
.accordion_configurator_body_group_description_image img,
.value-nested-img {
    width: 100%;
    height: auto;
    border-radius: 0!important;
}

.accordion_configurator_body_group_description_image img{
    border-bottom: 1px solid #616060;
}

* .product--configurator input,
* .product--configurator select,
* .product--configurator label,
* .product--configurator button,
.btn--refresh-site a {
    cursor: pointer;
}

.value-img-nested:hover .value-img-select,
.value-nstd-wth-img:hover .value-nested-img,
.accordion_configurator_body_select,
.accordion_configurator_body_select:hover select,
.accordion_configurator_body_select:hover:after,
.accordion_configurator_body_select:after,
.input_submit:hover,
.value-checkbox-submit:hover,
.btn--refresh-site a:hover {
    transition: all 0.5s ease;
}


/* 1. accordion
---------------------------------------------------------*/

.ui-accordion .ui-accordion-content {
    border: 0;
    padding: 0;
    border-radius: 0;
}

.accordion_configurator_body_group_description_image {
    display: flex;
}

/*-- 1.1. header --*/

.accordion_head {
    width: 100%;
    height: 50px;
}

/* collapse arrow hide */

.ui-accordion .ui-accordion-header .ui-icon {
    display: none!important;
}


/*-- 1.1.1. headline --*/

.accordion_head span {
    width: 100%;
    height: 100%;
    display: inline-block;
}


.accordion_head span a {
    font-size: 18px!important;
    font-weight: 400;
    height: 100%;
    line-height: 30px;
}

.ui-accordion .ui-accordion-header {
    position: relative;
    border: 0px;
    border-radius: 0px;
    background: #ededed;
}


/* headline color - inactive */

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #616060!important;
}

/* headline color - inactive hover*/

.ui-state-active:hover a,
.ui-state-active:hover a:link {
    color: #616060!important;
}

/*-- 1.1.2. toggle --*/

/* global */

.accordion_icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: transparent!important;
}

.accordion_icon span {
    width: 100%;
}

.accordion_icon_nested {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}


/* toggle is active -> - */

.accordion_icon_active {
    background-color: #9b9999;
}

.accordion_icon_active:after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    border: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: #ffffff;
}

/* toggle is inactive -> + */

.accordion_icon_open {
    background-color: #616060;
}

.accordion_icon_open:after,
.accordion_icon_open:before {
    content: '';
    display: block;
    width: 2px;
    height: 20px;
    border: 0;
    position: absolute;
    top: 25%;
    left: 50%;
    background-color: #ffffff;
}

.accordion_icon_open:after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* toggle is checked -> arrow */

.accordion_icon_checked {
    background-color: rgb(123, 222, 69);
}

.accordion_icon_checked:after {
    content: '';
    display: block;
    width: 8px;
    height: 20px;
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -6px;
    z-index: 1000;
    position: absolute;
    top: 16px;
    left: 20px;
}

/*-- 1.2. body --*/

.accordion_configurator_body_group_description_content {
    padding: 30px;
    display: inline-block;
    width: 100%;
}

/*-- 1.1.1. body image --*/

/*-- 1.1.2. body font --*/

span.acc_descr_head,
span.acc_decscr_txt {
    display: inline-block;
    width: 100%;
    color: #616060;
}


span.acc_descr_head {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

span.acc_decscr_txt {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

/*-- 1.3. input --*/

/*-- 1.3.1 image select --

.value-wrapper {
    display: inline-block;
}

.value-img-nested:nth-child(1n),
.value-nstd-wth-img:nth-child(1n) {
    float: left;
}


.value-img-nested:nth-child(2n),
.value-nstd-wth-img:nth-child(2n) {
    float: right;
}

.value-img-nested,
.value-nstd-wth-img {
    width: 45%;
    height: auto;
    position: relative;
    margin-bottom: 20px;
}


.value-img-nested:nth-last-child(-n+2) {
    margin-bottom: 0px;
}
*/

.value-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.value-row:last-of-type {
    margin-bottom: 0;
}

.value-row .value-col {
    float: left;
    position: relative;
}

.value-row .value-col:first-of-type {
    margin-right: 10px;
}

.value-row .value-col:last-of-type {
    margin-left: 10px;
}

.value-row .value-col-6 {
    width: calc(50% - 10px);
}

.value-row .value-col-4 {
    width: calc(33.333% - 10px);
}

.value-img-nested:hover .value-img-select,
.value-nstd-wth-img:hover .value-nested-img {
    opacity: .75;
}

.value-checked {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    height: 25px;
    width: 25px;
    border-radius: 35px;
    background-color: rgb(123, 222, 69);
    box-shadow: 0 0 5px rgba(105, 105, 105, 0.10);
}

.value-checked:after {
    content: '';
    position: absolute;
    display: block;
    transform: rotate(40deg);
    left: 10px;
    top: 5px;
    width: 4px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;

}

/*-- 1.3.2. select box and btn --*/

.accordion_configurator_body_select select,
.accordion_configurator_body_input input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
}

.accordion_configurator_body_select select {
    border-radius: 0;
    font-size: 1em;
    width: 100%;
}

.accordion_configurator_body_select select::-ms-expand {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);
    /* Good browsers :) */
    opacity: 0;
}

.acc_input {
    box-shadow: none!important;
    border: none!important;
    background: transparent!important;
    border-top-color: none!important;
    width: 100%!important;
}

/* select box styling*/

.accordion_configurator_body_select,
.accordion_configurator_body_input,
.input_submit {
    /*property*/
    position: relative;
    /*box styling*/
    border: 1px solid #616060;
    background-color: #ffffff;
}

.accordion_configurator_body_input {
    margin: 30px 0 15px 0;
}

.input_submit {
    padding: 10px;
    background-color: #ededed;
    border: 0;
    color: #616060;
}

/* select box inner styling*/

.accordion_configurator_body_select select {
    /*property*/
    padding: 10px 43px 10px 15px;
    /*font styling*/
    font-size: 14px;
    color: #616060;
    background-color: transparent;
}

/* select box arrow styling*/

.accordion_configurator_body_select:after {
    /*position*/
    content: "";
    top: 17px;
    right: 15px;
    width: 0;
    height: 0;
    /*arrow styling*/
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: #616060 transparent transparent;
    -webkit-user-select: none;
    user-select: none;
    display: block;
    position: absolute;
    pointer-events: none;
}

.accordion_configurator_body_select:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #616060;
    top: 0;
    right: 43px;
}

/* select box hover*/

.accordion_configurator_body_select:hover {
    border-color: #4d4d4d;

}


/* select box inner hover*/

.accordion_configurator_body_select:hover select {
    color: #4d4d4d;

}


/* select box arrow hover*/

.accordion_configurator_body_select:hover:after {
    border-color: #4d4d4d transparent transparent;
}


/* input box arrow hover*/

.input_submit:hover {
    background-color: #616060;
    color: #ffffff;
    /*border-color change*/
    box-shadow: 0 0 10px #c7c7c7;

}

/*--- selection submit btn ---*/

.value-checkbox-submit {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-weight: 100;
}

/* submit button */

.value-checkbox-submit {
    position: relative;
    border: 1px solid #616060;
    background-color: #ffffff;
    padding: 10px;
    background-color: #ededed;
    border: 0;
    color: #616060;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.value-checkbox-submit:hover {
    background-color: #616060;
    color: #ffffff;
    box-shadow: 0 0 10px #c7c7c7;

}


/*-- 1.3.3. checkbox with image --*/

.value-nstd-wth-img {
    margin-bottom: 35px;
}

.value-nstd-wth-img .value-nested-label {
    padding: 0;
    height: 100%;
    position: absolute;
    top: 0;
    overflow: visible;
}

.value-nstd-wth-img .value-nested-label span {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}


.value-nested-label,
.value-img-label {
    color: #616060;
    font-size: 10px;
    text-align: center;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    word-wrap: break-word;
    padding: 5px 0;
}


.value-nstd-wth-img:nth-last-child(-n+2) {
    margin-bottom: 50px;
}

.value-nstd-wth-img .value-nested-checkbox {
    position: absolute;
    left: 50%;
    bottom: -17px;
    transform: translate(-50%, 0);
}

/*-- 1.3.4. checkbox without image --*/

.value-nstd-wtho-img {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
}

.value-nstd-wtho-img:last-of-type {
    margin-bottom: 0;
}

.value-nstd-wtho-img .value-nested-label {
    display: inline-block;
    text-align: left;
    width: 80%;
    padding: 0;
    overflow: visible;
    font-size: 14px;
    float: left;
    height: auto;
    line-height: 25px;
    padding-left: 9px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}


/* 2. accordion footer
---------------------------------------------------------*/

/*-- 2.2.1. successful configuration --*/

.config--is-successful {
    color: #3b9044;
    background-color: rgba(123, 222, 69, 0.25);
    font-weight: 60;
    font-size: 13px;
    line-height: 20px;
    float: left;
    text-align: left;
    padding: 15px 0;
    padding-left: 45px;
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}

.config--is-successful:after {
    content: '';
    width: 5px;
    height: 16px;
    border: solid #7bde45;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 10px;
    left: 20px;
    position: absolute;
    z-index: 1000;
}

.config--is-successful:before {
    content: "";
    width: 17px;
    height: 17px;
    border: 2px solid #3b9044;
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    left: 10px;
    z-index: 0;
    top: 13px;
}


.config--is-successful {
    display: none;
}

/*-- 2.2.2.  refresh configuration --*/

.refresh-icon {
    width: 60%;
    height: auto;
    display: block;
}


.btn-wrapper {
    display: inline-block;
    width: 100%;
    text-align: right;
    margin-bottom: 15px;
}

.btn--refresh-site a {
    font-size: 13px;
    text-decoration: none;
    color: #616060;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: #616060!important;
    line-height: 32px;
    height: 32px;
    opacity: .5;
}

.btn--refresh-site a:hover {
    opacity: 1;
}

.btn--refresh-site a .config-restart {
    font-size: 19px;
    margin-right: 5px;
    display: inline-block;
    line-height: 0:
}


/*-- 2.2.3. configuration list --*/

.config--has-summary {
    position: relative;
}

/*--- configuration summary list ---*/

.summary--has-headline {
    margin-bottom: 15px;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
}

/* global list stying */

.summary--has-list {
    display: inline-block;
    width: 100%;
}

.config--has-summary .summary--has-list ul li {
    position: relative;
    list-style-type: none;
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 12px;
}

.config--has-summary .summary--has-list ul li:last-of-type {
    margin-bottom: 0;
}

.config-list-right {
    float: right;
}

.config-list-left {
    float: left;
    margin-right: 5%;

}

.config-list-left,
.config-list-right {
    width: 47.5%;
}

/* check mark - circle global */

.config--has-summary .summary--has-list ul li.active::before,
.config--has-summary .summary--has-list ul li.notactive::before {
    content: "";
    width: 17px;
    height: 17px;
    border: 2px solid;
    border-top-color: rgb(59, 144, 68);
    border-right-color: rgb(59, 144, 68);
    border-bottom-color: rgb(59, 144, 68);
    border-left-color: rgb(59, 144, 68);
    border-radius: 50%;
    background-color: transparent;
    position: absolute;
    left: 0px;
    z-index: 0;
    top: -2px;
}

/* check mark - arrow global */

.config--has-summary .summary--has-list ul li.active::after,
.config--has-summary .summary--has-list ul li.notactive::after {
    content: '';
    display: block;
    width: 5px;
    height: 16px;
    border: solid;
    border-top-color: rgb(123, 222, 69);
    border-top-width: medium;
    border-right-color: rgb(123, 222, 69);
    border-right-width: medium;
    border-bottom-color: rgb(123, 222, 69);
    border-bottom-width: medium;
    border-left-color: rgb(123, 222, 69);
    border-left-width: medium;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1000;
    position: absolute;
    left: 10px;
    top: -5px;
}

/* check mark - is active - color */

.config--has-summary .summary--has-list ul li.notactive::before {
    /* green circle */
    border-color: #3b9044;
}

.config--has-summary .summary--has-list ul li.notactive::after {
    /* green arrow */
    border-color: #7bde45;
}

/* check mark - no active - color */

.config--has-summary .summary--has-list ul li.notactive::before {
    /* grey circle */
    border-color: #8d8d8d;
}

.config--has-summary .summary--has-list ul li.notactive::after {
    /* grey arrow */
    border-color: #d9d9d9;
}

/* 3. staff price
---------------------------------------------------------*/

.x-config--staff-prices {
    margin-bottom: 5px;
    display: inline-block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding-top: 15px;
}


.x-config--has-staff-prices {
    width: 100%;
}

.x-config--has-staff-prices thead {
    text-align: left!important;
}

.x-config--has-staff-prices thead tr th {
    padding: 5px 0!important;
    text-align: left;
    font-weight: 600;
}


.x-config--has-staff-prices thead tr th,
.x-config--has-staff-prices tbody tr th {
    color: #616060;
    font-size: 12px;
    background-color: transparent;
}

.x-config--has-staff-prices tbody tr th {
    padding: 10px 5px!important;
    text-align: left!important;
    font-weight: 100;
}

.x-config--has-staff-prices tbody tr:nth-child(odd) {
    background-color: #f5f5f5!important;
}

/* 4. shopware styles
---------------------------------------------------------*/

.product--details .buybox--quantity {
    width: 20%;
}

.x-submit {
    width: 78%;
}

.config--has-footer {
    display: inline-block;
    margin-top: 20px;
    width: 100%;
}

.product--actions {
    margin-top: 5px;
}

.product--actions form,
.product--actions a {
    width: 33.333%;
    display: inline-block;
}

#x_configurator_scaletable {
    margin: 20px 0;
    display: inline-block;
    width: 100%;
}

.select-field::after,
.js--fancy-select::after {
    content: ""!important;
    border-left: 0;
    font-family: none;
}

/* 6. checkbox styling
---------------------------------------------------------*/

/* The checkbox-wrapper */

.checkbox-wrapper {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 4px;
}

.value-nstd-wth-img .checkbox-wrapper {
    width: 100%;
    margin-top: 5px;
}

.value-nstd-wth-img .checkbox-wrapper .value-nstd-wth-img .value-nested-checkbox,
.value-nstd-wth-img .checkbox-wrapper .checkbox-checkmark {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translate(-50%, 0);
}

/* Hide the browser's default checkbox */

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    left: 0;
    height: 20px;
    width: 20px;
    z-index: 1000;
}

/* Create a custom checkbox */

.checkbox-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: rgba(237, 237, 237, 0.5);
}

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

.checkbox-wrapper:hover input ~ .checkbox-checkmark {
    background-color: #ededed;
}

/* When the checkbox is checked, add a blue background */

.checkbox-wrapper input:checked ~ .checkbox-checkmark {
    background-color: #616060;
}

/* Create the checkbox-checkmark/indicator (hidden when not checked) */

.checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkbox-checkmark when checked */

.checkbox-wrapper input:checked ~ .checkbox-checkmark::after {
    display: block!important;
}


/* Style the checkbox-checkmark/indicator */

.checkbox-wrapper .checkbox-checkmark:after {
    left: 7px;
    top: 3px;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* fixed ph-template.css */

#x_configurator {
    width: 380px;
    float: right;
    margin-right: 15px;
    display: inline-block;
    font-family: 'OpenSans', sans-serif !important;
}

.accordion_configurator_body_group_description_content {
    display: inline-block;
    padding: 30px;
    width: 318px;
}

.accordion_configurator_body_select input[type="text"],
.accordion_configurator_body_select select {
    margin: 0;
}