@import url(//fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i|Open+Sans:300,300i,600,600i&display=swap);
@import url(/content/styles/fontawesome.css);
@import url(/content/styles/reset.css);
@import url(//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
@import url(/content/styles/forms.css?r=1);
.show-loading-animation.rect-shape, .show-loading-animation.round-shape, .show-loading-animation.text-row,
.show-loading-animation .rect-shape,
.show-loading-animation .round-shape,
.show-loading-animation .text-row {
  animation: react-placeholder-pulse 1.5s infinite; }

@keyframes react-placeholder-pulse {
  0% {
    opacity: .6; }
  50% {
    opacity: 1; }
  100% {
    opacity: .6; } }

/*------------------------+
 | Site: ASRS Retin Atlas |
 | Part: Master styles    |
 +------------------------*/

/* Imports
=====================================================================*/


/* Fonts
======================================================================*/
body, input, select, textarea { font-family: Montserrat, Arial, sans-serif; }
.footer, .header { font-family: "Open Sans", Arial, sans-serif; }


/* Basics
======================================================================*/
a { text-decoration: none; transition: all 0.1s ease-in-out; }
a, a:hover { color: #418fde; }
a:hover { text-decoration: underline; }
audio { margin-bottom: 1em; width: 100%; }
address { font-style: normal; }
blockquote { margin-left: 3em; }
body { line-height: 1.5; word-wrap: break-word; }
cite, em { font-style: italic; }
dl, ol, table, p, ul { margin-bottom: 1em; }
dt { margin-top: 0.75em; }
dt:first-child { margin: 0; }
dt, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h1 { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.5em; }
h2 { font-size: 1.375rem; font-weight: 500; line-height: 1.1; margin-bottom: 0.6em; }
h2 span { font-size: 12px; }
h3 { font-size: 1.1rem; }
h4 { text-transform: uppercase; }
hr { background: #e0dbd4; border: 0; clear: both; color: #e0dbd4; height: 1px; margin: 2em 0; }
img { max-width: 100%; }
li { margin-bottom: 0.375em; }
ol, ul { margin-top: 0.5em; }
ol, ol ol ol ol { list-style-type: decimal; margin-left: 2em; }
ol ol, ol ol ol ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
ol ol, ol ul, ul ol, ul ul { margin-top: 0.4em; }
sub { vertical-align: sub; }
sub, sup { font-size: 0.7em; white-space: nowrap; }
sup { vertical-align: super; }
table { border-collapse: collapse; width: 100%; }
table[style] { width: 100% !important; }
table p { margin: 0; }
td { vertical-align: top; }
td[align="right"] { text-align: right; }
td[align="center"] { text-align: center; }
td, th { border: 1px solid #ddd; padding: 0.3em 0.5em; }
tfoot td { border-top: 3px double #ddd; }
th { background: #f0f0f0; font-weight: bold; vertical-align: bottom; }
ul { list-style: disc; margin-left: 1.5em; }
ul li::marker { color: #418fde; }
ul ul { list-style: circle; }
video { height: auto !important; width: 100% !important; }

/* Stock classes */
.c { text-align: center; }
.l { float: left; }
.r { float: right; }
ul.flat { list-style: none; margin-left: 0; }
ul.flat > li { background: none; margin: 0; padding: 0; }


/* Core layout
======================================================================*/
.clear { clear: both; }
.content { margin: 0 auto; max-width: 1210px; }
.content-narrow { margin: 0 auto; max-width: 960px; }
.main-content { padding: 4vw 30px; }


/* Content
======================================================================*/

/* ASRS icon */
.asrs-icon { margin-right: 2px; vertical-align: -7px; width: 24px; }

/* Authors */
.authors { border-bottom: 1px solid #ddd; font-size: 12px; margin-bottom: 20px; }
.authors img { border-radius: 300px; float: left; margin: 2px 0 0 -60px; }
.authors li { box-sizing: border-box; flex: 0 0 auto; list-style: none; margin: 0 5% 15px 0; padding-left: 60px; width: 28% }
.authors ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; }

    /* In a form */
    .author-form .fields-name-long { width: calc(100% + 20px); }
    .form-field .authors { border: 0; font-size: 1em; }
    .form-field .authors li { width: auto; }
    .form-field .authors ul { display: block; }

    /* Sortable */
    .authors.sortable li { padding-left: 82px }
    .authors .draghandle { background: #eee; color: #999; cursor: move; float: left; font-size: 2em; margin-left: -82px; text-align: center; width: 16px; }

    /* When sorting */
    .authors.sorting { border: 0; font-size: 1em; }
    .authors.sorting li { padding-left: 82px; width: auto; }
    .authors.sorting ul { display: block; }

/* Authors Search */
.authors-search { background: #fff; border-radius: 3px; border: 1px solid #ccc; display: flex; margin-bottom: 1em; white-space: nowrap; }

.authors-search .search-button {
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: #0068ab;
    cursor: pointer;
    flex: 0 0 2em;
    font-size: 1.1em;
    padding: 0.6em;
}

/* Custom react-select style adjustments */
.authors-search__control { width: 100%; }
.authors-search__menu-list > li { padding: 0.3em; padding-left: 66px;  text-align: left; }
.authors-search__menu-list > li:hover { background: #f0f0f0; cursor: pointer; }

.authors-search .search-button:hover { opacity: 0.7; }

.authors-search .search-txt {
    background: none;
    border: 0;
    box-shadow: none;
    display: block;
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    padding: 0;
    text-indent: 0.6em;
}

/* Banner */
.banner { margin-bottom: 30px; }

/* Breadcrumbs */
.breadcrumbs { list-style: none; margin: 0 0 1.5em; }
.breadcrumbs li { display: inline-block; margin-right: 0.6em; }
.breadcrumbs li:after { color: #777; content: "\232A"; margin-left: 0.6em; }
.breadcrumbs li:last-child:after { content: ""; }

/* Callouts */
div.call-l, img.call-l, .pull-l { clear: left; max-width: 100%; }
div.call-r, img.call-r, .pull-r { clear: right; max-width: 100%; }
dt img.call-l { margin-top: 0; }
img.call-l { margin-right: 1em; }
img.call-r { margin-left: 1em; }
.call-l { margin: 0.5em 2em 0.5em 0; }
.call-l, .pull-l { float: left; }
.call-r { margin: 0.5em 0 0.5em 2em; }
.call-r, .pull-r { float: right; }
.call, div.call-l, div.call-r { font-size: 0.75em; }
.call img, .call-l img, .call-r img { display: block; }
.call img.icon, .call-l img.icon, .call-r img.icon { display: inline; }
.call, .call-l p, .call-r p { margin-bottom: 0.5em; }
.credit { color: #7f8183; font-size: 0.75em; letter-spacing: 0.01em; margin-bottom: 0.5em; text-align: right; }
.pull-l { margin: 0 1em 0.5em 0; }
.pull-l, .pull-r { color: #4c5059; font-size: 22px; font-weight: bold; line-height: 1.3; text-indent: -0.25em; width: 33%; }
.pull-r { margin: 0 0 0.5em 1em; }

    /* Figures */
    .figure { display: block; position: relative; }
    .figure img { display: block; }
    
    .magnify {
        background: #fff url(/content/images/shared/magnify.png) no-repeat 0 0;
        border-radius: 4px;
        bottom: 6px;
        display: block;
        height: 22px;
        position: absolute;
        right: 3px;
        text-indent: -9999em;
        width: 22px;
    }
    
    a:hover .magnify { background-color: #3e5ece; background-position: 0 -22px; }
    
    /* Sidebars */
    [class *= "sidebar"] { background: #f0f0f0; border-radius: 7px; font-size: 14px; padding: 15px; width: 30%; }
    table[class *= "sidebar"] { padding: 0; width: 34%; }
    table[class *= "sidebar"] p { margin-bottom: 1em; }
    table[class *= "sidebar"] td { border: 0; font-size: 15px; line-height: 1.4; padding: 15px; }
    .sidebar-l { clear: left; float: left; margin: 0.3em 1em 1em 0; }
    .sidebar-r { clear: right; float: right; margin: 0.3em 0 1em 1em; }

/* Classification */
.media-classification { background: rgba(103, 144, 203, 0.1); border: 1px solid rgba(103, 144, 203, 0.5); margin-bottom: 2rem; padding: 20px 20px 3px; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31.25%; }

/* Disclosure */
.disclosures { color: #777; font-size: 0.8rem; }
.disclosures summary { color: #0045aa; text-transform: uppercase; }
.disclosures summary::-webkit-details-marker { display: none; }

/* Figures */
.figures { display: grid; grid-gap: 15px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; margin-left: 0; }

/* Filters */
.filters {
    background: #f9f9f9;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    columns: 3;
    column-gap: 40px;
    list-style: none;
    margin: 2rem 0 4rem;
    padding: 2rem;
}

    /* Active filters */
    .active-filters { font-size: 0.9rem; margin-bottom: 1em; }
    .active-filters a:not(.filter-name) { font-size: 0.8rem; margin-left: 0.3em; }
    .active-filters li { background: #ddf0ff; margin: 0 1em 0.5em 0; padding: 0.3em 0.5em; }
    .active-filters p, .active-filters li, .active-filters ul { display: inline-block; }
    .active-filters p, .active-filters ul { margin: 0; }
    .active-filters strong:after { content: ": "; }

    /* Nav */
    .filter-nav { clear: both; list-style: none; margin: 0 0 2rem; }
    .filter-nav li { display: inline; margin-right: 2em; }
    .filter-nav li.current { font-weight: bold; }
    .filter-nav li.current a { color: #000; }

/* Footer */
.footer { background: #2f3031; padding: 30px 30px 50px; text-align: center; }
.footer, .footer a { color: rgba(255, 255, 255, 0.4); }

    /* Colophon */
    .colophon li { display: inline; margin-right: 1em; }
    .colophon li:last-child { margin-right: 0; }
    .colophon ul { list-style: none; }
    
    /* vCard */
    .vcard .adr, .vcard .street-address, .vcard .org, .vcard .tel { margin-right: 1em; }
    .vcard .org { font-weight: 600; }

/* Header */
.header { background: #2f3031; border-bottom: 7px solid #6790cb; color: rgba(255, 255, 255, 0.8); padding: 15px 30px 20px; }
.header, .header-subbranding, .header-subbranding a, .nav-extra a { color: rgba(255, 255, 255, 0.8); }
.header .content { display: flex; justify-content: space-between; }
.header-logo { color: #6790cb; display: flex; }
.header-logo img { flex: 0 0 auto; height: 67px; margin-right: 0.7em; width: 57.08%; }
.header-primary { flex: 0 0 auto; width: 59.5%; }
.header-secondary { flex: 0 0 auto; text-align: right; width: 38.84%; }
.header-subbranding { font-size: 1.125rem; margin-bottom: 1em; }
.header-subbranding a { font-weight: bold; }
.header-tagline { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1; padding-top: 0.6em; text-transform: lowercase; }

/* Highlights */
.highlight {
    background: #f9f9f9;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px; padding: 20px 30px;
}

/* Iframes */
.iframe-container { height: 0; overflow: hidden; padding-top: 30px; position: relative; }
.iframe-container iframe { left: 0; height: 100%; position: absolute; top: 0; width: 100%; }

/* Intro */
.intro { font-size: 1.41rem; font-weight: 300; text-align: center; }
.intro h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 0.2em; }

/* Mask */
#mask {
    background: rgba(255, 255, 255, 0.7);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    transition: filter 0.25s, opacity 0.25s;
    top: 0;
    visibility: hidden;
    width: 100%;
}

.masked { overflow: hidden; }
.masked #mask { opacity: 1; visibility: visible; }

/* Muted text */
.mute { color: #666; font-size: 0.9rem; font-weight: normal; }

/* Navigation */
#nav-toggle { display: none; }

    /* Header */
    .nav-extra { font-weight: 600; line-height: 1.2; text-transform: uppercase; }
    .nav-extra li { border-right: 1px solid rgba(255, 255, 255, 0.8); display: inline-block; margin-right: 0.3em; padding-right: 0.3em; }
    .nav-extra li:last-child, .nav-extra li:nth-last-child(2) { border: 0; margin: 0; padding: 0; }
    .nav-header { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    
        /* Account */
        .nav-extra { list-style: none; width: 100%; text-align: right; }
        .nav-extra .account-nav { text-transform: none; width: 100%; }
        .nav-extra .account-nav, .nav-extra .account-nav a { color: #fff; }
        
        /* Primary */
        .nav-primary {
            align-items: center;
            display: flex;
            font-size: 1.125rem;
            font-weight: 600;
            justify-content: flex-end;
            list-style: none;
            margin: 0;
            text-transform: uppercase;
        }
        
        .nav-primary a { color: #6790cb; }
        .nav-primary li { display: inline-block; }
    
    /* Menu (small screens) */
    .menu {
        background: #6790cb;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        height: 100%;
        color: #fff;
        opacity: 0;
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;
        padding-top: 45.9px;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0s 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
        visibility: hidden;
        width: 100%;
    }
    
    .menu a { color: #fff; }
    .menu-head { background: #2f3031; color: #fff; padding: 0.5em 1em; position: fixed; right: 0; text-align: center; top: 0; width: 100%; }
    .menu-head .menu-close { color: #6790cb; padding: 0 0.7em; position: absolute; right: 12px; top: 10px; }
    .menu-list { list-style: none; margin: 0; }
    .menu-list a { display: block; border-bottom: 1px solid #ddd; padding: 0.75em 1em; }
    .menu-list li { margin: 0; }
    .menu-open #menu-nav { opacity: 1; transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95); visibility: visible; z-index: 1000; }
    .menu-section { border-top: 1px solid #fff; padding: 0.75em 1em; }
    
    /* Toggles */
    #nav-toggle { display: none; font-size: 1.3rem; }
    #nav-toggle a { color: #6790cb; display: block; padding: 0.1em 0.5em; }
    #nav-toggle li { margin: 0; }
    #nav-toggle ul { display: flex; list-style: none; margin: 0; }

/* Overlay */
.overlay-wrapper { position: relative; }
.overlay { background: rgba(255, 255, 255, 0.85); height: 100%; position: absolute; width: 100%; z-index: 9999; }
.overlay-content { color: rgba(0, 0, 0, 0.5); font-size: 1.5em; position: absolute; text-align: center; top: 50px; transform: translateY(-50%); width: 100%; }

/* References */
.refs { font-size: 0.8125rem; }

/* Search results */
.search-results { list-style: none; margin-left: 0; }
.search-results li { margin-bottom: 2em; }
.search-results p { margin: 0; }

    /* Autocomplete */
    .autocomplete .st-result { border: 0; margin: 0; padding: 0; }
    .autocomplete .st-result .title { font-size: 1em; }
    .autocomplete .st-search-result-link { display: block; padding: 0.3em 1em; }
    .autocomplete .st-search-result-link:hover { text-decoration: none; }
    .swiftype-widget .autocomplete li { border: 0 !important; font-size: 1em !important; padding: 0 !important; }
    .swiftype-widget .autocomplete li.active { background: #0045aa !important; border: 0 !important; box-shadow: none !important; }
    .swiftype-widget .autocomplete li.active a { color: #fff; }
    
    /* Swiftype */
    #search-within-search { margin-bottom: 1em; }
    .st-no-results, .st-spelling-suggestion { text-align: center; padding: 1em; }
    .st-page { text-align: center; }
    .st-page a { margin: 0 0.5em; padding: 0.5em 1em; }
    .st-query-present { margin-bottom: 1em; }
    .st-result { border-bottom: 1px solid #ddd; margin-bottom: 1em; padding-bottom: 1em; }
    .st-result em, .st-snippet em { font-style: normal; font-weight: bold; }
    .st-result .title { font-size: 1.3em; font-weight: normal; line-height: 1.3; margin-bottom: 0.2em; }
    .st-search-result-link { text-decoration: none; }
    .st-search-result-link:hover { text-decoration: underline; }
    .st-ui-url { color: #a6a6a6; font-size: 0.9em; }

/* Sections */
.section { border-bottom:  1px solid #ddd; display: flex; justify-content: space-between; margin-bottom: 3rem; padding-bottom: 3rem; }
.section-primary { flex: 0 0 320px;}
.section-secondary { flex: 1 1 auto; padding-left: 40px; }      

/* Tags */
.tags { line-height: 1.6; list-style: none; margin-left: 0; }
.tags [class *= "fa-"] { color: rgba(0, 0, 0, 0.5); }
.tags li { display: inline-block; margin-right: 1em; white-space: nowrap; }

/* Tinymce editor */
.mce-content-body { padding: 0.5em; }
.mce-content-body blockquote { margin-left: 1.5em; }
.mce-content-body ol ul, .mce-content-body ul ul { margin: 0.5em 0 1em 1.5em; }
.mce-content-body ol ol, .mce-content-body ul ol { margin: 0.5em 0 1em 3em; }
.mce-content-body table, .mce-content-body td, .mce-content-body th { border: 1px dashed #ccc; font-family: inherit; font-size: 1em; padding: 0.5em; }

.mce-content-body.container { font-size: 1em; width: auto; }

    /* Character counter */
    .mce-label.mce-charactercount { margin: 2px 0 2px 2px; padding: 8px; font-size: inherit; text-transform: uppercase; }
    .mce-label.mce-characterlimit { margin-left: -4px !important; padding: 8px; font-size: inherit; text-transform: uppercase; }
    .mce-label.mce-characterlimit::before { content: '\2014'; margin-right: 8px; }
    .mce-label.mce-wordcount { margin-left: 8px !important; }
    .mce-label.mce-wordlimit::before { content: '\2014'; margin-right: 8px; }
    .mce-path { display: none !important; }

/* Topics */
.topics { column-count: 3; column-gap: 3rem; list-style: disc; margin: 1.5em 0 3em 1.5em; }
.topics li { -webkit-column-break-inside: avoid; break-inside: avoid; break-inside: avoid-column; page-break-inside: avoid; }
.topics::marker { color: #418fde; }

    /* Features */
    .topic-features { column-count: 2; column-gap: 4rem; }
    .topic-features h2 { font-size: 1.375rem; font-weight: bold; }
    .topic-features-list, .topic-features-list * { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; }
    .topic-features-list { margin-bottom: 1.5em; }
    .topic-features-list ul { margin-bottom: 0.375em; }
    
    /* Summary */
    .topic-summary { column-count: 2; column-gap: 4rem; }
    .topic-summary .figures { margin: 0; }
    .topic-summary-content { overflow: hidden; position: relative; max-height: 13.5em; }
    
    .topic-summary-more {
        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
        bottom: 0;
        left: 0;
        padding-top: 2em;
        position: absolute;
        width: 100%;
    }
    
    .topic-summary-section { -webkit-column-break-inside: avoid; margin-bottom: 2em; page-break-inside: avoid; break-inside: avoid; }
    
    /* Table of contents */
    .topics-toc {
        column-count: 2;
        column-gap: 3rem;
        font-size: 1.375rem;
        font-weight: 500;
        list-style: disc;
        margin-left: 1.5em;
    }


/* Widths
=====================================================================*/
@media screen and (max-width: 1000px) {
    .header-logo img { height: 33px; width: 200px; }
    .header-tagline { font-size: 1rem; padding-top: 0.3em; }
}

@media screen and (max-width: 900px) {
    /* Layout */
    .main { padding-top: 58px; }
    .main-content { padding: 30px 15px 20px; }
    
    /* Content */
        /* ASRS icon */
        .asrs-icon { vertical-align: middle; width: 16px; }
        
        /* Filters */
        .filters { columns: 2; }
        
        /* Forms */
            /* Search */
                /* Header search */
                .site-search {
                    background: #fff;
                    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
                    left: 0;
                    margin: 0;
                    opacity: 0;
                    padding: 15px;
                    position: fixed;
                    top: 0;
                    transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), visibility 0s 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
                    visibility: hidden;
                    width: 100%;
                }
                
                .site-search .search { flex-wrap: wrap; }
                
                .search-open .site-search {
                    opacity: 1;
                    transition: opacity 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
                    visibility: visible;
                    z-index: 1000;
                }
                
                /* Hero search */
                .hero-search { background-size: 78%; font-size: 1rem; padding: 7% 15px 1em; }
                .hero-search .content { align-items: stretch; flex-direction: column-reverse; }
                .hero-search .search { margin: 0; width: auto; }
                .hero-search-label { margin-bottom: 0.5em; }
        
        /* Header */
        .account-nav, .header-subbranding, .nav-extra, .nav-primary { display: none; }
        .header { padding: 10px 15px; position: fixed; width: 100%; }
        .header-primary { flex: 1 1 auto; }
        
        /* Intro */
        .intro { font-size: 1.2rem; }
        .intro h1 { font-size: 1.8rem; }
        
        /* Navigation */
        .nav-primary { display: none; }
        #nav-toggle { display: block; flex: 0 0 auto; margin-left: 1em; }

        /* Sections */
        .section { display: block; }
        .section-secondary { padding-left: 0; }
        
        /* Topics */
        .topic-features, .topic-summary, .topics-toc { column-count: 1; }
        .topics { column-count: 2; }
}

@media screen and (max-width: 500px) {
    /* Filters */
    .filters { columns: 1; }
    
    /* Header */
    .header { border-bottom-width: 3px; }
    .header-logo { display: block; position: relative; }
    .header-logo img { height: 21px; width: 130px; }
    .header-tagline { bottom: -1em; font-size: 0.6rem; left: 24px; position: absolute; }
    
    /* Topics */
    .topics { column-count: 1; }
    
    /* vCard */
    .vcard .adr, .vcard .contact, .vcard .tel { display: block; }
}
/* Site notifications */
.site-notifications-wrapper { 
    height: 0; 
    left: 0; 
    position: fixed; 
    text-align: center; 
    top: 0; 
    width: 100%; 
    z-index: 10000; 
}
.site-notifications { padding: 0 10px; }
.site-notifications .alert { 
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    -webkit-box-shadow: 0 4px 8px rgba(0,0,0,.1);
    border-width: 2px; 
    cursor: pointer; 
    display: inline-block; 
    margin-bottom: 5px; 
    margin-top: 5px;
    padding: 8px 12px;
}

.site-notifications .alert.target { margin: 0; position: absolute; }

    /* position and arrows*/
    .site-notifications .alert.top-left { transform: translateY(calc(-100% - 8px)); -webkit-transform: translateY(calc(-100% - 8px)); }
    .site-notifications .alert.top-left::after { 
        content: '';
        position: absolute;
        left: 0%;
        top: 100%;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid;
        border-top-color: inherit;
    }
    .site-notifications .alert.top { transform: translate(-50%, calc(-100% - 8px)); -webkit-transform: translate(-50%, calc(-100% - 8px)); }
    .site-notifications .alert.top::after { 
        content: '';
        position: absolute;
        left: calc(50% - 8px);
        top: 100%;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid;
        border-top-color: inherit;
    }
    .site-notifications .alert.top-right { transform: translate(-100%, calc(-100% - 8px)); -webkit-transform: translate(-100%, calc(-100% - 8px)); }
    .site-notifications .alert.top-right::after { 
        content: '';
        position: absolute;
        left: calc(100% - 16px);
        top: 100%;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid;
        border-top-color: inherit;
    }
    .site-notifications .alert.right-top { transform: translateX(8px); -webkit-transform: translateX(8px); }
    .site-notifications .alert.right-top::after { 
        content: '';
        position: absolute;
        left: -8px;
        top: 0%;
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-right: 8px solid;
        border-right-color: inherit;
    }
    .site-notifications .alert.right { transform: translate(8px, -50%); -webkit-transform: translate(8px, -50%); }
    .site-notifications .alert.right::after { 
        content: '';
        position: absolute;
        left: -8px;
        top: calc(50% - 8px);
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-right: 8px solid;
        border-right-color: inherit;
    }
    .site-notifications .alert.right-bottom { transform: translate(8px, -100%); -webkit-transform: translate(8px, -100%); }
    .site-notifications .alert.right-bottom::after { 
        content: '';
        position: absolute;
        left: -8px;
        top: calc(100% - 16px);
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-right: 8px solid;
        border-right-color: inherit;
    }
    .site-notifications .alert.bottom-right { transform: translate(-100%, 8px); -webkit-transform: translate(-100%, 8px); }
    .site-notifications .alert.bottom-right::after { 
        content: '';
        position: absolute;
        left: calc(100% - 16px);
        top: -8px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
        border-bottom-color: inherit;
    }
    .site-notifications .alert.bottom { transform: translate(-50%, 8px); -webkit-transform: translate(-50%, 8px); }
    .site-notifications .alert.bottom::after { 
        content: '';
        position: absolute;
        left: calc(50% - 8px);
        top: -8px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
        border-bottom-color: inherit;
    }
    .site-notifications .alert.bottom-left { transform: translateY(8px); -webkit-transform: translateY(8px); }
    .site-notifications .alert.bottom-left::after { 
        content: '';
        position: absolute;
        left: 0;
        top: -8px;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid;
        border-bottom-color: inherit;
    }
    .site-notifications .alert.left-bottom { transform: translate(calc(-100% - 8px), -100%); -webkit-transform: translate(calc(-100% - 8px), -100%); }
    .site-notifications .alert.left-bottom::after { 
        content: '';
        position: absolute;
        left: 100%;
        top: calc(100% - 16px);
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-left: 8px solid;
        border-left-color: inherit;
    }
    .site-notifications .alert.left { transform: translate(calc(-100% - 8px), -50%); -webkit-transform: translate(calc(-100% - 8px), -50%); }
    .site-notifications .alert.left::after { 
        content: '';
        position: absolute;
        left: 100%;
        top: calc(50% - 8px);
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-left: 8px solid;
        border-left-color: inherit;
    }
    .site-notifications .alert.left-top { transform: translateX(calc(-100% - 8px)); -webkit-transform: translateX(calc(-100% - 8px)); }
    .site-notifications .alert.left-top::after { 
        content: '';
        position: absolute;
        left: 100%;
        top: 0;
        width: 0;
        height: 0;
        border-bottom: 8px solid transparent;
        border-top: 8px solid transparent;
        border-left: 8px solid;
        border-left-color: inherit;
    }