entry.css

/**
 * Basic styles and default margins
 **/
.Pinpoint.document * {
	@apply leading-loose;
}

.Pinpoint.document p,
.Pinpoint.document li {
	@apply text-lg leading-loose;
	color: var(--article-text-color);
}

.Pinpoint.document > * + *,
.Pinpoint.document > * + .toggle,
.Pinpoint.document .toggle > .content > * + * {
	@apply mt-8;
}
.Pinpoint.document blockquote > * + *,
.Pinpoint.document .notice > .content > * + * {
	@apply mt-4;
}

.Pinpoint.document > strong,
.Pinpoint.document > b {
	@apply font-semibold;
}

.Pinpoint.document a[href],
.Pinpoint.document .link {
	@apply underline cursor-pointer;
}

.Pinpoint.document p a[href]:not(.mark-color) {
	color: var(--article-link-color);
}

/* Pass through mark color if set */
.Pinpoint.document mark a[href],
.dark .Pinpoint.document mark a[href] {
	color: unset;
}

/* if embeded code block, only set the font and unset the styling to adapt to the parent */
.Pinpoint.document blockquote code,
.Pinpoint.document .notice code {
	background-color: unset !important;
	border: unset !important;
	color: unset !important;
}

/**
 * Headings
 */
.Pinpoint.document .heading {
	@apply flex items-center;
}
.Pinpoint.document h1,
.Pinpoint.document h2,
.Pinpoint.document h3,
.Pinpoint.document h4 {
	@apply inline-block relative font-semibold;
	color: var(--article-text-color);
}
.Pinpoint.document .heading .anchor {
	@apply pl-2 invisible opacity-50 text-base leading-none;
}
.Pinpoint.document .heading h1 + .anchor {
	@apply mt-[3px];
}
.Pinpoint.document .heading:hover .anchor {
	@apply visible;
}

.Pinpoint.document h1 {
	@apply text-3xl;
}
.Pinpoint.document h2 {
	@apply text-2xl;
}
.Pinpoint.document h3 {
	@apply text-xl leading-loose;
}
.Pinpoint.document h4 {
	@apply text-lg leading-loose;
}
.Pinpoint.document * + h1,
.Pinpoint.document * + .h1 {
	@apply mt-16;
}
.Pinpoint.document * + h2,
.Pinpoint.document * + .h2 {
	@apply mt-14;
}

/**
 * Highlight
 **/
.Pinpoint.document mark,
.Pinpoint.document mark a[href],
.Pinpoint .Markup .yellow {
	@apply rounded-sm;
	color: unset;
	background-color: unset;
	text-decoration: unset;
}
.Pinpoint.document a.mark-color {
	text-decoration: unset;
	text-decoration-color: unset;
}
.dark .Pinpoint.document mark,
.dark .Pinpoint.document mark a[href],
.dark .Pinpoint .Markup {
	color: unset;
	background-color: unset;
	text-decoration: unset;
}
/* background */
.Pinpoint.document mark.bg-gray,
.Pinpoint .Markup .bg-gray {
	@apply bg-gray-200 dark:bg-gray-700;
}
.Pinpoint.document mark.bg-red,
.Pinpoint .Markup .bg-red {
	@apply bg-red-200 dark:bg-red-800;
}
.Pinpoint.document mark.bg-green,
.Pinpoint .Markup .bg-green {
	@apply bg-green-200 dark:bg-green-800;
}
.Pinpoint.document mark.bg-blue,
.Pinpoint .Markup .bg-blue {
	@apply bg-blue-200 dark:bg-blue-800;
}
.Pinpoint.document mark.bg-purple,
.Pinpoint .Markup .bg-purple {
	@apply bg-purple-200 dark:bg-purple-900;
}
.Pinpoint.document mark.bg-pink,
.Pinpoint .Markup .bg-pink {
	@apply bg-pink-200 dark:bg-pink-900;
}
.Pinpoint.document mark.bg-orange,
.Pinpoint .Markup .bg-orange {
	@apply bg-orange-200 dark:bg-orange-900;
}
.Pinpoint.document mark.bg-yellow,
.Pinpoint .Markup .bg-yellow {
	@apply bg-yellow-200 dark:bg-yellow-900;
}
/* color */
.Pinpoint.document mark.gray,
.Pinpoint .Markup .gray {
	@apply text-gray-400 dark:text-gray-500;
}
.Pinpoint.document mark.red,
.Pinpoint .Markup .red {
	@apply text-red-500 dark:text-red-500;
}
.Pinpoint.document mark.green,
.Pinpoint .Markup .green {
	@apply text-green-500 dark:text-green-500;
}
.Pinpoint.document mark.blue,
.Pinpoint .Markup .blue {
	@apply text-blue-500 dark:text-blue-500;
}
.Pinpoint.document mark.purple,
.Pinpoint .Markup .purple {
	@apply text-purple-500 dark:text-purple-500;
}
.Pinpoint.document mark.pink,
.Pinpoint .Markup .pink {
	@apply text-pink-500 dark:text-pink-500;
}
.Pinpoint.document mark.orange,
.Pinpoint .Markup .orange {
	@apply text-orange-500 dark:text-orange-500;
}
.Pinpoint.document mark.yellow,
.Pinpoint .Markup .yellow {
	@apply text-yellow-500 dark:text-yellow-500;
}

