/*
 *	LiveArt styles
 * 	dependence: Twitter Bootstrap 2.3.2
 *
 *	Contents:
 *	1. General
 *	2. LiveArt App Page
 *	3. LiveArt Canvas and Main Components
 *	4. LiveArtForms Menu
 * 		4.1 Forms Components, styles for all tabs header, thumbnails
 * 		4.3 Add Text Form
 * 		4.4 Names Numbers Form
 * 		- Upload Form
 *	5. Preview Menu
 *		5.1 Main Menu
 *		5.2 Product Sides Switch (Ian)
 *		5.3 Zoom
 *	6. Order Options (Vanja)
 *		6.1 Components
 *		6.2 Product info, colors
 *		6.3 Save, Share
 *		6.4 Sizes, Quantities
 *  7. Modals
 *       - general styles
 *       - Saved designs popup
 *       - Upload conditions popup
 *       - Upload Color Count Modal
 *       - Design List Modal
 *
*/

/*	1. General styles	GO TO LINE 251 */

html, body {
    background-color: #ebebeb;
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none !important;
}

body {
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
}

a {
    cursor: pointer;
}

label {
    font-size: 14px;
    font-weight: bold;
    padding: 0px 22px;
}

input[type="text"],
input[type="password"],
input[type="email"] {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 12px !important;
}

input[type="text"]::-ms-clear {
    display: none;
}

::-webkit-scrollbar {
    width: 7px;
    border: 1px solid #E0E0E0;
    border-radius: 3px;
    background-color: #E9E9E9;
    -moz-box-shadow: inset 0 1px #DCDCDC;
    -webkit-box-shadow: inset 0 1px #DCDCDC;
    box-shadow: inset 0 1px #DCDCDC;
}

::-webkit-scrollbar-track {
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #333333;
}

.py-0 {
    padding-left: 0;
    padding-right: 0;
}

.bold {
    font-weight: bold;
}

.btn {
    font-size: 12px !important;
}

.btnx {
    font-size: 12px !important;
    font-weight: bold;

    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #b3b3b3;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #E50000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
    padding: 8px 12px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
}

.btnx:hover,
.btnx:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
    background-color: #e6e6e6;
}


.btn > .caret {
    border-top: 4px solid #000000 !important;
}

.btn-small > .caret {
    margin-top: 8px !important;
}

.btn.btn-round {
    width: 23px;
    height: 23px;
    padding: 0;
    margin: 0;
    border-radius: 10px !important;
}

.btn.btn-round > i {
    margin-top: 0px !important;
    margin-left: 1px;
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
    color: #023399;
}

.btn-link[disabled],
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
    background: none;
    color: #999;
    opacity: 1;
}

.btn-group > .btn + .dropdown-toggle {
    padding-right: 7px;
    padding-left: 7px;
}

.btn-group > .dropdown-menu {
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    min-width: 99%;
}

.btn-group > .dropdown-menu > li > a {
    font-size: 12px;
}

.btn-group > .dropdown-menu > li.active > a,
.btn-group > .dropdown-menu > li > a:hover {
    background: #333333;
}

/*	BLOCK a:hover
a, a:hover {
    text-decoration: none;
    color: black;
} */

.liveart-back-btn {
    display: block;
    float: left;
    width: 112px;
    height: 112px;
    background-image: url(../../assets/img/back-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    -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;
}

.liveart-back-btn:hover, .liveart-back-btn:active {
    background-image: url(../../assets/img/back-icon-white.png);
    background-color: #333333;
}

.noUiSlider {
    width: 150px;
    margin-left: 12px;
    margin-right: 12px;
}

/* panels containers has absolute positioning to make the layout more flexible for the future development */
.liveart-panel-container {
    margin-right: 0px;
    position: relative;
    width: auto;
    height: auto;
}

/*	2. LiveArt App Page	*/
#liveart-main-container {
    margin: 0 auto;
    width: auto;
    height: auto;
}

#admin-mode-container #liveart-main-container {
    min-height: 500px;
}

#liveart-content {
    width: 100%;
    height: 100%;
    position: relative;
}

#liveart-header {
    height: 30px;
    width: 100%;
    background: url(../../assets/img/LiveArtLite_logo.png) no-repeat 2px center;
}

/* panel is stretched to its container */
.liveart-panel {
    /* float: right;  */

    /*   margin-right: -10px; */
    border: 0px;
    background-color: #FAFAFA;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    width: 100%;
    height: 100%;
    margin-bottom: 2px;

}

.liveart-panel2 {
    /* float: right;  */

    /*   margin-right: -10px; */
    border: 1px solid #DCDCDC;
    background-color: #FFF;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    margin-top: 19px;

}

.divider-horizontal {
    width: 200px;
    margin: 0px 0px 0px -1px;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid transparent;
}

/* blue progress bar preloader */
#liveart-init-preloader {
    top: 30%;
    position: absolute;
    width: 400px;
    left: 50%;
    transform: translate(-50%, 0);
    height: 50px;
    margin-top: -25px;
}

/*loading image progress bar effect*/
.pbar {
    transition: 0.5s ease;
}

/* Loader */
#liveart-loader {
    position: absolute;
    top: 0;
    text-align: center;
    justify-content: center;
    background-color: #ffffffb2;
    background-size: 10%;
    background-position: center 20%;
}

#liveart-loader-text {
    position: relative;
    background-color: rgba(220, 218, 218, 0.7);
    top: calc(30% + 2em);
    /* top:30%; */
    font-size: 14px;
    font-weight: bold;
}
/* Loader end */

/* Notification alert */
#liveart-alert-notification-popup {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px;
    max-width: 80%;
    width: auto;
    z-index: 9999;
    box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, .15);
}

/* Notification alert end */

/*	 3. LiveArt Canvas and Main Components	*/
#main-controls-container {
    top: 0;
    left: 0;
}

#canvas-container {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: white;
    margin: 0 auto;
}

#preview-controls-container {
    bottom: 0;
    /*   text-align: center;  */
}

