@import url('https://fonts.googleapis.com/css?family=Caveat:400,700&display=swap&subset=cyrillic,latin-ext');

@font-face {
    font-family: 'Brandon_reg';
    src        : url('../fonts/Brandon_reg.ttf') format('truetype'), url('../fonts/Brandon_reg.svg#Brandon_reg') format('svg');
}

@font-face {
    font-family: 'Brandon_med';
    src        : url('../fonts/Brandon_med.ttf') format('truetype'), url('../fonts/Brandon_med.svg#Brandon_med') format('svg');
}

@font-face {
    font-family: 'Brandon_thin';
    src        : url('../fonts/Brandon_thin.ttf') format('truetype'), url('../fonts/Brandon_thin.svg#Brandon_thin') format('svg');
}

@font-face {
    font-family: 'Brandon_bld';
    src        : url('../fonts/Brandon_bld.ttf') format('truetype'), url('../fonts/Brandon_bld.svg#Brandon_bld') format('svg');
}

/* body{
    font-family: 'Brandon_reg';
} */

.canvas-container {
    display: none
}

.current_canvas {
    display: block !important
}

.disable_items{
    pointer-events: none;
}

/* Utilities */

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

.modal-popup__canvas {
    font-family: 'Brandon_reg';
}

.modal-popup__canvas .btn {
    display         : inline-block;
    padding         : 6px 12px;
    margin-bottom   : 0;
    margin-left     : 5px;
    margin-right    : 5px;
    font-weight     : normal;
    font-family     : 'Brandon_reg';
    box-shadow      : none !important;
    text-align      : center;
    vertical-align  : middle;
    touch-action    : manipulation;
    cursor          : pointer;
    background-image: none;
    border          : 1px solid transparent;
    white-space     : nowrap;

    font-size          : 14px;
    line-height        : 1.42857143;
    border-radius      : 4px;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

ul li {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.pull-left {
    float: left !important;
}

.pull-left {
    float: left !important;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.text-center {
    text-align: center;
}

.journalz-editor .divider {
    border-top   : 1px solid #ccc;
    margin-top   : 15px;
    margin-bottom: 15px;
}

.journalz-editor .divider__m {
    border-top : 1px solid #ccc;
    margin-top : 15px !important;
    padding-top: 15px !important;
}

.d-flex {
    display: flex;
}

.colm {
    flex: 1;
}

.mr-15 {
    margin-right: 15px;
}

.align-items-center {
    align-items: center;
}

/* Utilities ends */

.mobile-logo {
    display: none;
}

.cover-type-blck {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
}

.cover-type-text {
    text-transform: uppercase;
    color         : #fff;
    display       : none;
}

.cover-type-det {
    flex-basis    : 100%;
    color         : #fff;
    font-family   : 'Brandon_reg';
    font-size     : 12px;
    margin-top    : 0px;
    /* margin-top : 7px; */
    text-transform: uppercase;
}

.control-bar__sec {
    padding-left : 15px;
    padding-right: 15px;
    display      : none;
}

.control-bar__sec .btn {
    border        : 1px solid #555;
    text-transform: uppercase;
}

.control-bar__sec .btn:hover,
.control-bar__sec .btn:focus,
.control-bar__sec .btn:active {
    background-color: transparent;
    color           : #e9696a;
    border-color    : #e9696a;
}

.btn-active {
    background-color: transparent;
    color           : #e9696a;
    border-color    : #e9696a !important
}

.select-cover {
    border       : 1px solid #555;
    font-family  : 'Brandon_reg';
    font-size    : 14px;
    line-height  : 1.5;
    border-radius: 4px;
    height       : 34px;
    margin-left  : 10px;
    display      : none;
}


.btn-personalize {
    line-height: 2.2rem;
    padding    : 14px 17px !important;
    font-size  : 1.8rem !important;
}

.pd-designarea-second-step .btn.btn-success {
    cursor: pointer !important;
}

.modal-actionbar-left {
    display        : flex;
    align-items    : flex-end;
    /* align-items : center; */
    justify-content: space-between;
}

.modal-actionbar-right {
    display: flex;
    align-items: center;
}

.modal-actionbar-right button.action {
    padding         : 12px 15px;
    margin-right    : 10px;
    font-family     : 'Brandon_reg';
    font-size       : 14px;
    font-weight     : 400;
    text-transform  : uppercase;
    color           : white;
    border-radius   : 0;
    border          : none;
    box-shadow      : none !important;
    background-color: #e9696a !important;
}

.modal-actionbar-right .action-close {
    position     : relative !important;
    padding      : 4px 11px !important;
    border-left  : 1px solid #8e8e8e;
    border-radius: 0;
    margin-left  : 10px;
    align-self   : center;
    line-height  : 14px;
}

.modal-actionbar-right .action-close:hover:before {
    color: #fff !important;
}

.modal-actionbar-right .action-close:hover {
    border-left: 1px solid #fff !important;
}

.modal-actionbar-right .starting-at {
    font-family  : 'Caveat', cursive;
    color        : #e9696a;
    font-size    : 28px;
    margin-right : 42px;
    margin-bottom: 0;
    align-self   : flex-end;
    line-height  : 19px;
}

.modal-actionbar-right .starting-at span {
    font-family: 'Brandon_reg';
    display    : inline-block;
    margin-left: 15px;
}

.help-icon {
    display: block;
}

.question-circle {
    background: url('../images/help_icon.svg') no-repeat 0 0;
    width     : 29px;
    height    : 29px;
    display   : block;
    position  : relative;
    /* top       : 8px; */
}

.btn_exit {
    background-color: #e9696a;
    border          : 2px solid #e9696a !important;
}

.btn_exit:hover {
    background-color: #e9696a;
    border          : 2px solid #e9696a !important;
    color           : #fff !important;
}

.btn_save {
    background-color: #9a454c !important;
    border          : 2px solid #9a454c !important;
}

.btn_save:hover,
.btn_save:focus {
    background-color: #9a454c;
    border          : 2px solid #9a454c !important;
}

.btn-go {
    background-color: #6d4955;
    border          : none !important;
    color           : #fff;
    box-shadow      : none !important;
    margin          : 0 !important;
    border-radius   : 0 !important;
}

.btn-go:hover,
.btn-go:focus {
    background-color: #542c38;
    color           : #fff !important;
}



.button-grey {
    background    : #848484;
    padding       : 12px 15px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : #fff;
    border-radius : 0;
    border        : none;
}

.modal-popup__canvas .canvas_wrapper {
    display     : flex;
    height      : 100%;
    box-sizing  : border-box;
    /* flex-wrap: wrap; */
}

.modal-popup__canvas .modal-popup._inner-scroll .modal-content {
    overflow: hidden;
}

.modal-popup__canvas .modal-content {
    padding-left  : 0;
    padding-right : 0;
    padding-bottom: 0;
    background    : #f2f2f2;
    overflow      : hidden !important;
    height        : 100vh;
    max-height    : 100vh;
}

.modal-popup__canvas .videoWrapper {
    /* height: auto; */
    height        : calc(100vh - 80px);
    padding-top   : 0;
    padding-bottom: 0;
}

.modal-popup__canvas .modal-inner-wrap {
    width     : 100%;
    margin    : 0;
    max-height: 100% !important;
}

.modal-popup__canvas .modal-title {
    border-bottom  : none;
    /* border-right: 1px solid #8e8e8e; */
    display        : inline-block;
    padding-right  : 15px;
    padding-bottom : 0;
    margin-top     : 0;
    margin-right   : 15px;
    color          : #fff;
}

.modal-popup__canvas .modal-title img {
    max-width: 145px;
}

.modal-popup__canvas .select-cover {
    width: auto !important;
}

.modal-header__canvas {
    /* background: #dbdbdb; */
    background     : #4b212d;
    padding        : 10px 20px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

ul,
ol {
    margin-top   : 0;
    margin-bottom: 10px;
}


.c-nav_left {
    position        : relative;
    z-index         : 204;
    background-color: #fff;
    height          : 100vh;
    width           : 115px;
}

.modal-popup__canvas nav ul {
    padding: 0;
}

.modal-popup__canvas nav ul li {
    padding   : 0;
    list-style: none;
}

.c-nav-right {
    background  : #e8e8e8;
    box-shadow  : 5px 0 24px -6px #b9b9b9;
    position    : absolute;
    z-index     : 203;
    transition  : left .7s;
    width       : 360px;
    height      : 100vh;
    padding-left: 115px;
}

.modal-popup__canvas nav {
    display : flex;
    position: relative;
}

.modal-popup__canvas nav ul li {
    display           : block;
    padding           : 6px 0;
    border-bottom     : 1px solid #e6e6e6;
    text-align        : center;
    background        : white;
    -webkit-transition: background 0.15s ease-in-out;
    transition        : background 0.15s ease-in-out;
}

.modal-popup__canvas nav ul li a {
    color         : #444444;
    padding       : 3px 0;
    line-height   : normal;
    font-weight   : normal;
    display       : block;
    text-align    : center;
    font-size     : 11px;
    text-transform: uppercase;
    cursor        : pointer;
}

.close-nav {
    font-size: 18px;
    width    : 14px;
    height   : 14px;
    position : absolute;
    top      : 11px;
    left     : 92%;
    cursor   : pointer;
    z-index  : 12;
    display  : none;
}

.close-nav img {
    width : 14px;
    height: 14px;
}

.close-drop {
    position: absolute;
    left    : auto;
    right   : 10px;
    top     : 9px;
    width   : 12px;
    cursor  : pointer;
}

.c-nav-right__tab ul {
    padding-top: 50px !important;
}

.c-nav-right__tab ul li {
    background: #e8e8e8 !important;
}

.c-nav-right__tab ul li a {
    cursor: pointer;
}

canvas {
    box-shadow                   : 5px 1px 18px -10px rgba(0, 0, 0, .4);
    /* border-top-right-radius   : 10px;
    border-bottom-right-radius   : 10px; */
}

/* .upper-canvas, .lower-canvas{
   pointer-events: none;
} */

.preview-shadow {
    box-shadow: -1px 6px 10px -1px rgba(0, 0, 0, .4);
}

/* .canvas-container:before {
    content          : "";
    position         : absolute;
    background       : url(../images/coil_img.png);
    width            : 40px;
    height           : 96%;
    left             : -17px;
    top              : 10px;
    z-index          : 1;
    background-repeat: no-repeat;
    background-size  : 100% 100%;

} */
.canvas-container:before {
    /* content             : "";
    position            : absolute;
    background          : url(../images/coil_img.png);
    width               : 40px;
    height              : calc(100% - 40px); */
    /* width            : 40px;
    height              : 96%; */
    /* left             : -17px;
    top                 : 10px; */
    /* left                : -12px;
    top                 : 20px;
    z-index             : 1;
    background-repeat   : no-repeat;
    background-size     : 100% 100%;
    opacity             : 0; */

    content          : "";
    position         : absolute;
    background       : url(../images/coil_img.png);
    width            : 13%;
    height           : calc(100% - 10%);
    left             : 8px;
    top              : 6%;
    z-index          : 1;
    background-repeat: no-repeat;
    background-size  : 100% 100%;
    opacity          : 0;

}

.clip-canvas.canvas-container:before {
    content: "";
    opacity: 1;
}

.wire-coil.canvas-container::before {
    content          : "";
    position         : absolute;
    background       : url(../images/wire-high-res.png);
    width            : 13%;
    height           : calc(100% - 10%);
    left             : 2px;
    top              : 6%;
    z-index          : 1;
    background-repeat: no-repeat;
    background-size  : 100% 100%;

}

.wire-coil.canvas-container:before {
    content: "";
    opacity: 1;
}



.clip-canvas canvas,
.wire-coil canvas {
    -webkit-clip-path: inset(3.7% 7.69% 3.57% 7.69%);
    clip-path        : inset(3.7% 7.69% 3.57% 7.69%);
}

.in-wrappr {
    position: relative;
    display : inline-block;
}

.enable-scroll:before {
    content : "";
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 100%;
    height  : 100%;
    z-index : 2;
}

.sciss {
    content      : "\f0c4";
    position     : absolute;
    top          : -33px;
    right        : -5px;
    width        : 30px;
    height       : 30px;
    background   : #542c38;
    font         : normal normal normal 15px/1 FontAwesome;
    line-height  : 27px;
    color        : #fff;
    border-radius: 50%;
    box-shadow   : 1px 1px 4px 0px rgba(0, 0, 0, .6);
    cursor       : pointer;
    display      : none;
}

.showCrop {
    display: block;
}

/* Nav contents */


.input-form {
    /* border-radius: 4px; */
    width  : 100%;
    height : 33px !important;
    padding: 7px 15px;
}


.text-input-block .btn {
    text-transform: uppercase;
    border        : 1px solid #c2c2c2;
    border-radius : 4px;
}

.control-form {
    display      : flex;
    margin-bottom: 10px;
}

.control-form select {
    height     : 33px;
    font-family: brandon_reg;
}

.control-form .btn,
.small-button-login,
button.add-u-c {
    height        : auto;
    border-radius : 0px;
    background    : #e9696a;
    border        : none;
    color         : #fff;
    padding       : 7px 35px !important;
    margin-top    : 10px;
    text-transform: uppercase;
}

.control-form .btn:hover,
.small-button-login:hover,
.add-u-c:hover {
    background     : #e9696a;
    color          : #fff;
    text-decoration: none;
}

.control-form .btn-small,
button.add-u-c {
    width  : 62px !important;
    padding: 5px 0 !important;
}

button.add-u-c {
    border-radius: 0 !important;
    margin       : 0 0 0 auto !important;
}


.control-form .btn-small__left {
    margin-left: 0;
    margin-top : 0;
}

.login_photo_check {
    border-radius: 0px;
    background   : #e9696a;
    border       : none;
    color        : #fff;
    display      : inline-block;
    margin-left  : auto;
    margin-right : auto;
    margin-top   : 10px;
    height       : auto;
    padding      : 8px 35px;
}

.bg-wrapper-photo {
    margin-top: 20px;
}

.bg-wrapper-photo p {
    padding       : 0 !important;
    margin-bottom : 10px !important;
    text-transform: uppercase;
}

.font-change__left {
    max-width  : 125px;
    margin-left: 9px;
}

/* Select background */

.select-bg {
    display                 : flex;
    flex-wrap               : wrap;
    /* justify-content      : space-between; */
    /* max-height           : 382px; */
    max-height              : 80vh;
    overflow-y              : auto;
    background              : #fff;
    font-size               : 18px;
}

#show_back_images {
    max-height   : 100%;
    margin-bottom: 160px;
    overflow     : visible;
}

#tab-imgBg .bg-wrapper {
    max-height: 80vh;
    overflow-y: auto;
}

.bg-item {
    flex-basis      : 33%;
    padding         : 4px;
    /* margin-bottom: 6px; */
    cursor          : pointer;
    box-sizing      : border-box;
}

.bg-item img {
    max-width : 100%;
    object-fit: cover;
    width     : 100%;
    height    : 100%;
    border    : 1px solid #cccccc54;
}

/* .set-artwork .bg-item {
    flex-basis: 17%;
}

.select-artwork .bg-item {
    flex-basis: 17%;
    padding   : 4px;
    height    : 78px;
} */




div#artworkTab .item.title {
    width     : 50%;
    text-align: center;
}

/* Search background images */

.c-search-input {
    position     : relative;
    margin-bottom: 15px;
}

.c-search-input::before {
    content    : "\f002";
    font       : normal normal normal 14px/1 FontAwesome;
    position   : absolute;
    top        : 11px;
    /* right   : 10px;*/
    /* top     : 9px;*/
    left       : 10px;
    color      : #c5c5c5;
    font-weight: normal;
}

.c-search-input input {
    box-shadow  : inset 0 1px 1px rgba(0, 0, 0, .075);
    border      : none;
    height      : 36px;
    padding-left: 31px;
}

.c-search-input input:focus {
    outline: none;
}

.img_search_input .c-search-input {
    margin-bottom: 5px;
    width        : 60%;
}

.img_search_input .c-search-input input {
    height         : 33px;
    /* padding-left: 31px; */
}

/* Search background images */

/* ./Select background */

/* Select Artwork */

.select-artwork .art-item {
    max-width    : 120px;
    align-self   : normal;
    flex-basis   : 32%;
    margin-bottom: 10px;
    cursor       : pointer;
}

/* ./Select Artwork */




/* Tab */

.tab-cnt {
    position  : absolute;
    top       : 0;
    width     : 340px;
    height    : 100%;
    /* left   : 120px; */
    z-index   : 5;
    transform : translateX(-100%);
    transition: transform 0.3s ease-in;
}

.tab-cnt.showdiv {
    transform : translateX(120px);
    transition: transform 0.25s ease-in-out 0s;
}

.tab-cnt h4 {
    font-weight   : 300;
    font-size     : 14px;
    color         : #464646;
    margin-bottom : 15px;
    margin-top    : 5px;
    text-transform: uppercase;
}

.canvas_wrapper .tabs {
    position  : relative;
    background: #fbf7f6;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width     : 100%;
    height    : 100vh;
}

.canvas_wrapper .tabs nav {
    display             : flex;
    /* flex-wrap        : wrap; */
    flex-direction      : column;
    color               : #6C5D5D;
    text-shadow         : 1px 1px 1px rgba(255, 255, 255, 0.2);
    background          : #fbf7f6;
    width               : 100%;
    height              : 100%;
    /* max-width        : 120px; */
    z-index             : 15;
}


.canvas_wrapper .tabs nav a {
    font-size     : 12px;
    padding       : 8px 0px;
    text-align    : center;
    text-transform: uppercase;
    width         : 100%;
    border-bottom : 1px solid #e6e6e6;
    cursor        : pointer;
    color         : #444444;
    z-index       : 15;
}

.canvas_wrapper .tabs nav a:hover,
.canvas_wrapper .tabs nav a.selected {
    background     : #e8e8e8;
    text-decoration: none;
    color          : #ff3a3a;
}

.canvas_wrapper .tabs nav a i {
    display                  : block;
    margin                   : auto;
    /*margin-bottom          : 6px;*/
    margin-bottom            : 0px;
    background-size          : contain !important;
    -webkit-background-size  : contain !important;
    -moz-background-size     : contain !important;
    -o-background-size       : contain !important;
    -webkit-transition       : background 0.15s ease-in-out;
    transition               : background 0.15s ease-in-out;
}

.canvas_wrapper .tabs nav a i.background {
    background: url('../images/background.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.background,
.canvas_wrapper .tabs nav a:focus i.background {
    background: url('../images/background_selected.svg') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.text {
    background: url('../images/text.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.text,
.canvas_wrapper .tabs nav a:focus i.text {
    background: url('../images/text_selected.svg') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.image-search {
    background: url('../images/image-search.png') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.image-search,
.canvas_wrapper .tabs nav a:focus i.image-search {
    background: url('../images/image-search-hover.png') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.photo {
    background: url('../images/photo.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.photo,
.canvas_wrapper .tabs nav a:focus i.photo {
    background: url('../images/photo_selected.svg') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.artwork {
    background: url('../images/artwork.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.artwork,
.canvas_wrapper .tabs nav a:focus i.artwork {
    background: url('../images/artwork_selected.svg') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.shapes {
    background: url('../images/shapes.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.shapes,
.canvas_wrapper .tabs nav a:focus i.shapes {
    background: url('../images/shapes_selected.svg') no-repeat 0 0;
}

.canvas_wrapper .tabs nav a i.more {
    background: url('../images/tools-m.png') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.more,
.canvas_wrapper .tabs nav a:focus i.more {
    background: url('../images/tools-m_selected.png') no-repeat 0 0;
    width     : 30px;
}

/* .canvas_wrapper .tabs nav a i.more {
    background: url('../images/more.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.more,
.canvas_wrapper .tabs nav a:focus i.more {
    background: url('../images/more_selected.svg') no-repeat 0 0;
    width     : 30px;
} */

.canvas_wrapper .tabs nav a i.eye {
    background: url('../images/eye.svg') no-repeat;
    height    : 30px;
    width     : 30px;
}

.canvas_wrapper .tabs nav a:hover i.eye,
.canvas_wrapper .tabs nav a:focus i.eye {
    background: url('../images/eye-selected.svg') no-repeat 0 0;
    width     : 30px;
}

.canvas_wrapper .tabs nav a i.zoom_icn {
    background: url('../images/zm.png') no-repeat;
    height    : 28px;
    width     : 29px;
}

.canvas_wrapper .tabs nav a:hover i.zoom_icn,
.canvas_wrapper .tabs nav a:focus i.zoom_icn {
    background: url('../images/zm-selected.png') no-repeat 0 0;
    width     : 29px;
}

.canvas_wrapper .tabs nav a i.prevw_icn {
    background: url('../images/prvw.png') no-repeat;
    height    : 26px;
    width     : 32px;
}

.canvas_wrapper .tabs nav a:hover i.prevw_icn,
.canvas_wrapper .tabs nav a:focus i.prevw_icn {
    background: url('../images/prvw-selected.png') no-repeat 0 0;
    width     : 32px;
}

.canvas_wrapper .tabs nav a i.temp_icon {
    background: url('../images/template.png') no-repeat;
    height    : 26px;
    width     : 32px;
}

.canvas_wrapper .tabs nav a:hover i.temp_icon,
.canvas_wrapper .tabs nav a:focus i.temp_icon {
    background: url('../images/template-selected.png') no-repeat 0 0;
    width     : 32px;
}


#open_tools_tab img {
    width  : 30px;
    margin : auto auto 5px auto;
    display: block;

}

.visible_slide {
    /* left: -400px;
    transition: left 0.3s linear 0s; */
}

.open_zoom {
    display   : none;
    background: transparent;
    color     : #333;
    padding   : 4px;
    border    : none;
    width     : 36px;
}

.open_zoom:hover {
    border    : none !important;
    background: transparent;
}

.zoom-cat {
    display        : flex;
    font-size      : 13px;
    align-items    : center;
    justify-content: space-around;
    margin-bottom  : 15px;
}

.zoom-percentage .btn {
    background: #e9696a;
    width     : 62px !important;
    padding   : 5px 0 !important;
    font-size : 13px;
}

.zoom-view {
    font-size     : 14px;
    text-transform: uppercase;
}

.preview-cat .zoom-view {
    color         : #e9696a;
    text-transform: none;
    max-width     : 120px;
    text-align    : center;
}

.preview-cat label.switch:before {
    content  : "OFF";
    position : absolute;
    top      : -20px;
    left     : -10px;
    font-size: 11px;
}

.preview-cat label.switch:after {
    content  : "ON";
    position : absolute;
    top      : -20px;
    right    : -14px;
    font-size: 11px;
}

.canvas_wrapper .tabs .content {
    padding      : 35px 8px 20px;
    position     : absolute;
    top          : 0px;
    /* left      : 120px; */
    color        : #6C5D5D;
    background   : #e8e8e8;
    box-shadow   : 5px 2px 17px -10px rgba(0, 0, 0, .55);
    box-sizing   : border-box;
    width        : 100%;
    height       : 100%;
    overflow     : hidden;
    /* opacity   : 0; */
    display      : none;
    transition   : left .3 ease-in;
    z-index      : 5;
    /* transition: opacity 0.1s linear 0s; */
}

.canvas_wrapper .tabs .content.visible {
    /* width: 340px; */
    /* left: 120px; */
    /* opacity: 1; */
    display: block;
}

.canvas_wrapper .tabs .content p {
    padding-bottom: 2px;
}

.canvas_wrapper .tabs .content p:last-of-type {
    padding-bottom: 0px;
}


.canvas_wrapper .tabs .content .login-area {
    text-align: center;
}

.canvas_wrapper .tabs .content p.login-area-para {
    padding-top: 0 !important;
    text-align : left;
    font-size  : 16px;
}

.content__head {
    margin-bottom: 20px;
}

.content__head p {
    font-size    : 15px;
    padding-right: 16px;
    padding-left : 10px;
    line-height  : 15px;
    color        : #999899;
}

/* .content .text-used-group {
    max-height: 260px;
    overflow-y: auto;
} */
.content .used_fonts.text-used-group {
    max-height: 260px;
    overflow-y: auto;
}

.content .text-used-group hr {
    display: none;
}

.text-used-group h5 {
    margin-bottom : 10px;
    font-size     : 13px;
    font-weight   : normal;
    text-transform: uppercase;
}

.text-used-group>div {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 14px;
    padding-bottom : 14px;
    padding-left   : 9px;
    border-bottom  : 1px solid #b9b3b3;
}

.text-used-group>div .color {
    height       : 18px;
    width        : 18px;
    border-radius: 50%;
}

.text-used-group>div .size {
    margin-left : 12px;
    border-left : 2px solid #b7b7b7;
    padding-left: 13px;
    font-size   : 16px;
    line-height : 12px;
}

.img_search_input {
    display      : flex;
    align-items  : center;
    margin-bottom: 15px;
}

.artwork-type {
    margin-bottom: 20px;
    height       : 33px;
    font-family  : brandon_reg;
}

.art-work-select-wrapper>p {
    text-transform: uppercase;
    text-align    : center;
    font-size     : 14px;
    color         : #6C5D5D;
}

.art-work-select-wrapper select {
    background: #ffffff url('../images/dropdownarrow.png') no-repeat 97% 50%;
}

select#fntsize {
    background      : url(../images/downarrow.svg) no-repeat 98% 50% !important;
    background-color: transparent;
    border          : 0;
    background-size : 12px !important;
    background-size : 12px !important;
    color           : #fff !important;
    font-family     : brandon_reg;
}

select#fntfamily {
    background      : url(../images/downarrow.png) no-repeat 92% 50% !important;
    background-color: #fff !important;
    border          : 0;
    font-family     : Brandon_reg;
}

select#fntsize option {
    color: #000
}


#pixabaySearchinput {
    max-width : 100%;
    flex-basis: 65%;
    border    : 1px solid #dbdcdf;
}

.modal-popup__canvas #sel_pix_img_search {
    flex-basis: 30%;
    border    : 1px solid #dbdcdf;
    height    : 33px;
}

.content__search-img img {
    max-width: 160px;
}


.canvas_block--wrapper {
    position        : relative;
    display         : flex;
    justify-content : center;
    /* align-items  : center; */
    /* height       : calc(100% - 139px); */
    height          : 100%;
    background-color: #fff;
}

.canvas_block {
    position     : relative;
    width        : 100%;
    border-radius: 8px;
    text-align   : center;
    overflow     : auto;
}

.content-tab .product.data.items>.item.title {
    position        : relative;
    margin          : 0 0px 0 0;
    text-transform  : uppercase;
    /* border-bottom: 1px solid #cac7c7; */
}


.content-tab .product.data.items>.item.title>.switch {
    font-size : 12px;
    padding   : 1px 14px 1px 14px;
    border    : none;
    background: transparent;
}

.content-tab #photoTab.product.data.items>.item.title>.switch {
    font-size: 11px;
    padding  : 1px 10px 1px 10px;
}

.content-tab .product.data.items>.item.title:not(.disabled)>.switch:hover {
    background: transparent;
}

.content-tab .product.data.items>.item.title.active>.switch,
.content-tab .product.data.items>.item.title.active>.switch:focus,
.content-tab .product.data.items>.item.title.active>.switch:hover {
    padding-bottom: 0;
    background    : transparent;
}

.content-tab .product.data.items>.item.content {
    position        : relative;
    margin-top      : 45px;
    /* padding      : 2px 5px; */
    left            : 0;
    opacity         : 1;
    box-shadow      : none;
    border          : none !important;
    overflow        : visible;
    padding         : 0px 0;
    background-color: transparent;
}

.content-tab .product.data.items>.item.content:before {
    content   : '';
    position  : absolute;
    top       : -11px;
    left      : 0;
    width     : 100%;
    height    : 2px;
    background: #dddddd;
    z-index   : 2;
}

.content-tab .product.data.items>.item.title.active {
    background      : transparent;
    /* border-bottom: 2px solid #e9696a; */
}

.content-tab .product.data.items>.item.title.active:after {
    content   : '';
    position  : absolute;
    bottom    : -3px;
    left      : 0;
    width     : 100%;
    height    : 2px;
    background: #fe393a;
    z-index   : 9;
}

div#artworkTab .item.title {
    width     : 50%;
    text-align: center;
}

div#photoTab .item.title {
    text-align: center;
    width     : 50%;
}

.journalz-editor .product.data.items>.item.title>.switch {
    height     : 32px !important;
    line-height: 32px !important;
}

.content-tab__m .product.data.items>.item.content:before {
    display: none;
}


/* canvas{
    width: 100%;
} */

#drawingArea {
    display        : flex;
    justify-content: center;
    align-items    : center;
    margin-top     : 55px;

}

.art-work-select-wrapper {
    position: relative;
}

@media (min-width:768px) {
    #drawingArea {
        margin-bottom: 100px;
    }
}

#canvas-content__img {
    width: 100%;
}

.canvas-container {
    /* margin: 15px; */
}

.upload-photo-images {
    margin-top: 15px;
    background: transparent;
}

.upload-photo-images .bg-item,
#show_back_artwork-quote .bg-item,
#show_back_artwork-clipart .bg-item {
    padding     : 4px;
    flex-basis  : 33%;
    /*height    : 90px;*/
}

.upload-photo-images .bg-item img,
#show_back_artwork-quote .bg-item img,
#show_back_artwork-clipart .bg-item img {
    height: 100%;
}



.upload-cat {
    display        : flex;
    justify-content: space-around;
    margin-top     : 10px;
    padding-bottom : 10px;
    border-bottom  : 2px solid #dedede;
    font-size      : 14px;
}

.upload-cat div {
    display            : flex;
    justify-content    : center;
    align-items        : center;
    padding            : 5px;
    background-color   : #d6d6d6;
    /* border-bottom   : 1px solid #ccc6c6;*/
    flex-basis         : 28%;
    text-align         : center;
    color              : #333;
    cursor             : pointer;
    transition         : background-color ease-in .2s;
}

.upload-cat div:hover,
.upload-cat div:focus,
.upload-cat div:active {
    background-color: #fff;
}

.upload-cat div.upload_modal {
    background: #fff;
    cursor    : default;
}

/* .upload_modal{
    background-color: #fff;
} */
.upload-cat div i {
    font-size   : 18px;
    margin-right: 5px;
}

.upload-cat div i.fa-facebook-official {
    color: #3b5999;
}

.upload-cat div i.fa-instagram {
    color: #e4405f;
}

.bg-wrapper-artwork-quote,
.bg-wrapper-artwork-clipart,
.bg-wrapper-artwork {
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
}

.bg-wrapper-artwork-quote .select-bg,
.bg-wrapper-artwork-clipart .select-bg,
.bg-wrapper-artwork .select-bg {
    max-height   : 100%;
    overflow     : visible;
    margin-bottom: 150px;
}


/* Control bar */

.control-bar {
    background        : #ededed;
    display           : flex;
    justify-content   : space-between;
    align-items       : center;
    position          : relative;
    /* width          : 100%; */
    padding           : 7px 15px;
    /* margin-bottom  : 15px; */
    text-align        : center;
    font-size         : 13px;
    z-index           : 201;
    min-height        : 30px;
    z-index           : 2;
}

.control_bar_tool {
    position  : absolute;
    width     : 100%;
    z-index   : 3;
    background: rgba(75, 33, 45, .95);
    color     : white;
    display   : none;
}

.control_bar_tool>ul {
    padding        : 0;
    margin         : auto;
    /* display     : table; */
    /* height      : 1px; */
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.control_bar_tool>ul>li {
    border-left      : 1px solid #68464a;
    position         : relative;
    vertical-align   : middle;
    cursor           : pointer;
    /* line-height   : 3.5; */
    height           : 50px;
}


.control_bar_tool.show {
    position: relative;
}


#textTool>ul>li:nth-child(2) {
    border-left: none;
}

.control_bar_tool>ul>li a {
    display: block;
    color  : #5f5e5e;
    padding: 0px 10px !important;
}

.control_bar_tool>ul>li a:hover,
.control_bar_tool>ul>li a:active {
    color          : #5f5e5e;
    text-decoration: none;
}

.control_rgt {
    display: flex;
}

.locked-item {
    display    : none;
    align-items: center;
}

.locked-item.active {
    display    : flex;
    align-items: center;
}

.login-item {
    display     : flex;
    align-items : center;
    margin-right: 15px;
}

.login-item .lockImg {
    font-size: 22px;
    color    : #f17320;
}

.login-item .lockedBlock {
    margin-left: 3px;
}

.span_part {
    /* display   : inline-block; */
    display    : flex;
    align-items: center;
    padding    : 0 10px !important;
    /* padding : 8px 11px; */
}

.first-item {
    align-self   : stretch;
    border-left  : none !important;
    padding-right: 0;
}

.first-item select {
    height: 100%;
    width : 120px;
}

.control_bar_tool .button-group-navigation {
    /* padding    : 15px 0; */
    line-height: initial;
    align-self : stretch;
    display    : flex;
    align-items: center;
}

.control_bar_tool .button-group-navigation li a {
    font-size: 13px;
    color    : #fff;
    margin   : 0;
}

.control_bar_tool .button-group-navigation li a:hover,
.control_bar_tool .button-group-navigation li a:focus {
    color: #fff;
}

.text-fontcolor {
    border    : none;
    padding   : 0;
    background: transparent;
    height    : 33px;
}

.down-arrow {
    background     : url(../images/downarrow.svg) no-repeat 0 0;
    width          : 12px;
    height         : 12px;
    display        : inline-block;
    position       : relative;
    top            : 3px;
    left           : 0px;
    background-size: contain;
}

.remove-selected {
    background: no-repeat;
    border    : none;
    box-shadow: none !important;
    padding   : 0;
}

.remove-selected:hover {
    background: transparent;
    border    : none;
    color     : #333333;
}

.remove-selected:focus,
.remove-selected:active {
    background: transparent;
    border    : none;
    color     : #333333;
}

.svg-thumb {
    display       : inline-block;
    vertical-align: middle;
    width         : 28px;
    height        : 28px;
}

.svg-shapes .svg-thumb {
    width: 140px;
}

#lineHeightValue {
    color   : #333;
    position: relative;
    top     : 2px;
}

.svg-shapes li {
    cursor: pointer;
}

.control_bar_tool .button-group-navigation li {
    display: inline-block;
}

.control_bar_tool .button-group-navigation li a {
    color : white;
    margin: 0;
}


/* Navigation dropdown */

.font-family-wrapper {
    display : block;
    position: relative;
}

.font-family-wrapper .font-selected span {
    position      : relative;
    background    : #fff;
    border        : 1px solid #cacaca;
    color         : #716b6b !important;
    font-size     : 13px !important;
    text-transform: uppercase;
    text-align    : left !important;
    padding       : 4px 0 4px 15px;
    display       : block;
    width         : 100%;
    box-sizing    : border-box;
    cursor        : pointer;
}

.font-family-wrapper .font-selected span:after {
    content  : "\f107";
    font     : normal normal normal 14px/1 FontAwesome;
    font-size: 18px;
    position : absolute;
    right    : 8px;
}

.font-family-wrapper ul {
    background  : #fff;
    position    : absolute;
    width       : 100%;
    z-index     : 2;
    border      : 1px solid #cacaca;
    height      : 400px;
    overflow-y  : auto;
    margin-left : 0;
    padding-left: 0;
}

.font-family-wrapper ul li {
    height      : auto;
    padding-left: 15px;
    line-height : 30px;
    font-size   : 16px;
    cursor      : pointer;
}

.font-family-wrapper ul li:hover {
    background-color: rgba(84, 44, 56, 0.07);
}

.tool_divider .font-family-wrapper ul {
    width     : 264px;
    overflow-x: hidden;
}

.tool_divider .font-family-wrapper ul li {
    color       : #333;
    padding-left: 6px;
}

.tool_divider .font-family-wrapper .font-selected {
    height: 100%;
}

.tool_divider .font-family-wrapper .font-selected span {
    padding       : 0 8px;
    border        : none;
    min-width     : 70px;
    max-width     : 95px;
    line-height   : 47px;
    text-overflow : ellipsis;
    display       : inline-block;
    white-space   : nowrap;
    vertical-align: top;
    width         : 100px;
    height        : 100%;
    overflow      : hidden;

}

.tool_divider .font-family-wrapper .font-selected span:after {
    right: 3px;
    top  : 15px;
}



/* Range slider */

.range-slider__range {
    -webkit-appearance: none;
    /* width          : calc(100% - (73px)); */
    height            : 4px;
    border-radius     : 5px;
    background        : #d7dcdf;
    outline           : none;
    padding           : 0;
    margin            : 0;
}

.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance        : none;
    width             : 10px;
    height            : 10px;
    border-radius     : 50%;
    background        : #2c3e50;
    cursor            : pointer;
    -webkit-transition: background .15s ease-in-out;
    transition        : background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
}

.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
}

.range-slider__range::-moz-range-thumb {
    width          : 10px;
    height         : 10px;
    border         : 0;
    border-radius  : 50%;
    background     : #2c3e50;
    cursor         : pointer;
    -moz-transition: background .15s ease-in-out;
    transition     : background .15s ease-in-out;
}

.range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
}

