/**
 *  @author Mustapha Cheraim
 *
 *  @copyright 2023-2024 Graphique Alliance
 *
 *  @license Copyright (c) 2019 Graphique Alliance. All rights reserved.
 */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
#customize-modal {
    padding-right: 0 !important;
    overflow: hidden;
}

#customize-modal .material-icons, #confirm-modal .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    /* pointer-events: none; */
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
   

#customize-modal *:focus {
    outline: none;
}

/* custom scrollbar */

/* width */

#customize-modal ::-webkit-scrollbar {
    width: 8px;
}

/* Track */

#customize-modal ::-webkit-scrollbar-track {
    background: #647589;
}

/* Handle */

#customize-modal ::-webkit-scrollbar-thumb {
    background: #414f5f;
    border-radius: 10px;
}

/* Handle on hover */

#customize-modal ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* END custom scrollbar */

#customize-modal button {
    cursor: pointer;
}

#customize-modal button:disabled {
    cursor: not-allowed;
}

#customize-modal #iframe {
    height: calc(100vh - 107px);
}

/**/

/* Style the tab */

#customize-modal .tab {
    background-color: #0d1318;
    width: 61px;
    height: 100%;
}

#customize-modal .tab .nav-buttons {
    background-color: #283039;
}

/* Style the buttons that are used to open the tab content */

#customize-modal .tab .tablinks {
    background-color: #0d1318;
    padding: 8px;
    width: 100%;
    border: none;
    outline: none;
    font-size: 11px;
}

#customize-modal .tab .tablinks i {
    pointer-events: none;
}

#customize-modal .tab button.tablinks {
    color: white;
    text-align: center;
}

#customize-modal .tab button.tablinks svg * {
    fill: white;
}

#customize-modal .tab button.hide-button {
    position: absolute;
    bottom: 0;
    background: none;
    border: none;
    padding: 0;
}

#customize-modal .tab button.hide-button i {
    font-size: 40px;
    color: white;
    inline-size: 47px;
    margin-left: -7px;
    position: relative;
}

/* Change background color of buttons on hover */

#customize-modal .tab button:not(.active):hover {
    color: #ea5543;
}

#customize-modal .tab button:not(.active):hover svg * {
    fill: #ea5543;
}

/* Create an active/current "tab button" class */

#customize-modal .tab button.active {
    background: none;
}

/* Style the tab content */

#customize-modal .chili-editor-menu>.tabcontent {
    overflow-y: auto;
    overflow-x: hidden;
}

#customize-modal .tabcontent {
    padding: 12px;
    width: calc(100% - 61px);
    height: 100%;
    display: none;
    float: left;
    user-select: none;
}

#customize-modal .tabcontent.active {
    display: block;
}

/*nav links (Text Add Form)*/

#customize-modal #text-nav {
    display: none;
}

#customize-modal .nav {
    text-align: center;
    padding: 0px 10px;
    margin: 20px -6px;
    border-bottom: 1px solid white;
    font-size: 13px;
}

#customize-modal button.navlinks {
    border: 1px solid #0d1318;
    border-bottom-color: white;
    border-left-width: 0px;
    border-right-width: 0px;
    color: #b5b5b5;
    width: 32%;
    margin: -1px 0px;
    padding: 6px 0;
    position: relative;
    background: #0d1318;
    overflow-wrap: anywhere;
}

#new-image button.navlinks {
    width: 44%;
}

#customize-modal button.navlinks.active {
    color: white;
    background: #283039;
    border-color: white;
    border-bottom-color: #283039;
    border-left-width: 1px;
    border-right-width: 1px;
}

#customize-modal .tabcontent p {
    color: white;
    margin-bottom: 5px;
    padding-top: 8px;
    font-size: 12px;
}

#customize-modal .tabcontent .controls-block {
    margin-bottom: 15px;
    min-height: 6px;
}

#customize-modal .tabcontent .btn-controls {
    background: none;
    border: 1px solid white;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    margin-top: 10px;
}

#customize-modal .image-flip .btn-controls#vertical i {
    transform: rotate(90deg);
    margin-left: -1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-top: -1px;
}

#customize-modal .tabcontent .btn-controls.active {
    background-color: #ea5543;
}

#customize-modal .tabcontent .controls-block i {
    font-size: 18px;
    color: white;
    line-height: 28px;
}