/**
 * lists
 **/
.Pinpoint.document ul:not(.checkbox_list),
.Pinpoint.document ol {
	@apply ml-0 pl-0;
}
.Pinpoint.document ul:not(.checkbox_list) {
	@apply list-none;
}
.Pinpoint.document ol {
	@apply list-none;
	counter-reset: ol-counter;
}
.Pinpoint.document ul:not(.checkbox_list) > li,
.Pinpoint.document ol > li {
	@apply m-0 pl-6;
	counter-increment: ol-counter;
}
.Pinpoint.document ul:not(.checkbox_list) > li::before {
	@apply text-gray-400 dark:text-gray-600 absolute top-0 left-1;
	content: '\2022';
}
.Pinpoint.document ol > li::before {
	@apply text-gray-400 dark:text-gray-600 absolute top-0 -left-12 text-right w-16;
	content: counter(ol-counter) '.';
}
.Pinpoint.document li {
	@apply relative;
}
.Pinpoint.document li > div {
	@apply w-full;
	min-height: 2rem;
}

/**
 * Code / Code Block
**/
.Pinpoint.document code {
	@apply p-1 rounded-sm bg-trueGray-100 dark:bg-trueGray-800 dark:text-trueGray-300 border border-trueGray-200 dark:border-trueGray-700 font-mono text-sm leading-8;
}
.Pinpoint .Markup .code_inline {
	@apply rounded-sm bg-trueGray-100 dark:bg-trueGray-800 dark:text-trueGray-300 border border-trueGray-200 dark:border-trueGray-700 font-mono text-sm leading-5;
}
.Pinpoint.document .code_block,
.Pinpoint.document .notice {
	@apply relative shadow-lg;
}
.Pinpoint.document .code_block .copy {
	@apply absolute top-0 right-1 z-10 text-white select-none cursor-pointer opacity-50 transition-opacity;
}
.Pinpoint.document .code_block .copy.copied {
	@apply text-green-500 opacity-100;
}
.Pinpoint.document .code_block .copy:not(.copied):hover {
	@apply opacity-100;
}
.Pinpoint.document pre {
	@apply block relative rounded overflow-x-auto px-6 py-4 leading-5 font-mono whitespace-pre overflow-scroll bg-black text-trueGray-300;
}
.Pinpoint.document pre code {
	@apply block p-0 leading-5 bg-black dark:bg-black border-0;
}

