Change Resource Center Launcher position using CSS

In Helppier backoffice the user can change the Launcher to six predefined positions. https://helppier.zendesk.com/hc/en-us/articles/360020358920-How-to-customize-Helppier-s-Resource-Center-Launcher-Color-and-Position

This can be manually overridden by adding CSS rules like the following:

// set the launcher to be at one third from the top.
body #helppier-external-flauncher.helppier-center {
        top: calc(33% + 24px) !important;
}

// set the launcher to be not so close to the left margin of the page.
// Note: This rule only works when the launcher is set to the left side in the backoffice.
body #helppier-external-flauncher.helppier-left {
        left: 30px !important;
}

// set the launcher to be not so close to the right margin of the page.
// Note: This rule only works when the launcher is set to the right side in the backoffice.
body #helppier-external-flauncher.helppier-right {
        right: calc(100% - 100px) !important;
}