.range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
}

.range-slider__range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1abc9c;
}

::-moz-range-track {
    background: #d7dcdf;
    border    : 0;
}


/* Dropdown */

.control_bar_tool .dropdown-menu {
    position        : relative;
    display         : flex !important;
    min-width       : auto;
    background-color: transparent;
    padding         : 0;
    box-shadow      : none;
    border-radius   : 0;
    margin          : 0;
    align-items     : center;
}

.dropdown-tab {
    position                  : absolute;
    left                      : 0;
    top                       : 100%;
    background                : #fff;
    min-width                 : 200px !important;
    padding                   : 10px 15px !important;
    box-shadow                : 0px 0px 40px rgba(0, 0, 0, 0.2);
    min-height                : 70px;
    border-bottom-left-radius : 4px;
    border-bottom-right-radius: 4px;
    z-index                   : 200;
    display                   : none;
}

.dropdown-menu.show .dropdown-tab {
    display: block;
}

.dropdown-text,
.dropdown-tab li {
    color      : #333;
    line-height: 35px;
}

.borderThickness,
.borderThicknessText,
.borderThicknessShapes {
    max-width  : 60px;
    margin-left: 12px;
}


.dropdown-tab__fl {
    min-width : 140px !important;
    min-height: 40px !important;
    padding   : 0 !important;
}