#preview-controls-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

#preview-controls-container > .liveart-button-bar {
    display: inline-block;
    vertical-align: middle;
}

#order-options-container {
    display: none;
    width: 164px;
    top: 0;
    right: 36px;
}

/*	4. LiveArtForms Menu	*/

/*  4.1 Forms Components    */
.liveart-list-view > li > .liveart-dropdown-form {
    height: auto;
    position: absolute;
    top: 18px;
    left: 147px;
    padding-top: 0px;
    width: 260px;
}

.liveart-list-view > li#select-product > a {
    background-image: url(../../assets/img/select-product-icon.png);
    background-repeat: no-repeat;
    background-position: 9px center;
}

.liveart-list-view > li.open#select-product > a,
.liveart-list-view > li#select-product > a:hover {
    background-image: url(../../assets/img/select-product-icon-white.png);
}

.liveart-list-view > li#add-text > a {
    background-image: url(../../assets/img/text-icon.png);
    background-repeat: no-repeat;
    background-position: 11px center;
}

.liveart-list-view > li.open#add-text > a,
.liveart-list-view > li#add-text > a:hover {
    background-image: url(../../assets/img/text-icon-white.png);
}

.liveart-list-view > li#add-graphics > a {
    background-image: url(../../assets/img/add-graphics-icon.png);
    background-repeat: no-repeat;
}

.liveart-list-view > li.open#add-graphics > a,
.liveart-list-view > li#add-graphics > a:hover {
    background-image: url(../../assets/img/add-graphics-icon-white.png);
}

.liveart-list-view > li#add-names > a {
    background-image: url(../../assets/img/add-numbers-icon.png);
    background-repeat: no-repeat;
}

.liveart-list-view > li.open#add-names > a,
.liveart-list-view > li#add-names > a:hover {
    background-image: url(../../assets/img/add-numbers-icon-white.png);
}

.liveart-list-view > li#upload-graphics > a {
    background-image: url(../../assets/img/add-graphics-icon.png);
    background-repeat: no-repeat;
}

.liveart-list-view > li.open#upload-graphics > a,
.liveart-list-view > li#upload-graphics > a:hover {
    background-image: url(../../assets/img/add-graphics-icon-white.png);
}

.liveart-list-view > li#social-icons > a {
    background-image: url(../../assets/img/add-social-media-icon.png);
    background-repeat: no-repeat;
}

.liveart-list-view > li.open#social-icons > a,
.liveart-list-view > li#social-icons > a:hover {
    background-image: url(../../assets/img/add-social-media-icon-white.png);
}

.liveart-list-view > li#remove-extras > a {
    background-image: url(../../assets/img/eraser-icon.png);
    background-repeat: no-repeat;
}

.liveart-list-view > li.open#remove-extras > a,
.liveart-list-view > li#remove-extras > a:hover {
    background-image: url(../../assets/img/eraser-icon-white.png);
}

.liveart-list-view > li > a,
.liveart-list-view > li > a:focus {
    height: 36px;
    background-color: #FFF;
    border: 1px solid #ffffff;
    background-position: 10px center;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    margin-bottom: 2px;
    color: #000000;
}

.liveart-list-view > li.open > a,
.liveart-list-view > li > a:hover {
    border-color: #000000;
    border-bottom-color: #333333;
    background-color: #023399;
    color: #ffffff;
}

.liveart-list-view > li > a:focus > span {
    display: none;
}

.liveart-list-view > li > a > span {
    padding-left: 37px;
    font-size: 12px;
    line-height: 38px;
}

.liveart-list-view#liveart-main-menu {
    width: 160px;
    /*transition: width 0.5s;*/
    /*-moz-transition: width 0.5s, -moz-transform 0.5s; /* Firefox */
    /*-webkit-transition: width 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
    /*-o-transition: width 0.5s, -o-transform 0.5s; /* Opera */
}

.liveart-list-view#liveart-main-menu.collapsed {
    width: 160px;
    /*transition: width 0.5s;*/
    /*-moz-transition: width 0.5s, -moz-transform 0.5s; /* Firefox */
    /*-webkit-transition: width 0.5s, -webkit-transform 0.5s; /* Safari and Chrome */
    /*-o-transition: width 0.5s, -o-transform 0.5s; /* Opera */
}


.liveart-list-view#liveart-main-menu > li > a > span {
    display: inline;
    font-weight:700;
}

.liveart-dropdown-form#select-product-form,
.liveart-dropdown-form#add-graphics-form {
    width: 464px;
    padding-bottom: 0px;
}

.liveart-dropdown-form#add-text-form,
.liveart-dropdown-form#upload-graphics-form {
    width: 260px;
}

.liveart-dropdown-form#upload-graphics-form {
    top: 58px;
}

.liveart-dropdown-form#social-icons-form {
    top: 98px;
}
.liveart-dropdown-form#remove-extras-form {
    top: 138px;
}

.liveart-dropdown-form-header {
    padding: 9px 9px 9px 22px;
    background-color: #023399;
    color: #ffffff;
}

.liveart-close-window-btn {
    display: block;
    float: right;
    width: 20px;
    height: 20px;
    background-image: url(../../assets/img/close-window-icon.png);
}

.liveart-close-window-btn:hover,
.liveart-close-window-btn:active {
    background-image: url(../../assets/img/close-window-icon-white.png);
}

.tabs-left {
    height: 100%;
}

.tabs-left .liveart-scroll-pane {
    overflow-y: scroll;
    overflow-x: hidden;
    float: left;
    height: 100%;
}

.tabs-left .liveart-tabs {
    background-color: #f8f8f8;
    height: 100%;
    margin: 1px 0px 0px 0px;
}

.tabs-left .liveart-tabs > li > a {
    white-space: nowrap;
    width: 105px;
    padding: 10px 22px 9px 22px;
    margin-bottom: 0px !important;
    border-left: none !important;
    border-radius: 0px !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    cursor: pointer;
    color: #000000;
}

.tabs-left .liveart-tabs > li:first-child > a {
    border-top: none !important;
}

