html,
body {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
}

input,
button,
select,
optgroup,
textarea,
label,
.alert,
.badge,
.blockquote-footer,
.btn,
.navbar,
.pagination,
.valid-feedback,
.invalid-feedback {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
}

.font-size-sm {
    font-size: 14px;
}

/* .btn-sm, */
.btn-group-sm>.btn,
.fc .btn-group-sm>button,
.ajax-upload-dragdrop .btn-group-sm>.ajax-file-upload,
.swal2-modal .swal2-buttonswrapper .btn-group-sm>.swal2-styled,
.wizard>.actions .btn-group-sm>a,
.fc button {
    padding: 0.2rem 0.5rem;
    font-size: 0.812rem;
    line-height: 1.5;
    border-radius: 0.1875rem;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: 'Nunito', sans-serif;
}

.font-italic {
    font-style: italic;
}

.display-flex {
    display: flex;
}

.btn-ob {
    padding: 8px 16px;
    line-height: 1.5;
    border: 1px solid #CED3D4;
    outline: transparent solid 2px;
    outline-offset: 2px;
    color: #012328;
    box-shadow: 0px 4px 10px rgba(20, 20, 43, 0.04);
}

.btn-ob:hover {
    border-color: #DF6951;
    color: #012328;
}

.btn-ob.btn-active {
    border-color: #DF6951;
    color: #DF6951;
}

.btn-ob.btn-lg {
    padding: 0.6rem 1.8rem;
    line-height: 1.5;
}

.btn-sm{
    padding: 0.25rem 0.5rem;
    font-size: 0.812rem;
    border-radius: 0.4rem;
}

h1 {
    font-size: calc(1rem + 2.4vw);
    font-weight: bold;
    text-align: center;
    padding: 15px 0;
    margin-bottom: 0;
    text-transform: uppercase;
}

h1.display-3 {
    text-align: left;
    padding: 0;
    text-transform: inherit;
    font-size: 40px;
}

h1.title {
    text-transform: inherit;
}

strong, .strong {
    font-weight: bold;
}

h4 {
    font-weight: bold;
}

.badge {
    font-size: 14px;
}

.ml-auto {
    margin-left: auto;
}

.float-right {
    float: right;
}

.modal-header {
    border-bottom: none;
}

.modal-body {
    padding: 30px;
    padding-top: 10px;
}

.modal-body img {
    max-width: 100%;
}

#modalEditProfileMaker .modal-footer {
    padding: 5px;
}

#modalEditProfileMaker .modal-header {
    padding: 10px;

}

#modalEditProfileMaker .modal-title {
    line-height: 1.3;
}

.preview-box {
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    box-shadow: 0 0 30px #000000;
    max-width: 100%;
    background-image: url(../img/logox64.png);
    background-repeat: no-repeat;
    background-position: center center;
}

.preview-box .preview-img {
    max-width: 100%;
}

.fb-preview-box {
    margin-top: 30px;
    position: relative;
    padding-bottom: 50px;
}

.cover-photo {
    width: 100%;
    height: 100px;
    border: 3px solid #9e9e9e;
}

.fb-preview-img {
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 100px;
    z-index: 5;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #9e9e9e;
    background-color: #f1f1f1;
}

.logo-header,
.logo-footer {
    height: 40px;
}

.accordion-button:focus {
    box-shadow: none;
}

.contact a {
    color: #fff;
}

@media (max-width: 479px) {
    .list-inline-item {
        display: block;
        text-align: center;
    }

    .list-inline-item:not(:last-child) {
        margin-right: 0;
    }
}

.hide {
    display: none;
}

.agree-info {
    margin-bottom: 15px;
}

.btn_gg {
    background-color: #eb4026;
    display: inline-flex;
    width: 100%;
    cursor: pointer;
    border: 1px solid #e1e6e6;
    color: #fff;
}

.btn_gg:hover {
    color: #ffbcbc;
}

.btn_social .fa {
    height: 44px;
    width: 51px;
    display: block;
    float: left;
    text-align: center;
    line-height: 44px;
    font-size: 22px;
}

.btn_gg .fa {
    background-color: #e23015;
}

.btn_social .btn_text {
    display: inline-block;
    text-align: center;
    padding: 15px 12px 10px;
    width: 100%;
    line-height: 20px;
    font-weight: 100;
    font-size: 18px;
}

.btn-social {
    background-color: #eb4026;
    cursor: pointer;
    border: 1px solid #e1e6e6;
    color: #fff;
    padding: 10px 15px;
    display: inline-flex;
}

.btn-social:hover {
    color: #fff;
    text-decoration: none;
}

.btn-social .fa {
    line-height: 20px;
    font-size: 20px;
    height: 20px;
}

.btn-social .btn-text {
    text-align: center;
    padding: 0 5px;
    font-weight: 100;
    height: 20px;
}

.btn-fb {
    background-color: #3b5998;
    color: #fff;
}

.grecaptcha-badge {
    z-index: 1;
}

#new_tool {
    display: flex;
}

#form_create_frame {
    margin-bottom: 30px;
    width: 100%;
}

#new_tool .control-label {
    text-transform: uppercase;
    font-size: 15px;
}

#new_tool .form-group {
    margin-top: 10px;
}

.more_info {
    text-decoration: underline;
    display: block;
    cursor: pointer;
}

.item-inactive {
    display: none;
}

.input-select-frame {
    display: none !important;
}

.area-add-frames .btn-delete-frame,
.area-add-frames .btn-preview {
    background-color: #fff;
    border: 1px solid;
    line-height: 30px;
    height: 30px;
    width: 30px;
    float: left;
}

.area-add-frames .btn-preview {
    float: right;
}

.preview_frapho span {
    display: block;
    margin-bottom: 15px;
    margin-top: 20px;
    font-size: 19px;
    border-left: 5px solid;
    padding-left: 10px;
    clear: both;
}

.preview_frapho span:first-child {
    margin-top: 0;
}

.area-add-frames .item {
    width: 140px;
    float: left;
    margin-bottom: 40px;
    position: relative;
    margin-right: 10px;
    margin-left: 10px;
}

.area-add-frames .btn-group {
    position: absolute;
    bottom: -33px;
    width: 100%;
    display: inline-block;
}

.preview_frapho img {
    max-width: 140px;
    max-height: 140px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    float: left;
}

.frame-list .frame-item {
    padding: 10px;
}

.frame-list .image-area {
    width: 200px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: auto;
    background-color: #fff;
}

.frame-list .frame-info {
    display: block;
    padding: 15px 0;
}

.frame-list .frame-info a {
    text-decoration: none;
    color: #333;
}

.frame-list .frame-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
    line-height: 25px;
    max-height: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 50px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
}

.frame-list .controls {
    padding: 0 10px;
}

.frame-list .created-date,
.frame-list .expired-date {
    font-size: 12px;
    margin-bottom: 5px;
}

.frame-list .expired-date {
    margin-bottom: 15px;
}

.frame-list .expired-date {
    color: #d95350;
}

.area-choose-extra-frame {
    margin-bottom: 25px;
}

.avatar {
    border-radius: 50%;
    background: #fff;
    max-width: 96px;
}

.creator-info .avatar {
    height: 80px;
    width: 80px;
    margin: 15px auto;
    display: block;
    border: 2px solid #d15234;
}

