.add-to-calendar { display: inline-block; position: relative; vertical-align: middle; line-height: 1; } .add-to-calendar .atc-toggle { white-space: nowrap; display: inline-flex; align-items: center; vertical-align: middle; background-color: #4B0082; border-color: #4B0082; color: #fff; } .add-to-calendar .atc-toggle:hover, .add-to-calendar .atc-toggle:focus, .add-to-calendar .atc-toggle:active, .add-to-calendar .atc-toggle:hover:focus, .add-to-calendar .atc-toggle:active:focus { background-color: #3a006b; border-color: #3a006b; color: #fff; outline: none; } .add-to-calendar .atc-toggle .fa { margin-right: 4px; font-size: 12px; line-height: 1; color: #fff; } .add-to-calendar .atc-toggle .caret { margin-left: 4px; border-top-color: #fff; } .atc-menu { display: none; list-style: none; margin: 0; padding: 6px 0; min-width: 180px; max-width: 260px; background: #ffffff; border: 1px solid #d5d8dc; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); text-align: left; } /* Rendered on while open so parent containers with overflow cannot clip it. */ .atc-menu.atc-menu-open { display: block; position: fixed; z-index: 10050; } .atc-menu > li { list-style: none; margin: 0; padding: 0; float: none; width: auto; } .atc-menu > li > a { display: block; padding: 7px 16px; color: #333333; font-size: 13px; line-height: 18px; white-space: nowrap; text-decoration: none; } .atc-menu > li > a small { color: #7b8794; font-size: 11px; } .atc-menu > li > a:hover, .atc-menu > li > a:focus { background: #f2f5f8; color: #111111; text-decoration: none; }