.tabs-left .liveart-tabs > li > a:hover {
    border-color: #dddddd;
}

.tabs-left .liveart-tabs > li.active > a {
    color: #000000;
    font-weight: bold;
}

.search-box {
    text-align: right;
}

.search-box .input-prepend {
    margin: 9px 19px 0px 0px;
}

.search-box .input-prepend input {
    width: 362px;
    padding-right: 22px;
}

.search-box .input-prepend .add-on {
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
}

.search-box .input-prepend .close {
    position: absolute;
    right: 27px;
    line-height: 30px;
    z-index: 2;
}

.liveart-categories-thumbnails {
    margin: 0;
    padding: 0;
    height: 334px;
    /*width: 464px;*/
    overflow-y: scroll;
    overflow-x: hidden;
}

.liveart-categories-thumbnails > .thumbnail {
    margin: 0;
    margin-right: -1px;
    margin-bottom: -1px;
    padding: 0;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 110px;
    height: 110px;
    position: relative;
    cursor: pointer;
    border-color: #333333;
    background-repeat: no-repeat;
    background-position: top center;

    -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;
}

.liveart-categories-thumbnails > .thumbnail:last-child {
    margin-right: 0px;
}

.liveart-categories-thumbnails > .thumbnail > a {
    display: block;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    padding: 10px;
    bottom: 0;
    background-color: #fff;
    width: 90px;

    -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;
}

.liveart-categories-thumbnails > .thumbnail:hover,
.liveart-categories-thumbnails > .thumbnail.active,
.liveart-categories-thumbnails > .thumbnail:hover a,
.liveart-categories-thumbnails > .thumbnail.active a {
    background-color: #333333;
}

/*.liveart-categories-thumbnails > .thumbnail.active {
    background-image: url(../../assets/img/check-icon-white.png);
    background-repeat: no-repeat;
    background-position: 85px 5px;
}*/

.liveart-categories-thumbnails > .thumbnail:hover > a,
.liveart-categories-thumbnails > .thumbnail.active > a {
    color: #ffffff;
}

.liveart-thumbnails {
    margin: 0;
    padding: 0;
    height: 334px;
    /*width: 351px;*/
    overflow-y: scroll;
    overflow-x: hidden;
}

.liveart-thumbnails > li {
    margin: 0;
    margin-right: -1px;
    margin-bottom: -1px;
    width: 110px;
    height: 130px;
    border: 1px solid #ffffff;
}

.liveart-thumbnails > li:last-child {
    margin-right: 0px;
}

a.liveart-thumbnail {
    border: none;
    padding: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    position: relative;
    cursor: pointer;
}

a.liveart-thumbnail:hover,
a.liveart-thumbnail:focus {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

a.liveart-thumbnail > div.liveart-thumbnail-state {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 5px solid transparent;
    background-color: transparent;
    -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;
    top: 0px;
    left: 0px;
}

a.liveart-thumbnail > img {
    width: 110px;
    height: 110px;
}

a.liveart-thumbnail:hover > div.liveart-thumbnail-state,
a.liveart-thumbnail.active > div.liveart-thumbnail-state {
    display: block;
    border-color: #333333;
}

a.liveart-thumbnail.active > div.liveart-thumbnail-state {
    background-image: url(../../assets/img/check-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/*  4.3 Add Text Form   */
.liveart-list-view > li#add-text > .liveart-dropdown-form > div#add-text-form-content {
    padding: 15px 22px 10px 22px;
    margin: 0px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form > div#add-text-form-content > * {
    margin-top: 0px;
    margin-bottom: 10px;
}

.liveart-list-view > li#add-text h6 {
    color: #333;
    font-size: 12px;
    font-weight: normal;
    margin: 3px 0;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form input[type='text'] {
    height: 20px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form input[type='text']#add-text-input {
    width: 160px;
    text-align: center;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #add-text-btn {
    padding-left: 7px;
    padding-right: 7px;
    height: 30px;
    width: 36px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn-group .btn#font-btn {
    width: 186px;
}

#font-list {
    max-height: 200px;
    overflow-y: auto;
    font-size: 14px;
}

#font-list > li > a {
    font-size: 14px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form div.colorPicker-picker {
    height: 30px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form div.colorPicker-picker {
    width: 30px;
    background-size: 28px 28px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form div.colorPicker-picker {
    line-height: 36px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.dropdown-toggle > span.caret {
    margin-top: 8px;
}

/*.liveart-list-view > li#add-text > .liveart-dropdown-form .liveart-color-picker#text-stroke-color-picker + div.colorPicker-picker {
	width: 28px;
	float: right;
}
.liveart-list-view > li#add-text > .liveart-dropdown-form .liveart-color-picker#text-stroke-color-picker + div.colorPicker-picker.transparent {
	background-size: 28px 28px;
}
.liveart-list-view > li#add-text > .liveart-dropdown-form .liveart-color-picker#text-color-picker + div.colorPicker-picker {
	width: 58px;
}*/

.liveart-list-view > li#add-text > .liveart-dropdown-form .liveart-color-picker#text-fill-color-picker + div.colorPicker-picker {
    margin-right: 5px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-left-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-center-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-right-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#bold-toggle-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#italic-toggle-btn {
    width: 32px;
    margin-right: 5px;
    text-align: center;
    padding: 0px;
    margin-top: 0px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#bold-toggle-btn > span,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#italic-toggle-btn > span {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    text-shadow: none;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#italic-toggle-btn > span {
    font-style: italic;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#text-align-left-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#text-align-center-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#text-align-right-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#bold-toggle-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.active#bold-toggle-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.active#italic-toggle-btn,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#italic-toggle-btn {
    background-color: #575757;
    border-color: #464646;
    -moz-box-shadow: inset 0 1px #4a4a4a;
    -webkit-box-shadow: inset 0 1px #4a4a4a;
    box-shadow: inset 0 1px #4a4a4a;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#bold-toggle-btn > span,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.active#bold-toggle-btn > span,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.active#italic-toggle-btn > span,
.liveart-list-view > li#add-text > .liveart-dropdown-form .btn:active#italic-toggle-btn > span {
    color: #fff;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-left-btn {
    background-image: url(../../assets/img/text-align-left-icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-center-btn {
    background-image: url(../../assets/img/text-align-center-icon.png);
    background-repeat: no-repeat;
    background-position: center;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn#text-align-right-btn {
    background-image: url(../../assets/img/text-align-right-icon.png);
    background-repeat: no-repeat;
    background-position: center;
}


/*  NEW Font Size  */
.size-container {
    display: flex;
    align-items: center;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-width,
.liveart-list-view > li#add-text > .liveart-dropdown-form #text-height {
    width: 33px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-height {
    box-sizing: border-box;
    width: 110px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px 0;
    font-size: 12px;
    z-index: 10;
}

#text-height-list {
    width: 130px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-form-size-label {
    margin-right: 3px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-form-size-label-seperator {
    font-size: 125%;
    padding-left: 3px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-form-size-apply-btn {
    width: 69px;
}

.select-editable {
    box-sizing: border-box;
    position: relative;
    background-color: white;
    width: 110px;
    height: 30px;
    margin-right: 6px;
    margin-left: 8px;
}

.select-editable .text-size-btn {
    width: 110px;
    height: 28px;
    margin: 0;
    border: none;
}

.size-container .select-editable > .btn:disabled {
    opacity: 0.5;
}

/* Social Media Icons Tab */
#social-icons-content .social-icons-wrapper {
    display: flex;
    flex-direction: column;
    padding: 15px 22px 10px 22px;
}

#social-icons-content .social-icons-list {
    background-color: white;
    border: 1px solid silver;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    max-height: 200px;
    box-sizing: border-box;
    overflow: auto;
}

#social-icons-content .social-icons-list .social-icon-item {
    padding: 5px 10px;
}

#social-icons-content .social-icons-list .social-icon-item a {
    color: #333333;
    text-decoration: none;
}

#social-icons-content .social-icons-list .social-icon-item.selected {
    background-color: #333333;
}

#social-icons-content .social-icons-list .social-icon-item.selected a {
    color: white;
}

#social-icons-content .social-icons-list .social-icon-item:hover {
    background-color: #333333;
    cursor: pointer;
}

#social-icons-content .social-icons-list .social-icon-item.selected:hover {
    background-color: #4a4949;
}