.creator-info .name {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.sticky-footer {
    position: fixed;
    width: 100%;
    bottom: -9px;
    left: 0px;
    text-align: center;
    z-index: 999;
    margin-bottom: 0 !important;
    background-color: #fff;
}

.sticky-footer-inner {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inline-block;
    margin-bottom: 0 !important;
    max-width: 100%;
}

.sticky-footer .btn-close-ads {
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    position: absolute;
    right: 0;
    top: -24px;
    display: none;
}

.ads-footer {
    width: 729px;
    height: 90px;
    max-width: 100%;
}

.sticky-footer .btn-close-ads a {
    border: 1px solid rgba(0, 0, 0, .35) !important;
    padding: 3px !important;
    font-size: 12px !important;
    color: #fff !important;
    font-weight: bold !important;
    background-color: #777 !important;
    pointer-events: none;
}

label .required {
    color: #F55767;
}

#form_create_event {
    min-height: 500px;
    display: flex;
}

.form-check {
    margin-bottom: 0.5rem;
}

.form-check-label {
    margin-top: 0.1rem;
    margin-bottom: 0;
}

.form-check-input:hover {
    cursor: pointer;
}

.form-check-label:hover {
    cursor: pointer;
}

.form-text {
    font-size: 80%;
    color: #9a9a9a;
}

.form-check .form-text {
    margin-top: 0;
}

.slug-spinner {
    position: absolute;
    right: 1.6rem;
    top: 2.8rem;
    z-index: 1;
    display: none;
}

.slug-spinner .spinner-border {
    width: 1rem;
    height: 1rem;
}

.slug-component {
    position: relative;
}

.slug-component.loading .slug-spinner {
    display: block;
}

.btn-next {
    float: right;
}

.btn-back {
    float: left;
}

.step {
    /* margin-top: 3rem; */
    display: none;
    position: relative;
}

.step-1 {
    display: block;
}

#step_2,
#step_3 {
    display: none;
}

.flex-ali-it-cen {
    align-items: center
}

