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

body.admin-bar [class*="sffm-position-top-"] .sffm-floatmenu {
    margin-top: 32px;
}

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

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

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

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

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

.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-shape-triangle ul.sffm-menu li>a,
.sffm-shape-triangle .sffm-floatmenu-trigger,
.sffm-shape-triangle .animate--ripple:before {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.sffm-shape-triangle ul.sffm-menu li>a i,
.sffm-shape-triangle .sffm-floatmenu-trigger i,
.sffm-shape-triangle .sffm-floatmenu-trigger .sffm-toggle-button {
    transform: translateY(calc(var(--sffm-buttton-size, 50px)/8));
}

.sffm-shape-rounded-square ul.sffm-menu li>a,
.sffm-shape-rounded-square .sffm-floatmenu-trigger,
.sffm-shape-rounded-square .animate--ripple:before {
    border-radius: 0.3em;
}

.sffm-shape-rhombus ul.sffm-menu li>a,
.sffm-shape-rhombus .sffm-floatmenu-trigger,
.sffm-shape-rhombus .animate--ripple:before {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.sffm-shape-pentagon ul.sffm-menu li>a,
.sffm-shape-pentagon .sffm-floatmenu-trigger,
.sffm-shape-pentagon .animate--ripple:before {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.sffm-shape-pentagon ul.sffm-menu li>a i,
.sffm-shape-pentagon .sffm-floatmenu-trigger i,
.sffm-shape-pentagon .sffm-floatmenu-trigger .sffm-toggle-button {
    transform: translateY(calc(var(--sffm-buttton-size, 50px)/20));
}

.sffm-shape-hexagon ul.sffm-menu li>a,
.sffm-shape-hexagon .sffm-floatmenu-trigger,
.sffm-shape-hexagon .animate--ripple:before {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.sffm-shape-star ul.sffm-menu li>a,
.sffm-shape-star .sffm-floatmenu-trigger,
.sffm-shape-star .animate--ripple:before {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sffm-shape-rabbet ul.sffm-menu li>a,
.sffm-shape-rabbet .sffm-floatmenu-trigger,
.sffm-shape-rabbet .animate--ripple:before {
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

.sffm-shape-oval ul.sffm-menu li>a {
    clip-path: ellipse(50% 35% at 50% 50%);
}

.sffm-shape-oval.sffm-orientation-vertical ul.sffm-menu li>a,
.sffm-shape-oval .sffm-floatmenu-trigger,
.sffm-shape-oval .animate--ripple:before {
    clip-path: ellipse(35% 50% at 50% 50%);
}

.sffm-shape-blob ul.sffm-menu li>a,
.sffm-shape-blob .sffm-floatmenu-trigger{
    animation: sffm-border-transform 9s linear infinite;
}

.sffm-shape-blob .animate--ripple:before {
    border-radius: 50%;
}

@keyframes sffm-border-transform {
    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-1 {
    transition-delay: 0.05s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-2 {
    transition-delay: 0.1s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-3 {
    transition-delay: 0.15s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-4 {
    transition-delay: 0.2s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-5 {
    transition-delay: 0.25s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-6 {
    transition-delay: 0.3s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-7 {
    transition-delay: 0.35s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-8 {
    transition-delay: 0.4s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-9 {
    transition-delay: 0.45s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-10 {
    transition-delay: 0.5s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-11 {
    transition-delay: 0.55s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-12 {
    transition-delay: 0.6s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-13 {
    transition-delay: 0.65s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-14 {
    transition-delay: 0.7s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-15 {
    transition-delay: 0.75s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-show ul.sffm-menu li.sffm-menu-no-16 {
    transition-delay: 0.8s;
}

.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[class*="sffm-step-"] ul.sffm-menu li:nth-last-child(7) {
    transition-delay: 0.35s;
}

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

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

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

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

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

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

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

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

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

.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, -20px);
    top: 50%;
    transform: translateY(-50%);
}

.sffm-position-top-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip {
    right: 100%;
    margin-right: var(--sffm-tooltip-indent, -20px);
    top: 50%;
    transform: translateY(-50%);
}

.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip {
    transform: rotate(90deg) translateY(-50%);
    transform-origin: 0 0;
    left: 50%;
    top: 100%;
    margin-top: var(--sffm-tooltip-indent, -20px);
}

.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, -20px);
}

.sffm-position-top-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-left.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip {
    margin-left: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-position-top-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li:hover .sffm-tooltip {
    margin-right: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-position-top-left.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-top-middle.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-top-right.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip {
    margin-top: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-position-bottom-left.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-middle.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip,
.sffm-position-bottom-right.sffm-orientation-horizontal ul.sffm-menu li:hover .sffm-tooltip {
    margin-bottom: var(--sffm-tooltip-indent-hover, 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-position-top-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before,
.sffm-position-bottom-right.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
    transform: translateY(-50%);
}


/*Floating menu template 2*/

.sffm-floatmenu-template-2.sffm-floatmenu-wrapper ul.sffm-menu li:hover>a {
    height: calc( var(--sffm-buttton-size, 50px)*1.2);
    width: calc( var(--sffm-buttton-size, 50px)*1.2);
}


/*Floating menu template 3*/

.sffm-floatmenu-template-3 ul.sffm-menu li .sffm-tooltip:before {
    display: none;
}

.sffm-floatmenu-template-3 ul.sffm-menu li .sffm-tooltip {
    height: 80%;
    display: flex;
    align-items: center;
}

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

.sffm-floatmenu-template-3 {
    --sffm-tooltip-indent: 30px;
    --sffm-tooltip-indent-hover: 5px;
}

/*Floating menu template 4*/

.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-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-4.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-4.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip{
    border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}

.sffm-floatmenu-template-4.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip{
    border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-4.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0 0 0.3em;
}

.sffm-floatmenu-template-4.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0.3em 0.3em 0;
}

.sffm-floatmenu-template-4.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0.3em 0 0;
}

.sffm-floatmenu-template-4.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0 0.3em 0.3em;
}

.sffm-floatmenu-template-4.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover {
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-4.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover {
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-4.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover {
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-4.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover {
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-4.sffm-shape-star ul.sffm-menu li:hover > a{
    clip-path: none;
}

.sffm-floatmenu-template-4 {
    --sffm-tooltip-indent: 10px;
    --sffm-tooltip-indent-hover: 0;
}

/*Floating menu template 5*/

.sffm-floatmenu-template-5 {
    --sffm-tooltip-indent: 30px;
    --sffm-tooltip-indent-hover: 0;
}

.sffm-floatmenu-template-5 ul.sffm-menu li .sffm-tooltip:before {
    display: none;
}

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

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

.sffm-floatmenu-template-5 ul.sffm-menu li>a {
    transition: none;
}

.sffm-floatmenu-template-5.sffm-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-5.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip{
    border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}

.sffm-floatmenu-template-5.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip{
    border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0 0 0.3em;
}

.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0.3em 0.3em 0;
}

.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0.3em 0 0;
}

.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0 0.3em 0.3em;
}

.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-left-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-right-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-top-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-5.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-5.sffm-shape-triangle ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-5.sffm-shape-star ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-5.sffm-shape-pentagon ul.sffm-menu li:hover > a{
    clip-path: none;
}

/*Floating menu template 6*/

.sffm-floatmenu-template-6 {
    --sffm-tooltip-indent: 20px;
    --sffm-tooltip-indent-hover: 0;
}

.sffm-floatmenu-template-6.sffm-floatmenu-wrapper .sffm-menu {
    padding: calc(var(--sffm-buttton-size, 50px)/6);
    background: var(--sffm-buttons-bg-color, #FF0000);
}

.sffm-floatmenu-template-6.sffm-shape-rounded-square.sffm-floatmenu-wrapper .sffm-menu {
    border-radius: 0.3em;
}

.sffm-floatmenu-template-6.sffm-shape-round.sffm-floatmenu-wrapper .sffm-menu {
    border-radius: var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-6 ul.sffm-menu li .sffm-tooltip:before {
    display: none;
}

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

.sffm-floatmenu-template-6 ul.sffm-menu li .sffm-tooltip {
    border-radius: 0;
}

.sffm-floatmenu-template-6 ul.sffm-menu li>a {
    transition: none;
}

.sffm-floatmenu-template-6.sffm-left-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-6.sffm-top-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-shape-round.sffm-orientation-horizontal ul.sffm-menu li .sffm-tooltip{
    border-radius: 0 var(--sffm-buttton-size, 50px) var(--sffm-buttton-size, 50px) 0;
}

.sffm-floatmenu-template-6.sffm-right-side.sffm-shape-round.sffm-orientation-vertical ul.sffm-menu li .sffm-tooltip{
    border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0 0 0.3em;
}

.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0.3em 0.3em 0;
}

.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0.3em 0.3em 0 0;
}

.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rounded-square ul.sffm-menu li:hover > a{
    border-radius: 0 0 0.3em 0.3em;
}

.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-left-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-right-side.sffm-orientation-vertical.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-top-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(180deg, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-round ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rhombus ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-oval ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-hexagon ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-rabbet ul.sffm-menu li:hover,
.sffm-floatmenu-template-6.sffm-bottom-side.sffm-orientation-horizontal.sffm-shape-blob ul.sffm-menu li:hover{
    background: var(--sffm-button-bg-hover, var(--sffm-button-bg, #000));
    background: linear-gradient(0, transparent 50%, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)) 50%);
}

.sffm-floatmenu-template-6.sffm-shape-triangle ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-6.sffm-shape-star ul.sffm-menu li:hover > a,
.sffm-floatmenu-template-6.sffm-shape-pentagon ul.sffm-menu li:hover > a{
    clip-path: none;
}

/* Tigger CSS */

.sffm-floatmenu-trigger-idle-animation {
    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-trigger-idle-animation,
.sffm-floatmenu-trigger-hover-animation {
    position: relative;
    z-index: 9999;
}

.sffm-floatmenu-trigger-idle-animation:hover,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation,
.sffm-floatmenu-trigger-idle-animation:hover:before,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation:before {
    animation: none;
}

.sffm-floatmenu-trigger-idle-animation:hover:before,
.sffm-floatmenu-wrapper .sffm-floatmenu-show .sffm-floatmenu-trigger-idle-animation:before {
    opacity: 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-wrapper ul.sffm-menu li.sffm-menu-no-0 a {
    width: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
    height: var(--sffm-trigger-btn-size, var(--sffm-buttton-size, 50px));
}

.sffm-floatmenu-trigger:hover {
    background: var(--sffm-trigger-btn-hover-bg-color, var(--sffm-trigger-btn-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000))));
    color: var(--sffm-trigger-btn-hover-icon-color, var(--sffm-trigger-btn-icon-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF))))
}

.sffm-floatmenu-toggle-close-icon {
    display: none;
}

.sffm-floatmenu-show .sffm-floatmenu-toggle-open-icon {
    display: none;
}

.sffm-floatmenu-show .sffm-floatmenu-toggle-close-icon {
    display: block;
}


/*================================================
TEMPLATE 7 CSS
================================================*/

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip {
    position: static;
    opacity: 1;
    visibility: visible;
    right: auto;
    margin-right: 0;
    top: auto;
    transform: none;
    display: flex;
    align-items: center;
    border-radius: 0;
    margin: 0 !important;
    height: var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip:before {
    display: none;
}

.sffm-floatmenu-template-7 ul.sffm-menu li {
    display: flex;
    align-items: stretch;
    transition: transform 0.3s ease-in-out;
    background: var(--sffm-button-bg, #000);
}

.sffm-floatmenu-template-7.sffm-shape-round.sffm-left-side ul.sffm-menu li{
    border-radius: 0 50% 50% 0;
}

.sffm-floatmenu-template-7.sffm-shape-round.sffm-right-side ul.sffm-menu li{
    border-radius: 50% 0 0 50%;
}

.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-left-side ul.sffm-menu li{
    border-radius: 0 0.3em 0.3em 0;
}

.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-right-side ul.sffm-menu li{
    border-radius: 0.3em 0 0 0.3em;
}

.sffm-floatmenu-template-7 ul.sffm-menu li .sffm-tooltip {
    border-radius: 0;
}

.sffm-floatmenu-template-7 ul.sffm-menu li>a {
    transition: none;
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-top-right .sffm-floatmenu,
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-bottom-right .sffm-floatmenu {
    transform: translateX(calc(100% - var(--sffm-buttton-size, 50px)));
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-middle-right .sffm-floatmenu {
    transform: translateX(calc(100% - var(--sffm-buttton-size, 50px))) translateY(-50%);
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-right-side ul.sffm-menu {
    align-items: flex-start;
}

.sffm-floatmenu-template-7.sffm-shape-round.sffm-right-side ul.sffm-menu li>a {
    clip-path: none;
    border-radius: 50% 0 0 50%;
}

.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-right-side ul.sffm-menu li>a {
    border-radius: 0.3em 0 0 0.3em;
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-top-left .sffm-floatmenu,
.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-bottom-left .sffm-floatmenu {
    transform: translateX(calc(-1 * 100% + var(--sffm-buttton-size, 50px)));
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-position-middle-left .sffm-floatmenu {
    transform: translateX(calc(-1 * 100% + var(--sffm-buttton-size, 50px))) translateY(-50%);
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu {
    align-items: flex-end;
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-right-side ul.sffm-menu li:hover {
    transform: translateX(calc(-1 * var(--sffm-span-width)));
}

.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu li span {
    order: -1;
}

.sffm-floatmenu-wrapper.sffm-floatmenu-template-7.sffm-left-side ul.sffm-menu li:hover {
    transform: translateX(calc( var(--sffm-span-width)));
}

.sffm-floatmenu-template-7.sffm-shape-round.sffm-left-side ul.sffm-menu li>a {
    clip-path: none;
    border-radius: 0 50% 50% 0;
}

.sffm-floatmenu-template-7.sffm-shape-rounded-square.sffm-left-side ul.sffm-menu li>a {
    border-radius: 0 0.3em 0.3em 0;
}

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

/*================================================
TEMPLATE 8 CSS
================================================*/

.sffm-floatmenu-template-8 .sffm-floatmenu-inner-wrap {
    position: relative;
}

.sffm-floatmenu-template-8 ul.sffm-menu {
    visibility: hidden;
    position: absolute;
}

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

.sffm-floatmenu-template-8.sffm-floatmenu-wrapper.sffm-left-side {
    --sffm-translate-x: -100%;
    --sffm-translate-y: 0%;
}

.sffm-floatmenu-template-8.sffm-floatmenu-wrapper.sffm-right-side {
    --sffm-translate-x: 100%;
    --sffm-translate-y: 0%;
}

.sffm-floatmenu-template-8.sffm-position-top-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-top-right ul.sffm-menu {
    top: 0;
}

.sffm-floatmenu-template-8.sffm-position-bottom-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-right ul.sffm-menu {
    bottom: 0;
}

.sffm-floatmenu-template-8.sffm-position-top-left ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-left ul.sffm-menu {
    left: 110%;
}

.sffm-floatmenu-template-8.sffm-position-top-right ul.sffm-menu,
.sffm-floatmenu-template-8.sffm-position-bottom-right ul.sffm-menu {
    right: 110%;
}

.sffm-floatmenu-template-8.sffm-position-middle-left ul.sffm-menu {
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
}

.sffm-floatmenu-template-8.sffm-position-middle-right ul.sffm-menu {
    right: 110%;
    top: 50%;
    transform: translateY(-50%);
}


/*================================================
TEMPLATE 9 CSS
================================================*/

.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-orientation-vertical.sffm-position-bottom-right .sffm-floatmenu-inner-wrap,
.sffm-floatmenu-template-9.sffm-orientation-vertical.sffm-position-bottom-left .sffm-floatmenu-inner-wrap {
    flex-direction: column-reverse;
}

.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu {
    position: absolute;
    display: grid;
}

.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu li,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu li {
    padding: 0 calc(var(--sffm-button-gap, 5px)/2);
}

.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu li,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu li {
    padding: calc(var(--sffm-button-gap, 5px)/2) 0;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="3"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="5"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="7"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="9"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="11"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="13"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="15"] ul.sffm-menu li:last-child,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-floatmenu[data-number="17"] ul.sffm-menu li:last-child {
    display: none;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-0,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-0 {
    grid-area: 1 / 9 / 2 / 10;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-1 {
    grid-area: 1 / 8 / 2 / 9;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-2 {
    grid-area: 1 / 10 / 2 / 11;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-3 {
    grid-area: 1 / 7 / 2 / 8;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-4 {
    grid-area: 1 / 11 / 2 / 12;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-5 {
    grid-area: 1 / 6 / 2 / 7;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-6 {
    grid-area: 1 / 12 / 2 / 13;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-7 {
    grid-area: 1 / 5 / 2 / 6;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-8 {
    grid-area: 1 / 13 / 2 / 14;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-9 {
    grid-area: 1 / 4 / 2 / 5;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-10 {
    grid-area: 1 / 14 / 2 / 15;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-11 {
    grid-area: 1 / 3 / 2 / 4;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-12 {
    grid-area: 1 / 15 / 2 / 16;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-13 {
    grid-area: 1 / 2 / 2 / 3;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-14 {
    grid-area: 1 / 16 / 2 / 17;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-15 {
    grid-area: 1 / 1 / 2 / 2;
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-16 {
    grid-area: 1 / 17 / 2 / 18;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-0,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-0 {
    grid-area: 9 / 1 / 10 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-1,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-1 {
    grid-area: 8 / 1 / 9 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-2 {
    grid-area: 10 / 1 / 11 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-3,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-3 {
    grid-area: 7 / 1 / 8 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-4 {
    grid-area: 11 / 1 / 12 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-5,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-5 {
    grid-area: 6 / 1 / 7 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-6 {
    grid-area: 12 / 1 / 13 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-7,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-7 {
    grid-area: 5 / 1 / 6 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-8 {
    grid-area: 13 / 1 / 14 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-9,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-9 {
    grid-area: 4 / 1 / 5 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-10 {
    grid-area: 14 / 1 / 15 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-11 {
    grid-area: 3 / 1 / 4 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-12 {
    grid-area: 15 / 1 / 16 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-13 {
    grid-area: 2 / 1 / 3 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-14 {
    grid-area: 16 / 1 / 17 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-15 {
    grid-area: 1 / 1 / 2 / 2;
}

.sffm-floatmenu-template-9.sffm-position-middle-left .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-middle-right .sffm-menu-no-16 {
    grid-area: 17 / 1 / 18 / 2;
}

.sffm-floatmenu-template-9.sffm-position-top-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-bottom-middle ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-left ul.sffm-menu,
.sffm-floatmenu-template-9.sffm-position-middle-right ul.sffm-menu {
    gap: 0;
}


.sffm-floatmenu-template-9 .sffm-menu-items{
    --sffm-translate-y: 0px;
    --sffm-translate-x: 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-2,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-2{
    --sffm-translate-x: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-4,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-4{
    --sffm-translate-x: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-6,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-6{
    --sffm-translate-x: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-8,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-8{
    --sffm-translate-x: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-10,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-10{
    --sffm-translate-x: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-11,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-11{
    --sffm-translate-x: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-12,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-12{
    --sffm-translate-x: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-13,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-13{
    --sffm-translate-x: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-14,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-14{
    --sffm-translate-x: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-15,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-15{
    --sffm-translate-x: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-16,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-16{
    --sffm-translate-x: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-9.sffm-position-top-middle .sffm-menu-no-18,
.sffm-floatmenu-template-9.sffm-position-bottom-middle .sffm-menu-no-18{
    --sffm-translate-x: calc(-9*100% - 9*var(--sffm-button-gap, 5px));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.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));
}

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

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

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

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

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

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

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

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

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

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

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

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

/*===========================================================================
Template 10 
===========================================================================*/

.sffm-floatmenu-template-10 ul.sffm-menu {
    position: absolute;
    display: grid;
    visibility: hidden;
}

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

.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu {
    top: 0;
    left: 0;
}

.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu {
    top: 0;
    right: 0;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu {
    bottom: 0;
    left: 0;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu {
    bottom: 0;
    right: 0;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-0 {
    grid-area: 1 / 1 / 2 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-1 {
    grid-area: 2 / 1 / 3 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-2 {
    grid-area: 1 / 2 / 2 / 3;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-3 {
    grid-area: 3 / 1 / 4 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-4 {
    grid-area: 1 / 3 / 2 / 4;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-5 {
    grid-area: 4 / 1 / 5 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-6 {
    grid-area: 1 / 4 / 2 / 5;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-7 {
    grid-area: 5 / 1 / 6 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-8 {
    grid-area: 1 / 5 / 2 / 6;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-9 {
    grid-area: 6 / 1 / 7 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-10 {
    grid-area: 1 / 6 / 2 / 7;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-11 {
    grid-area: 7 / 1 / 8 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-12 {
    grid-area: 1 / 7 / 2 / 8;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-13 {
    grid-area: 8 / 1 / 9 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-14 {
    grid-area: 1 / 8 / 2 / 9;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-15 {
    grid-area: 9 / 1 / 10 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-16 {
    grid-area: 1 / 9 / 2 / 10;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-17 {
    grid-area: 10 / 1 / 11 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-18 {
    grid-area: 1 / 10 / 2 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-0 {
    grid-area: 10 / 1 / 11 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-1 {
    grid-area: 9 / 1 / 10 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-2 {
    grid-area: 10 / 2 / 11 / 3;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-3 {
    grid-area: 8 / 1 / 9 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-4 {
    grid-area: 10 / 3 / 11 / 4;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-5 {
    grid-area: 7 / 1 / 8 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-6 {
    grid-area: 10 / 4 / 11 / 5;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-7 {
    grid-area: 6 / 1 / 7 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-8 {
    grid-area: 10 / 5 / 11 / 6;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-9 {
    grid-area: 5 / 1 / 6 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-10 {
    grid-area: 10 / 6 / 11 / 7;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-11 {
    grid-area: 4 / 1 / 5 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-12 {
    grid-area: 10 / 7 / 11 / 8;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-13 {
    grid-area: 3 / 1 / 4 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-14 {
    grid-area: 10 / 8 / 11 / 9;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-15 {
    grid-area: 2 / 1 / 3 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-16 {
    grid-area: 10 / 9 / 11 / 10;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-17 {
    grid-area: 1 / 1 / 2 / 2;
}

.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-18 {
    grid-area: 10 / 10 / 11 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-0 {
    grid-area: 10 / 10 / 11 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-1 {
    grid-area: 9 / 10 / 10 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-2 {
    grid-area: 10 / 9 / 11 / 10;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-3 {
    grid-area: 8 / 10 / 9 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-4 {
    grid-area: 10 / 8 / 11 / 9;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-5 {
    grid-area: 7 / 10 / 8 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-6 {
    grid-area: 10 / 7 / 11 / 8;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-7 {
    grid-area: 6 / 10 / 7 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-8 {
    grid-area: 10 / 6 / 11 / 7;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-9 {
    grid-area: 5 / 10 / 6 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-10 {
    grid-area: 10 / 5 / 11 / 6;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-11 {
    grid-area: 4 / 10 / 5 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-12 {
    grid-area: 10 / 4 / 11 / 5;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-13 {
    grid-area: 3 / 10 / 4 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-14 {
    grid-area: 10 / 3 / 11 / 4;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-15 {
    grid-area: 2 / 10 / 3 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-16 {
    grid-area: 10 / 2 / 11 / 3;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-17 {
    grid-area: 1 / 10 / 2 / 11;
}

.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-18 {
    grid-area: 10 / 1 / 11 / 2;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-0 {
    grid-area: 1 / 10 / 2 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-1 {
    grid-area: 2 / 10 / 3 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-2 {
    grid-area: 1 / 9 / 2 / 10;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-3 {
    grid-area: 3 / 10 / 4 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-4 {
    grid-area: 1 / 8 / 2 / 9;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-5 {
    grid-area: 4 / 10 / 5 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-6 {
    grid-area: 1 / 7 / 2 / 8;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-7 {
    grid-area: 5 / 10 / 6 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-8 {
    grid-area: 1 / 6 / 2 / 7;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-9 {
    grid-area: 6 / 10 / 7 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-10 {
    grid-area: 1 / 5 / 2 / 6;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-11 {
    grid-area: 7 / 10 / 8 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-12 {
    grid-area: 1 / 4 / 2 / 5;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-13 {
    grid-area: 8 / 10 / 9 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-14 {
    grid-area: 1 / 3 / 2 / 4;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-15 {
    grid-area: 9 / 10 / 10 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-16 {
    grid-area: 1 / 2 / 2 / 3;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-17 {
    grid-area: 10 / 10 / 11 / 11;
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-18 {
    grid-area: 1 / 1 / 2 / 2;
}

.sffm-floatmenu-template-10 .sffm-menu-items{
    --sffm-translate-y: 0px;
    --sffm-translate-x: 0px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-2,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-2 {
    --sffm-translate-x: calc(-1*100% - 1*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-4,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-4 {
    --sffm-translate-x: calc(-2*100% - 2*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-6,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-6 {
    --sffm-translate-x: calc(-3*100% - 3*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-8,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-8 {
    --sffm-translate-x: calc(-4*100% - 4*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-10,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-10 {
    --sffm-translate-x: calc(-5*100% - 5*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-12,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-12 {
    --sffm-translate-x: calc(-6*100% - 6*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-14,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-14 {
    --sffm-translate-x: calc(-7*100% - 7*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-left .sffm-menu-no-16,
.sffm-floatmenu-template-10.sffm-position-bottom-left .sffm-menu-no-16 {
    --sffm-translate-x: calc(-8*100% - 8*var(--sffm-button-gap, 5px));
}

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

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

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

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

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

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

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-12,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-12 {
    --sffm-translate-x: calc(6*100% + 6*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-14,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-14 {
    --sffm-translate-x: calc(7*100% + 7*var(--sffm-button-gap, 5px));
}

.sffm-floatmenu-template-10.sffm-position-top-right .sffm-menu-no-16,
.sffm-floatmenu-template-10.sffm-position-bottom-right .sffm-menu-no-16 {
    --sffm-translate-x: calc(8*100% + 8*var(--sffm-button-gap, 5px));
}

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

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-1,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-2 {
    transition-delay: 0.1s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-3,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-4 {
    transition-delay: 0.2s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-5,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-6 {
    transition-delay: 0.3s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-7,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-8 {
    transition-delay: 0.4s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-9,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-10 {
    transition-delay: 0.5s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-11,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-12 {
    transition-delay: 0.6s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-13,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-14 {
    transition-delay: 0.7s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-15,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-16 {
    transition-delay: 0.8s;
}

.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-17,
.sffm-floatmenu-template-10[class*="sffm-step-"] ul.sffm-menu li.sffm-menu-no-18 {
    transition-delay: 0.9s;
}

.sffm-floatmenu-template-10.sffm-shape-oval ul.sffm-menu li:nth-child(odd) a {
    clip-path: ellipse(35% 50% at 50% 50%)
}

.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(even) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(even) .sffm-tooltip {
    left: 100%;
    margin-left: var(--sffm-tooltip-indent, -20px);
    top: 50%;
    transform: translateY(-50%);
}

.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(odd) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip {
    transform: rotate(90deg) translateY(-50%);
    transform-origin: 0 0;
    left: 50%;
    top: 100%;
    margin-top: var(--sffm-tooltip-indent, -20px);
}

.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(even) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even) .sffm-tooltip {
    right: 100%;
    margin-right: var(--sffm-tooltip-indent, -20px);
    top: 50%;
    transform: translateY(-50%);
}

.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(odd) .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip {
    transform: rotate(-90deg) translateY(50%);
    transform-origin: 0 100%;
    left: 50%;
    bottom: 100%;
    margin-bottom: var(--sffm-tooltip-indent, -20px);
}

.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(even):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(even):hover .sffm-tooltip {
    margin-left: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(even):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even):hover .sffm-tooltip {
    margin-right: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-floatmenu-template-10.sffm-position-top-left ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip {
    margin-top: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-floatmenu-template-10.sffm-position-bottom-left ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(odd):hover .sffm-tooltip {
    margin-bottom: var(--sffm-tooltip-indent-hover, 10px);
}

.sffm-floatmenu-template-10.sffm-position-bottom-left li .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-top-right ul.sffm-menu li:nth-child(odd) .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-top-left 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-10.sffm-position-top-right ul.sffm-menu li:nth-child(even) .sffm-tooltip:before,
.sffm-floatmenu-template-10.sffm-position-bottom-right ul.sffm-menu li:nth-child(even) .sffm-tooltip:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent var(--sffm-tooltip-bg-color, var(--sffm-button-bg-hover, var(--sffm-button-bg, #000)));
    transform: translateY(-50%);
}


/*==============================================================
Template 11
==============================================================*/

.sffm-floatmenu-template-11 ul.sffm-menu,
.sffm-floatmenu-template-11 .sffm-circular-placeholder{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: var(--sffm-buttton-size, 50px);
    width: var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-11 ul.sffm-menu li {
    position: absolute;
}

.sffm-floatmenu-template-11 .sffm-floatmenu-hide ul.sffm-menu li {
    left: 50% !important;
    top: 50% !important;
    margin-left: calc( var(--sffm-buttton-size, 50px)/2 * -1);
    margin-top: calc( var(--sffm-buttton-size, 50px)/2 * -1);
}

.sffm-circular-yes ul.sffm-menu li .sffm-tooltip {
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
}

.sffm-circular-yes 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-11.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-position-top-middle ul.sffm-menu li.sffm-inverse .sffm-tooltip a,
.sffm-floatmenu-template-12.sffm-position-bottom-middle ul.sffm-menu li:not(.sffm-inverse) .sffm-tooltip a,
.sffm-floatmenu-template-14.sffm-right-side ul.sffm-menu li .sffm-tooltip a,
.sffm-floatmenu-template-13 ul.sffm-menu li.sffm-inverse .sffm-tooltip a,
.sffm-floatmenu-template-15 ul.sffm-menu li.sffm-inverse .sffm-tooltip a {
    display: inline-block;
    transform: rotate(180deg);
}


/*==============================================================
Template 12
==============================================================*/

.sffm-floatmenu-template-12 {
    --sffm-menu-offset-left: 20px;
    --sffm-menu-offset-right: 20px;
    --sffm-menu-offset-top: 20px;
    --sffm-menu-offset-bottom: 20px;
}

.sffm-floatmenu-template-12 .sffm-floatmenu-inner-wrap {
    position: relative;
}

.sffm-floatmenu-template-12 ul.sffm-menu,
.sffm-floatmenu-template-12 .sffm-circular-placeholder{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: var(--sffm-buttton-size, 50px);
    width: var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-12 ul.sffm-menu li {
    position: absolute;
}

.sffm-floatmenu-template-12 .sffm-floatmenu-hide ul.sffm-menu li {
    left: 50% !important;
    top: 50% !important;
    margin-left: calc( var(--sffm-buttton-size, 50px)/2 * -1);
    margin-top: calc( var(--sffm-buttton-size, 50px)/2 * -1);
}

.sffm-floatmenu-template-12 {
    --sffm-tooltip-indent: 0;
    --sffm-tooltip-indent-hover: 0;
}


/*
.sffm-floatmenu-template-12 ul.sffm-menu li .sffm-tooltip:before{
    display: none;
}

.sffm-floatmenu-template-12 ul.sffm-menu li .sffm-tooltip{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 20px;    
    transition: none;
    border-radius: 0;
}

.sffm-floatmenu-template-12.sffm-position-middle-left.sffm-orientation-vertical ul.sffm-menu li:hover{
    background: var(--sffm-button-bg, #111);
    background: linear-gradient(90deg, transparent 50%, var(--sffm-button-bg, #111) 50%);
}

.sffm-floatmenu-template-12.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li:hover{
    background: var(--sffm-button-bg, #111);
    background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg, #111) 50%);
}

.sffm-floatmenu-template-12.sffm-position-middle-right.sffm-orientation-vertical ul.sffm-menu li:hover{
    background: var(--sffm-button-bg, #111);
    background: linear-gradient(-90deg, transparent 50%, var(--sffm-button-bg, #111) 50%);
}

.sffm-floatmenu-template-12.sffm-position-middle-left.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-12.sffm-position-middle-left.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li .sffm-tooltip{
    border-radius: 0 var(--sffm-buttton-size, 50px)  var(--sffm-buttton-size, 50px) 0;
}

.sffm-floatmenu-template-12.sffm-position-middle-right.sffm-orientation-vertical.sffm-shape-round ul.sffm-menu li .sffm-tooltip,
.sffm-floatmenu-template-12.sffm-position-middle-right.sffm-orientation-vertical.sffm-shape-oval ul.sffm-menu li .sffm-tooltip{
    border-radius: var(--sffm-buttton-size, 50px) 0 0 var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-12.sffm-position-middle-left.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li .sffm-tooltip{
    border-radius: 0 0.3em 0.3em 0;
}

.sffm-floatmenu-template-12.sffm-position-middle-right.sffm-orientation-vertical.sffm-shape-rounded-square ul.sffm-menu li .sffm-tooltip{
    border-radius: 0.3em 0 0 0.3em;
}
*/


/*===========================================================
Template 13
============================================================*/

.sffm-floatmenu-template-13 .sffm-floatmenu-inner-wrap {
    position: relative;
}

.sffm-floatmenu-template-13 ul.sffm-menu,
.sffm-floatmenu-template-13 .sffm-circular-placeholder{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: var(--sffm-buttton-size, 50px);
    width: var(--sffm-buttton-size, 50px);
}

.sffm-floatmenu-template-13 ul.sffm-menu li {
    position: absolute;
}

.sffm-floatmenu-template-13 .sffm-floatmenu-hide ul.sffm-menu li {
    left: 50% !important;
    top: 50% !important;
    margin-left: calc( var(--sffm-buttton-size, 50px)/2 * -1);
    margin-top: calc( var(--sffm-buttton-size, 50px)/2 * -1);
}


/*===========================================================
Circular Styles
============================================================*/

.sffm-style-2.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes ul.sffm-menu:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.sffm-style-3.sffm-circular-yes ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes ul.sffm-menu:before {
    background: var(--sffm-circle-bg-color, rgba(0, 0, 0, 0.8));
}

.sffm-style-2.sffm-circular-yes ul.sffm-menu:before {
    border: 5px solid var(--sffm-circle-bg-color, #000);
}

.sffm-style-2.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes .sffm-floatmenu-hide ul.sffm-menu:before {
    transform: scale(0);
    opacity: 0;
}

.sffm-style-2.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before,
.sffm-style-3.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before,
.sffm-style-4.sffm-circular-yes .sffm-floatmenu-show ul.sffm-menu:before {
    transform: scale(1);
    opacity: 1;
}

.sffm-floatmenu-wrapper[class*="sffm-no-step-"] .sffm-floatmenu-hide ul.sffm-menu:before {
    transition-delay: 0.05s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="1"] ul.sffm-menu:before {
    transition-delay: 0.05s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="2"] ul.sffm-menu:before {
    transition-delay: 0.1s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="3"] ul.sffm-menu:before {
    transition-delay: 0.15s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="4"] ul.sffm-menu:before {
    transition-delay: 0.2s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="5"] ul.sffm-menu:before {
    transition-delay: 0.25s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="6"] ul.sffm-menu:before {
    transition-delay: 0.3s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="7"] ul.sffm-menu:before {
    transition-delay: 0.35s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="8"] ul.sffm-menu:before {
    transition-delay: 0.4s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="9"] ul.sffm-menu:before {
    transition-delay: 0.45s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="10"] ul.sffm-menu:before {
    transition-delay: 0.5s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="11"] ul.sffm-menu:before {
    transition-delay: 0.55s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="12"] ul.sffm-menu:before {
    transition-delay: 0.6s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="13"] ul.sffm-menu:before {
    transition-delay: 0.65s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="14"] ul.sffm-menu:before {
    transition-delay: 0.7s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="15"] ul.sffm-menu:before {
    transition-delay: 0.75s;
}

.sffm-floatmenu-wrapper[class*="sffm-step-"] .sffm-floatmenu-hide[data-number="16"] ul.sffm-menu:before {
    transition-delay: 0.8s;
}

.sffm-menu-no-0 {
    opacity: 0;
    visibility: hidden;
}

/**********************
.sffm-floatmenu-wrapper ul.sffm-menu {
    -webkit-filter: url("#sffm-shadowed-goo");
    filter: url("#sffm-shadowed-goo");
}
*/
ul.sffm-nav-menu li::marker{
    content: "";
}

/*===========================================================
Template 14
============================================================*/

.sffm-floatmenu-template-14 ul.sffm-nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: var(--sffm-nav-item-gap, 10px);
}

.sffm-floatmenu-template-14 ul.sffm-nav-menu a {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    width: var(--sffm-nav-item-size, 25px);
    height: var(--sffm-nav-item-size, 25px);
}

.sffm-floatmenu-template-14 ul.sffm-nav-menu li a .sffm-tooltip {
    position: absolute;
    line-height: 1;
    height: 100%;
    padding: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: var(--sffm-tooltip-text-color, #000);
    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);
    visibility: hidden;
}

.sffm-floatmenu-template-14 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip,
.sffm-floatmenu-template-14 ul.sffm-nav-menu li:hover a .sffm-tooltip{
    visibility: visible;
}

.sffm-floatmenu-template-14 ul.sffm-nav-menu li a .sffm-tooltip:hover{
    color: var(--sffm-tooltip-hover-text-color, var(--sffm-tooltip-text-color, #000));
}

.sffm-floatmenu-template-14.sffm-position-middle-left ul.sffm-nav-menu li a .sffm-tooltip {
    left: 100%;    
    margin: 0 0 0 15px;
}

.sffm-floatmenu-template-14.sffm-position-middle-right ul.sffm-nav-menu li a .sffm-tooltip {
    right: 100%;    
    margin: 0 15px 0 0;
}

.sffm-floatmenu-template-14.sffm-position-middle-left{
    --sffm-menu-offset-left: 20px;
}

.sffm-floatmenu-template-14.sffm-position-middle-right{
    --sffm-menu-offset-right: 20px;
}

/*Template 14 Animation 1*/

.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border: 2px solid transparent;
    background: var(--sffm-nav-item-bg, #DDD);
}

.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    z-index: 10;
    border-color: var(--sffm-nav-item-border-active, #000);
    background: var(--sffm-nav-item-bg-active, transparent);
    transform: scale(1.5);
    transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after {
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-1 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transform: translate3d(-20px, 0, 0);
    transition: transform 0.3s, opacity 0.3s;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-1 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: transform 0.3s, opacity 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
}

.sffm-floatmenu-template-14.sffm-animation-1 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/*Template 14 Animation 2*/

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    transform: scale(1.2);
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    transform: scale(0.35);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    box-shadow: inset 0 0 0 3px var(--sffm-nav-item-border-active, #000);
    transform: scale(0.35);
    transition: transform 0.5s, box-shadow 0.5s, opacity 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    opacity: 1;
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transform: scale(0);
    transform-origin: 50% 50%;
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: scale(1);
    transition-delay: 0.1s;
}

.sffm-floatmenu-template-14.sffm-animation-2 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s;
}


/*Template 14 Animation 3*/

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 0 8px var(--sffm-nav-item-bg, #DDD);
    border-radius: 50%;
    transition: transform 0.3s, box-shadow 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    box-shadow: inset 0 0 0 10px var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    transform: scale(1.2);
    box-shadow: inset 0 0 0 2px var(--sffm-nav-item-border-active, #000);
}

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transform-origin: 0 50%;
    transform: scale(0.5);
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-3 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: scale(1);
}

/*Template 14 Animation 4*/

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: background 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a.sffm-scrollsection-active:before{
    background: var(--sffm-nav-item-bg-active, #000);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li .sffm-svg-icon {
    position: absolute;
    left: -10px;
    bottom: -15px;
    height: 20px;
    width: 30px;
    fill: var(--sffm-tooltip-text-color, #000);
}

.sffm-floatmenu-template-14.sffm-right-side.sffm-animation-4 ul.sffm-nav-menu li .sffm-svg-icon{
    right: -10px;
    left: auto;
    transform: scaleX(-1);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a .sffm-tooltip {
    height: auto;
    line-height: 1;
    bottom: 100%;
    opacity: 0;
    transform: scale3d(0, 0, 1);
    transform-origin: 0 100%;
    transition: transform 0.5s, opacity 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li .sffm-tooltip:hover .sffm-svg-icon {
    fill: var(--sffm-tooltip-hover-text-color, var(--sffm-tooltip-text-color, #000));
}

.sffm-floatmenu-template-14.sffm-animation-4 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: scale(1);
}


/*Template 14 Animation 5*/

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu{
    gap: var(--sffm-nav-item-gap, 20px);
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:after {
    content: '';
    position: absolute;
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li:not(:last-child) a:before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: var(--sffm-nav-item-gap, 20px);
    background: var(--sffm-nav-item-border, #DDD);
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:after {
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--sffm-nav-item-border, #DDD);
    border-radius: 50%;
    transition: transform 0.3s, border-color 0.3s, background 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    border-color: var(--sffm-nav-item-bg-active, #000);
    background: var(--sffm-nav-item-bg-active, #000);
    transform: scale(1.4);
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after {
    border-color: var(--sffm-nav-item-border-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0.3;
    transition: opacity 0.3s, color 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.5;
}

.sffm-floatmenu-template-14.sffm-animation-5 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
}

/*Template 14 Animation 6*/

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--sffm-nav-item-bg-active, #000);
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: scale3d(0, 0, 1);
    transition: transform 0.2s;
    animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    transform: scale3d(1, 1, 1);
    transition-delay: 0.35s;
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu .sffm-svg-icon {
    display: block;
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--sffm-nav-item-border, #DDD);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 39 39;
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset 0.4s, opacity 0.3s;
    transition: stroke-dashoffset 0.4s, opacity 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-svg-icon {
    stroke: var(--sffm-nav-item-border-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
    opacity: 0;
    /* length of circle path (pi*2r) */
    stroke-dashoffset: 39;
    -webkit-transition-duration: 0.4s, 0.2s;
    transition-duration: 0.4s, 0.2s;
    -webkit-transition-delay: 0s, 0.2s;
    transition-delay: 0s, 0.2s;
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a .sffm-tooltip{
    top: 50%;
    transform: translateY(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: translateY(-50%);
}

.sffm-floatmenu-template-14.sffm-animation-6 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip{
    transform: translateY(-50%);
    opacity: 1;
}

/*Template 14 Animation 7*/

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before,
.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before{
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sffm-nav-item-bg-active, #000);;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transition: transform 0.5s, opacity 0.3s;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(-20px, 0, 0);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-7 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(20px, 0, 0);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
}

.sffm-floatmenu-template-14.sffm-animation-7 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/*Template 14 Animation 8*/

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a {
    width: 35px;
    height: 35px;
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--sffm-nav-item-size, 25px);
    height: var(--sffm-nav-item-size, 25px);
    margin-top: calc(var(--sffm-nav-item-size, 25px)/2 * -1);
    margin-left: calc(var(--sffm-nav-item-size, 25px)/2 * -1);
    border-radius: 50%;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: transform 0.3s, opacity 0.3s;
    animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    opacity: 0;
    transform: translate3d(0, 1.5em, 0) scale3d(0, 0, 1);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu .sffm-svg-icon {
    z-index: 100;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    opacity: 0;
    transform: scale3d(0, 0, 1);
    transform-origin: 50% 100%;
    transition: transform 0.3s, opacity 0.3s;
    animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    fill: var(--sffm-nav-item-bg-active, #000);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a .sffm-tooltip {
    top: 50%;
    transform: translateY(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transition-delay: 0.2s;
    transform: translateY(-50%);
}

.sffm-floatmenu-template-14.sffm-animation-8 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transition-delay: 0.2s;
    transform: translateY(-50%);
}


/*Template 14 Animation 9*/
.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu{
    gap: var(--sffm-nav-item-gap, 20px);
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a {
    display: flex;
    align-items: center;
    gap: var(--sffm-nav-item-gap, 15px);
    height: 6px;
    width: 40px;
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:before {
    position: absolute;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: var(--sffm-nav-item-bg, #DDD);
    transform-origin: 0 0;
    transition: width 0.5s, background-color 0.5s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a:before{
    left: 0;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a:before{
    right: 0;
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    background: var(--sffm-nav-item-bg-hover, #000);
    transition: background-color 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    background: var(--sffm-nav-item-bg-active, #000);
    width: 15px;
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip{
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(20px, 0, 0);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(-20px, 0, 0);
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    transition-delay: 0.1s;
    opacity: 0.6;
    transform: translate3d(0, 0, 0);
}

.sffm-floatmenu-template-14.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    transition-delay: 0.1s;
    opacity: 1;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip{
    transform: translate3d(-30px, 0, 0);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-9 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip{
    transform: translate3d(30px, 0, 0);
}


/*Template 14 Animation 10*/

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu{
    gap: var(--sffm-nav-item-gap, 30px);
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu a{
    height: 10px;
    width: 30px;
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    top: 4px;
    height: 2px;
    width: 30px;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: width 0.3s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-10 ul.sffm-nav-menu li a:before{
    left: 0;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-10 ul.sffm-nav-menu li a:before{
    right: 0;
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    background: var(--sffm-nav-item-bg-active, #000);
    width: var(--sffm-span-width);
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip {
    bottom: 0;
    opacity: 0;
    margin: 0 0 5px;
    height: auto;
    line-height: 1;
    transform: translateY(100%);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip{
    left: 40px;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-10 ul.sffm-nav-menu li a .sffm-tooltip{
    right: 40px;
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    bottom: 100%;
    transform: translateY(0);
}

.sffm-floatmenu-template-14.sffm-animation-10 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    bottom: 100%;
    transform: translateY(0);
}


/*Template 14 Animation 11*/

.sffm-floatmenu-template-14.sffm-position-middle-right ul.sffm-nav-menu{
    align-items: flex-end;
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a {
    display: flex;
    align-items: center;
    height: auto;
    width: var(--sffm-span-width);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a {
    justify-content: flex-end;
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: var(--sffm-nav-item-bg, #DDD);
    transition: opacity 0.3s;
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    background: var(--sffm-nav-item-bg-active, #000);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a:before {
    left: 0;
    transform-origin: 0% 50%;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a:before {
    right: 0;
    transform-origin: 100% 50%;
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:before {
    opacity: 1;
    background: var(--sffm-nav-item-bg-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    opacity: 1;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    animation: moveScaleLeft 0.3s ease forwards;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    animation: moveScaleRight 0.3s ease forwards;
}

@-webkit-keyframes moveScaleLeft {
    50% {
        right: auto;
        left: 0;
        width: 30px;
        transform-origin: 0% 50%;
    }
    51% {
        right: auto;
        left: 0;
        width: var(--sffm-span-width);
        transform-origin: 100% 50%;
    }
    100% {
        right: 0;
        left: auto;
        width: 30px;
        transform-origin: 100% 50%;
    }
}

@keyframes moveScaleLeft {
    50% {
        right: auto;
        left: 0;
        width: 30px;
    }
    51% {
        right: auto;
        left: 0;
        width: var(--sffm-span-width);
    }
    100% {
        right: 0;
        left: auto;
        width: 30px;
    }
}

@-webkit-keyframes moveScaleRight {
    50% {
        right: 0;
        left: auto;
        width: 30px;
    }
    51% {
        right: auto;
        left: 0;
        width: var(--sffm-span-width);
    }
    100% {
        right: auto;
        left: 0;
        width: 30px;
    }
}

@keyframes moveScaleRight {
    50% {
        right: 0;
        left: auto;
        width: 30px;
    }
    51% {
        right: auto;
        left: 0;
        width: var(--sffm-span-width);
    }
    100% {
        right: auto;
        left: 0;
        width: 30px;
    }
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
    position: static;
    padding: 0;
    margin: 0;
    opacity: 0;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(-100px,0,0);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-11 ul.sffm-nav-menu li a .sffm-tooltip {
    transform: translate3d(100px,0,0);
}

.sffm-floatmenu-template-14.sffm-animation-11 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    animation: moveToRight 0.3s 0.2s forwards;
}

@-webkit-keyframes moveToRight {
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
}

@keyframes moveToRight {
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        animation-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
}


/*Template 14 Animation 12*/

.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu .sffm-svg-icon {
    width: 100%;
    height: 100%;
    transform: rotate3d(0, 0, 1, -90deg);
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    fill: var(--sffm-nav-item-border, #DDD);
}


.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-svg-icon {
    fill: var(--sffm-nav-item-border-hover, #000);
}

.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
    fill: var(--sffm-nav-item-border-active, #000);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
    transform: rotate3d(0, 0, 1, 0);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-svg-icon {
    transform: rotate3d(0, 0, 1, -180deg);
}

.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a .sffm-tooltip {
    top: 50%;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s, opacity 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip{
    opacity: 0.6;
    transform: translate3d(0, -50%, 0);
}

.sffm-floatmenu-template-14.sffm-animation-12 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
}


/*Template 14 Animation 13*/

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a {
    height: 30px;
    -webkit-perspective: 500px;
    perspective: 500px;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a{
    margin-left: var(--sffm-nav-item-size, 25px);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a{
    margin-right: var(--sffm-nav-item-size, 25px);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:before,
.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--sffm-nav-item-size, 25px);
    height: 100%;
    border: 2px solid var(--sffm-nav-item-border, #DDD);
    background: var(--sffm-nav-item-bg, #EEE);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:before {
    transition: background-color 0s 0.2s;
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:before {
    background: var(--sffm-nav-item-bg-active, #FFF);
    transition: none;
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:after {
    box-shadow: 0px 0 9px -4px rgba(0, 0, 0, 0);
    transition: transform 0.5s, background-color 0s 0.15s, box-shadow 0.5s;
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a:after {
    transform-origin: 1px 50%;
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a:after {
    transform-origin: calc(100% - 1px) 50%;
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover:after{
    box-shadow: 6px 0 9px -4px rgba(0, 0, 0, 0.2);
    transform: rotate3d(0, 1, 0, -15deg);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    background-color: var(--sffm-nav-item-bg-active, #FFF);
    box-shadow: 6px 0 9px -4px rgba(0, 0, 0, 0.2);
}

.sffm-floatmenu-template-14.sffm-position-middle-left.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    transform: rotate3d(0, 1, 0, -145deg);
}

.sffm-floatmenu-template-14.sffm-position-middle-right.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active:after {
    transform: rotate3d(0, 1, 0, 145deg);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a .sffm-tooltip {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s, transform 0.5s;
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a:not(.sffm-scrollsection-active):hover .sffm-tooltip {
    opacity: 0.6;
    transform: scale(1);
}

.sffm-floatmenu-template-14.sffm-animation-13 ul.sffm-nav-menu li a.sffm-scrollsection-active .sffm-tooltip {
    opacity: 1;
    transform: scale(1);
}

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

.sffm-toggle-button {
    position: relative;
    display: block;
    width: var(--sffm-hamburger-width, 25px);
    height: var(--sffm-hamburger-thickness, 2px);
    margin: 0 auto;
    border: none;
    cursor: pointer;
    background: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
    color: inherit;
    font-size: 0;
}

.sffm-toggle-button:before,
.sffm-toggle-button:after {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 100%;
    height: var(--sffm-hamburger-thickness, 2px);
    background: var(--sffm-trigger-btn-icon-color, var(--sffm-button-color, #FFF));
    content: "";
}

.sffm-toggle-animating.sffm-toggle-button {
    transition: all 0.35s;
}

.sffm-toggle-animating.sffm-toggle-button:before,
.sffm-toggle-animating.sffm-toggle-button:after {
    transition: transform 0.35s;
}

.sffm-floatmenu-trigger:hover .sffm-toggle-button,
.sffm-floatmenu-trigger:hover .sffm-toggle-button:before,
.sffm-floatmenu-trigger:hover .sffm-toggle-button:after {
    background: var(--sffm-trigger-btn-hover-icon-color, var(--sffm-trigger-btn-icon-color, var(--sffm-button-color-hover, var(--sffm-button-color, #FFF))));
}

.sffm-flymenu-trigger:hover .sffm-toggle-button,
.sffm-flymenu-trigger:hover .sffm-toggle-button:before,
.sffm-flymenu-trigger:hover .sffm-toggle-button:after {
    background: var(--sffm-trigger-btn-icon-color-hover, var(--sffm-trigger-btn-icon-color, #FFF));
}

.sffm-toggle-button:before {
    transform: translate(-50%, calc(-1 * var(--sffm-hamburger-spacing, 8px)));
}

.sffm-toggle-button:after {
    transform: translate(-50%, var(--sffm-hamburger-spacing, 8px));
}

.sffm-toggle-button.style1:before,
.sffm-toggle-button.style1:after {
    transform-origin: 50% 50%;
}

.sffm-floatmenu-show .sffm-toggle-button.style1,
.sffm-flymenu-show .sffm-toggle-button.style1 {
    background: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style1:before,
.sffm-flymenu-show .sffm-toggle-button.style1:before {
    transform: translate(-50%, 0) rotate(45deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style1:after,
.sffm-flymenu-show .sffm-toggle-button.style1:after {
    transform: translate(-50%, 0) rotate(-45deg);
}

.sffm-toggle-animating.sffm-toggle-button.style2 {
    transition: background 0.35s;
}

.sffm-toggle-button.style2:before,
.sffm-toggle-button.style2:after {
    transform-origin: 50% 50%;
}

.sffm-floatmenu-show .sffm-toggle-button.style2,
.sffm-flymenu-show .sffm-toggle-button.style2 {
    background: transparent;
    transition: none;
}

.sffm-floatmenu-show .sffm-toggle-button.style2:before,
.sffm-flymenu-show .sffm-toggle-button.style2:before {
    animation: menuBefore 0.5s forwards;
}

.sffm-floatmenu-show .sffm-toggle-button.style2:after,
.sffm-flymenu-show .sffm-toggle-button.style2:after {
    animation: menuAfter 0.5s forwards;
}

@keyframes menuBefore {
    0% {
        transform: translate(-50%, calc(-1 * var(--sffm-hamburger-spacing, 8px)));
    }
    40% {
        transform: translate(-50%, 0);
    }
    60% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(-50%, 0) rotate(45deg);
    }
}

@keyframes menuAfter {
    0% {
        transform: translate(-50%, calc(var(--sffm-hamburger-spacing, 8px)));
    }
    40% {
        transform: translate(-50%, 0);
    }
    60% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(-50%, 0) rotate(-45deg);
    }
}

.sffm-toggle-button.style3,
.sffm-toggle-button.style4,
.sffm-toggle-button.style5,
.sffm-toggle-button.style6,
.sffm-toggle-button.style7,
.sffm-toggle-button.style8 {
    height: calc(2 * var(--sffm-hamburger-spacing, 8px) + var(--sffm-hamburger-thickness, 2px));
    background: transparent !important;
    border-top: var(--sffm-hamburger-thickness, 2px) solid;
    border-bottom: var(--sffm-hamburger-thickness, 2px) solid;
}

.sffm-toggle-button.style3:before,
.sffm-toggle-button.style3:after,
.sffm-toggle-button.style4:before,
.sffm-toggle-button.style4:after,
.sffm-toggle-button.style5:before,
.sffm-toggle-button.style5:after,
.sffm-toggle-button.style6:before,
.sffm-toggle-button.style6:after,
.sffm-toggle-button.style7:before,
.sffm-toggle-button.style7:after,
.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after,
.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after {
    top: 50%;
    transform: translate(-50%, -50%);
}

.sffm-floatmenu-show .sffm-toggle-button.style3,
.sffm-flymenu-show .sffm-toggle-button.style3 {
    border-color: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style3:before,
.sffm-flymenu-show .sffm-toggle-button.style3:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style3:after,
.sffm-flymenu-show .sffm-toggle-button.style3:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style4,
.sffm-flymenu-show .sffm-toggle-button.style4 {
    border-color: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style4:before,
.sffm-flymenu-show .sffm-toggle-button.style4:before {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style4:after,
.sffm-flymenu-show .sffm-toggle-button.style4:after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style5,
.sffm-flymenu-show .sffm-toggle-button.style5 {
    border-color: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style5:before,
.sffm-flymenu-show .sffm-toggle-button.style5:before {
    transform: translate(-50%, -50%) rotate(135deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style5:after,
.sffm-flymenu-show .sffm-toggle-button.style5:after {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.sffm-toggle-button.style6 {
    transition: height 0.35s 0.35s, border-color 0.35s 0.35s;
}

.sffm-toggle-button.style6:before,
.sffm-toggle-button.style6:after {
    transform-origin: 50% 50%;
}

.sffm-floatmenu-show .sffm-toggle-button.style6,
.sffm-flymenu-show .sffm-toggle-button.style6 {
    height: 0;
    border-color: transparent;
    transition: all 0.35s 0s;
}

.sffm-floatmenu-show .sffm-toggle-button.style6:before,
.sffm-flymenu-show .sffm-toggle-button.style6:before {
    transform: translate(-50%, -50%) rotate(45deg);
    transition-delay: 0.5s;
}

.sffm-floatmenu-show .sffm-toggle-button.style6:after,
.sffm-flymenu-show .sffm-toggle-button.style6:after {
    transform: translate(-50%, -50%) rotate(-45deg);
    transition-delay: 0.5s;
}

.sffm-toggle-button.style7 {
    transition: height 0.35s 0.35s, border-color 0.35s 0.35s;
}

.sffm-toggle-button.style7:before,
.sffm-toggle-button.style7:after {
    transform-origin: 50% 50%;
}

.sffm-floatmenu-show .sffm-toggle-button.style7,
.sffm-flymenu-show .sffm-toggle-button.style7 {
    height: 0;
    border-color: transparent;
    transition: all 0.35s 0s;
}

.sffm-floatmenu-show .sffm-toggle-button.style7:before,
.sffm-flymenu-show .sffm-toggle-button.style7:before {
    transform: translate(-50%, -50%) rotate(-45deg);
    transition-delay: 0.5s;
}

.sffm-floatmenu-show .sffm-toggle-button.style7:after,
.sffm-flymenu-show .sffm-toggle-button.style7:after {
    transform: translate(-50%, -50%) rotate(-135deg);
    transition-delay: 0.5s;
}

.sffm-toggle-button.style8 {
    transition: height 0.35s 0.35s, border-color 0.35s 0.35s, transform 0.35s 0s;
}

.sffm-toggle-button.style8:before,
.sffm-toggle-button.style8:after {
    transform-origin: 50% 50%;
}

.sffm-floatmenu-show .sffm-toggle-button.style8,
.sffm-flymenu-show .sffm-toggle-button.style8 {
    height: 0;
    border-color: transparent;
    transform: rotate(135deg);
    transition: all 0.35s 0s, transform 0.35s 1s;
}

.sffm-floatmenu-show .sffm-toggle-button.style8:before,
.sffm-flymenu-show .sffm-toggle-button.style8:before {
    transform: translate(-50%, -50%) rotate(90deg);
    transition-delay: 0.5s;
}

.sffm-toggle-button.style9:before,
.sffm-toggle-button.style9:after {
    transform-origin: 0% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style9:before,
.sffm-flymenu-show .sffm-toggle-button.style9:before {
    transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style9:after,
.sffm-flymenu-show .sffm-toggle-button.style9:after {
    transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-toggle-button.style10:before,
.sffm-toggle-button.style10:after {
    transform-origin: 100% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style10:before,
.sffm-flymenu-show .sffm-toggle-button.style10:before {
    transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style10:after,
.sffm-flymenu-show .sffm-toggle-button.style10:after {
    transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-toggle-button.style11:before,
.sffm-toggle-button.style11:after {
    transform-origin: 0% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style11,
.sffm-flymenu-show .sffm-toggle-button.style11 {
    transform: rotate(-90deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style11:before,
.sffm-flymenu-show .sffm-toggle-button.style11:before {
    transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style11:after,
.sffm-flymenu-show .sffm-toggle-button.style11:after {
    transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-toggle-button.style12:before,
.sffm-toggle-button.style12:after {
    transform-origin: 0% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style12,
.sffm-flymenu-show .sffm-toggle-button.style12 {
    transform: rotate(90deg);
}

.sffm-floatmenu-show .sffm-toggle-button.style12:before,
.sffm-flymenu-show .sffm-toggle-button.style12:before {
    transform: translate(-50%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style12:after,
.sffm-flymenu-show .sffm-toggle-button.style12:after {
    transform: translate(-50%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-toggle-button.style13:before,
.sffm-toggle-button.style13:after {
    transform-origin: 0% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style13,
.sffm-flymenu-show .sffm-toggle-button.style13 {
    background: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style13:before,
.sffm-flymenu-show .sffm-toggle-button.style13:before {
    transform: translate(-30%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style13:after,
.sffm-flymenu-show .sffm-toggle-button.style13:after {
    transform: translate(-30%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-toggle-button.style14:before,
.sffm-toggle-button.style14:after {
    transform-origin: 100% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style14,
.sffm-flymenu-show .sffm-toggle-button.style14 {
    background: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style14:before,
.sffm-flymenu-show .sffm-toggle-button.style14:before {
    transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style14:after,
.sffm-flymenu-show .sffm-toggle-button.style14:after {
    transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-toggle-button.style15:before,
.sffm-toggle-button.style15:after {
    transform-origin: 100% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style15,
.sffm-flymenu-show .sffm-toggle-button.style15 {
    transform: rotate(90deg);
    background: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style15:before,
.sffm-flymenu-show .sffm-toggle-button.style15:before {
    transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style15:after,
.sffm-flymenu-show .sffm-toggle-button.style15:after {
    transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}

.sffm-toggle-button.style16:before,
.sffm-toggle-button.style16:after {
    transform-origin: 100% 0%;
}

.sffm-floatmenu-show .sffm-toggle-button.style16,
.sffm-flymenu-show .sffm-toggle-button.style16 {
    transform: rotate(-90deg);
    background: transparent;
}

.sffm-floatmenu-show .sffm-toggle-button.style16:before,
.sffm-flymenu-show .sffm-toggle-button.style16:before {
    transform: translate(-80%, 0) rotate(45deg) scaleX(0.6);
}

.sffm-floatmenu-show .sffm-toggle-button.style16:after,
.sffm-flymenu-show .sffm-toggle-button.style16:after {
    transform: translate(-80%, 0) rotate(-45deg) scaleX(0.6);
}

.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;
}

@keyframes sffm-ripple {
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(1.8);
    }
}

@media screen and (min-width:769px) {
    .sffm-hide-desktop {
        display: none;
    }
}

@media screen and (min-width:581px) and (max-width:768px) {
    .sffm-hide-tablet {
        display: none;
    }
}

@media screen and (max-width:580px) {
    .sffm-hide-mobile {
        display: none;
    }
}