/*
 *	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: 16px;
    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 > a:hover {
    border-color: #000000;
    border-bottom-color: #333333;
    background-color: #00616D;
    color: #ffffff;
}

.liveart-list-view > li.open > a {
    border-color: #000000;
    border-bottom-color: #333333;
    background-color: #007483;
    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: 56px;
}

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

.liveart-dropdown-form-header {
    padding: 9px 9px 9px 22px;
    background-color: #007483;
    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   */
#add-text-form-content,
.liveart-list-view > li#add-text > .liveart-dropdown-form > div#add-text-form-content {
    padding: 15px 22px 10px 22px;
    margin: 0px;
}

#add-text-form-content > *,
.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'],
.liveart-dropdown-form input[type='text'] {
    height: 20px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form input[type='text']#add-text-input,
.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,
.liveart-dropdown-form #add-text-btn {
    padding-left: 7px;
    padding-right: 7px;
    height: 29px;
    width: 36px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn-group .btn#font-btn,
.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,
.liveart-dropdown-form div.colorPicker-picker {
    height: 30px;
}

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

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

.liveart-list-view > li#add-text > .liveart-dropdown-form .btn.dropdown-toggle > span.caret,
.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,
.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,
.liveart-dropdown-form .btn#text-align-left-btn,
.liveart-dropdown-form .btn#text-align-center-btn,
.liveart-dropdown-form .btn#text-align-right-btn,
.liveart-dropdown-form .btn#bold-toggle-btn,
.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,
.liveart-dropdown-form .btn#bold-toggle-btn > span,
.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,
.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,
.liveart-dropdown-form .btn:active#text-align-left-btn,
.liveart-dropdown-form .btn:active#text-align-center-btn,
.liveart-dropdown-form .btn:active#text-align-right-btn,
.liveart-dropdown-form .btn:active#bold-toggle-btn,
.liveart-dropdown-form .btn.active#bold-toggle-btn,
.liveart-dropdown-form .btn.active#italic-toggle-btn,
.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,
.liveart-dropdown-form .btn:active#bold-toggle-btn > span,
.liveart-dropdown-form .btn.active#bold-toggle-btn > span,
.liveart-dropdown-form .btn.active#italic-toggle-btn > span,
.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,
.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,
.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,
.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,
.liveart-dropdown-form #text-width,
.liveart-dropdown-form #text-height {
    width: 33px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-height,
.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,
.liveart-dropdown-form #text-form-size-label {
    margin-right: 3px;
}

.liveart-list-view > li#add-text > .liveart-dropdown-form #text-form-size-label-seperator,
.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,
.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,
.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,
.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,
.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,
.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,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-left > a#rotate-left-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,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-left > a#rotate-left-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,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-left > a:focus#rotate-left-btn,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-left > a:hover#rotate-left-btn {
    background-image: url(../../assets/img/undo-icon-white.png);
}

.liveart-button-bar > .navbar-inner > .nav > li#redo > a#redo-btn,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-right > a#rotate-right-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,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-right > a#rotate-right-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,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-right > a:focus#rotate-right-btn,
.liveart-button-bar > .navbar-inner > .nav > li#rotate-right > a:hover#rotate-right-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.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;
}


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

#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-repeat: no-repeat;
    background-position: 5px center;
    color: #00616D;
}

#save-design-btn i,
#load-design-btn i {
    font-size: 1rem;
    margin-right: 5px;
}

/* 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%;
    max-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 {
    display: block;
    margin-left: 20px;
    font-size: 14px;
}

#liveart-wrong-template-url-popup .modal-footer {
    float: right;
}

/* 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 {
            margin-top: 10px;
            cursor: pointer;
            padding: 0;
            font-size: 0.875rem;
        }

        input {
            margin: 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;
}

.options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color-pickers-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alwan__inputs label {
    padding: unset;
}

.alwan__reference {
    width: 32px;
    height: 29px;
}

.liveart-color-picker-btn .alwan__reference {
    width: 22px;
    height: 22px;   
}

.alwan__alpha {
    /* designer not support different opacity only 0 or 1 */
    display: none;
}