.dropdown-tab__fl li {
    float     : left;
    width     : 70px;
    text-align: center;
    cursor    : pointer;
}

.dropdown-tab__fl li:hover {
    background: #f3f3f3;
}

.dropdown-tab__filt li:hover {
    color: #9a454c;
}

/* Canvas footer */


.canvas_footer {
    position     : absolute;
    bottom       : 11px;
    left         : 0;
    width        : 100%;
    display      : flex;
    /* background: rgba(243, 243, 243, .75); */
    padding      : 20px 5px 5px !important;
    z-index      : 2;
}

/* .journalz-editor footer.canvas_footer {
    bottom: 11px;
} */

.canvas_footer .zoom {
    display    : flex;
    align-items: center;
    font-size  : 14px;
}

.canvas_footer .zoom button {
    cursor: pointer;
}

.lockedBlock {
    display: inline-block;
}

/* Preview */

@media (max-width:1440px) {
    .preview-container {
        max-height: 75%;
        overflow-y: auto;
    }
}

#open_temp_tab {
    display: none
}

/* Preview */

.preview {
    display        : flex;
    align-items    : center;
    position       : relative;
    font-size      : 14px;
    margin-top     : 15px;
    /* border-top  : 1px solid #d0d0d0; */
    padding-top    : 0;
    /* padding-left: 15px; */
}

