@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);

html,
    body {
        /*height: 100%;*/
        min-height: 100vh;
        font-family: 'Roboto Condensed', sans-serif;
        /*background-color: #e8e8e8;*/
        font-size: 18px;
        /*transform: scale(1.2);*/
        /*overflow: hidden;*/
        /*overflow-y: auto;*/
    }

    .instruction-change-pass ul {
        /*margin-bottom: 15px;*/
        list-style-type: disc;
        color: #ed2524;
        list-style-position: inside;
    }
    .instruction-change-pass ul{
        float: left;
    }
    /*
    .instruction-change-pass ul:last-child {
        float: left;
    }
    */
    .instruction-change-pass ul li span {
        color: initial;
    }

    /*@media screen and (min-width: 1600px) {*/
    /* Begin Navbar */
    .navbar {
        margin-bottom: 0;
        /*opacity: 0.8;*/
        z-index: 100;
    }

    .navbar-nav {
        float: none;
        display: inline-block;
        margin: 0 auto;
    }

    .navbar-collapse {
        position: relative;
        /*width: calc(100% - 160px);*/
        float: right;
    }

    .navbar-inverse .navbar-nav>li>a {
        color: #fff;
        font-size: 16px;
    }

    .navbar-inverse .navbar-nav>li>a:hover {
        border-bottom: 2px solid #fff;
    }

    .navbar-inverse .navbar-nav>li>a.logined-status:hover {
        border-bottom: none;
    }

    .navbar-nav .dropdown-menu {
        background-color: #ed2524;
    }

    .dropdown-menu>li>a {
        padding: 0;
    }

    .dropdown-menu-user {
        right: 0;
        left: auto;
    }

    /*.dropdown-menu>li>a:hover {
        margin-left: 10px;
    }*/

    .navbar-nav .dropdown li a {
        color: #fff;
        font-size: 13px;
    }

    .navbar-nav .dropdown li a:hover {
        background-color: #ed2524;
    }

    .navbar-nav .dropdown a.logined-status[aria-expanded="true"] {
        background-color: #ed2524;
    }

    ul.navbar-nav li {
        /*font-size: 16px;*/
        text-transform: uppercase;
    }

    ul.navbar-nav li a {
        /*padding: 23px 30px;*/
        margin: 23px 20px 17px;
    }

    ul.navbar-nav li a.logined-status {
        margin-right: 0;
    }

    ul.navbar-nav li a#button-login {
        border: 1px solid #fff;
        padding-top: 3px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 19px 10px;
    }

    ul.navbar-nav li a#button-signup{
        border: 1px solid #fff;
        padding-top: 3px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        margin: 19px 10px;
        color: red;
        background: #fff;
    }

    .navbar-nav>li>a {
        padding: 0;
    }

    .navbar .fa:before {
        margin-right: 5px;
    }

    .navbar {
        background-color: #ed2524;
        border: none;
        /*position: relative;*/
        position: fixed;
        margin-bottom: 0;
        height: 72px;
    }

    .navbar-fixed-top .navbar-brand {
        padding: 0;
        margin-bottom: 10px;
    }

    .navbar>.container .navbar-brand, .navbar>.container-fluid a.logo-link {
        margin-left: 0;
        height: 100%;
    }

    /*.navbar>.container .navbar-brand, .navbar>.container-fluid a.logo-link img {
        width: 150px;
        height: 28px;
        margin-top: 12px;
    }*/
    .navbar-user #bs-example-navbar-collapse-1 .dropdown ul {
        padding: 0;
    }

    .navbar-user #bs-example-navbar-collapse-1 .dropdown ul li a {
        margin: 0;
        padding: 12px 20px 11px 17px;
    }

    .navbar-user #bs-example-navbar-collapse-1 .dropdown ul li:last-child a {
        padding-bottom: 17px;
    }

    .navbar-user #bs-example-navbar-collapse-1 .dropdown ul li a:hover {
        padding-left: 30px;
        padding-right: 7px;
        background-color: #4A4E4D;
        /*border-left: 5px solid #fff;*/
    }

    .navbar-fixed-top a.navbar-brand {
        color: #fff;
    }

    .navbar-fixed-top a.logo-link img {
        width: 250px;
        height: 45px;
        margin-top: 12px;
    }

    .navbar-inverse .navbar-collapse {
        /*border-color: #ed2224;*/
        border:none;
        margin-top: 5px;
    }

    button.navbar-toggle {
        border: none;
    }

    .report-change-pass-success {
        display: none;
        background-color: #4CAF50;
        padding: 0.5em 0.8em;
        margin-bottom: 1em;
        border-radius: 4px;
        font-size: 1.5em;
        color: #fff;
    }
    /*.navbar-fixed-top a.navbar-brand:hover {
        background-color: #333;
    }*/
    /* End Navbar */

    /* Start Content */
    #content {
        /*padding-top: 30px;*/
        padding-top: 102px;
        padding-bottom: 30px;
    }

    .navbar .container {
        /*padding-right: 0;*/
    }

    #content .main-content {
        background-color: #fff;
        /*padding: 30px 30px 40px 30px;*/
        border-radius: 5px;
    }

    /* start browse book page */

    .browse-book-header {
        font-weight: 700;
        font-size: 1.3em;
    }

    #home .thumbnail p {
        text-align: center;
        font-weight: 700;
        margin: 0;
        padding: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #menu1 .thumbnail p {
        text-align: center;
        font-weight: 700;
        margin: 0;
        padding: 5px;
    }

    .browse-book-content {
        padding: 0;
        position: relative;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    .browse-book-content .browse-book-header {
        padding: 8px 30px;
        border-bottom: 1px solid #ddd;
    }

    .browse-book-content .browse-book-body {
        padding: 30px;
    }

    .browse-book-content .browse-book-body .note-left{
        top: -90px;
    }

    .browse-book-body .tab-content .row {
        /*margin: 0;*/
    }

    .browse-book-body .tab-content .tab-pane {
        padding-top: 20px;
    }

    .browse-book-body #home .thumbnail {
        padding: 0;
        border-radius: 0;
        min-height: 310.833px;
    }

    /*.browse-book-body #home .thumbnail img {
        height: 10em;
    }*/

    .browse-book-body #menu1 .thumbnail {
        padding: 0;
        border-radius: 0;
        width: 100%;
    }

    .browse-book-body #menu1 .thumbnail img {
        width: 100%;
    }