.frame-view {
    width: 500px;
    height: 300px;
    display: flex;
    border: 1px dashed #333;
    border-radius: 15px;
    background-image: url(../img/pixel.png);
    /* background-image: url(/img/logox64.png); */
    /* background-repeat: no-repeat; */
    background-position: center center;
    padding: 30px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

.frame-view.have-image .instruction-note {
    display: none;
}

@media (max-width: 500px) {
    .frame-view {
        width: 100%;
        height: auto;
        padding-top: 45px;
    }
}

.frame-view img {
    display: none;
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.input-add-frame {
    display: none;
}

.add-frame-area {
    width: 450px;
    max-width: 100%;
    display: block;
    margin: auto;
    /* height: 70px; */
}

@media (max-width: 500px) {
    .add-frame-area {
        width: 100%;
    }
}

.btn-add-frame {
    /* width: 70px;
    height: 70px;
    border: 1px dashed #333; */
    margin: auto;
    display: block;
}

.label-max-frame {
    display: none;
    margin: auto;
    width: fit-content;
    cursor: default;
}

/* .add-frame-area .frame-list {
    float: left;
} */

.add-frame-area .frame-list img {
    max-width: 100%;
    /* border: 1px solid #333; */
}

.add-frame-area .frame-list .item {
    width: 69px;
    margin: 10px;
    cursor: pointer;
    float: left;
    position: relative;
}

.add-frame-area .frame-list .item:last-child {
    margin-right: 0;
}

.add-frame-area .frame-list .item.active img {
    border: 2px dashed #d15234;
    padding: 2px;
}

canvas.hide {
    position: absolute;
    top: -9000px;
}

.add-frame-area .btn-delete-frame {
    border: 1px solid;
    line-height: 17px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    padding: 0;
    position: absolute;
    left: -12px;
    top: -12px;
    color: white;
    background-color: #e14727;
    font-size: 12px;
}

.datetimepicker td,
.datetimepicker th {
    width: 32px;
    height: 32px;
}

.datetimepicker .datetimepicker-hours span,
.datetimepicker .datetimepicker-minutes span {
    height: 30px;
    line-height: 30px;
}

.slug-link {
    color: #2500F9;
    /* display: none; */
}

.blockUI.blockOverlay {
    z-index: 1500 !important;
}

.blockUI.blockMsg {
    border: none !important;
    border-radius: 10px;
    background-image: url(../img/waiting.gif);
    background-size: contain;
    width: 40px;
    height: 40px;
    display: block !important;
    top: 49%;
    left: 49%;
    z-index: 1511 !important;
}

.image-editor {
    width: 100%;
    max-width: 500px;
    /* height: 500px; */
    margin-left: auto;
    margin-right: auto;
    border: 1px dashed #333;
    border-radius: 10px;
    padding: 25px;
}

.callout {
    padding: 0.5rem;
    /* margin-top: 1.25rem; */
    margin-bottom: 1.25rem;
    background-color: #f8f9fa;
    border-left: 0.25rem solid #dee2e6;
    border-radius: 0.25rem;
}

.callout-warning {
    background-color: rgba(255, 193, 7, .075);
    border-color: rgba(255, 193, 7, .5);
}

.callout-info {
    border-left-color: #5bc0de;
}

.cd-num {
    color: #d15234;
}

.event-type {
    color: #e14727;
    background-color: #FFFAF0B2;
    line-height: 1.2rem;
    width: auto;
    text-align: center;
    margin: auto;
    font-weight: 100;
    padding: 4px 10px;
    font-weight: 400;
    box-shadow: 0 2px 0px 0 rgb(0 0 0 / 16%), 0 -4px 16px 0 rgb(0 0 0 / 8%);
}

.event-type-0,
.event-type[data-val="0"]{
    display: none;
}

.col-auto .bg-image {
    width: 250px;
    padding: 30px;
    background-color: rgb(255 193 7 / 10%);
    pointer-events: none;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

@media (max-width: 767px) {
    .col-auto .bg-image {
        width: 100%;
    }
}

.bd-placeholder-img {
    text-anchor: middle;
}

.bottom-link {
    position: absolute;
    bottom: 15px;
}

@media (max-width: 767px) {
    .bottom-link {
        position: inherit;
        bottom: 0;
    }
}

.btn i {
    margin-right: 7px;
}

.event-list .event-type {
    margin: 0;
    margin-bottom: 0.75rem;
    width: fit-content;
}

.event-img-link {
    display: block;
}

.event-link {
    /* display: block; */
    color: #0d0d0d;
}

.editor {
    min-height: 100px;
    border-top: 1px solid #e3e3e3;
}

.txt-warning {
    color: #e34517;
}

.sub-title {
    padding: 15px 0;
}

#upload_photo {
    display: none;
}

/* .select-image-btn {
    margin: auto;
    display: block;
} */

#resize_editor .img-thumbnail {
    background-size: auto;
    height: 400px;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-image: url(../img/logox64.png);
    background-color: transparent;
    border-radius: 0;
    max-width: 100%;
    max-height: 100%;
}

.area-editor {
    width: 600px;
    height: 400px;
    display: block;
    margin: 0 auto 3rem;
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background-image: url(../img/pixel.png);
    background-position: center center;
    padding: 30px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .area-editor {
        width: 400px;
        height: 400px;
    }
}

.editor .step {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 3rem;
}

.editor .download-btn {
    float: right;
}

.fr {
    float: right;
}

.editor .title {
    font-size: 30px;
    line-height: 30px;
}

.img-info {
    /* border-top: 1px dashed #333; */
    padding: 10px 0;
    display: none;
    /* border-bottom: 1px dashed #333; */
}

.img-info .name {
    font-weight: bold;
    word-break: break-word;
}

.img-info p {
    margin-bottom: 0;
}

.bl {
    border-left: 1px solid #333;
}

.step-3 .progress {
    height: 0.5rem;
}

.editor-profit {
    background-image: url(../img/waiting.gif);
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fefaf1;
    display: none;
    position: relative;
}

.reset-step-btn {
    display: block;
    margin: auto;
}

.waiting-txt {
    display: block;
    text-align: center;
}

.left-editor-area {
    background-color: #f6f6f6;
    padding-bottom: 4rem
}

.right-editor-area {
    position: relative;
}

@media (max-width: 767px) {
    .left-editor-area {
        padding-bottom: 0;
    }

    .right-editor-area {
        border-left: none;
    }
}

.hide-area {
    opacity: 0.3;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #333;
    left: 0;
    bottom: 0;
}

.editor-profit .close-ads-btn {
    padding: 0 10px;
    font-size: 13px;
    position: absolute;
    right: -15px;
    top: -13px;
    z-index: 10;
}

.list-size {
    list-style: none;
}

.list-size li {
    float: left;
    margin: 0 5px;
}

.list-size li:first-child {
    margin-left: 0;
}

.list-size .btn {
    border-radius: 22px;
    /* background-color: #f6f6f6;
    color: #333; */
    padding: 0px 10px;
    line-height: 30px;
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

.swal2-html-container {
    line-height: 25px !important;
}

.remove-bg-title img {
    width: 180px;
    margin: auto;
    display: block;
}

.remove-bg-area,
.form-tool-area,
.tool-area {
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background-image: url(../img/pixel.png);
    background-position: center center;
    padding: 30px;
}

.action-area {
    border: 2px dashed rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background-image: url(../img/pixel.png);
    background-position: center center;
    margin-top: 40px;
    display: none;
}

.remove-bg-form .btn-upload-image {
    margin: auto;
    display: block;
}

.remove-bg-form .note,
.action-area .note {
    text-align: center;
    display: block;
    font-size: 13px;
    margin-top: 14px;
    color: #b3b3b3;
}

.rm-bg-img-input {
    position: relative;
}

.rm-bg-img-input,
.rm-bg-img-output {
    background-image: url(../img/pixel.png);
    background-position: center center;
}

.rm-bg-img-input img,
.rm-bg-img-output img {
    max-width: 100%;
    max-height: 400px;
    margin: auto;
    display: block;
}

@media (max-width: 767px) {

    .rm-bg-img-input img,
    .rm-bg-img-output img {
        max-height: 300px;
    }
}

@keyframes placeHolderImgLoading {
    0% {
        background-position: -800px 0
    }

    100% {
        background-position: 800px 0
    }
}

.image-loading {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderImgLoading;
    animation-timing-function: linear;
    background: linear-gradient(to right, #00000000 0%, #bbbbbb 10%, #00000000 20%);
    background-size: 800px 104px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#img_input_tab_pane,
#img_output_tab_pane {
    display: none;
}

#img_input_tab_pane.show,
#img_output_tab_pane.show {
    display: block;
}

.action-area .btn-download-image {
    margin: auto;
    display: block;
}

.rm-bg-processing .loading,
.action-area .loading {
    width: 40px;
    height: 40px;
    background-image: url(../img/waiting.gif);
    display: block;
    background-size: contain;
    margin: auto;
}

.waiting-text {
    text-align: center;
    display: block;
}

.action-area-status {
    display: none;
    padding-left: 15px;
    padding-right: 15px;
}

.rm-bg-banner-process img {
    max-width: 100%;
    max-height: 150px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

@media (max-width: 767px) {
    .rm-bg-banner-process img {
        max-height: 200px;
    }
}

@keyframes rm-btn-color-change {
    0% {
        color: red;
    }

    50% {
        color: blue;
    }

    100% {
        color: red;
    }
}

@keyframes rm-btn-bg-color-change {
    0% {
        background-color: red;
    }

    50% {
        background-color: blue;
    }

    100% {
        background-color: red;
    }
}

.rm-bg-done a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    animation: rm-btn-color-change 2s infinite;
}

.rm-bg-demo-area,
.compare-area {
    width: 720px;
    max-width: 100%;
    margin: auto;
    border-radius: 25px;
    border: 4px dashed #e1eaed;
    background-image: url(../img/pixel.png);
    background-position: center center;
}

.compare-area {
    width: 550px;
    height: 550px;
    border-radius: 0;
}

@media (max-width: 767px) {
    .rm-bg-demo-area {
        width: 100%;
    }
}

.rm-bg-demo-area img {
    max-width: 100%;
}

.compare-area img {
    max-width: 100%;
    max-height: 100%;
}

.rm-bg-demo-list,
.rm-bg-use-action {
    list-style: none;
    display: flex;
    justify-content: center;
}

.rm-bg-demo-list li,
.rm-bg-use-action li {
    float: left;
    margin: 0 10px;
}

.rm-bg-demo-list li .btn-active,
.rm-bg-use-action li .btn-active {
    color: #fff;
    background-color: #2500F9;
    border-color: #2500F9;
}

.rm-bg-use-list,
.rm-bg-profile-maker-list {
    width: 100%;
    list-style: none;
    display: inline-block;
    padding-left: 0;
}

@media (max-width: 767px) {

    .rm-bg-use-list,
    .rm-bg-profile-maker-list {
        width: 1000px;
    }

    .rm-bg-use-area {
        overflow-x: auto;
    }
}

.rm-bg-use-list li,
.rm-bg-profile-maker-list li {
    width: 25%;
    float: left;
    padding: 5px;
}

.rm-bg-profile-maker-list li {
    width: 19%;
    padding: 0;
    margin: 2px;
}

.rm-bg-use-list li span,
.rm-bg-profile-maker-list li span {
    max-width: 100%;
    border-radius: 25px;
    border: 2px dashed #e1eaed;
    background-position: center center;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.rm-bg-use-list li:nth-child(2) div {
    background-image: url(../img/pixel.png);
    background-position: center center;
}

.rm-bg-use-list li p {
    text-align: center;
    padding: 10px;
    margin: 0;
}

.rm-bg-price-area {
    overflow-x: auto;
}

.rm-bg-price-list {
    width: 1500px;
    list-style: none;
    display: inline-block;
}

.rm-bg-price-list li {
    width: 20%;
    float: left;
    padding: 5px;
}

@media (max-width: 767px) {
    .rm-bg-price-list {
        width: 1000px;
    }
}

/* .nav-item {
    position: relative;
    display: flex;
    align-items: center;
} */

#rm_bg_result_tab .nav-item .nav-link {
    outline: none;
}

.nav-sub-link {
    width: 30px;
    padding: 5px;
    color: #fff;
    animation: rm-btn-bg-color-change 2s infinite;
    border-radius: 20px;
    font-size: 12px;
}

@media (max-width: 991px) {
    .nav-sub-link {
        top: 5px;
        left: 80px;
    }
}

.profile-maker-result-avatar {
    border-radius: 25px;
    border: 2px dashed #e1eaed;
    margin-left: auto;
    width: 250px;
    height: 250px;
    background-image: url(../img/pixel.png);
    background-position: center center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767px) {
    .profile-maker-result-avatar {
        margin-right: auto;
    }
}

.profile-maker-src {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.profile-maker-tool-area {
    display: none;
}

.fixed .profile-maker-tool-area {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 99;
}

.profile-maker-tool-list,
.type-background-list {
    padding-left: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}

.profile-maker-tool-list li {
    float: left;
    margin: 0 0.6rem;
    border-radius: 20px;
    width: 110px;
    padding: 0.6rem;
    line-height: 20px;
}

@media (max-width: 575px) {
    .profile-maker-tool-list li {
        width: auto;
        padding: 0.7rem 1rem;
    }
}

.profile-maker-tool-show-category .dropdown-menu li {
    width: 100%;
    padding: 0;
    margin: 0;
}

.profile-maker-tool-show-category .dropdown-menu li a {
    padding: 8px 16px;
}

/* .profile-maker-tool-show-category {
    display: none;
} */

.profile-maker-tool-show-category>a {
    color: #fff;
}

/* @media (max-width: 991px) {
    .profile-maker-tool-show-category {
        display: block;
    }
} */

@media (min-width: 992px) {
    .type-background-list {
        display: flex !important;
    }
}

.type-background-list li {
    float: left;
    margin: 0;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
}

.type-background-list li.active {
    border-bottom: 2px solid #2500f9;
    border-radius: 0;
}

.profile-maker-tool-list li i {
    display: block;
    margin-bottom: 5px;
    margin-right: 0;
    margin-top: 5px;
}

.profile-maker-tool-list li span {
    margin-top: 10px;
}

.profile-maker-tool-list li.btn-active {
    color: #fff;
    background-color: #2500F9;
    border-color: #2500F9;
}

#rm_bg_profile_maker_demo {
    --current-image: none;
}

#profile-maker-content {
    min-height: 450px;
    --current-image: none;
    --current-shadow: none;
}

.profile-maker-item {
    overflow: hidden;
    border: 2px dashed #e1eaed;
    border-radius: 50%;
    width: 250px;
    height: 250px;
    margin: 0 auto 35px;
    cursor: pointer;
}

@media (max-width: 820px) {
    .profile-maker-item {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 767px) {
    .profile-maker-item {
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 499px) {
    .profile-maker-item {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 420px) {
    .profile-maker-item {
        width: 150px;
        height: 150px;
    }
}

.profile-maker-template-item {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: all .2s ease-out;
    background-size: contain;

}

.profile-maker-photo {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: var(--current-image, none);
}

.profile-maker-photo.shadowed {
    filter: var(--current-shadow, none);
}

.profile-maker-bg {
    position: absolute;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    background-size: contain;
    overflow: hidden;
    transition: background-color .3s ease-out;
}

.profile-maker-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: inherit;
}

.profile-maker-decal {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gray-style {
    filter: grayscale(100%);
}

.profile-maker-double-color {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: .2;
}

.profile-maker-double-color.left {
    margin-left: -4px;
    background-color: red;
}

.profile-maker-double-color.right {
    margin-left: 4px;
    background-color: blue;
}

.profile-maker-double-color,
.profile-maker-photo.double-color {
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-image: var(--current-image, none);
    mask-image: var(--current-image, none);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    ;
}

.profile-maker-template-item.blending {
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-image: var(--current-image, none);
    mask-image: var(--current-image, none);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    mask-position: 50%;
}

.profile-maker-photo-masked {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.profile-maker-item.masked .profile-maker-template-item,
.profile-maker-photo-masked {
    -webkit-mask-image: none;
    mask-image: none;
    -webkit-mask-image: var(--current-image, none);
    mask-image: var(--current-image, none);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    mask-position: 50%;
}

#modalEditProfileMaker .modal-title {
    width: 200px;
}

#modalEditProfileMaker .modal-title i {
    float: left;
    margin-right: 10px;
}

.profile-maker-tool {
    /* display: none; */
    width: 100%;
    max-width: 350px;
    margin: auto;
}

.canvas-area {
    display: block;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background-image: url(../img/pixel.png);
    background-position: center center;
}

.canvas-area canvas {
    position: absolute;
    top: 0;
    cursor: auto;
    max-width: 100%;
    /* box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); */
    box-shadow: 0 3px 10px 0 rgb(0 0 0 / 15%), 0 0px 0px 0 rgb(0 0 0 / 2%);
}

.layer-frame-shape {
    position: absolute;
    top: 0;
    border-radius: 50%;
    border: 2px dashed #e1eaed;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.image-zoom,
.image-rotate {
    position: relative;
    display: flex;
}

.image-zoom .zoom-value,
.image-rotate .rotate-value {
    cursor: pointer;
    position: absolute;
    left: calc(50% - 15px);
    top: -11px;
    height: 20px;
    font-size: 14px;
}

.image-rotate .rotate-value {
    left: calc(50% - 10px);
}

.image-zoom .btn,
.image-rotate .btn {
    color: #fff;
    float: left;
    width: 34px;
    height: 34px;
    padding: 0.65rem;
    line-height: 10px;
    border: none;
}

.image-zoom .btn:hover,
.image-rotate .btn:hover {
    color: #fce1c5;
}

.image-zoom-input,
.image-rotate-input {
    width: -webkit-calc(100% - 92px);
    width: -moz-calc(100% - 92px);
    width: calc(100% - 92px);
    float: left;
    margin: 0 10px;
    height: 36px;
    cursor: pointer;
}

.tool-control {
    position: relative;
}

.tool-control button {
    font-size: 13px;
    line-height: inherit;
    /* padding: 3px 9px; */
    border: 1px solid #333;
    border-radius: 5px;
}

.tool-control .btn-active {
    background-color: #FCAE61;
    border: 1px solid #ff9329;
    color: #fff;
}

.tool-control button:hover {
    color: #FCAE61;
    border-color: #FCAE61;
}

.tool-control .btn-active:hover {
    color: #fff;
    border-color: #fff;
}

.tool-control button:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.tool-control .nav-link {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding: 4px 8px;
}

.tool-control-edit-image {
    position: relative;
}

.anchor-top-right {
    position: absolute;
    top: 0;
    right: 0;
}

.color-picker-item-bg {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 3px;
}

.color-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, 40px);
    grid-gap: 0;
    justify-content: space-between;
}

.color-picker-item {
    cursor: pointer;
    margin: 10px 4px 0;
}

.color-picker-label {
    text-align: center;
    border-bottom: 1px dashed #333;
}

.shadow-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, 70px);
    grid-gap: 0;
    justify-content: space-between;
}