.Pinpoint.document .notice {
	@apply flex items-center rounded px-5 py-4;
}
.Pinpoint.document .notice.error {
	@apply bg-red-600 dark:bg-red-700 text-white;
}
.Pinpoint.document .notice.error * {
	@apply text-white;
}
.Pinpoint.document .notice.warning {
	@apply bg-yellow-400 dark:bg-yellow-500 text-gray-800;
}
.Pinpoint.document .notice.warning * {
	@apply text-gray-800;
}
.Pinpoint.document .notice.warning a {
	@apply text-gray-800 underline;
}
.Pinpoint.document .notice.info {
	@apply bg-green-600 dark:bg-green-700 text-white;
}
.Pinpoint.document .notice.info * {
	@apply text-white;
}
.Pinpoint.document .notice.info h1,
.Pinpoint.document .notice.error h1,
.Pinpoint.document .notice.info h2,
.Pinpoint.document .notice.error h2,
.Pinpoint.document .notice.info h3,
.Pinpoint.document .notice.error h3,
.Pinpoint.document .notice.info h4,
.Pinpoint.document .notice.error h4 {
	@apply text-white;
}
.Pinpoint.document .notice.info a,
.Pinpoint.document .notice.error a {
	@apply text-white underline;
}
.Pinpoint.document .notice.info code,
.Pinpoint.document .notice.error code {
	@apply bg-black text-trueGray-300 border-trueGray-700;
}
.Pinpoint.document .notice.warning hr {
	@apply border-gray-400;
}
.Pinpoint.document .notice > .icon {
	@apply flex-shrink-0 w-8 h-8 self-start;
}
.Pinpoint.document .notice > .content {
	@apply flex-grow min-w-0;
	padding-top: 2px;
}
.Pinpoint.document .notice > .content .code_block {
	@apply shadow-none;
}
.Pinpoint.document .notice select {
	@apply top-2 right-4;
}
/* element tokens */
.Pinpoint.document .token.comment,
.Pinpoint.document .token.prolog,
.Pinpoint.document .token.doctype,
.Pinpoint.document .token.cdata {
	@apply text-gray-400 italic;
}
.Pinpoint.document text-gray-500.token.punctuation {
	@apply text-purple-100;
}
.Pinpoint.document .token.namespace {
	@apply opacity-70;
}
.Pinpoint.document .token.operator,
.Pinpoint.document .token.boolean,
.Pinpoint.document.token.number {
	@apply text-red-500;
}
.Pinpoint.document .token.property {
	@apply text-yellow-200;
}
.Pinpoint.document .token.tag {
	@apply text-blue-500;
}
.Pinpoint.document .token.string {
	@apply text-blue-100;
}
.Pinpoint.document .token.selector {
	@apply text-blueGray-500;
}
.Pinpoint.document .token.attr-name {
	@apply text-orange-100;
}
.Pinpoint.document .token.entity,
.Pinpoint.document .token.url,
.Pinpoint.document .language-css .token.string,
.Pinpoint.document .style .token.string {
	@apply text-blue-600;
}
.Pinpoint.document .token.attr-value,
.Pinpoint.document .token.keyword,
.Pinpoint.document .token.control,
.Pinpoint.document .token.directive,
.Pinpoint.document .token.unit {
	@apply text-red-400;
}
.Pinpoint.document .token.function {
	@apply text-purple-400;
}
.Pinpoint.document .token.builtin {
	@apply text-yellow-400;
}
.Pinpoint.document .token.statement,
.Pinpoint.document .token.regex,
.Pinpoint.document .token.atrule {
	@apply text-blue-600;
}
.Pinpoint.document .token.placeholder,
.Pinpoint.document .token.variable {
	@apply text-blue-500;
}
.Pinpoint.document .token.deleted {
	@apply line-through;
}
.Pinpoint.document .token.inserted {
	@apply border-b border-dotted border-gray-300;
}
.Pinpoint.document .token.important,
.Pinpoint.document .token.bold {
	@apply font-semibold;
}
.Pinpoint.document .token.important {
	@apply text-red-500;
}
.Pinpoint.document .token.entity {
	cursor: help;
}

/**
 * Blockquote
 **/
.Pinpoint.document blockquote {
	@apply p-4 bg-sky-100 dark:bg-sky-900 text-gray-600 dark:text-gray-300 border-l-4 border-sky-300 dark:border-sky-600 rounded-r;
}

/**
 * Horizontal Rule
 **/