#social-icons-content .social-icons-list .social-icon-item:hover a {
    color: white;
}

/* Remove Extras Tab */

#remove-extras-content .remove-extras-wrapper {
    display: flex;
    flex-direction: column;
    padding: 15px 22px 10px 22px;
}

/*  4.4 Names Numbers Form  */
#add-names-form > #add-names-form-content {
    padding: 15px 22px 10px 22px;
    margin: 0px;
    text-align: center;
}

#add-names-form #liveart-add-more-names-btn {
    text-decoration: underline;
}

#add-names-form #liveart-add-more-names-btn:hover {
    text-decoration: none;
}

#add-names-form #names-controls {
    position: relative;
    display: inline-block;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
}

#add-names-form #names-controls button {
    width: 110px;
}

#add-names-form #names-number-table-container {
    margin-bottom: 5px;
    max-height: 202px;
    overflow-x: hidden;
    overflow-y: auto;
}

#add-names-form #names-number-table td {
    padding-right: 5px;
    padding-bottom: 5px;
}

#add-names-form #names-number-table td:last-child {
    padding-right: 0px;
}

#add-names-form #names-number-table td input[type="text"] {
    margin-bottom: 0px;
}

#add-names-form #names-number-table td input[type="text"].liveart-names-input {
    width: 188px;
}

#add-names-form #names-number-table td input[type="text"].liveart-numbers-input {
    width: 93px;
}

#add-names-form #names-number-table td div.btn-group.liveart-names-numbers-size > button:first-child {
    width: 40px;
}

#add-names-form #names-number-table td div.btn-group.liveart-names-numbers-size > .dropdown-menu {
    min-width: 60px;
}

/*  4.5 Upload Form   */
.liveart-list-view > li#upload-graphics > .liveart-dropdown-form > div#upload-image-form-content {
    padding: 15px 22px 10px 22px;
    margin: 0px;
}

.liveart-list-view > li#upload-graphics > .liveart-dropdown-form > div#upload-image-form-content #liveart-upload-upload-image-by-url {
    margin-bottom: 0px;
}

.liveart-list-view > li#upload-graphics > .liveart-dropdown-form > div#upload-image-form-content #liveart-upload-upload-image-by-url input {
    width: 83px;
}

.liveart-list-view > li#upload-graphics > .liveart-dropdown-form > div#upload-image-form-content #liveart-upload-image-form {
    margin: 0px;
}

#fileupload {
    width: 1px;
    height: 1px;
    position: absolute;
    top: -999px;
}

/*  end of 4. LiveArtForms Menu */

/*	5. Preview Menu	*/
/*	5.1 Main Menu	*/
.liveart-button-bar {
    margin-bottom: 0px;
}

.liveart-button-bar > .navbar-inner {
    padding: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 0;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    background-image: none;
}

.liveart-button-bar > .navbar-inner > .nav {
    margin: 0px;
}

.liveart-button-bar > .navbar-inner > .nav > .divider-vertical {
    height: 40px;
    margin: 0px 0px 0px -1px;
    border-right: 1px solid #dcdcdc;
    border-left: 1px solid transparent;
}

.liveart-button-bar > .navbar-inner > .nav > .mini-divider-vertical {
    height: 20px;
    margin: 10px 0px 10px -1px;
    border-right: 1px solid #dcdcdc;
    border-left: 1px solid transparent;
}

.liveart-button-bar > .navbar-inner > .nav > li > a {
    /*padding-left: 13px;
padding-right: 13px;*/
    text-shadow: none;
    color: #000000;
}