/* #note1  {
    display: block;
    padding:25px 25px 40px;
    margin:0 auto 20px auto;
    width:220px;
    height:220px;
    font:20px 'Gloria Hallelujah', cursive;
    line-height:1.5;
    border:0;
    border-radius:3px;
    background: -webkit-linear-gradient(#F9EFAF, #F7E98D);
    background: -moz-linear-gradient(#F9EFAF, #F7E98D);
    background: -o-linear-gradient(#F9EFAF, #F7E98D);
    background: -ms-linear-gradient(#F9EFAF, #F7E98D);
    background: linear-gradient(#F9EFAF, #F7E98D);
    box-shadow: 0 5px 8px rgba(0,0,0,0.1);
    overflow:hidden;
    transition:box-shadow 0.5s ease;
    font-smoothing:subpixel-antialiased;
    resize: none;

    position: absolute;
    bottom: 0px;
    right: 0;
    z-index: 1;
}

p#note1 {
    margin: 0;
}

p#note1 i.fa {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
} */

    .main-content .breadcrumb {
        background-color: #e8e8e8;
    }

    .main-content .breadcrumb li {
        font-size: 2em;
    }

    .main-content .breadcrumb li a {
        /*font-size: 2.5em;*/
    }

    .browse-book-body #home .thumbnail {
        width: 100%;
    }

    .browse-book-body #home .thumbnail img {
        min-height: 335.52px;
        width: 100%;
    }

    @media screen and (max-width: 414px) {
        .browse-book-body #home .thumbnail img {
            min-height: 199.52px;
        }

        .browse-book-body #home .thumbnail {
            min-height: 226.833px;
            font-size: 12px;
        }
    }

    #report-public-book-success {
        display: none;
        position: fixed;
        /*top: 72px;*/
        top: 0;
        width: 100%;
        background-color: #4CAF50;
        padding: 0.5em 0.8em;
        margin-bottom: 1em;
        border-radius: 4px;
        font-size: 1.5em;
        color: #fff;
        border-radius: 0;
        z-index: 99;
    }

    #report-share-book-success {
        display: none;
        background-color: #4CAF50;
        padding: 0.5em 0.8em;
        margin-bottom: 1em;
        border-radius: 4px;
        font-size: 1.5em;
        color: #fff;
    }

    .submit-share-email {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .submit-share-email:hover {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    /* end browse book page */

    /* Start public book page */
        .book-public-shotInfo {
            /* padding: 5px 0 0 10px; */
        }
    /* End public book page */

    /* Start Login Page */
    .sticky-note {
        display: none;
        /*top: 0;*/
        position: absolute;
        text-decoration:none;
        color:#000;
        background:#e0e0e0;
        min-height:12em;
        width:17em;
        padding-bottom: 2em;
        /*padding:1em;*/
        /*overflow: hidden;*/
        border-radius: 5px;
        z-index: 999999;
        text-align: center;
        -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
        -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
        box-shadow: 5px 5px 7px rgba(33,33,33,.7);

        /* background: #fefdca; Old browsers
            background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); FF3.6+
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); Chrome,Safari4+
            background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); Chrome10+,Safari5.1+
            background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); Opera11.10+
            background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); IE10+
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 ); IE6-9
            background: linear-gradient(top, #fefdca 0%,#f7f381 100%); W3C; A catch-all for everything else */
    }

    p.text {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 12px;
        font-size: 1.5em;
    }

    .sticky-note-header {
        background-color: #ed2224;
        text-align: center;
        color: #fff;
        padding: 0.3em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 1.5em;
    }

    .sticky-note>i {
        position: absolute;
        top: 123px;
        left: 56px;
        color: #ed2524;
    }

    .sticky-note>a.next-show {
        position: absolute;
        bottom: 5px;
        right: 5px;
        color: #000;
        background-color: #ccc;
        border: none;
        text-transform: capitalize;
    }

    .sticky-note>a.never-show {
        position: absolute;
        bottom: 5px;
        left: 5px;
        color: #000;
        background-color: #ccc;
        border: none;
        text-transform: capitalize;
    }

    .note-right {
        right: 0;
    }

    .note-left {
        left: 0;
        top: 0;
    }

    .note-left>i {
        position: absolute;
        top: 196px;
        color: #ed2524;
    }

    .note-right-profile {
        right: 3em;
        top: 25.6em;
    }

    .note-right-profile > i {
        position: absolute;
        top: 179px;
        right: -67px;
        color: #ed2524;
    }

    .hidden {
        display: none !important;
    }

    .browse-sticky {
        /*width: 160px;
        height: 160px;*/
        display: inline-block;
        font-size: 14px !important;
    }

    /* .note-right-profile>i {
        position: absolute;
        top: 1.2em;
        left: 3.3em;
        color: #ed2524;
    } */

    .note-right-login {
        position: absolute;
        top: 110px;
        right: 0;
    }

    .note-right-login>i {
        position: absolute;
        top: -28px;
        color: #ed2524;
    }

    .note-right-sign-up {
        position: absolute;
        top: 34px;
        right: 14px;
    }

    .note-editor-rearrange {
        top: 50px;
        left: -100px;
        font-size: 14px;
    }

    .note-editor-rearrange a {
        font-size: 14px!important;
        color: #000!important;
    }

    .note-editor-rearrange >i {
        top: -28px;
        left: 45%;
    }

    .note-editor-tabs {
        top: 290px;
        left: 95px;
    }

    .note-editor-tabs > i {
        top: 0px;
        left: -12px;
        color: #ed2524;
    }

    .note-editor-layout {
        top: 126px;
        left: 269px;
    }

    .note-editor-layout > i {
        top: 4px;
        left: -12px;
    }

    .note-editor-photo {
        top: 89px;
        left: 134px;
    }

    .note-editor-photo > i {
        top: 4px;
        left: -12px;
    }

    .note-editor-dragdrop {
        top: 120px;
        left: 269px;
    }

    .note-editor-dragdrop > i {
        top: 9px;
        left: -13px;
        color: #ed2524;
    }

    .note-editor-background {
        top: 126px;
        left: 290px;
    }

    .note-editor-background > i {
        top: 0;
        left: -13px;
        color: #ed2524;
    }

    .note-editor-assets {
        top: 90px;
        left: 273px;
    }

    .note-editor-assets > i {
        top: 0;
        left: -13px;
        color: #ed2524;
    }

    .note-editor-title {
        top: 40px;
        left: 41%;
    }

    .note-editor-title>i {
        top: -28px;
        left: 44%;
    }

    .note-editor-change-text {
        top: 50px;
        right: 0;
    }

    .note-editor-change-text>i {
        top: 0px;
        left: -13px;
        color: #ed2524;
    }

    /*.note-editor-dragdrop {
        top: 13em;
        left: 19em;
    }

    .note-editor-dragdrop>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }*/

    .note-left-editor-layout {
        top: 5em;
        left: 5em;
    }

    .note-left-editor-layout>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-left-editor-background {
        top: 9em;
        left: 5em;
    }

    .note-left-editor-background>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-left-editor-photo {
        top: 15em;
        left: 5em;
    }

    .note-left-editor-photo>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-left-editor-text {
        top: 20em;
        left: 5em;
    }

    .note-left-editor-text>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-left-editor-asset {
        top: 25em;
        left: 5em;
    }

    .note-left-editor-asset>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-left-editor-review {
        top: 30em;
        left: 5em;
    }

    .note-left-editor-review>i {
        top: 40px;
        left: -12px;
        color: #ed2524;
    }

    .note-right-editor-add-page {
        top: 23em;
        right: 0;
    }

    .note-right-editor-add-page>i {
        top: 46px;
        right: -97px;
        color: #ed2524;
    }

    .note-right-editor-delete-page {
        top: 27em;
        right: 0;
    }

    .note-right-editor-delete-page>i {
        top: 48px;
        right: -97px;
        color: #ed2524;
    }

    .note-left-help {
        top: 8em;
        left: 3em;
    }

    .note-left-help>i {
        top: 3px;
        left: -13px;
        color: #ed2524;
    }

    .note-back-step {
        bottom: 6em;
        /*left: 22.8em;*/
    }

    .note-back-step > i {
        position: absolute;
        top: 212px;
        left: 145px;
        color: #ed2524;
    }

    .sticky-left-panel {
        display: none;
        position: absolute;
        left: 5.4em;
        z-index: 99;
        width: 17em;
        min-height: 12em;
        border-radius: 5px;
        text-align: center;
        background-color: #e0e0e0;
    }

    .sticky-left-panel .sticky-header {
        background-color: #ed2224;
        text-align: center;
        color: #fff;
        padding: 0.3em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 1.5em;
    }

    .sticky-left-panel .sticky-body {
        font-size: 1.5em;
        padding: 15px;
    }

    .sticky-left-panel>i {
        position: absolute;
        top: 5px;
        left: -13px;
        color: #ed2524;
    }

    .sticky-note-add-page {
        display: none;
        position: absolute;
        right: 50px;
        top: 35px;
        z-index: 99;
        width: 231px;
        min-height: 200px;
        border-radius: 5px;
        text-align: center;
        background-color: #e0e0e0;
        font-size: 14px;
    }

    .header-add-page {
        background-color: #ed2224;
        text-align: center;
        color: #fff;
        padding: 0.3em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 1.5em;
    }

    .body-add-page {
        font-size: 1.5em;
        padding: 15px;
    }

    .sticky-note-add-page>i {
        position: absolute;
        top: 3px;
        right: -13px;
        color: #ed2524;
    }

    .sticky-note-remove-page {
        display: none;
        position: absolute;
        right: 50px;
        top: 71px;
        z-index: 99;
        width: 231px;
        min-height: 200px;
        border-radius: 5px;
        text-align: center;
        background-color: #e0e0e0;
        font-size: 14px;
    }

    .header-remove-page {
        background-color: #ed2224;
        text-align: center;
        color: #fff;
        padding: 0.3em;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 1.5em;
    }

    .body-remove-page {
        font-size: 1.5em;
        padding: 15px;
    }

    .sticky-note-remove-page>i {
        position: absolute;
        top: 8px;
        right: -13px;
        color: #ed2524;
    }
    /*#sticky-note-1 {
        right: 0;
    }

    #sticky-note-1 p {
        position: absolute;
        top: 0;
        right: 0.4em;
        cursor: pointer;
    }

    #sticky-note-1 i {
        position: absolute;
        top: -30px;
        left: 56px;
        color: #ed2524;
    }

    #sticky-note-2 i {
        position: absolute;
        top: -30px;
        left: 56px;
        color: #ed2524;
    }

    #sticky-note-2 p {
        position: absolute;
        top: 0;
        right: 0.4em;
        cursor: pointer;
    }*/

    .video-login {
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
    }

    .video-login iframe {
        width: 100%;
    }

    .video-login .title-video-login {
        padding: 7px 0 11px 12px;
    }

    .login-page {
        border: 1px solid #ddd;
        background-color: #fff;
        border-radius: 5px;
    }

    .login-page h4 {
        text-align: center;
        border-bottom: 2px solid #e8e8e8;
        padding: 10px 0;
        margin: 0;
    }

    .login-page #form-login {
        padding: 30px;
    }

    .login-page #form-login .checkbox {
        float: left;
        /*padding-left: 0;*/
        color: #818181;
    }

    .login-page #form-login a.link-forgot-password {
        /*float: right;*/
        padding: 10px 0;
        color: #818181;
    }

    .login-page #form-login a.form-control {
        background-color: #e8e8e8;
        border-color: #e8e8e8;
        color: #686868;
        box-shadow: none;
    }

    .login-page #form-login a.form-control:active {
        box-shadow: none;
    }
    /* End Login Page */

    /* Start Term of Service page */

    #content .static-page h2 {
        /*border-bottom: 1px solid #ddd;*/
        padding-top: 30px;
        padding-bottom: 3px;
        margin-bottom: 1em;
        /*border-bottom: 2px solid #ddd;*/
        /*color: #eeeeee;;*/
    }

    #content .term-of-service h4 {
        font-weight: bolder;
    }

    #content .about-us div:first-child {
        padding-left: 0
    }

    #content .about-us div:last-child {
        padding-right: 0;
        padding-top: 50px;
    }

    #content .contact-us div.col-md-6:last-child {
        padding-top: 57px;
    }

    #content .contact-us div:first-child {
        padding-left: 0
    }

    #content .contact-us div:last-child {
        padding-right: 0;
    }

    /* End Term of Service page */

    /* Start Help page */

    .help {
        position: relative;
    }

    .help #accordion .panel {
        border: none;
    }

    .help #accordion .panel-heading {
        background-color: #fff;
        padding-left: 0;
    }

    .help #accordion .panel-heading h4 a {
        color: #4d4d4d;
        text-decoration: none;
    }

    .help #accordion .panel-heading h4 a i {
        color: #ed2524;
        margin-right: 5px;
    }

    .help #accordion .panel-body {
        border: none;
        padding-left: 0;
    }

    /* End Help page */

    /* Begin Introduction page*/
        .introduce-button {
            position: relative;
        }

        .note-introduce {
            bottom: 8.68em;
            left: 16em;
            width: 32em;
        }

        .note-introduce > i {
            left: 5em;
            top: 6.89em;
        }
    /* End Introduction page*/

    /* Begin Profile User page */

    .user-info {
        /*height: calc(100% - 76px);*/
    }

    .user-info .col-md-4 {
        /*height: 100%;*/
    }

    .user-info .col-md-4 .show-basic-info {
        border: 1px solid #aaa;
        border-radius: 4px;
        /*height: 100%;*/
    }

    @media screen and (max-width: 767px) {
        .user-info .col-md-4 .show-basic-info h1{
            font-size: 33px;
        }

        .user-info .col-md-4 .show-basic-info p {
            font-size: 16px;
        }
    }

    .user-info .col-md-4 .show-basic-info div {
        background-position: center;
        background-size: cover;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-left: 25%;
        margin-top: 10%;
    }

    .user-info .col-md-4 .show-basic-info div img {
        width: 130px;
        height: 130px;
        border-radius: 50%;
    }

    .user-info .col-md-4 .show-basic-info h4 {
        margin: 0;
        padding-left: 15px;
        padding-bottom: 6px;
        padding-top: 6px;
        border-bottom: 1px solid #aaa;
        font-weight: 700;
    }

    .user-info .col-md-8 {
        /*height: 100%;*/
    }

    .user-info .col-md-8 .show-detail-info {
        border: 1px solid #aaa;
        border-radius: 4px;
        /*height: 100%;*/
    }

    .user-info .col-md-8 .show-detail-info h4 {
        margin: 0;
        padding-left: 15px;
        padding-bottom: 6px;
        padding-top: 6px;
        border-bottom: 1px solid #aaa;
        font-weight: 700;
    }

    .user-info .col-md-8 .show-detail-info .user-info-detail {
        padding: 20px;
        /*height: 100%;*/
        /*overflow: scroll;*/
    }

    .user-info .col-md-8 .show-detail-info .user-info-detail #sticky-note-1 {
        right: 2em;
    }

    .user-info .col-md-8 .show-detail-info .user-info-detail .form-group {
        overflow: hidden;
    }
    .user-info .col-md-8 .show-detail-info .user-info-detail .form-group .col-md-10 .form-control {
        border: none;
        box-shadow: none;
    }

    .user-info .col-md-8 .show-detail-info .user-info-detail .form-group label {
        padding-top: 7px;
        padding-left: 0;
    }

    .user-info .col-md-8 .show-detail-info .user-info-detail .form-group #button-edit-user-info {
        background-color: #ed2524;
        border-color: #ed2524;
        float: right;
        margin-right: 15px;
    }

    /*.user-profile #form-updateProfile .col-md-4 {
        border: 1px solid #ddd;
        padding: 0;
    }

    .user-profile #form-updateProfile .col-md-4 h4 {
        padding: 0.5em 1em 0.5em 1em;
        margin: 0;
        border-bottom: 1px solid #ddd;
    }

    .user-profile #form-updateProfile .col-md-4 .basic-info {
        text-align: center;
        padding-top: 2em;
        padding-bottom: 2em;
    }*/

    .user-profile #form-updateProfile {
        /*height: calc(100% - 76px);*/
    }

    .user-profile #form-updateProfile .row {
        /*height: 100%;*/
    }

    .user-profile #form-updateProfile .row .col-md-4 {
        /*height: 100%;*/
    }

    .user-profile #form-updateProfile .row .col-md-8 {
        /*height: 100%;*/
    }

    .user-profile #form-updateProfile .basic-info {
        /*height: 100%;*/
        border: 1px solid #aaa;
        text-align: center;
        border-radius: 4px;
    }

    .user-profile #form-updateProfile .basic-info h4 {
        border-bottom: 1px solid #aaa;
        margin: 0;
        padding: 6px 15px;
        text-align: left;
        font-weight: 700;
    }

    .user-profile #form-updateProfile .basic-info div {
        background-position: center;
        background-size: cover;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-left: 25%;
        margin-top: 10%;
    }

    .user-profile #form-updateProfile .basic-info div img {
        width: 130px;
        height: 130px;
        border-radius: 50%;
    }

    .user-profile #form-updateProfile .detail-info {
        /*height: 100%;*/
        border: 1px solid #aaa;
        border-radius: 4px;
        /*overflow: scroll;*/
    }

    .user-profile #form-updateProfile .detail-info h4 {
        border-bottom: 1px solid #aaa;
        margin: 0;
        padding: 6px 15px;
        text-align: left;
        font-weight: 700;
    }

    .user-profile #form-updateProfile .detail-info .form-detail-info {
        padding: 20px;
    }

    .user-profile #form-updateProfile .detail-info .form-detail-info .control-label {
        text-align: left;
    }

    .user-profile #form-updateProfile button[type="submit"] {
        background-color: #ed2524;
        border-color: #ed2524;
        outline: none;
        float: right;
    }

    .user-profile #form-updateProfile button[type="submit"]:hover {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .user-profile #form-updateProfile button[type="submit"]:active {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    #report-update-profile-success {
        display: none;
        position: fixed;
        top: 72px;
        background-color: #4CAF50;
        padding: 0.5em 0.8em;
        text-align: center;
        /*margin-bottom: 1em;*/
        /*border-radius: 4px;*/
        font-size: 1.5em;
        color: #fff;
        z-index: 1;
        width: 100%;
    }

    #btn-update-avatar {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    /* End Profile User page */

    /* End Content */

    /* Begin Header */
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: #ed2524;
    }

    #index-carousel .item,
    #index-carousel .active {
        height: 100%;
    }

    .active-menu {
        border-bottom: 2px solid #fff;
    }

    #index-carousel .carousel-inner {
        height: 100%;
    }

    #index-carousel .fill {
        width: 100%;
        /*height: calc(100% - 102px);*/
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    #index-carousel .carousel-caption {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #4d4d4d;
        text-shadow: none;
        bottom: initial;
    }

    #index-carousel .carousel-caption h1 {
        margin: 0;
    }

    #index-carousel .carousel-caption p {
        font-size: 20px;
        padding-top: 30px;
        margin: 0px;
    }


    /* .carousel-caption {
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
    }
    */
    #index-carousel .carousel-indicators {
        bottom: 15%;
    }

    #index-carousel .carousel-caption h1 {
        color: #ed2524;
    }

    @media screen and (max-width: 959px) {
        #index-carousel .carousel-caption h1 {
            font-size: 26px;
        }

        #index-carousel .carousel-caption p {
            font-size: 16px;
            padding-top: 19px;
        }

        .carousel-caption .btn {
            padding: 8px 16px;
        }
    }
    #index-carousel .carousel-caption p a.btn-primary {
        background-color: #ed2524;
        border-color: #ed2524;
        border-radius: 0;
    }

    #index-carousel a.left i {
        position: absolute;
        top: 47%;
        left: 10%;
    }

    #index-carousel a.right i {
        position: absolute;
        top: 47%;
        right: 10%;
    }
    /* End Header */

    /*.navbar-nav {
        float: none;
        display: inline-block;
        margin: 0 auto;
    }*/

    /* Begin Footer */
    #footer {

        position: fixed;
        bottom: 0;

        background-color: #333;
        width: 100%;
        float: left;
        box-sizing: border-box;
        /*opacity: 0.8;*/
        z-index: 100;
    }

    #footer div p, #footer div a {
        line-height: 30px;
        margin: 0px 0px 0px 0px;
        color: #fff;
        font-size: 14px;
    }

    .align-right {
        text-align: right !important;
    }

    .align-left {
        text-align: left !important;
    }
    .align-center {
        text-align: center !important;
    }


    #footer a {
        text-decoration: none;
        color: #fff;
        position: relative;
        display: inline-block;
        padding: 0px 20px;
    }

    #footer .footer-right-text {
        font-size: 14px;
    }

    #footer .footer-right-text .service {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #footer a:last-child {
        padding-right: 0;
    }
    /* End Footer */

    /*-------Index page-------*/

    .public-book-section {
        background-color: #ed2524;
        padding-top: 2em;
        /*padding-bottom: 2em;*/
        margin: 0;
        /*opacity: 0.8;*/
    }

    .public-book-section .container {
        margin-bottom: 48px;
    }

    .public-book-section .container {
        text-align: center;
    }

    .info-public-book-list {
        height: 10em;
        color: #fff;
        text-align: center;
    }

    .info-public-book-list p {
        font-size: 20px;
    }

    .public-book-list {
        margin: 0;
    }

    a.button-link-public-book {
        font-size: 16px;
    }

    .public-book-list .thumbnail p {
        font-size: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .array-public-book .thumbnail h4, .array-public-book .thumbnail p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .button-link-public-book {
        background-color: #ed2524;
        border-color: #ed2524;
        text-decoration: none;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 3px;
    }

    .button-link-public-book:hover {
        color: #fff;
        text-decoration: none;
        border: 1px solid #fff;
    }

    .angle-down-see-more {
        position: absolute;
        bottom: 5%;
        left: 50%;
        color: #ed2524;
        -webkit-animation: upAndDown 1.5s cubic-bezier(0,0.3,0,-0.13) infinite;
        animation: upAndDown 1.5s cubic-bezier(0,0.3,0,-0.13) infinite;
    }

    .angle-down-see-more:hover, .angle-down-see-more:focus {
        color: #ed2524;
    }

    .angle-down-see-more:visit {
        color: #ed2524;
    }

    .angle-down-see-more:active {
        color: #ed2524;
    }

    /* The animation code */
    @keyframes upAndDown {
        from {bottom: 5%;}
        to {bottom: 3%;}

        /* 0%, 50%, 100% {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        25% {
            -webkit-transform: translateZ(0, -5px, 0);
            transform: translateZ(0, -5px, 0);
        }

        75% {
            -webkit-transform: translateZ(0, 5px, 0);
            transform: translateZ(0, 5px, 0);
        } */
    }

    /*animation-name: upAndDown;
    animation-duration: 2.5s;
    animation-timing-function: linear;
    animation-delay: initial;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;*/

    /*------------------------*/

    /* Begin Form Login User */
    .modal-login {
        display: none;
    }

    .modal-login .modal-header {
        text-align: center;
        background-color: #333;
        color: #fff;
    }

    .modal-login .modal-dialog {
        margin: 200px auto;
        padding-left: 17px;
        padding-right: 17px;
    }

    #form-login {
        position: relative;
    }

    #form-login .btn-primary {
        border-color: #ed2524;
        background-color: #ed2524;
    }
    #form-login input.form-control:focus {
        border-color: #ed2524;
    }

    .ui-dialog-titlebar {
        text-align: center;
    }

    .ui-dialog-title {
        background: none;
    }

    .ui-dialog.dialog-title .ui-widget-header {
        background: #ed2524;
        border-radius: none;
        color: #fff;
        font-weight: normal;
    }
    /* End Form Login User */

    /* Begin Form Register User */
    .section-register .panel-heading {
        text-align: center;
        background-color: #4d4d4d;
        color: #fff;
        /*font-weight: 700;*/
    }

    p.force-input {
        position: relative;
        margin: 0;
    }

    p.force-input span {
        font-size: 24px;
        position: absolute;
        top: 5px;
        color: #ed2524;
    }

    .error {
        color: #B80012;
        font-weight: 700;
    }

    .login-error {
        font-size: 14px;
        font-style: italic;
        font-weight: 100;
        margin-left: 13px;
        color: #B80012;
    }

    .error-input {
        border-color: #B80012;
    }

    form[name="form-register"] button[type="submit"] {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    form[name="form-register"] button[type="submit"]:active {
        background-color: #ed2524;
        border-color: #ed2524;
        outline: none;
    }

    /* End Form Register User */

    /* Begin Form Change Password */
    .modal-changePass .modal-content {
        transform: translateY(10%);
        width: 30em;
        border-radius: 4px;
        overflow: hidden;
    }

    .modal-changePass .modal-header {
        background-color: #fff;
        padding: 5px;
        color: #111;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }

    .modal-changePass .modal-header button span {
        font-weight: 100;
    }

    .modal-changePass .modal-header .modal-title {
        font-size: 16px;
    }

    .modal-changePass .modal-content input.form-control {
        border: 1px solid;
        border-right: 1px solid #aaa;
        border-left-color: #aaa;
        border-radius: 4px;
    }

    .modal-changePass .modal-content input.form-control:active {
        outline: none;
        box-shadow: none;
    }

    .modal-changePass .modal-content input.form-control[aria-required="true"] {
        border-color: initial;
    }

    .modal-changePass .modal-body {
        padding: 30px;
    }
    form[name="form-changePass"] .control-label{
        padding-left: 0;
    }
    form[name="form-changePass"] button[type="submit"] {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    form[name="form-changePass"] button[type="submit"]:active {
        background-color: #ed2524;
        border-color: #ed2524;
        outline: none;
    }

    /* End Form Change Password */

    /* Begin Form Forgot password */

    .forgot-password form button[type="submit"] {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .forgot-password form button[type="submit"]:active {
        background-color: #ed2524;
        border-color: #ed2524;
        outline: none;
    }

    /* End Form Forgot password */

    @media screen and (max-width: 1199px) {
        .navbar {
            height: auto;
            padding-bottom: 10px;
        }

        .logged-in > li.menu-item > a {
            margin-top: 0 !important;
        }
        .navbar-inverse .navbar-nav > li.menu-item > a {
            margin-top: 24px;
        }

        .navbar-inverse .navbar-nav > li > a {
            font-size: 15px;
            margin: 0 12px 0 10px;
        }

        .navbar-inverse .navbar-collapse {		
            margin-top: 31px;		
        }

        /*a.logo-link {
            background-image: url('/images/logo.png');
            width: 200px;
            background-size: cover;
            height: 50px;
        }*/
    }

    @media screen and (max-width: 1024px){
        .navbar-inverse .navbar-collapse{      
            margin-top: 5px;       
        }
    }

    @media screen and (max-width: 962px) and (min-width: 768px) {
        .navbar-inverse .navbar-collapse {

            margin-top :0;
        }
    }

    /* Mobile Screen */
    @media screen and (max-width: 767px) {
        .navbar-fixed-top{
            border: none;
        }

        ul.navbar-nav,
        ul.navbar-nav li {
            width: 100%;
            text-align: center;
            float: left;
        }

        ul.navbar-nav li:hover {
            background-color: #333;
        }

        ul.navbar-nav li a {
            float: left;
        }

        .navbar-user a.logo-link {
            margin-left: 0;
        }

        .navbar-inverse .navbar-nav>li>a:hover {
            border: none;
        }

        .container> .navbar-collapse {
            width: 100%;
            margin-right: 0px;
            margin-left: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
        #footer {
            padding-top: 6px;
            padding-bottom: 6px;
        }
        #footer p {
            font-size: 12px;
            line-height: 25px;
        }

        #footer p.align-right,
        #footer p.align-left {
            text-align: center !important;
            line-height: 30px;
        }
    }

    /* Desktop Screen */
    @media screen and (max-width: 991px) {
        .container {
            width: 100%;
        }

        ul.navbar-nav li {
            font-size: 16px;
        }

        ul.navbar-nav li a {
            margin: 15px 10px;
        }

        .navbar-user a.logo-link {
            margin-left: 0;
        }
    }

    @media screen and (max-width: 1199px) {
        ul.navbar-nav li a {
            margin: 25px 12px;
        }

        .navbar-user a.logo-link {
            margin-left: 0;
        }
    }


    .editor {
        position: relative;
        min-width: 1024px;
        height: 100%;
    }
    .editor .left-panel {
        width: 75px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .editor .mask-editor {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        z-index: 99999;
        display: none;
    }

    .editor .menu {
        margin: 0;
        padding: 0;
    }

    .left-panel .menu li {
        padding-top: 30px;
        text-align: center;
    }
    .left-panel .menu li.active a {
        color: #ed2524;
        background-color: transparent;
    }
    .left-panel .menu li:hover a {
        background: transparent;
    }
    .left-panel .menu li a {
        color: #464646;
    }

    .left-panel #tabs > li > a {
        padding: 0;
    }
    .editor .content {
        position: absolute;
        background: #E8E8E8;
        top: 0;
        left: 90px;
        /*right: 210px;*/
        right: 0;
        height: 100%;
    }
    .editor .content .menu-option {
        width: 250px;
        /*padding: 10px 0;*/
        margin: 15px;
        background: #fff;
        margin-right: 0;
        height: calc(100% - 30px)!important;
        float: left;
        border-radius: 4px;
    }
    .editor .content .menu-option .title {
        height: 40px;
        line-height: 40px;
    }

    .editor .menu-option .tab-pane .list-item {
        /*width: 90%;*/
        text-align: left;
        margin: 0 auto;
        font-size: 0;
            min-height: 100px;
            max-height: 100%;
            overflow-y: auto;
    }
    .editor .menu-option .tab-content{
        padding: 0px 5px;
        height: 90%;
    }

    .editor .content #editor-content {
        /*padding: 10px 0;*/
        margin: 15px;
        border-radius: 4px;
        background: #fff;
        width: calc(100% - 295px);
        height: calc(100% - 30px);
        padding-bottom: 0;
        margin-bottom: 0;
        position: relative;
    }
    .preview .progress {
        margin-bottom: 0;
        background: #777777;
    }
    .progress {
        height: 3px;
    }
    .progress .progress-bar-success {
        border-radius: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
    }


    #editor-content .page-container {
        position: relative;
        height: calc(100% - 50px)!important;
        padding: 0 15px 15px;
        overflow: auto;
        text-align: left;
        font-size: 0;
        /* Keep at least two pages side by side; prevent single-column fallback */
        min-width: 990px;
        /* Force exactly two pages per row using CSS Grid; overflow will scroll horizontally on zoom */
        display: grid;
        grid-template-columns: repeat(2, max-content);
        grid-auto-flow: row;
        justify-content: start;
    }

    .inline-block {
        display: inline-block;
    }
    .right-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 210px;
        padding: 15px;
    }
    .right-panel .layer {
        margin-bottom: 15px;
    }
    .editor .content #zoom {
        position: absolute;
        bottom: 15px;
        right: 15px;
        z-index: 9999;
    }
    .editor .content #zoom .zoom-option {
        border-radius: 15px;
        background: #3e3e3e;
        color: #fff;
        font-size: 12px;
    }
    @media only screen and (min-width: 1024px) and (max-width: 1200px) {
       .editor .title-container {
            width: 1%;
            margin-right: 25%;
        }
    }
    .editor .title-block {
        padding: 0 15px;
        height: 40px;
        position: relative;
        line-height: 40px;
        display: flex;
    }
    .editor .title-block .editable {
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        height: 30px;
        max-width: 100%;
    }

    .editor .title-block .title {
        width: 325px;
        position: relative;
    }
    .editor .title-block .action {
        /*margin-top: -4px;*/
    }
    .editor .title-block .action a {
        margin-right: 20px;
        color: #3e3e3e;
    }
    .editor .title-block .save a {
        color: #fff;
        padding: 5px 15px;
        margin-top: -1px;
        font-size: 16px;
    }
    .editor .title-block .book-review {
        margin-top: -1px;
    }
    .editor .title-block .book-review a {
        padding: 5px 12px;
        font-size: 16px;
    }

    .editor .title-block .request-print a {
        font-size: 16px;
    }
    .editor .content .page {
        box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
        width: 400px;
        height: auto;
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 0 40px 40px 40px;
        font-size: 14px;
        /* overflow: hidden; */
    }
    #editor-content .page-container .left-page {

    }
    .menu li {
        float: none;
    }

    .report-request-print-success {
        display: none;
        background-color: #4CAF50;
        padding: 0.5em 0.8em;
        margin-bottom: 1em;
        border-radius: 4px;
        font-size: 1.5em;
        color: #fff;
    }

    /*select layout*/
    .tab-content .tab-pane {
        height: 100%;
    }
    .tab-content .imageList {
        position: relative;
        margin: 10px 0;
        padding: 0;
        min-height: 200px;
        max-height: 100%;
        overflow: auto;
    }
    .tab-content .textList {
        margin-top: 15px!important	;
    }
    .textList .text:first-child {
        margin-top: 0;
    }
    .textList .text, .elements .free-text {
        text-align: center;
        cursor: move;
        color: #000;
        font-size: 13px;
    }
    .textList .text {
        line-height: 45px;
    }
    .text-item {
        /*margin: 30px 0;*/
        text-align: center;
        color: #000;
        width: auto!important;
    }

    .asset {
        list-style: none;
    }
    .asset img {
        width: 100%;
        height: auto;
    }

    .assetList {
        max-height: 95%;
        overflow: auto;
    }
    .assetList .asset {
        list-style: none;
        width: 38%;
        height: 72px;
        cursor: move;
        display: inline-block;
        margin: 12px;
    }
    .assetList .select-category {
        width: 90%;
        margin: 0 auto;
    }

    .assetList .asset img {
        width: 100%;
        height: auto;
    }

    .imageList .photo-item, .content .photo-item  {
        list-style: none;
        width: 38%;
        height: 72px;
        cursor: move;
        display: inline-block;
        margin: 12px;
        border: 1px solid #cccccc;
    }
    .imageList .photo-item {
        position: relative;
        overflow: hidden;
    }
    .imageList .photo-item .remove  {
        content: "\f1f8";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        width: 20px;
        height: 20px;
        font-size: 14px;
        bottom: 1px;
        left: 2px;
        position: absolute;
        color: cornsilk;
        display: inline-block;
        background: rgb(237, 37, 36);
        margin: 0;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        transition: 0.2s;
        margin-bottom: -23px;
    }
    .imageList .photo-item .remove:hover  {
        background: #af1111;
    }
    .imageList .photo-item:hover .remove  {
        margin-bottom: 0;
    }
    .imageList .photo-item:hover .remove .fa-trash {
        /*margin-left: -2px;*/
    }

    .imageList .upload {
        cursor: auto;
        text-align: center;
        vertical-align: bottom;
    }
    .imageList .upload:hover:after {
        content: '';
        display: none;
    }
    .imageList .upload .progress {
        margin-bottom: 0;
        height: 3px;
    }
    .imageList .upload a {
        line-height: 70px;
        font-size: 30px;
        color: #565656;
        width: 100%;
        height: 100%;
        display: inline-block;

    }
    .imageList .photo-item img {
        width: 100%;
        height: 100%;
    }
    .photo-item {
        list-style: none;
    }

    .custom-layout .rows, .columns, .item {
        position: absolute;
    }

    #layout .custom-layout .item {
        background: #fff;
        box-shadow: none!important;
        padding: 0;
        -webkit-backface-visibility: hidden;
    }

    #layout .custom-layout .photo .placeholder {
        background: url('../images/nophoto.png') center;
        background-size: cover;
        background-clip: content-box;
        border: 1px solid #e4e4e4;
        position: absolute;
        top: 0!important; left: 0!important; right: 0; bottom: 0;
        width: 100%!important;
        height: 100%!important;
    }
    #layout .custom-layout .text .placeholder {
        /*background: url('../images/fake_text.png') left ;
        background-size: contain;*/
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #e2e2e2;
    }

    #layout .custom-layout {
        position: relative;
        border: 1px solid #cccccc;
        width: 85px;
        height: 120px;
        cursor: move;
        display: inline-block;
        margin: 12px;
        background: #fff;
    }
    .page .page-actions {
        position: absolute;
        right: -60px;
        top: 40%;
        transform: translateY(-50%);
        z-index: 99;
    }
    .page .page-actions a {
        font-size: 20px;
        color: #795548;
            transition: 0.2s all;
    }
    .page .page-actions .action {
        cursor: pointer;
    }
    .page-container .page:first-child .page-actions .move-up a {
        color: #eee;
        cursor: default;
    }

    .page-container .page:last-child .page-actions .move-down a {
    color: #eee;
    cursor: default;
    }
    .page .page-actions .action a:hover {
        color: #b12322;
    }
    .page .page-actions .move-down a, .page .page-actions .move-up a {
        font-size: 40px;
    }
    .page .page-actions .page-number .text-number {
        font-size: 22px;
        margin-top: 9px;
        cursor: initial;
    }


    /*.page .page-actions .des-action-add-page {
        position: absolute;
        left: 60px;
        top: 15px;
        min-width: 103px;
        font-size: 16px;
    }

    .page .page-actions .des-action-del-page {
        position: absolute;
        left: 60px;
        top: 70px;
        min-width: 87px;
        font-size: 16px;
    }*/

    .page .elements {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        overflow: hidden;
    }
    .page .elements .default-text {
        font-size: 16pt;
        color: #000;
        font-family: serif;
    }
    .page .elements .text .preview {
        /*position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;*/
        word-break: break-word;
        outline: none;
        width: 100%;
        height: 100%;
    }
    .page .elements .text .preview p, .page .elements .text .preview div {
        margin: 0; padding: 0;
        /*display: inline-block;*/
    }
    .page .elements .text .preview[conteneditable="true"] {
        cursor: text;
    }
    /*.page .elements .element.text::after {
        content: "\f047";
        position: absolute;
        top: -10px;

    }*/
    .page .elements .ui-rotatable-handle {
        position: absolute;
        bottom: -50px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        cursor: move;
    }
    .page .elements .ui-rotatable-handle::after {
        content: '';
        position: absolute;
        height: 25px;
        border: 1px dashed #000000;
        top: -24px;
        left: 8px;
        background: #989898;
    }
    .page .elements .element.selected .ui-rotatable-handle {
        display: block;
    }
    .page .custom-layout .background-content {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
    }
    .page .custom-layout .item {
        /*background: #fff;*/
        -webkit-backface-visibility: hidden;
        /*overflow: hidden;*/
        cursor: pointer;
        outline: 0;
    }
    .page .custom-layout .item.text {
        cursor: text;
    }

    .page .custom-layout .photo .item-content {
        border: 1px solid #949494;
        overflow: hidden;
    }
    .page .custom-layout .photo .crop-tool {
        position: absolute;
        top: -50px;
        transform: translateX(-15%);
        font-size: 0;
        border: 2px solid #858585;
        border-radius: 4px;
        width: 256px;
    }
    .toolbar-menu {
        font-size: 0;
    }

    .page .custom-layout .photo .crop-tool .action{
        display: inline-block;
        background: #3f4652;
        color: #fff;
        font-size: 14px;
        width: 63px;
        border-right: 1px solid #858585;
        margin: 0;
        text-align: center;
        height: 45px;
        line-height: 45px;

    }
    .page .custom-layout .photo .crop-tool .action.text{
        font-size: 13px;
        text-decoration: none;
        width: auto;
        padding: 0 10px;
    }

    .page .custom-layout .photo .crop-tool .action:hover{
        color: #00c4cc;
    }
    .page .custom-layout .photo .crop-tool .action:last-child {
        border-right: none;
    }

    .page .custom-layout .photo .crop-tool a {
        color: #fff;
        margin-left: 6px;
    }

    .page .custom-layout .filled .item-content {
        border: 0;
    }
    .page .custom-layout .text {
        background: transparent;
        font-size: 16px;
        /*border: 1px dotted rgba(0, 0, 0, 0.5);*/
    }
    .page .custom-layout .text .item-content {
        outline: 0;
    }
    .page .custom-layout .selected:before, .page .elements .selected:before {
        content: '';
        position: absolute;
        /*top: 0; left: 0; bottom: 0; right: 0;*/
        top: -2px; left: -2px; bottom: -2px; right: -2px;
        outline: 2px dashed #000;
    }
    .page .element.free-text:before {
        z-index: -100;
    }
    .page .custom-layout .item .item-content {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: translateZ(0);
    }
    .page .custom-layout .photo  .placeholder {
        background: url('../images/nophoto.png') center;
        background-size: cover;
        background-clip: content-box;
        /*border: 1px dotted #cccccc;*/
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
    }
    .page .custom-layout .text .placeholder {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        padding: 10px;
        font-style: italic;
        font-family: monospace;
        text-align: center;
        top: 35%;
        transform: translateY(-50%);
        font-size: 10px;

    }
    .page .custom-layout {
        position: relative;
        /*border: 1px solid #cccccc;*/
        width: 30%;
        height: 110px;
        cursor: move;
        display: inline-block;
        background: transparent;
    }
    .opacity-50 {
        opacity: 0.5;
    }
    #layout .layout-helper {
        /*-webkit-transition: width 2s, height 4s;  Safari
        transition: width 2s, height 4s;*/
    }

    /*end select layout*/

    /*toolbar*/
    .tool-bottom {
        background: #3f4652;
        color: #fff;
    }
    .tool-bottom .tool-item {
        color: #fff;
        width: auto;
    }
    .tool-bottom .tool-item i {
        color: #fff;
    }
    .tool-bottom .tool-item:hover {
        background: #3f4652;
        color: #a7a7a7;
    }

    /*end toolbar*/
    #background .background-list {
        font-size: 0;
            max-height: 100%;
            overflow-y: auto;
    }
    #background  .background-list .background-item {
        width: 38%;
        height: 110px;
        cursor: move;
        display: inline-block;
        margin: 12px;
        border: 1px solid #cccccc;
    }

    .background-list .select-bg-category {
        width: 90%;
        margin: 0 auto;
    }

    .background-list .background-item img {
        width: 100%;
        height: auto;
    }
    .page .elements .background {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
    }
    .page .elements .background .background-placeholder {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
    }

    /*browse book*/
    .browse-books {
        height: calc(100% - 51px);
    }
    .browse-books .left-panel {
        width: 200px;
        background: #f8f8f8;
        height: 100%;
    }

    .menu-crud-book {
        display: none;
        position: absolute;
        top: 1%;
        left: 26%;
    }

    @media screen and (max-width: 414px) {
        .menu-crud-book {
            left: 13%;
            font-size: 13px;
        }
    }

    .menu-crud-book li a {
        color: #333333;
        padding: 7px 10px;
        font-size: 1.2em;
    }

    .menu-crud-book li a:hover {
        background-color: initial;
        color: #ed2524;
    }

    .menu-crud-book .fa:before {
        margin-right: 5px;
    }

    /*#idShareBook .select2 {
        min-width: 300px !important;
        overflow: auto;
    }*/

    /*end browse book*/

    /*resizeable*/

    .item.selected .ui-resizable-handle {
        background: #3b3b3b;
        height: 12px;
        position: absolute;
        width: 12px;
        border-radius: 6px;
        z-index: auto!important;
        border: 2px solid #fff;
        transition: background 0.2s;
        box-shadow: 0 0 1px #4f4f4f;
    }
    .custom-layout .item.selected .ui-resizable-handle {
        cursor: auto;
    }
    .item.selected .ui-resizable-handle:hover {
        background: #ed2524;
    }
    .item .ui-resizable-handle {
        background-image: none;
    }
    .item.selected .ui-resizable-n {
        top: -6px;
        left: calc(50% - 5px);
        cursor: n-resize;
    }
    .item.selected .ui-resizable-e {
        top: calc(50% - 5px);
        right: -6px;
        cursor: e-resize;
    }
    .item.selected .ui-resizable-s {
        bottom: -6px;
        left: calc(50% - 5px);
        cursor: s-resize;
    }
    .item.selected .ui-resizable-w {
        top: calc(50% - 5px);
        left: -6px;
        cursor: w-resize;
    }
    .item.selected .ui-resizable-se {
        bottom: -7px;
        right: -7px;
        cursor: se-resize;
    }
    .item.selected .ui-resizable-sw {
        bottom: -7px;
        left: -7px;
        cursor: sw-resize;
    }
    .item.selected .ui-resizable-ne {
        top: -7px;
        right: -7px;
        cursor: ne-resize;
    }
    .item.selected .ui-resizable-nw {
        top: -7px;
        left: -7px;
        cursor: nw-resize;
    }


    /*end resizable*/


    /*tooltip*/

    .tooltipster-sidetip .tooltipster-box {
        margin-bottom: 0;
        border: none;
        background: none;
        border: none;
        background: none;
    }
    .tooltipster-box .tooltipster-content {
        margin-bottom: 0;
        padding: 0;
        border: none;
        border-radius: 4px;
        overflow: inherit;
    }

    .toolbar-menu {
        border-radius: 7px;
        list-style: none;
        white-space: nowrap;
        background-color: #3f4652;
        box-shadow: 0 0 0 2px rgba(255,255,255,.333);
        display: inline-block;
    }
    .toolbar-menu .action {
        display: inline-block;
        padding: 0 10px;
        border-right: 1px solid #8a8383;
    }
    .toolbar-menu .action.remove {
        padding: 0 15px;
    }
    .toolbar-menu .action:last-child {
        border-right: none;
    }
    .toolbar-menu .action a{
        height: 45px;
        font-size: 15px;
        line-height: 45px;
        color: #fff;
        text-decoration: none;
    }
    .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
        border: 0;
    }
    .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
        border-top-color : #3f4652;
    }
    /*.toolbar-menu .select-action {
        height: 30px;
        width: 70px;
        padding: 0;
    }*/
    .toolbar-menu .select-action .font-size {
        font-size: 12px;
        height: 26px;
        padding: 5px;
    }
    .toolbar-menu .color {
        vertical-align: 25%;
    }
    .widget .sp-replacer {
        padding: 0;
        height: 25px;
        display: inline-block;
    }
    .border-widget .sp-replacer {
        width: 60px;
        float: right;
    }
    .text-widget .sp-replacer {
        width: 100%;
    }
    .sp-replacer.sp-disabled {
        cursor: no-drop;
    }
    .sp-replacer .sp-preview {
        margin-right: 0;
        width: 100%;
        height: 100%;
        border: none;

    }
    .sp-replacer .sp-dd {
        display: none;
    }

    /*end tooltop*/

    /*properties panel*/
    .panel-properties .position::after, .panel-properties .size::after {
        content: '';
        clear: both;
    }
    .panel-properties .form-control {
        border-radius: 0;
        border: 1px solid #dcdcdc;
        padding: 0;
        padding-left: 5px;
        font-size: 12px;
        height: 25px;
    }
    .panel-properties .border-widget .form-control {
        width: 60px;
        display: inline-block;
        float: right;
    }
    .panel-properties .info  {
        font-size: 10px;
    }
    .panel-properties .form-control:focus {
        box-shadow: none;
    }

    .panel-properties .widget {
        margin-bottom: 15px;
    }

    .panel-properties .text-widget .text-style {
        border: 1px solid #dcdcdc;
        display: inline-block;
        margin-bottom: 15px;
        width: 100%;
    }
    .panel-properties .text-widget .text-style .press  {
        display: inline-block;
    }
    .panel-properties .text-widget .btn-widget {
        color: #000;
        padding: 4px 9px;
        font-size: 12px;
    }

    .panel-properties .text-widget .press.active a {
        box-shadow: inset 0 3px 5px rgba(0,0,0,.325);
        background: #ececec;
    }
    .panel-properties .text-widget .font-family {
        width: 120px;
    }
    .panel-properties .text-widget .font-size {
        width: 60px;
    }
    .panel-properties .text-widget .color {
        width: 30px;
    }
    .panel-properties .widget .select {
        position: relative;
            height: 30px;
            vertical-align: middle;
    }

    .panel-properties .widget .arrow {
        position: absolute;
        top: 3px;
        right: 3px;
        font-size: 15px;
    }

    .panel-properties .border-widget .press {
        display: inline-block;
    }
    .panel-properties .border-widget .border-style {
        /*width: 120px;*/
    }
    .panel-properties .border-widget .border-width {
        /*width: 60px;*/
    }
    .panel-properties .border-widget .border-color {
        /*display: inline-block;*/
        /*width: 30px;*/
        height: 30px;
    }

    .panel-properties .method {
        margin-bottom: 15px;
    }
    .panel-properties .method .action {
        /*width: 50px;*/
        /*text-align: center;*/
    }
    .panel-properties .layer .arrange a:first-child {
        /*margin-right: 2%;*/
    }
    .panel-properties .instruct {
        font-style: italic;
        color: #a2a2a2;
    }
    .panel-properties .layer .hover, .hover-position, .hover-size {
        cursor: pointer;
    }
    .panel-properties .layer .hover:hover, .hover-position:hover, .hover-size:hover {
        color: #795548;
    }
    .panel-properties .layer .arrange a {
        text-decoration: none;
        font-size: 16px;
        display: block;
        /*width: 45%;*/
    }
    .panel-properties .layer .arrange a:hover {
        color: #795548;
    }
    .panel-properties .layer .arrange a.disabled {
        cursor: default;
        color: #eee;
    }
    .panel-properties .method .action a:hover {
        color: #795548;
    }
    .panel-properties .method .action span {
        display: inline-block;
        width: 80%;
        font-size: 16px;
    }
    .panel-properties .method .action i.fa {
        margin-top: 4px;
    }
    .panel-properties .method .action a {
        font-size: 18px;
            display: block;
            text-decoration: none;
        color: #000;
    }
    .editor-ajax-load {
        position: relative;
    }
    .editor-ajax-load::after {
        content: '';
        background: url("../images/squares.gif") no-repeat scroll center center;
        position: absolute;
        height: 50px;
        top: 50px;
        left: 0;
        right: 0;
    }
    .ui-dialog-titlebar {
        background: #ed2524;
    }
    .ui-dialog-titlebar .ui-dialog-titlebar-close .i {
        color: #fff;
    }
    .ui-dialog {
        border: 1px solid #cccccc;
        box-shadow: rgb(204, 204, 204) 2px 4px 4px;
        z-index: 999999;
        overflow: visible;
        height: auto!important;
    }
    .ui-dialog .ui-dialog-title {
        font-size: 13px;
        color: #fff;
    }
    .ui-dialog .ui-widget-header {
        border: none;
    }
    .ui-autocomplete {
        max-height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    /*end properties tab*/



    /*preview mode*/
    #preview {
        background: #777;
    }
    #preview .page {
        background: #fff;
    }
    #preview .page{
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
        box-shadow:0 0 20px rgba(0,0,0,0.2);
    }
    #preview .even .gradient{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;

        background:-webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.2)));
        background-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
        background-image:-moz-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
        background-image:-ms-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
        background-image:-o-linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
        background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
    }

    #preview .odd .gradient{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;

        background:-webkit-gradient(linear, right top, left top, color-stop(0.95, rgba(0,0,0,0)), color-stop(1, rgba(0,0,0,0.15)));
        background-image:-webkit-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
        background-image:-moz-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
        background-image:-ms-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
        background-image:-o-linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
        background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
    }
    #preview .progress {
        background: #777;
        margin: 0;
        height: 3px;
        margin-bottom: 3px;
    }
    #preview .flip-book {
        margin: 0 auto;
        transform: translateX(-25%)!important;
    }

    #preview .flip-book .p1 .gradient {
        display: none;
    }

    #preview .page-actions .action {
        display: inline-block;
        margin: 0 6%;
        font-size: 14px;
    }
    #preview .page-actions .action .disable {
        color: #4a4a4a;
        cursor: not-allowed;
    }
    #preview .page-actions .action a {
        text-decoration: none;
        color: #ed2524;
    }
    #preview .page-actions {
        text-align: center;
        position: absolute;
        bottom: 10px;
        width: 100%;
    }
    #preview .page-actions .action i {
        vertical-align: middle;
    }
    #preview .page-actions .action-label {
        font-size: 13px;
        color: #fff;
    }

    .page:first-child .sticky-note-editor {
        display: none;
        top: 0;
        position: absolute;
        text-decoration:none;
        color:#000;
        background:#ed2524;
        height:160px;
        width:160px;
        padding:1em;
        z-index: 99;
        text-align: center;
        -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
        -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
        box-shadow: 5px 5px 7px rgba(33,33,33,.7);

        background: #fefdca; /* Old browsers */
        background: -moz-linear-gradient(top, #fefdca 0%, #f7f381 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefdca), color-stop(100%,#f7f381)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #fefdca 0%,#f7f381 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdca', endColorstr='#f7f381',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #fefdca 0%,#f7f381 100%); /* W3C; A catch-all for everything else */
    }

    /*end preview*/

    /*end properties tab*/

    /* Editor Note */
    #editor-content .messages {
        position: relative;
        list-style: none;
        padding: 20px 0px 0 0px;
        margin: 0;
        height: 40%;
        overflow-y: scroll;
    }
    #editor-content .messages .message {
        clear: both;
        overflow: hidden;
        margin: 20px;
        transition: all 0.5s linear;
        opacity: 0;
    }
    #editor-content .messages .message.left .avatar {
        /*background-color: #f5886e;*/
        float: left;
    }
    #editor-content .messages .message.left .text_wrapper {
        background-color: #ffe6cb;
        margin-left: 20px;
    }
    #editor-content .messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
        right: 100%;
        border-right-color: #ffe6cb;
    }
    #editor-content .messages .message.left .text {
        color: #c48843;
    }
    #editor-content .messages .message.right .avatar {
        /*background-color: #fdbf68;*/
        float: left;
    }
    #editor-content .messages .message.right .text_wrapper {
        background-color: #c7eafc;
        margin-left: 20px;
    }
    #editor-content .messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
        right: 100%;
        border-right-color: #c7eafc;
    }
    #editor-content .messages .message.right .text {
        color: #45829b;
    }
    #editor-content .messages .message.appeared {
        opacity: 1;
    }
    #editor-content .messages .message .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: inline-block;
    }
    #editor-content .messages .message .text_wrapper {
        display: inline-block;
        padding: 10px;
        border-radius: 6px;
        width: calc(100% - 200px);
        min-width: 100px;
        position: relative;
    }
    #editor-content .messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
        top: 18px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    #editor-content .messages .message .text_wrapper::after {
        border-width: 13px;
        margin-top: 0px;
    }
    #editor-content .messages .message .text_wrapper::before {
        border-width: 15px;
        margin-top: -2px;
    }
    #editor-content .messages .message .text_wrapper .text {
        font-size: 18px;
        font-weight: 300;
        word-wrap: break-word;
    }

    #bottom_wrapper {
        margin-top: 30px;
    }
    #editor-content #bottom_wrapper .bottom_wrapper {
        width: 100%;
        background-color: #fff;
        padding: 0 30px;
    }
    #editor-content #bottom_wrapper p{
        padding: 0 30px;
        text-align: justify;
    }
    #editor-content #bottom_wrapper .bottom_wrapper .message_input_wrapper {
        display: inline-block;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #bcbdc0;
        width: calc(100% - 80px);
        position: relative;
        padding: 0 10px;
    }
    #editor-content #bottom_wrapper .bottom_wrapper .message_input_wrapper .message_input {
        border: none;
        height: 100%;
        box-sizing: border-box;
        width: calc(100% - 40px);
        position: absolute;
        outline-width: 0;
        color: gray;
    }
    #editor-content #bottom_wrapper .bottom_wrapper .send_message {
        width: 75px;
        height: 40px;
        display: inline-block;
        border-radius: 10px;
        background-color: #337ab7;
        border: 2px solid #337ab7;
        color: #fff;
        cursor: pointer;
        transition: all 0.2s linear;
        text-align: center;
        float: right;
    }
    #editor-content #bottom_wrapper .bottom_wrapper .send_message:hover {
        color: #a3d063;
        background-color: #fff;
    }
    #editor-content #bottom_wrapper .bottom_wrapper .send_message .text {
        font-size: 16px;
        font-weight: 300;
        display: inline-block;
        line-height: 37px;
    }
    #notes .loader {
        position: absolute;
        top: 25%;
        left: 9%;
        border: 8px solid #f3f3f3;
        border-top: 8px solid #000;
        border-radius: 102%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
        display: none;
    }
    #bottom_wrapper .errorNote{
        position: absolute;
        bottom: 17px !important;
    }
    #bottom_wrapper .loader {
        position: absolute;
        top: 30%;
        left: 50%;
        border: 8px solid #f3f3f3;
        border-top: 8px solid #000;
        border-radius: 102%;
        width: 40px;
        height: 40px;
        animation: spin 2s linear infinite;
        display: none;
        z-index: 999;
    }
    .time_wrapper{
        float: right;
        padding-top: 5%;
        font-weight: 700
    }
    .book-status-success{
        color: #009900;
        font-weight: 700;
        display: none;
        margin-top: 10px;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .print-book {
        margin-left: 1em;
    }

    .history-print {
        overflow-y: scroll;
        max-height: 15em;
    }

    .history-print p {
        font-size: 1.5em;
        background-color: #ddd;
        padding-left: 1em;
    }
    /* End Editor Note */

    /* Testimonials */
    #testimonials {
        background: url(../images/bg-light.png);
        padding: 40px 0 0px;
        margin-top: -145px;
        margin-bottom: 135px;
        position: relative;
    }
    #testimonials .tes-container {
        padding-left: 0;
        padding-right: 0;
    }
    #testimonials .heading {
        text-align: center;
        margin-bottom: 50px;
        color: #333;
    }
    .cover-boxs{
        padding-left: 60px;
        padding-right: 60px;
    }
    .boxs {
        background: #fff;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 40px;
        position: relative;
    }
    .news .boxs {		
    width: 100%;		
    color: #333;		
    }		
    .news .boxs .featured-thumb {		
    height: 200px;		
    background: transparent center no-repeat;		
    background-size: contain;		
    }		
    .news .news-detail img {		
    max-width: 100%;		
    }
    .testimonials .boxs:nth-child(odd) {
        float: left;
    }
    .testimonials .boxs:nth-child(even) {
        float: right;
    }
    .arrow-tri {
        margin-bottom: 20px;
        position: absolute;
    }
    .testimonials .boxs .arrow-tri {
        width: 0;
        height: 0;
        border-top: 17px solid #fff;
        border-right: 17px solid transparent;
        right: 35px;
        bottom: -37px;
    }
    .cmt {
        font-style: italic;
        color: #555;
    }
    .cmt-author {
        font-weight: 600;
        font-size: 15px;
        color: #333;
        margin-top: 10px;
    }
    .cmt-avatar {
        width: 90px;
        padding: 0 10px;
    }
    .line-break {
        margin: 20px 0 15px 0;
        border-bottom: none;
        border-top: 1px dashed #ccc;
    }
    .flexible {
        display: flex;
    }
    .testimonials .boxs .flexible {
        flex-direction: row-reverse;
        text-align: right;
    }
    .testimonials .boxs .cmt {
        text-align: justify;
    }
    .img-holder{
        width: 100%;
        height: 70px;
    }
    /* End Testimonial */

    /* Pricing Pages */

    .pricing{
        padding-left: 70px;
        padding-right: 70px;
        position: absolute;
        top: 231px;
        width: 95%;
        left: 2.5%
    }

    @media screen and (min-width: 1025px) {
        .pricing {
            width: 80%;
            left: 10%;
        }
    }
    .pricing-block-grid {
        display: inline-block;		
        float: none;		
        width: 65%;    
        padding: 5px;
    }
    .pricing-block, .pricing-block .fa, .pricing-block .currency, .pricing-block .pricing-btn a {
        transition: all 0.3s ease 0s;
    }
    .pricing-block {
        position: relative;
        transition: all 0.3s ease 0s;
    }
    .pricing-block .popular-label {
        height: 315px;
        overflow: hidden;
        position: absolute;
        right: -1px;
        top: -1px;
        width: 132px;
    }
    .pricing-block .popular-label .tag {
        height: 35px;
        line-height: 40px;
        text-align: center;
        text-transform: uppercase;
        transform: rotate(45deg);
        width: 179px;
    }
    .pricing-block .popular-label .tag .tag-text {
        font-size: 13px;
        left: 18px;
        position: relative;
    }
    .pricing-block h4 {
        margin: 0;
        padding: 20px 0 5px 0px;
        text-align: center;
        font-size: 24px;
        font-weight: 100;
        letter-spacing: 0.07em;
        color: #555;
        margin-bottom: 20px;
    }
    .hs-pricing-desc{
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px !important;
        line-height: 1.6em;
        margin-bottom: 1.3em;
        margin-top: 1.3em;
        color: #797979;
        padding: 0 !important;
        text-align: center;
    }
    .pricing-block p {
        font-size: 20px;
        font-weight: 300;
        padding: 0 0 0 40px;
        word-wrap: break-word;
    }
    .pricing-block .deliver{
        border-bottom: 1px solid #c9c9c9;
        margin-left: 20%;
        margin-right: 20%;
        margin-top: 37px;
    }
    .pricing-block .currency, .pricing-block.black-yellow .currency, .pricing-block.black-red .currency, .pricing-block.black-green .currency, .pricing-block.black-blue .currency {
        transition: all 0.3s ease 0s;
    }
    .pricing-block .currency {
        margin: 20px 0 0 0;
        padding: 10px 0 0px 0px;
        position: relative;
        text-align: center;
    }
    .pricing-block .currency p {
        padding: 0;
    }
    .sign {
        font-family: "Roboto",sans-serif;
        font-size: 50px;
        font-weight: 800;
        line-height: 40px;
        color: #555;
    }
    .pricing-block .sign {		
        font-size: 35px;		
        font-weight: 600;		
        vertical-align: top;		
        color: #ed2524;		
    }
    .cost {
        font-family: "Roboto",sans-serif;
        font-size: 50px;
        font-weight: 800;
        line-height: 46px;
        vertical-align: top;
        color: #ed2524;
    }
    .month {
        font-size: 20px;
        font-weight: 100;
        margin: 10px 0 0;
        color: #797979;
    }
    .pricing-block ul {
        list-style: outside none none;
        margin: 40px 0 0;
        padding: 0;
    }
    .pricing-block ul li {
        display: block;
        position: relative;
    }
    .pricing-block div.list ul li{		
        display: block;		
        font-size: 16px;		
        font-weight: 300;		
        outline: medium none;		
        padding: 5px 0 0;		
        text-decoration: none;		
        text-align: center;		
    }		

    .pricing-block ul li .fa {
        font-size: 14px;
        top: 8px;
    }
    .pricing-block ul li a, .pricing-block ul li span {
        display: block;
        font-size: 16px;
        font-weight: 300;
        outline: medium none;
        padding: 5px 0 15px 0px;
        text-decoration: none;
        text-align: center;
    }
    .pricing-block ul li p {
        font-size: 15px;
        margin: 0;
        padding: 0;
    }
    .pricing-block .pricing-btn {
        margin: 20px auto;
        text-align: center;
    }
    .pricing-block .pricing-btn a {
        border-radius: 0;
        font-size: 18px;
        font-weight: 100;
        /*padding: 5px 40px;*/
        /*text-transform: uppercase;*/
        transition: all 0.3s ease 0s;
        background-color: #ed2524;
        color: #ffffff;
    }
    .pricing-block.active, .pricing-block:hover {
        position: relative;
        transition: all 0.3s ease 0s;
    }
    .pricing-block ul li a:hover {

        transition: all 0.3s ease 0s;
    }
    .pricing-block, .pricing-block.black-red:hover .currency, .pricing-block.black-yellow:hover .currency, .pricing-block.black-purple:hover .currency, .pricing-block.black-green:hover .currency {
        transition: all 0.3s ease 0s;
    }
    .pricing-block.red.grey.active .pricing-btn a, .pricing-block.yellow.grey.active .pricing-btn a, .pricing-block.purple.grey.active .pricing-btn a, .pricing-block.green.grey.active .pricing-btn a, .pricing-block.red.grey:hover .pricing-btn a, .pricing-block.yellow.grey:hover .pricing-btn a, .pricing-block.purple.grey:hover .pricing-btn a, .pricing-block.green.grey:hover .pricing-btn a {
        border: 1px solid transparent;
    }
    .pricing-block li, .pricing-block a,.pricing-block  {
        color: #000;
    }
    .pricing-block .popular-label .tag {
        background-color: #227ded;
        color: #fff;
    }
    .row-pricing{
        top: 0;
        margin: 45px 40px 115px 40px;
        background-color: #f9f8f7;
        position: relative;
    }
    .pricing-block-low{
        margin-top: 20px;
    /* margin-left: 15%;
        margin-right: 15%;*/
    }
    .header-pricing .header-content{
        margin: 0 auto;
        text-align: center;
        padding: 75px 0 118px;
        max-width: 760px;
        width: 70%;
        height: 100%;
        position: relative;
    }
    .pricing-block-grid:nth-child(2n){
        border-left: 1px solid #c9c9c9;
    }
    .pricing-text{
        font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 3em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #ed2524;
        margin-top: 75px;
    }

    /*End Pricing Pages*/

    /*draw container*/
    #drawContainer .page {
        display: inline-block;
    }
    /*end draw container*/

    /* News */
    #news {
        background: url(../images/bg-light.png);
        padding: 40px 0 0px;
        margin-top: -145px;
        margin-bottom: 135px;
        position: relative;
    }
    #news .tes-container {
        padding-left: 0;
        padding-right: 0;
    }
    #news .heading {
        text-align: center;
        margin-bottom: 50px;
        color: #333;
    }
    .news .boxs:nth-child(odd) {
        float: left;
    }
    .news .boxs:nth-child(even) {
        float: right;
    }
    @media only screen and (max-width: 990px) {
        .news .boxs h3 {
            margin-top: 10px;
            margin-bottom: 7px;
        }
    }
    @media only screen and (min-width: 990px) {
        .news .boxs h3 {
            margin-top: 0;
            margin-bottom: 7px;
        }
    }
    .news .boxs p{
        margin-top: 1.3em;
        text-align: justify;
        line-height: 1.6;
    }
    /* News */

    /* Contact Us */
    .contact-form{
        margin-top: 18px;
        font-size: 17px;
        margin-bottom: 105px;
    }
    .h3-promise {
        margin-top: 64px;
        margin-bottom: 15px;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
    }
    #contact-form .input-mini-left{
        width: 47%;
        margin-right: 4%;
        margin-bottom: 21px;
    }
    #contact-form .input-mini-right{
        width: 47%;
    }
    #contact-form .input-mini{
        width: 99%;
        margin-bottom: 30px;
    }
    #contact-form .textarea-mini{
        width: 99%;
        height: 122px;
        margin-bottom: 20px;
    }
    #contact-form span{
        color: #ed2525;
        /*font-size: 14px;*/
    }
    #contact-form .btn-contact{
        width: 114px;
        height: 38px;
        background-color: #ed2524;
        color: #ffffff;
        border: none;
        margin-top: 20px;
    }
    #contact-capcha{
        margin-bottom: 20px;
    }
    .red{
        color: #ed2524;
    }
    .info-left{
        width: 100%;
        float: left;
        margin-right: 5%;
    }
    .info-right{
        width: 44%;
        float: left;
    }
    .info-left i{
        font-size: 2em;
    }
    .success{
        color: #33cc33;
        font-size: 16px;
        font-weight: 600;
    }
    .error-contact{
        color: #ed2525;
        font-size: 16px;
        font-weight: 600;
    }
    .contact-loader {
        border: 8px solid #f3f3f3;
        border-top: 8px solid #000;
        border-radius: 102%;
        width: 50px;
        height: 50px;
        animation: spin 2s linear infinite;
    }
    #contact-loader{
        position: absolute;
        top: 44%;
        left: 44%;
    }
    .contact-error{
        border: 1px solid #ed2524;
    }

    /* End Contact Us */

    /* About Us */
    #about-us{
        padding-bottom: 130px;
    }
    .static-page .entry-content .centered-title{
        text-align: center;
    }
    .static-page .entry-content .title{
        text-transform: uppercase;
        margin: 30px 0 15px;
    }
    .static-page .entry-content .none-top{
        margin-top: 60px;
    }
    .static-page .entry-content p{
        text-align: justify;
        overflow: visible;
        white-space: initial;
        /*font-size: 18px;*/
    }
    .static-page .mission-img{
        text-align: center;
        margin-top: 30px;
    }
    .static-page .mission-img img{
        width: 65%;
    }
    .static-page ul{
        list-style: disc outside;
    }
    .member-info-container.first-item {
        clear: left;
    }
    .member-info-container{
        list-style: none;
    }
    .member-img-container {
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        max-height: 200px;
        max-width: 200px;
        margin: 0 auto;
    }
    /*.member-img-container img{
        width: 100%;
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }*/

    .primrose-team-1, .primrose-team-2, .primrose-team-3, .primrose-team-4, .primrose-team-5, .primrose-team-6 {
        height: 200px;
        background-position: center;
        background-size: cover;
    }

    .primrose-team-1 {
        background-image: url('../images/staff/Untitled-2-01.png');
    }

    .primrose-team-2 {
        background-image: url('../images/staff/Untitled-2-02.png');
    }

    .primrose-team-3 {
        background-image: url('../images/staff/Untitled-2-03.png');
    }

    .primrose-team-4 {
        background-image: url('../images/staff/Untitled-2-04.png');
    }

    .primrose-team-5 {
        background-image: url('../images/staff/Untitled-2-05.png');
    }

    .primrose-team-6 {
        background-image: url('../images/staff/Untitled-2-06.png');
    }

    .member-details p {
        text-transform: uppercase;
        color: #666;
        text-align: center !important;
        margin-top: 15px;
    }
    p.member-name {
        color: #000;
        font-size: 18px;
        margin-bottom: 0;
    }
    p.member-position {
        margin-top: 0;
        text-transform: none;
        font-size: 16px;
    }
    .entry-content aside{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        -webkit-text-size-adjust: none;
    }
    /* End About Us */

    /* Begin Write Your Story */
    .write-your-story {
        padding-bottom: 30px;
    }

    .write-your-story > h2 {
        text-transform: uppercase;
        border: none !important;
        text-align: center;
    }

    .write-your-story > p {
        font-size: 15px;
    }

    .write-your-story > h4 {
        text-transform: capitalize;
        font-weight: 700;
        margin-top: 30px;
    }

    .write-your-story > div {
        text-align: center;
    }

    .write-your-story > div > a.btn-primary {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .write-your-story > div > a.btn-primary:hover {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .write-your-story > div > a.btn-primary:focus {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    .write-your-story > div > a.btn-primary:active {
        background-color: #ed2524;
        border-color: #ed2524;
    }

    /* End Write Your Story */



    .clear{
        clear: both;
    }
    /* Choose Book Categories */
    .header-book-category .header-content{
        margin: 0 auto;
        text-align: center;
        padding: 75px 0 118px;
        max-width: 830px;
        width: 70%;
        height: 100%;
        position: relative;
    }
    .book-category-text{
        font-family: "proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 3em;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #fff;
        margin-top: 40px;
    }
    .choose-book-cat{
        padding-left: 70px;
        padding-right: 70px;
        position: relative;
    }
    /*.row-book-cat{
        top: 0;
        margin: -145px 60px 145px 60px;
        background-color: #f9f8f7;
        position: relative;
    }*/
    .row-book-cat{
        top: 0;
        margin: 15px 60px 60px 60px;
        background-color: #fff;
        position: relative;
    }
    button .button-content:hover {
        border: 1px solid #158cfb;
        cursor: pointer;
    }
    .button-content {
        padding: 100px 60px 100px 60px;
        margin: 0 10% 0 10%;
        background-color: #f9f8f7;
        border-radius: 4px;
        border: 1px solid #d6d6d6;
        width: 252px;
    }
    button.button-content:hover {
        border: 1px solid #158cfb;
        background-color: #158cfb;
    }
    .button-content-line{
        padding: 84px 60px 84px 60px;
    }
    .button-content-structure{
        padding: 100px 53px 100px 53px;
    }
    .button-content-category{
        min-width: 32px;
        min-height: 64px;
    }
    .button-content span{
        display: table-cell;
        color: #333;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
        font-weight: 200;
        letter-spacing: -0.01em;
        vertical-align: top;
        min-width: 130px;
    }
    .button-content:hover span{
        color: #fff;
    }
    .row-book-cat p{
        margin: 0;
        padding: 10px 40px 25px 40px;
        text-align: justify;
        font-size: 19px;
        font-weight: 100;
        letter-spacing: 0.07em;
        color: #555;
    }
    .button-content-container{
        text-align: center;
        background-color: #f9f8f7;
        border-radius: 4px;
        border: 1px solid #d6d6d6;
        width: 100%;
        height: 100%;
        overflow: hidden;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin: auto;
        cursor: pointer;
    }
    .button-content-container:hover{
        background-color: #158cfb;
        border: 1px solid #158cfb;
    }
    .button-content-container:hover .button-content-desc span{
        color: #fff;
    }
    .btn-type-widetext{
        padding: 0 16px;
    }
    .button-content-desc{
        display: table;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .button-content-container .button-content-desc>span{
        display: table-cell;
        vertical-align: middle;
        height: 62px;
        font-size: 18px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 264px;
    }
    .btn-category{
        border-radius: 0;
        font-size: 18px;
        font-weight: 100;
        padding: 5px 30px;
        transition: all 0.3s ease 0s;
        background-color: #ed2524;
        color: #ffffff;
        position: absolute;
        right: 0;
        bottom: 0;
        margin-right: 8%;
        border: none;
        margin-bottom: 50px;
    }
    .btn-introduce{
        border-radius: 0;
        font-size: 18px;
        font-weight: 100;
        padding: 5px 60px;
        transition: all 0.3s ease 0s;
        background-color: #ed2524;
        color: #ffffff;
        text-decoration: none;
        display: table;
        margin: auto;
        margin-top: 20px;
        text-decoration: none;
        margin-bottom: 80px;
    }
    .btn-introduce:hover{
        text-decoration: none;
        color: #fff;
    }
    .btn-introduce:focus{
        text-decoration: none;
        color: #fff;
    }
    .btn-introduce-download{
        margin-bottom: 20px;
        margin-top: 40px;
        padding: 5px 30px;
    }
    .intro-or{
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    .category-grid{
        margin-bottom: 110px;
    }
    .roundedTwo input{
        opacity: 0;
    }
    .categories-value{
        opacity: 0;
    }
    #roundedTwo{
        visibility: hidden;
    }
    .roundedTwo label {
        cursor: pointer;
        position: absolute;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        left: 4px;
        top: 4px;
        -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
        background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
        background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
        background: -o-linear-gradient(top, #222 0%, #45484d 100%);
        background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
        background: linear-gradient(top, #222 0%, #45484d 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
    }
    .roundedTwo label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 11px;
        height: 5px;
        background: transparent;
        top: 6px;
        left: 5px;
        border: 3px solid #fcfff4;
        border-top: none;
        border-right: none;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .roundedTwo label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
    }
    .roundedTwo input[type=checkbox]:checked + label:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }
    .block-low-type{
        margin-top: 0px;
        padding-bottom: 32px;
    }
    .parent-category{
        right: 0;
        margin-right: 8%;
        left: auto;
        margin-left: auto;
        margin-bottom: 40px;
    }
    .block-low-category{
        margin-top: -20px;
    }
    .category-grid-type{
        margin-bottom: 0px;
    }
    .parent-category-type{
        left: 0;
        margin-left: 11%;
        right: auto;
        margin-right: auto;
        margin-bottom: 45px;
    }
    .pricing-block-grid .no-cate{
        padding-top: 0px;
        margin-bottom: 110px;
    }
    .choose-type-loader {
        width: 100%;
        height: 50px;
        position: absolute;
        top: 350px
    }
    .structure-loader{
        top: 300px !important;
    }
    .category-loader{
        top: 178px !important;
    }
    .categories-loader{
        top: 275px !important;
    }
    .choose-type-loader .loader{
        width: 50px;
        height: 100%;
        display: table;
        margin: auto;
        border: 8px solid #f3f3f3;
        border-top: 8px solid #000;
        border-radius: 102%;
        animation: spin 2s linear infinite;
    }
    .row-button{
        height: 125px;
    }
    .pricing-block-grid .pricing-block .book-category-name{
        margin-top: 35px !important;
    }
    /* End Choose Book Categories */
    .re-list-style{
        color: #ed2524;
        list-style: square;
        margin-left: 25px;
    }
    .re-list-style p{
        color: #555;
    }
    .form-reset-password{
        margin-top: 25px;
    }

    .form-reset-password .alert-info {
        color: #ed2524;
        background-color: #ffffff;
        border-color: #ffffff;
    }

    .form-horizontal .form-control-feedback {
        right: 15px;
        position: absolute;
    }
    .form-control-feedback {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        pointer-events: none;
    }
    .glyphicon {
        position: relative;
        top: 10px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .mailchimp-section{
        /*background-color: #ed2524;*/
    }
    .mailchimp-section #mc-embedded-subscribe {
        font-size: 16px;
    }
    #mc_embed_signup{
        clear: left;
    }
    #mc-embedded-subscribe-form{
        padding-left: 0;
    }
    #mc-embedded-subscribe-form label{
        color: #333;
        text-align: center;
    }
    #mc-embedded-subscribe-form h2{
        color: #333;
        text-align: center;
        font-size: 36px;
        font-weight: 300;
        margin-bottom: 30px;
    }
    #mc_embed_signup .asterisk{
        color: #fff;
    }
    #mc_embed_signup .clear {
        margin-bottom: 65px;
    }
    #mc_embed_signup .button{
        background-color: #ed2524;
        border: 1px solid #fff;
        color: #fff;
        display: table;
        margin: auto;
    }
    #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error{
        color: #ed2524;
        font-weight: 700;
    }
    #mc_embed_signup div.response {
        padding: 0;
        margin-top: 0;
        width: 100%;
    }
    #mc_embed_signup form{
        padding-left: 0;
    }
    #mc_embed_signup_scroll .mail{
        margin-bottom: 30px;
    }
    #mc_embed_signup div#mce-responses{
        width: 100%;
        margin-left: 3%;
    }
    #carousel-news{
        background-color: #ed2524;
        padding-bottom: 3em;
    }
    #carousel-news .carousel-inner {
        height: 35em !important;
    }

    #carousel-news .item {
        position: static;
        height: 100%;
    }

    #carousel-news .carousel-indicators .active {
        background-color: #fff;
    }

    #carousel-news .carousel-indicators li {
        border-color: #fff;
    }

    #carousel-news .carousel-indicators {
        bottom: 7em;
    }

    #carousel-news .container {
        text-align: center;
        padding-top: 4em;
        padding-bottom: 4em
    }

    #carousel-news .item h1 {
        color: #fff;
        padding-bottom: 0.5em;
        margin-top: 0;
    }

    #carousel-news .item p {
        padding-top: 1.5em;
        color: #fff;
    }

    #carousel-news .carousel-caption {
        position: static;
        text-shadow: none;
    }
    .editor .title-block .glyphicon {
        top: 3px;
    }
    #carousel-news a{
        display: table;
        margin: auto;
    }
    .logo-admin {
        font-size: 35px;
        line-height: 60px;
        text-align: center;
        padding: 0 10px;
        width: 220px;
        font-family: 'Pinyon Script', cursive;
        font-style: italic;
        font-weight: 500;
        height: 50px;
        display: block;
        margin-bottom: 0!important;
    }
    .book-text-center{
        text-align: center;
        margin-top: 10px;
        border-bottom: none !important;
    }
    .privacy-policy h2{
        border-bottom: 2px solid #fff !important;
        margin-bottom: 0 !important;
    }
    .privacy-policy p{
        text-align: justify;
    }
    .btn-format-continue{
        border-radius: 0;
        font-size: 18px;
        font-weight: 100;
        padding: 5px 30px;
        transition: all 0.3s ease 0s;
        background-color: #ed2524;
        color: #ffffff;
        float: right;
        margin-right: 100px;
        border: none;
        margin-bottom: 40px;
        margin-top: 10px;
    }
    .btn-type-continue{
        margin-right: 123px !important;
    }

    /* Custome button SweetAlert */

    .sweet-alert button {
        background-color: rgb(91, 183, 91) !important;
    }

    /*.sweet-alert button:hover {
        background-color: rgb(91, 183, 91);
    }

    .sweet-alert button:active {
        background-color: rgb(91, 183, 91);
    }*/

    .sweet-alert button.cancel {
        background-color: #da4f49 !important;
    }

    /*.sweet-alert button.cancel:hover {
        background-color: #da4f49;
    }

    .sweet-alert button.cancel:active {
        background-color: #da4f49;
    }*/

    /*.sweet-alert button.cancel:hover {
        background-color: #da4f49;
    }*/

    .text-justify{
        text-align: justify;
    }
    .asset-input-file{
        border: dashed 3px #000;
        padding: 20px;
        display: inline-block;
        margin: 0 220px;
    }
    .asset-input-file-edit{
        display: inline-block;
        margin: 0 0 2em 15em;
    }
    .asset-input-file p{
        margin-top: 10px;
        text-align: center;
    }
    .ass-input{
        z-index: 999;
        line-height: 0;
        font-size: 50px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 130px;
        height: 175px;
        top: 173px;
        left: 39%;
    }

    .ass-edit-input{
        z-index: 999;
        line-height: 0;
        font-size: 50px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 130px;
        height: 130px;
        top: 79px;
        left: 37%;
    }

    .imgs-preview input {
        z-index: 999;
        line-height: 0;
        font-size: 50px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 130px;
        height: 130px;
        top: 78px;
        left: 39%;
    }

    .asset-input-file-edit input{
        z-index: 999;
        line-height: 0;
        font-size: 50px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        width: 130px;
        height: 130px;
    }

    .asset-select{
        font-weight: 800;
    }
    .imgs-preview{
        text-align: center;
        margin-bottom: 30px;
        max-height: 260px;
        overflow: auto;
    }
    .imgs-preview img{
        margin: 2px;
    }
    .imgs-edit-preview{
        text-align: center;
        margin-bottom: 30px;
        max-height: 130px;
    }

    #block-need-help .row-help{
        margin-left: 15px;
        margin-right: 15px;
    }
    #block-need-help .row-help .need-help{
        margin-top: 0px;
        text-align: center;
    }
    #block-need-help .row-help .col-need-help{
        padding-left: 105px !important;
    }

    .term-of-service {
        padding-bottom: 50px;
    }

    .term-of-service > ul {
        margin-left: 50px;
    }

    .sweet-alert p {
        font-weight: 600;
    }

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

    #register-user .form-control-feedback.glyphicon-ok,
    #register-user .form-control-feedback.glyphicon-remove
    {
        left: 0;
        top: 6px;
    }

    #preview .request-print .btn{
        position: absolute;
        right: 10px;
        z-index: 1001 ;
    }
    .required {
        color: #ff0000;
    }
    .loader .editor-ajax-load{
        top: calc(50% - 75px);
    }
    .page-container .page:first-child .page-actions .new-page, .page-container .page:first-child .page-actions .remove-page,
    .page-container .page:first-child .page-actions .move-up
    {
        pointer-events: none;
    }
    .page-container .page:first-child .page-actions .new-page a, .page-container .page:first-child .page-actions .remove-page a,
    .page-container .page:first-child .page-actions .move-up a, .page-container .page:first-child .page-actions .move-down a
    {
        color: #eee;
        pointer-events: none;
    }

    .page-container .page:nth-child(2) .page-actions .move-down, .page-container .page:nth-child(2) .page-actions .remove-page,
    .page-container .page:nth-child(2) .page-actions .move-up
    {
        pointer-events: none;
    }
    .page-container .page:nth-child(2) .page-actions .move-down a, .page-container .page:nth-child(2) .page-actions .remove-page a,
    .page-container .page:nth-child(2) .page-actions .move-up a
    {
        color: #eee;
        pointer-events: none;
    }
    .holder-blank-page{
        display: none;
    }
    .tab-content .holder-blank-page{
        display: none;
    }
    .page .custom-layout-blank .holder-blank-page{
        display: block;
    }

    /* RESPONSIVE */		
    /* luan.nguyen ADDED */		
    @media screen and (max-width: 1024px){		
        .editor{min-width: auto;}		
        #block-need-help .row-help .col-need-help{padding-left: 0 !important;}		
        .editor .content .menu-option, .editor .content #editor-content{height: calc(100% - 55px)!important; overflow-y: auto;}		
        #editor-content .messages{display: none !important;}		
        #editor-content #bottom_wrapper .bottom_wrapper{padding-bottom: 20px;}		
        #bottom_wrapper{margin-top: 10px;}		
        #editor-content #bottom_wrapper p, #editor-content #bottom_wrapper .bottom_wrapper{padding: 0 15px;}		
                
        .sticky-left-panel .sticky-header, .sticky-left-panel .sticky-body{font-size: 1em;}		
        .sticky-left-panel .fa-3x{top: 5px; left: -9px; font-size: 1.5em;}		
        .downToBottom, .backtoTop{
            display: block;
        }
        .page-container::-webkit-scrollbar,
        .list-item::-webkit-scrollbar {
            width: 15px;
            height: 15px;
        }

        .page-container::-webkit-scrollbar-thumb,
        .list-item::-webkit-scrollbar-thumb {
            border-radius: 8px;
            background-color: #C3C3C3;
            border: 2px solid #eee;
        }
    }		
    @media screen and (min-width: 1024px){
        .navbar .container {
            min-width: 1024px;
        }
    }
    @media screen and (max-width: 992px){		
        .editor .content .menu-option, .editor .content #editor-content{height: calc(100% - 80px)!important;}		
    }		
    @media screen and (max-width: 768px){		
        .pricing-block-grid{width: 100%; border: 0 !important;}		
    }

    div[type="photo"]{
        box-shadow: none!important;
    }

    .background-list .color-picker > div{
        position: absolute;
        bottom: 5px;
        left: 5px;
        width: 20px;
        height: 20px;
    }

    .thumbnail a>img, .thumbnail>img {
        min-height: 348px;
    }
    .look-inside{
        display: block;
        min-height: 30px;
        text-align: center;
        color: black;
    }
    .look-inside > img {
        width: 30px!important;
        height: 30px!important;
        min-height: 30px!important;
        display: inline-block!important;
        position: relative;
        top: 15px;
    }

    .look-inside:hover{
        text-decoration: none;
        color: red;
    }

    .thumbnail img{
        width:100%;
    }
    .sortable-placeholder{
        background-color:rgba(255, 82, 82, 0.3);
    }

    .list {
        min-height: 150px;
    }

    .paid-option{
        border-left: 1px solid #dedede;
    }

    .free-option .month {
        visibility: hidden;
    }

/* Ensure the cover page (first page) is on its own row on the left */
.editor .content .page:first-child {
    display: block;
}
/* In grid layout, make the cover span both columns so it sits alone */
#editor-content .page-container > .page:first-child {
    grid-column: 1 / -1;
    /* Add a bit of top margin so the cover isn't cut off at the top */
    margin-top: 20px;
}