@charset "utf-8";
/* CSS Document */

.editor--nav {
    overflow: scroll;
}

.back-button{
    position: absolute;
    top: 22px;
    right: 30px;
    background: #000;
    color: #fff;
    padding: 8px 16px;
}

.editor--choose--size .select .option.has-description{
    padding: 9px 35px;
}

.editor--choose--size .select .option .description{
    font-size: 12px;
    margin-top: 4px;
    font-weight: normal;
    text-align: center;
}

/*---Responsive---*/
@media only screen and (max-width:62em) {
    div#pagecontent {width:100%;}
    div#marbleditor {height: 90vh !important;overflow: hidden;}
    div#masternav {width:48px;}
    div#masternav, .menu-nav {height: unset}
    .menu-nav {position: relative;background-color:transparent;width: 48px;}
    .menu-nav > .editor--tab {display: flex; position: fixed !important; width: 100%; flex-direction: initial; height: auto;}
    .nav-toggle, .nav-cart, .nav-user, .nav-cart a, .nav-user a {width: 48px;height: 48px;}
    .nav-cart, .nav-user {background-color: inherit;}
    .editor--screen {position: relative;width: 100%;height: calc(100vh - 285px);}
    .editor--nav {position:fixed;bottom:0;left:0;height:285px;width: 100%;padding: 15px !important;overflow: hidden;}
    .editor--selection {columns: inherit;-webkit-columns: inherit;-moz-columns: inherit;overflow-y:scroll;display: flex;-webkit-overflow-scrolling: touch;}
    .editor--selection li {min-width:100px;max-width: 100px !important;padding: 3px 5px;min-height:initial;margin-bottom: 10px;}
    .editor--selection--pop.active {height: 250px;left: 0;top: 50px;width: 100%;}
    .editor--choosen--marble {width: 120px !important;font-size: 12px;}
    .editor--selection li a {cursor: pointer;font-size: 12px;line-height: 14px !important;display: block;}
    .editor--tab {position: fixed;bottom: 0;z-index: 10000;width: 100%;left: 0;display: flex;border-top: 2px solid #a37866;}
    .editor--tab--tabletop a, .editor--tab--lazy a, .editor--tab--tableleg a {padding: 8px 0px;font-size: 10px;line-height: 13px;}
    .editor--tab div a > * {display: inline-block;vertical-align: middle;}
    .editor--smalltitle {font-size: 11px;margin-bottom: 15px;}
    .editor--stepdesc {font-size: 14px;margin-bottom: 0px;}
    .editor--mobile--message {display:block;position: absolute;top: 60px;right: 15px;font-size: 12px;}
    .selection--name, .selection--price, .selection--sku {float: none;display: block;font-size: 10px;line-height: 11px;text-align:center;}
    .editor--choose--size select {padding: 18px;border: 1px solid #000000 !important;background: url(../img/icon--select--arrow.svg) 95% / 20% no-repeat #fff;background-size: 10px;}
    .editor--selection--pop.active input[type=submit] {right: 15px;bottom: 65px;padding: 10px 15px;}
    .editor--choose--size {width: calc(100% - 125px) !important;}
    .editor--choose--size .select {text-align: left;display: flex;flex-wrap: wrap;column-gap: 5px;}
    .editor--choose--size .select .option {width: auto; display: inline-block;padding:6px;}
    .back-button {top: 10px;right: 15px;}
    .totalprice, .editor--totalprice {font-size: 12px;line-height:14px;}
    .editor--totalprice {right:10px;}
    .selection--sku {font-size: 8px;}
    #marbleditor button.editor--addtocart.active {
        width: 75px;
        bottom: initial;
        right: initial;
        position: relative;
        left: initial;
        font-size: 10px;
        padding: 5px;
        height: 85px;
        font-weight: 900;
        letter-spacing: 1px;
        top: 60%;
        transform: translate(0%,-50%);
    }
    #marbleditor button.editor--addtocart i {margin-bottom: 10px;margin-right: 0px;display: block;font-size: 26px;}
    .editor--summary--text.active ul.editor--selection li:last-child:hover {box-shadow: none;}
    .editor--selection li a img.featured {top:0px !important;right:0px !important;}
    .editor--choose--size .select .option.has-description{
        padding: 6px;font-size: 13px;
    }
    .editor--choose--size .select .option .description{font-size: 10px;margin-top: 2px;}
    
    #marbleditor .has-add-to-quote button.editor--addtocart.active {height: 50%;}
}

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

div#logonav {
    width: 50%;
}

#topImage,
#lazySusanImage{
    position: absolute;
}

#topImage{
    z-index: 9;
}

#lazySusanImage{
    z-index: 10;
}

[v-cloak] {
    display:none;
}

li.hide{
    display: none !important;
}

.select.profile-select{
    text-align: left;
}

.select .option.profile-option {
    padding: 0px;
    border-radius: 100%;
    border: 1px solid #ffffff;
    margin: 5px;
    overflow: hidden;
    width: 70px;
    height: 70px;
    display:inline-block;
}

.select .option.profile-option.selected {
    border: 1px solid black;
}

span.editor--smalltitle-circle {
    background-color: #bba59c;
    color: #000000;
    padding: 4px 8px;
}

.menu-nav{
    box-shadow: none;
}

.editor--tab > div.active{
    background: #fff;
}

.editor--tab--mixmatch {
    display: none !important;
}

.editor--selection li a {
    position: relative;   
}

.editor--selection li a img.featured {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    right: -10px;
}

/*for add to quote*/
.editor--selection li.button-container:hover {
    box-shadow: none;
}

.has-add-to-quote .editor--addtocart {
    width: 50%;
    left: 0;
}

.has-add-to-quote .editor--addtoquote {
    width: 50%;
    left: auto;
    right: 0;
    background-color: #66a39d;
    font-size: 14px;
    letter-spacing: 6px;
    font-weight: 700;
}

.selection--sku {
    display: block;
    text-align: left;
}

.disclaimer {
    font-size: 10px;
    line-height: 13px;
    text-align: right;
    letter-spacing: normal;
    font-weight: normal;
    margin-bottom: 5px;
}