/* .preview:before {
    content   : "";
    position  : absolute;
    left      : 0;
    height    : 22px;
    width     : 1px;
    background: #d2cece;
    display   : block;
} */

.preview .switch {
    position   : relative;
    display    : inline-block;
    width      : 32px;
    height     : 10px;
    margin-left: 15px;
}

.preview .switch input {
    opacity: 0;
    width  : 0;
    height : 0;
}

.preview.enable_scrl .switch {
    top: 5px;
}

.preview .slider {
    position          : absolute;
    cursor            : pointer;
    top               : 0;
    left              : 0;
    right             : 0;
    bottom            : 0;
    background-color  : #c6c6c6;
    -webkit-transition: .4s;
    transition        : .4s;
}

.preview .slider:before {
    position          : absolute;
    content           : "";
    height            : 17px;
    width             : 17px;
    left              : 0px;
    bottom            : -3px;
    background-color  : #e9696a;
    -webkit-transition: .4s;
    transition        : .4s;
}

.enable_scrl {
    display: none;
}


#checked:checked+.slider,
#checked2:checked+.slider,
#checked3:checked+.slider {
    background-color   : rgba(233, 105, 106, .3);
    /* background-color: #2196F3; */
}

#checked:focus+.slider,
#checked2:focus+.slider,
#checked3:focus+.slider {
    box-shadow: 0 0 1px rgba(233, 105, 106, .3);
    ;
}

