#toolbar {
    position: absolute;
    z-index: 1;
    left: 1rem;
    top: 5rem;
}

#message-editor {
    display: none;
}

.template_container .canvas-container {
    margin: 0 auto;
}

.popover-container {
    position: absolute;
    bottom: 10px;
    transform: translateX(-50%);
}

.popover-content {
    background: linear-gradient(-180deg, #363636 0%, #262626 100%);
    border-radius: 7px;
    position: relative;
    padding: 0.25rem;
}

.popover-content.type-i-text, .popover-content.type-textbox {
    width: 500px;
}

.popover-content.type-image {
    width: 278px;
}

.popover-content.type-svg {
    width: 332px;
}

#font_size {
    width: 68px;
}

#font-style .custom-select {
    border-radius: 0;
}

#font-style .input-group-text {
    padding: 0 .5rem;
    border-radius: 0;
}

.popover-content .sp-replacer {
    border-radius: .25rem;
    border: none;
    height: 100%;
    width: 100%;
    padding: 0.25rem;
}

.popover-content .sp-replacer .sp-preview {
    height: 100%;
    width: 100%;
    margin-right: 0;
}

#texte-style .btn {
    border-radius: 0;
}

.popover-content .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
    background-color: #878787;
    border-color: #878787;
}

.popover-content .btn-sm {
    padding: 0.35rem 0.5rem 0.35rem 0.5rem;
    font-size: 1.00625rem;
    line-height: 1;
    border-radius: 0.2rem;
}

.popover-content #input-transform-rotation {
    width: 50px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.sp-preview:after {
    content: '';
    display: block;
    background: url(../../img/bo/bg-trait.png) center no-repeat;
    background-size: 100%;
    z-index: 9999999;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.sp-clear-display {
    background-image: none !important;
}

.dropdown-font-type .dropdown-toggle::after {
    position: absolute;
    right: 0.5rem;
    top: 45%;
}

.dropdown-toggle-after-none::after {
    display: none;
}

#btn-transform-rotation {
    height: 35px !important;
}

/* Supprimer les flèches de contrôle pour les inputs de type number */
#input-font-size::-webkit-outer-spin-button,
#input-font-size::-webkit-inner-spin-button,
#input-transform-rotation::-webkit-outer-spin-button,
#input-transform-rotation::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Supprimer les flèches de contrôle pour Firefox */
#input-font-size {
    -moz-appearance: textfield;
}


#btn-font-type {
    padding-top: 7px;
    padding-bottom: 7px;
}


#customBox .sp-container {
    background-color: #e8e9e8;
    border: 1px solid #ffffff;
    left: 50% !important;
    top: 47px !important;
    transform: translateX(-50%);
    width: auto;
    border-radius: 10px;
}

#customBox .sp-palette {
    max-width: none;
}

#customBox .sp-palette .sp-thumb-inner {
    border-radius: 50% !important;
}

#customBox .sp-palette .sp-thumb-el {
    border-radius: 50% !important;
    border: solid 0px transparent !important;
}

#customBox .sp-type-textbox .sp-thumb-el {
    width: 25px;
    height: 25px;
}

#customBox .sp-type-svg .sp-thumb-el {
    width: 25px;
    height: 25px;
}


#customBox .sp-cf:before, .sp-cf:after {
    content: none;
}

#customBox .sp-palette-row {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    gap: 0.2rem;
}

#customBox .sp-thumb-el {
    grid-row: 1;
}

#customBox .sp-palette-row-selection {
    display: none;
}

[data-fjs-click="delete-layer-object"]:hover svg{
    transition: all 200ms ease-in-out;
    fill: orange;
}


/* Reponsive */
@media (max-width: 767.98px) {
    #template-editor {
        display: none;
    }

    #message-editor {
        display: block;
    }
}