@font-face {
    font-family: 'poppinsmedium';
    src: url('../fonts/poppinsmedium.eot');
    src: url('../fonts/poppinsmedium.eot?#iefix') format('embedded-opentype'),url('../fonts/poppinsmedium.woff2') format('woff2'),url('../fonts/poppinsmedium.woff') format('woff'),url('../fonts/poppinsmedium.ttf') format('truetype'),url('../fonts/poppinsmedium.svg#poppinsmedium') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppinsregular.eot');
    src: url('../fonts/poppinsregular.eot?#iefix') format('embedded-opentype'),url('../fonts/poppinsregular.woff2') format('woff2'),url('../fonts/poppinsregular.woff') format('woff'),url('../fonts/poppinsregular.ttf') format('truetype'),url('../fonts/poppinsregular.svg#poppinsregular') format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'poppinssemibold';
    src: url('../fonts/poppinssemibold.eot');
    src: url('../fonts/poppinssemibold.eot?#iefix') format('embedded-opentype'),url('../fonts/poppinssemibold.woff2') format('woff2'),url('../fonts/poppinssemibold.woff') format('woff'),url('../fonts/poppinssemibold.ttf') format('truetype'),url('../fonts/poppinssemibold.svg#poppinssemibold') format('svg');
    font-weight: normal;
    font-style: normal
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.clearfix::before,.clearfix::after {
    content: '';
    display: table
}

.clearfix::after {
    clear: both
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-x: hidden
}

body {
    font-family: 'poppinsregular';
    font-size: 14px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

@media (max-width: 1170px) {
    body {
        font-size:13px
    }
}

hr {
    display: block;
    border: none;
    height: 1px;
    background: #dadada;
    width: 100%;
    margin: 10px 0 30px 0
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.text-center {
    text-align: center !important
}

.text-left {
    text-align: left !important
}

.text-right {
    text-align: right !important
}

.mrg {
    margin: 0 !important
}

button,a {
    cursor: pointer
}

ul{
    list-style: none;
}
.twitter-typeahead {
    width: 100%;
    float: left;
    margin: 0px 0px 5px 0px
}

.bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 100px
}

.tt-query {
    width: 100%
}

.typeahead,.tt-query,.tt-hint {
    font-family: 'poppinsregular';
    font-size: 15px;
    color: #181818;
    outline: medium none;
    padding: 4px 12px;
    width: 100%
}

.typeahead {
    background-color: #fff
}

.tt-hint {
    color: #181818
}

.tt-dropdown-menu {
    background-color: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 0px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    margin-top: 0px;
    padding: 0px 0;
    width: 100%;
    min-width: 280px
}

.tt-suggestion {
    font-family: 'poppinsregular';
    font-size: 15px;
    color: #181818;
    line-height: 20px;
    padding: 3px 20px
}

.tt-suggestion.tt-is-under-cursor {
    background-color: #002a45;
    color: #fff
}

.tt-suggestion p {
    margin: 0
}

.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 7px 20px 9px;
    height: 38px;
    text-transform: uppercase;
    margin: 0 20px 20px 0;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 22px;
    color: #dadada;
    font-weight: normal
}

.btn.btnBlock {
    display: block;
    width: 100%
}

.btn.btnSmall {
    padding: 5px 20px;
    height: 30px
}

.btn.btnPrimary {
    background: #002a45;
    border-color: #002a45;
    color: #fff;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnPrimary:hover,.btn.btnPrimary:focus {
    background: #002a45;
    border-color: #002a45;
    color: #fff;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnPrimary:active {
    background: #002a45;
    border-color: #002a45;
    color: #fff
}

.btn.btnPrimary:focus,.btn.btnPrimary:active {
    outline-style: dotted;
    outline-offset: 0;
    outline-width: 1px;
    outline-color: #dadada
}

.btn.btnPrimary[disabled] {
    background: #002a45;
    border-color: #002a45;
    cursor: not-allowed;
    color: #fff
}

.btn.btnPrimary[disabled]:focus,.btn.btnPrimary[disabled]:active {
    outline-style: none;
    outline-offset: 0;
    outline-width: 0;
    outline-color: none
}

.btn.btnSecondaryOne {
    background: transparent;
    border-color: #002a45;
    color: #002a45;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnSecondaryOne:hover,.btn.btnSecondaryOne:focus {
    background: #002a45;
    border-color: #002a45;
    color: #fff;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnSecondaryOne:active {
    background: #002a45;
    border-color: #002a45;
    color: #fff
}

.btn.btnSecondaryOne:focus,.btn.btnSecondaryOne:active {
    outline-style: dotted;
    outline-offset: 0;
    outline-width: 1px;
    outline-color: #dadada
}

.btn.btnSecondaryOne[disabled] {
    background: #fff;
    border-color: #dadada;
    cursor: not-allowed;
    color: #dadada
}

.btn.btnSecondaryOne[disabled]:focus,.btn.btnSecondaryOne[disabled]:active {
    outline-style: none;
    outline-offset: 0;
    outline-width: 0;
    outline-color: none
}

.btn.btnSecondaryTwo {
    background: #fff;
    border-color: #dadada;
    color: #dadada;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnSecondaryTwo:hover,.btn.btnSecondaryTwo:focus {
    background: #fff;
    border-color: #002a45;
    color: #002a45;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.btn.btnSecondaryTwo:active {
    background: #fff;
    border-color: #002a45;
    color: #002a45
}

.btn.btnSecondaryTwo:focus,.btn.btnSecondaryTwo:active {
    outline-style: dotted;
    outline-offset: 0;
    outline-width: 1px;
    outline-color: #dadada
}

.btn.btnSecondaryTwo[disabled] {
    background: #fff;
    border-color: #dadada;
    cursor: not-allowed;
    color: #dadada
}

.btn.btnSecondaryTwo[disabled]:focus,.btn.btnSecondaryTwo[disabled]:active {
    outline-style: none;
    outline-offset: 0;
    outline-width: 0;
    outline-color: none
}

.linkButton {
    display: inline-block;
    text-align: center;
    touch-action: manipulation;
    cursor: pointer;
    background: none;
    border: none;
    font-family: 'poppinsmedium';
    font-size: 14px;
    color: #002a45;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

@media (max-width: 1170px) {
    .linkButton {
        font-size:13px
    }
}

.linkButton:hover {
    color: #dadada;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent
}

.dropup,.dropdown {
    position: relative
}

.dropdown-toggle:focus {
    outline: 0
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    background-clip: padding-box
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto
}

.dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 22px;
    color: #dadada;
    white-space: nowrap
}

.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus {
    text-decoration: none;
    color: #181818;
    background-color: #dadada
}

.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus {
    color: #cd6500;
    text-decoration: none;
    outline: 0;
    background-color: #dadada
}

.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    color: #c9c9c9
}

.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none;
    cursor: not-allowed
}

.open>.dropdown-menu {
    display: block
}

.open>a {
    outline: 0
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

.progress {
    overflow: hidden;
    height: 20px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
}

.progress-bar {
    float: left;
    width: 0%;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #fff;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-transition: all width .6s ease ease;
    -moz-transition: all width .6s ease ease;
    -ms-transition: all width .6s ease ease;
    -o-transition: all width .6s ease ease;
    transition: all width .6s ease ease
}

.progress-striped .progress-bar,.progress-bar-striped {
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px
}

.progress.active .progress-bar,.progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite
}

.progress-bar-success {
    background-color: #5cb85c
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
}

.progress-bar-info {
    background-color: #5bc0de
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
}

.progress-bar-warning {
    background-color: #f0ad4e
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
}

.progress-bar-danger {
    background-color: #d9534f
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)
}

.formGroup {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 15px 0;
    position: relative
}

.formGroup.halfGroup {
    width: 50%
}

.formGroup.halfGroup:nth-child(odd) {
    padding-right: 5px
}

.formGroup.halfGroup:nth-child(odd).fieldPassword em.fa {
    right: 21px
}

.formGroup.halfGroup:nth-child(even) {
    padding-left: 5px
}

.formGroup label {
    display: block;
    position: relative;
    margin-bottom: 5px;
    font-family: 'poppinsmedium';
    font-size: 14px;
    line-height: 18px;
    color: #2c3f4c;
    font-weight: normal
}

.formGroup label.control:last-child {
    margin-bottom: 0
}