.liveart-button-bar > .navbar-inner > .nav > li:first-child > a {
    -webkit-border-top-left-radius: 2px;
    -moz-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.liveart-button-bar > .navbar-inner > .nav > li:last-child > a {
    -webkit-border-top-right-radius: 2px;
    -moz-border-top-right-radius: 2px;
    border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-bottom-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.liveart-button-bar > .navbar-inner > .nav > li > a:hover,
.liveart-button-bar > .navbar-inner > .nav > li.active > a {
    background-color: #333333;
}

.liveart-button-bar > .navbar-inner > .nav > li > a:hover,
.liveart-button-bar > .navbar-inner > .nav > li.active > a {
    color: #ffffff;
}

.liveart-button-bar > .navbar-inner > .nav > li > a > span {
    padding-left: 24px;
}

.liveart-button-bar > .navbar-inner > .nav > li > a:hover > span,
.liveart-button-bar > .navbar-inner > .nav > li.active > a > span {
    color: #ffffff;
}

.liveart-button-bar > .navbar-inner > .nav > li#clear-design > a#clear-design-btn {
    background-image: url(../../assets/img/red-cross-icon.png);
    background-position: 12px center;
    background-repeat: no-repeat;
}

.liveart-button-bar > .navbar-inner > .nav > li#undo > a#undo-btn {
    background-image: url(../../assets/img/undo-icon.png);
    background-position: 8px center;
    background-repeat: no-repeat;
}

.liveart-button-bar > .navbar-inner > .nav > li#undo > a#undo-btn > span {
    padding-left: 14px;
}

.liveart-button-bar > .navbar-inner > .nav > li#undo > a:focus#undo-btn,
.liveart-button-bar > .navbar-inner > .nav > li#undo > a:hover#undo-btn {
    background-image: url(../../assets/img/undo-icon-white.png);
}

.liveart-button-bar > .navbar-inner > .nav > li#redo > a#redo-btn {
    background-image: url(../../assets/img/redo-icon.png);
    background-position: 8px center;
    background-repeat: no-repeat;
}

.liveart-button-bar > .navbar-inner > .nav > li#redo > a#redo-btn > span {
    padding-left: 0px;
    padding-right: 14px;
}

.liveart-button-bar > .navbar-inner > .nav > li#redo > a:focus#redo-btn,
.liveart-button-bar > .navbar-inner > .nav > li#redo > a:hover#redo-btn {
    background-image: url(../../assets/img/redo-icon-white.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu > li > a {
    background-repeat: no-repeat;
    background-position: center center;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-text-layer {
    background-image: url(../../assets/img/text-icon.png);
    background-position: 14px center;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-text-layer > span {
    padding-left: 42px;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-image-layer > span {
    padding-left: 10px;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-image-layer > img {
    width: 22px;
    height: 22px;
    padding-left: 10px;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-text-layer:focus,
.liveart-button-bar > .navbar-inner > .nav > li.dropup#layers > .dropdown-menu#layers-list > li > a.liveart-text-layer:hover {
    background-image: url(../../assets/img/text-icon-white.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#flip > .dropdown-menu#flip-list > li#vertical-flip > a#vertical-flip-btn {
    background-image: url(../../assets/img/vertical-flip-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#flip > .dropdown-menu#flip-list > li#horizontal-flip > a#horizontal-flip-btn {
    background-image: url(../../assets/img/horizontal-flip-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#align > .dropdown-menu#align-list > li#align-left > a#align-left-btn {
    background-image: url(../../assets/img/align-left-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#align > .dropdown-menu#align-list > li#align-right > a#align-right-btn {
    background-image: url(../../assets/img/align-right-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#align > .dropdown-menu#align-list > li#align-center > a#align-center-btn {
    background-image: url(../../assets/img/align-center-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#overlap > .dropdown-menu#overlap-list > li#overlap-toward > a#overlap-toward-btn {
    background-image: url(../../assets/img/overlap-toward-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup#overlap > .dropdown-menu#overlap-list > li#overlap-backward > a#overlap-backward-btn {
    background-image: url(../../assets/img/overlap-backward-icon.png);
}

.liveart-button-bar > .navbar-inner > .nav > li > a.liveart-color-picker-btn > span {
    padding-left: 0px;
    padding-right: 10px;
}

.liveart-button-bar > .navbar-inner > .nav > li > a.liveart-color-picker-btn > div.colorPicker-picker {
    background-size: 18px 18px;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu {
    border-radius: 1px;
    border: 0;
    padding: 0;
    margin-bottom: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu {
    min-width: 100%;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu:before {
    display: none;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu:after {
    display: none;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu > li > a {
    height: 38px;
    line-height: 38px;
    border: 1px solid #ffffff;
    padding-left: 0px;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu > li > a:focus,
.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu > li > a:hover {
    background-color: #333333;
    border-color: #252525;
    background-image: none;
}

.liveart-button-bar > .navbar-inner > .nav > li.dropup > .dropdown-menu > .divider {
    margin: 0px 0px -1px 0px;
}

/*	5.2 Product Sides Switch	*/

#product-sides-switch-container {
    width: 100%;
    z-index: 998;
    background: transparent; /* for old browsers (IE8) */
    margin-bottom: 10px;
}

#product-sides-switch-container .nav {
    margin-top: 7px;
    margin-bottom: 7px;
}

#product-sides-switch-container .nav-pills > li > a {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: transparent;
    color: #023399;
}

#product-sides-switch-container .nav-pills > li.active > a,
#product-sides-switch-container .nav-pills > li.active > a:hover,
#product-sides-switch-container .nav-pills > li.active > a:focus {
    background-color: #023399;
    color: #fff;
    font-weight: bold;
}

#product-sides-switch-container .nav-pills > li > a > span {
    border-bottom: 1px #ccc dotted;
    padding-bottom: 0;
}

#product-sides-switch-container .nav-pills > li.active > a > span {
    border-bottom: none;
}

.centered-pills-container {
    line-height: 0;
    text-align: center;
}

.centered-pills-container ul.nav-pills {
    display: inline-block;
}

#zoom-container {
    position: absolute;
    top: 0;
    width: 150px;
    padding: 5px 0;
}

#zoom-slider {
    margin: 0;
    width: 100%;
}

#zoom-container label {
    text-align: center;
}

#rotate-product-container {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 0;
}

#rotate-product-container > .btn {
    background-image: url('../../assets/img/rotating-arrows-small.png');
    background-position: 8px center;
    background-repeat: no-repeat;
}

#rotate-product-container > .btn > span {
    margin-left: 20px;
}

/* end of 5. Preview Menu */


/*	6. Order Options	*/
/*	6.1 Components		*/
#order-options-container {
    color: #000;
    font-size: 11px;
}

#order-options-container .liveart-panel {
    margin-bottom: 2px;
    padding: 18px 18px 12px;
}

#order-options-container h5, h6 {
    margin: 0px;
}

#order-options-container h6 {
    color: #333;
    font-size: 12px;
    font-weight: normal;
    margin: 3px 0;
}

#order-options-container .divider {
    border-top: 1px solid #dcdcdc;
    margin: 12px 0 6px 0;
    width: 100%;
}

#order-options-container .divider-vertical {
    border-right: 1px solid #dcdcdc;
    display: inline;
    height: 21px;
    margin: 0 7px 0 4px;
}