#checked:checked+.slider:before,
#checked2:checked+.slider:before,
#checked3:checked+.slider:before {
    -webkit-transform: translateX(17px);
    -ms-transform    : translateX(17px);
    transform        : translateX(17px);
}

.preview .slider.round {
    border-radius: 34px;
}

.preview .slider.round::before {
    border-radius: 34px;
}

/* Preview Ends*/



/* Color picker */

#styleInput,
#styleInputbg,
#styleInput2 {
    border: 1px solid #b5b5b5;
    width : 40px;
    height: 40px;
}

#valueInput {
    border     : 1px solid #b5b5b5;
    width      : 90px;
    padding    : 2px 7px;
    height     : 30px;
    font-size  : 14px;
    line-height: 1;
}

.jscolorbg,
.jscolorbg:hover {
    background: url('../images/palette.png') no-repeat !important;
    height    : 31px;
    width     : 28px;
    border    : none;
    box-shadow: none;
}

.jscolor-text {
    color      : #757474;
    line-height: 15px;
    margin-top : 15px;
}

.color-picker {
    padding         : 0;
    border          : none;
    background-color: transparent;
    height          : 32px;
}

.jscolor-inp {
    flex: 2
}

#colorInput,
#bgInput {
    height : 30px;
    width  : 100px;
    padding: 0 5px;
}

/* ./Color picker */

/* ./Dropdown */


/* Accordian */
.accordion-container {
    position : relative;
    max-width: 500px;
    height   : auto;
    margin   : 10px auto;
}

.accordion-container>h2 {
    text-align    : center;
    color         : #fff;
    padding-bottom: 5px;
    margin-bottom : 20px;
    padding-bottom: 15px;
    border-bottom : 1px solid #ddd;
}

.set {
    position        : relative;
    width           : 100%;
    height          : auto;
    background-color: #f5f5f5;
}

.set>a {
    display           : block;
    padding           : 10px 15px;
    text-decoration   : none;
    color             : #555;
    font-weight       : 500;
    border-bottom     : 1px solid #ddd;
    -webkit-transition: all 0.2s linear;
    -moz-transition   : all 0.2s linear;
    transition        : all 0.2s linear;
}

.set>a i {
    float     : right;
    margin-top: 2px;
}

.set>a.active {
    background-color: #9a454c;
    color           : #fff;
}

.c-accordian .c-content {
    background-color: #fff;
    border-bottom   : 1px solid #ddd;
    display         : none;
    padding         : 20px 5px;
    max-height      : 90vh;
    overflow-y      : auto;
}

.c-accordian .c-content p {
    padding: 10px 15px;
    margin : 0;
    color  : #333;
}


.canvas-back::before {
    content: "";
    left   : 95%;
}



/* ./Accordian */

/* .bg-wrapper-pixabay{
    max-height: 90vh;
    overflow-y: auto;
} */

.canvas-action {
    margin        : 0 auto 20px !important;
    width         : 200px;
    display       : flex;
    background    : #838383;
    border-radius : 4px;
    padding       : 10px 20px;
    line-height   : 1.7;
    color         : #fff;
    text-transform: uppercase;
    box-shadow    : none !important;
    font-size     : 14px;
    font-family   : brandon_reg;
}

.canvas-action:hover {
    border    : none;
    background: #9a9999;
    color     : #fff;
    box-shadow: none !important;
}

.start-over img,
.clear-canvas img {
    width        : 24px;
    height       : 24px;
    border-right : 1px solid #fff;
    padding-right: 5px;
    margin-right : 5px;
}

.canvas_wrapper code {
    word-wrap  : break-word !important;
    white-space: pre-wrap;
    max-width  : 1000px;
    margin     : auto;
    padding    : 35px;
    background : #e8e8e8;
    line-height: 24px;

}

.canvas-content {
    position        : relative;
    max-width       : 100%;
    background-color: #fff;
}

/* Responsive */

@media (min-width:1200px) {
    .canvas_wrapper .tabs {
        flex-basis: 120px;
        max-width : 120px;
    }
}


@media (min-width:768px) {
    /* .canvas_wrapper .tabs {
        flex-basis: 9%;
        max-width     : 120px;
    } */

    .canvas-content {
        flex-basis   : calc(100% - 120px);
        /* flex-basis: 91%; */
        /* max-width : 91%; */
    }

    .canvas_block {
        /* max-width: 400px; */
        margin-left : auto;
        margin-right: auto;
    }

    .text-input-block {
        max-width: 75% !important;
    }
}


.minicolors-theme-default .minicolors-input {
    height        : 35px !important;
    padding       : 0 10px !important;
    vertical-align: top;
    margin-top    : 2px;
}

.minicolors-theme-default .minicolors-swatch {
    width  : 35px !important;
    height : 35px !important;
    /* left: 105% !important; */
    left   : 85px !important;
    top    : 1px !important;
    cursor : pointer;
}


.dropdown-tab .minicolors-theme-default .minicolors-swatch {
    top: 1px !important;
}


/* Save Modal */

.popup-sinup-form .container {
    width: 100%;
}

@media(min-width:768px) {

    .customer-popup .modal-inner-wrap,
    .customer-template-name .modal-inner-wrap {
        width: 600px !important;
    }
}

.customer-template-name .modal-inner-wrap {
    border-radius: 5px;
}

.customer-popup-login .product.data.items>.item.content {
    border     : none;
    border-top : 1px solid #cccccc;
    margin-top : 42px;
    padding-top: 20px;
}

.customer-popup-login .item.title>.switch {
    background: transparent !important;
}

.customer-popup-login .product.data.items {
    text-align: center;
    margin-top: 0;
}

.block.block-customer-login {
    margin: 0;
}

.actions-toolbar {
    margin-top: 0;
}

.sign-up-terms.text-center {
    display  : block;
    clear    : both;
    padding  : 6px;
    font-size: 16px;
}

.social-btn .btn-social {
    display         : block;
    text-decoration : none;
    margin-bottom   : 0;
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 1.42857143;
    vertical-align  : middle;
    touch-action    : manipulation;
    cursor          : pointer;
    user-select     : none;
    background-image: none;
    border          : 1px solid transparent;
    border-radius   : 4px;
    padding         : 6px 12px 6px 44px;
    position        : relative;
    text-align      : left;
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
}


.btn-social>:first-child {
    position    : absolute;
    left        : 0;
    top         : 0;
    bottom      : 0;
    width       : 32px;
    line-height : 34px;
    font-size   : 1.6em;
    text-align  : center;
    border-right: 1px solid rgba(0, 0, 0, .2);
}

.btn-facebook {
    color           : #fff;
    background-color: #3b5998;
    border-color    : rgba(0, 0, 0, .2);
}

.btn-google {
    color           : #fff;
    background-color: #dd4b39;
    border-color    : rgba(0, 0, 0, .2);
}

.btn-google .fa-google {
    background: url(../images/g-logo.png) no-repeat;
}

.btn-google .fa-google:before {
    content: "";
}

.social-btn .btn-social.btn:hover,
.social-btn .btn-social.btn:focus {
    color: #fff;
}

.customer-popup header.modal-header {
    padding: 20px 0;
}

.customer-popup .action-close,
.modal-popup__canvas_close .action-close,
.help-popup .action-close,
.customer-template-name .action-close,
.modal-popup__canvas_clear .action-close,
.modal-popup__canvas_strat_over .action-close,
.modal-popup__canvas_locked_items .action-close {
    padding: 20px 40px;
}

.customer-popup-login h2 {
    margin-top: 0;
}

.customer-popup-login .product.data.items>.item.title {
    margin : 0;
    float  : none;
    width  : auto;
    display: inline-block;
}

.customer-popup-login fieldset {
    margin-bottom: 0;
}

.customer-popup-login .product.data.items>.item.title:not(.disabled)>.switch:active,
.customer-popup-login .product.data.items>.item.title.active>.switch,
.customer-popup-login .product.data.items>.item.title.active>.switch:focus,
.customer-popup-login .product.data.items>.item.title.active>.switch:hover {
    padding-bottom: 0;
    border-bottom : 3px solid #6d6e72;
    color         : #8f7fb8;
}

.customer-popup-login .product.data.items>.item.title>.switch {
    border        : none;
    font-size     : 14px;
    text-transform: uppercase;
    padding       : 8px 35px 1px 35px;
    height        : auto !important;
}

.customer-popup-login .actions-toolbar>.primary,
.customer-template-name .actions-toolbar>.primary {
    display: block;
    width  : 100%;
}

.customer-popup-login button.action.primary,
.customer-template-name button.action.primary {
    background-color: #e9696a;
    border          : 1px solid #e9696a !important;
    padding         : 10px;
    width           : 100%;
    margin-top      : 20px;
    border-radius   : 0;
    font-size       : 16px;
    text-transform  : uppercase;
}

.customer-popup-login button.action.primary:hover,
.customer-popup-login button.action.primary:focus,
.customer-template-name button.action.primary:hover,
.customer-template-name button.action.primary:focus
 {
    color: #fff;
}

