/* Alerts /* ---------------------------------------------------------- */ .gh-box { position: relative; padding: 12px 10px 14px 40px; border: 1px solid transparent; border-left-width: 5px; color: var(--midgrey); line-height: 1.55em; letter-spacing: 0.2px; background: #fff; border-radius: 5px; border-color: var(--whitegrey); box-shadow: 0 6px 10px -8px rgba(0,0,0,.15) } .gh-box a { color: var(--middarkgrey); text-decoration: underline; } .gh-box svg:first-of-type { position: absolute; left: 12px; width: auto; } .gh-box-tip { border-left-color: var(--blue); } .gh-box-tip svg:first-of-type { top: 12px; height: 2rem; fill: var(--blue); } .gh-box-alert { border-left-color: color-mod(var(--yellow) l(-8%) s(+10%)); } .gh-box-alert svg:first-of-type { top: 14px; height: 1.8rem; fill: color-mod(var(--yellow) l(-8%) s(+10%)); } .gh-box-error { border-left-color: var(--red); } .gh-box-error svg:first-of-type { top: 14px; height: 1.8rem; fill: var(--red); } .gh-box-error-border { border-left: 5px solid var(--red); } .gh-content-bg-whitegrey { background: var(--whitegrey-l1); } .gh-content-box { border: 1px solid var(--whitegrey); border-radius: 4px; background: var(--white); } .gh-content-box.pa { padding: 24px; } .gh-content-box.pt { padding-top: 24px; } .gh-content-box.pr { padding-right: 24px; } .gh-content-box.pb { padding-bottom: 24px; } .gh-content-box.pl { padding-left: 24px; } .gh-content-box.grey { border: none; background: var(--main-color-content-greybg); } .gh-content-box.darkgrey { border: none; background: color-mod(var(--black) l(+6%) s(+2%)); color: var(--white); } .gh-content-box.black { border: none; background: var(--black); color: var(--white); } .gh-content-box.vertical { background: none; border-left: none; border-right: none; border-top: 1px solid var(--list-color-divider); border-bottom: 1px solid var(--list-color-divider); border-radius: 0; }