#order-options-container .gray {
    color: #999;
}

#order-options-container .btn-link {
    font-size: 11px;
    padding: 0;
}

#order-options-container table {
    width: 100%;
}

#order-options-container table td:last-child {
    text-align: right;
}

/* 6.2 Product info, colors */
#order-options-container table.order-colors {
    line-height: 14px;
    margin-top: 12px;
}

/* 6.3 Sizes, Quantities	*/
#product-sizes-list {
    width: 190px;
}

#product-sizes-list li {
    width: 170px;
    line-height: 43px;
}

#product-sizes-list .quantity-label {
    font-size: 12px;
    font-weight: bold;
    padding-right: 5px;
}

#product-sizes-list button#size-btn {
    min-width: 40px;
    padding-left: 1px;
    padding-right: 1px;
}

#product-sizes-list .btn-group-quantity {
    margin-left: 5px;
    white-space: nowrap;
}

#product-sizes-list input {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    width: 26px;
    padding: 0;
    margin: 0;
    border: none;
}

#product-sizes-list li .btn-group-quantity > button.close {
    float: none;
    padding: 5px 0px 5px 5px;
}

#order-options-container table.order-price {
    margin: 15px 0;
}

#order-options-container table.order-price td:last-child {
    color: #000;
    font-size: 12px;
}

#place-order-btn,
#admin-save-design-btn {
    font-weight: bold;
    height: 32px;
    width: 100%;
}


/* 6.4 Save, Share */
.liveart-panel#save-load-print-panel,
.liveart-panel#share-design-panel {
    text-align: center;
    padding: 0px;
    width: 180px;
}

.liveart-panel#save-load-print-panel #print-design-btn {
    background-image: url(../../assets/img/icon-printer.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.liveart-panel#save-load-print-panel #print-design-btn span {
    margin-left: 20px;
}

.liveart-panel#order-btn-panel,
.liveart-panel#save-design-admin-btn-panel {
    width: 150px;
}

#save-load-print-panel {
    width: 200px;
}

#saveorder,
#order-btn,
#save-design-admin-btn {
    float: right;
    line-height: 36px;
}

#saveorder {
    line-height: 38px;
}

#liveart-save-design-popup .modal-header > p {
    padding: 0;
}

#liveart-save-design-popup .modal-body label {
    padding: 0;
}

#save-design-btn,
#load-design-btn {
    background-image: url(../../assets/img/save-icon.png);
    background-repeat: no-repeat;
    background-position: 5px center;
    padding-left: 30px;
}

#load-design-btn {
    background-image: url(../../assets/img/load-icon.png);
}

/* end of 6. Order Options	*/

/* 7. Modals */
.modal {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 480px;
    z-index: 0;
    margin-left: 0;
    transform: translate(-50%, 0);
}

.modal.in {
    z-index: 9999;
}

.modal-footer {
    background-color: transparent;
    border-top: none;
    padding: 15px;
    text-align: left;
}

.modal.fluid {
    width: 90%;
    margin: 0 auto;
    transform: translate(-50%, 0);
}

.modal .modal-header .modal-title.cropped {
    max-width: 450px;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
}

.modal-backdrop.fade.in {
    /* Reset bootstrap styles for backdrop overlaying */
    opacity: 0.6;
}

body:has(:is(#liveart-show-related-designs-popup.fade.in, #liveart-show-related-design-info-popup.fade.in)) #liveart-gallery-popup {
    /* Decreasing gallery z-index if the related designs appears above. */
    /* It needed to have a blur out the gallery */
    z-index: 1040;
}

body:has(#liveart-show-related-designs-popup.fade.in),
body:has(#liveart-show-related-design-info-popup.fade.in) {
  overflow: hidden;
}

/* Saved designs popup */
#liveart-saved-designs-popup .table tr {
    cursor: pointer;
}

.table tr.active {
    background-color: #333;
    color: #fff;
}

/* Saved designs popup end */

/* Upload conditions popup */
#liveart-upload-conditions-popup .modal-body {
    max-height: none;
    padding-right: 0px;
}

#liveart-upload-conditions-popup #liveart-accept-upload-conditions {
    margin: 0px;
    display: inline;
}

#liveart-upload-conditions-popup #liveart-accept-upload-conditions-label {
    margin-left: -15px;
    display: inline;
}

#liveart-upload-conditions-popup .upload-conditions-text {
    border: #ddd;
    max-height: 350px;
    overflow: auto;
    margin-bottom: 15px;
    padding-right: 15px;
}

/* Upload conditions popup end */

/* Upload Color Count Modal */
#liveart-color-count-popup {
    left: 50%;
    top: 10px;
    width: 500px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -webkit-border-radius: 0px;
    border: 1px solid #ddd;
}