.customer-popup-login .fieldset>.field,
.customer-popup-login .fieldset>.fields>.field {
    margin-bottom: 0;
    margin-top   : 20px;
}

.customer-template-name .fieldset>.field,
.customer-template-name .fieldset>.fields>.field {
    margin-bottom: 0;
    margin-top   : 20px;
}

.customer-popup-login input[type="text"],
.customer-popup-login input[type="password"],
.customer-popup-login input[type="url"],
.customer-popup-login input[type="tel"],
.customer-popup-login input[type="search"],
.customer-popup-login input[type="number"],
.customer-popup-login input[type="datetime"],
.customer-popup-login input[type="email"] {
    height: 40px;
}

.customer-popup-login .form.password.reset,
.customer-popup-login .form.send.confirmation,
.customer-popup-login .form.password.forget,
.customer-popup-login .form.create.account {
    width    : 100%;
    min-width: auto;
}

.customer-template-name input[type="text"],
.customer-template-name input[type="password"],
.customer-template-name input[type="url"],
.customer-template-name input[type="tel"],
.customer-template-name input[type="search"],
.customer-template-name input[type="number"],
.customer-template-name input[type="datetime"],
.customer-template-name input[type="email"] {
    height: 40px;
}

.customer-template-name .form.password.reset,
.customer-template-name .form.send.confirmation,
.customer-template-name .form.password.forget,
.customer-template-name .form.create.account {
    width    : 100%;
    min-width: auto;
}

.customer-template-name input::placeholder,
.customer-popup-login input::placeholder {
    font-weight: 300;
    color      : #636c72;
}

.start-canvas-orange,
.clear-canvas-orange {
    background    : #ff574d;
    padding       : 8px 35px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : white;
    border-radius : 0;
    border        : 1px solid #ff574d;
    box-shadow    : none !important;
}

.start-canvas-orange:hover,
.start-canvas-orange:focus,
.start-canvas-orange:active,
.clear-canvas-orange:hover,
.clear-canvas-orange:focus,
.clear-canvas-orange:active {
    color         : white;
    -ms-filter    : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter        : alpha(opacity=80);
    -moz-opacity  : 0.8;
    -khtml-opacity: 0.8;
    opacity       : 0.8;
    background    : #ff574d;
}

.close-pop {
    background    : white;
    padding       : 8px 35px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : #8A8A8A;
    border-radius : 0;
    border        : 1px solid #8A8A8A;
    box-shadow    : none !important;
}

.field.rememberme {
    text-align: left;
}

.field.rememberme .control {
    display: inline-block;
}

.passwordkey {
    position: relative;
}

.passwordkey::after {
    content    : "\f084";
    font-family: FontAwesome;
    position   : absolute;
    right      : 10px;
    top        : 50%;
    transform  : translateY(-50%);
    color      : #ff7700;
}

/* Save Modal Ends*/

/* aside.modal-popup.modal-popup__canvas{
    z-index: 999999;
} */
/* aside.modal-popup.modal-popup__canvas_close{
    z-index: 1000000;
} */

/* Undo Redo */

.undo-redo button {
    background   : none !important;
    font-family  : 'Brandon_reg';
    font-size    : 14px;
    font-weight  : 300;
    color        : #4b212d;
    box-shadow   : none;
    border       : none;
    padding-left : 10px;
    padding-right: 10px;
}

.light-grey {
    color: #adaeb0;
}

.undo-redo .light-grey {
    /*color: #4b212d;*/
    width         : 2px;
    display       : inline-block;
    background    : #5b303a;
    height        : 14px;
    vertical-align: middle;
    font-size     : 0;
}


#canvas_hscroll {
    position: absolute;
    width   : 100%;
    bottom  : 0;
}

#canvas_vscroll {
    position: absolute;
    top     : 10px;
    left    : 98%;
    height  : 100%;
}

input#zoomCtrl:focus {
    box-shadow: none;
}

/* #drawingArea .ui-slider-horizontal{
    border: 1px solid #aba8a8;
 } */

#canvas_hscroll .ui-slider-handle {
    width           : 130px !important;
    background-color: #cecece !important;
}

#canvas_vscroll .ui-slider-handle {
    height          : 130px !important;
    background-color: #cecece !important;
}

.color-dropdown {
    position: relative;
}

.color-dropdown .dropdown-item {
    height          : 31px;
    border          : 1px solid #cccccc;
    display         : flex;
    align-items     : center;
    padding         : 0 5px;
    background-color: #fff;
    cursor          : pointer;
}

.color-dropdown .fa-angle-down {
    font-size  : 22px;
    margin-left: auto;
}

.color-dropdown.show .dropdown-tab {
    display   : block;
    min-height: unset;
}

.color-dropdown .dropdown-item {
    width: 50px;
}

.color-dropdown-menu {
    padding: 25px 15px !important;
}

.color-dropdown-sampl {
    display         : inline-block;
    width           : 22px;
    height          : 22px;
    border-radius   : 50%;
    background-color: #333;
}

/* .color-dropdown .minicolors-panel{
    display: block!important;
 } */


/* Lock popup */

.modal-popup__canvas_locked_items .modal-inner-wrap {
    max-width    : 650px;
    border-radius: 9px;
}

.modal-popup__canvas_locked_items .lockedObjectsDiv {
    display  : flex;
    flex-wrap: wrap;
}

.modal-popup__canvas_locked_items .lock-item {
    flex-basis   : 33.33%;
    padding      : 0 12px;
    margin-bottom: 20px;
    box-sizing   : border-box;
}

.modal-popup__canvas_locked_items .lockedObjectsContainer {
    height       : 120px;
    margin-bottom: 10px;
    background   : -webkit-linear-gradient(left, #e4e4e4, #dadada);
    position     : relative;
}

.modal-popup__canvas_locked_items .lockedObjectsContainer .photo-thumb {
    position  : absolute;
    top       : 0;
    left      : 0;
    right     : 0;
    bottom    : 0;
    margin    : auto;
    max-width : 90%;
    display   : inline-block;
    max-height: 90%;
}

.modal-popup__canvas_locked_items button {
    font-family   : brandon_reg;
    text-transform: uppercase;
    font-size     : 14px;
    box-shadow    : none !important;
    border        : 1px solid transparent;
}

.modal-popup__canvas_locked_items button.close-pop {
    font-family     : brandon_reg;
    background-color: #e9696a;
    border          : 2px solid #e9696a !important;
    padding         : 8px 35px;
    color           : #fff;
    border-radius   : 0;
}

.modal-popup__canvas_locked_items button.UnlockAll {
    background    : white;
    padding       : 8px 35px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : #8A8A8A;
    border-radius : 0;
    border        : 1px solid #8A8A8A;
    font-family   : brandon_reg;
}

.modal-popup__canvas_locked_items header.modal-header {
    text-align: center;
}

.modal-popup__canvas_locked_items .locked_wrapper {
    font-size  : 17px;
    line-height: 19px;
}

#loadAllLockedObject {
    margin-top: 17px;
}

.help-popup .modal-inner-wrap {
    max-width    : 600px;
    border-radius: 8px;
}

.help-popup .modal-header {
    position      : relative;
    padding-bottom: 1.2rem;
    padding-top   : 5px;
}

#need-help-popup .title {
    margin-top   : 0;
    margin-bottom: 16px;
    text-align   : center;
    font-size    : 26px;
    font-family  : brandon_reg;
}

/* ./Lock popup */

.customer-popup .modal-inner-wrap {
    border-radius: 8px;
}

/* start over */


.modal-popup__canvas_strat_over .modal-inner-wrap,
.modal-popup__canvas_clear .modal-inner-wrap,
.modal-popup__canvas_close .modal-inner-wrap {
    border-radius: 8px;
    max-width    : 600px;
}

.modal-popup__canvas_strat_over .modal-inner-wrap p,
.modal-popup__canvas_clear .modal-inner-wrap p,
.modal-popup__canvas_close .modal-inner-wrap p {
    font-size: 16px;
}

.modal-popup__canvas_strat_over .modal-title,
.modal-popup__canvas_clear .modal-title,
.modal-popup__canvas_close .modal-title,
.modal-popup.customer-popup .modal-title,
.modal-popup__canvas_locked_items .modal-title,
.customer-template-name .modal-title {
    font-family: brandon_reg;
    text-align : center;
}

.modal-popup__canvas_strat_over .modal-footer,
.modal-popup__canvas_clear .modal-footer,
.modal-popup__canvas_close .modal-footer {
    position  : relative;
    border-top: none !important;
}

.modal-popup__canvas_strat_over .modal-footer::before,
.modal-popup__canvas_clear .modal-footer::before,
.modal-popup__canvas_close .modal-footer::before {
    content   : "";
    display   : block;
    position  : absolute;
    left      : 0;
    top       : 0;
    right     : 0;
    width     : 90%;
    margin    : auto;
    border-top: 1px solid #c1c1c1;
}

/* Replace Modal */

.modal-popup__canvas_image_replace .modal-inner-wrap {
    border-radius: 8px;
    max-width    : 800px;
}


.modal-popup__canvas_image_replace .modal-inner-wrap .product.data.items {
    border    : none !important;
    background: transparent !important;
    font-size : 16px !important;
    color     : #6d6e71;
    text-align: center;
}

.modal-popup__canvas_image_replace .modal-inner-wrap .product.data.items>.item.title {
    position: relative;
    float   : none;
    width   : auto;
    display : inline-block;
    padding : 0 10px;
}

.modal-popup__canvas_image_replace .modal-inner-wrap .product.data.items>.item.title.active:after {
    content         : "";
    position        : absolute;
    width           : 100%;
    height          : 3px;
    background-color: #8a8484;
    bottom          : -8px;
    left            : 0;
}

.modal-popup__canvas_image_replace .modal-inner-wrap .product.data.items>.item.content {
    border    : none;
    border-top: 1px solid #cccccc;
    padding   : 10px 15px 35px 15px;
}

