/* CSS Overrides */

/* structure */
main#line-information{
    margin-bottom: -5% !important;
}
main#line-information img{
    display:none;
}
/* 1. Wrapper*/
#product-data {
    width: 100%;
    margin: 0 auto;
  }
  
  #product-data::after {
    display: table;
    content: "";
    clear: both;
  }
  /* 2. content */
  #product-data #product-content {
    width: 65%;
    margin: 0 0 40px;
    float: left;
  }
  
  /* panel */
  #product-data #add-basket{
    background: #e7eef1;
    padding: 40px 40px 60px;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0 12px 0 -6px rgb(97 54 101);;
  
    position: sticky;
    /* right: 5%; */
    width: 28%;
    /*float: right;*/
  }

/* elements */
.product-component-reveal{
    font-size: 0.85em;
}
#product-data .attributes {
    width: 100% !important;
    }

#product-data #add-basket {
    background: linear-gradient(to bottom, rgb(97 54 101) 0%,rgba(55,31,58,1) 100%);
    color: #fff;
    padding: 30px;
    border-radius: 20px;
    font-family: "Open Sans";
    
    vertical-align: top;
    /* margin: 20px 0 0 5%; */
    margin-bottom: 2%;
    top: 140px;
}

.add-basket-instruction{    color: rgba(230, 206, 203, 1);
}
.product-component-item, #make-component-selection{
    margin-bottom: 15px;
    cursor: pointer;
    display: block;
    line-height: 1.2em;
    color: #FFF;
    /* width: 70%; */
}

#product-data .purple-button {
    background:rgb(97,54,101);
    border-radius: 5px;
    width: 100%;
    padding: 0;
    text-align: center;
    margin-top: 20px;
    border: 2px solid #FFF;
    font-family: "open sans";
    font-weight: bolder;
}

.product-component{
    padding: 30px;
    border-radius: 20px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    margin-bottom:15px;
    margin-top:15px;
    -webkit-transition: background-color 1500ms linear;
    -moz-transition: background-color 1500ms linear;
    -o-transition: background-color 1500ms linear;
    -ms-transition: background-color 1500ms linear;
    transition: background-color 1500ms linear;
}

.product-component .padded:first-child{
    cursor:pointer;
}

.product_data_components{
    display:none;
}
.product-row-opener, .product-row-closer{
    border-collapse:separate;
    border-spacing:0 15px;
}
.product-row-opener td, .product-row-content td, .product-row-closer td{
    background-color: rgba(127, 63, 191, 0.13);

}
.product-row-opener td{
    border-radius:15px 15px 0 0;
    padding:15px 30px 0 30px;
}
.product-row-content td{
    padding: 0 30px !important;
}
.product-row-content td h3{
    margin-top:15px;
}

.product-row-closer td{
    border-radius:0 0 15px 15px;
    padding: 15px 30px;
}

input[type=checkbox]{
    text-align: center;
    border: 2px #e1e1e1 solid;
    font-size: 1.6rem;
    width: 2rem;
    height:2rem;
    color: #222;
    font-weight: 600;
    padding: 0.5rem;
    margin: 0.5% 0.5% 0.5% 2%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* appearance: none; */
    /* -webkit-appearance: none; */
    background-color:#FFF;
}
input[type=checkbox]:checked{
    background-color:#FFF;
    color:rgb(97,54,101);
}

#product-data #main-image {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 20px 0 0;
    /* width: 40%; */
    text-align: center;
    margin-bottom: 2%;
    width: 100%;

    /* margin: 0 auto; */
}
#product-data #main-image .thumb{
    max-width: 500px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    -moz-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.images figure:nth-child(9),.images figure:nth-child(17),.images figure:nth-child(26) {
    margin-right: 0;
}
.images figure:nth-child(n+9) {
    margin-top: 10px;
}
@media only screen and (min-width: 1024px){
    /*
    #product-data #add-basket {
        position: fixed;
        display: block;
        top: 215px;
        right: 30px;
        max-width: 400px;
        width: 33%;

    }

    #product-components{
        width: 66%;
    }

    */
    #product-data h3 {
        font-size: 2em;
        font-family: "Open Sans";
    }

    #components {
        color: #fff !important;
        line-height: 2.0rem;
        color: white;
        /* padding: 10px 15px !important; */
    }
}
#code{

    color: #FFF;
    word-break: break-word;
}

.component-options {
	display:inline-block;
	position:relative;
	vertical-align:top;
	width:76%;
	margin-left:1%;
}

.device-wrapper{overflow: unset;}
#frmData{overflow: unset !important;}
#product-data{overflow: unset;}
.icon-continue{
    text-align:center;
    display:flex;
    justify-content:center;
    padding-top: 20px;
}
.icon-continue img{
    cursor:pointer;
    display:none;
    width:60px;
}
/* Footer */
#footer-social-icons{
    position: fixed;
    bottom: 70px;
    left: 0px;
    z-index: 2;
    width: 47px;
    background-color: rgba(255,255,255,0.9);
    padding: 5px 3px;
    /* text-align: center; */
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: rgb(0 0 0 / 45%) -3px 13px 32px -9px;
    -moz-shadow: rgba(0, 0, 0, 0.45) -3px 13px 32px -9px;
    box-shadow: rgb(0 0 0 / 45%) -3px 13px 32px -9px;
}

#footer-social-icons img{
    width:35px;
    height:auto;
    padding: 0px 5px 10px 0;
}
#footer-social-icons a:last-child img{
    padding: 0px 5px 0px 0;
}

#news article, #latest-blog article{
    width:20%;
}
/* small laptop */
@media only screen and (max-height: 700px) {
  #product-data #add-basket {
        /* position: absolute; */
    }
}
/* Small desktop */
@media only screen and (max-width: 1170px) and (min-width: 768px){

}
@media only screen and (min-width: 768px) and (max-width: 1170px){
    #product-data #add-basket {
        margin: 20px 0 0 2%;
        width: 33%;
    }
}
/* tablet*/
@media only screen and (min-width: 767px){
     #news article, #latest-blog article{
        width:20%;
    }   
}
/* Mobile */
@media only screen and (max-width: 767px){
#product-data #add-basket {
    width:92%;
}

}
@media only screen and (max-width: 767px){
    #product-data #product-content {
        width: 96%;
    }
    #product-data #add-basket {
        box-sizing: border-box;
        position: relative;
        width:98%;
        top: -55px;
    }
    #news article, #latest-blog article{
        width:80%;
    }
}