#liveart-color-count-popup .modal-body {
    padding-top: 25px;
}

#liveart-color-count-popup .modal-header {
    background: #000;
    margin: -1px;
}

#liveart-color-count-popup .modal-footer {
    border-top: 1px solid #ddd;
    padding: 14px 15px 15px;
}

#liveart-color-count-popup .modal-footer > * {
    float: right;
}

#liveart-color-count-popup #colors-number {
    margin-left: 25px;
}

#liveart-color-count-popup #colors-number-label {
    float: left;
    margin-right: 10px;
}

#liveart-color-count-popup #colors-numeric-stepper > input {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    width: 26px;
    padding: 0;
    margin: 0;
    border: none;
}

#liveart-color-count-popup #process-colors {
    margin-top: 20px;
}

#liveart-color-count-popup #process-colors #cb-process-colors {
    float: left;
}

#liveart-color-count-popup #process-colors #label-process-colors {
    margin-left: 25px;
    margin-bottom: 0px;
    font-weight: bold;
}

/* Upload Color Count Modal end */

/* Design List Modal start */
#liveart-designs-list-popup {
    width: 653px;
    z-index: 5000;
}

#liveart-designs-list-popup .modal-body {
    max-height: 308px;
}

#liveart-designs-list-preloader,
#liveart-loader {
    position: absolute;
    -webkit-box-flex: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    justify-content: center;
    align-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-size: 20%;
    background-image: url(../img/tracker/image_preloader.svg);
    background-repeat: no-repeat;
    background-position: center 30%;
    background-color: #0000002b;
}

#liveart-designs-list-popup #designs-list {
    list-style-type: none;
    margin: 0px;
}

#liveart-designs-list-popup .modal-header > p {
    padding: 0;
}

#liveart-designs-list-popup #designs-list > li {
    margin: 0;
    margin-right: -1px;
    margin-bottom: 50px;
    padding: 0;
    float: left;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    width: 298px;
    height: 112px;
    position: relative;
    cursor: default;
    border: 1px solid #333333;
    box-sizing: border-box;
}

#liveart-designs-list-popup #designs-list > li > div.state,
#liveart-gallery-popup #image-list div.state-load {
    width: 298px;
    height: 112px;
    position: absolute;
    border: 5px solid transparent;
    background-color: transparent;
    box-sizing: border-box;
}

#liveart-designs-list-popup #designs-list > li:hover > div.state,
#liveart-designs-list-popup #designs-list > li.active > div.state {
    border-color: #333333;
}

#liveart-designs-list-popup #designs-list > li.active > div.state {
    background-image: url(../../assets/img/check-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 10;
}

#liveart-designs-list-popup #designs-list > li > div.design-name {
    font-weight: normal;
    max-width: 298px;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    top: 113px;
    white-space: nowrap;
}

#liveart-designs-list-popup #designs-list > li > div.design-last-change {
    font-weight: normal;
    max-width: 298px;
    overflow: hidden;
    position: absolute;
    text-overflow: ellipsis;
    top: 133px;
    white-space: nowrap;
}

#liveart-designs-list-popup #designs-list > li > div > img,
#liveart-designs-list-popup #designs-list > li > div > object {
    z-index: -1;
    max-width: 296px;
    max-height: 110px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    object-fit: contain;
}

#liveart-submit-design-delete-popup .modal-footer {
    display: flex;
    justify-content: flex-end;
}

#liveart-submit-design-delete-popup .btn-danger {
    margin-right: 5px;
}

@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    #liveart-designs-list-popup {
        width: 643px;
    }
}

#liveart-wrong-template-url-popup {
    left: 50%;
    width: 500px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    -webkit-border-radius: 0px;
    border: 1px solid #ddd;
}

#liveart-wrong-template-url-popup a {
    margin-left: 20px;
    font-size: 14px;
}

/* Design List Modal end */

/*@media (max-width: 887px){
    #liveart-isolate-container #zoom-container {
        display: none;
    }
}*/

.no-click {
    pointer-events: none;
}

/* Gallery modal start */
#liveart-gallery-popup {
    z-index: 5000;
}

#liveart-gallery-popup .modal-body {
    box-sizing: border-box;
    max-height: 60vh;
    max-height: 60dvh;
}

#liveart-gallery-popup #image-list {
    list-style: none;
    margin: 0 auto;
}

#liveart-gallery-popup #image-list > li {
    float: left;
    width: auto;
    height: auto;
    cursor: default;
    box-sizing: border-box;
}

#liveart-gallery-popup img {
    object-fit: contain;
    width: 100%;
}

#liveart-gallery-popup #image-list div.state-load {
    width: 100%;
    height: 100%;
    visibility: hidden;
}

#liveart-gallery-popup .gallery-grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: min-content;
}

#liveart-gallery-popup .grid-content {
    width: 100%;
}

#liveart-gallery-popup .image-name-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#liveart-gallery-popup #image-list div.state-load button.btn {
    font-size: 1rem;
    width: 4.6rem;
    height: 2rem;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

#liveart-gallery-popup #image-list div.actions {
    display: flex;
    gap: 4px;
    justify-content: end;
    align-items: center;
    margin: 4px;
}

#liveart-gallery-popup #image-list div.state-info,
#liveart-gallery-popup #image-list div.state-delete {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: rgba(225, 225, 225, 0.65);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#liveart-gallery-popup #image-list div.state-delete img,
#liveart-gallery-popup #image-list div.state-info img {
    width: 75%;
}

#liveart-gallery-popup #image-list > li:hover div.state-load,
#liveart-gallery-popup #image-list > li.active div.state-load {
    background-color: rgba(0, 0, 0, 0.8);
    visibility: visible;
}

#liveart-submit-image-delete-popup .modal-footer {
    display: flex;
    justify-content: flex-end;
}

#liveart-submit-image-delete-popup .btn-danger {
    margin-right: 5px;
}

/* Related Designs popup style */
#liveart-show-related-designs-popup .related-designs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: auto;
    max-height: 300px;
}