.modal-popup__canvas_image_replace .modal-inner-wrap a.switch {
    display    : inline-block !important;
    border     : none !important;
    background : transparent !important;
    font-family: 'Brandon_reg';
    font-size  : 15px !important;
    padding    : 0 !important;
    color      : #6d6e71;
}

.modal-popup__canvas_image_replace .modal-inner-wrap a.switch:hover {
    color: #553d95 !important;
}

.modal-popup.customer-popup .modal-header,
.modal-popup__canvas_close .modal-header,
.customer-template-name .modal-header,
.modal-popup__canvas_locked_items .modal-header,
.modal-popup__canvas_strat_over .modal-header,
.modal-popup__canvas_clear .modal-header,
.modal-popup__canvas_image_replace .modal-header {
    position: relative;
}

.modal-popup.customer-popup .modal-header,
.modal-popup.customer-popup .modal-content,
.modal-popup.customer-popup .modal-footer {
    padding: 12px 30px;
}

.modal-popup__canvas_close .modal-header,
.modal-popup__canvas_close .modal-content,
.modal-popup__canvas_close .modal-footer {
    padding: 12px 30px;
}

.customer-template-name .modal-header,
.customer-template-name .modal-content,
.customer-template-name .modal-footer {
    padding: 12px 30px;
}

.modal-popup__canvas_locked_items .modal-header,
.modal-popup__canvas_locked_items .modal-content,
.modal-popup__canvas_locked_items .modal-footer {
    padding: 12px 30px;
}

.modal-popup__canvas_strat_over .modal-header,
.modal-popup__canvas_strat_over .modal-content,
.modal-popup__canvas_strat_over .modal-footer {
    padding: 12px 30px;
}

.modal-popup__canvas_clear .modal-header,
.modal-popup__canvas_clear .modal-content,
.modal-popup__canvas_clear .modal-footer {
    padding: 12px 30px;
}

/* .block.block-replace-div {
    border: 2px dashed #cccccc;
    border-radius: 4px;
} */

.modal-popup__canvas_image_replace .product.data.items>.item.content {
    margin-top: 38px;
}

.item.title i {
    display      : inline-block !important;
    padding-right: 0;
    position     : relative;
    display      : inline-block;
    margin-left  : 10px;
}

i.myPhotos-icon {
    background-image : url(../images/my_photos.png);
    background-repeat: no-repeat;
    width            : 18px;
    height           : 18px;
    top              : 5px;
    left             : -2px;
}

i.upload-icon {
    background-image : url(../images/upload.png);
    background-repeat: no-repeat;
    width            : 24px;
    height           : 18px;
    top              : 4px;
}

i.facebook-icon {
    background-image : url(../images/facebook.jpg);
    background-repeat: no-repeat;
    width            : 18px;
    height           : 18px;
    top              : 4px;
}

i.instagram-icon {
    background-image : url(../images/instagram.jpg);
    background-repeat: no-repeat;
    width            : 18px;
    height           : 18px;
    top              : 4px;
}

.modal-tabs .nav-tabs a .upload-icon {
    height: 18px;
    top   : 6px;
}

.replacePhoto {
    background    : #ff574d;
    padding       : 8px 35px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : white;
    border-radius : 0;
    border        : 1px solid #ff574d;
    box-shadow    : none !important;
}

.cancel-pop {
    background    : white;
    padding       : 8px 35px;
    font-size     : 14px;
    text-transform: uppercase;
    color         : #8A8A8A;
    border-radius : 0;
    border        : 1px solid #8A8A8A;
    box-shadow    : none !important;
}

.replacePhoto:hover {
    opacity   : 0.8;
    background: #ff574d;
}

/* Masonary layout */

.modal-popup__canvas_image_replace .block-content.all-photos-container {
    display  : flex;
    flex-wrap: wrap;
}

.modal-popup__canvas_image_replace .block-content.all-photos-container .bg-item {
    flex-basis: 32%;
    padding   : 10px;
    cursor    : pointer;
    position  : relative;
    height    : 160px;
    box-sizing: border-box;
}

/* .modal-popup__canvas_image_replace .block-content.all-photos-container .bg-item img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 90%;
    display: inline-block;
    max-height: 90%;
    width: 100%;
} */

.modal-popup__canvas_image_replace .block-content.all-photos-container .bg-item.active {
    background        : #eaeaea;
    display           : block;
    padding           : 3%;
    -webkit-transition: padding 0.2s ease-out;
    -moz-transition   : padding 0.2s ease-out;
    -o-transition     : padding 0.2s ease-out;
    transition        : padding 0.2s ease-out;
}

.modal-popup__canvas_image_replace .block-content.all-photos-container .bg-item.active::after {
    content      : "\f00c";
    color        : #fff;
    font         : 20px FontAwesome;
    position     : absolute;
    left         : 10px;
    top          : 12px;
    border-radius: 50%;
    padding      : 4px;
    border       : 2px solid #fff;
    background   : #474747;
}

.modal-popup__canvas_image_replace .modal-header {
    padding-top: 0;
}

.modal-popup__canvas_image_replace.modal-slide .action-close {
    padding: 20px 26px;
}

.modal-popup__canvas_image_replace .modal-footer {
    padding-top   : 20px;
    padding-bottom: 20px;
}

.modal-popup__canvas_image_replace .modal-inner-wrap,
.customer-popup .modal-inner-wrap {
    margin: 2.5rem auto;
}

.register-container .fieldset>p {
    font-size: 17px;
}

.photos-replace-container {
    width : 100% !important;
    height: 385px;
}

body.journalz-editor>.loading-mask,
body.journalz-editor .loading-mask .loader>img {
    z-index: 9999999 !important;
}

.canvas-loader-wrapper::before {
    content   : "";
    position  : fixed;
    background: rgba(0, 0, 0, .15);
    left      : 0;
    top       : 0;
    width     : 100%;
    height    : 100%;
}

.canvas-loader {
    width            : 250px;
    height           : 50px;
    line-height      : 50px;
    text-align       : center;
    position         : absolute;
    top              : 50%;
    left             : 50%;
    -webkit-transform: translate(-50%, -50%);
    transform        : translate(-50%, -50%);
    font-family      : helvetica, arial, sans-serif;
    text-transform   : uppercase;
    font-weight      : 300;
    color            : #ce4233;
    letter-spacing   : 0.2em;
    z-index          : 999999;
    position         : fixed;
}

.canvas-loader::before,
.canvas-loader::after {
    content          : "";
    display          : block;
    width            : 8px;
    height           : 8px;
    background       : #ce4233;
    position         : absolute;
    -webkit-animation: load .7s infinite alternate ease-in-out;
    animation        : load .7s infinite alternate ease-in-out;
}

.pre-loader::before {
    top: 0;
}

.pre-loader::after {
    bottom: 0;
}

@-webkit-keyframes load {
    0% {
        left  : 0;
        height: 30px;
        width : 15px;
    }

    50% {
        height: 8px;
        width : 40px;
    }

    100% {
        left  : 235px;
        height: 30px;
        width : 15px;
    }
}

@keyframes load {
    0% {
        left  : 0;
        height: 30px;
        width : 15px;
    }

    50% {
        height: 8px;
        width : 40px;
    }

    100% {
        left  : 235px;
        height: 30px;
        width : 15px;
    }
}

.appv-txt {
    font-size    : 16px;
    padding-left : 10px;
    padding-right: 10px;
    margin-bottom: 25px;
}

.appv-hd {
    text-align    : center;
    color         : #e9696a !important;
    font-size     : 15px;
    font-weight   : 300;
    margin-bottom : 15px;
    margin-top    : 7px;
    text-transform: uppercase;
}

.apprc-btn {
    text-align: center;
}

.apprc-btn button {
    font-family   : 'Brandon_reg';
    font-size     : 14px;
    font-weight   : 400;
    padding       : 12px 40px;
    text-transform: uppercase;
    color         : white;
    border-radius : 0;
    box-shadow    : none;
}

.apprc-chng {
    text-align: center;
    margin-top: 15px;
}

.apprc-chng a {
    color          : #e9696a;
    font-size      : 14px;
    text-decoration: none;
    text-transform : uppercase;
}

/* Color picker */

.minicolors {
    position: relative;
}

.minicolors-sprite {
    background-image: url(../images/jquery.minicolors.png);
}

.minicolors-swatch {
    position           : absolute;
    vertical-align     : middle;
    background-position: -80px 0;
    border             : solid 1px #ccc;
    cursor             : text;
    padding            : 0;
    margin             : 0;
    display            : inline-block;
}

.minicolors-swatch-color {
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    bottom  : 0;
}

.minicolors input[type=hidden]+.minicolors-swatch {
    width   : 28px;
    position: static;
    cursor  : pointer;
}

.minicolors input[type=hidden][disabled]+.minicolors-swatch {
    cursor: default;
}


/* Panel */
.minicolors-panel {
    /* position: absolute; */
    position  : relative;
    width     : 173px;
    background: white;
    border    : solid 1px #CCC;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    z-index   : 99999;
    box-sizing: content-box;
    display   : none;
}

.minicolors-panel.minicolors-visible {
    display: block;
}

/* Panel positioning */
.minicolors-position-top .minicolors-panel {
    /* top: -154px; */
}

.minicolors-position-right .minicolors-panel {
    right: 0;
}

.minicolors-position-bottom .minicolors-panel {
    top   : 10px;
    /* top: auto; */
}

.minicolors-position-left .minicolors-panel {
    left: 0;
}

.minicolors-with-opacity .minicolors-panel {
    width: 194px;
}

.minicolors .minicolors-grid {
    position           : relative;
    top                : 1px;
    left               : 1px;
    /* LTR */
    width              : 150px;
    height             : 150px;
    margin-bottom      : 2px;
    background-position: -120px 0;
    cursor             : crosshair;
}

[dir=rtl] .minicolors .minicolors-grid {
    right: 1px;
}

.minicolors .minicolors-grid-inner {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 150px;
    height  : 150px;
}

.minicolors-slider-saturation .minicolors-grid {
    background-position: -420px 0;
}

.minicolors-slider-saturation .minicolors-grid-inner {
    background-position: -270px 0;
    background-image   : inherit;
}

.minicolors-slider-brightness .minicolors-grid {
    background-position: -570px 0;
}