.shadow-picker-item {
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px 3px;
    padding: 5px 0;
}

#profile_maker_canvas {
    -webkit-transition: border-radius 0.3s;
    transition: border-radius 0.3s;
    border-radius: 0;
}

#profile_maker_canvas.square {
    border-radius: 0;
}

#profile_maker_canvas.circle {
    border-radius: 50%;
}

.btn-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.img-result {
    width: 180px;
    margin: auto;
    display: block;
}

.img-result-banner img {
    max-width: 100%;
    max-height: 250px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.btn-edit-image-quick {
    float: left;
}

.btn-edit-image-action .btn {
    margin-left: 10px;
}

.profile-maker-demo-area {
    display: none;
}

.profile-maker-demo-area h3 {
    animation: rm-btn-color-change 2s infinite;
}

.profile-maker-demo {
    overflow-x: auto;
}

.event-report i {
    margin-right: 5px;
}

.leader-board-content {
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.leader-board-content h2{
    font-size: 16px;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 66px;
    padding-top: 3px;
    margin-top: -3px;
    margin-bottom: 15px;
    line-height: 22px;
}

/* .event-item h2 {
    max-height: 29px;
    white-space: nowrap;
} */

.leader-board-content .top-1 h2 .ob-icon {
    float: none;
    display: inline-block;
    margin-bottom: -1px;
}

.leader-board-content .top-1 h2 {
    font-size: 23px;
    overflow: initial;
    text-overflow: initial;
    padding: 0;
    margin: 0;
    max-height: initial;
    word-wrap: initial;
    line-height: 26px;
}

.frame-img {
    width: 130px;
    border-radius: 50%;
    /* border-radius: 8px; */
    border: 2px solid #616368;
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%);
}

.event-list .frame-img {
    width: 100px;
}

@media (max-width: 576px) {
    .frame-img {
        width: 100px;
    }
}

.top-1 .frame-img {
    width: 200px;
    margin: auto;
    display: block;
    border-color: #f7d42c;
}

.top-1 .event-type {
    display: table;
}

.top-1 .event-type:empty,
.event-item .event-type:empty {
    display: none;
}

.top-2 .frame-img {
    border-color: #c5bbbb;
}

.top-3 .frame-img {
    border-color: #8c5234;
}

.top-badge {
    font-size: 15px;
    display: block;
    position: relative;
    line-height: 1;
    margin-top: -13px;
}

.top-1 .top-badge {
    margin-top: -20px;
    font-size: 20px;
}

.top-badge i {
    font-size: 27px;
}

.top-1 .top-badge i {
    /* animation: badge-top-1 2s infinite; */
    color: #f7d42c;
    font-size: 37px;
}

.top-2 .top-badge i {
    color: #c5bbbb;
}

.top-3 .top-badge i {
    color: #8c5234;
}

.top-badge .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
}