#customize-modal .tabcontent .group-controls {
    background: none;
    border: none;
    margin: 0px -2px;
    padding: 0px 6px 1px 6px;
}

#customize-modal .tabcontent .group-controls.active {
    background: #ea5543;
}

#customize-modal .tabcontent .btn-group {
    border: 1px solid white;
    border-radius: 8px;
    overflow: hidden;
}

#customize-modal .pos-left {
    float: left;
}

#customize-modal .pos-right {
    float: right;
}

#customize-modal .text-right {
    text-align: right;
}

#customize-modal [class*=color-block] {
    position: relative;
    background: #999;
    border-radius: 8px;
    padding: 6px 32px 6px 6px;
    max-height: 44px;
    overflow: hidden;
    margin-bottom: 15px;
}

#customize-modal [class*=color-block] .color-block-extend {
    position: absolute;
    top: 7px;
    right: 0;
    background: none;
    border: none;
}

#customize-modal [class*=color-block] .color-block-extend i {
    font-size: 29px;
    padding-top: 6px;
}

#customize-modal .color-btn-add {
    border: 2px dashed white;
    background: none;
    border-radius: 8px;
    margin-right: 4px;
}

#customize-modal .color-btn {
    border: none;
    border-radius: 8px;
    margin-right: 4px;
    text-shadow: -1px 0 #ea5543, 0 1px #ea5543, 1px 0 #ea5543, 0 -1px #ea5543;
}

#customize-modal .border-color-btn {
    border-radius: 8px;
    background: none;
    border-style: solid;
    margin-right: 4px;
    border-width: 2px;
}

#customize-modal .color-block button, #customize-modal .border-color-block button {
    vertical-align: middle;
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    padding: 0;
    color: white;
}

#customize-modal .color-btn-none {
    border: none;
    background: white;
    border-radius: 8px;
    margin-right: 4px;
    margin-left: -4px;
}

#customize-modal #block-icon-color .color-btn-none, #customize-modal #block-font-color .color-btn-none {
    display: none;
}

#customize-modal .color-btn-none i {
    color: red !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
    transform: scaleX(-1);
}

#customize-modal .color-btn-none i.none-check {
    color: black !important;
    margin-top: -30px;
    font-weight: bold;
    display: inherit;
    transform: scale(1);
    display: none;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

/**/

/*editor custom select*/

#customize-modal .editor-select {
    position: relative;
    user-select: none;
}

#customize-modal .editor-select.colors-select .color-select-item-icon {
    width: 15px;
    height: 15px;
    position: absolute;
    border-radius: 10px;
    margin-top: 2px;
}

#customize-modal .editor-select.colors-select .color-select-item-text {
    margin-left: 20px;
}

/*style the arrow inside the select element:*/

#customize-modal .select-selected:after {
    position: absolute;
    content: "";
    top: 11px;
    right: 5px;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/

#customize-modal .select-selected.extend:after {
    border-color: transparent transparent #fff transparent;
    top: 4px;
}

/*style the items (options), including the selected item:*/

#customize-modal .select-items div, #customize-modal .select-selected {
    color: #fff;
    padding: 6px 3px;
    border: 1px solid white;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

#customize-modal .select-selected {
    border-radius: 6px;
    height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*style items (options):*/

#customize-modal .select-items {
    position: absolute;
    background-color: #283039;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
}

/*hide the items when the select box is closed:*/

#customize-modal .select-hide {
    display: none;
}

#customize-modal .select-items div:hover, #customize-modal .same-as-selected {
    color: #ea5543;
}

/*END editor custom select*/

/*editor custom number input*/

#customize-modal .editor-number-input input {
    background: none;
    border-radius: 6px;
    padding: 6px 18px 6px 3px;
    color: white;
    border: 1px solid white;
    font-size: 12px;
    height: 26px;
    width: 60px;
}

#customize-modal .editor-number-input input.variable-field {
    width: 100%;
}

#customize-modal p.variable-field {
    overflow-wrap: break-word;
}

#customize-modal .editor-number-input .input-spins a[class*=spin-] {
    position: relative;
    float: right;
    cursor: pointer;
    right: 15px;
}

#customize-modal .editor-number-input .input-spins a.spin-down:after {
    position: absolute;
    content: "";
    top: 14px;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

