.sffm-floatmenu-wrapper .sffm-floatmenu {
    position: fixed;
    margin: 0;
    padding: 0;
    z-index: var(--sffm-menu-z-index, 999);
}

.sffm-position-bottom-right .sffm-floatmenu {
    bottom: var(--sffm-menu-offset-bottom, 0);
    right: var(--sffm-menu-offset-right, 0);
}

.sffm-position-middle-left .sffm-floatmenu {
    top: 50%;
    left: var(--sffm-menu-offset-left, 0);
    transform: translateY(-50%);
}

.sffm-position-middle-right .sffm-floatmenu {
    top: 50%;
    right: var(--sffm-menu-offset-right, 0);
    transform: translateY(-50%);
}

.sffm-orientation-horizontal .sffm-menu {
    flex-direction: row;
}

.sffm-orientation-vertical .sffm-menu {
    flex-direction: column;
}

.sffm-orientation-horizontal.sffm-position-top-right .sffm-menu,
.sffm-orientation-horizontal.sffm-position-bottom-right .sffm-menu {
    flex-direction: row-reverse;
}

.sffm-orientation-vertical.sffm-position-bottom-left .sffm-menu,
.sffm-orientation-vertical.sffm-position-bottom-right .sffm-menu {
    flex-direction: column-reverse;
}

.sffm-floatmenu-wrapper ul.sffm-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: var(--sffm-button-gap, 5px);
}

.sffm-floatmenu-wrapper ul.sffm-menu li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sffm-button-bg, #000);
    color: var(--sffm-button-color, #FFF);
    height: var(--sffm-buttton-size, 50px);
    width: var(--sffm-buttton-size, 50px);
    font-size: var(--sffm-buttton-font-size, 20px);
    text-decoration: none;
    transition: all 0.3s ease;
    border: none !important;
}

.sffm-floatmenu-wrapper ul.sffm-menu li > a > img{
    max-width: 100%;
    width: var(--sffm-buttton-font-size, 20px);
    height: auto;
}

.sffm-floatmenu-wrapper ul.sffm-menu li:hover>a {
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    color: var(--sffm-button-color-hover, var(--sffm-button-color, #FFF));
}

.sffm-shape-round ul.sffm-menu li>a,
.sffm-shape-round .sffm-floatmenu-trigger,
.sffm-shape-round .animate--ripple:before {
    clip-path: circle(50% at 50% 50%);
}
.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(1) {
    transition-delay: 0.05s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(2) {
    transition-delay: 0.1s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(3) {
    transition-delay: 0.15s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(4) {
    transition-delay: 0.2s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(5) {
    transition-delay: 0.25s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(6) {
    transition-delay: 0.3s;
}
.sffm-floatmenu-wrapper ul.sffm-menu li {
    transform: translateX(calc( var(--sffm-translate-x, 0) * 1 )) translateY(calc( var(--sffm-translate-y, 0) * 1 )) scale(var(--sffm-scale, 1)) rotate(var(--sffm-rotate, 0));
    opacity: var(--sffm-opacity, 1);
    transition: all 0.3s ease;
    position: relative;
    filter: drop-shadow(var(--sffm-button-shadow-x, 0) var(--sffm-button-shadow-y, 0) var(--sffm-button-shadow-blur, 0) var(--sffm-button-shadow-color, transparent));
}

.sffm-floatmenu-wrapper .sffm-floatmenu-show ul.sffm-menu li {
    transform: translateX(0) translateY(0) scale(var(--sffm-scale-hover, 1)) rotate(var(--sffm-rotate-hover, 0));
    opacity: var(--sffm-opacity-hover, 1);
}

.sffm-floatmenu-wrapper.sffm-step-fade,
.sffm-floatmenu-wrapper.sffm-no-step-fade,
.sffm-floatmenu-wrapper.sffm-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
    --sffm-opacity: 0;
    --sffm-opacity-hover: 1;
}

.sffm-floatmenu-wrapper.sffm-step-scale,
.sffm-floatmenu-wrapper.sffm-no-step-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-scale,
.sffm-floatmenu-wrapper.sffm-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
    --sffm-scale: 0;
    --sffm-scale-hover: 1;
}

.sffm-floatmenu-wrapper.sffm-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate,
.sffm-floatmenu-wrapper.sffm-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-rotate-scale,
.sffm-floatmenu-wrapper.sffm-step-fade-rotate-scale,
.sffm-floatmenu-wrapper.sffm-no-step-fade-rotate-scale {
    --sffm-rotate: 0;
    --sffm-rotate-hover: 3600deg;
}

ul.sffm-menu li .sffm-tooltip {
    border-radius: 4px;
    position: absolute;
    opacity: 0;
    line-height: 1.2;
    visibility: hidden;
    background: var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
    transition: all 0.2s ease;
}

ul.sffm-menu li .sffm-tooltip:before {
    transition: all 0.2s ease;
}

ul.sffm-menu li:hover .sffm-tooltip {
    opacity: 1;
    visibility: visible;
}

ul.sffm-menu li .sffm-tooltip:hover {
    --sffm-tooltip-bg-color: var(--sffm-tooltip-hover-bg-color);
}

ul.sffm-menu li .sffm-tooltip a {
    display: block;
    white-space: nowrap;
    padding: 8px 20px;
    color: var(--sffm-tooltip-text-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF)));
    font-family: var(--sffm-tooltip-font-family, Default);
    font-weight: var(--sffm-tooltip-font-weight, 400);
    font-style: var(--sffm-tooltip-font-style, normal);
    text-transform: var(--sffm-tooltip-text-transform, none);
    text-decoration: var(--sffm-tooltip-text-decoration, none);
    font-size: var(--sffm-tooltip-font-size, inherit);
    line-height: var(--sffm-tooltip-line-height, inherit);
    letter-spacing: var(--sffm-tooltip-letter-spacing, inherit);
}

ul.sffm-menu li .sffm-tooltip:hover a {
    --sffm-tooltip-text-color: var(--sffm-tooltip-hover-text-color);
}

.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
    left: 100%;
    margin-left: var(--sffm-tooltip-indent, 10px);
    top: 50%;
    transform: translateY(-50%);
}
.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
    transform: rotate(-90deg) translateY(50%);
    transform-origin: 0 100%;
    left: 50%;
    bottom: 100%;
    margin-bottom: var(--sffm-tooltip-indent, 10px);
}
.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))) transparent transparent;
    transform: translateY(-50%);
}
.sffm-floatmenu-template-4{
    --sffm-tooltip-bg-color: #7b0dae;
    --sffm-tooltip-hover-bg-color: var(--sffm-tooltip-bg-color);
    --sffm-tooltip-text-color: #FFF;
    --sffm-tooltip-hover-text-color: var(--sffm-tooltip-text-color);
}