.leader-board-list {
    padding: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}

.leader-board-list li {
    display: inline-block;
    margin-bottom: 10px;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e4e4;
}

.leader-board-list .event-type,
.event-item .event-type {
    font-size: 13px;
}

/* .event-item .event-type {
    margin: auto;
    display: block;
} */

.badge-frame {
    float: left;
    margin-right: 15px;
}

.leader-board-list .event-report,
.event-item .event-report {
    float: right;
    margin-top: 4px;
    font-size: 13px;
}

.event-item .event-report {
    margin-top: 0;
    margin-bottom: 0;
}

.event-item{
    border-radius: 8px;
    overflow: hidden;
}

.event-item .event-img-link {
    background-color: #40576d12;
    /* border-radius: 8px; */
    box-sizing: border-box;
    /* overflow: hidden; */
    position: relative;
    width: 100%;
    display: block;
    height: 200px;
}

.event-img-area {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 14px;
    height: 100%;
}

.event-img-link .multiple{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    border-top-left-radius: 8px;
    line-height: 1;
    padding: 6px 8px;
    border: 1px solid #f2f3f5;
}

.event-img-link .multiple .fa-solid{
    color: #012328;
}

.event-img-area .event-img {
    -o-object-fit: scale-down;
    object-fit: scale-down;
    /* height: 100%;
    width: 100%; */
    max-height: 100%;
    max-width: 100%;
}

.event-info{
    border: 1px solid #e7ebf1;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: none;
}

.event-info h2{
    color: #333;
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 21px;
    line-height: 1.4;
}

.event-info .event-link {
    color: #333;
    font-weight: 600;
}

.created-time {
    font-size: 13px;
}

.view-report-type-list {
    list-style: none;
    display: flex;
    justify-content: center;
}

.view-report-type-list li {
    float: left;
    margin: 0 10px;
}

.view-report-type-list li .btn-active {
    color: #fff;
    background-color: #2500F9;
    border-color: #2500F9;
}

.btn-edit-image-group .btn {
    color: #fff;
    /* border-radius: 5px; */
}

.event-preview {
    width: 337px;
    /* background-color: #fff5e8; */
}

.event-preview-box {
    background-color: #ffffff;
    border: 8px solid #333;
    border-radius: 30px;
    width: 390px;
    height: 844px;
    max-width: 80%;
    margin: 30px auto;
    overflow: hidden;

    .preview-title {
        padding-top: 15px;
        /* font-size: calc(1rem + 0.3vw); */
        font-weight: bold;
        font-size: 17px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .event-header {
        width: 100%;
        margin: 0;
    }

    .image-editor {
        width: 92%;
        padding: 15px;
    }

    .progress {
        height: 0.5rem;
    }

    .select-image-btn {
        margin: auto;
        display: block;
        padding: 5px 10px;
        font-size: 12px;
        cursor: default;
    }

    .select-image-btn i {
        font-size: 11px;
    }

    .area_frame {
        box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    }

    .area_frame canvas {
        max-width: 100%;
    }

    .badge {
        font-size: 12px;
        line-height: 1rem;
    }
}

.qr-code {
    width: 100px;
    height: 100px;
    margin: auto;
    overflow: hidden;
}

.qr-code img {
    max-width: 100%;
}

.addon-debug span {
    word-break: break-all;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.instruction-note:hover {
    cursor: pointer;
}

.btn-min-150 {
    min-width: 150px;
}

ul.list-style-none {
    list-style: none;
    padding-left: 0;
}

/* .event-item {
    border-bottom: 1px solid #e4e4e4;
    display: inline-block;
    width: 100%;
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 0px 9px 0 rgb(0 0 0 / 19%);
    padding: 20px;
    border-radius: 15px;
} */

/* @media (max-width: 575px) {
    .event-item {
        padding: 10px;
    }
} */

/* .event-item .created-time {
    font-size: 13px;
} */

/* .event-item .action-list .btn {
    font-size: 13px;
    padding: 4px 10px;
} */

.text-upcase {
    text-transform: uppercase;
}

.zalo-share-btn {
    padding: 0;
    width: 50px !important;
    height: 50px !important;
}

.zalo-share-btn i {
    margin-right: 0;
}

.tab-title {
    display: flex;
}

.btn-link:focus {
    -webkit-box-shadow: none;
    box-shadow: none;

}

.btn-link h5 {
    color: #2500F9;
    margin-bottom: 0;
}

.btn-link.collapsed .fa-solid {
    transform: rotate(180deg);
}

.ob-icon {
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    display: block;
}

.icon-zalo {
    background-image: url(../img/icon/zalo_icon.svg);
    background-size: contain;
    background-color: #0068ff;
}

.icon-verified {
    background-image: url(../img/icon/verified.svg);
    background-size: contain;
    width: 20px;
    height: 20px;
}

.icon-curve {
    background-image: url(../img/icon/curve-line.png);
    background-size: contain;
    width: 20px;
    height: 20px;
}

.leader-board-content h2 .ob-icon,
.event-item h2 .ob-icon {
    float: none;
    display: inline-block;
    margin-bottom: -4px;
}

.create-event h1{
    /* font-size: 2.48832rem; */
    font-size: calc(1.37383rem + 1.48598vw);
}

.create-event h4{
    font-size: calc(1.269rem + 0.228vw);
}

.create-event h5 {
    font-size: 1.2rem;
}

@media (min-width: 1200px) {
    .create-event h1 {
        font-size: 2.48832rem;
    }

    .create-event h4 {
        font-size: 1.44rem;
    }


}

.premium-label {
    display: block;
    width: 90px;
    margin: auto;
    text-align: center;
    background-color: #00d566;
    color: #fff;
    padding: 0px 10px;
    position: relative;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.premium-label .icon-verified {
    position: absolute;
    left: -19px;
    width: 30px;
    height: 30px;
    top: -3px;
}

#form_edit_event .nav-pills .nav-link {
    background-color: aliceblue;
}

#form_edit_event .nav-pills .nav-link.active {
    background-color: #2500F9;
}

.form-label {
    font-weight: bold !important;
}

.ob-list img {
    width: 330px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#nav-premium-tab .icon-verified {
    margin-bottom: 3px;
    margin-right: 5px;
}

.modal .input-filter .report-date {
    border-radius: 0;
}

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

.default-image-option {
    display: inline-block;
    width: 100%;
}

.default-image {
    float: left;
    margin: auto 20px;
    width: 130px;
}

.default-image img {
    display: block;
    margin: auto;
    max-width: 100%;
    border: 1px solid #333;
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%);
}

