/* virtual sample css */
.vsWrap {
    min-width: 950px;
    width: 100%;
    margin: 0 auto;
}
.vsHeader {
    float: left;
    width: 100%;
    padding: 4px 10px;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
}
.vsHeader .ui-inputfield {
    border: 1px solid #DEDEDE;
    box-shadow: none!important;
    text-shadow: none!important;
    padding: 1px 5px!important;
    font-size: 18px!important;
    font-weight: 400!important;
    margin-right: 5px!important;
}
.projectTitle img {
    height: 27px;
}
.projectTitle > span {
    font-size: 18px;
    font-weight: 400;
    display: inline-block;
    margin: 0 10px;
}
.projectTitle i,
.projectTitle svg {
    color: #747474;
    font-size: 16px;
    margin-left: 5px;
    cursor: pointer;
}
.projectTitle i.fa-check,
.projectTitle svg.fa-check {
    margin-left: 0;
}
.projectTitle:hover {
    text-decoration: none!important;
}
.vsHeaderBtn {
    padding: 4px 15px 4px 15px;
    border-left: 1px solid #e2e2e2;
}
.vsHeaderBtn span {
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
}
.vsHeaderBtn i,
.vsHeaderBtn svg {
    color: #2fa5e4;
    font-size: 24px;
    margin-right: 10px;
}
.vsHeaderBtn .fa-folder {
    width: 27px;
}
.vsHeaderBtn a:hover {
    text-decoration: none!important;
}
.vsHeaderBtn a:hover span {
    text-decoration: underline;
}
.vsHeaderBtn .ui-state-disabled {
    background: none;
    color: #000;
    opacity: 1;
}
.vsHeaderBtn .ui-state-disabled i,
.vsHeaderBtn .ui-state-disabled svg {
    color: #34c612;
    margin-left: 5px;
    font-size: 22px;
}
.vsHeaderBtn.vsSaveBtn {
    width: 140px;
    display: flex;
    justify-content: center;
}
.vsHeaderBtn:first-child {
    border-left: 0;
}
.vsFooter {
    float: left;
    width: 100%;
    padding: 10px;
    border: 1px solid #B1DAF2;
    background: #c3c3c3;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.vsFooter label {
    margin: 0 10px 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}