.formGroup input[type='text'],.formGroup input[type='date'],.formGroup input[type='password'],.formGroup input[type='email'],.formGroup input[type='number'],.formGroup textarea {
    width: 100%;
    height: 38px;
    border: solid 1px #d5dce6;
    padding: 11px 12px 12px 12px;
    font-family: 'poppinsregular';
    font-size: 14px;
    line-height: 12px;
    color: #2c3f4c;
    font-weight: normal;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.formGroup input[type='text']:focus,.formGroup input[type='date']:focus,.formGroup input[type='password']:focus,.formGroup input[type='email']:focus,.formGroup input[type='number']:focus,.formGroup textarea:focus {
    border-color: #181818;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.formGroup input[type='text']:-webkit-autofill,.formGroup input[type='date']:-webkit-autofill,.formGroup input[type='password']:-webkit-autofill,.formGroup input[type='email']:-webkit-autofill,.formGroup input[type='number']:-webkit-autofill,.formGroup textarea:-webkit-autofill,.formGroup input[type='text']:-webkit-autofill:hover,.formGroup input[type='date']:-webkit-autofill:hover,.formGroup input[type='password']:-webkit-autofill:hover,.formGroup input[type='email']:-webkit-autofill:hover,.formGroup input[type='number']:-webkit-autofill:hover,.formGroup textarea:-webkit-autofill:hover,.formGroup input[type='text']:-webkit-autofill:focus,.formGroup input[type='date']:-webkit-autofill:focus,.formGroup input[type='password']:-webkit-autofill:focus,.formGroup input[type='email']:-webkit-autofill:focus,.formGroup input[type='number']:-webkit-autofill:focus,.formGroup textarea:-webkit-autofill:focus {
    border: solid 1px #dadada;
    -webkit-text-fill-color: inherit;
    -webkit-box-shadow: 0 0 0 0 #fff inset;
    transition: background-color 5000s ease-in-out 0s
}

.formGroup input[type='text'][readonly],.formGroup input[type='date'][readonly],.formGroup input[type='password'][readonly],.formGroup input[type='email'][readonly],.formGroup input[type='number'][readonly],.formGroup textarea[readonly],.formGroup input[type='text'][disabled],.formGroup input[type='date'][disabled],.formGroup input[type='password'][disabled],.formGroup input[type='email'][disabled],.formGroup input[type='number'][disabled],.formGroup textarea[disabled] {
    border-color: #dadada;
    cursor: not-allowed;
    background: #dadada;
    opacity: 1
}

.formGroup textarea {
    height: 75px;
    resize: none;
    vertical-align: top
}
@media only screen and (max-width: 991px) {
    .formGroup textarea {
        height: 50px;
    }
}

.formGroup .numberCountBox {
    width: 100%;
    float: left;
    height: auto
}

.formGroup .numberCountBox.halfGroup {
    width: calc(50% - 5px)
}

.formGroup .numberCountBox:nth-child(odd) {
    margin: 0 5px 0 0
}

.formGroup .numberCountBox:nth-child(even) {
    margin: 0 0 0 5px
}

.formGroup .numberCountBox .numberBox {
    width: 100%;
    float: left;
    height: auto;
    position: relative;
    padding: 0
}

.formGroup .numberCountBox .btn {
    width: 32px;
    height: 32px;
    padding: 9px 0;
    margin: 0;
    background: none;
    border: solid 1px #d5dce6;
    position: relative
}

.formGroup .numberCountBox .btn::before {
    content: '';
    width: 12px;
    height: 2px;
    background: #596981;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.formGroup .numberCountBox .btn.leftBtn {
    float: left
}

.formGroup .numberCountBox .btn.rightBtn {
    float: right
}

.formGroup .numberCountBox .btn.rightBtn::after {
    content: '';
    width: 2px;
    height: 12px;
    background: #596981;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.formGroup .numberCountBox input[type="text"] {
    width: calc(100% - 64px);
    border: none;
    height: 32px;
    border-top: solid 1px #d5dce6;
    border-bottom: solid 1px #d5dce6;
    padding: 11px 6px 12px 6px;
    text-align: center;
}

.rangeSliderBox {
    width: 100%;
    float: left;
    height: auto;
    height: 33px;
    padding: 14px 10px 16px;
    border: solid 1px #d5dce6
}

.rangeSliderBox .sliderValueBox {
    display: none
}

.barCnt {
    position: relative;
    height: 3px;
    padding: 0px 0px
}

.barCnt .preBar {
    position: absolute;
    background-color: #596981;
    height: 3px;
    line-height: 5px;
    z-index: 200;
    border-radius: 3px;
    padding: 0px;
    margin: 0px;
    pointer-events: none
}

input[type=range].colorized {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    position: absolute;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
    z-index: 100;
    left: 0
}

input[type=range].colorized::-webkit-slider-runnable-track {
    height: 3px;
    background: #dadada;
    border: none;
    border-radius: 3px
}

input[type=range].colorized::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #596981;
    margin-top: -4px;
    z-index: 400;
    -webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5);
    box-shadow: 0 0 6px rgba(0,0,0,0.5)
}

input[type=range].colorized:focus {
    outline: none
}

input[type=range].colorized:focus::-webkit-slider-runnable-track {
    background: #d8dee8
}

input[type=range].colorized::-moz-range-track {
    width: 100%;
    height: 3px;
    background: #d8dee8;
    border: none;
    border-radius: 3px
}

input[type=range].colorized::-moz-range-thumb {
    border: solid 3px #d5d9df;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: #596981;
    z-index: 400
}

input[type=range].colorized::-moz-focus-outer {
    border: 0
}

label.control {
    display: table;
    margin-right: 20px;
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    line-height: 18px;
    cursor: pointer;
    font-size: 13px;
    color: #2c3f4c
}

label.control.inlineBlock {
    display: inline-block
}

label.control input {
    position: absolute;
    z-index: -1;
    opacity: 0
}

label.control .controlIndicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: solid 1px #e2e8ef;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

