body {
    padding          : 0px;
    margin           : 0px;
    background-color : #F3F4F6;
    font-family      : 'Open Sans', sans-serif;
    padding          : 0px;
    overflow         : hidden;
}

.container {
    width   : 100%;
    height  : 100%;
    display : block;
    padding : 70px 0 0 0;
    margin  : 0 auto;
}

#mainContent {
    width   : 100%;
    height  : 100%;
    display : block;
    margin  : 0 auto;
    padding : 0;
    position: relative;
}

#mainContent #subcontent {
    padding-left : 60px;
    height       : 100%;
    transition   : padding 200ms ease;
    z-index      : 10;
}

body.expand #mainContent #subcontent {
    padding-left : 200px;
}


#mainContent #subcontent #edit_tab {
    position : relative;
}

#mainContent #subcontent .tab_pane {
    display : none;
    height  : 100%;
    width   : 100%;
}

#mainContent #subcontent .tab_pane.active {
    display : block;
}

#canvasArea {
    width    : 90%;
    height   : 90%;
    position : relative;
    overflow : auto;
    left     : 5%;
    top      : 5%;
}

#mainContent #subcontent .tab_pane {
    float : left;
}

/*loading animation*/
#loading-mask {
    position   : relative;
    text-align : center;
    z-index    : 99999;
    width      : 100%;
    height     : 100%;
    background : rgba(240, 240, 240, 0.58) !important;
    position   : fixed;
    top        : 0;
    display    : none;
}

#loading-mask .loader {
    position    : fixed;
    top         : 41%;
    left        : 50%;
    width       : 300px;
    margin-left : -150px;
    padding     : 10px;
}

#loading-mask .loader > span {
    width       : 100%;
    line-height : 30px;
    margin      : 0 auto 10px;
    font-size   : 17px;
    font-weight : 300;
    display     : block;
    color       : #384347;
}

.animation-container {
    display  : block;
    height   : 63px;
    position : relative;
    width    : 100%;
}

.loader-animation {
    position    : relative;
    background  : none;
    width       : 60px;
    height      : 60px;
    left        : 50%;
    margin-left : -30px;
    top         : 0;
}

@-webkit-keyframes printq-loader-anim {
    0% {
        opacity : 1
    }
    100% {
        opacity : 0
    }
}

@keyframes printq-loader-anim {
    0% {
        opacity : 1
    }
    100% {
        opacity : 0
    }
}

.loader-animation > div {
    -webkit-animation : printq-loader-anim 1s linear infinite;
    animation         : printq-loader-anim 1s linear infinite;
    top               : 25px;
    left              : 28px;
    width             : 3px;
    height            : 7px;

    background        : #2040AA;
    position          : absolute;
    border-radius     : 0;
}