.minicolors-slider-brightness .minicolors-grid-inner {
    background-color: black;
}

.minicolors-slider-wheel .minicolors-grid {
    background-position: -720px 0;
}

.minicolors-slider,
.minicolors-opacity-slider {
    position           : absolute;
    top                : 1px;
    left               : 152px;
    /* LTR */
    width              : 20px;
    height             : 150px;
    background-color   : white;
    background-position: 0 0;
    cursor             : row-resize;
}

[dir=rtl] .minicolors-slider,
[dir=rtl] .minicolors-opacity-slider {
    right: 152px;
}

.minicolors-slider-saturation .minicolors-slider {
    background-position: -60px 0;
}

.minicolors-slider-brightness .minicolors-slider {
    background-position: -20px 0;
}

.minicolors-slider-wheel .minicolors-slider {
    background-position: -20px 0;
}

.minicolors-opacity-slider {
    left               : 173px;
    /* LTR */
    background-position: -40px 0;
    display            : none;
}

[dir=rtl] .minicolors-opacity-slider {
    right: 173px;
}

.minicolors-with-opacity .minicolors-opacity-slider {
    display: block;
}

/* Pickers */
.minicolors-grid .minicolors-picker {
    position     : absolute;
    top          : 70px;
    left         : 70px;
    width        : 12px;
    height       : 12px;
    border       : solid 1px black;
    border-radius: 10px;
    margin-top   : -6px;
    margin-left  : -6px;
    background   : none;
}

.minicolors-grid .minicolors-picker>div {
    position     : absolute;
    top          : 0;
    left         : 0;
    width        : 8px;
    height       : 8px;
    border-radius: 8px;
    border       : solid 2px white;
    box-sizing   : content-box;
}

.minicolors-picker {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 18px;
    height    : 2px;
    background: white;
    border    : solid 1px black;
    margin-top: -2px;
    box-sizing: content-box;
}

/* Swatches */
.minicolors-swatches,
.minicolors-swatches li {
    margin    : 5px 0 3px 5px;
    /* LTR */
    padding   : 0;
    list-style: none;
    overflow  : hidden;
}

[dir=rtl] .minicolors-swatches,
[dir=rtl] .minicolors-swatches li {
    margin: 5px 5px 3px 0;
}

.minicolors-swatches .minicolors-swatch {
    position: relative;
    float   : left;
    /* LTR */
    cursor  : pointer;
    margin  : 0 4px 0 0;
    /* LTR */
}

[dir=rtl] .minicolors-swatches .minicolors-swatch {
    float : right;
    margin: 0 0 0 4px;
}

.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
    margin-right: 7px;
    /* LTR */
}

[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
    margin-right: 0;
    margin-left : 7px;
}

.minicolors-swatch.selected {
    border-color: #000;
}

/* Inline controls */
.minicolors-inline {
    display: inline-block;
}

.minicolors-inline .minicolors-input {
    display: none !important;
}

.minicolors-inline .minicolors-panel {
    position  : relative;
    top       : auto;
    left      : auto;
    /* LTR */
    box-shadow: none;
    z-index   : auto;
    display   : inline-block;
}

[dir=rtl] .minicolors-inline .minicolors-panel {
    right: auto;
}

/* Default theme */
.minicolors-theme-default .minicolors-swatch {
    top   : 5px;
    left  : 5px;
    /* LTR */
    width : 18px;
    height: 18px;
}

[dir=rtl] .minicolors-theme-default .minicolors-swatch {
    right: 5px;
}

.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
    margin-bottom: 2px;
    top          : 0;
    left         : 0;
    /* LTR */
    width        : 18px;
    height       : 18px;
}

[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
    right: 0;
}

.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
    left : auto;
    /* LTR */
    right: 5px;
    /* LTR */
}

[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
    right: auto;
    left : 5px;
}

.minicolors-theme-default.minicolors {
    width  : auto;
    display: inline-block;
}

.minicolors-theme-default .minicolors-input {
    height      : 20px;
    width       : auto;
    display     : inline-block;
    padding-left: 26px;
    /* LTR */
}

[dir=rtl] .minicolors-theme-default .minicolors-input {
    text-align   : right;
    unicode-bidi : plaintext;
    padding-left : 1px;
    padding-right: 26px;
}

.minicolors-theme-default.minicolors-position-right .minicolors-input {
    padding-right: 26px;
    /* LTR */
    padding-left : inherit;
    /* LTR */
}

[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
    padding-right: inherit;
    padding-left : 26px;
}

/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch {
    z-index      : 2;
    top          : 3px;
    left         : 3px;
    /* LTR */
    width        : 28px;
    height       : 28px;
    border-radius: 3px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
    right: 3px;
}

.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
    margin-bottom: 2px;
    top          : 0;
    left         : 0;
    /* LTR */
    width        : 20px;
    height       : 20px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
    right: 0;
}

.minicolors-theme-bootstrap .minicolors-swatch-color {
    border-radius: inherit;
}

.minicolors-theme-bootstrap.minicolors-position-right>.minicolors-swatch {
    left : auto;
    /* LTR */
    right: 3px;
    /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left>.minicolors-swatch {
    right: auto;
    left : 3px;
}

.minicolors-theme-bootstrap .minicolors-input {
    float       : none;
    padding-left: 44px;
    /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
    text-align   : right;
    unicode-bidi : plaintext;
    padding-left : 12px;
    padding-right: 44px;
}

.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
    padding-right: 44px;
    /* LTR */
    padding-left : 12px;
    /* LTR */
}

[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
    padding-right: 12px;
    padding-left : 44px;
}

.minicolors-theme-bootstrap .minicolors-input.input-lg+.minicolors-swatch {
    top          : 4px;
    left         : 4px;
    /* LTR */
    width        : 37px;
    height       : 37px;
    border-radius: 5px;
}

[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg+.minicolors-swatch {
    right: 4px;
}

.minicolors-theme-bootstrap .minicolors-input.input-sm+.minicolors-swatch {
    width : 24px;
    height: 24px;
}

.minicolors-theme-bootstrap .minicolors-input.input-xs+.minicolors-swatch {
    width : 18px;
    height: 18px;
}

.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
    border-top-left-radius   : 0;
    /* LTR */
    border-bottom-left-radius: 0;
    /* LTR */
}

[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
    border-radius: 4px;
}

[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
    border-top-right-radius   : 0;
    border-bottom-right-radius: 0;
}

[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
    border-top-left-radius   : 0;
    border-bottom-left-radius: 0;
}

/* bootstrap input-group rtl override */
[dir=rtl] .input-group .form-control,
[dir=rtl] .input-group-addon,
[dir=rtl] .input-group-btn>.btn,
[dir=rtl] .input-group-btn>.btn-group>.btn,
[dir=rtl] .input-group-btn>.dropdown-toggle {
    border       : 1px solid #ccc;
    border-radius: 4px;
}

[dir=rtl] .input-group .form-control:first-child,
[dir=rtl] .input-group-addon:first-child,
[dir=rtl] .input-group-btn:first-child>.btn,
[dir=rtl] .input-group-btn:first-child>.btn-group>.btn,
[dir=rtl] .input-group-btn:first-child>.dropdown-toggle,
[dir=rtl] .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),
[dir=rtl] .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-top-left-radius   : 0;
    border-bottom-left-radius: 0;
    border-left              : 0;
}

[dir=rtl] .input-group .form-control:last-child,
[dir=rtl] .input-group-addon:last-child,
[dir=rtl] .input-group-btn:last-child>.btn,
[dir=rtl] .input-group-btn:last-child>.btn-group>.btn,
[dir=rtl] .input-group-btn:last-child>.dropdown-toggle,
[dir=rtl] .input-group-btn:first-child>.btn:not(:first-child),
[dir=rtl] .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-top-right-radius   : 0;
    border-bottom-right-radius: 0;
}

/* Semantic Ui theme */
.minicolors-theme-semanticui .minicolors-swatch {
    top    : 0;
    left   : 0;
    /* LTR */
    padding: 18px;
}

[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
    right: 0;
}

.minicolors-theme-semanticui input {
    text-indent: 30px;
}

/*====================04-06-20=======================*/

.socialBtnarea {
    display       : flex;
    padding-bottom: 20px;
}

.socialBtnarea .social-btn.facebook-login {
    width: 50%;
}

.socialBtnarea .social-btn.google-login {
    width       : 50%;
    padding-left: 20px;
}

.socialBtnarea .social-btn .btn-social {
    border-radius: 0px;
    padding      : 8px 12px 6px 44px;
    font-size    : 14px;
}

.or-dividiver {
    clear        : both;
    margin-top   : 20px;
    margin-bottom: 35px;
    border-top   : 2px dashed #ececec;
    line-height  : 0;
    text-align   : center;
    position     : relative;
    min-height   : 1px;
}

.or-dividiver span {
    border-radius: 50%;
    border       : 1px solid #dedede;
    padding      : 12px 11px;
    font-size    : 14px;
    background   : #fff;
    color        : #8a8a8a;
}

button#customer-login-popup {
    margin: 0;
}

div#tab-reset-password-popup {
    padding-top: 8px;
}

.recentBGImage {
    display  : flex;
    flex-wrap: wrap;
}

.recentBGImage span img {
    width : 50px;
    height: 50px;
    margin: 3px;
    border: 1px solid #bdbdbd;
    cursor: pointer;
}

.remove-bg {
    margin   : 10px 0;
    font-size: 14px;
    color    : #333 !important;
}

.remove-bg a {
    color: #333;
}

.modal-popup.modal-popup__canvas_close .modal-footer::before {
    width: 90%;
}

.modal-popup.modal-popup__canvas_strat_over .modal-footer::before {
    width: 90%;
}

.modal-popup.modal-popup__canvas_clear .modal-footer::before {
    width: 90%;
}

.detailed .product.data.items>.item.title>.switch {
    padding: 5px 35px;
}

#form-forgot-pwd-validate .fieldset:after {
    margin-top: 0;
    font-size: 14px;
    text-align: left;
}

.fieldset.login .message.error{
    font-size: 15px!important;
}

.message.error > *:first-child:before{
    font-size: 18px!important;
}