.canvas-legend {
	position: absolute;
	top: 110px;
	right: 65px;

	&.mobile {
		position: initial;
		padding: 8px;
	}

	.title {
		font-size: 0.875rem;
		font-weight: 600;
	}

	.legend-list {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.legend-item {
		display: flex;
		gap: 5px;

		.legend-item-content {
			width: 50px;
			display: flex;
			align-items: center;

			> span {
				display: inline-block;
				width: 100%;
				height: 2px;

				&.safe-line {
                    /* Dashed line with controlled dashes gap */
					background-image: repeating-linear-gradient(
						to right,
						#e4353c 0px,
						#e4353c 10px,
						transparent 10px,
						transparent 20px
					);
				}

				&.fold-line {
                    /* Dashed line with controlled dashes gap */
					background-image: repeating-linear-gradient(
						to right,
						#febe77 0px,
						#fabe77 10px,
						transparent 10px,
						transparent 20px
					);
				}
			}
		}

		.hint {
			> i {
				font-size: 14px;
				cursor: help;
			}
		}
	}

	@media screen and (max-width: 607px) {
		display: none;

		&.mobile {
			display: block;
		}
	}
}

@media screen and (min-width: 608px) {
	#design-legend-mobile {
		display: none;

		.open-design-legend-mobile {
			display: flex;
			align-items: center;
			justify-content: center;

			> i {
				font-size: 24px;
				color: black;
			}
		}

		&.liveart-dropdown.open {
			.open-design-legend-mobile > i {
				color: white;
			}
		}
	}
}

#design-legend-mobile .open-design-legend-mobile {
	display: flex;
	align-items: center;
	justify-content: center;

	> i {
		font-size: 24px;
		color: black;
	}
}

#design-legend-mobile.liveart-dropdown.open {
	.open-design-legend-mobile > i {
		color: white;
		text-shadow: none;
	}
}

/* Top controls mobile layout */
.place-order-btn {
	background: #ED228E;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.top-controls {
    position: relative;      
    overflow: hidden;       
    display: none;
	align-items: center;
	justify-content: space-between;
	background: #00616D;
	border-top: 1px solid #e0e0e0;
	flex-shrink: 0;
	gap: 16px;
}
  
.top-controls::before,
.top-controls::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 1;
}
  
.top-controls::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent);
}
  
.top-controls::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.25), transparent);
}

.view-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.action-controls {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	background: #00616D;
	color: white;
	border: none;
	border-radius: 0;
	font-size: 10px;
	cursor: pointer;

    &.active {
        background: #007483;
    }

	i {
		font-size: 1rem;

		&.danger {
			color: #e4353c;
		}
	}

	span {
		font-size: 14px;
		font-weight: 500;
	}
}

.action-btn:hover {
	background: #00616D;
}

/* Bottom controls mobile layout */
.zoom-indicator {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.95);
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.zoom-indicator.show {
	opacity: 1;
}
/* 
.main-content {
    height: 200px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    position: relative;
} */

.bottom-controls {
    display: none;
	padding: 12px;
}

.controls-row-b {
	display: flex;
	align-items: center;
	gap: 8px;
    flex-wrap: wrap;

	&.space-between {
		justify-content: space-between;
	}
}

.zoom-controls {
    display: none;
}

.zoom-section {
    position: relative;
}

.zoom-btn {
    color: #495057;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.zoom-btn:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.zoom-dropdown {
    position: absolute;
    bottom: 100%;
    /* left: 50%;
    transform: translateX(-50%); */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 15px;
    min-width: 200px;
    margin-bottom: 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.zoom-dropdown.active {
    opacity: 1;
    visibility: visible;
    z-index: 100;
}

/* .zoom-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
} */

.zoom-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;

    &.jq-slider {
        flex-direction: column;
    }
}

.zoom-slider {
    flex: 1;
    height: 4px;
    background-color: #e0e0e0;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    --progress: 75%;
    --thumb-position: 75%;
}

.zoom-slider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #4CAF50;
    border-radius: 2px;
    transition: width 0.2s ease;
    width: var(--progress);
}

.zoom-slider::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #4CAF50;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: grab;
    transition: left 0.2s ease;
    left: var(--thumb-position);
}

.zoom-slider:active::after {
    cursor: grabbing;
}

.zoom-value {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    min-width: 40px;
    text-align: center;
}

.view-toggle {
	display: flex;
	background: white;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	overflow: hidden;
}

.view-toggle.desktop {
    width: min-content;
    margin: 0 auto;
}

.view-option {
	padding: 8px 12px;
	font-size: 14px;
    font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	background: transparent;
	color: #495057;
}

.view-option.active {
	background: #00616D;
	color: white;
}

.view-option:hover:not(.active) {
	background: #f8f9fa;
}

.bottom-action-buttons {
	display: flex;
	gap: 8px;
}

.bottom-action-button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.tutorial-button {
	background: #0088CC;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.tutorial-button:hover {
	background: #138496;
}

.tutorial-button svg {
	width: 14px;
	height: 14px;
}

.info-button {
	background: white;
	color: #495057;
	border: 1px solid #dee2e6;
	/* border: none; */
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.info-button:hover {
	background: #f8f9fa;
}

.info-section {
    position: relative;
}

#selected-object-controls {
    display: none !important;
}

#selected-object-controls .liveart-color-picker-btn .alwan__reference {
    width: 18px;
    height: 18px;   
}

#design-legend-mobile-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: fit-content;
    background: white;
    transform: translate(-30%, -110%);
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

    &.active {
        visibility: visible;
        opacity: 1;
    }
}