.mockup-share-feed-facebook {
    width: 500px;
    max-width: 100%;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0px 10px 0 rgb(0 0 0 / 20%), 0 0px 20px 0 rgb(0 0 0 / 19%);
}

.facebook-feed-header {
    display: flex;
    padding: 12px 16px;
}

.facebook-avatar {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 2px solid #0866FF;
    border-radius: 20px;
    overflow: hidden;
    flex: 0 0 40px;
    padding: 2px;
}

.facebook-avatar img {
    max-width: 100%;
    border-radius: 50%;
}

.facebook-feed-info {
    display: flex;
    flex-direction: column;
    /* flex: 0 0 74%; */
}

.facebook-user-name h4 {
    font-size: .9375rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
    margin-bottom: 4px;
    margin-top: 3px;
}

.facebook-feed-time {
    font-weight: 400;
    color: #B0B3B8;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
    font-size: .8125rem;
    line-height: 1;
}

.facebook-feed-button {
    display: flex;
    margin-left: auto;
}

.facebook-option,
.facebook-close {
    width: 36px;
    padding: 8px;
    height: 36px;
    display: flex;
}

.facebook-option>div {
    display: block;
    height: 20px;
    text-align: center;
}

.facebook-option i,
.facebook-close i {
    width: 20px;
    font-size: 20px;
    text-align: center;
}

.feed-thumbnail-image-bg {
    max-width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    aspect-ratio: 600/315;
    object-fit: cover;
}

.feed-content {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
}

.feed-title {
    font-size: .8125rem;
    line-height: 1.2308;
    white-space: nowrap;
    color: #65676B;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.feed-description {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    font-weight: 600;
    word-wrap: break-word;
    text-align: left;
    font-size: 1.0625rem;
    line-height: 1.1765;
    word-break: break-word;
    color: #050505;
}

#cropper_modal .img-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

#cropper_image {
    max-height: 400px;

}

@media (max-width: 575px) {
    .default-image {
        margin: auto;
        float: none;
    }

    .default-image-action {
        margin-top: 20px;
    }

    .default-image-action button {
        margin: auto;
        display: block;
    }
}


h1.post-title {
    font-size: 32px;
    text-transform: inherit;
    padding: 1rem 0px;
}

.post-images img {
    display: block;
    max-width: 100%;
    margin: auto;
}

img.w-500 {
    width: 500px;
}

img.w-700 {
    width: 700px;
}

#editor-container {
    display: flex;
    height: calc(100vh - 57px);
}

@media (max-width: 991px) {
    #editor-container {
        flex-direction: column;
    }
}

.tool-body {
    touch-action: none;
}

.tool-body .navbar {
    border-bottom: 1px solid #eef2f8;
}

.tool-body .logo-header {
    height: 30px;
}

.btn-group-center {
    display: table;
    margin: auto;
}

.tool-title>img {
    width: 240px;
    margin: 40px auto 0;
    display: block;
}

.tool-title amp-img {
    width: 240px;
    margin: 40px auto 0;
    display: block;
}

.components {
    width: 70px;
    border-left: 1px solid #eef2f8;
}

.components .btn {
    border-radius: 0;
    padding: 10px 5px;
    width: 70px;
    border-bottom: 1px solid #eef2f8;
    /* color: #e14727; */
}

.components .btn:hover,
.components .btn:active,
.components .btn:focus {
    border: none;
    border-bottom: 1px solid #eef2f8;
}

.components .btn i {
    display: block;
    margin: 0;
}

.btn-square {
    border: none;
    width: 50px;
    height: 50px;
    padding: 0;
}

.btn img {
    width: 100%;
    filter: invert(1);
}

.btn-square i {
    display: block;
    margin: 0;
    font-size: 50px;
}

.components .btn span {
    font-size: 12px;
    line-height: 1.2;
    display: block;
    margin-top: 5px;
}

.component-detail {
    width: 320px;
    padding: 20px;
    font-size: 14px;
}

@media (max-width: 991px) {
    .components {
        width: auto;
        border-right: none;
        border-top: 1px solid #eef2f8;
        display: flex;
        justify-content: center;
    }

    .components .btn i {
        display: inline-block;
        margin-right: 5px;
    }

    .component-detail {
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        padding: 15px;
    }

    .components .btn {
        border-radius: 0;
        padding: 5px 10px;
        width: 100%;
    }

    .components .btn span {
        font-size: 14px;
    }
}

.collapse-area {
    border-left: 1px solid #eef2f8;
    overflow-y: auto;
}

#main-container {
    flex: 1;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
}

#canvas-container {
    max-height: 100%;
    flex: 1;
    /* background-image: url(/img/pixel.png);
    background-position: center; */
    box-shadow: inset 0 0 9px 2px #0000001f;
    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 0), linear-gradient(-45deg, #e5e5e5 25%, transparent 0), linear-gradient(45deg, transparent 75%, #e5e5e5 0), linear-gradient(-45deg, transparent 75%, #e5e5e5 0);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

#cursor-canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none !important;
}

/* .canvas-container canvas {
    box-shadow: inset 0 0 9px 2px #0000001f;
} */

.property-area {
    display: flex;
    background-color: #fff;
    align-items: center;
    flex-direction: column;
}

@media (max-width: 991px) {
    .property-area {
        flex-direction: row;
        /* border-bottom: 1px solid #eef2f8; */
        justify-content: center;
        align-items: stretch;
    }

    .collapse-area {
        border-left: none;
        border-top: 1px solid #eef2f8;
    }
}

.property-item {
    padding: 10px;
    /* display: flex; */
    display: none;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #eef2f8;
    min-height: 65px;
    justify-content: center;
    width: 100%;
}

.property-item:hover {
    cursor: pointer;
    background-color: #e1eaed;
}

.property-item .clr-field,
.property-obj .clr-field {
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid #e14727;
    border-radius: 50%;
    overflow: hidden;
}

.property-item .clr-field:hover,
.property-obj .clr-field:hover {
    cursor: pointer;
}

.property-item .clr-field button,
.property-obj .clr-field button {
    left: 0;
    top: 0;
    z-index: 10;
    width: 29px;
    height: 29px;
    transform: none;
}

.property-item .clr-field input,
.property-obj .clr-field input {
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 0;
}

.property-item .clr-field input:hover,
.property-obj .clr-field input:hover {
    cursor: pointer;
}

.property-label {
    font-size: 12px;
}

.property-label .ob-icon {
    width: 32px;
    height: 32px;
    display: block;
    margin: auto;
}

.property-label .fa-solid {
    display: block;
    margin: auto;
    text-align: center;
    font-size: 32px;
    color: #333;
}

@media (max-width: 991px) {
    .property-item {
        border-bottom: none;
        border-right: 1px solid #eef2f8;
        border-left: 1px solid #eef2f8;
    }
}

.zoom-area {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.zoom-area .btn {
    border-color: #858585;
    padding: 9px 10px;
    line-height: 1;
    background-color: #fff;
}

.zoom-area .btn:hover {
    border-color: #333;
}

.zoom-area .btn i {
    margin-right: 0;
}

.font-item {
    padding: 10px 15px;
    margin-bottom: 10px;
}

.font-item:hover {
    cursor: pointer;
}

.font-item p {
    margin-bottom: 0;
}

.icon-color-picker {
    background-image: url(../img/icon/color_font.png);
    background-size: contain;
}

.dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
}