.loader-animation > div:nth-of-type(1) {
    -webkit-animation-delay : -0.5s;
    animation-delay         : -0.5s;
    -webkit-transform       : rotate(0deg) translate(0, -25px);
    transform               : rotate(0deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(2) {
    -webkit-animation-delay : -0.4583333333333333s;
    animation-delay         : -0.4583333333333333s;
    -webkit-transform       : rotate(15deg) translate(0, -25px);
    transform               : rotate(15deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(3) {
    -webkit-animation-delay : -0.4166666666666667s;
    animation-delay         : -0.4166666666666667s;
    -webkit-transform       : rotate(30deg) translate(0, -25px);
    transform               : rotate(30deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(4) {
    -webkit-animation-delay : -0.375s;
    animation-delay         : -0.375s;
    -webkit-transform       : rotate(45deg) translate(0, -25px);
    transform               : rotate(45deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(5) {
    -webkit-animation-delay : -0.33333333333333337s;
    animation-delay         : -0.33333333333333337s;
    -webkit-transform       : rotate(60deg) translate(0, -25px);
    transform               : rotate(60deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(6) {
    -webkit-animation-delay : -0.29166666666666663s;
    animation-delay         : -0.29166666666666663s;
    -webkit-transform       : rotate(75deg) translate(0, -25px);
    transform               : rotate(75deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(7) {
    -webkit-animation-delay : -0.25s;
    animation-delay         : -0.25s;
    -webkit-transform       : rotate(90deg) translate(0, -25px);
    transform               : rotate(90deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(8) {
    -webkit-animation-delay : -0.20833333333333331s;
    animation-delay         : -0.20833333333333331s;
    -webkit-transform       : rotate(105deg) translate(0, -25px);
    transform               : rotate(105deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(9) {
    -webkit-animation-delay : -0.16666666666666669s;
    animation-delay         : -0.16666666666666669s;
    -webkit-transform       : rotate(120deg) translate(0, -25px);
    transform               : rotate(120deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(10) {
    -webkit-animation-delay : -0.125s;
    animation-delay         : -0.125s;
    -webkit-transform       : rotate(135deg) translate(0, -25px);
    transform               : rotate(135deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(11) {
    -webkit-animation-delay : -0.08333333333333331s;
    animation-delay         : -0.08333333333333331s;
    -webkit-transform       : rotate(150deg) translate(0, -25px);
    transform               : rotate(150deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(12) {
    -webkit-animation-delay : -0.041666666666666685s;
    animation-delay         : -0.041666666666666685s;
    -webkit-transform       : rotate(165deg) translate(0, -25px);
    transform               : rotate(165deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(13) {
    -webkit-animation-delay : 0s;
    animation-delay         : 0s;
    -webkit-transform       : rotate(180deg) translate(0, -25px);
    transform               : rotate(180deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(14) {
    -webkit-animation-delay : 0.04166666666666663s;
    animation-delay         : 0.04166666666666663s;
    -webkit-transform       : rotate(195deg) translate(0, -25px);
    transform               : rotate(195deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(15) {
    -webkit-animation-delay : 0.08333333333333337s;
    animation-delay         : 0.08333333333333337s;
    -webkit-transform       : rotate(210deg) translate(0, -25px);
    transform               : rotate(210deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(16) {
    -webkit-animation-delay : 0.125s;
    animation-delay         : 0.125s;
    -webkit-transform       : rotate(225deg) translate(0, -25px);
    transform               : rotate(225deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(17) {
    -webkit-animation-delay : 0.16666666666666663s;
    animation-delay         : 0.16666666666666663s;
    -webkit-transform       : rotate(240deg) translate(0, -25px);
    transform               : rotate(240deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(18) {
    -webkit-animation-delay : 0.20833333333333337s;
    animation-delay         : 0.20833333333333337s;
    -webkit-transform       : rotate(255deg) translate(0, -25px);
    transform               : rotate(255deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(19) {
    -webkit-animation-delay : 0.25s;
    animation-delay         : 0.25s;
    -webkit-transform       : rotate(270deg) translate(0, -25px);
    transform               : rotate(270deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(20) {
    -webkit-animation-delay : 0.29166666666666663s;
    animation-delay         : 0.29166666666666663s;
    -webkit-transform       : rotate(285deg) translate(0, -25px);
    transform               : rotate(285deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(21) {
    -webkit-animation-delay : 0.33333333333333337s;
    animation-delay         : 0.33333333333333337s;
    -webkit-transform       : rotate(300deg) translate(0, -25px);
    transform               : rotate(300deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(22) {
    -webkit-animation-delay : 0.375s;
    animation-delay         : 0.375s;
    -webkit-transform       : rotate(315deg) translate(0, -25px);
    transform               : rotate(315deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(23) {
    -webkit-animation-delay : 0.41666666666666663s;
    animation-delay         : 0.41666666666666663s;
    -webkit-transform       : rotate(330deg) translate(0, -25px);
    transform               : rotate(330deg) translate(0, -25px);
}

.loader-animation > div:nth-of-type(24) {
    -webkit-animation-delay : 0.45833333333333337s;
    animation-delay         : 0.45833333333333337s;
    -webkit-transform       : rotate(345deg) translate(0, -25px);
    transform               : rotate(345deg) translate(0, -25px);
}

/*end loading animation */
.pace .pace_image_loading .pace_image_logo {
    background-image    : url('../images/printq.png');
    background-size     : contain;
    background-position : center;
    background-repeat   : no-repeat;
    width               : 400px;
    height              : 300px;
    margin              : 0 auto;
}

body.admin_edit #paginationContainer_Edit_Preview {
    display : none;
}

#mainContent #subcontent #preview_page svg {
    margin  : auto;
    display : block;
    height  : 100%;
}

#mainContent #subcontent #preview_page.preview_svg_live {
    display      : inline-block;
    position     : initial;
    left         : 50%;
    top          : 50%;
    transition   : opacity 200ms ease;
    z-index      : 0;
    padding-left : 0px;
    width        : 100%;
}
#LogoBuilderApp{
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}