#customize-modal .editor-number-input .input-spins a.spin-up:after {
    position: absolute;
    border-color: transparent transparent #fff transparent;
    content: "";
    border-width: 6px;
    border-style: solid;
    top: -1px;
}

/*END editor custom number input*/

/*editor custom slider*/

#customize-modal .slider-block .slider {
    position: relative;
    user-select: none;
    box-sizing: border-box;
    margin-top: 6px;
    width: 100%;
    min-height: 1px;
    margin-bottom: 6px;
}

#customize-modal .slider-block .slider .track {
    height: 3px;
    border-radius: 20px;
    position: absolute;
    cursor: pointer;
    width: 88%;
}

#customize-modal .slider-block .slider .dragger {
    position: absolute;
    top: 50%;
    cursor: pointer;
    margin-top: -5px;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 20px;
}

#customize-modal .slider-block .slider .text {
    position: absolute;
    right: 0;
    margin-top: -9px;
    font-size: 13px;
    width: 12%
}

/*END editor custom slider*/

/* color panel block */

#customize-modal .color-panel-block {
    display: flow-root;
    background: #999999;
    padding: 16px;
    border-radius: 10px;
    margin-top: 9px;
    color: white;
    min-height: 95px;
    margin-bottom: 15px;
}

#customize-modal .color-panel-block [class*=col-md] {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#customize-modal .color-panel-block [class*=col-md] label {
    color: white;
    text-align: center;
}

#customize-modal .color-panel-block input {
    width: 60%;
    background: none;
    border: 1px solid;
    color: white;
    border-radius: 6px;
    padding: 0 1px;
    text-align: center;
}

#customize-modal .color-panel-block .type-label {
    color: white;
    line-height: 26px;
    text-transform: uppercase;
}

#customize-modal .color-panel-block .slider-label {
    position: absolute;
    margin-top: 14px;
}

#customize-modal .color-panel-block .select-label, #customize-modal .color-panel-block .input-label {
    position: relative;
    top: 13px;
    height: 10px;
    font-size: 12px;
}

#customize-modal .color-panel-block .panel-slider {
    width: 90%;
    float: right;
}

#customize-modal .color-panel-block .result-color {
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 6px;
    margin-right: 4px;
    border: 1px solid white;
}

#customize-modal .color-panel-block .color-panel-action {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #ffffff;
    background: #ea5543;
    padding: 0px;
    line-height: 15px;
    vertical-align: top;
}

#customize-modal .color-panel-block .slider-label {
    position: relative;
    margin-top: 0px;
    height: 0px;
}

#customize-modal .color-panel-block .grad-label {
    margin: 20px 0 30px 0;
    position: relative;
    height: 0px;
    font-size: 12px;
}

#customize-modal .color-panel-block .slider-block:not(.location) {
    width: 90%;
    float: right;
    position: relative;
}

#customize-modal .color-panel-block .slider-block.location {
    margin-bottom: -25px;
}

#customize-modal .color-panel-block .slider-block .slider {
    margin-top: 9px;
}

#customize-modal .color-panel-block .panel-controls {
    display: none;
}

#customize-modal .color-panel-block .panel-controls.active {
    display: block;
}

/* END color panel block */

/*editor menu : block images*/

#customize-modal #new-image .nav {
    margin: 20px 0 !important;
}

#customize-modal #biblio, #customize-modal #myImages {
    height: calc(100vh - 165px) !important;
}

#customize-modal #image .image-replace-hint {
    color: white;
    font-size: 12px;
    text-align: center;
    margin: 0 0 5px 0;
}

#customize-modal .existing-images, #customize-modal .existing-designs, #customize-modal #list-icons, #customize-modal #list-shapes {
    display: table;
    vertical-align: top;
    padding: 20px 0;
}

#customize-modal .existing-images .img-add-overlay {
    width: 100%;
    background: #0d1318;
    height: 100%;
    border-radius: 6px;
    opacity: 0;
    display: inline-flex;
    align-items: center;
}

#customize-modal .existing-images .img-add-controls {
    align-items: center;
    display: inline-flex;
    width: 100%;
}

#customize-modal .existing-images .img-add-overlay:hover {
    opacity: 0.7;
}

#customize-modal .existing-images .img-add-overlay i {
    color: white;
    overflow: hidden;
    margin: auto;
}

#customize-modal .existing-images .image {
    display: inline-block;
    width: 92px;
    height: 70px;
    margin: 2px;
}

