:root
{
    --11i-color: #0e7e86;
}
body { color: var(--color-white); }
.barmi-hover
{
    transition: 0.4s;
    &:hover
    {
        opacity: 0.85;
    }
}
.bg-11i { background-color: var(--11i-color); }
.text-11i { color: var(--11i-color); }
.border-barmi { border-color: #454545 }
.pr-1 { padding-right: calc(var(--spacing) * 1); }
.pr-2 { padding-right: calc(var(--spacing) * 2); }
.pr-3 { padding-right: calc(var(--spacing) * 3); }
.float-left { float: left; }
.float-right { float: right; }
.w-75 { width: 60%; }
.m-b-end-1 { margin-block-end: calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse))); }
.m-b-end-2 { margin-block-end: calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse))); }
.m-b-end-3 { margin-block-end: calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse))); }
.m-b-end-4 { margin-block-end: calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse))); }
.items-end { align-items: end; }
.pencil { stroke: #b1b1b1; transition: 0.2s; cursor: pointer; &:hover, &:active { stroke: #FFFFFF; } }
.ml-5 { margin-left: calc(var(--spacing) * 5); }
.text-gray-900 { color:var(--color-gray-900); }
.bg-zinc-900 { background-color:var(--color-zinc-900); }