label.control.controlRadio .controlIndicator {
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

label.control.controlRadio:hover input~.controlIndicator {
    border: solid 1px #e2e8ef
}

label.control.controlRadio input:checked~.controlIndicator {
    background: #fff;
    border: solid 1px #f5fafe
}

label.control.controlRadio:hover input:not([disabled]):checked~.controlIndicator,label.control.controlRadio input:checked:focus~.controlIndicator {
    background: #fff
}

label.control.controlRadio input:disabled~.controlIndicator {
    background: #e2e8ef;
    border: solid 1px #e2e8ef;
    pointer-events: none
}

label.control.controlRadio:hover input:disabled~.controlIndicator {
    background: #e2e8ef
}

label.control .controlIndicator::after {
    content: '';
    position: absolute;
    display: none
}

label.control input:checked~.controlIndicator::after {
    display: block
}

label.control.controlRadio .controlIndicator::after {
    left: 2px;
    top: 2px;
    height: 14px;
    width: 14px;
    background: #f5fafe;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

label.control.controlRadio input:disabled~.controlIndicator::after {
    background: #ff339a
}

label.control.controlCheckbox:hover input~.controlIndicator {
    border: solid 1px #ff339a
}

label.control.controlCheckbox input:checked~.controlIndicator {
    background: #ff339a;
    border: solid 1px #ff339a;
    display: block
}

label.control.controlCheckbox:hover input:not([disabled]):checked~.controlIndicator,label.control.controlCheckbox input:checked:focus~.controlIndicator {
    background: #ff339a
}

label.control.controlCheckbox input:disabled~.controlIndicator {
    background: #e2e8ef;
    border: solid 1px #e2e8ef;
    pointer-events: none
}

label.control.controlCheckbox:hover input:disabled~.controlIndicator {
    background: #e2e8ef
}

label.control.controlCheckbox .controlIndicator::after {
    left: 3px;
    top: 0;
    font-family: 'FontAwesome';
    content: '\f00c'
}

label.control.controlCheckbox input:checked:disabled~.controlIndicator {
    display: block;
    background: #e2e8ef
}

label.control.controlCheckbox input:checked~.controlIndicator::after {
    display: block;
    color: #fff
}

label.control.controlCheckbox input:disabled~.controlIndicator::after {
    border-color: #21baeb
}

.dToolMainBox {
    width: 100%;
    float: left;
    height: auto;
    background: #f5fafe
}

.dToolMainBox .rotateDeviceBox {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    background: #ff339a;
    display: none
}

@media only screen and (max-width: 991px) and (orientation:landscape) {
    .dToolMainBox .rotateDeviceBox {
        display:block
    }
}

.dToolMainBox .rotateDeviceBox .rotateBox {
    width: 95%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dToolMainBox .rotateDeviceBox .rotateBox img {
    display: inline-block;
    margin: 0 0 10px 0;
    max-height: 150px
}

.dToolMainBox .rotateDeviceBox .rotateBox h2 {
    font-weight: normal;
    font-size: 18px;
    font-family: 'poppinsregular';
    color: #fff;
    margin: 0 0 5px 0
}

.dToolMainBox .rotateDeviceBox .rotateBox p {
    font-weight: normal;
    font-size: 14px;
    font-family: 'poppinsregular';
    color: #fff;
    margin: 0 0 10px 0
}

.dToolMainBox .topRowBox {
    width: 100%;
    float: left;
    height: 72px;
    background: #fff;
    position: relative;
    z-index: 99;
    padding: 12px 20px 0;
    margin: 0;
    -webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.02);
    -moz-box-shadow: 0 5px 5px rgba(0,0,0,0.02);
    box-shadow: 0 5px 5px rgba(0,0,0,0.02);
}

@media only screen and (max-width: 991px) {
    .dToolMainBox .topRowBox {
        position:static;
        height: 60px;
        padding: 0;
    }
}

.dToolMainBox .topRowBox .logoMainBox {
    width: 150px;
    float: left;
    height: auto;
    /* margin: 9px 0 0 20px */
}

.dToolMainBox .topRowBox .logoMainBox img {
    width: auto;
    max-width: 100%
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .logoMainBox {
        width:100px;
        margin: 12px 0 0 10px
    }
}

.dToolMainBox .topRowBox .headerMenuBox {
    width: auto;
    float: right;
    height: 30px;
    margin: 14px 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox {
        margin:14px 10px 0 0
    }
}

@media only screen and (max-width: 991px) {
    .dToolMainBox .topRowBox .headerMenuBox {
        display:none;
        background: #fff;
        width: 300px;
        position: absolute;
        bottom: 50px;
        min-height: 150px;
        z-index: 999;
        padding: 20px;
        border: solid 1px #e2e8ef
    }
}

.dToolMainBox .topRowBox .headerMenuBox .btnClosePanel {
    width: 20px;
    float: left;
    height: 20px;
    border: none;
    margin: 0;
    position: absolute;
    background: #fff;
    top: 5px;
    right: 5px;
    border: solid 1px #ff339a;
    display: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .btnClosePanel {
        display:block
    }
}

.dToolMainBox .topRowBox .headerMenuBox .btnClosePanel::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #ff339a;
    position: absolute;
    left: 4px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.dToolMainBox .topRowBox .headerMenuBox .btnClosePanel::after {
    content: '';
    width: 10px;
    height: 1px;
    background: #ff339a;
    position: absolute;
    left: 4px;
    top: 50%;
    -moz-transform: -50%;
    -o-transform: -50%;
    -ms-transform: -50%;
    -webkit-transform: -50%;
    transform: -50%;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.dToolMainBox .topRowBox .headerMenuBox .btnAlignBox {
    width: 32px;
    float: left;
    height: 32px;
    border: none;
    background-position: 0 -512px;
    margin: 0 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .btnAlignBox {
        margin:0 10px 0 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .btnRotateBox {
    width: auto;
    float: left;
    height: auto;
    border: none;
    padding: 0;
    margin: 0 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .btnRotateBox {
        margin:0 10px 0 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .btnRotateBox span {
    width: 34px;
    float: left;
    height: 32px;
    margin: 0 5px 0 0;
    background-position: 0 -576px
}

.dToolMainBox .topRowBox .headerMenuBox .btnRotateBox input[type="text"] {
    width: 80px;
    float: left;
    height: 32px;
    padding: 5px 10px;
    color: #8aa1c5;
    font-size: 14px;
    font-family: 'poppinsregular';
    border: solid 1px #d5dce6
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .btnRotateBox input[type="text"] {
        width:50px
    }
}

.dToolMainBox .topRowBox .headerMenuBox .flipRotateBox {
    width: auto;
    float: left;
    height: auto;
    border: none;
    padding: 0;
    margin: 0 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .flipRotateBox {
        margin:0 10px 0 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .flipRotateBox .btnFlipHorizontal {
    width: 32px;
    float: left;
    height: 32px;
    border: none;
    background-position: 0 -640px;
    margin: 0 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .flipRotateBox .btnFlipHorizontal {
        margin:0 10px 0 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .flipRotateBox .btnFlipVertical {
    width: 32px;
    float: left;
    height: 32px;
    border: none;
    background-position: 0 -704px;
    margin: 0 0 0 0
}

.dToolMainBox .topRowBox .headerMenuBox .opacityBox {
    width: auto;
    float: left;
    height: auto;
    margin: 10px 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .opacityBox {
        margin:10px 10px 0 0
    }
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .opacityBox {
        margin:20px 10px 15px 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .opacityBox span {
    width: auto;
    float: left;
    height: auto;
    margin: -3px 5px 0 0;
    line-height: 17px;
    color: #8aa1c5;
    font-size: 12px
}

.dToolMainBox .topRowBox .headerMenuBox .opacityBox .sliderBox {
    width: 80px;
    float: left;
    height: auto;
    margin: 5px 0 0 0
}

.dToolMainBox .topRowBox .headerMenuBox .opacityBox .sliderBox .rangeSliderBox {
    padding: 0;
    border: none;
    height: auto
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox {
    width: auto;
    float: left;
    height: auto;
    margin: 5px 20px 0 0
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .headerMenuBox .zoomingBox {
        margin:5px 10px 0 0
    }
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .zoomMinus {
    width: 22px;
    float: left;
    height: 22px;
    border: solid 2px #8aa1c5;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    background: #fff;
    position: relative
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .zoomMinus::before {
    content: '';
    width: 10px;
    height: 2px;
    background: #8aa1c5;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .sliderBox {
    width: 80px;
    float: left;
    height: auto;
    margin: 10px 10px 0 10px
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .sliderBox .rangeSliderBox {
    padding: 0;
    border: none;
    height: auto
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .zoomPlus {
    width: 22px;
    float: left;
    height: 22px;
    border: solid 2px #8aa1c5;
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    border-radius: 11px;
    background: #fff;
    position: relative
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .zoomPlus::before {
    content: '';
    width: 10px;
    height: 2px;
    background: #8aa1c5;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dToolMainBox .topRowBox .headerMenuBox .zoomingBox .zoomPlus::after {
    content: '';
    width: 2px;
    height: 10px;
    background: #8aa1c5;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.dToolMainBox .topRowBox .headerMenuBox .btnFullScreenBox {
    width: 32px;
    height: 32px;
    float: left;
    border: none;
    background-position: 0 -768px;
    margin: 0 0 0 0
}

.dToolMainBox .topRowBox .topButtonBox {
    width: auto;
    float: right;
    height: auto;
    /* margin: 11px 20px 0 0 */
    vertical-align: middle;
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .topButtonBox {
        margin:11px 10px 0 0
    }
}

@media only screen and (max-width: 991px) {
    .dToolMainBox .topRowBox .topButtonBox {
        margin:10px 10px 0 0
    }

    #calculate_price{
        display: block;
        padding: 3px 5px;
        font-size: 10px;
        height: auto;
        color: #000;
    }
}

.dToolMainBox .topRowBox .topButtonBox .btnSaveDesign {
    width: auto;
    float: left;
    height: auto;
    padding: 7px 10px 7px;
    margin: 10px 15px 0 0;
    background: #ff339a;
    color: #fff;
    font-family: 'poppinsmedium';
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .topButtonBox .btnSaveDesign {
        margin:0 10px 0 0
    }
}

@media only screen and (max-width: 767px) {
    .dToolMainBox .topRowBox .topButtonBox .btnSaveDesign {
        padding:3px 5px;
        font-size: 10px
    }
}

.dToolMainBox .topRowBox .topButtonBox .btnAddtoCart, #continue_image {
    width: auto;
    float: left;
    height: auto;
    padding: 7px 10px 7px;
    margin: 0;
    background: #21baeb;
    color: #fff;
    font-family: 'poppinsmedium';
    vertical-align: middle;
    margin-top: 7px;
}


#color_img_src {  
    vertical-align: middle;
    width: 40%;
    height: auto;
    display: inline-block;
}

.colorSwatchBox {
    /* width: calc(30% - 30px); */
    width: 100%;
    display: inline-block;
    /* margin-left: 50px; */
    vertical-align: middle;
}

.colorSwatchBox #image_color_list li{
min-width: 28px;
}

.productCategoryBox>div{
    height: auto;
    text-align: center;
    margin-top: 20px;
}


@media only screen and (max-width: 767px) {
    .dToolMainBox .topRowBox .topButtonBox .btnAddtoCart {
        padding:3px 5px;
        font-size: 10px;
        margin-top: 3px;
    }

    .productCategoryBox>div{
       /*float: left; */
       position: absolute;
       display: block;
       padding: 5px;
    }
    #color_img_src{
        width: 100%;
        display: block;
        margin-left: 5px;
    }
    .colorSwatchBox{
       width: 100%;
       display: block;
       text-align: center;
       padding: 10px;
       margin-left: 0;
    }
    #productCategoryBox{
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .canvas-views.active { 
        display: none; 
    }
}

.dToolMainBox .topRowBox .topButtonBox .priceBox {
    width: auto;
    float: left;
    height: auto;
    color: #21baeb;
    font-family: 'poppinsmedium';
    font-size: 25px;
    margin: 7px 15px 0 0;
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .topRowBox .topButtonBox .priceBox {
        margin:10px 10px 0 0
    }
}

@media only screen and (max-width: 767px) {
    .dToolMainBox .topRowBox .topButtonBox .priceBox {
        font-size:16px;
        margin: 5px 5px 0 0
    }
}

.dToolMainBox .canvasWrapperMainBox {
    width: 100%;
    float: left
}

.dToolMainBox .canvasWrapperMainBox .canvasMainBox {
    width: calc(100% - 575px);
    float: left;
    height: auto;
    margin: 10px 0 0 0;
    /*border:solid 1px #d8dee8;*/
    position: relative;
    /*background:#fff*/
}

@media only screen and (max-width: 1440px) {
    .dToolMainBox .canvasWrapperMainBox .canvasMainBox {
        width:calc(100% - 525px)
    }
}

@media only screen and (max-width: 1170px) {
    .dToolMainBox .canvasWrapperMainBox .canvasMainBox {
        width:calc(100% - 165px)
    }
}

@media only screen and (max-width: 991px) {
    .dToolMainBox .canvasWrapperMainBox .canvasMainBox {
        width:calc(100% - 20px);
        margin: 10px 0 0 10px
    }
}

.dToolMainBox .canvasWrapperMainBox .canvasMainBox img {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.leftMenuMainBox {
    width: 460px;
    float: left;
    height: auto;
    position: relative;
    margin: 0 10px 0 0
}

@media only screen and (max-width: 1440px) {
    .leftMenuMainBox {
        width:410px
    }
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox {
        width:50px
    }
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox {
        width:100%;
        height: 50px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99
    }
}

.leftMenuMainBox .leftMenuBox {
    width: 130px;
    float: left;
    background: #fff;
    position: relative;
    box-shadow: 5px 0 5px rgba(0,0,0,0.03)
}

@media only screen and (max-width: 1440px) {
    .leftMenuMainBox .leftMenuBox {
        width:90px
    }
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftMenuBox {
        width:50px
    }
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftMenuBox {
        width:100%;
        z-index: 999;
        overflow-x: auto
    }
}

.leftMenuMainBox .leftMenuBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftMenuBox ul {
        display:table-cell;
        float: none
    }
}

.leftMenuMainBox .leftMenuBox ul li {
    width: 100%;
    float: left;
    height: auto;
    min-height: 70px;
    display: table;
    text-align: center;
    border-bottom: solid 1px #fff;
    position: relative
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftMenuBox ul li {
        min-height:inherit;
        padding: 10px 8px
    }
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftMenuBox ul li {
        width:50px;
        display: table-cell;
        float: none
    }
}

.leftMenuMainBox .leftMenuBox ul li::after {
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: #ff339a;
    display: none
}

.leftMenuMainBox .leftMenuBox ul li a {
    width: 100%;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftMenuBox ul li a {
        display:block;
        vertical-align: top
    }
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite {
    width: 32px;
    height: 32px;
    display: inline-block;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftMenuBox ul li a .menuSprite {
        display:block
    }
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.products {
    background-position: 0 0
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.text {
    background-position: 0 -64px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.clipArt {
    background-position: 0 -128px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.clipart {background-position: 0 -1665px;}
.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.clipart {background-position: 0 -1695px;}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.template {background-position: 0 -1730px;}
.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.template {background-position: 0 -1760px;}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.uploadArt {
    background-position: 0 -192px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.layer {
    background-position: 0 -256px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.personalize {
    background-position: 0 -320px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.templates {
    background-position: 0 -384px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.yourDesign {
    background-position: 0 -448px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.rotateMenu {
    background-position: 0 -576px
}

.leftMenuMainBox .leftMenuBox ul li a .menuSprite.viewMenu {
    background-position: 0 -832px
}

.leftMenuMainBox .leftMenuBox ul li a .menuTitle {
    width: 100%;
    height: auto;
    display: inline-block;
    font-family: 'poppinsregular';
    font-size: 14px;
    line-height: 16px;
    color: #8aa1c5;
    font-weight: normal;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

@media only screen and (max-width: 1440px) {
    .leftMenuMainBox .leftMenuBox ul li a .menuTitle {
        font-size:12px
    }
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftMenuBox ul li a .menuTitle {
        display:none
    }
}

.leftMenuMainBox .leftMenuBox ul li.active,.leftMenuMainBox .leftMenuBox ul li:hover,.leftMenuMainBox .leftMenuBox ul li:focus {
    background: #ffe4f2;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.leftMenuMainBox .leftMenuBox ul li.active::after,.leftMenuMainBox .leftMenuBox ul li:hover::after,.leftMenuMainBox .leftMenuBox ul li:focus::after {
    display: block
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftMenuBox ul li.active::after,.leftMenuMainBox .leftMenuBox ul li:hover::after,.leftMenuMainBox .leftMenuBox ul li:focus::after {
        display:none
    }
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.products,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.products,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.products {
    background-position: 0 -32px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.text,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.text,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.text {
    background-position: 0 -96px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.clipArt,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.clipArt,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.clipArt {
    background-position: 0 -160px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.uploadArt,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.uploadArt,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.uploadArt {
    background-position: 0 -224px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.layer,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.layer,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.layer {
    background-position: 0 -288px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.personalize,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.personalize,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.personalize {
    background-position: 0 -352px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.templates,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.templates,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.templates {
    background-position: 0 -416px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.yourDesign,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.yourDesign,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.yourDesign {
    background-position: 0 -480px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.rotateMenu,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.rotateMenu,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.rotateMenu {
    background-position: 0 -608px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuSprite.viewMenu,.leftMenuMainBox .leftMenuBox ul li:hover .menuSprite.viewMenu,.leftMenuMainBox .leftMenuBox ul li:focus .menuSprite.viewMenu {
    background-position: 0 -864px
}

.leftMenuMainBox .leftMenuBox ul li.active .menuTitle,.leftMenuMainBox .leftMenuBox ul li:hover .menuTitle,.leftMenuMainBox .leftMenuBox ul li:focus .menuTitle {
    color: #ff339a;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.leftMenuMainBox .leftMenuBox ul li.rMenu,.leftMenuMainBox .leftMenuBox ul li.vMenu {
    display: none
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftMenuBox ul li.rMenu,.leftMenuMainBox .leftMenuBox ul li.vMenu {
        display:table-cell
    }

    .rightMenuMainBox{
       position: absolute;
       right: 0px;
       /* bottom: 60px; */
       top: 60px;
    }
}

.leftMenuMainBox .changeProductsMainBox {
    width: 90%;
    margin: 5px 5%;
    max-height: 500px;
    overflow-y: scroll;
    float: left;
    height: 100%;
    background: #fff;
    position: fixed;
    left: 0;
    top: 40px;
    z-index: 999;
    display: none;
    border: 2px solid #ff339a;
}

.leftMenuMainBox .changeProductsMainBox .popup-title{
	padding: 10px;
}
.leftMenuMainBox .changeProductsMainBox .popup-title h1{
	margin: 0;
	    display: inline-block;
	    font-size: 18px;
	    color: #000;
	    line-height: 28px;
	    font-weight: normal;
	    font-family: 'poppinsmedium';
}

.leftMenuMainBox .changeProductsMainBox .btnCloseProducts {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 20px;
    top: 0;
    border: none;
    background: none;
    font-size: 20px;
    z-index: 99
}

.leftMenuMainBox .changeProductsMainBox .productListBox {
    width: 160px;
    float: left;
    height: auto;
    padding: 10px
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    list-style: none
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li a {
    text-decoration: none;
    font-family: 'poppinsregular';
    font-size: 18px;
    line-height: 16px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li li {
    padding: 0 0 0 10px
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li li a {
    font-family: 'poppinsregular';
    font-size: 16px;
    line-height: 16px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li li li {
    padding: 0 0 0 10px
}

.leftMenuMainBox .changeProductsMainBox .productListBox ul li li li a {
    font-family: 'poppinsregular';
    font-size: 14px;
    line-height: 16px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .changeProductsMainBox .productCategoryBox {
    width: calc(100% - 180px);
    height: auto;
    border-left: solid 1px #c9c9c9
}

.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul li {
    width: 31%;
    float: left;
    height: auto;
    text-align: center;
    margin: 10px
}

.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul li img {
    display: inline-block;
    max-width: 100%;
    border: 1px solid #ff339a;
}
.leftMenuMainBox #productListing.changeProductsMainBox .productCategoryBox ul li img {
    border: none;
}
#productListing .wallInfo-wrapper{
 top: 0;
}
.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul li span {
    display: block;
    text-align: center
}

.leftMenuMainBox .leftContentPanelBox {
    width: calc(100% - 130px);
    float: right;
    height: auto;
    margin: 0 0 0 0;
    display: none;
    padding: 20px 20px 0 20px;
    border: solid 1px #e2e8ef;
    background: #fff
}

@media only screen and (max-width: 1440px) {
    .leftMenuMainBox .leftContentPanelBox {
        width:calc(100% - 90px)
    }
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftContentPanelBox {
        width:320px;
        position: absolute;
        left: 50px;
        top: 0;
        z-index: 99
    }
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftContentPanelBox {
        width:100%;
        left: 0;
        top: auto;
        bottom: 50px;
        min-height: 200px;
        max-height: 300px
    }
    .leftMenuMainBox .leftContentPanelBox .panelTitleBox {
        display: none;
    }
}

.leftMenuMainBox .leftContentPanelBox .panelTitleBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox .panelTitleBox h4 {
    margin: 0;
    display: inline-block;
    font-size: 18px;
    color: #000;
    line-height: 28px;
    font-weight: normal;
    font-family: 'poppinsmedium'
}

.leftMenuMainBox .leftContentPanelBox .panelTitleBox a {
    width: auto;
    float: right;
    height: auto;
    font-family: 'poppinsmedium';
    color: #ff339a;
    text-decoration: none
}

.leftMenuMainBox .leftContentPanelBox .btnClosePanel {
    width: 20px;
    float: left;
    height: 20px;
    border: none;
    margin: 0;
    position: absolute;
    background: #fff;
    top: 5px;
    right: 5px;
    display: none;
    border: solid 1px #ff339a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftContentPanelBox .btnClosePanel {
        display:block
    }
}

.leftMenuMainBox .leftContentPanelBox .btnClosePanel::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #ff339a;
    position: absolute;
    left: 4px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.leftMenuMainBox .leftContentPanelBox .btnClosePanel::after {
    content: '';
    width: 10px;
    height: 1px;
    background: #ff339a;
    position: absolute;
    left: 4px;
    top: 50%;
    -moz-transform: -50%;
    -o-transform: -50%;
    -ms-transform: -50%;
    -webkit-transform: -50%;
    transform: -50%;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 0
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftContentPanelBox .leftPanelBox {
        overflow-y:auto
    }
}

/*.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox {
    width: 100%;
    float: left;
    height: auto;
    list-style: none;
    border: solid 1px #d5dce6;
    border-radius: 5px;
    margin: 0 10px 0 0;
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li {
    width: auto;
    float: left;
    height: auto;
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li .flipText {
    width: 34px;
    float: left;
    height: 34px;
    background: url(../images/sprite.png) left top no-repeat
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li .flipText.btnFlipV {
    background-position: 0 -704px;
    border-right: solid 1px #d5dce6;
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li .flipText.btnFlipH {
    background-position: 0 -640px;
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li .flipText.LayerUp {
    background-position: 0 -1536px;
    border-right: solid 1px #d5dce6;
}

.leftMenuMainBox .leftContentPanelBox .leftPanelBox .flipMenuBox li .flipText.LayerDown {
    background-position: 0 -1600px
}*/

.leftMenuMainBox .leftContentPanelBox .leftPanelBox h2 {
    margin: 0 0 10px 0;
    font-family: 'poppinsmedium';
    font-size: 17px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox {
    display: block
}

@media only screen and (max-width: 1170px) {
    .leftMenuMainBox .leftContentPanelBox.productPanelBox {
        display:none
    }
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutSelectedBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 15px;
    text-align: center;
    margin: 0 0 0 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutSelectedBox img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 150px;
    display: inline-block
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutSelectedTitleBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 15px 0;
    padding: 0 0 15px 0;
    text-align: center;
    border-bottom: solid 1px #e2e8ef;
    font-family: 'poppinsregular';
    font-size: 14px;
    line-height: 18px;
    color: #8aa1c5;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutDetailsBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 15px 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutDetailsBox span {
    width: auto;
    float: left;
    height: auto;
    margin: 10px 0 0 0;
    font-family: 'poppinsmedium';
    font-size: 14px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .prodcutDetailsBox .btnSecondaryOne {
    padding: 7px 15px;
    float: right;
    margin: 0;
    text-transform: capitalize
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox, .textPanelBox .colorSwatchBox{
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 20px 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox label, .textPanelBox .colorSwatchBox label {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 10px 0;
    font-family: 'poppinsmedium';
    font-size: 14px;
    line-height: 18px;
    color: #000;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul, .textPanelBox .colorSwatchBox ul {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul li, .textPanelBox .colorSwatchBox ul li {
    width: 28px;
    height: 28px;
    float: left;
    margin: 0 5px 8px 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul li:nth-child(8n + 0), .textPanelBox .colorSwatchBox ul li:nth-child(8n + 0){
    margin: 0 0 8px 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul li button, .textPanelBox .colorSwatchBox ul li button {
    width: 28px;
    height: 28px;
    float: left;
    background: none;
    border: none;
    position: relative;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul li.selected button::before, .textPanelBox .colorSwatchBox ul li.selected button::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 15px;
    width: 7px;
    height: 2px;
    background: #fff;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .colorSwatchBox ul li.selected button::after, .textPanelBox .colorSwatchBox ul li.selected button::after{
    content: '';
    position: absolute;
    left: 11px;
    top: 13px;
    width: 12px;
    height: 2px;
    background: #fff;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox label {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 10px 0;
    font-family: 'poppinsmedium';
    font-size: 14px;
    line-height: 22px;
    color: #2c3f4c;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox ul {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox ul li {
    width: 45px;
    height: auto;
    float: left;
    margin: 0 8px 10px 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox ul li .formGroup {
    text-align: center;
    margin: 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox ul li .formGroup label {
    margin: 0
}

.leftMenuMainBox .leftContentPanelBox.productPanelBox .productListBox .sizingBox ul li .formGroup input {
    padding: 0 5px;
    height: 30px
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox {
    width: 100%;
    float: left;
    height: auto
}

/*.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .flipMenuBox {
    margin: 0 0 30px 0
}*/

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .flipMenuBox {
        margin:0
    }
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox {
    /*width: 100%;*/
    float: left;
    height: auto;
    margin: 0 4px 10px 0;
    padding: 0;
    list-style: none;
    border: solid 1px #d5dce6;
    border-radius: 5px;
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li {
    width: 30px;
    height: 34px;
    float: left;
    margin: 0 10px 0 0
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText {
    width: 30px;
    height: 34px;
    float: left;
    border: none;
    /*border-right: solid 1px #d5dce6;*/
    background: url(../images/sprite.png) left top no-repeat
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.noBorder{
    border-right: none;
}

.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnBold {
    background-position: 0 -1152px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnBold.active,.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnBold:hover {
    background-position: 0 -1184px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnItalic {
    background-position: 0 -1216px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnItalic.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnItalic:hover{
    background-position: 0 -1248px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnUnderline {
    background-position: 0 -1280px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnUnderline.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnUnderline:hover {
    background-position: 0 -1312px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnLeftAlign {
    background-position: 0 -1344px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnLeftAlign.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnLeftAlign:hover {
    background-position: 0 -1376px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnCenterAlign {
    background-position: 0 -1408px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnCenterAlign.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnCenterAlign:hover {
    background-position: 0 -1440px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnRightAlign {
    background-position: 0 -1472px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnRightAlign.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnRightAlign:hover {
    background-position: 0 -1504px
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipV {
    background-position: 0 -704px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipV.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipV:hover {
    background-position: 0 -736px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipH {
    background-position: 0 -640px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipH.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.btnFlipH:hover {
    background-position: 0 -672px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerUp {
    background-position: 0 -1536px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerUp.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerUp:hover {
    background-position: 0 -1568px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerDown {
    background-position: 0 -1600px;
}
.leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerDown.active, .leftMenuMainBox .leftContentPanelBox.textPanelBox .textListBox .textMenuBox li .btnText.LayerDown:hover {
    background-position: 0 -1632px;
}
.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .clipArtListBox {
    width: 100%;
    float: left;
    height: auto
}

./*leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .clipArtListBox .flipMenuBox {
    margin: 0 0 30px 0
}

@media only screen and (max-width: 991px) {
    .leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .clipArtListBox .flipMenuBox {
        margin:0
    }
}*/

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .clipArtListBox .uploadClipArtBox, .leftMenuMainBox .leftContentPanelBox.UploadArtBox .UploadArtListBox .uploadClipArtBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 15px;
    border: solid 1px #e2e8ef;
    text-align: center;
    /*background: url(../images/upload-img-bg.png) center 12px no-repeat #eff8ff*/
}
.uploadClipArtBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 15px;
    border: solid 1px #e2e8ef;
    text-align: center;
    /*background: url(../images/upload-img-bg.png) center 12px no-repeat #eff8ff*/
}
.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .fileinput-button, .leftMenuMainBox .leftContentPanelBox.UploadArtBox .fileinput-button {
    width: auto;
    float: none;
    height: auto;
    background: #21baeb;
    border: none;
    padding: 10px 15px;
    text-transform: inherit;
    cursor: pointer;
    font-family: 'poppinsmedium';
    font-size: 13px;
    line-height: 22px;
    color: #fff;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .formGroup .clipArtColorBox {
    position: absolute;
    right: 35px;
    top: 5px;
    z-index: 99
}

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .formGroup .clipArtColorBox i {
    width: 18px;
    height: 18px;
    line-height: 18px;
    border: solid 1px #c9c9c9
}

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .autoCompleteBox {
    position: relative
}

.leftMenuMainBox .leftContentPanelBox.clipArtPanelBox .autoCompleteBox .btn {
    position: absolute;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    top: -2px;
    right: 20px;
    font-size: 16px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .UploadArtListBox {
    width: 100%;
    float: left;
    height: auto
}

/*.leftMenuMainBox .leftContentPanelBox.UploadArtBox .UploadArtListBox .flipMenuBox {
    margin: 0 0 20px 0
}*/

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .uploadNewArtBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 10px;
    border: solid 1px #c9c9c9
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .uploadNewArtBox label {
    font-family: 'poppinsmedium';
    font-size: 14px;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .uploadNewArtBox .btn {
    padding: 5px 10px 6px;
    font-size: 11px;
    height: auto;
    margin: 0 5px 0 0;
    background: #21baeb;
    border: solid 1px #21baeb
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .uploadNewArtBox .btn+.btn {
    margin: 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .orLabelBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 15px 0;
    text-align: center;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 10px;
    border: solid 1px #c9c9c9
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox label {
    font-family: 'poppinsmedium';
    font-size: 14px;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox p {
    margin: 0 0 10px 0;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 18px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .colorList {
    width: 200px;
    float: left;
    height: 30px;
    margin: 0 10px 0 0;
    border: solid 1px #c9c9c9;
    padding: 3px 5px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .colorList .colorpickers {
    float: left;
    position: relative;
    top: -2px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .colorList .colorpickers i {
    width: 18px;
    height: 18px;
    line-height: 18px;
    border: solid 1px #c9c9c9
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .colorList .swapColor {
    width: auto;
    float: right;
    height: auto;
    margin: 0 20px 0 0;
    position: relative;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .colorList .swapColor::after {
    content: "\f105";
    position: absolute;
    top: 0px;
    right: -15px;
    font-family: 'FontAwesome';
    font-size: 18px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox ul li .btnHide {
    width: 45px;
    height: 30px;
    float: right;
    border: solid 1px #c9c9c9;
    background: none;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 22px;
    color: #181818;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .editArtColorsBox .btnPrimary {
    float: right;
    padding: 5px 10px;
    margin: 0;
    font-size: 12px;
    height: auto;
    background: #21baeb;
    border: solid 1px #21baeb
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 10px;
    border: solid 1px #c9c9c9;
    margin: 0 0 15px 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox label {
    display: block;
    font-family: 'poppinsmedium';
    font-size: 14px;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul li {
    width: 68px;
    float: left;
    height: auto;
    margin: 0 10px 0 0;
    cursor: pointer;
    position: relative
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul li:last-child {
    margin: 0
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul li img {
    display: block;
    border: solid 1px #c9c9c9;
    padding: 1px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul li span {
    width: 100%;
    display: block;
    text-align: center;
    font-family: 'poppinsregular';
    font-size: 11px
}

.leftMenuMainBox .leftContentPanelBox.UploadArtBox .effectsBox ul li.active ::after {
    content: "\f00c";
    position: absolute;
    right: 2px;
    top: 2px;
    font-family: 'FontAwesome';
    font-size: 10px;
    color: #fff;
    width: 15px;
    height: 15px;
    line-height: 13px;
    display: block;
    background: #000
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul {
    width: 100%;
    float: left;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li {
    width: 100%;
    float: left;
    height: auto;
    position: relative;
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox {
    width: 245px;
    float: left;
    height: 34px;
    padding: 7px 5px;
    border: solid 1px #d5dce6;
    position: relative
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .btneye {
    width: 30px;
    height: 20px;
    float: left;
    background: none;
    border: none;
    margin: 0 10px 0 0;
    color: #8aa1c5;
    position: relative;
    top: -3px;
    font-size: 20px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .btnThumb {
    width: 30px;
    height: 20px;
    float: left;
    border: none;
    margin: 0 10px 0 0;
    border: solid 1px #d5dce6
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .btnThumb.iconTshirt {
    background-position: 0 -797px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .btnThumb.iconText {
    background-position: 0 -818px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .layerTextBox {
    width: 120px;
    float: left;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 7px 0 0;
    font-family: 'poppinsmedium';
    font-size: 12px;
    line-height: 18px;
    color: #8aa1c5;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerOuterBox .btnLock {
    width: 20px;
    height: 20px;
    float: left;
    background: none;
    border: none;
    margin: 0 0 0 0;
    color: #8aa1c5;
    font-size: 20px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerShortingBox {
    width: 20px;
    float: right;
    height: 34px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerShortingBox .btnShortAsc {
    width: 20px;
    height: 17px;
    float: left;
    background: none;
    border: none;
    margin: 0 0 0 0;
    color: #8aa1c5;
    font-size: 24px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerShortingBox .btnShortAsc .fa {
    vertical-align: top;
    line-height: 14px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerShortingBox .btnShortDec {
    width: 20px;
    height: 20px;
    float: left;
    background: none;
    border: none;
    margin: 0 0 0 0;
    color: #8aa1c5;
    font-size: 24px
}

.leftMenuMainBox .leftContentPanelBox.layersPanelBox .layersListingBox ul li .layerShortingBox .btnShortDec .fa {
    vertical-align: top;
    line-height: 14px
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSelectionBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 10px 0 20px 0;
    padding: 0 0 10px 0;
    border-bottom: solid 1px #e2e8ef
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSelectionBox ul {
    width: 100%;
    float: left;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSelectionBox ul li {
    width: 50%;
    float: left;
    height: auto;
    white-space: nowrap
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox {
    width: 100%;
    float: left;
    height: auto;
    margin: 0 0 20px 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul li {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul li .formGroup {
    margin: 0 0 10px 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul li label {
    width: 75px;
    float: left;
    margin: 10px 0 0 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul li .bootstrap-select {
    width: 95px;
    float: left;
    margin: 0 10px 0 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .personalizeSizeBox ul li .bootstrap-select+.bootstrap-select {
    margin: 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox h5 {
    font-family: 'poppinsmedium';
    font-weight: normal;
    font-size: 14px;
    margin: 0 0 10px 0;
    color: #000
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .width135 {
    width: 110px;
    float: left;
    height: auto;
    margin: 0 5px 5px 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .width50 {
    width: 50px;
    float: left;
    height: auto;
    text-align: center;
    margin: 0 5px 5px 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .width80 {
    width: 80px;
    float: left;
    height: auto;
    margin: 0 0 5px 0
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li input[type="text"] {
    padding: 10px 5px;
    height: auto;
    line-height: 11px
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .btn {
    height: 35px
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .btnTrash {
    width: 20px;
    float: left;
    height: 20px;
    border: none;
    margin: 10px 0 0 5px;
    color: #494949;
    position: relative;
    background: #d8dee8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .btnTrash::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .customListBox ul li .btnTrash::after {
    content: '';
    width: 10px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 5px;
    top: 50%;
    -moz-transform: -50%;
    -o-transform: -50%;
    -ms-transform: -50%;
    -webkit-transform: -50%;
    transform: -50%;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.leftMenuMainBox .leftContentPanelBox.personalizeBox .personalizeListBox .btnAddMore {
    width: auto;
    float: left;
    height: auto;
    border: none;
    background: #21baeb;
    padding: 7px 20px 5px;
    margin: 20px 0 10px 0;
    font-family: 'poppinsmedium';
    font-size: 14px;
    line-height: 22px;
    color: #fff;
    font-weight: normal
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox {
    width: 100%;
    float: left
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul, .leftMenuMainBox .leftContentPanelBox.UploadArtBox .UploadArtListBox ul {
    width: 100%;
    float: left;
    height: auto;
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li {
    width: calc(50% - 10px);
    float: left;
    height: auto;
    position: relative
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li:nth-child(odd), #draggable_area ul li:nth-child(odd) {
    margin: 0 10px 20px 0
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li:nth-child(even), #draggable_area ul li:nth-child(even) {
    margin: 0 0 20px 10px
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li:nth-child(2n):nth-last-child(-n+3)~li {
    margin-bottom: 0
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li a, #draggable_area ul li a {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li a::before, #draggable_area ul li a::before {
    content: "";
    padding: 100% 0 0 0;
    display: block
}

.leftMenuMainBox .leftContentPanelBox.templatesPanelBox .templateListBox ul li a img, #draggable_area ul li a img {
    width: auto;
    height: auto;
    max-width: 100%;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox {
    display: none
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox {
    width: 100%;
    float: left
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul {
    width: 100%;
    float: left;
    height: auto;
    list-style: none;
    margin: 0 0 20px 0;
    padding: 0
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li, #draggable_area ul li {
    width: calc(50% - 10px);
    float: left;
    height: auto;
    position: relative
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li:nth-child(odd) {
    margin: 0 10px 20px 0
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li:nth-child(even) {
    margin: 0 0 20px 10px
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li:nth-child(2n):nth-last-child(-n+3)~li {
    margin-bottom: 0
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li a {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li a::before {
    content: "";
    padding: 100% 0 0 0;
    display: block
}

.leftMenuMainBox .leftContentPanelBox.yourDesignPanelBox .templateListBox ul li a img {
    width: auto;
    height: auto;
    max-width: 100%;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.leftMenuMainBox .footerButtonBox {
    width: calc(100% - 90px);
    height: auto;
    margin: 10px 0 0 0;
    position: absolute;
    right: 0;
    bottom: 10px;
    padding: 10px 0 0 0;
    border-top: solid 1px #c9c9c9
}

.leftMenuMainBox .footerButtonBox .priceMainBox {
    width: 130px;
    float: left;
    height: auto
}

.leftMenuMainBox .footerButtonBox .priceMainBox .priceAmountBox,.leftMenuMainBox .footerButtonBox .priceMainBox .priceLabelBox {
    width: 100%;
    float: left;
    height: auto
}

.leftMenuMainBox .footerButtonBox .priceMainBox .priceAmountBox {
    font-family: 'poppinsmedium';
    font-size: 28px;
    line-height: 26px;
    color: #002a45;
    font-weight: normal
}

.leftMenuMainBox .footerButtonBox .priceMainBox .priceLabelBox {
    font-family: 'poppinsregular';
    font-size: 10px;
    line-height: 16px;
    color: #002a45;
    font-weight: normal
}

.leftMenuMainBox .footerButtonBox .btnSaveDesign {
    width: calc(100% - 140px);
    float: right;
    height: auto;
    background: #002a45;
    border: none;
    padding: 6px 0 8px;
    font-family: 'poppinsregular';
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    font-weight: normal;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.leftMenuMainBox .footerButtonBox .btnAddtoCart {
    width: 100%;
    float: right;
    height: auto;
    background: #cd6500;
    border: none;
    padding: 6px 0 8px;
    text-transform: uppercase;
    font-family: 'poppinsmedium';
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    font-weight: normal;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px
}

.rightMenuMainBox {
    width: 75px;
    float: right;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 10px 10px 0 0;
    background: #fff;
    border: solid 1px #d8dee8
}

@media only screen and (max-width: 1170px) {
    .rightMenuMainBox {
        /* display:none */
        width: 45px;
        margin: 0;
    }
}

.rightMenuMainBox ul.largeMenu {
    width: 53px;
    float: left;
    height: auto;
    margin: 10px 0 0 10px;
    padding: 0;
    list-style: none
}

.rightMenuMainBox ul.largeMenu li {
    width: 100%;
    float: left;
    height: auto;
    text-align: center;
    margin: 0 0 10px 0
}

.rightMenuMainBox ul.largeMenu li a {
    width: 53px;
    float: left;
    height: auto
}

.rightMenuMainBox ul.largeMenu li a .large-menuSprite {
    width: 100%;
    float: left;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.rightMenuMainBox ul.largeMenu li a .large-menuSprite.preview {
    background-position: 0 0;
    height: 54px
}

.rightMenuMainBox ul.largeMenu li a .large-menuSprite.frontSide {
    background-position: 0 -54px;
    height: 60px
}

.rightMenuMainBox ul.largeMenu li a .large-menuSprite.backSide {
    background-position: 0 -112px;
    height: 60px
}

.rightMenuMainBox ul.largeMenu li a .menuTitle {
    width: 100%;
    height: auto;
    display: inline-block;
    font-family: 'poppinsregular';
    font-size: 11px;
    line-height: 16px;
    color: #181818;
    font-weight: normal;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.rightMenuMainBox ul.largeMenu li a.active .menuSpriteLarge,.rightMenuMainBox ul.largeMenu li a:hover .menuSpriteLarge,.rightMenuMainBox ul.largeMenu li a:focus .menuSpriteLarge {
    border: solid 1px #000
}

.rightMenuMainBox ul.smallMenu {
    width: 34px;
    float: left;
    height: auto;
    margin: 10px 0 0 27px;
    padding: 0;
    list-style: none
}

@media only screen and (max-width: 1170px) {
    .rightMenuMainBox ul.smallMenu {
        width: 20px;
        margin: 10px 5px 0 5px;
    }
}

.rightMenuMainBox ul.smallMenu li {
    width: 100%;
    float: left;
    height: auto;
    text-align: center;
    margin: 0 0 10px 0
}

.rightMenuMainBox ul.smallMenu li a {
    width: 34px;
    float: left;
    height: auto
}

.rightMenuMainBox ul.smallMenu li a .menuSprite {
    width: 100%;
    float: left;
    height: 34px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.rightMenuMainBox ul.smallMenu li a .menuSprite.cutIcon {
    background-position: 0 -832px
}

.rightMenuMainBox ul.smallMenu li a .menuSprite.copyIcon {
    background-position: 0 -896px
}

.rightMenuMainBox ul.smallMenu li a .menuSprite.pastIcon {
    background-position: 0 -960px
}

.rightMenuMainBox ul.smallMenu li a .menuSprite.undoIcon {
    background-position: 0 -1024px
}

.rightMenuMainBox ul.smallMenu li a .menuSprite.redoIcon {
    background-position: 0 -1088px
}

.rightMenuMainBox ul.smallMenu li a.active .menuSpriteLarge,.rightMenuMainBox ul.smallMenu li a:hover .menuSpriteLarge,.rightMenuMainBox ul.smallMenu li a:focus .menuSpriteLarge {
    border: solid 1px #000
}

.menuSprite {
    background: url(../images/sprite.png) left top no-repeat
}

.large-menuSprite {
    background: url(../images/large-sprite.png) left top no-repeat
}

.wrap_border {
    clear: both;
}

.wrap_border ul, .wrap_frame ul, .hardware ul, .effectsBox ul {
    margin: 0px;
    padding: 0px;
    list-style: none
}

.wrap_border ul li ul li, .wrap_frame ul li ul li,.effectsBox ul li ul li, .hardware ul li ul li{
    float: left;
    width: 29.8%;
    margin-right: 5.3%;
    margin-bottom: 20px;
    position: relative;
    border: 1px solid #ecf0f2;
}

.wrap_frame ul li ul li, .effectsBox ul li ul li{
    float: left;
    width: 45%;
    margin: 0 5% 20px 0;
    position: relative;
    border: 1px solid #ecf0f2;
    padding: 5px;
}


.wrap_border ul li:nth-child(3), .hardware ul li:nth-child(3) {
    margin-right: 0px;
}

.wrap_border ul li:nth-child(6), .hardware ul li:nth-child(6) {
    margin-right: 0px;
}

.wrap_border ul li:nth-child(9), .hardware ul li:nth-child(9) {
    margin-right: 0px;
}

.wrap_border ul li a, .wrap_border ul li span, .wrap_border ul li .labeltext, .effectsBox ul li span,.effectsBox ul li a, .effectsBox ul li span, .hardware ul li span, .hardware ul li .labelText, .hardware ul li a,  .wrap_frame ul li span, .wrap_frame ul li a, .wrap_frame ul li .labelText{
    background: none;
    padding-bottom: 5px;
    display: block;
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wrap_border ul li.active, .hardware ul li.active, .wrap_frame ul li.active, .wrap_frame ul li.active,.effectsBox li.active {
    border-color: #ff339a;
}

.wrap_border ul li.active:before, .wrap_frame ul li.active:before, .hardware ul li.active:before,.effectsBox li.active:before {
    position: absolute;
    right: 0;
    background-color: #ff339a;
    height: 22px;
    width: 22px;
    content: "";
    border-radius: 50%;
    background-image: url(../images/design_active-arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
}

/*overright overlay width for canvas products*/
.leftMenuMainBox .changeProductsMainBox .productCategoryBox {
    width: 100%;
}

.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul li {
    display: inline-block;
    position: relative;
    width: 31%;
    min-width: 300px;
    cursor: pointer;
    user-select: none;
}

ul.wallTemplateList li.active:after {
    position: absolute;
    left: 10px;
    bottom: 80px;
    z-index: 1111;
    background-color: #ff339a;
    height: 22px;
    width: 22px;
    content: "";
    border-radius: 50%;
    background-image: url(../images/design_active-arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.wallInfo-wrapper {
    top: -75px;
    position: relative;
    cursor: pointer;
    user-select: none;
}

#tshirtlisting .wallInfo-wrapper{
    top: 0;
}

.wrap_border ul li img,.wrap_frame ul li img, .hardware ul li img, .effectsBox ul li img {
    max-width: 100%;
    height: auto;
}

.overlay {
    background: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    display: none;
}

.hardware {
}

/*.hardware ul{ margin: 0px; padding: 0px; list-style: none }*/
/*.hardware ul li { float: left; width: 29.8%; margin-right: 5.3%; margin-bottom: 20px; position: relative; border: 1px solid #ecf0f2; }*/
/*.hardware ul li:nth-child(3) { margin-right: 0px; }*/
/*.hardware ul li:nth-child(6) { margin-right: 0px; }*/
/*.hardware ul li:nth-child(9) { margin-right: 0px; }*/
/*.hardware ul li a { background: none; padding-bottom: 5px; display: block; text-align: center; font-size: 11px; }*/
/*.hardware ul li.active { border-color: #86b75a; }*/
/*.hardware ul li.active:after { position: absolute; left: -10px; bottom: -6px; background-color: #7bb04a; height: 22px; width: 22px; content: ""; border-radius: 50%; background-image: url(../images/design_active-arrow.png); background-repeat: no-repeat; background-position: center center; }*/
/*.hardware ul li img { max-width: 100%; height:auto; }*/
.customSizeBox {
    width: 97%;
    float: left;
    height: auto;
    margin: 0 0 20px 0;
}

.customSizeBox label {
    font-weight: normal;
    font-family: 'poppinsregular';
    font-size: 14px;
    color: #000000;
    width: auto;
    float: left;
    height: auto;
    margin: 7px 10px 0 0;
    width: 100%;
    margin: 0;
    padding: 12px;
    height: 40px;
    /* margin: 0 0 10px 0; */
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    font-weight: normal;
}

.customSizeBox .selectDropBox {
    width: 90px;
    float: left;
    height: auto;
}

.customSizeBox .htmlSelect {
    width: 100%;
    display: inline-block;
    text-align: left;
    float: none;
    position: relative;
}

.selectDropBox .htmlSelect select {
    width: 100%;
    height: 34px;
    border: 1px solid #c9c9c9;
    padding: 8px 30px 8px 5px;
    background: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    outline: none;
    font-display: 'poppinssemibold';
    color: #000000;
    font-size: 14px;
    line-height: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.selectDropBox .htmlSelect .dropArrow::before {
    content: "\F107";
    font-family: FontAwesome;
    font-size: 20px;
    color: #c9c9c9;
}

.selectDropBox .htmlSelect .dropArrow {
    width: 38px;
    height: 34px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    padding: 2px 0;
    text-align: center;
}

.customSizeBox .crossSignBox {
    width: auto;
    float: left;
    height: auto;
    margin: 7px 10px 0;
}

/*.effectsBox {
    width: 100%;
    float: left;
    height: auto;
    padding: 10px;
    margin: 0 0 15px 0;
}

.effectsBox ul {
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.effectsBox ul li {
    width: 68px;
    float: left;
    height: auto;
    margin: 0 10px 0 0;
    cursor: pointer;
    position: relative;
}*/

.collageSizeBox {
    text-align: center;
}

.collageSizeBox .selectDropBox {
    width: 100%;
    height: 34px;
    border: 1px solid #c9c9c9;
    padding: 8px 30px 8px 5px;
    background: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    outline: none;
    font-display: 'poppinssemibold';
    color: #000000;
    font-size: 14px;
    line-height: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.collageSizeBox .dropArrow {
    width: 38px;
    height: 34px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    padding: 2px 0;
    text-align: center;
}

.collageSizeBox .selectDropBox .dropArrow::before {
    content: "\F107";
    font-family: FontAwesome;
    font-size: 20px;
    color: #c9c9c9;
}

.hidden {
    display: none;
}

.inputLabel {
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.loading-mask {
    bottom: 0;
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.5);
}

.loading-mask .loader > img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.loading-mask .loader > p {
    display: none;
}


//////////Canvas Size Css ////////////
.customSizeBox ul {
   width: 100%;
   float: left;
   height: auto;
   margin: 0;
   padding: 0;
   list-style: none;
}

.customSizeBox ul li {
   width: 100%;
   float: left;
   height: auto;
   margin: 0;
   padding: 0;
}

.customSizeBox ul li label.control {
   width: 100%;
   margin: 0;
   padding: 12px;
   height: 51px;
   margin: 0 0 10px 0;
   -webkit-transition: .5s;
   -o-transition: .5s;
   transition: .5s;
   -webkit-transition: all .5s ease;
   -moz-transition: all .5s ease;
   -ms-transition: all .5s ease;
   -o-transition: all .5s ease;
   transition: all .5s ease;
   font-weight: normal;
}

label.control {
   display: table;
   margin-right: 20px;
   position: relative;
   padding-left: 30px;
   margin-bottom: 10px;
   line-height: 18px;
   cursor: pointer;
   font-size: 13px;
   color: #000000;
   max-width: 100%;
}

label.control input {
   position: absolute;
   z-index: -1;
   opacity: 0;
}

.customSizeBox ul li label.control.controlRadio .controlIndicator {
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   z-index: 1;
   border: solid 1px #c1d7db;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
}
label.control.controlRadio .controlIndicator {
   background: #ffffff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   position: absolute;
}
.customSizeBox ul li label.control .labeltext {
   position: relative;
   z-index: 9;
   display: block;
   width: 100%;
   float: left;
   margin: 0px 0 0 0;
}

.customSizeBox ul li label.control .labeltext .sizeBox {
   width: 125px;
   float: left;
   height: auto;
   font-family: 'poppinssemibold';
   font-size: 17px;
   color: #000000;
   margin: 7px 0 0 0;
   background: url(../../images/size-arrow.png) right center no-repeat;
}
.customSizeBox ul li label.control .labeltext .priceBox {
   width: auto;
   float: left;
   height: auto;
   margin: 7px 0 0 20px;
   font-family: 'poppinsbold';
   font-size: 17px;
   color: #ff339a;
}

.li-custom label {
    font-weight: normal;
    font-family: 'poppinsregular';
    font-size: 14px;
    color: #000000;
    width: 80px;
    float: left;
    height: auto;
    margin: 0;
    padding: 0;
}
.li-custom label span {
    display: inline-block;
    font-size: 11px;
}
.li-custom .selectDropBox{
    width: 75px;
    float: left;
    height: auto;
    margin: 0;
}
.productCategoryBox .selectDropBox{
    width: 100%;
    float: left;
    height: auto;
    margin: 0;
    text-align: center;
}
.li-custom .selectDropBox .htmlSelect{
    width: 100%;
    display: inline-block;
    text-align: left;
    float: none;
    position: relative;
    background: #ffffff;
}
.productCategoryBox .selectDropBox .htmlSelect{
    width: 100px;
    display: inline-block;
    text-align: left;
    float: none;
    position: relative;
    background: #ffffff;
}
.li-custom .selectDropBox .htmlSelect select, .productCategoryBox .selectDropBox .htmlSelect select{
    width: 100%;
    height: 34px;
    border: 1px solid #c9c9c9;
    padding: 8px 30px 8px 5px;
    background: none;
    position: relative;
    z-index: 1;
    cursor: pointer;
    outline: none;
    font-display: 'poppinssemibold';
    color: #000000;
    font-size: 14px;
    line-height: 18px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-indent: .01em;
    font: inherit;
    margin: 0;
    text-transform: none;
    font-family: inherit;
}
.li-custom .selectDropBox .htmlSelect .dropArrow, .productCategoryBox .selectDropBox .htmlSelect .dropArrow{
    width: 38px;
    height: 34px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    padding: 2px 0;
    text-align: center;
}
.li-custom .selectDropBox .htmlSelect .dropArrow::before, .productCategoryBox .selectDropBox .htmlSelect .dropArrow::before{
    content: "\F107";
    font-family: FontAwesome;
    font-size: 20px;
    color: #c9c9c9;
}
, .productCategoryBox .selectDropBox .htmlSelect select option {
    line-height: 18px;
    font-size: 18px;
    padding: 5px;
    height: 30px;
    vertical-align: middle;
}

.changeProduct-btn{
    width: auto;
    float: left;
    height: auto;
    padding: 7px 10px 7px;
    margin: 0;
    background: #21baeb;
    color: #fff;
    font-family: 'poppinsmedium';
    margin-bottom: 20px;
}
.changeProduct-btn:hover,.changeProduct-btn:active{
    color: #fff;
}
.effectsRemoval ul li label.control{
     display: inline-block;
     margin-right: 0; 
     position: relative; 
     padding-left: 0; 
     margin-bottom: 0; 
     line-height: 22px; 
     cursor: pointer; 
     font-size: 14px; 
     color: #2c3f4c; 
}
.effectsRemoval ul li label.control span.controlIndicator,.effectsRemoval ul li label.control input::checked{
    background: none;
    border: none;
}
.effectsRemoval ul li label.control.controlRadio input:checked~.controlIndicator {
    background: transparent;
    border: none;
}
.effectsRemoval ul li label.control.controlRadio .controlIndicator::after{
    left: 0;
    top: 0;
    height: 0;
    width: 0;
    background: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.effectsRemoval ul li label.control.controlRadio .controlIndicator{
    background: transparent;
    border: none;
    position: absolute;
}
.effectsRemoval ul li label.control.controlRadio:hover input:not([disabled]):checked~.controlIndicator, .effectsRemoval ul li label.control.controlRadio input:checked:focus~.controlIndicator {
    background: transparent;
}
.leftPanelBox {
    overflow-y: scroll;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
/*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ff339a; 
  border-radius: 10px;
}*/
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ff339a; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ff339a; 
}

.effectsBox ul li img{width: 100%}


#change_size_shape:hover, #change_size_shape:focus, #change_size_shape.focus {
    color: #fff;
    text-decoration: none;
}

.other-options li label.control {display: inline-block;padding-left: 0}

.size-info {
   width: calc(100% - 120px -150px);
   display: inline-block;
   float: right;
   vertical-align: middle;
}
.size-info p{
   display: inline-block;
   line-height: 50px;
   font-family: 'poppinsregular';
   font-size: 25px;
   color: #181818;
   font-weight: normal;
   margin-right: 50px;
   margin-bottom: 0;
   float: none;
}
@media only screen and (max-width: 767px) {
    .size-info p{
       float: none;
	   font-size: 16px;
       margin-right: 5px; 
       margin-left: 15px;
       margin-top: 7px;
    }
}


/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.leftPanelBox {
       
       /* ie scrollbar color properties */
       scrollbar-base-color: #efefef;
       scrollbar-face-color: #ff339a;
       scrollbar-3dlight-color: #ff339a;
       scrollbar-highlight-color: #ff339a;
       scrollbar-track-color: #efefef;
       scrollbar-arrow-color: #ff339a;
       scrollbar-shadow-color: #ff339a;
       scrollbar-dark-shadow-color: #ff339a;
 }
 
     .leftPanelBox:after {
       content: "";
       height: 32px;
       display: block;
   }
   
}
/*Edge*/
@supports (-ms-ime-align:auto)  {
.leftPanelBox:after {
   content: "";
   height: 16px;
   display: block;
}
}

/*Firefox*/
/*From version 64 - https://drafts.csswg.org/css-scrollbars-1/*/
.leftPanelBox, .changeProductsMainBox {
   scrollbar-width: thin;
   scrollbar-color: #ff339a #efefef;
}

.mugColorSelectionBox {
   width: 100%;
   float: left;
   height: auto;
   margin: 0 0 30px 0;
}
.mugColorSelectionBox h5 {
   width: 100%;
   float: left;
   height: auto;
   margin: 0 0 10px 0;
   padding: 0;
   display: block;
   font-family: 'poppinsmedium';
   font-size: 16px;
   color: #000000;
}
.mugColorSelectionBox ul {
   width: 100%;
   float: left;
   height: auto;
   margin: 0;
   padding: 0;
   list-style: none;
}
.mugColorSelectionBox ul li {
   width: auto;
   float: left;
   height: auto;
   margin: 0 10px 0 0;
}
.mugColorSelectionBox ul li .btnColor {
   width: 26px;
   height: 26px;
   position: relative;
   padding: 5px;
   background: none;
   -webkit-border-radius: 13px;
   -moz-border-radius: 13px;
   border-radius: 13px;
   border: none;
}

#mug_options ul li .btnColor.selected.white::after, #mug_options ul li .btnColor.selected.white::before   {
    background: #ff339a;   
}

#mug_options ul li .btnColor.white{
    border: solid 1px #ebf0f1;
}

#mug_options ul li .btnColor.selected::before {
    content: '';
    width: 5px;
    height: 3px;
    background: #ffffff;
    display: block;
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    left: 7px;
    top: 13px;
}
#mug_options ul li .btnColor.selected::after {
    content: '';
    width: 12px;
    height: 3px;
    background: #ffffff;
    display: block;
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    left: 9px;
    top: 12px;
}

.select-size ul li label.control.controlRadio input:checked~.controlIndicator {
    border: solid 1px #ff339a;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
}
@media only screen and (max-width: 767px){
  .prodcutSelectedBox {
    display: none;
  }
}
.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul#layoutshapesList li{
    /*width: 10%;*/
    min-width: 50px;
    box-sizing: border-box;
    width: 90px;
    height: 90px;
    opacity: 0.6;
    padding: 10px;
}
.leftMenuMainBox .changeProductsMainBox .productCategoryBox ul#layoutshapesList li img{
    border: 0;
}
.selectDropBox.formGroup{
    width: 97%;
    margin-bottom: 10px;
}
.lessWidth{
    width: 97%;
}
.fontFamilyWrapper{
    width: 200px;
    float: left;
    padding-right: 15px;
}
.selectBox {
    background: #fff;
    border: 1px solid #e1e6f0;
    line-height: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    height: 40px
}

@media only screen and (max-width: 1440px) {
    .selectBox {
        height:33px
    }
}

.selectBox>select {
    height: inherit
}

.selectBox:before {
    content: "\F0D7";
    font-family: FontAwesome;
    width: 33px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: 36px;
    border-left: 1px solid #e1e6f0;
    background: #f5f7fa;
    text-align: center;
    cursor: pointer
}
@media only screen and (max-width: 767px) {
    .selectBox .selected_text {
        line-height:25px
    }
}
.selectBox .selected_text {
    width: 100%;
    float: left;
    height: auto;
    padding: 3px 38px 5px 10px;
    font-size: 14px
}
.txt_fontfamily_with_style {
    top: 115px;
    left: 395.994px;
    width: 185px;
    display: none;
    position: absolute;
    background: #fff;
    height: auto;
    max-height: 250px;
    overflow-y: auto;
    z-index: 999
}

@media only screen and (max-width: 767px) {
    .txt_fontfamily_with_style {
        width:130px;
        z-index: 99999;
        max-height: 90px
    }
}

.txt_fontfamily_with_style.open {
    display: block
}

.txt_fontfamily_with_style li {
    width: 100%;
    float: left;
    height: auto;
    padding: 5px 0 5px 5px;
    cursor: pointer;
    font-size: 14px
}

.txt_fontfamily_with_style li.active,.txt_fontfamily_with_style li:hover {
    background: #8896ae;
    color: #fff
}

.btnTopPanel,
    .btnTopPanel .selectBox:before {
        display: inline-block;
        position: relative;
        text-align: center;
        cursor: pointer
    }

    .btnTopPanel {
        width: 21px;
        height: 32px;
        margin: 0;
        background: 0 0;
        border: none;
        vertical-align: middle;
        touch-action: manipulation;
        white-space: nowrap;
        padding: 2px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        text-transform: uppercase;
        font-family: poppinsmedium;
        color: #dadada;
        font-weight: 400;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .btnTopPanel .selectBox:before {
        content: "\F0D7";
        font-family: FontAwesome;
        width: 33px;
        right: -103px;
        border-bottom-right-radius: 7px;
        border-start-end-radius: 7px;
        line-height: 30px;
        border-left: 1px solid #e1e6f0;
        background: #f5f7fa
    }

    .btnTopPanel.right_Btn::after,
    .left_Btn::before,
    .right_Btn::before {
        content: '';
        background: #596981;
        display: block;
        position: absolute;
        left: 50%;
        top: 50%
    }

    .btnTopPanel .selectBox {
        width: 144px;
        height: 32px;
        border: 1px solid #d5dce6;
        border-radius: 7px;
        padding: 0 0 0 5px
    }

    #txt_fontfamily.selectBox .selected_text {
        width: 100%;
        float: left;
        height: auto;
        padding: 3px 38px 5px 10px;
        font-size: 14px;
        top: -3px;
        position: absolute;
        left: 4px;
    }

    .btnTopPanel.right_Btn::after {
        width: 2px;
        height: 10px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .left_Btn::before,
    .right_Btn::before {
        width: 10px;
        height: 2px;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    .text_MenuBox {
        list-style: none;
        display: grid;
        border: 1px solid #d5dce6;
        border-radius: 7px;
        align-items: center;
        grid-auto-columns: max-content;
        grid-auto-flow: column;
        height: 40px;
        gap: 4px;
        padding-left: 4px;
        padding-right: 4px;
        box-shadow: 0 0 0 1px rgba(64, 87, 109, .04), 0 6px 20px -4px rgba(64, 87, 109, .3);
        background-color: #fff
    }

    .digit_Only,
    .digit_Only:focus {
        border: none
    }

    .text_MenuBox li .btn_Text.btn_LeftAlign {
        background-position: 0 -1344px
    }

    .text_MenuBox li .btn_Text.btn_CenterAlign {
        background-position: 0 -1408px
    }

    .text_MenuBox li .btn_Text.btn_RightAlign {
        background-position: 0 -1472px
    }

    .text_MenuBox li .btn_Text.btn_FlipV {
        background-position: 0 -704px
    }

    .text_MenuBox li .btn_Text.btn_FlipH {
        background-position: 0 -640px
    }

    .text_MenuBox li .btn_Text.Layer_Up {
        background-position: 0 -1536px
    }

    .text_MenuBox li .btn_Text.Layer_Down {
        background-position: 0 -1600px
    }

    .text_MenuBox li .btn_Text.btnBold {
        background-position: 0 -1152px
    }

    .text_MenuBox li .btn_Text.btnItalic {
        background-position: 0 -1216px
    }

    .text_MenuBox li .btn_Text.btnUnderline {
        background-position: 0 -1280px
    }

    .text_MenuBox li .btn_Text {
        width: 30px;
        height: 31px;
        border: none;
        background: url(../images/sprite.png) left top no-repeat
    }

    .digit_Only {
        width: 45px;
        text-align: center
    }

    #txt_fontfamily_with_style li {
        padding: 10px;
        cursor: pointer;
        font-size: 20px;
        height: 40px
    }

    #txt_fontfamily_with_style li:hover {
        background-color: rgba(64, 87, 109, .07)
    }

    @media only screen and (max-width:767px) {
        .text_MenuBox {
            overflow: scroll;
            overflow-y: hidden;
            height: 45px
        }

        .grid_container {
            z-index: 999;
            position: fixed;
            bottom: 5px;
            max-width: 100%
        }

        .rotate_Btn,
        .spacing_Btn {
            display: block
        }
    }
    
    .grid_container{
        z-index: 999;
        position: absolute;
        width: 100%;
        display: none;
    }

    @media (min-width:768px) and (max-width:1279px) {
        .grid_container {
            z-index: 999;
            position: fixed;
            bottom: 5px;
            max-width: 100%
        }
    }