#customize-modal .existing-designs .design {
    display: inline-block;
    width: 135px;
    height: 100px;
    margin: 5px;
}

#customize-modal .existing-images .image, #customize-modal .existing-designs .design, #customize-modal #list-icons .icon, #customize-modal #list-shapes .shape {
    background-color: #0d1318;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
    border-radius: 6px;
    text-align: center;
}

#customize-modal #list-icons .icon, #customize-modal #list-shapes .shape {
    display: inline-block;
    width: 93px;
    height: 60px;
    margin-bottom: 4px;
}

#customize-modal .existing-images .image i, #customize-modal #list-icons .icon, #customize-modal .existing-designs .design, #customize-modal #list-shapes .shape {
    cursor: pointer;
}

#customize-modal .existing-designs .design {
    background-size: contain;
}

#customize-modal #list-icons .icon {
    width: 45px;
    height: 40px;
    color: white;
}

#customize-modal #list-icons span {
    vertical-align: bottom;
    line-height: 40px;
    font-size: 30px;
}

#customize-modal #list-icons .icon[data-family="Social Media"] {
    font-family: Social Media;
}

#customize-modal #list-icons .icon[data-family="Travel Symbols"] {
    font-family: Travel Symbols;
}

#customize-modal #list-icons .icon[data-family="Icon Fonts"] {
    font-family: Icon Fonts;
}

#customize-modal #list-icons .icon i {
    margin-top: 9px;
    font-size: 12px;
    vertical-align: middle;
    margin-bottom: 20px;
    color: white;
    line-height: 5px;
}

#customize-modal #list-shapes .shape i {
    font-size: 40px;
    margin: 9px;
    margin-bottom: 60px;
    color: #e4e5e7;
    width: 40px;
}

#customize-modal .image-shapes svg path, #customize-modal #list-shapes .shape path {
    fill: white;
}

#customize-modal .existing-images .image.disabled, #customize-modal .existing-images .image.disabled i, #customize-modal .existing-designs .design.disabled, #customize-modal #list-icons .icon.disabled {
    cursor: no-drop;
    opacity: 0.7;
}

#customize-modal .existing-images .image:not(.disabled) i.update-image:hover {
    color: #6cff92;
}

#customize-modal .existing-images .image:not(.disabled) i.remove-image:hover {
    color: #e6321e;
}

#customize-modal #block-img-preview .image-preview {
    width: 100%;
    height: 200px;
    background: #3c3c3c;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    position: relative;
}

#customize-modal #block-img-preview .image-preview .overlay-text {
    color: white;
    position: absolute;
    z-index: 2;
    width: 60%;
    height: 20%;
    top: 40%;
    left: 20%;
    text-align: center;
    text-transform: uppercase;
    font-weight: bolder;
}

#customize-modal #block-img-preview .image-preview .image-preview-overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 10px;
    background-color: #ea5543;
}

#customize-modal #block-img-preview .image-preview .image-preview-overlay:hover {
    opacity: 0.7;
}

#customize-modal .crop-zone {
    position: relative;
}

#customize-modal .crop-zone .crop-image {
    background-color: #0d1318;
    width: 100%;
    margin: 0;
}

#customize-modal .crop-zone .crop-overlay {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    cursor: move;
    border-color: #ea5543;
    border-style: solid;
}

#customize-modal .crop-zone .crop-corner {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    background-color: #283039;
    border: 1px solid #ea5543;
    border-radius: 4px;
    opacity: 0.7;
}

#customize-modal .crop-zone .crop-corner.nwse {
    cursor: nwse-resize;
}

#customize-modal .crop-zone .crop-corner.nesw {
    cursor: nesw-resize;
}

#customize-modal .return-to-edit {
    background: #ea5543;
    border: none;
    color: white;
    border-radius: 20px;
    width: 28px;
    height: 28px;
    display: none;
    position: absolute;
    bottom: 10px;
    opacity: 0.8;
}

#customize-modal .return-to-edit:hover {
    opacity: 1;
}

#new-image #progress {
    display: none;
    background: #283039;
    position: relative;
    z-index: 0;
    bottom: 0px;
    padding-bottom: 5px;
}

#new-image {
    overflow-y: hidden;
}

#new-image #progress .text {
    color: #9ea1a3;
    text-align: center;
}