#editor-container input[type="color"] {
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    width: 32px;
    height: 32px;
    border: 2px solid #e14727;
}

#editor-container input[type="color"]::-webkit-color-swatch {
    border: none;
}

#editor-container .collapsing {
    transition: none !important;
}

.layer-item {
    padding: 10px;
    display: flex;
    margin-bottom: 10px;
}

.layer-item.active {
    background-color: #e14727 !important;
    color: #fff;
}

.layer-item:hover {
    cursor: pointer;
}

.layer-item span {
    width: calc(280px - 45px);
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-item .btn {
    padding: 0px 5px;
    flex: 1;
}

.event-share .icon-size-text {
    font-size: 8px;
    padding-right: 5px;
    float: left;
    padding-top: 8px;
}

.twitter-share-btn {
    background-color: #333333;
}

.telegram-share-btn {
    background-color: #179cde;
}

.fa-x-twitter {
    /* background-image: url('/img/icon/x-twitter.svg'); */
    background-color: #fff;
    -webkit-mask-image: url('../img/icon/x-twitter.svg');
    -webkit-mask-size: cover;
    mask-image: url('../img/icon/x-twitter.svg');
    mask-size: cover;
    width: 18px;
    height: 18px;
}

.share-button-list {
    display: flex;
    justify-content: center;
}

.share-button-list .social-btn {
    margin: 0 5px;
}

.share-button-list .btn i {
    margin-right: 0;
}

.property-obj {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.property-obj.align-item-baseline {
    align-items: baseline;
}

.property-obj-label {
    margin-right: 10px;
    font-size: 13px;
    width: 85px;
}

.property-obj-label-xl {
    width: 130px;
}

@media (max-width: 991px) {
    .property-obj-label {
        width: 100px;
    }
}

.property-obj-header {
    font-weight: bold;
}

.property-obj-header p {
    margin-bottom: 10px;
    border-left: 5px solid #e14727;
    padding-left: 8px;
}

.property-obj-content {
    display: inline-flex;
    width: 100%;
    font-size: 13px;
}

.property-obj-content input {
    width: 100%;
}

.transparent {
    /* background-image: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px; */
    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 0), linear-gradient(-45deg, #e5e5e5 25%, transparent 0), linear-gradient(45deg, transparent 75%, #e5e5e5 0), linear-gradient(-45deg, transparent 75%, #e5e5e5 0);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.frame-shadow {
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%);
}

.z-tool-result img {
    max-width: 300px;
    max-height: 300px;
    margin: auto;
    display: block;
}

#collapse_left_area,
.overflow-y-auto {
    overflow-y: auto;
}

.brand-list {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    max-width: 735px;
    margin: auto;
}

.brand-item {
    display: flex;
    position: relative;
    justify-content: center;

}

.brand-item img {
    width: 120px;
    height: 90px;
    margin-top: 0;
    object-fit: contain;
}

@media (max-width: 767px) {
    .brand-item img {
        width: 90px;
    }
}

@media (max-width: 576px) {
    .brand-list {
        grid-template-columns: repeat(2, 50%);
    }

    .brand-item img {
        height: 75px;
    }
}

.shape-list {
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

.shape-list .btn {
    margin: 0 auto 5px;
}

.form-in-row {
    display: flex;
    align-items: center;
}

.btn-100 {
    width: 100px;
}

.profile-information .btn {
    margin-left: auto;
}

.shadow,
.card-profile-image img {
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .15) !important;
}

.card-profile-image img {
    max-width: 96px;
    transition: all .15s ease;
    border-radius: 50%;
    margin: auto;
    display: block;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 0.375rem;
    background-color: #fff;
    background-clip: border-box;
}

.card-profile-stats {
    padding: 1rem 0;
}

.card-profile-stats>div {
    margin-right: 1rem;
    padding: 0.875rem;
    text-align: center;
}

.card-profile-stats>div:last-child {
    margin-right: 0;
}

.card-profile-stats>div .heading {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
}

.card-profile-stats>div .description {
    font-size: .875rem;
    color: #adb5bd;
}

h3,
.h3 {
    font-size: 1.0625rem;
}

h3,
.h3 {
    font-size: 1.0625rem;
}

h4,
.h4 {
    font-size: .9375rem;
}

h5,
.h5 {
    font-size: .8125rem;
}

h6,
.h6 {
    font-size: .625rem;
}

h3.header {
    font-weight: 600;
    line-height: 1.5;
}

.card-header {
    margin-bottom: 0;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    background-color: #fff;
}

.heading-small {
    font-size: .75rem;
    font-weight: bold;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bg-secondary {
    background-color: #f7fafc !important;
}

.text-muted {
    color: #8898aa !important;
}

.card-body {
    padding: 1.5rem;
    flex: 1 1 auto;
}

@media (max-width: 575px) {
    .card-body {
        padding: 1rem;
    }
}

@media (min-width: 1200px) {
    .order-xl-2 {
        order: 2;
    }

    .order-xl-1 {
        order: 1;
    }
}

.img-result-banners {
    width: 500px;
    max-width: 100%;
    margin: auto;
}

.img-result-banners img {
    max-width: 100%;
}

#image-total {
    /* display: flex; */
    align-items: center;
    color: #fff;
    border-radius: 15px;
}

#image-list {
    max-height: 280px;
    overflow-y: auto;
}

.percent-total {
    font-size: 33px;
    font-weight: bold;
    border: 1px solid;
    border-radius: 10px;
}

@media (max-width: 575px) {
    .percent-total {
        font-size: 25px;
    }
}

.size-total {
    line-height: 20px;
}

.size-total span {
    display: block;
    font-weight: bold;
}

.upload-img {
    width: 45px;
    height: 45px;
    border-radius: 10%;
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 1/1;
    -webkit-box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%),
        0 3px 10px 0 rgb(0 0 0 / 19%);
    box-shadow: 0 5px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%);
}

.upload-item-template {
    display: none;
}

.upload-item {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}

.upload-item.active {
    background-color: #0095f42e;
}

/* .upload-item:hover {
    cursor: pointer;
} */

.upload-info .file-name {
    max-width: 200px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    font-weight: bold;
}

.download-instruction-arrow {
    background: url(../img/icon/arrow.svg);
    -webkit-mask: url(../img/icon/arrow.svg) center / cover;
    background: #ffb1d0;
    width: 39px;
    height: 67px;
    transform: scale(-1, 1);
    position: absolute;
    right: 25px;
    top: -60px;
}

@media (max-width: 575px) {
    .upload-info .file-name {
        max-width: 100px;
    }
}

.download-group .btn-download {
    display: inline-flex;
    align-items: center;
}

.compress-info {
    line-height: 17px;
    background-color: #fff;
    color: #40975F;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.compress-info .percent-reduce {
    font-weight: bold;
}

.upload-info .file-size,
.compress-info .new-size {
    display: block;
    font-size: 13px;
}

.upload-info .file-type {
    border: 1px solid;
    border-radius: 5px;
    text-transform: uppercase;
    /* line-height: 23px; */
    font-size: 13px;
}

.compress-type {
    display: grid;
    font-size: 13px;
}

.compress-type i {
    margin-right: 0;
    margin-bottom: 3px;
}

.compress-type span {
    text-transform: uppercase;
}

.modal-content{
    border-radius: 0.5rem;
}

.form-control-sm{
    border-radius: 0.25rem;
}

.form-control{
    padding: 2px 16px;
    height: 2.5rem;
}

.template-size-list{
    list-style: none;
}