.sffm-floatmenu-template-4 ul.sffm-menu li .sffm-tooltip {
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0;
}

.sffm-floatmenu-template-4 ul.sffm-menu li .sffm-tooltip a {
    padding: 10px 20px;
}

.sffm-floatmenu-template-4 ul.sffm-menu li>a {
    transition: none;
}
.sffm-floatmenu-template-4 {
    --sffm-tooltip-indent: 10px;
    --sffm-tooltip-indent-hover: 0;
}
.sffm-floatmenu-trigger {
    position: relative;
    width: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
    height: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--sffm-trigger-btn-icon-size, var(--sffm-buttton-font-size, 20px));
    background: var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg, #000));
    color: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
    transition: all 0.3s ease;
}

.sffm-floatmenu-trigger img {
    max-width: 100%;
    width: var(--sffm-trigger-btn-icon-size, var(--sffm-buttton-font-size, 20px));
    height: auto;
}
.sffm-floatmenu-toggle-close-icon {
    display: none;
}
.sffm-floatmenu-template-9 .sffm-floatmenu-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sffm-button-gap, 5px);
}

.sffm-floatmenu-template-9 ul.sffm-menu{
    visibility: hidden;
}

.sffm-floatmenu-template-9 .sffm-floatmenu-show ul.sffm-menu{
    visibility: visible;
}

.sffm-floatmenu-template-9.sffm-orientation-horizontal .sffm-floatmenu-inner-wrap {
    flex-direction: row;
}

.sffm-floatmenu-template-9.sffm-orientation-vertical .sffm-floatmenu-inner-wrap {
    flex-direction: column;
}

.sffm-floatmenu-template-9.sffm-orientation-horizontal.sffm-position-bottom-right .sffm-floatmenu-inner-wrap,
.sffm-floatmenu-template-9.sffm-orientation-horizontal.sffm-position-top-right .sffm-floatmenu-inner-wrap {
    flex-direction: row-reverse;
}
.sffm-floatmenu-template-9 .sffm-menu-items{
    --sffm-translate-y: 0px;
    --sffm-translate-x: 0px;
}
.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-1{
    --sffm-translate-y: calc(1*100% + 1*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-2{
    --sffm-translate-y: calc(2*100% + 2*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-3{
    --sffm-translate-y: calc(3*100% + 3*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-4{
    --sffm-translate-y: calc(4*100% + 4*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-5{
    --sffm-translate-y: calc(5*100% + 5*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-bottom-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-right .sffm-menu-no-6{
    --sffm-translate-y: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}
.animate--ripple:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    animation: sffm-ripple 1.5s ease-out infinite;
    background: var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg, #000));
}

.animate--ripple:hover:before {
    display: none;
}