body {
    margin: 0;
    background-color: #f0f0f0;
    background-image: url("../resources/base-gradient-background.png");
    background-position: top;
    background-repeat: repeat-x;
}
/* Utils */
.ease {
    -webkit-transition: all .5s;
         -moz-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}
/********* Preview ***********/
.container {
    position: relative;
    width: 100vw;
    height: calc(100vh - 10px);
    font-family: "Arial", Helvetica, system-ui;
    text-align: center;
}

.preview {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 1067px;
    height: 600px;
}

.productImage {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
/********** Tabs **********/
.tabs {
    display: block;
    position: relative;
    width: 1067px;
    background: #fff;
    // border: 1px solid #f0f0f0;
    margin: 0 auto;
}
/********** Painting buttons effect **********/
.btn-container {
    display: inline-block;
    position: relative;
    margin: 0px 5px 0 5px;
    width: 66px;
    height: 66px;
    perspective: 500px;
    cursor: pointer;
}

@media(hover: hover) and (pointer: fine) {
    .btn-container:hover .btn-box,
    .btn-container:active .btn-box {
        transform: rotateX(25deg) scale(1.1);
        box-shadow: 0px 6px 8px #666666;
    }

    .btn-container:hover .gloss,
    .btn-container:active .gloss {
        transform: rotate(5deg) translateX(-20%) scale(1, 1.5);
        opacity: 1;
    }
}

.btn-container.selected .btn-box {
    transform: rotateX(35deg) scale(1.2);
    box-shadow: 0px 6px 8px #666666;
}

.btn-container.selected .gloss {
    transform: rotate(10deg) translateX(-20%) scale(1, 1.5);
    opacity: 1;
}

.btn-container .btn-box {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    overflow: hidden;
}

/********** BMW RT Color **********/
.btn-container .btn-box.color-blue {
    background: linear-gradient(166deg, #008cf0 0%, #008cf0 40%, #0044a8 50%, #008cf0 100%);
}
.btn-container .btn-box.color-burgundy {
    background: linear-gradient(166deg, #961500 0%, #961500 40%, #400000 50%, #961500 100%);
}
.btn-container .btn-box.color-grey {
    background: linear-gradient(166deg, #999f9d 0%, #999f9d 40%, #666969 50%, #999f9d 100%);
}
.btn-container .btn-box.color-black {
    background: linear-gradient(166deg, #514f49 0%, #514f49 40%, #1e1e1f 50%, #514f49 100%);
}
.btn-container .btn-box.color-orange {
    background: linear-gradient(166deg, #df5d00 0%, #df5d00 40%, #863800 50%, #df5d00 100%);
}
.btn-container .btn-box.color-red {
    background: linear-gradient(166deg, #dd2c00 0%, #dd2c00 40%, #6f0a00 50%, #dd2c00 100%);
}
.btn-container .btn-box.color-green {
    background: linear-gradient(166deg, #0cbe00 0%, #0cbe00 40%, #007100 50%, #0cbe00 100%);
}
.btn-container .btn-box.color-purple {
    background: linear-gradient(166deg, #8228ff 0%, #8228ff 40%, #46099f 50%, #8228ff 100%);
}
.btn-container .btn-box.color-white {
    background: linear-gradient(166deg, #ffffff 0%, #ffffff 40%, #e1e1e1 50%, #ffffff 100%);
}
.btn-container .btn-box.color-fluo {
    background: linear-gradient(166deg, #f1ff00 0%, #f1ff00 40%, #a4ad00 50%, #f1ff00 100%);
}
.btn-container .btn-box.color-gold {
    /* Radial version of gold color */
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
 /* background: linear-gradient(166deg, rgba(254,219,55,1) 0%, rgba(159,121,40,1) 47%, rgba(138,110,47,1) 49%, rgba(253,185,49,1) 100%); */
}
.btn-container .btn-box.color-turquoise {
    background: linear-gradient(166deg, #30d5c8 0%, #30d5c8 40%, #0a776e 50%, #30d5c8 100%);
}
/********** BMW CE-04 Color **********/
.btn-container .btn-box.color-pastel-blue {
    background: linear-gradient(166deg, #92c0bb 0%,#92c0bb 40%,#688985 50%,#92c0bb 100%);
}
.btn-container .btn-box.color-magellan-grey {
    background: linear-gradient(166deg, #6a6a6a 0%,#6a6a6a 40%,#3f3f3f 50%,#6a6a6a 100%);
}
.btn-container .btn-box.color-pastel-yellow {
    background: linear-gradient(166deg, #dcd788 0%,#dcd788 40%,#9c9961 50%,#dcd788 100%);
}
.btn-container .btn-box.color-pastel-pink {
    background: linear-gradient(166deg, #fbbce6 0%,#fbbce6 40%,#b184a0 50%,#fbbce6 100%);
}
.btn-container .btn-box.color-pastel-green {
    background: linear-gradient(166deg, #a0d5b3 0%,#a0d5b3 40%,#739886 50%,#a0d5b3 100%);
}
.btn-container .btn-box.color-dark-blue {
    background: linear-gradient(166deg, #0036a1 0%,#0036a1 40%,#001759 50%,#0036a1 100%);
}
.btn-container .btn-box.color-dark-pastel-blue {
    background: linear-gradient(166deg, #92c0bb 0%,#92c0bb 40%,#688985 50%,#92c0bb 100%);
}
.btn-container .btn-box.color-dark-pastel-yellow {
    background: linear-gradient(166deg, #948f5b 0%,#948f5b 40%,#686440 50%,#948f5b 100%);
}
.btn-container .btn-box.color-dark-pastel-pink {
    background: linear-gradient(166deg, #8d6176 0%,#8d6176 40%,#684857 50%,#8d6176 100%);
}
.btn-container .btn-box.color-dark-red {
    background: linear-gradient(166deg, #a40001 0%,#a40001 40%,#630000 50%,#a40001 100%);
}
.btn-container .btn-box.color-dark-pastel-green {
    background: linear-gradient(166deg, #618e78 0%,#618e78 40%,#3B564B 50%,#618e78 100%);
}


.btn-container .btn-box .gloss-container {
    position: absolute;
    transform: rotate(20deg);
    top: -30%;
    right: -70%;
}
.btn-container .btn-box .gloss-container .gloss {
    transition: all 0.5s cubic-bezier(0.5, 0, 0.5, 1);
    width: 66px;
    height: 132px;
    opacity: 0.5;
    background: radial-gradient(circle at bottom, white 0, rgba(255, 255, 255, 0) 100%);
}

.pdf-actions {
    width: 100%;
    text-align: center;
    margin: 30px 0;
}

#downloadPdf {
    padding: 14px 24px;
    border: none;
    border-radius: 4px;
    background: #1c1c1c;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

#downloadPdf:hover {
    background: #444;
}