.template-size-list li{
    float: left;
    padding: 8px 16px;
    border: 1px solid #CED3D4;
    border-radius: 8px;
    text-align: center;
    margin: 0 15px 15px 0;
}
.template-size-list li:hover{
    cursor: pointer;
    background-color: #ffe5d6;
}

.template-size-list li h4{
    margin-bottom: 0;
}

.template-size-list li span{
    font-size: 12px;
}


/* color */
.main-color-1 {
    color: #e14727 !important;
}

/* gradient */
.gradient-1 {
    background: linear-gradient(235deg, #fff, #000f25), linear-gradient(180deg, #6100ff, #000), linear-gradient(235deg, #ffa3ac, #ffa3ac 40%, #00043c calc(40% + 1px), #00043c 60%, #005d6c calc(60% + 1px), #005d6c 70%, #00c9b1 calc(70% + 1px), #00c9b1), linear-gradient(125deg, #ffa3ac, #ffa3ac 40%, #00043c calc(40% + 1px), #00043c 60%, #005d6c calc(60% + 1px), #005d6c 70%, #00c9b1 calc(70% + 1px), #00c9b1) !important;
    background-blend-mode: soft-light, screen, darken, normal !important
}

.gradient-2 {
    /* background: linear-gradient(180deg, #ffb7b7, #727272), radial-gradient(60.91% 100% at 50%, at 0, #ffd1d1 0, #260000 100%), linear-gradient(238.72deg, #fdd, #720066), linear-gradient(127.43deg, #0ff, #f44), radial-gradient(100.22% 100% at 70.57%, at 0, red 0, #00ffe0 100%), linear-gradient(127.43deg, #b7d500, #30f) !important; */
    background: linear-gradient(180deg, #ffb7b7, #727272), radial-gradient(60.91% 100% at 50% 0, #ffd1d1 0, #260000 100%), linear-gradient(238.72deg, #fdd, #720066), linear-gradient(127.43deg, #0ff, #f44), radial-gradient(100.22% 100% at 70.57% 0, red 0, #00ffe0 100%), linear-gradient(127.43deg, #b7d500, #30f) !important;
    background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal
}

.gradient-3 {
    /* background: radial-gradient(100% 225% at 100%, at 0, red 0, #000 100%), linear-gradient(236deg, #00c2ff, #000), linear-gradient(135deg, #cdffeb, #cdffeb 36%, #009f9d 0, #009f9d 60%, #07456f 0, #07456f 67%, #0f0a3c 0, #0f0a3c) !important; */
    background: radial-gradient(100% 225% at 100% 0, red 0, #000 100%), linear-gradient(236deg, #00c2ff, #000), linear-gradient(135deg, #cdffeb, #cdffeb 36%, #009f9d 0, #009f9d 60%, #07456f 0, #07456f 67%, #0f0a3c 0, #0f0a3c) !important;
    background-blend-mode: overlay, hard-light, normal
}

.gradient-4 {
    /* background: linear-gradient(121.28deg, #010012, #00ff94), linear-gradient(180deg, #00647a, #fff), linear-gradient(244.35deg, #ffb26a, #c15151 50.58%, #00a3ff), linear-gradient(244.35deg, #e03f3f, #00114b 49.48%, red), radial-gradient(100% 233.99% at 0, at 100%, red 0, #ad00ff 100%), linear-gradient(307.27deg, #096f5c .37%, #687eb5 50.19%, #8877ce), radial-gradient(100% 140% at 100%, at 0, #ff00c7 0, #006c7a 49.48%, #f90 100%) !important; */
    background: linear-gradient(121.28deg, #010012, #00ff94), linear-gradient(180deg, #00647a, #fff), linear-gradient(244.35deg, #ffb26a, #c15151 50.58%, #00a3ff), linear-gradient(244.35deg, #e03f3f, #00114b 49.48%, red), radial-gradient(100% 233.99% at 0 100%, red 0, #ad00ff 100%), linear-gradient(307.27deg, #096f5c .37%, #687eb5 50.19%, #8877ce), radial-gradient(100% 140% at 100% 0, #ff00c7 0, #006c7a 49.48%, #f90 100%) !important;
    background-blend-mode: overlay, difference, overlay, overlay, difference, color-dodge, normal !important
}

.gradient-5 {
    /* background: linear-gradient(45deg, #000850, #000320), radial-gradient(100% 225% at 100%, at 0, #ff6928 0, #000 100%), linear-gradient(225deg, #ff7a00, #000), linear-gradient(135deg, #cdffeb 10%, #cdffeb 35%, #009f9d 0, #009f9d 60%, #07456f 0, #07456f 67%, #0f0a3c 0, #0f0a3c) !important; */
    background: linear-gradient(45deg, #000850, #000320), radial-gradient(100% 225% at 100% 0, #ff6928 0, #000 100%), linear-gradient(225deg, #ff7a00, #000), linear-gradient(135deg, #cdffeb 10%, #cdffeb 35%, #009f9d 0, #009f9d 60%, #07456f 0, #07456f 67%, #0f0a3c 0, #0f0a3c) !important;
    background-blend-mode: screen, overlay, hard-light, normal !important
}

.gradient-6 {
    /* background: linear-gradient(235deg, #babc4a, #000), linear-gradient(235deg, #0026ac, #282534), linear-gradient(235deg, #00ffd1, #000), radial-gradient(120% 185% at 25%, at -25%, #eee 0, #eee 40%, #7971ea calc(40% + 1px), #7971ea 50%, #393e46 calc(50% + 1px), #393e46 70%, #222831 calc(70% + 1px), #222831 100%), radial-gradient(70% 140% at 90%, at 10%, #f5f5c6 0, #f5f5c6 30%, #7da87b calc(30% + 1px), #7da87b 60%, #326765 calc(60% + 1px), #326765 80%, #27253d calc(80% + 1px), #27253d 100%) !important; */
    background: linear-gradient(235deg, #babc4a, #000), linear-gradient(235deg, #0026ac, #282534), linear-gradient(235deg, #00ffd1, #000), radial-gradient(120% 185% at 25% -25%, #eee 0, #eee 40%, #7971ea calc(40% + 1px), #7971ea 50%, #393e46 calc(50% + 1px), #393e46 70%, #222831 calc(70% + 1px), #222831 100%), radial-gradient(70% 140% at 90% 10%, #f5f5c6 0, #f5f5c6 30%, #7da87b calc(30% + 1px), #7da87b 60%, #326765 calc(60% + 1px), #326765 80%, #27253d calc(80% + 1px), #27253d 100%) !important;
    background-blend-mode: overlay, lighten, overlay, color-burn, normal
}

.gradient-7 {
    background: linear-gradient(40deg, #155263 9%, #155263 43%, #ff6f3c calc(43% + 1px), #ff6f3c 52%, #ff9a3c calc(52% + 1px), #ff9a3c 80%, #ffc93c calc(80% + 1px), #ffc93c) !important
}

.gradient-8 {
    /* background: linear-gradient(328.78deg, #030086 14.45%, #bd6177 84.36%), linear-gradient(301.28deg, #209b4a, #7000ff), radial-gradient(100% 138.56% at 100%, at 0, #d50000 0, #00ffe0 100%), radial-gradient(100% 148.07% at 0, at 0, #d50000 0, #0ff 100%) !important; */
    background: linear-gradient(328.78deg, #030086 14.45%, #bd6177 84.36%), linear-gradient(301.28deg, #209b4a, #7000ff), radial-gradient(100% 138.56% at 100% 0, #d50000 0, #00ffe0 100%), radial-gradient(100% 148.07% at 0 0, #d50000 0, #0ff 100%) !important;
    background-blend-mode: soft-light, overlay, difference, normal
}