#liveart-show-related-designs-popup .related-design-card {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid silver;
    padding-bottom: 1rem;
}

#liveart-show-related-designs-popup .related-design-card:last-child {
    border-bottom: none;
}

#liveart-show-related-designs-popup .preview {
    flex: 0 0 40%;
    min-height: max-content;
}

#liveart-show-related-designs-popup .preview .preview-img {
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
}

#liveart-show-related-designs-popup .info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
}

#liveart-show-related-designs-popup .info span {
    font-size: 14px;
}

#liveart-show-related-designs-popup .info .card-name {
    font-size: 1rem;
    font-weight: 700;
    padding-bottom: 0.5rem;
}

#liveart-show-related-designs-popup div .modal-title {
    max-width: 100%;
}

/* Related Designs popup style end */

/* Related Design Info style */
#liveart-show-related-design-info-popup .back {
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(150%);
    height: 20px;
}

#liveart-show-related-design-info-popup .back img {
    height: 100%;
}

#liveart-show-related-design-info-popup .related-design-info,
#liveart-show-related-design-info-popup .empty-related-design-info {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

#liveart-show-related-design-info-popup .related-design-info.artstore {
    gap: 2rem;
}

#liveart-show-related-design-info-popup .empty-related-design-info {
    align-items: center;
    gap: 1rem;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item {
    display: flex;
    flex-direction: column;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item .image-wrapper {
    position: relative;
    flex-grow: 1;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item img {
    width: 80px;
    transition: all 0.2s ease-in-out;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item .image-wrapper button {
    visibility: hidden;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: visibility 0.15s ease-in-out;
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item .image-wrapper:hover img {
    filter: brightness(70%); 
}

#liveart-show-related-design-info-popup .related-design-info .used-images-list .used-images-item .image-wrapper:hover button {
    visibility: visible;
}

#liveart-show-related-design-info-popup .actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#liveart-show-related-design-info-popup .row-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 1rem;
}

#liveart-show-related-design-info-popup .row-block.image {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#liveart-show-related-design-info-popup .row-block.image .row-block {
    align-self: flex-start;
}

#liveart-show-related-design-info-popup .row-block.image .row-title {
    align-self: flex-start;
}

#liveart-show-related-design-info-popup .row-block.image .image-wrapper {
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    flex-basis: 35%;
}

#liveart-show-related-design-info-popup .row-block .row-title {
    font-weight: 700;
    color: #333333;
    font-size: 0.875rem;
}

#liveart-show-related-design-info-popup .row-block .row-text {
    font-weight: 400;
    color: #575757;
}

#liveart-show-related-design-info-popup .row-block .row-text.short {
    max-width: 80px;
    text-wrap: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    align-self: flex-end;
}

#liveart-show-related-design-info-popup .design-preview {
    display: flex;
    gap: 1rem;
}

#liveart-show-related-design-info-popup .design-preview .preview-block {
    flex: 0 0 calc(50% - 1rem);
}

#liveart-show-related-design-info-popup .design-preview .preview-block img {
    border: 2px dashed silver;
}

#liveart-show-related-design-info-popup div .modal-title {
   display: block;
   white-space: normal;
   margin: 0 20px;
}

.modal-body .modal-body-text {
    font-size: 1rem;
    text-align: center;
}
/* Related Design Info style end */

/* Remove branding control start */
#remove-extras-content {
    .remove-extras-wrapper {
        display: flex;
        gap: 15px;
    }

    .remove-branding-option {
        label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            cursor: pointer;
            padding: 0;
        }
    }
}
/* Remove branding control end */

/* Pagination controls */

.pager {
    margin: 0;
}

.pager-controls {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}

.pager-controls .gallery-search {
    margin-bottom: 0;
}

.pager-controls .gallery-search .close {
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
}

.pager-controls .gallery-search input {
    width: auto;
}

.pager-controls select {
    margin: 0;
    font-size: 12px;
}

.pager-controls label {
    display: inline-block;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}

.pager-controls .pagination {
    margin: 0;
}

/* Gallery modal end */

/* Submit Design modal start */
#liveart-submit-design-popup {
    width: fit-content;
    max-width: 90vw;
}

#liveart-submit-design-popup h5 {
    color: #ed228e;
}

#liveart-submit-design-popup .modal-body {
    max-height: 72vh;
}

#liveart-submit-design-popup .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#liveart-submit-design-popup .btn {
    width: 100px;
}

#liveart-submit-design-popup .design-preview-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

#liveart-submit-design-popup .design-preview .title {
    font-size: 16px;
    font-weight: 700;
}

#liveart-submit-design-popup .design-preview .inside {
    padding-top: 20px;
}

@media (max-width: 360px) {
    #liveart-submit-design-popup .actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    #liveart-submit-design-popup .actions .btn {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    #liveart-submit-design-popup .actions .btn-primary {
        order: -1;
    }
}
/* Submit Design modal end */

/* 7. Modal end*/

/* TOGGLE STYLING */
.liveart-toggle {
    margin: 0 0 1.5rem;
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

/* Hide input on UI */
.liveart-toggle input {
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

.liveart-toggle input + label {
    margin: 0;
    padding: 0.5rem;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    border: 1px solid #DDD;
    background-color: #FFF;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: border-color .15s ease-out,
        color .25s ease-out,
        background-color .15s ease-out,
        box-shadow .15s ease-out;
}

.liveart-toggle input + label:first-of-type {
    border-radius: 6px 0 0 6px;
    border-right: none;
}

.liveart-toggle input + label:last-of-type {
    border-radius: 0 6px 6px 0;
    border-left: none;
}

.liveart-toggle input:hover + label {
    border-color: #213140;
}

.liveart-toggle input:checked + label {
    background-color: #023399;
    color: #FFF;
    box-shadow: 0 0 10px rgba(#023399, .5);
    border-color: #023399;
    z-index: 1;
}

.liveart-toggle input:disabled + label {
    cursor: not-allowed;
    border: 1px solid silver;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: silver;
    filter: opacity(0.8);
    border-left: none;
}