#new-image #progress .progress-bar {
    background-color: #0d1318;
    border-radius: 20px;
}

#new-image #progress .bar {
    height: 13px;
    background: #9ea1a3;
    margin: 15px 0;
    border-radius: 20px;
}

#new-image input#file-upload[type="file"] {
    display: none;
}

#edit-image .dpi-info {
    padding: 0;
    font-size: 14px;
    color: #d2d8e0;
}

#customize-modal div[id*=rotate] {
    text-align: center;
}

#customize-modal div[id*=rotate] canvas {
    cursor: pointer;
}

#customize-modal .controls-block .image-shapes {
    display: inline-flex;
    width: inherit;
    flex-wrap: wrap;
}

#customize-modal .controls-block .image-shapes i {
    width: 18px;
}

#customize-modal .controls-block .image-shapes .btn-controls {
    margin-left: 2px;
}

/*END editor menu : block images*/

/*editor menu : block icons/shapes/...*/

#customize-modal #edit-icon .icon-controls, #customize-modal #edit-shape .shape-controls {
    padding: 20px 0;
}

/*END editor menu : block icons*/

/*editor menu : block variables*/

#variables-block {
    color: white;
    font-size: 13px;
}

#variables-block span {
    font-weight: 700;
    font-size: 12px;
}

#variables-block input[type=text], #variables-block textarea {
    background: #283039;
    color: white;
    font-size: 12px;
    width: 100%;
    border: 1px solid;
    border-radius: 6px;
    padding: 6px 3px;
    outline-width: 0;
    margin-top: 5px;
}

#variables-block input[type=text] {
    height: 26px;
}

#variables-block input[type=checkbox] {
    margin-left: 6px;
    vertical-align: middle;
}

#variables-block input[type=file] {
    display: none;
}

#variables-block select {
    padding-top: 3px;
}

#variables-block .variable-block {
    padding: 5px 0;
}

#variables-block .variable-field[data-type=buttonbar] button {
    border-radius: 5px;
    width: 100%;
    background-color: #ea5543;
    color: white;
    border: none;
    font-size: 13px;
    margin-bottom: 4px;
}

#variables-block .variable-block span.clear-var-date {
    padding: 2px;
    background: grey;
    border: 1px solid;
    border-radius: 6px;
    position: relative;
    right: 0;
    top: -26px;
    cursor: pointer;
    float: right;
}

#variables-block label.add-img-var.variable-field {
    font-size: 12px;
    padding: 3px;
    margin-top: 3px;
    border-radius: 3px;
}

/*END editor menu : block variables*/

/*editor menu : top banner*/

#customize-modal .editor-controls-top {
    height: 40px;
    background-color: #e1e1e1;
}

#customize-modal .editor-controls-top .row {
    display: none;
}

#customize-modal .editor-controls-top .col-xs-1 {
    display: inline-flex;
}

/* #customize-modal .editor-controls-top .zoom-slider .banner-controls {
    display: none;
} */

#customize-modal .editor-controls-top .zoom-slider #zoom-block {
    display: block;
}

#customize-modal .editor-controls-top button.banner-controls {
    background: none;
    border: none;
    color: #283039;
    width: 100%;
    height: 39px;
    padding: 0;
    margin: 0 4px;
}

#customize-modal .editor-controls-top button.banner-controls.disabled {
    color: #7286a0;
    cursor: no-drop;
}

#customize-modal .editor-controls-top button.active {
    color: #ea5543 !important;
}

#customize-modal .editor-controls-top .slider-block {
    padding: 13px 0px;
    margin-left: -35%;
}

/* CHILI ZOOM & BUTTON */
#customize-modal .editor-controls-top .chili-zoom {
    display: flex;
}
#customize-modal .editor-controls-top .chili-zoom button {
    background-color: unset;
}
#customize-modal .chili-zoom .text {
    text-align: center;
    display: flex;
    align-items: center;
    font-weight: bold;
}

/*END editor menu : top banner*/

#customize-modal .btn-editor-add {
    border-radius: 5px;
    width: 100%;
    background-color: #ea5543;
    color: white;
    border: none;
    font-size: 13px;
}

#customize-modal label[for=file-upload] {
    display: none;
}

#customize-modal .btn-editor-add:focus {
    border: none;
}

#customize-modal .modal-dialog {
    position: unset;
    width: 100%;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
}

