diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 83dac85ab59..03d889266c6 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<NcAppSettingsDialog :aria-label="t('spreed', 'Conversation settings')"
+	<NcAppSettingsDialog id="conversation-settings-container"
+		:aria-label="t('spreed', 'Conversation settings')"
 		:name="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
 		:show-navigation="true"
diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
index 20dd8d2d7b8..d17b5025667 100644
--- a/src/components/ConversationSettings/DangerZone.vue
+++ b/src/components/ConversationSettings/DangerZone.vue
@@ -44,9 +44,23 @@
 					{{ t('spreed', 'Permanently delete this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click="deleteConversation">
+					@click="toggleShowDeleteConversationDialog">
 					{{ t('spreed', 'Delete conversation') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isDeleteConversationDialogOpen"
+					:name="t('spreed','Delete Conversation')"
+					:message="deleteConversationDialogMessage"
+					:container="container">
+					<template #actions>
+						<NcButton type="tertiary" @click="toggleShowDeleteConversationDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton type="error" @click="deleteConversation">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div v-if="canDeleteConversation" class="app-settings-subsection">
 				<h4 class="app-settings-section__subtitle">
@@ -56,9 +70,23 @@
 					{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
 				</p>
 				<NcButton type="error"
-					@click="clearChatHistory">
+					@click="toggleShowDeleteChatDialog">
 					{{ t('spreed', 'Delete chat messages') }}
 				</NcButton>
+				<NcDialog class="danger-zone__dialog"
+					:open.sync="isDeleteChatDialogOpen"
+					:name="t('spreed','Delete all chat messages')"
+					:message="deleteChatDialogMessage"
+					:container="container">
+					<template #actions>
+						<NcButton type="tertiary" @click="toggleShowDeleteChatDialog">
+							{{ t('spreed', 'No') }}
+						</NcButton>
+						<NcButton type="error" @click="clearChatHistory">
+							{{ t('spreed', 'Yes') }}
+						</NcButton>
+					</template>
+				</NcDialog>
 			</div>
 			<div />
 		</div>
@@ -70,6 +98,7 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 
 export default {
@@ -77,7 +106,9 @@ export default {
 	components: {
 		NcButton,
 		NcNoteCard,
+		NcDialog,
 	},
+
 	props: {
 		conversation: {
 			type: Object,
@@ -95,10 +126,35 @@ export default {
 		},
 	},
 
+	data() {
+		return {
+			isDeleteConversationDialogOpen: false,
+			isDeleteChatDialogOpen: false,
+		}
+	},
+
 	computed: {
+		container() {
+			return '#conversation-settings-container'
+		},
+
 		token() {
 			return this.conversation.token
 		},
+
+		deleteConversationDialogMessage() {
+			return t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
+		deleteChatDialogMessage() {
+			return t('spreed', 'Do you really want to delete all messages in "{displayName}"?', this.conversation, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		}
 	},
 
 	methods: {
@@ -126,59 +182,44 @@ export default {
 		 * Deletes the conversation.
 		 */
 		async deleteConversation() {
-			OC.dialogs.confirm(
-				t('spreed', 'Do you really want to delete "{displayName}"?', this.conversation, undefined, {
-					escape: false,
-					sanitize: false,
-				}),
-				t('spreed', 'Delete conversation'),
-				async function(decision) {
-					if (!decision) {
-						return
-					}
-
-					if (this.token === this.$store.getters.getToken()) {
-						this.$router.push({ name: 'root' })
-						this.$store.dispatch('updateToken', '')
-					}
-
-					try {
-						await this.$store.dispatch('deleteConversationFromServer', { token: this.token })
-						// Close the settings
-						this.hideConversationSettings()
-					} catch (error) {
-						console.debug(`error while deleting conversation ${error}`)
-						showError(t('spreed', 'Error while deleting conversation'))
-					}
-				}.bind(this)
-			)
+			this.isDeleteConversationDialogOpen = false
+
+			if (this.token === this.$store.getters.getToken()) {
+				this.$router.push({ name: 'root' })
+				this.$store.dispatch('updateToken', '')
+			}
+
+			try {
+				await this.$store.dispatch('deleteConversationFromServer', { token: this.token })
+				// Close the settings
+				this.hideConversationSettings()
+			} catch (error) {
+				console.debug(`error while deleting conversation ${error}`)
+				showError(t('spreed', 'Error while deleting conversation'))
+			}
 		},
 
 		/**
 		 * Clears the chat history
 		 */
 		async clearChatHistory() {
-			OC.dialogs.confirm(
-				t('spreed', 'Do you really want to delete all messages in "{displayName}"?', this.conversation, undefined, {
-					escape: false,
-					sanitize: false,
-				}),
-				t('spreed', 'Delete all chat messages'),
-				async function(decision) {
-					if (!decision) {
-						return
-					}
-
-					try {
-						await this.$store.dispatch('clearConversationHistory', { token: this.token })
-						// Close the settings
-						this.hideConversationSettings()
-					} catch (error) {
-						console.debug(`error while clearing chat history ${error}`)
-						showError(t('spreed', 'Error while clearing chat history'))
-					}
-				}.bind(this)
-			)
+			try {
+				await this.$store.dispatch('clearConversationHistory', { token: this.token })
+				this.isDeleteChatDialogOpen = false
+				// Close the settings
+				this.hideConversationSettings()
+			} catch (error) {
+				console.debug(`error while clearing chat history ${error}`)
+				showError(t('spreed', 'Error while clearing chat history'))
+			}
+		},
+
+		toggleShowDeleteConversationDialog() {
+			this.isDeleteConversationDialogOpen = !this.isDeleteConversationDialogOpen
+		},
+
+		toggleShowDeleteChatDialog() {
+			this.isDeleteChatDialogOpen = !this.isDeleteChatDialogOpen
 		},
 	},
 }
@@ -193,6 +234,12 @@ h4 {
 	&__hint {
 		color: var(--color-text-maxcontrast);
 	}
+	&__dialog {
+		:deep(.modal-container) {
+			padding-block: 4px 8px;
+			padding-inline: 12px 8px;
+		}
+	}
 }
 
 </style>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index aa9d108fab5..e8208ce5e7e 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -8,6 +8,8 @@ import { showSuccess, showError } from '@nextcloud/dialogs'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import Conversation from './Conversation.vue'
 
@@ -400,48 +402,96 @@ describe('Conversation.vue', () => {
 
 		describe('deleting conversation', () => {
 			test('deletes conversation when confirmed', async () => {
+				// Arrange
 				const actionHandler = jest.fn().mockResolvedValueOnce()
 				const updateTokenAction = jest.fn()
 				testStoreConfig.modules.conversationsStore.actions.deleteConversationFromServer = actionHandler
 				testStoreConfig.modules.tokenStore.getters.getToken = jest.fn().mockReturnValue(() => 'another-token')
 				testStoreConfig.modules.tokenStore.actions.updateToken = updateTokenAction
 
-				OC.dialogs.confirm = jest.fn()
+				const wrapper = shallowMount(Conversation, {
+					localVue,
+					store: new Vuex.Store(testStoreConfig),
+					mocks: {
+						$router,
+					},
+					stubs: {
+						NcActionButton,
+						NcDialog,
+						NcButton,
+					},
+					propsData: {
+						isSearchResult: false,
+						item,
+					},
+				})
+				const el = wrapper.findComponent({ name: 'NcListItem' })
 
-				const action = shallowMountAndGetAction('Delete conversation')
+				const action = findNcActionButton(el, 'Delete conversation')
 				expect(action.exists()).toBe(true)
 
+				// Act 1 : click on the button from the menu
 				await action.find('button').trigger('click')
 
-				expect(OC.dialogs.confirm).toHaveBeenCalled()
+				// Assert 1
+				const dialog = wrapper.findComponent({ name: 'NcDialog' })
+				expect(dialog.exists).toBeTruthy()
+				const buttons = dialog.findAllComponents({ name: 'NcButton' })
+				expect(buttons.exists()).toBeTruthy()
+				expect(buttons).toHaveLength(2)
 
-				// call callback directly
-				OC.dialogs.confirm.mock.calls[0][2](true)
+				// Act 2 : click on the confirm button
+				await buttons.at(1).find('button').trigger('click')
 
+				// Assert 2
 				expect(actionHandler).toHaveBeenCalledWith(expect.anything(), { token: TOKEN })
 				expect($router.push).not.toHaveBeenCalled()
 				expect(updateTokenAction).not.toHaveBeenCalled()
 			})
 
 			test('does not delete conversation when not confirmed', async () => {
+				// Arrange
 				const actionHandler = jest.fn().mockResolvedValueOnce()
 				const updateTokenAction = jest.fn()
 				testStoreConfig.modules.conversationsStore.actions.deleteConversationFromServer = actionHandler
 				testStoreConfig.modules.tokenStore.getters.getToken = jest.fn().mockReturnValue(() => 'another-token')
 				testStoreConfig.modules.tokenStore.actions.updateToken = updateTokenAction
 
-				OC.dialogs.confirm = jest.fn()
+				const wrapper = shallowMount(Conversation, {
+					localVue,
+					store: new Vuex.Store(testStoreConfig),
+					mocks: {
+						$router,
+					},
+					stubs: {
+						NcActionButton,
+						NcDialog,
+						NcButton,
+					},
+					propsData: {
+						isSearchResult: false,
+						item,
+					},
+				})
+				const el = wrapper.findComponent({ name: 'NcListItem' })
 
-				const action = shallowMountAndGetAction('Delete conversation')
+				const action = findNcActionButton(el, 'Delete conversation')
 				expect(action.exists()).toBe(true)
 
+				// Act 1 : click on the button from the menu
 				await action.find('button').trigger('click')
 
-				expect(OC.dialogs.confirm).toHaveBeenCalled()
+				// Assert 1
+				const dialog = wrapper.findComponent({ name: 'NcDialog' })
+				expect(dialog.exists).toBeTruthy()
+				const buttons = dialog.findAllComponents({ name: 'NcButton' })
+				expect(buttons.exists()).toBeTruthy()
+				expect(buttons).toHaveLength(2)
 
-				// call callback directly
-				OC.dialogs.confirm.mock.calls[0][2](false)
+				// Act 2 : click on the confirm button
+				await buttons.at(0).find('button').trigger('click')
 
+				// Assert 2
 				expect(actionHandler).not.toHaveBeenCalled()
 				expect($router.push).not.toHaveBeenCalled()
 				expect(updateTokenAction).not.toHaveBeenCalled()
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 4cb4a9e2888..baff6d89b2e 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -20,102 +20,119 @@
 -->
 
 <template>
-	<NcListItem ref="listItem"
-		:key="item.token"
-		:name="item.displayName"
-		class="conversation-item"
-		:class="{'unread-mention-conversation': item.unreadMention}"
-		:data-nav-id="`conversation_${item.token}`"
-		:actions-aria-label="t('spreed', 'Conversation actions')"
-		:to="to"
-		:bold="!!item.unreadMessages"
-		:counter-number="item.unreadMessages"
-		:counter-type="counterType"
-		@click="onClick">
-		<template #icon>
-			<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
-		</template>
-		<template #subname>
-			<strong v-if="item.unreadMessages"
-				class="subtitle">
-				{{ conversationInformation }}
-			</strong>
-			<template v-else>
-				{{ conversationInformation }}
+	<Fragment>
+		<NcListItem ref="listItem"
+			:key="item.token"
+			:name="item.displayName"
+			class="conversation-item"
+			:class="{'unread-mention-conversation': item.unreadMention}"
+			:data-nav-id="`conversation_${item.token}`"
+			:actions-aria-label="t('spreed', 'Conversation actions')"
+			:to="to"
+			:bold="!!item.unreadMessages"
+			:counter-number="item.unreadMessages"
+			:counter-type="counterType"
+			@click="onClick">
+			<template #icon>
+				<ConversationIcon :item="item" :hide-favorite="false" :hide-call="false" />
 			</template>
-		</template>
-		<template v-if="!isSearchResult" #actions>
-			<NcActionButton v-if="canFavorite"
-				:close-after-click="true"
-				@click="toggleFavoriteConversation">
-				<template #icon>
-					<Star v-if="item.isFavorite" :size="20" />
-					<Star v-else :size="20" :fill-color="'#FFCC00'" />
+			<template #subname>
+				<strong v-if="item.unreadMessages"
+					class="subtitle">
+					{{ conversationInformation }}
+				</strong>
+				<template v-else>
+					{{ conversationInformation }}
 				</template>
-				{{ labelFavorite }}
-			</NcActionButton>
-			<NcActionButton icon="icon-clippy"
-				@click.stop="handleCopyLink">
-				{{ t('spreed', 'Copy link') }}
-			</NcActionButton>
-			<NcActionButton v-if="item.unreadMessages"
-				:close-after-click="true"
-				@click="markConversationAsRead">
-				<template #icon>
-					<EyeOutline :size="16" />
-				</template>
-				{{ t('spreed', 'Mark as read') }}
-			</NcActionButton>
-			<NcActionButton v-else
-				:close-after-click="true"
-				@click="markConversationAsUnread">
-				<template #icon>
-					<EyeOffOutline :size="16" />
-				</template>
-				{{ t('spreed', 'Mark as unread') }}
-			</NcActionButton>
-			<NcActionButton :close-after-click="true"
-				@click="showConversationSettings">
-				<template #icon>
-					<Cog :size="20" />
-				</template>
-				{{ t('spreed', 'Conversation settings') }}
-			</NcActionButton>
-			<NcActionButton v-if="canLeaveConversation"
-				:close-after-click="true"
-				@click="leaveConversation">
-				<template #icon>
-					<ExitToApp :size="16" />
-				</template>
-				{{ t('spreed', 'Leave conversation') }}
-			</NcActionButton>
-			<NcActionButton v-if="canDeleteConversation"
-				:close-after-click="true"
-				class="critical"
-				@click="deleteConversation">
-				<template #icon>
-					<Delete :size="16" />
-				</template>
-				{{ t('spreed', 'Delete conversation') }}
-			</NcActionButton>
-		</template>
-		<template v-else-if="item.token" #actions>
-			<NcActionButton close-after-click @click="onActionClick">
-				<template #icon>
-					<ArrowRight :size="16" />
-				</template>
-				{{ t('spreed', 'Join conversation') }}
-			</NcActionButton>
-			<NcActionButton icon="icon-clippy"
-				@click.stop="handleCopyLink">
-				{{ t('spreed', 'Copy link') }}
-			</NcActionButton>
-		</template>
-	</NcListItem>
+			</template>
+			<template v-if="!isSearchResult" #actions>
+				<NcActionButton v-if="canFavorite"
+					:close-after-click="true"
+					@click="toggleFavoriteConversation">
+					<template #icon>
+						<Star v-if="item.isFavorite" :size="20" />
+						<Star v-else :size="20" :fill-color="'#FFCC00'" />
+					</template>
+					{{ labelFavorite }}
+				</NcActionButton>
+				<NcActionButton icon="icon-clippy"
+					@click.stop="handleCopyLink">
+					{{ t('spreed', 'Copy link') }}
+				</NcActionButton>
+				<NcActionButton v-if="item.unreadMessages"
+					:close-after-click="true"
+					@click="markConversationAsRead">
+					<template #icon>
+						<EyeOutline :size="16" />
+					</template>
+					{{ t('spreed', 'Mark as read') }}
+				</NcActionButton>
+				<NcActionButton v-else
+					:close-after-click="true"
+					@click="markConversationAsUnread">
+					<template #icon>
+						<EyeOffOutline :size="16" />
+					</template>
+					{{ t('spreed', 'Mark as unread') }}
+				</NcActionButton>
+				<NcActionButton :close-after-click="true"
+					@click="showConversationSettings">
+					<template #icon>
+						<Cog :size="20" />
+					</template>
+					{{ t('spreed', 'Conversation settings') }}
+				</NcActionButton>
+				<NcActionButton v-if="canLeaveConversation"
+					:close-after-click="true"
+					@click="leaveConversation">
+					<template #icon>
+						<ExitToApp :size="16" />
+					</template>
+					{{ t('spreed', 'Leave conversation') }}
+				</NcActionButton>
+				<NcActionButton v-if="canDeleteConversation"
+					:close-after-click="true"
+					class="critical"
+					@click="showDialog">
+					<template #icon>
+						<Delete :size="16" />
+					</template>
+					{{ t('spreed', 'Delete conversation') }}
+				</NcActionButton>
+			</template>
+			<template v-else-if="item.token" #actions>
+				<NcActionButton close-after-click @click="onActionClick">
+					<template #icon>
+						<ArrowRight :size="16" />
+					</template>
+					{{ t('spreed', 'Join conversation') }}
+				</NcActionButton>
+				<NcActionButton icon="icon-clippy"
+					@click.stop="handleCopyLink">
+					{{ t('spreed', 'Copy link') }}
+				</NcActionButton>
+			</template>
+		</NcListItem>
+		<!-- confirmation required to delete conversation -->
+		<NcDialog :open.sync="isDialogOpen"
+			:name="t('spreed','Delete Conversation')"
+			:message="dialogMessage"
+			:container="container">
+			<template #actions>
+				<NcButton type="tertiary" @click="closeDialog">
+					{{ t('spreed', 'No') }}
+				</NcButton>
+				<NcButton type="error" @click="deleteConversation">
+					{{ t('spreed', 'Yes') }}
+				</NcButton>
+			</template>
+		</NcDialog>
+	</Fragment>
 </template>
 
 <script>
 
+import { Fragment } from 'vue-frag'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
@@ -130,7 +147,9 @@ import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 import ConversationIcon from './../../ConversationIcon.vue'
 
@@ -141,9 +160,12 @@ export default {
 	name: 'Conversation',
 
 	components: {
+		NcButton,
 		ConversationIcon,
 		NcActionButton,
+		NcDialog,
 		NcListItem,
+		Fragment,
 		// Icons
 		ArrowRight,
 		Cog,
@@ -181,7 +203,17 @@ export default {
 
 	emits: ['click'],
 
+	data() {
+		return {
+			isDialogOpen: false,
+		}
+	},
+
 	computed: {
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
 		counterType() {
 			if (this.item.unreadMentionDirect || (this.item.unreadMessages !== 0 && (
 				this.item.type === CONVERSATION.TYPE.ONE_TO_ONE || this.item.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
@@ -198,26 +230,10 @@ export default {
 			return this.item.participantType !== PARTICIPANT.TYPE.USER_SELF_JOINED
 		},
 
-		iconFavorite() {
-			return this.item.isFavorite ? 'icon-favorite' : 'icon-starred'
-		},
-
 		labelFavorite() {
 			return this.item.isFavorite ? t('spreed', 'Remove from favorites') : t('spreed', 'Add to favorites')
 		},
 
-		isNotifyAlways() {
-			return this.item.notificationLevel === PARTICIPANT.NOTIFY.ALWAYS
-		},
-
-		isNotifyMention() {
-			return this.item.notificationLevel === PARTICIPANT.NOTIFY.MENTION
-		},
-
-		isNotifyNever() {
-			return this.item.notificationLevel === PARTICIPANT.NOTIFY.NEVER
-		},
-
 		canDeleteConversation() {
 			return this.item.canDeleteConversation
 		},
@@ -273,6 +289,13 @@ export default {
 			return this.item.lastMessage
 		},
 
+		dialogMessage() {
+			return t('spreed', 'Do you really want to delete "{displayName}"?', this.item, undefined, {
+				escape: false,
+				sanitize: false,
+			})
+		},
+
 		/**
 		 * This is a simplified version of the last chat message.
 		 * Parameters are parsed without markup (just replaced with the name),
@@ -365,28 +388,16 @@ export default {
 		 * Deletes the conversation.
 		 */
 		async deleteConversation() {
-			OC.dialogs.confirm(
-				t('spreed', 'Do you really want to delete "{displayName}"?', this.item, undefined, {
-					escape: false,
-					sanitize: false,
-				}),
-				t('spreed', 'Delete conversation'),
-				async function(decision) {
-					if (!decision) {
-						return
-					}
-
-					try {
-						await this.$store.dispatch('deleteConversationFromServer', { token: this.item.token })
-						await this.$store.dispatch('leaveConversation', { token: this.item.token })
-						await this.$router.push({ name: 'root' })
-							.catch((failure) => !isNavigationFailure(failure, NavigationFailureType.duplicated) && Promise.reject(failure))
-					} catch (error) {
-						console.debug(`error while deleting conversation ${error}`)
-						showError(t('spreed', 'Error while deleting conversation'))
-					}
-				}.bind(this),
-			)
+			try {
+				this.isDialogOpen = false
+				await this.$store.dispatch('deleteConversationFromServer', { token: this.item.token })
+				await this.$store.dispatch('leaveConversation', { token: this.item.token })
+				await this.$router.push({ name: 'root' })
+					.catch((failure) => !isNavigationFailure(failure, NavigationFailureType.duplicated) && Promise.reject(failure))
+			} catch (error) {
+				console.debug(`error while deleting conversation ${error}`)
+				showError(t('spreed', 'Error while deleting conversation'))
+			}
 		},
 
 		/**
@@ -437,6 +448,14 @@ export default {
 				params: { token: this.item.token },
 			}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 		},
+
+		showDialog() {
+			this.isDialogOpen = true
+		},
+
+		closeDialog() {
+			this.isDialogOpen = false
+		}
 	},
 }
 </script>
@@ -456,4 +475,10 @@ export default {
 		color: var(--color-error) !important;
 	}
 }
+
+:deep(.dialog) {
+	padding-block: 0 8px;
+	padding-inline: 12px 8px;
+}
+
 </style>