.vsFooter .form-control {
    padding: .375rem .5rem;
    border-radius: 8px;
    border: 1px solid #C4C4C4;
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #ededed 100%) 0% 0% no-repeat;
    font-size: 14px;
    color: #6E6E6E;
    width: auto;
}
.vsFooter .btn {
    margin-left: 10px;
}
.vsFooter > span {
    color: #fff;
    font-size: 16px;
}
.vsContent {
    float: left;
    width: 100%;
    padding: 10px;
    border: 1px solid #B1DAF2;
    border-bottom: 0;
    border-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
.vsImageWrap {
    padding-right: 20px;
    position: relative;
}
.vsImage {
    width: 452px;
    height: 337px;
    background: #fff;
    box-shadow: 6px 6px 1px #00000029;
    border: 1px solid #707070;
    position: relative;
}
.vsPadDragContainer {
    position: absolute;
    margin-top: 20px;
    overflow: hidden;
}
.vsPadBleed {
    position: relative;
    border: 1px solid #ff0000;
    overflow: hidden;
}
.vsPadBleed .vsPadHeight {
    display: none;
}
.vsPadBleed .vsPadWidth {
    display: none;
}
.vsPadBleed.bleedPreview {
    border: 1px solid #FF00001A;
}
.vsPadBleed.bleedPreview .vsImage {
    overflow: hidden;
}
.vsPadBleed.noBleed {
    border: 0;
}
.bleedDialogWrap p {
    text-align: center;
    margin: 0;
}
.bleedDemo {
    margin-left: -15px;
    margin-right: -15px;
}
.bleedDemo > div {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}
.bleedDemo p {
    margin-top: 10px;
    font-style: italic;
    font-weight: 500;
}
.bleedDemo i,
.bleedDemo svg {
    font-size: 36px;
}
.bleedDemo i.fa-times,
.bleedDemo svg.fa-times {
    color: #ff0000;
}
.bleedDemo i.fa-thumbs-up,
.bleedDemo svg.fa-thumbs-up {
    color: #2BBC00;
}
.vsControlsWrap {
    background: #E5E5E5;
    width: 460px;
    border-radius: 4px;
}
.vsControlsWrap .ui-tabs {
    float: left;
    width: 100%;
}
.vsControlsWrap .ui-tabs .ui-tabs-panels {
    border: 0!important;
    margin: 0;
    background: none;
    float: left;
    width: 100%;
}
.vsControlsWrap .ui-tabs .ui-tabs-panels .ui-tabs-panel {
    float: left;
    width: 100%;
    padding: 0!important;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav {
    border: none;
    border: 0;
    margin: 0;
    float: left;
    width: 100%;
    background: #fff;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li {
    width: 33.3333%;
    border-right: 4px solid #fff!important;
    border-left: 4px solid #fff!important;
    background: #fff;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li a {
    border-top-right-radius: 4px!important;
    border-top-left-radius: 4px!important;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li a:before {
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    font-size: 24px;
    font-weight: 900;
    color: #6E6E6E;
    margin-right: 10px;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li a[href$="logosTab"]:before {
    content: "\f1c5";
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li a[href$="textTab"]:before {
    content: "\f031";
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li.ui-state-active {
    border: 0!important;
    border-right: 4px solid #fff!important;
    border-left: 4px solid #fff!important;
    background: #fff!important;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li.ui-state-active a {
    border: 0!important;
    background: #E5E5E5!important;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li.ui-state-active a:before {
    color: #0099cc;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li:first-child {
    border-right: 4px solid #fff!important;
    border-left: 0!important;
}
.vsControlsWrap .ui-tabs .ui-tabs-nav li:last-child {
    border-left: 4px solid #fff!important;
    border-right: 0!important;
}
.controlsTab {
    float: left;
    width: 100%;
    padding: 10px;
}
.vsTextTab {
    float: left;
    width: 100%;
    padding: 10px;
}
.controlsLogo {
    float: left;
    width: 100%;
    background: #fff;
}
.controlsLogo .uploadLogo {
    width: 33.3333%;
}
.vsTextControls {
    float: left;
    width: 100%;
    background: #fff;
}
.vsTextControls .addVsText {
    width: 33.3333%;
}
.addVsText {
    padding: 15px;
    text-align: center;
}
.addVsText .vsText {
    border: 1px solid #DEDEDE;
    width: 104px;
    height: 54px;
    padding: 5px;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    color: #A8A8A8;
    text-align: center;
}
.addVsText .vsText img {
    max-width: 100%;
    max-height: 100%;
}
.addVsText .vsText a {
    height: 72px;
}
.addVsText .vsTextTitle {
    margin: 5px 0 0;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #6E6E6E;
}
.addVsText.active .vsText {
    border: 1px solid #239EDF;
}
.addVsText.noLogo .vsText {
    border: 1px dashed #DEDEDE;
}
.addVsText .vsTextButton {
    background: none;
    padding: 0;
    margin: 10px 0 0;
    border: 0;
    cursor: pointer;
}
.addVsText .vsTextButton p {
    margin: 0;
}
.addVsText .vsTextButton i,
.addVsText .vsTextButton svg {
    font-size: 24px;
    color: #6E6E6E;
}
.addVsText .ui-icon {
    position: relative;
    top: auto!important;
    left: auto!important;
    display: block!important;
    width: 100%!important;
    text-align: center;
    text-indent: 0!important;
    height: auto!important;
}
.addVsText .ui-icon:before {
    content: "\f067";
    font-family: "Font Awesome 5 Pro";
    display: inline-block !important;
    font-size: 24px!important;
    font-weight: 900!important;
    color: #6E6E6E!important;
}
.addVsText .ui-button-text {
    display: block!important;
    width: 100%!important;
    text-align: center;
    font-size: 10px!important;
    font-weight: 700!important;
    color: #6E6E6E!important;
}
.addVsText .removeLogo {
    background: none;
    padding: 0;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    height: 22px!important;
    width: 22px!important;
}
.addVsText .removeLogo i,
.addVsText .removeLogo svg {
    font-size: 22px;
    color: #E20000;
}
.uploadLogo {
    padding: 15px;
    text-align: center;
}
.uploadLogo .logoImage {
    border: 1px solid #DEDEDE;
    width: 84px;
    height: 78px;
    padding: 5px;
    position: relative;
}
.uploadLogo .logoImage img {
    max-width: 100%;
    max-height: 100%;
}
.uploadLogo .logoImage a {
    height: 72px;
}
.uploadLogo .logoTitle {
    margin: 5px 0 0;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #6E6E6E;
}
.uploadLogo.active .logoImage {
    border: 1px solid #239EDF;
}
.uploadLogo.noLogo .logoImage {
    border: 1px dashed #DEDEDE;
}
.uploadLogo .uploadBtn {
    background: none;
    padding: 0;
    margin: 10px 0 0;
    border: 0;
    cursor: pointer;
}
.uploadLogo .uploadBtn p {
    margin: 0;
}
.uploadLogo .uploadBtn i,
.uploadLogo .uploadBtn svg {
    font-size: 24px;
    color: #6E6E6E;
}
.uploadLogo .ui-fileupload {
    position: relative!important;
    width: 100%!important;
}
.uploadLogo .ui-fileupload,
.uploadLogo .ui-fileupload-buttonbar,
.uploadLogo .ui-fileupload-choose,
.uploadLogo .ui-button-text,
.uploadLogo .ui-icon,
.uploadLogo .ui-fileupload-content,
.uploadLogo .ui-fileupload-files {
    margin: 0!important;
    padding: 0!important;
    background: none!important;
    border: 0!important;
    box-shadow: none!important;
}
.uploadLogo .ui-icon {
    position: relative;
    top: auto!important;
    left: auto!important;
    display: block!important;
    width: 100%!important;
    text-align: center;
    text-indent: 0!important;
    height: auto!important;
}
.uploadLogo .ui-icon:before {
    content: "\f067";
    font-family: "Font Awesome 5 Pro";
    display: inline-block !important;
    font-size: 24px!important;
    font-weight: 900!important;
    color: #6E6E6E!important;
}
.uploadLogo .ui-button-text {
    display: block!important;
    width: 100%!important;
    text-align: center;
    font-size: 10px!important;
    font-weight: 700!important;
    color: #6E6E6E!important;
}
.uploadLogo .ui-fileupload-content {
    position: absolute;
    left: 0;
    top: -13px;
    width: 100%;
    background: #fff!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files {
    display: block!important;
    width: 100%!important;
    text-align: center;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files > div {
    width: 100%!important;
    text-align: center;
    display: block!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row {
    width: 100%!important;
    text-align: center;
    display: block!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row > div:not([class]) {
    display: none!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row .ui-fileupload-preview {
    width: 100%!important;
    text-align: center;
    margin: 0!important;
    padding: 0!important;
    display: block;
    height: 50px!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row .ui-fileupload-preview * {
    max-width: 100%!important;
    max-height: 100%!important;
    width: auto!important;
    height: auto!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row .ui-fileupload-progress {
    margin: 0!important;
    width: 100%!important;
    padding: 0!important;
    display: block;
    top: auto!important;
    bottom: auto!important;
    left: auto!important;
    right: auto!important;
}
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row .ui-fileupload-progress > div,
.uploadLogo .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row .ui-fileupload-progress > span {
    width: 100%!important;
    height: 15px!important;
    top: auto!important;
    bottom: auto!important;
    left: auto!important;
    right: auto!important;
}
.uploadLogo .removeLogo {
    background: none;
    padding: 0;
    border: 0;
    cursor: pointer;
    position: absolute;
    right: -11px;
    top: -11px;
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    height: 22px!important;
    width: 22px!important;
}
.uploadLogo .removeLogo i,
.uploadLogo .removeLogo svg {
    font-size: 22px;
    color: #E20000;
}
.controlsGroup {
    float: left;
    width: 100%;
    margin-top: 10px;
    -ms-flex-align: end;
    align-items: flex-end;
}
.controlsGroup p {
    font-size: 14px;
    font-weight: 600;
    color: #575757;
    margin: 0 0 5px;
}
.controlsGroup > span {
    padding-left: 10px;
    width: 100%;
}
.controlsGroup > span ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #ededed 100%) 0% 0% no-repeat;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    padding: 3px 5px;
    width: 100%;
}
.controlsGroup > span ul li {
    float: left;
    border-left: 1px solid #e3e3e3;
    flex-grow: 1;
    text-align: center;
}
.controlsGroup > span ul li:first-child {
    border: 0;
}
.controlsGroup > span:first-child {
    padding-left: 0;
}
.controlsGroup > span.d-flex .form-control {
    width: auto;
}
.controlsGroup .btn {
    background: none;
    border: 0;
    width: 100%;
    border-radius: 5px;
}
.controlsGroup .btn span {
    font-size: 11px;
    color: #6E6E6E;
}
.controlsGroup .btn.btnApply span {
    font-weight: 700;
    font-size: 14px;
    padding: 3px 0 2px;
    display: inline-block;
}
.controlsGroup .btn i,
.controlsGroup .btn svg {
    font-size: 16px;
    color: #b9b9b9;
    margin-right: 5px;
}
.controlsGroup .btn:focus {
    box-shadow: none;
}
.controlsGroup .btn:active {
    box-shadow: none;
    /*background:transparent linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 30%, #CCCCCC 100%) 0% 0% no-repeat;*/
    color: #2fa5e4;
}
.controlsGroup .btn:active span,
.controlsGroup .btn:active i,
.controlsGroup .btn:active svg {
    color: #2fa5e4;
}
.controlsGroup label {
    font-size: 12px;
    font-weight: 400;
    color: #575757;
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.controlsGroup label input[type="checkbox"] {
    margin-right: 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #707070;
}
.controlsGroup .ui-chkbox-box {
    margin: 5px 5px 0 0!important;
}
.controlsGroup.btnTextOut {
    margin-bottom: 15px;
}
.controlsGroup.btnTextOut > span .btn {
    position: relative;
}
.controlsGroup.btnTextOut > span .btn i,
.controlsGroup.btnTextOut > span .btn svg {
    margin: 0;
}
.controlsGroup.btnTextOut > span .btn span {
    position: absolute;
    bottom: -23px;
}
.controlsGroup .form-control {
    padding: .375rem .5rem;
    border-radius: 8px;
    border: 1px solid #C4C4C4;
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #ededed 100%) 0% 0% no-repeat;
    font-size: 14px;
    color: #6E6E6E;
}
.controlsGroup textarea {
    resize: none;
    height: 84px;
}
.controlsGroup .alert {
    border: 0;
    border-radius: .25rem;
}
.btn.btn-vs {
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #ededed 100%) 0% 0% no-repeat;
    border: 1px solid #C4C4C4;
    border-radius: 8px;
    padding: 6px 30px 7px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #6E6E6E;
}
.canvasOrientation {
    display: inline-block;
    border-radius: 8px;
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #ededed 100%) 0% 0% no-repeat;
    border: 1px solid #C4C4C4;
    padding: 6px 15px;
    margin: 0 10px;
}
.canvasOrientation .canvasIcon {
    background: #EBEBEB;
    border: 0;
    box-shadow: 2px 2px 2px #00000029;
    cursor: pointer;
    outline: none;
    opacity: 1;
    position: relative;
}
.canvasOrientation .canvasIcon span {
    display: none;
}
.canvasOrientation .canvasIcon.active {
    border: 1px solid #55B3E9;
}
.canvasOrientation .canvasIcon.canvasSquare {
    width: 25px;
    height: 25px;
}
.canvasOrientation .canvasIcon.canvasLandscape {
    width: 38px;
    height: 25px;
}
.canvasOrientation .canvasIcon.canvasPortrait {
    width: 25px;
    height: 38px;
}
.canvasOrientation .canvasIcon:before {
    content: "";
    display: block;
    position: absolute;
    background: #ffffcc;
}
.canvasOrientation .canvasIcon.adhesiveTop:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 8px;
}
.canvasOrientation .canvasIcon.adhesiveBottom:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
}
.canvasOrientation .canvasIcon.adhesiveLeft:before {
    left: 0;
    top: 0;
    height: 100%;
    width: 8px;
}
.canvasOrientation .canvasIcon.adhesiveRight:before {
    right: 0;
    top: 0;
    height: 100%;
    width: 8px;
}
.canvasOrientation span {
    background: #E2E2E2;
    width: 1px;
    height: 32px;
    margin: 0 15px;
}
.vsAlignHorizontal {
    /*left: 50%!important;*/
    /*transform: translate(-50%, 0);*/
}
.vsAlignVertical {
    /*top: 50%!important;*/
    /*transform: translate(0, -50%);*/
}
.vsAlignCenter {
    /*top: 50%!important;*/
    /*left: 50%!important;*/
    /*transform: translate(-50%, -50%);*/
}
.vsPositionLeft {
    left: 0!important;
}
.vsPositionRight {
    right: 0!important;
}
.vsPositionTop {
    top: 0!important;
}
.vsPositionBottom {
    bottom: 0!important;
}
.padAdhesive {
    position: absolute;
    background: rgba(255, 255, 230, 0.3);
}
.topAdhesive {
    top: 1px;
    left: 1px;
    right: 1px;
}
.bottomAdhesive {
    bottom: 1px;
    left: 1px;
    right: 1px;
}
.leftAdhesive {
    left: 1px;
    top: 1px;
    bottom: 1px;
}
.rightAdhesive {
    right: 1px;
    top: 1px;
    bottom: 1px;
}
.vsListing .vsListItem {
    padding: 15px 0;
    border-top: 1px solid #D6D6D6;
}
.vsListing .vsListItem:first-child {
    padding-top: 5px;
    border-top: 0;
}
.vsListBtn {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: #707070;
}
.vsListBtn a {
    font-size: 16px;
    font-weight: 400;
    color: #707070;
    font-family: Helvetica, "soleil", Arial, Verdana, sans-serif;
    display: flex;
    align-items: flex-end;
}
.vsListBtn i,
.vsListBtn svg {
    font-size: 18px;
    margin-right: 5px;
}
.vsListBtn li {
    padding: 0 15px;
    /*
      border-left:1px solid #000;
      */
}
.vsListBtn li:first-child {
    border-left: 0;
}
.vsListContent .vsListThumb {
    width: 66px;
    height: 66px;
    position: relative;
    border: 1px solid #D6D6D6;
}
.vsListContent .vsListThumb span {
    background: #ffffdd;
    color: #dedede;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.vsListContent .vsListDescription {
    padding: 0 0 0 15px;
    font-size: 18px;
}
.vsListContent .vsListDescription p {
    margin: 0;
}
.vsListContent .vsListDescription p.vsListDescriptionInfo {
    color: #707070;
    font-weight: 300;
    font-size: 14px;
}
.vsListingPaginator {
    margin-top: 15px;
}
.vsListingPaginator .vsListBtn {
    float: right;
    font-size: 18px;
}
.vsDrawer {
    position: absolute;
    width: 1088px;
    height: 555px;
    background: #fff;
    z-index: 99;
    overflow-y: auto;
}
.openDrawer .vsDrawer {
    display: block;
}
.openDrawer .vsFooter {
    position: relative;
}
.openDrawer .vsFooter:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #c3c3c3;
    z-index: 10;
}
.openDrawer .vsHeaderBtn .fa-folder:before {
    content: "\f07c";
}
.closeDrawer .vsDrawer {
    display: none;
}
.vsPadHeight {
    position: absolute;
    right: 100%;
    top: 0;
    height: 100%;
    margin-right: 10px;
    display: table;
}
.vsPadHeight:before {
    content: "";
    position: absolute;
    display: table;
    left: 50%;
    margin-left: -0.5px;
    width: 1px;
    height: 100%;
    background: #707070;
}
.vsPadHeight > span {
    display: table-cell;
    vertical-align: middle;
}
.vsPadHeight > span > span {
    padding: 5px;
    background: #fff;
    display: inline-block;
    z-index: 1;
    line-height: 1;
    color: #707070;
    position: relative;
}
.vsPadHeight > span:before,
.vsPadHeight > span:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    height: 1px;
    background: #707070;
}
.vsPadHeight > span:before {
    top: 0;
}
.vsPadHeight > span:after {
    bottom: 0;
}
.vsPadWidth {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: 15px;
    display: table;
}
.vsPadWidth:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -0.5px;
    height: 1px;
    width: 100%;
    background: #707070;
}
.vsPadWidth > span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.vsPadWidth > span > span {
    padding: 5px;
    background: #fff;
    display: inline-block;
    z-index: 1;
    line-height: 1;
    color: #707070;
    position: relative;
}
.vsPadWidth > span:before,
.vsPadWidth > span:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    height: 16px;
    width: 1px;
    background: #707070;
}
.vsPadWidth > span:before {
    left: 0;
}
.vsPadWidth > span:after {
    right: 0;
}
/*
.vsPdfOuter {
  padding:30px;
}
*/
.vsPdfInner {
    /*
    overflow:hidden;
    border:1px solid #707070;
    */
    font-family: "soleil", Arial, Verdana, sans-serif !important;
    padding: 30px;
}
.vsPdfInner .vsViewTitle {
    border-bottom: 1px solid #000;
    padding-bottom: 30px;
    margin-bottom: 30px;
    float: left;
    width: 100%;
}
.vsPdfInner .vsViewTitle img {
    width: 100px;
    float: left;
}
.vsPdfInner .vsViewTitle h2 {
    font-size: 30px;
    font-weight: 400;
    color: #666;
    margin-left: 115px;
    display: block;
    padding-top: 10px;
    font-family: "soleil", Arial, Verdana, sans-serif !important;
}
.vsPdfInner .vsViewTitle p {
    font-weight: 600;
    font-size: 14px;
    color: #000;
}
.vsPdfInner .vsViewTitle .float-right {
    margin-top: 20px;
}
.vsPdfInner .pdfRow {
    margin: 0 -15px;
    overflow: hidden;
}
.vsPdfInner .pdfCol {
    float: left;
    width: 100%;
    padding: 0 15px;
}
.vsPdfInner .pdfCol-6 {
    float: left;
    width: 50%;
    padding: 0 15px;
}
.vsPdfInner .pdfImage {
    float: left;
    margin-right: 30px;
}
.vsPdfInner .pdfText {
    display: block;
}
.vsPdfInner ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.vsPdfInner ul li {
    margin-top: 5px;
}
.vsPdfInner ul li:first-child {
    margin-top: 0;
}
.vsPdfInner .vsPadLegend {
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    position: relative;
    margin-top: 20px;
    font-size: 14px;
}
.vsPdfInner .vsPadHeight {
    right: auto;
    left: 100%;
    margin-right: 0;
    margin-left: -20px;
    display: table!important;
}
.vsPdfInner .vsPadWidth {
    display: table!important;
}
.vsPdfInner .vsPadPdf {
    padding-bottom: 15px;
    float: left;
    margin-right: 10px;
}
.vsPdfInner .vsPadInfo {
    padding-left: 0!important;
    padding-right: 0!important;
}
.vsPdfInner .vsPadBleed {
    border: 0!important;
    overflow: initial!important;
}
.vsPdfInner .vsImage {
    overflow: hidden;
}
.vsArtDisclaimer {
    margin: 15px 0;
    font-size: 12px;
}
.customTooltip .arrow {
    position: absolute;
    display: block;
    width: .8rem;
    height: .4rem;
    left: 7px;
    top: 0;
}
.customTooltip .arrow:before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
    bottom: 0;
    border-width: 0 .4rem .4rem;
    border-bottom-color: #000;
}
.vsNoProjects {
    height: 460px;
    background: #dbdbdb;
    font-size: 30px;
    font-weight: 400;
    color: #000;
}
.vsNoProjects a {
    text-decoration: underline;
}
.vsNoProjects a:hover {
    text-decoration: none;
}
/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .headLinks {
        margin-right: -15px;
    }
    .shareForm {
        max-width: 400px;
    }
    .shareForm > div {
        float: left;
        width: 100%;
    }
    .cat6 .col-md-9,
    .cat6 .col-md-3 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        overflow-y: scroll;
    }
    .openSubNav {
        display: none!important;
    }
    .mainNav {
        width: 100%;
        list-style: none;
        padding: 5px 0;
        margin: 0;
        /*
        display:-ms-flexbox!important;
        display:flex!important;
        -ms-flex-pack:justify!important;
        justify-content:space-between;
        -ms-flex-align:center!important;
        align-items:center;
        */
        display: table!important;
        text-transform: uppercase;
        color: #474747;
        font-size: 16px;
        font-weight: 700;
    }
    .mainNav > li {
        display: table-cell !important;
        position: relative;
        padding: 0;
        border-left: 1px solid #ccc;
        vertical-align: middle;
    }
    .mainNav > li .logo {
        width: 68px;
        padding: 0;
        float: left;
    }
    .mainNav > li .logo img {
        float: left;
    }
    .mainNav > li a {
        display: block;
        color: #474747;
        text-decoration: none;
        padding: 5px 7px 5px 7px;
        position: relative;
        text-align: center;
        line-height: 1.1;
    }
    .mainNav > li a:hover {
        color: #474747;
        text-decoration: none;
    }
    .mainNav > li.hasChild > a {
        padding: 5px 30px 5px 7px;
    }
    .mainNav > li.hasChild > a:after {
        content: "\f13a";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 16px;
        color: #474747;
        position: absolute;
        right: 8px;
        top: 50%;
        margin-top: -8px;
        min-width: 16px;
    }
    .mainNav > li.accountLogin {
        display: none!important;
    }
    .mainNav > li:first-child {
        border-left: 0;
    }
    .mainNav > li.lowQ > a {
        padding: 5px 7px 5px 42px;
    }
    .mainNav > li.lowQ > a:before {
        content: "";
        display: block;
        position: absolute;
        left: 7px;
        top: 8px;
        width: 32px;
        height: 32px;
        background: url(../images/lq-icon.svg) no-repeat 50% 50%;
    }
    .mainNav > li.quickShip > a {
        padding: 5px 7px 5px 45px;
    }
    .mainNav > li.quickShip > a:before {
        content: "\f48b";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 26px;
        color: #0099cc;
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -13px;
        min-width: 33px;
    }
    .mainNav > li:hover > ul {
        display: block;
    }
    .mainNav > li:nth-last-child(-n+2) > ul {
        left: auto;
        right: 0;
    }
    .mainNav > li ul {
        position: absolute;
        left: 0;
        top: 100%;
        -webkit-animation: subMenuShow 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        animation: subMenuShow 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        display: none;
        background: #fff;
        z-index: 99;
        padding: 0;
        border: 1px solid #ebebeb;
        min-width: 220px;
        /*
            padding:10px;
            box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
            */
    }
    .mainNav > li ul > li {
        display: block!important;
        border-top: 1px solid #ebebeb;
        padding: 0;
    }
    .mainNav > li ul > li a {
        display: block;
        padding: 10px 15px!important;
        white-space: nowrap;
        text-transform: none;
        font-weight: 400;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        text-align: left!important;
        line-height: 1.5!important;
    }
    .mainNav > li ul > li:first-child {
        border-top: 0;
    }
    .mainNav > li ul > li:hover a {
        background: #f2f2f2;
    }
    .navTrigger {
        display: none;
    }
    .logo {
        width: 280px;
    }
    .headSearch .input-group select.form-control {
        max-width: 150px;
    }
    .headSearch .input-group .ui-inputfield {
        max-width: 100%;
    }
    .langWrap {
        margin-right: 15px;
    }
    #langSwitchPopup {
        width: 970px;
    }
    .noSidebar {
        width: 76%;
    }
    .cat6 .noSidebar {
        width: 100%;
    }
    .loginDrawer {
        display: none!important;
    }
    .navDrawer {
        display: block!important;
        width: 100%;
    }
    .mobileWelcome {
        display: none!important;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .bannerWrap {
        min-height: 360px;
    }
}
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .logo {
        width: 280px;
    }
    .headWrap .nav.infoNav {
        font-size: 14px;
    }
    .headWrap .nav.userNav {
        font-size: 16px;
    }
    .headSearch .input-group .input-group-prepend .input-group-text svg {
        font-size: 34px;
    }
    .headSearch .input-group .input-group-prepend .input-group-text span {
        margin-left: 10px;
        font-size: 16px;
    }
    .sideNav span {
        font-size: 14px;
    }
    .container {
        max-width: 100%;
    }
    .ui-tabs .ui-tabs-nav li a {
        font-size: 18px;
    }
}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .headWrap {
        padding: 15px 0 5px!important;
    }
    .headWrap .nav {
        /*
          &.infoNav {
            display:none;
          }
          */
    }
    .headSearch {
        background: none;
    }
    .headSearch .row {
        flex-wrap: wrap!important;
    }
    .headSearch .input-group .input-group-prepend {
        margin-right: 5px;
    }
    .headSearch .input-group .input-group-prepend .input-group-text {
        display: none;
    }
    .headSearch .input-group .input-group-prepend .input-group-text svg {
        font-size: 34px;
    }
    .headSearch .input-group .input-group-prepend .input-group-text span {
        margin-left: 10px;
        font-size: 16px;
    }
    .headSearch .input-group .ui-inputfield {
        border: 2px solid #ffde00!important;
    }
    .headSearch .input-group.headFilter {
        display: none;
    }
    .headLinks {
        display: none!important;
    }
    .mainNav {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0;
        display: block;
    }
    .mainNav li {
        float: left;
        width: 100%;
        position: relative;
        /*
          &:first-child {
            display:none;
          }
          */
    }
    .mainNav li a {
        float: left;
        width: 100%;
        color: #555555;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        text-align: left;
    }
    .mainNav li a:hover {
        text-decoration: none;
        color: #555555;
    }
    .mainNav li a br {
        display: none;
    }
    .mainNav li a span {
        padding: 0 3px;
    }
    .mainNav li ul {
        float: left;
        width: 100%;
        margin: 0;
        padding: 0 0 10px;
        display: none;
    }
    .mainNav li ul li a {
        padding: 7px 13px;
        color: #898989;
        font-size: 18px;
        font-weight: 700;
    }
    .mainNav li ul li a:hover {
        color: #898989;
    }
    .mainNav li:last-child ul {
        padding-bottom: 0;
    }
    .mainNav > li {
        border-top: 1px solid #d5d5d5;
    }
    .mainNav > li > a {
        text-transform: none;
        font-weight: 700;
        padding: 10px 10px;
        font-size: 22px;
        position: relative;
    }
    .mainNav > li.lowQ {
        border-bottom: 0;
    }
    .mainNav > li.lowQ > a {
        padding: 10px 13px 10px 47px;
    }
    .mainNav > li.lowQ > a:before {
        content: "";
        display: block;
        position: absolute;
        left: 13px;
        top: 11px;
        width: 32px;
        height: 32px;
        background: url(../images/lq-icon.svg) no-repeat 50% 50%;
    }
    .mainNav > li.quickShip > a {
        padding: 10px 13px 10px 50px;
    }
    .mainNav > li.quickShip > a:before {
        content: "\f48b";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 26px;
        color: #0099cc;
        position: absolute;
        left: 13px;
        top: 50%;
        margin-top: -11px;
        min-width: 33px;
    }
    .mainNav > li.accountLogin {
        border: 0;
        padding: 5px 13px 5px;
    }
    .mainNav > li.accountLogin > a {
        padding: 15px 42px 15px 20px;
        background: #0082CA;
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        position: relative;
        border-radius: 4px;
    }
    .mainNav > li.accountLogin > a:before {
        content: "\f138";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 26px;
        color: #FFCC00;
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -11px;
    }
    .mainNav > li.hasChild > a {
        padding: 10px 30px 10px 10px;
    }
    .mainNav > li.hasChild .openSubNav {
        position: absolute;
        right: 0;
        top: 0;
        margin-top: 0;
        width: 48px;
        height: 53px;
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mainNav > li.hasChild .openSubNav:after {
        content: "\f13a";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 22px;
        color: #898989;
    }
    .mainNav > li.hasChild .openSubNav.active:after {
        content: "\f139";
    }
    .mainNav > li:first-child {
        border-top: 0;
    }
    .artViewerWrap .featuredArticles .articleWrap {
        padding: 0;
    }
    .navWrap {
        background: none;
        border: 0;
    }
    .navWrap .container {
        display: -ms-flexbox !important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 0 10px;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .headSearch .input-group .ui-autocomplete {
        width: 100%;
    }
    .logoWrap {
        justify-content: center;
        width: 100%;
    }
    .headLinks {
        margin-top: 15px;
        justify-content: center!important;
        width: 100%;
    }
    .headLinks .justify-content-end {
        -ms-flex-pack: center!important;
        justify-content: center!important;
    }
    .headLinks .nav {
        -ms-flex-pack: center!important;
        justify-content: center!important;
    }
    .headLinks .infoNav li {
        margin-top: 5px;
    }
    .ui-tabs .ui-tabs-nav li a {
        font-size: 16px;
        padding: 10px 5px!important;
    }
    .logo {
        width: 100%;
        max-width: 280px;
    }
    .pageWrap {
        padding: 15px 0;
    }
    .navDrawer {
        display: none;
    }
    .articleColumn .articleWrap .articleThumb {
        height: auto;
    }
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .ui-tabs .ui-tabs-nav li {
        width: 100%;
        border-bottom: 1px solid #fff!important;
    }
    .listingFilter li .filterContent {
        display: none;
    }
    .listingFilter li .filterTitle:after {
        content: "\f13a";
    }
    .listingFilter li .filterTitle.active:after {
        content: "\f139";
    }
    .categoryDescription {
        height: auto;
        max-height: 235px;
    }
    .cat6 .articleWrap .categoryDescription {
        max-height: initial;
    }
    .cat6 .articleWrap .articleInfo {
        margin-top: 15px;
    }
    .dealerWrapper .dealerLeft {
        width: 100%;
    }
    .dealerWrapper .dealerRight {
        width: 100%;
        text-align: left;
        margin-top: 15px;
    }
    .userNav.loggedIn {
        flex-wrap: wrap!important;
        justify-content: center;
    }
    .userNav.loggedIn li:first-child {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .userNav.loggedIn li:nth-child(2) {
        border-left: 0!important;
    }
    .landingRow .landingThumb {
        text-align: center;
        margin-top: 15px;
    }
    .landingRow.flex-row-reverse .landingThumb {
        text-align: center;
    }
    .popularArticle .articleContent .articleTitle {
        font-size: 20px;
    }
    .popularArticle .articleThumb {
        width: 160px;
    }
    .imageMapLinks .mapUrl.topUrl {
        height: 30%!important;
    }
    .imageMapLinks .mapUrl.leftUrl1 {
        bottom: 35%!important;
        width: 50%!important;
    }
    .imageMapLinks .mapUrl.rightUrl1 {
        bottom: 35%!important;
        width: 50%!important;
        left: 50%!important;
    }
    .imageMapLinks .mapUrl.leftUrl2 {
        bottom: 0%!important;
        width: 50%!important;
        left: 0!important;
        height: 40%!important;
    }
    .imageMapLinks .mapUrl.rightUrl2 {
        bottom: 0%!important;
        width: 50%!important;
        left: 50%!important;
        height: 40%!important;
    }
}
/* Extra small devices (portrait phones, less than 576px) */
@media print {
    * {
        -webkit-print-color-adjust: exact;
        printer-colors: exact;
        color-adjust: exact;
    }
    body {
        overflow: visible!important;
        display: block!important;
        height: auto!important;
    }
    html {
        display: block!important;
        height: auto!important;
    }
    .row,
    .pageWrap {
        display: block!important;
    }
    .productPage div {
        display: block!important;
    }
    .headWrap {
        padding: 15px 0;
    }
    .headLinks,
    .headSearch,
    .navWrap,
    #footer,
    .noPrint {
        display: none!important;
    }
    .productPage .mainSidebar,
    .productPage .hidePrint,
    .productPage .ui-tabs-nav {
        display: none!important;
    }
    .forPrint {
        display: block!important;
    }
    /*
    .mainColumn {
      max-width:inherit!important;
      width:100%!important;
    }
    */
    .ui-tabs .ui-tabs-panel {
        display: block!important;
        border-top: 1px solid #ccc!important;
        overflow: hidden;
        /*
        -webkit-column-break-inside:avoid;
        page-break-inside:avoid;
        break-inside:avoid;
        */
    }
    .ui-tabs .ui-tabs-panel:first-child {
        border-top: 0!important;
    }
    .ui-tabs .ui-tabs-panel .col-sm-6 {
        float: left;
        width: 50%;
    }
    .productPage h1 {
        margin-bottom: 15px!important;
    }
    /*
    .ui-tabs-panels {
      -webkit-column-break-inside:avoid;
      page-break-inside:avoid;
      break-inside:avoid;
    }
    */
    .artViewerWrap {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .artViewerWrap .card {
        border: 0;
        padding: 0;
    }
    .artViewerWrap .card .card-body {
        padding: 0;
    }
}