#customize-modal .modal-content {
    border: none;
    border-radius: unset;
}

#customize-modal .modal-header {
    padding: 10px;
    border-bottom: none;
    background-color: #ea5543;
}

#customize-modal .modal-body {
    padding: 0 15px 0 15px;
}

#customize-modal .btn[id*=save-document] {
    background: white;
    border-radius: 5px;
    font-size: 13px;
    padding: 7px 15px;
    margin: 5px 15px 0 0;
    color: #000;
}

#customize-modal .btn[id=cancel-customization] {
    background: none;
    color: white;
    padding: 10px;
    font-size: 16px;
}

#customize-modal .modal-body>.row>[class*=col-] {
    padding: 0 !important;
    height: calc(100vh - 65px) !important;
    background-color: #283039;
}

#customize-modal .customize-waiting-overlay {
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    margin-left: -15px;
    background-color: #eaecfa;
    opacity: 0.95;
}

#customize-modal .customize-waiting-text {
    z-index: 3;
    width: auto;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: montserrat;
    text-transform: uppercase;
    font-weight: 800;
    color: #000000;
    letter-spacing: 0.2em;
}

#customize-modal .customize-waiting-text::before, #customize-modal .customize-waiting-text::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: #000000;
    position: absolute;
    -webkit-animation: load .7s infinite alternate ease-in-out;
    animation: load .7s infinite alternate ease-in-out;
}

#customize-modal .customize-waiting-text::before {
    top: 0;
}

#customize-modal .customize-waiting-text::after {
    bottom: 0;
}

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

@keyframes load {
    0% {
        left: -30px;
        height: 30px;
        width: 15px;
    }
    50% {
        height: 8px;
        width: 40px;
    }
    100% {
        left: 100%;
        height: 30px;
        width: 15px;
    }
}

.product-actions .document-customize {
    height: 2.75rem;
    line-height: inherit;
    padding-top: .625rem;
}

.thumbnail-container.chili-customizable .product-description {
    height: 90px !important
}

.thumbnail-container.chili-customizable .highlighted-informations {
    padding-bottom: 3.7em !important;
}

/*Profile images style*/

.thumbnail-container img[src*="/CHILI/"] {
    width: 100%;
    margin: 0 !important;
}

.thumbnail-container {
    overflow: hidden;
}

#product-modal img.product-cover-modal[src*="/CHILI/"] {
    width: 100%
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

.ui-datepicker.ui-widget {
    font-size: 12px;
}

/* cart page : Actions buttons */

.cart-grid .cart-line-product-actions a {
    display: inline-block;
}

.cart-grid .cart-line-product-actions a.disabled {
    cursor: no-drop;
}

.cart-grid .cart-line-product-actions a.remove-from-cart {
    display: none;
}

/* cart page : Previews Diaporama */

.diaporama *:focus, .diaporama *:active {
    outline: none;
}

.diaporama .diaporama-controls {
    height: 46px;
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 8px;
    position: absolute;
    bottom: 0px;
    left: 0;
}

.diaporama .diaporama-element {
    background-size: contain;
    width: 100%;
    height: calc(100vh - 180px);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #e6e6e6;
}

button.control-preview {
    background: black;
    color: white;
    font-size: 24px;
    padding: 5px;
    line-height: 13px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
}

button#cancel-preview {
    position: absolute;
    right: -12px;
    top: -12px;
    z-index: 12000;
}

#preview-modal .modal-content {
    border-radius: 0;
}

#preview-modal .modal-dialog {
    position: unset;
    max-width: 95% !important;
}

#preview-modal .modal-body {
    padding: 15px 15px 50px 15px;
}

/* Editor : us3-navigation */

.us3-nav {
    margin-top: 20px;
    padding: 0px 60px;
}

.us3-nav-pagination {
    margin: 20px -12px;
    color: white;
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 25px;
    width: calc(100% - 61px);
}

.us3-nav-pagination .us3-nav-nbpg {
    display: inline-block;
    background: none;
    border: 1px solid #ea5543;
    width: 30px;
    color: white;
    text-align: center;
    border-radius: 4px;
}

.us3-nav-pagination button {
    margin: 0 5%;
    background: #ea5543;
    border: none;
    border-radius: 20px;
    width: 25px;
    height: 25px;
    color: white;
    line-height: 0;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 992px) {}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 1113px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1273px) {}