@nixweb/nixloc-ui 1.17.0 → 1.19.0

package/@nixweb/nixloc-ui/src/component/layout/NewMenu.vue

@@ -1,456 +1,456 @@
-<template>
-    <div>
-        <div :class="['sidebar', { collapsed: menuCollapsed }]">
-            <div class="sidebar-header">
-                <span class="header-logo" @click="editProfile">
-                    <img class="photo" :src="urlPhoto" />
-                </span>
-                <div :style="'margin-left:' + (menuCollapsed ? 55 : 170) + 'px'" class="div-menu-toggle"
-                    @click="toggleSidebar">
-                    <div class="icon-menu-arrow">
-                        <i v-if="menuCollapsed" class="fa-solid fa-angle-right "></i>
-                        <i v-else class="fa-solid fa-angle-left"></i>
-                    </div>
-                </div>
-            </div>
-
-            <ScrollBar :minHeight="pageSize" :maxHeight="pageSize">
-                <div :class="{ 'sub': menuCollapsed }">
-                    <div v-for="(item, index) in menuFilter(true)">
-                        <div @mouseover="handleMouseOver(item.title, item.module)">
-                            <div :ref="item.title" v-if="menuCollapsed" class="molded-icon text-center" :class="{
-                                'menu-active': moduleActive === item.module,
-                                'module-selected': module === item.module
-                            }">
-                                <i :style="'font-size:18px'" :class="item.icon"></i>
-                                <div v-if="false" :style="'margin-top:-16px'">
-                                    <span class="title-menu-collapsed">{{ item.abbreviatedTitle }}</span>
-                                </div>
-                            </div>
-                            <div class="molded-icon-open" :class="{
-                                'menu-active': moduleActive === item.module
-                            }" v-else @mouseover="handleMouseOver(item.title, item.module)">
-                                <b-row>
-                                    <b-col sm="12">
-                                        <b-row>
-                                            <b-col sm="2">
-                                                <i :class="item.icon"></i>
-                                            </b-col>
-                                            <b-col sm="10">
-                                                <span class="title-menu">{{ item.title }} </span>
-                                            </b-col>
-                                        </b-row>
-                                    </b-col>
-                                </b-row>
-                            </div>
-                        </div>
-
-                        <transition name="slide-fade">
-                            <div :ref="item.title + 'sub'" class="sub-menu-collapsed sub-menu"
-                                :style="'margin-left:' + (menuCollapsed ? 85 : 200) + 'px'"
-                                v-if="titleSubMenuCollapsed == item.title">
-                                <div v-for="(item, index) in subMenuFilter(false)" :key="index">
-                                    <div :class="{ 'sub-menu-title-collapsed': item.title }"
-                                        @click.prevent="navegateTo(item, item.module)">
-                                        <b-row>
-                                            <b-col sm="2" v-if="item.title">
-                                                <i :class="item.icon"></i>
-
-                                            </b-col>
-                                            <b-col sm="9">
-                                                <div v-if="item.groupName" class="div-group">
-                                                    {{ item.groupName }}
-                                                </div>
-                                                <span>
-                                                    <span> {{ item.title }}</span>
-                                                    <span class="div-support" v-if="item.isVisible == 'support'">
-                                                        Suporte
-                                                    </span>
-                                                </span>
-                                            </b-col>
-                                        </b-row>
-                                    </div>
-                                </div>
-                            </div>
-                        </transition>
-                    </div>
-                    <br>
-                    <br>
-                    <br>
-                </div>
-            </ScrollBar>
-        </div>
-    </div>
-</template>
-
-<script>
-
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-import { mapState, mapMutations, mapGetters } from "vuex";
-
-export default {
-    props: {
-        urlPhoto: String,
-    },
-    components: {
-        ScrollBar
-    },
-    data() {
-        return {
-            module: "",
-            moduleActive: "",
-            isSidebarCollapsed: true,
-            openDropdowns: {},
-            titleSubMenu: "",
-            titleSubMenuCollapsed: "",
-            pageSize: 0,
-            distanceFromBottom: 0,
-        };
-    },
-    mounted() {
-        this.updatePageSize();
-        window.addEventListener('resize', this.updatePageSize);
-
-        if (!localStorage.getItem('menuCollapsed')) {
-            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
-        }
-
-        if (localStorage.getItem('menuCollapsed') === 'open') {
-            this.toggleMenu(false);
-        } else {
-            this.toggleMenu(true);
-        }
-
-        if (this.$route.matched[0])
-            this.moduleActive = this.$route.matched[0].props.default.module;
-
-    },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.updatePageSize);
-    },
-    computed: {
-        ...mapState("user", ["menu", "userLogged"]),
-        ...mapState("generic", ["menuCollapsed"]),
-        ...mapGetters("generic", ["event"]),
-    },
-    methods: {
-        ...mapMutations("generic", ["addEvent", "toggleMenu"]),
-        updatePageSize() {
-            const windowHeight = window.innerHeight;
-            this.pageSize = windowHeight;
-        },
-        toggleSidebar() {
-            this.isSidebarCollapsed = !this.isSidebarCollapsed;
-            this.toggleMenu(this.isSidebarCollapsed);
-            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
-            this.titleSubMenu = "";
-            this.titleSubMenuCollapsed = "";
-        },
-        toggleSubMenu(title, module) {
-            this.module = module;
-            if (this.titleSubMenu === title) {
-                this.titleSubMenu = "";
-            } else {
-                this.titleSubMenu = title;
-            }
-        },
-        handleMouseOver(title, module) {
-            this.module = module;
-            this.titleSubMenuCollapsed = title;
-
-            var divSub = this.$refs[title + 'sub'];
-
-            if (divSub) {
-                let self = this;
-                setTimeout(function () {
-                    const heightSubMenu = divSub[0].getBoundingClientRect();
-
-                    if (heightSubMenu.top < 0 || heightSubMenu.left < 0 || heightSubMenu.bottom > window.innerHeight || heightSubMenu.right > window.innerWidth) {
-                        divSub[0].style.bottom = '0px';
-                    }
-
-                }, 100);
-            }
-        },
-        handleMouseLeave() {
-            this.titleSubMenuCollapsed = "";
-            if (this.menuCollapsed)
-                this.module = "";
-        },
-        menuFilter(isModule) {
-            let filter = [];
-            this.menu.items.forEach(function (obj) {
-                if (obj.isModule == isModule) filter.push(obj);
-            });
-            return filter.sort((a, b) => a.order - b.order);
-        },
-        subMenuFilter(isModule) {
-            let filter = [];
-            let self = this;
-            let userLogged = this.userLogged.user.userName;
-            this.menu.items.forEach(function (obj) {
-                if (obj.isModule == isModule && obj.module === self.module) {
-                    if (obj.isVisible == "all") filter.push(obj);
-
-                    if (obj.isVisible == "support" && userLogged == "UserTemp")
-                        filter.push(obj);
-                }
-            });
-            return filter;
-        },
-        navegateTo(item, module) {
-            this.$router.push({
-                name: item.routeName,
-            });
-
-            this.moduleActive = module;
-            this.titleSubMenuCollapsed = "";
-        },
-        editProfile() {
-            this.addEvent({ name: "clickedProfile" });
-        },
-    },
-    watch: {
-        event: {
-            handler: function (event) {
-                if (event.name == "handleMouseOver") {
-                    this.handleMouseLeave();
-                }
-            },
-            deep: true,
-        },
-        $route: {
-            handler: function (router) {
-                this.moduleActive = router.matched[0].props.default.module;
-            },
-            deep: true,
-        },
-    },
-};
-</script>
-
-<style scoped>
-.sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 200px;
-    height: 100vh;
-    border-radius: 0px 20px 0px 0px;
-    background-color: #577696;
-    transition: all 0.4s ease;
-    z-index: 1000;
-}
-
-.sidebar.collapsed {
-    width: 85px;
-}
-
-.sidebar .sidebar-header {
-    display: flex;
-    position: relative;
-    padding: 10px 20px;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.sidebar-header .header-logo img {
-    width: 46px;
-    height: 46px;
-    display: block;
-    object-fit: contain;
-    cursor: pointer;
-    border-radius: 50%;
-}
-
-.sidebar-header .sidebar-toggler,
-.sidebar-menu-button {
-    position: absolute;
-    left: 70px;
-    height: 30px;
-    width: 30px;
-    color: #151A2D;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    background: #EEF2FF;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50px;
-    transition: 0.4s ease;
-}
-
-.sidebar.collapsed .sidebar-header .sidebar-toggler {
-    transform: translate(-4px, 65px);
-}
-
-.div-menu-toggle {
-    position: fixed;
-    font-size: 18px;
-    top: 25px;
-    width: 20px;
-    height: 20px;
-    background-color: #D98621;
-    border-radius: 50%;
-    cursor: pointer;
-    z-index: 2000;
-    transition: all 0.4s ease;
-}
-
-.molded-icon-open {
-    padding-left: 10px;
-    cursor: pointer;
-    margin-top: 10px;
-    color: white;
-    font-size: 17px;
-    margin: 15px;
-    border-radius: 10px;
-    transition: all 0.3s ease;
-}
-
-.molded-icon-open:hover {
-    color: #2C3453;
-    background-color: white;
-}
-
-.menu-active {
-    background-color: #D98621;
-}
-
-.module-selected {
-    color: #2C3453 !important;
-    background-color: white !important;
-}
-
-.icon-menu-arrow {
-    font-size: 14px;
-    margin-top: -4px;
-    margin-left: 6px;
-    color: white;
-}
-
-.molded-icon {
-    cursor: pointer;
-    color: white;
-    font-size: 18px;
-    margin: 13px;
-    border-radius: 10px;
-    transition: all 0.3s ease;
-}
-
-.molded-icon:hover {
-    background-color: white;
-    color: #2C3453;
-    border-radius: 10px;
-    transition: all 0.8s ease;
-}
-
-.sub {
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.sub-menu {
-    margin: 15px;
-    padding: 10px;
-    border-radius: 15px;
-    color: white;
-    font-size: 14px;
-    background-color: #2C3453;
-    transition: all 0.5s ease;
-}
-
-.sub-menu-title {
-    cursor: pointer;
-    border-radius: 8px;
-    padding: 5px;
-    transition: all 1s ease;
-}
-
-.sub-menu-title:hover {
-    padding: 5px;
-    color: #2C3453;
-    background-color: white;
-    font-weight: bold;
-    transition: all 0.8s ease;
-}
-
-.sub-menu-collapsed {
-    width: 260px;
-    margin-top: -100px;
-    position: absolute;
-    border-radius: 0px 15px 15px 0px;
-    background-color: #2C3453;
-    cursor: pointer;
-}
-
-.sub-menu-title-collapsed {
-    padding: 10px;
-    border-radius: 8px;
-    font-size: 13px;
-}
-
-.sub-menu-title-collapsed:hover {
-    background-color: white;
-    color: #2C3453;
-    transition: all 0.8s ease;
-}
-
-.rotate {
-    transform: rotate(180deg);
-    transition: transform 0.5s ease;
-}
-
-.rotate-down {
-    transform: rotate(360deg);
-    transition: transform 0.5s ease;
-}
-
-.title-menu {
-    font-size: 13px;
-}
-
-.title-menu-collapsed {
-    font-size: 11.5px;
-}
-
-.div-arrow {
-    margin-left: 50px;
-}
-
-.div-menu-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    padding: 10px;
-}
-
-.div-icon-bottom {
-    cursor: pointer;
-    font-size: 17px;
-    color: white;
-    border-radius: 10px;
-    background-color: #2C3453;
-}
-
-.title-logout {
-    font-size: 16px;
-    margin-left: 10px;
-}
-
-.div-group {
-    margin-left: 10px;
-    padding: 5px;
-}
-
-.div-support {
-    background-color: #0A36DB;
-    font-size: 11px;
-    border-radius: 20px;
-    padding: 1px 2px 2px 2px;
-    margin-left: 5px;
-    color: white !important;
-}
+<template>
+    <div>
+        <div :class="['sidebar', { collapsed: menuCollapsed }]">
+            <div class="sidebar-header">
+                <span class="header-logo" @click="editProfile">
+                    <img class="photo" :src="urlPhoto" />
+                </span>
+                <div :style="'margin-left:' + (menuCollapsed ? 55 : 170) + 'px'" class="div-menu-toggle"
+                    @click="toggleSidebar">
+                    <div class="icon-menu-arrow">
+                        <i v-if="menuCollapsed" class="fa-solid fa-angle-right "></i>
+                        <i v-else class="fa-solid fa-angle-left"></i>
+                    </div>
+                </div>
+            </div>
+
+            <ScrollBar :minHeight="pageSize" :maxHeight="pageSize">
+                <div :class="{ 'sub': menuCollapsed }">
+                    <div v-for="(item, index) in menuFilter(true)">
+                        <div @mouseover="handleMouseOver(item.title, item.module)">
+                            <div :ref="item.title" v-if="menuCollapsed" class="molded-icon text-center" :class="{
+                                'menu-active': moduleActive === item.module,
+                                'module-selected': module === item.module
+                            }">
+                                <i :style="'font-size:18px'" :class="item.icon"></i>
+                                <div v-if="false" :style="'margin-top:-16px'">
+                                    <span class="title-menu-collapsed">{{ item.abbreviatedTitle }}</span>
+                                </div>
+                            </div>
+                            <div class="molded-icon-open" :class="{
+                                'menu-active': moduleActive === item.module
+                            }" v-else @mouseover="handleMouseOver(item.title, item.module)">
+                                <b-row>
+                                    <b-col sm="12">
+                                        <b-row>
+                                            <b-col sm="2">
+                                                <i :class="item.icon"></i>
+                                            </b-col>
+                                            <b-col sm="10">
+                                                <span class="title-menu">{{ item.title }} </span>
+                                            </b-col>
+                                        </b-row>
+                                    </b-col>
+                                </b-row>
+                            </div>
+                        </div>
+
+                        <transition name="slide-fade">
+                            <div :ref="item.title + 'sub'" class="sub-menu-collapsed sub-menu"
+                                :style="'margin-left:' + (menuCollapsed ? 85 : 200) + 'px'"
+                                v-if="titleSubMenuCollapsed == item.title">
+                                <div v-for="(item, index) in subMenuFilter(false)" :key="index">
+                                    <div :class="{ 'sub-menu-title-collapsed': item.title }"
+                                        @click.prevent="navegateTo(item, item.module)">
+                                        <b-row>
+                                            <b-col sm="2" v-if="item.title">
+                                                <i :class="item.icon"></i>
+
+                                            </b-col>
+                                            <b-col sm="9">
+                                                <div v-if="item.groupName" class="div-group">
+                                                    {{ item.groupName }}
+                                                </div>
+                                                <span>
+                                                    <span> {{ item.title }}</span>
+                                                    <span class="div-support" v-if="item.isVisible == 'support'">
+                                                        Suporte
+                                                    </span>
+                                                </span>
+                                            </b-col>
+                                        </b-row>
+                                    </div>
+                                </div>
+                            </div>
+                        </transition>
+                    </div>
+                    <br>
+                    <br>
+                    <br>
+                </div>
+            </ScrollBar>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import { mapState, mapMutations, mapGetters } from "vuex";
+
+export default {
+    props: {
+        urlPhoto: String,
+    },
+    components: {
+        ScrollBar
+    },
+    data() {
+        return {
+            module: "",
+            moduleActive: "",
+            isSidebarCollapsed: true,
+            openDropdowns: {},
+            titleSubMenu: "",
+            titleSubMenuCollapsed: "",
+            pageSize: 0,
+            distanceFromBottom: 0,
+        };
+    },
+    mounted() {
+        this.updatePageSize();
+        window.addEventListener('resize', this.updatePageSize);
+
+        if (!localStorage.getItem('menuCollapsed')) {
+            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
+        }
+
+        if (localStorage.getItem('menuCollapsed') === 'open') {
+            this.toggleMenu(false);
+        } else {
+            this.toggleMenu(true);
+        }
+
+        if (this.$route.matched[0])
+            this.moduleActive = this.$route.matched[0].props.default.module;
+
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.updatePageSize);
+    },
+    computed: {
+        ...mapState("user", ["menu", "userLogged"]),
+        ...mapState("generic", ["menuCollapsed"]),
+        ...mapGetters("generic", ["event"]),
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent", "toggleMenu"]),
+        updatePageSize() {
+            const windowHeight = window.innerHeight;
+            this.pageSize = windowHeight;
+        },
+        toggleSidebar() {
+            this.isSidebarCollapsed = !this.isSidebarCollapsed;
+            this.toggleMenu(this.isSidebarCollapsed);
+            localStorage.setItem('menuCollapsed', this.isSidebarCollapsed ? "closed" : "open");
+            this.titleSubMenu = "";
+            this.titleSubMenuCollapsed = "";
+        },
+        toggleSubMenu(title, module) {
+            this.module = module;
+            if (this.titleSubMenu === title) {
+                this.titleSubMenu = "";
+            } else {
+                this.titleSubMenu = title;
+            }
+        },
+        handleMouseOver(title, module) {
+            this.module = module;
+            this.titleSubMenuCollapsed = title;
+
+            var divSub = this.$refs[title + 'sub'];
+
+            if (divSub) {
+                let self = this;
+                setTimeout(function () {
+                    const heightSubMenu = divSub[0].getBoundingClientRect();
+
+                    if (heightSubMenu.top < 0 || heightSubMenu.left < 0 || heightSubMenu.bottom > window.innerHeight || heightSubMenu.right > window.innerWidth) {
+                        divSub[0].style.bottom = '0px';
+                    }
+
+                }, 100);
+            }
+        },
+        handleMouseLeave() {
+            this.titleSubMenuCollapsed = "";
+            if (this.menuCollapsed)
+                this.module = "";
+        },
+        menuFilter(isModule) {
+            let filter = [];
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule) filter.push(obj);
+            });
+            return filter.sort((a, b) => a.order - b.order);
+        },
+        subMenuFilter(isModule) {
+            let filter = [];
+            let self = this;
+            let userLogged = this.userLogged.user.userName;
+            this.menu.items.forEach(function (obj) {
+                if (obj.isModule == isModule && obj.module === self.module) {
+                    if (obj.isVisible == "all") filter.push(obj);
+
+                    if (obj.isVisible == "support" && userLogged == "UserTemp")
+                        filter.push(obj);
+                }
+            });
+            return filter;
+        },
+        navegateTo(item, module) {
+            this.$router.push({
+                name: item.routeName,
+            });
+
+            this.moduleActive = module;
+            this.titleSubMenuCollapsed = "";
+        },
+        editProfile() {
+            this.addEvent({ name: "clickedProfile" });
+        },
+    },
+    watch: {
+        event: {
+            handler: function (event) {
+                if (event.name == "handleMouseOver") {
+                    this.handleMouseLeave();
+                }
+            },
+            deep: true,
+        },
+        $route: {
+            handler: function (router) {
+                this.moduleActive = router.matched[0].props.default.module;
+            },
+            deep: true,
+        },
+    },
+};
+</script>
+
+<style scoped>
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 200px;
+    height: 100vh;
+    border-radius: 0px 20px 0px 0px;
+    background-color: #577696;
+    transition: all 0.4s ease;
+    z-index: 1000;
+}
+
+.sidebar.collapsed {
+    width: 85px;
+}
+
+.sidebar .sidebar-header {
+    display: flex;
+    position: relative;
+    padding: 10px 20px;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.sidebar-header .header-logo img {
+    width: 46px;
+    height: 46px;
+    display: block;
+    object-fit: contain;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.sidebar-header .sidebar-toggler,
+.sidebar-menu-button {
+    position: absolute;
+    left: 70px;
+    height: 30px;
+    width: 30px;
+    color: #151A2D;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    background: #EEF2FF;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    transition: 0.4s ease;
+}
+
+.sidebar.collapsed .sidebar-header .sidebar-toggler {
+    transform: translate(-4px, 65px);
+}
+
+.div-menu-toggle {
+    position: fixed;
+    font-size: 18px;
+    top: 25px;
+    width: 20px;
+    height: 20px;
+    background-color: #D98621;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 2000;
+    transition: all 0.4s ease;
+}
+
+.molded-icon-open {
+    padding-left: 10px;
+    cursor: pointer;
+    margin-top: 10px;
+    color: white;
+    font-size: 17px;
+    margin: 15px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon-open:hover {
+    color: #2C3453;
+    background-color: white;
+}
+
+.menu-active {
+    background-color: #D98621;
+}
+
+.module-selected {
+    color: #2C3453 !important;
+    background-color: white !important;
+}
+
+.icon-menu-arrow {
+    font-size: 14px;
+    margin-top: -4px;
+    margin-left: 6px;
+    color: white;
+}
+
+.molded-icon {
+    cursor: pointer;
+    color: white;
+    font-size: 18px;
+    margin: 13px;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+}
+
+.molded-icon:hover {
+    background-color: white;
+    color: #2C3453;
+    border-radius: 10px;
+    transition: all 0.8s ease;
+}
+
+.sub {
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.sub-menu {
+    margin: 15px;
+    padding: 10px;
+    border-radius: 15px;
+    color: white;
+    font-size: 14px;
+    background-color: #2C3453;
+    transition: all 0.5s ease;
+}
+
+.sub-menu-title {
+    cursor: pointer;
+    border-radius: 8px;
+    padding: 5px;
+    transition: all 1s ease;
+}
+
+.sub-menu-title:hover {
+    padding: 5px;
+    color: #2C3453;
+    background-color: white;
+    font-weight: bold;
+    transition: all 0.8s ease;
+}
+
+.sub-menu-collapsed {
+    width: 260px;
+    margin-top: -100px;
+    position: absolute;
+    border-radius: 0px 15px 15px 0px;
+    background-color: #2C3453;
+    cursor: pointer;
+}
+
+.sub-menu-title-collapsed {
+    padding: 10px;
+    border-radius: 8px;
+    font-size: 13px;
+}
+
+.sub-menu-title-collapsed:hover {
+    background-color: white;
+    color: #2C3453;
+    transition: all 0.8s ease;
+}
+
+.rotate {
+    transform: rotate(180deg);
+    transition: transform 0.5s ease;
+}
+
+.rotate-down {
+    transform: rotate(360deg);
+    transition: transform 0.5s ease;
+}
+
+.title-menu {
+    font-size: 13px;
+}
+
+.title-menu-collapsed {
+    font-size: 11.5px;
+}
+
+.div-arrow {
+    margin-left: 50px;
+}
+
+.div-menu-bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 10px;
+}
+
+.div-icon-bottom {
+    cursor: pointer;
+    font-size: 17px;
+    color: white;
+    border-radius: 10px;
+    background-color: #2C3453;
+}
+
+.title-logout {
+    font-size: 16px;
+    margin-left: 10px;
+}
+
+.div-group {
+    margin-left: 10px;
+    padding: 5px;
+}
+
+.div-support {
+    background-color: #0A36DB;
+    font-size: 11px;
+    border-radius: 20px;
+    padding: 1px 2px 2px 2px;
+    margin-left: 5px;
+    color: white !important;
+}
 </style>