.Pinpoint.document .hr > div {
	@apply pt-4;
}
.Pinpoint.document .hr > div > hr {
	@apply h-0 pb-4 border-t;
	border-color: var(--article-border-color);
}

/**
 * Toggle
 **/
.Pinpoint.document .toggle {
	@apply pl-4 border-l-4 border-gray-200 dark:border-gray-800;
	min-height: 1rem;
}
.Pinpoint.document .toggle > .options {
	@apply relative flex items-center text-gray-400 dark:text-gray-600 hover:text-gray-600 dark:hover:text-gray-400 leading-3 cursor-pointer;
}
.Pinpoint.document .toggle > .options .icon {
	@apply absolute w-7 h-8 top-0 -left-8 ml-1 py-0 rounded;
	background-color: var(--article-bg-color);
}
.Pinpoint.document .toggle > .options > .title {
	@apply hidden max-w-full pr-4 text-gray-600 dark:text-gray-400 leading-8 overflow-x-hidden overflow-ellipsis whitespace-nowrap;
}
.Pinpoint.document .toggle.collapsed > .options > .title {
	@apply block select-none;
}
.Pinpoint.document .toggle.collapsed > .content {
	@apply hidden;
}

/**
 * Table
 **/
.Pinpoint.document .scrollable-wrapper {
	@apply relative;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

/* .document .scrollable-wrapper:hover {
} */
.Pinpoint.document .scrollable-wrapper ::-webkit-scrollbar {
	@apply w-3 h-3 cursor-pointer;
	background-color: transparent;
}
.Pinpoint.document .scrollable-wrapper:hover ::-webkit-scrollbar {
	@apply bg-gray-100 dark:bg-gray-800;
}
.Pinpoint.document .scrollable-wrapper ::-webkit-scrollbar-thumb {
	background-color: transparent;
	@apply rounded-lg cursor-pointer;
}
.Pinpoint.document .scrollable-wrapper:hover ::-webkit-scrollbar-thumb {
	@apply bg-gray-400 dark:bg-gray-600 border-gray-100 dark:border-gray-800;
}

.Pinpoint.document .scrollable {
	@apply overflow-x-auto overflow-y-hidden pl-4 -ml-4;
}

.Pinpoint.document table {
	@apply my-4 overflow-visible border-collapse rounded;
}
.Pinpoint.document table.table-stretch {
	@apply w-full;
}
.Pinpoint.document table.table-manual {
	@apply table-fixed;
}
.Pinpoint.document table th {
	@apply bg-gray-100 dark:bg-gray-800 font-semibold;
}

.Pinpoint.document table td,
.Pinpoint.document table th {
	@apply relative align-top border border-gray-300 dark:border-gray-600 text-left;
	min-width: 5rem;
}
.Pinpoint.document table.table-fit th,
.Pinpoint.document table.table-fit td {
	@apply whitespace-nowrap;
}

.Pinpoint.document table th .resize {
	@apply absolute z-40 top-0 -right-1 h-full w-2;
	cursor: ew-resize;
}
.Pinpoint.document table tr:not(:first-of-type) th .resize {
	@apply hidden;
}
.resize-handle {
	@apply absolute w-1 h-10 bg-blue-500 dark:bg-indigo-500;
	cursor: ew-resize;
}
/* keep legacy styling */
.Pinpoint.document table.table-stretch th,
.Pinpoint.document table.table-stretch td {
	@apply max-w-md;
}
.Pinpoint.document table th .content,
.Pinpoint.document table td {
	@apply px-4 py-2;
}

/**
 * Image
 **/
.Pinpoint.document .image_block .alt {
	@apply mt-2 opacity-80 text-center italic;
}
.Pinpoint.document .image_block.left .alt {
	@apply text-left;
}
.Pinpoint.document .image_block.center .alt {
	@apply text-center;
}
.Pinpoint.document .image_block.right .alt {
	@apply text-right;
}
.Pinpoint.document .image_block .image img {
	@apply rounded-lg;
}
.Pinpoint.document .image_block.center .image img {
	@apply mx-auto;
}
.Pinpoint.document .image_block.right .image img {
	@apply ml-auto;
}

/**
 * Inline image
 */
.Pinpoint.document .inline-image {
	@apply relative inline-block align-middle;
}
.Pinpoint.document .inline-image .options {
	@apply -top-6;
}

/**
 * File
 **/
.file .container {
	@apply relative flex p-3 rounded border bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700;
}
.file .container > svg {
	@apply mt-px mr-3 text-4xl text-gray-300 dark:text-gray-600;
}
.file .details {
	@apply leading-tight flex-grow;
}
.file .details .filename,
.file .details a.filename {
	@apply font-semibold leading-tight text-gray-700 dark:text-gray-300;
}
.file .details .description {
	@apply mt-1 text-sm text-gray-700 dark:text-gray-300;
}
.file .details .size {
	@apply mt-1 text-xs text-gray-400 dark:text-gray-500;
}
.file .options {
	@apply absolute z-10 top-1 right-1 flex flex-grow justify-end items-center rounded overflow-hidden;
}
.file .options .option {
	@apply opacity-0 transition-opacity duration-200 h-6 px-2 flex items-center bg-gray-800 hover:bg-gray-900 text-gray-300 hover:text-white cursor-pointer text-xs hover:no-underline select-none;
	margin-left: 1px;
}
.file .options .option span {
	color: inherit;
}
.file:hover .options .option {
	@apply opacity-100;
}
.file .options .option:first-of-type {
	@apply ml-0;
}
.file .options .option span {
	@apply ml-2;
}
.file .options .option span.mobile {
	@apply block sm:hidden;
}
.file .options .option span.sm {
	@apply hidden sm:block;
}

/**
 * Embed
 **/
.Pinpoint.document .iframe {
	@apply my-8 p-3 border rounded;
	background-color: var(--article-block-bg-color);
	border-color: var(--article-border-color);
}
.Pinpoint.document .iframe .options {
	@apply relative;
}
.Pinpoint.document .iframe .options .style-options {
	@apply absolute z-10 top-1 right-1 flex flex-grow justify-end items-center rounded overflow-hidden;
}
.Pinpoint.document .iframe:hover .options .style-option {
	@apply opacity-100;
}

.Pinpoint.document .iframe .options .style-option {
	@apply opacity-0 transition-opacity delay-200 duration-100 h-6 px-2 flex items-center bg-gray-800 hover:bg-gray-900 text-gray-300 hover:text-white cursor-pointer text-xs select-none;
	margin-left: 1px;
}
.dark .document .iframe .options .style-option {
	@apply text-gray-300 hover:text-white;
}
.Pinpoint.document .iframe .options .style-option.overlay {
	@apply absolute z-10 right-1 rounded;
	top: calc(1.75rem + 1px);
}
.Pinpoint.document .iframe .options .style-option:first {
	@apply ml-0;
}
.Pinpoint.document .iframe .options .style-option.selected {
	@apply bg-gray-600 hover:bg-gray-700 text-white;
}
.Pinpoint.document .iframe .options .style-option span:last-child {
	@apply ml-2;
}
.Pinpoint.document .iframe .link {
	@apply cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap;
}
.Pinpoint.document .iframe .toggle {
	@apply cursor-pointer;
}
.Pinpoint.document .iframe .toggle > span {
	@apply flex;
}
.Pinpoint.document .iframe .toggle svg {
	@apply text-gray-600 dark:text-gray-400;
}
.Pinpoint.document .iframe .content {
	@apply relative rounded overflow-hidden; /* do this here so its consistent */
}
.Pinpoint.document .iframe .content .th {
	@apply dark:text-gray-200;
}
.Pinpoint.document .iframe .content .preview.small {
	@apply flex flex-row-reverse items-start;
}
.Pinpoint.document .iframe .content .preview.small .thumbnail {
	@apply sm:max-w-xs max-h-16 sm:max-h-24 rounded;
}
.Pinpoint.document .iframe .content .preview.small .info {
	@apply mr-2 flex-grow min-w-0;
}
.Pinpoint.document .iframe .content .preview .site {
	@apply mb-1 flex items-center font-semibold leading-4;
}
.Pinpoint.document .iframe .content .preview .site .icon {
	@apply h-5 w-5 mr-2;
}
.Pinpoint.document .iframe .content .preview .title {
	@apply font-bold leading-6 truncate;
}
.Pinpoint.document .iframe .content .preview .description {
	@apply text-gray-500 dark:text-gray-400 leading-6;
}
.Pinpoint.document .iframe .content .preview.small .description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.Pinpoint.document .iframe .content .preview.large .thumbnail {
	@apply w-full max-h-128 object-center object-cover rounded;
}
.Pinpoint.document .iframe .content .preview.large .info {
	@apply mt-2;
}
.Pinpoint.document .iframe .content .overlay {
	@apply absolute top-0 left-0 h-1/4 w-full;
	z-index: 2;
	background-image: linear-gradient(#00000066, #00000000);
}
.Pinpoint.document .iframe .overlay .info {
	@apply m-3 flex items-center;
}
.Pinpoint.document .iframe .overlay .icon {
	@apply h-5 w-5 mr-2;
}
.Pinpoint.document .iframe .overlay .title {
	@apply block min-w-0 truncate font-bold leading-5 text-white;
	text-shadow: 0 0 2px black;
}

/**
 * Linked data
 */
.Pinpoint.document .linked-data-list-item {
	@apply relative pl-6;
}

.Pinpoint.document .linked-data-list-item::before {
	@apply text-gray-400 dark:text-gray-600 absolute top-0 left-1;
	content: '\2022';
}

/**
 * YouTube embed
 **/
.yt {
	@apply relative bg-cover bg-center cursor-pointer bg-black;
	background-repeat: no-repeat;
}
/* gradient */
.yt::before {
	@apply block absolute top-0 w-full bg-top bg-repeat-x;
	content: '';
	height: 60px;
	padding-bottom: 50px;
	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
/* responsive iframe with a 16:9 aspect ratio (https://css-tricks.com/responsive-iframes */
.yt::after {
	@apply block;
	content: '';
	padding-bottom: calc(100% / (16 / 9));
}
.yt > iframe {
	@apply absolute top-0 left-0 w-full h-full border-0;
}
.yt > .play-button {
	@apply absolute cursor-pointer top-1/2 left-1/2 border-none ring-0;
	width: 68px;
	height: 48px;
	transform: translate3d(-50%, -50%, 0);
	z-index: 1;
	background-color: transparent;
	/* YT's actual play button svg */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
	filter: grayscale(100%);
	transition: filter 0.1s cubic-bezier(0, 0, 0.2, 1);
}
.yt:hover > .play-button,
.yt .play-button:focus {
	@apply ring-0;
	filter: none;
}
/* Post-click styles */
.yt.activated {
	cursor: unset;
}
.yt.activated::before,
.yt.activated > .play-button {
	opacity: 0;
	pointer-events: none;
}

/**
 * Embed
 */
.Pinpoint.document .embed > iframe {
	@apply w-full;
}

/**
 * Emoji
 */
.Pinpoint.document span.emoji {
	font-family: Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
	font-size: 1em !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	vertical-align: -0.075em !important;
	margin-right: 0.25em !important;
}

/**
 * Cover media
 */
article .Pinpoint.covermedia:not(:empty) {
	@apply mb-10 relative;
}

article .Pinpoint.covermedia .image {
	@apply rounded-lg overflow-hidden flex flex-col;
	border-color: var(--article-border-color);
}

article .Pinpoint.covermedia .image > img {
	@apply object-cover object-center;
}

article .Pinpoint.covermedia > .video,
article .Pinpoint.covermedia > .media-container > .video {
	@apply aspect-w-16 aspect-h-9;
}

article .Pinpoint.covermedia > .media-container > video,
article .Pinpoint.covermedia > .video > video {
	@apply w-full;
}

.Pinpoint.feedbackWrapper {
	@apply bg-transparent border-0 p-0 m-0;
}