.app__main{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);padding:1rem;display:grid;grid-template-areas:"preview input" "preview converted";grid-template-columns:20% auto;gap:1rem}.app__color-preview{grid-area:preview}.app-color-preview{width:100%;aspect-ratio:1;border-radius:var(--bs-border-radius);padding:.25rem;border:1px solid var(--bs-border-color);position:relative}.app-color-preview:before{content:"";inset:.25rem;background:#fff var(--app-icon-no-bg-url);position:absolute;border-radius:inherit}.app-color-preview__color{width:100%;height:100%;border-radius:inherit;position:relative}.app-color-preview small{position:absolute;top:100%;left:0;right:0;text-align:center;padding-top:.5rem}.app__input-color{grid-area:input}.app__converted-colors .input-group{margin-top:1rem}.app__converted-colors .input-group-text{width:70px;text-transform:uppercase;justify-content:flex-end}.app-converted{padding:0;grid-area:converted}.app-converted__header{align-items:center;margin-bottom:.5rem}.app-converted__rounding label{align-self:flex-end}.app-converted__info{display:flex;align-items:center;margin-bottom:1rem}.app-converted__info svg{margin-right:.5rem;flex-shrink:0}@media (min-width:992px){.app-converted__info{margin-bottom:0}}