/* RESET */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .pipe-border { border-left: 1px solid #d6d6d6; height: 19px; transform: translatey(1px); } sup { font-size: 14px !important; margin-left: 1px !important; } input:focus, textarea:focus, select:focus, :focus { outline: none; } button:focus, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; box-shadow: none; } /* fonts */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/NotoSansJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/NotoSansJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/NotoSansJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/NotoSansJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/NotoSerifJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/NotoSerifJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/NotoSerifJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Noto Serif JP'; font-style: normal; font-weight: 900; font-display: swap; src: url(/assets/fonts/NotoSerifJP.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /***************/ /* GENERAL CSS */ /***************/ [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } .appMinHeight { /* min-height: calc(100vh + 400px) !important; */ } body { font-size: 14px; font-family: 'Noto Sans JP', sans-serif; color: #333; } .no-scroll { overflow: hidden !important; } .grey-background { background-color: #f3fbfc; } .container { max-width: 1340px !important; padding-left: 50px !important; padding-right: 50px !important; } .full-background { min-height: 100vh; overflow: hidden; } .small-page { /* position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); */ display: block; padding: 60px 100px; margin: auto; margin-top: 15vh; margin-bottom: 5vh; width: 685px; max-width: 100%; background-color: #fff; border-radius: 2px; box-shadow: 0 1px 5px 0 rgba(163, 163, 163, 0.48); } .small-page.small-mtop { margin-top: 5vh; } .input-blue-border { border-bottom: 1px solid #00afc3 !important; } .empty-state { line-height: normal; font-weight: 300; color: #a3a3a3; } .error { display: block; font-size: 14px; color: #f8333c !important; line-height: normal; padding: 3px 0; } body div div .error-field { border: 1px solid #e5352c !important; } .error-line-field { border-bottom: 1px solid #f8333c !important; } .error-line-field-general { border-bottom: 1px solid #f8333c !important; } .error-small { font-size: 12px; } .error-password { transform: translate(-4px, -45px); } .no-app-padding { padding-top: 0 !important; padding-bottom: 0 !important; } .paddingT20 { padding-top: 20px; } .marginT0 { margin-top: 0 !important; } .marginT20 { margin-top: 20px; } .marginT25 { margin-top: 25px; } .marginT30 { margin-top: 30px; } .marginT35 { margin-top: 35px; } .marginT40 { margin-top: 40px; } .marginT45 { margin-top: 45px; } .marginT50 { margin-top: 50px; } .marginB100 { margin-top: 50px; } .marginT55 { margin-top: 55px; } .marginT60 { margin-top: 60px; } .marginT65 { margin-top: 65px; } .marginT70 { margin-top: 70px; } .marginB0 { margin-bottom: 0 !important; } .marginB100 { margin-bottom: 100px !important; } .marginT120 { margin-top: 120px; } .marginB20 { margin-bottom: 20px; } .marginB30 { margin-bottom: 30px; } .marginB40 { margin-bottom: 40px; } .marginB60 { margin-bottom: 60px; } .marginB70 { margin-bottom: 70px; } .marginB120 { margin-bottom: 120px; } .max-height-40 { max-height: 40px; } .breadcrumb { transform: translateY(11px); background-color: #fff; padding-left: 0; text-decoration: none !important; } .breadcrumb:last-child { padding-right: 0; } .breadcrumb>span { line-height: normal; font-family: 'Noto Serif JP', serif; font-weight: 300; color: #A3A3A3; } .breadcrumb>span:last-child { transition: 0.2s ease; border-bottom: 1px solid #fff; } .breadcrumb:hover>span:last-child { border-bottom: 1px solid #a3a3a3; } .component-header { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid #00afc3; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } .component-header-purple { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid #9c4c94; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } .component-header-gold { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid #e6a519; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } a { text-decoration: none; cursor: pointer; } .btn-standard { font-size: 16px; line-height: normal; color: #fff; background-color: #00afc3; border-radius: 2px; transition: 0.2s ease; border-bottom: 2px solid #0b8d9c; cursor: pointer; } .btn-standard:hover { background-color: #23aaba; color: #fff; } .btn-inverted { font-size: 16px; font-weight: 500; text-transform: uppercase; line-height: normal; color: #00afc3; background-color: #fff; border: 1px solid #00afc3; border-radius: 2px; transition: 0.2s ease; } .btn-inverted:hover { background-color: #00afc3; color: #fff; } .btn-soft-white { margin: 0; border-radius: 2px; color: #bebebe; border: 1px solid #bebebe; transition: .2s ease; cursor: pointer; text-transform: uppercase; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.31); padding-left: 30px; padding-right: 30px; } .btn-soft-red { color: white; background-color: #ff7383; border-color: #ff7383; border-radius: 2px; text-transform: uppercase; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.31); padding-left: 30px; padding-right: 30px; } .btn-soft-white:hover { background-color: #bebebe; color: white; } .btn-soft-red:hover { background-color: #dd6372; border-color: #dd6372; color: #fff; } .cancel-link { font-size: 16px; color: #555; text-decoration: underline; line-height: normal; transition: .2s ease; } .cancel-link:hover { color: #333; } .left-col-width { max-width: 786px; width: 100%; } .commando-offset { top: 107px; left: 50%; transform: translateX(-50%); width: 100%; background-color: #fff; z-index: 99; } .padCommando { padding-top: 13px; padding-bottom: 13px; } /* commando animations */ @keyframes slideUpCommando { from { top: 107px } to { top: 0 } } @keyframes slideDownCommando { from { top: 0 } to { top: 107px } } .slide-up-commando { animation: slideUpCommando .5s 1 forwards; transition: box-shadow .5s ease; } .slide-down-commando { animation: slideDownCommando .5s 1 forwards; transition: box-shadow .5s ease; } .commando-shadow { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); } .no-flex-wrap { flex-wrap: nowrap; } /*********/ /* ICONS */ /*********/ .icon { display: inline-block; flex-shrink: 0; } i.icon-extranet { width: 24px; height: 28px; background: url('/assets/icons/extranet-icon.png') center center no-repeat; background: url('/assets/icons/extranet-icon.svg') center center no-repeat; background-size: contain; } i.icon.icon-close-nav { width: 24px; height: 24px; background: url('/assets/icons/close-nav.png') center center no-repeat !important; background: url('/assets/icons/close-nav.svg') center center no-repeat !important; background-size: contain; } i.icon-hamburger { width: 24px; height: 18px; background: url('/assets/icons/hamburger.png') center center no-repeat; background: url('/assets/icons/hamburger.svg') center center no-repeat; background-size: contain; } i.icon-pencil-big { width: 25px; height: 25px; background: url('/assets/icons/pencil-big.png') center center no-repeat; background: url('/assets/icons/pencil-big.svg') center center no-repeat; background-size: contain; } i.icon-marker-big { width: 25px; height: 25px; background: url('/assets/icons/marker-big.svg') center center no-repeat; background-size: contain; } i.icon-settings-big { width: 24px; height: 23px; background: url('/assets/icons/settings-big.png') center center no-repeat; background: url('/assets/icons/settings-big.svg') center center no-repeat; background-size: contain; } i.icon-attendees-big { width: 24px; height: 23px; transform: scale(1.2); background: url('/assets/icons/attendees-big.svg') center center no-repeat; background-size: contain; } i.icon-messages-big { width: 24px; height: 23px; transform: scale(1); background: url('/assets/icons/messages-big.svg') center center no-repeat; background-size: contain; } i.icon-duplicate-post { width: 24px; height: 23px; background: url('/assets/icons/duplicate-post.png') center center no-repeat; background: url('/assets/icons/duplicate-post.svg') center center no-repeat; background-size: contain; } i.icon-delete-big { width: 24px; height: 26px; background: url('/assets/icons/delete-big.png') center center no-repeat; background: url('/assets/icons/delete-big.svg') center center no-repeat; background-size: contain; } i.icon-chev-down-black { width: 10px; height: 8px; background: url('/assets/icons/chev-down-black.png') center center no-repeat; background: url('/assets/icons/chev-down-black.svg') center center no-repeat; background-size: contain; } i.icon-chev-down-sm { width: 11px; height: 8px; background: url('/assets/icons/chev-down-sm.png') center center no-repeat; background: url('/assets/icons/chev-down-sm.svg') center center no-repeat; background-size: contain; transform: translatey(-1px); } i.icon-chev-down-gray { width: 10px; height: 8px; background: url('/assets/icons/chev-down.png') center center no-repeat; background: url('/assets/icons/chev-down.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-toast-close { width: 8px; height: 8px; background: url('/assets/icons/toast-close.png') center center no-repeat; background: url('/assets/icons/toast-close.svg') center center no-repeat; background-size: contain; } i.icon-toast-success { width: 48px; height: 48px; background: url('/assets/icons/toast-success.png') center center no-repeat; background: url('/assets/icons/toast-success.svg') center center no-repeat; background-size: contain; } i.icon-toast-error { width: 48px; height: 48px; background: url('/assets/icons/toast-error.png') center center no-repeat; background: url('/assets/icons/toast-error.svg') center center no-repeat; background-size: contain; } i.icon-up-to-date { width: 24px; height: 24px; background: url('/assets/icons/up-to-date.png') center center no-repeat; background: url('/assets/icons/up-to-date.svg') center center no-repeat; background-size: contain; } i.icon-user-management { width: 22px; height: 24px; background: url('/assets/icons/user-management-gray.png') center center no-repeat; background: url('/assets/icons/user-management-gray.svg') center center no-repeat; background-size: contain; } i.icon-user-amount { width: 16px; height: 15px; transform: translateY(1px); background: url('/assets/icons/user-amount.png') center center no-repeat; background: url('/assets/icons/user-amount.svg') center center no-repeat; background-size: contain; } a.active i.icon-user-management, i.icon-user-management:hover { width: 22px; height: 24px; background: url('/assets/icons/user-management.png') center center no-repeat; background: url('/assets/icons/user-management.svg') center center no-repeat; background-size: contain; } i.icon-options { width: 22px; height: 6px; background: url('/assets/icons/options.png') center center no-repeat; background: url('/assets/icons/options.svg') center center no-repeat; background-size: contain; } i.icon-settings { width: 16px; height: 16px; background: url('/assets/icons/settings.png') center center no-repeat; background: url('/assets/icons/settings.svg') center center no-repeat; background-size: contain; } i.icon-logout { width: 16px; height: 14px; background: url('/assets/icons/logout.png') center center no-repeat; background: url('/assets/icons/logout.svg') center center no-repeat; background-size: contain; } i.icon-heart { width: 17px; height: 16px; background: url('/assets/icons/heart.png') center center no-repeat; background: url('/assets/icons/heart.svg') center center no-repeat; background-size: contain; } i.icon-calendar-big { width: 25px; height: 29px; background: url('/assets/icons/calendar-big.png') center center no-repeat; background: url('/assets/icons/calendar-big.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-share { width: 28px; height: 32px; background: url('/assets/icons/share.png') center center no-repeat; background: url('/assets/icons/share.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-location-pharma { width: 7px; height: 10px; background: url('/assets/icons/icon-location-pharma.png') center center no-repeat; background: url('/assets/icons/icon-location-pharma.svg') center center no-repeat; background-size: contain; } i.icon-location-other { width: 7px; height: 10px; background: url('/assets/icons/icon-location-other.png') center center no-repeat; background: url('/assets/icons/icon-location-other.svg') center center no-repeat; background-size: contain; } i.icon-tag-delete { width: 10px; height: 10px; background: url('/assets/icons/tag-delete-icon.png') center center no-repeat; background: url('/assets/icons/tag-delete-icon.svg') center center no-repeat; background-size: contain; transform: translateY(-1px); transition: 0.2s ease; } i.icon-plus-circle { width: 15px; height: 15px; transform: translatey(1px); background: url('/assets/icons/plus-circle.png') center center no-repeat; background: url('/assets/icons/plus-circle.svg') center center no-repeat; background-size: contain; } i.icon-file-type-general { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-general.png') center center no-repeat; background: url('/assets/icons/file-type-general.svg') center center no-repeat; background-size: contain; } i.icon-file-type-zip { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-zip.png') center center no-repeat; background: url('/assets/icons/file-type-zip.svg') center center no-repeat; background-size: contain; } i.icon-file-type-word { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-word.png') center center no-repeat; background: url('/assets/icons/file-type-word.svg') center center no-repeat; background-size: contain; } i.icon-file-type-ppt { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-ppt.png') center center no-repeat; background: url('/assets/icons/file-type-ppt.svg') center center no-repeat; background-size: contain; } i.icon-file-type-pdf { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-pdf.png') center center no-repeat; background: url('/assets/icons/file-type-pdf.svg') center center no-repeat; background-size: contain; } i.icon-file-type-excel { display: block; width: 44px; height: 58px; background: url('/assets/icons/file-type-excel.png') center center no-repeat; background: url('/assets/icons/file-type-excel.svg') center center no-repeat; background-size: contain; } i.icon-file-type-general-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-general.png') center center no-repeat; background: url('/assets/icons/file-type-general.svg') center center no-repeat; background-size: contain; } i.icon-file-type-zip-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-zip.png') center center no-repeat; background: url('/assets/icons/file-type-zip.svg') center center no-repeat; background-size: contain; } i.icon-file-type-word-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-word.png') center center no-repeat; background: url('/assets/icons/file-type-word.svg') center center no-repeat; background-size: contain; } i.icon-file-type-ppt-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-ppt.png') center center no-repeat; background: url('/assets/icons/file-type-ppt.svg') center center no-repeat; background-size: contain; } i.icon-file-type-pdf-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-pdf.png') center center no-repeat; background: url('/assets/icons/file-type-pdf.svg') center center no-repeat; background-size: contain; } i.icon-file-type-excel-small { display: block; width: 20px; height: 26px; background: url('/assets/icons/file-type-excel.png') center center no-repeat; background: url('/assets/icons/file-type-excel.svg') center center no-repeat; background-size: contain; } i.icon-article { width: 90px; height: 90px; background: url('/assets/icons/article.png') center center no-repeat; background: url('/assets/icons/article.svg') center center no-repeat; background-size: contain; } i.icon-document { width: 90px; height: 90px; background: url('/assets/icons/document.png') center center no-repeat; background: url('/assets/icons/document.svg') center center no-repeat; background-size: contain; } i.icon-report { width: 90px; height: 90px; background: url('/assets/icons/report.png') center center no-repeat; background: url('/assets/icons/report.svg') center center no-repeat; background-size: contain; } i.icon-event { width: 90px; height: 90px; background: url('/assets/icons/event.png') center center no-repeat; background: url('/assets/icons/event.svg') center center no-repeat; background-size: contain; } i.icon-newsletter { width: 90px; height: 90px; background: url('/assets/icons/newsletter.png') center center no-repeat; background: url('/assets/icons/newsletter.svg') center center no-repeat; background-size: contain; } i.icon-newsletter-public { width: 90px; height: 90px; background: url('/assets/icons/newsletter-public.svg') center center no-repeat; background-size: contain; } i.icon-drag-and-drop { position: absolute; top: 24px; right: 5px; width: 14px; height: 17px; background: url('/assets/icons/drag-and-drop-arrows.png') center center no-repeat; background: url('/assets/icons/drag-and-drop-arrows.svg') center center no-repeat; background-size: contain; } .drag-drop-topic i.icon-chev-order-up { display: none; width: 22px; height: 22px; background: url('/assets/icons/chev-order-up.png') center center no-repeat; background: url('/assets/icons/chev-order-up.svg') center center no-repeat; background-size: contain; cursor: pointer; transform: translateY(-1px); margin-right: 2px; } .disabled-icon { opacity: .4; cursor: not-allowed !important; } .drag-drop-topic i.icon-chev-order-down { display: none; width: 22px; height: 22px; background: url('/assets/icons/chev-order-down.png') center center no-repeat; background: url('/assets/icons/chev-order-down.svg') center center no-repeat; background-size: contain; cursor: pointer; } .drag-drop-topic>div { transform: translatey(5px); } i.icon-arrow-right { width: 7px; height: 7px; background: url('/assets/icons/arrow.png') center center no-repeat; background: url('/assets/icons/arrow.svg') center center no-repeat; background-size: contain; } i.icon-twitter-no-circle { width: 30px; height: 24px; background: url('/assets/icons/twitter-no-circle.png') center center no-repeat; background: url('/assets/icons/twitter-no-circle.svg') center center no-repeat; background-size: contain; } i.icon-twitter { width: 46px; height: 46px; background: url('/assets/icons/twitter.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-twitter:hover { background: url('/assets/icons/twitter-dark.png') center center no-repeat; background: url('/assets/icons/twitter-dark.svg') center center no-repeat; } i.icon-linkedin { width: 46px; height: 46px; background: url('/assets/icons/linkedin.png') center center no-repeat; background: url('/assets/icons/linkedin.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-linkedin:hover { background: url('/assets/icons/linkedin-dark.png') center center no-repeat; background: url('/assets/icons/linkedin-dark.svg') center center no-repeat; } i.icon-facebook { width: 46px; height: 46px; background: url('/assets/icons/facebook.png') center center no-repeat; background: url('/assets/icons/facebook.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-facebook:hover { background: url('/assets/icons/facebook-dark.png') center center no-repeat; background: url('/assets/icons/facebook-dark.svg') center center no-repeat; } i.icon-instagram { width: 46px; height: 46px; background: url('/assets/icons/instagram.svg') center center no-repeat; background-size: contain; transition: .2s ease; } i.icon-instagram:hover { background: url('/assets/icons/instagram-dark.svg') center center no-repeat; } i.icon-chev-pagination-right { width: 6px; height: 10px; background: url('/assets/icons/chev-horizontal.png') center center no-repeat; background: url('/assets/icons/chev-horizontal.svg') center center no-repeat; background-size: contain; } i.icon-chev-pagination-left { width: 6px; height: 10px; background: url('/assets/icons/chev-horizontal.png') center center no-repeat; background: url('/assets/icons/chev-horizontal.svg') center center no-repeat; background-size: contain; transform: rotate(180deg); } i.icon-chev-right { width: 11px; height: 11px; background: url('/assets/icons/btn-arrow-white.png') center center no-repeat; background: url('/assets/icons/btn-arrow-white.svg') center center no-repeat; background-size: contain; transition: .2s ease; /* transform: translateY(2px); */ } i.icon-chev-right-black { width: 11px; height: 11px; background: url('/assets/icons/btn-arrow-black.png') center center no-repeat; background: url('/assets/icons/btn-arrow-black.svg') center center no-repeat; background-size: contain; transition: .2s ease; /* transform: translateY(2px); */ } .btn-sign-in:hover i.icon-chev-right, .btn-sign-in:focus i.icon-chev-right { background: url('/assets/icons/btn-arrow-black.png') center center no-repeat; background: url('/assets/icons/btn-arrow-black.svg') center center no-repeat; background-size: contain; } i.icon-location { width: 24px; height: 24px; background: url('/assets/icons/location.png') center center no-repeat; background: url('/assets/icons/location.svg') center center no-repeat; background-size: contain; } i.icon-website { width: 24px; height: 24px; background: url('/assets/icons/website.png') center center no-repeat; background: url('/assets/icons/website.svg') center center no-repeat; background-size: contain; } i.icon-telephone { width: 24px; height: 24px; background: url('/assets/icons/telephone.png') center center no-repeat; background: url('/assets/icons/telephone.svg') center center no-repeat; background-size: contain; } i.icon-email { width: 24px; height: 24px; background: url('/assets/icons/email.png') center center no-repeat; background: url('/assets/icons/email.svg') center center no-repeat; background-size: contain; } i.icon-send { width: 13px; height: 13px; background: url('/assets/icons/send.png') center center no-repeat; background: url('/assets/icons/send.svg') center center no-repeat; background-size: contain; transform: translateY(1px); } i.icon-send-blue { width: 13px; height: 13px; background: url('/assets/icons/send-blue.svg') center center no-repeat; background-size: contain; transform: translateY(1px); } .hasContent>i.icon-unchecked { background: url('/assets/icons/check.png') center center no-repeat; background: url('/assets/icons/check.svg') center center no-repeat; background-size: contain; } i.icon-unchecked { width: 14px; height: 14px; background: url('/assets/icons/uncheck.png') center center no-repeat; background: url('/assets/icons/uncheck.svg') center center no-repeat; background-size: contain; transition: 0.2s ease; } i.icon-plus { width: 18px; height: 19px; background: url('/assets/icons/plus.png') center center no-repeat; background: url('/assets/icons/plus.svg') center center no-repeat; background-size: contain; } a.active i.icon-plus, i.icon-plus:hover { background: url('/assets/icons/plus-black.png') center center no-repeat; background: url('/assets/icons/plus-black.svg') center center no-repeat; } i.icon-newsletters { width: 23px; height: 23px; background: url('/assets/icons/newsletters.png') center center no-repeat; background: url('/assets/icons/newsletters.svg') center center no-repeat; background-size: contain; } a.active i.icon-newsletters, i.icon-newsletters:hover { background: url('/assets/icons/newsletters-black.png') center center no-repeat; background: url('/assets/icons/newsletters-black.svg') center center no-repeat; background-size: contain; } i.icon-my-articles { width: 19px; height: 23px; background: url('/assets/icons/my-articles.png') center center no-repeat; background: url('/assets/icons/my-articles.svg') center center no-repeat; background-size: contain; } a.active i.icon-my-articles, i.icon-my-articles:hover { background: url('/assets/icons/my-articles-black.png') center center no-repeat; background: url('/assets/icons/my-articles-black.svg') center center no-repeat; } i.icon-events { width: 23px; height: 23px; background: url('/assets/icons/events.svg') center center no-repeat; background-size: contain; } a.active i.icon-events, i.icon-events:hover { background: url('/assets/icons/events-black.svg') center center no-repeat; } i.icon-news { width: 25px; height: 25px; background: url('/assets/icons/news.svg') center center no-repeat; background-size: contain; } a.active i.icon-news, i.icon-news:hover { background: url('/assets/icons/news-black.svg') center center no-repeat; } i.icon-search { width: 23px; height: 25px; background: url('/assets/icons/search.png') center center no-repeat; background: url('/assets/icons/search.svg') center center no-repeat; background-size: contain; } a.active i.icon-search, i.icon-search:hover { background: url('/assets/icons/search-black.png') center center no-repeat; background: url('/assets/icons/search-black.svg') center center no-repeat; } i.icon-bookmarks { width: 21px; height: 24px; background: url('/assets/icons/bookmarks.png') center center no-repeat; background: url('/assets/icons/bookmarks.svg') center center no-repeat; background-size: contain; } a.active i.icon-bookmarks, i.icon-bookmarks:hover { background: url('/assets/icons/bookmarks-black.png') center center no-repeat; background: url('/assets/icons/bookmarks-black.svg') center center no-repeat; } i.icon-bookmark { width: 18px; height: 20px; background: url('/assets/icons/bookmark-not.png') center center no-repeat; background: url('/assets/icons/bookmark-not.svg') center center no-repeat; background-size: contain; } .empty-state i.icon-bookmark { transform: translateY(4px); opacity: .8; margin-left: 2px; margin-right: 3px; } i.icon-bookmark-big { width: 28px; height: 33px; background: url('/assets/icons/bookmark-not.png') center center no-repeat; background: url('/assets/icons/bookmark-not.svg') center center no-repeat; background-size: contain; } i.icon-notifications { width: 21px; height: 24px; background: url('/assets/icons/notifications.png') center center no-repeat; background: url('/assets/icons/notifications.svg') center center no-repeat; background-size: contain; } i.icon-marker { width: 8px; height: 11px; background: url('/assets/icons/marker.svg') center center no-repeat; background-size: contain; } i.icon-teams-link { width: 18px; height: 16px; background: url('/assets/icons/teams-link.svg') center center no-repeat; background-size: contain; } i.icon-zoom-link { width: 16px; height: 16px; background: url('/assets/icons/zoom-link.svg') center center no-repeat; background-size: contain; } i.icon-chev-up-white { width: 10px; height: 6px; background: url(/assets/icons/chev-up-white.svg) center center no-repeat; background-size: contain; } i.icon-copy { width: 30px; height: 21px; background: url(/assets/icons/copy.svg) center center no-repeat; background-size: contain; transform: translateY(2px); cursor: pointer; } i.icon-download { width: 10px; height: 12px; background: url(/assets/icons/download.svg) center center no-repeat; background-size: contain; transform: translateY(2px); margin-right: 5px; } i.icon-my-notifications { width: 30px; height: 30px; /* background: url('/assets/icons/my-articles.png') center center no-repeat; background: url('/assets/icons/my-articles.svg') center center no-repeat; background-size: contain; */ /* temp mockup */ border: 1px solid #B5E8EE; border-radius: 50%; background-color: #B5E8EE; } /* SELECT COMPONENT */ .app-field-select { width: 100%; margin-left: 0; } .app-field-select label { width: 100%; } .app-field-select select { display: block; width: 100%; margin-top: 5px; font-size: 16px; line-height: 20px; color: #333; background-color: #fff; border: 1px solid #a3a3a3; border-radius: 2px; padding: 5px 10px; height: 36px; -webkit-appearance: none; background: #FFFEFE url('/assets/icons/chev-down.png') right 12px center no-repeat; background: #FFFEFE url('/assets/icons/chev-down.svg') right 12px center no-repeat; background-size: 10px 6px; cursor: pointer; line-height: 21px; padding-right: 40px; } .app-field-select .select-placeholder { color: #bebebe !important; } /*DATE PICKER COMPONENT*/ .app-field-date-picker { margin: 0; } .app-field-date-picker input { border: 1px solid #a3a3a3; border-radius: 2px; background-image: url('/assets/icons/calendar.png'); background-image: url('/assets/icons/calendar.svg'); background-size: 12px 14px; background-position: right 10px center; background-repeat: no-repeat; font-size: 14px; /* font-family: Helvetica,Arial,sans-serif; */ color: #333333; outline: none !important; box-shadow: none !important; border-color: #a3a3a3 !important; padding: 0; padding-left: 10px; padding-right: 25px; font-size: 14px; cursor: pointer; height: auto; min-height: 36px; width: 150px; } .app-field-date-picker input::placeholder, .event-subscribe *::placeholder { color: #bebebe; } .app-field-date-picker input::-webkit-input-placeholder { color: #bebebe; } .app-field-date-picker input:-ms-input-placeholder { color: #bebebe; } .moment-picker { z-index: 999999999999999999999 !important; } .moment-picker .disabled { cursor: default !important; } /* DATEPICKER (MOMENT-PICKER) */ .moment-picker { z-index: 999999999999999999999 !important; } .moment-picker th, .moment-picker td { font-size: 14px; color: #798494; line-height: 2em; margin-left: 3px; margin-right: 3px; text-shadow: none; /* font-family: Helvetica Neue,Helvetica,Arial,sans-serif; */ } .moment-picker .moment-picker-specific-views th { color: #505254; font-weight: 500; } .moment-picker td.disabled, .moment-picker td.disabled:hover, .moment-picker th.disabled, .moment-picker th.disabled:hover { color: rgba(121, 132, 148, 0.50); } .moment-picker td.today, .moment-picker td.highlighted { /* background: #d8d8d8!important; background-image: none; color: #fff; text-shadow: none!important; border-radius: 3px; */ background: none !important; } .moment-picker td.selected { background: #00afc3 !important; background-image: none; color: #fff; text-shadow: none !important; border-radius: 3px; } .moment-picker td:hover { background-image: none !important; background: #00afc3 !important; color: #fff !important; border-radius: 3px; font-weight: 400 !important; text-shadow: none !important; } .moment-picker th:hover { background-image: none !important; background: #78a9d4 !important; color: #fff !important; border-radius: 3px; } .moment-picker .header-view th, .moment-picker .header-view th:hover { background-image: none !important; color: #505254 !important; background: none !important; cursor: default; } .moment-picker .header-view th:first-child:not([disabled]), .moment-picker .header-view th:last-child:not([disabled]) { background: none; color: #fff !important; cursor: pointer; } .moment-picker .header-view th:not([disabled]) .leftArrow { display: inline-block; width: 10px; height: 10px; background: url('/assets/icons/cal-arrow-left.png') center center no-repeat; background: url('/assets/icons/cal-arrow-left.svg') center center no-repeat; background-size: contain; } .moment-picker .header-view th:not([disabled]) .rightArrow { display: inline-block; width: 10px; height: 10px; background: url('/assets/icons/cal-arrow-right.png') center center no-repeat; background: url('/assets/icons/cal-arrow-right.svg') center center no-repeat; background-size: contain; } .moment-picker .md-button.md-default-theme:not([disabled]).md-focused, .moment-picker .md-button:not([disabled]).md-focused, .moment-picker .md-button.md-default-theme:not([disabled]):hover, .moment-picker .md-button:not([disabled]):hover { background-color: #00afc3; } /**************/ /* LOGIN PAGE */ /**************/ .login-background { display: block; min-width: 100vw; /* min-height: 100vh; */ height: 100%; /* background: radial-gradient(circle, rgba(248,242,247,1) 0%, rgba(248,242,247,1) 0%, rgba(243,251,252,1) 100%); */ background: radial-gradient(circle, rgba(248, 242, 247, 1) 0%, rgba(243, 251, 252, 1) 50%); } .login-wrapper { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35); /* position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); */ max-width: 764px; margin: auto; margin-top: 10vh; margin-bottom: 5vh; width: 90%; background-color: #fff; } .login-wrapper.first-login-margins { margin-top: 5vh; } /* account locked */ .login-area--locked { min-height: 480px; color: #333333; } .login-area--locked .back { position: absolute; top: 32px; right: 20px; text-decoration: none !important; } .login-area--locked h1 { font-size: 29px; line-height: normal; } .login-area--locked img { width: 90px; } .login-area--locked p { margin-bottom: 7px; text-align: center; } .login-area--locked a { text-decoration: underline !important; } /* login login-area*/ .login-area { padding: 65px 79px; } .login-area h2 { font-size: 16px; font-family: 'Noto Serif JP', serif; font-weight: 900; line-height: 24px; margin-bottom: 11px; } .login-area h3 { font-size: 16px; font-weight: 300; color: #555; margin-bottom: 50px; } /* login forms*/ .login-field-wrapper { display: block; width: 100%; margin-bottom: 25px; } .login-field-wrapper label { width: 100%; color: #A3A3A3; } .login-field-wrapper label div { position: relative; padding-top: 0.5em; } .login-field-wrapper label div input { width: 100%; padding: 5px 0; font-size: 14px; color: #333; border: none; outline: none; filter: none; /*remove autofill style*/ } .login-field-wrapper label div input:-webkit-autofill { box-shadow: 0 0 0 30px white inset !important; -webkit-box-shadow: 0 0 0 30px white inset !important; } .login-field-wrapper label div input:-webkit-autofill~span { transform: translateY(-25px); } .login-field-wrapper label div span { display: block; position: absolute; top: 15px; left: 0; transition: transform 0.2s ease-in-out; cursor: text; } .login-field-wrapper label div input:focus~.float-label, .login-field-wrapper label div input:focus+span { transform: translateY(-25px); } .float-up { transform: translateY(-25px); } .login-field { border-bottom: 1px solid #333; display: flex; } .login-field:focus-within { border-bottom: 1px solid #00afc3; } .login-field:focus-within span { transform: translateY(-25px) !important; } .login-field-wrapper .login-show-password { text-align: right; color: #00afc3; font-size: 12px; text-decoration: none; padding-top: 8px; white-space: nowrap; } .login-show-password .show-hide { transform: none !important; transition: none !important; display: inline; } /* Password field fix mozilla*/ @supports (-moz-appearance:none) { .login-show-password { transform: translateX(-95px); } } /* .login .error-general { margin-left: 25px; line-height: 1.3; } */ .login .error-small { transform: translateY(-20px); } button:disabled, button[disabled], .disabled { opacity: .6; cursor: not-allowed !important; } .disabled-grayout { color: #a3a3a3 !important; cursor: not-allowed !important; } .not-allowed { cursor: not-allowed !important; } /* .errors span { display: block; font-size: 14px; font-weight: 300; color: #f8333c; margin-top: 7px; } .error-field { border-bottom: 1px solid #f8333c!important; } */ /* remember me checkbox */ .decline-request label, .terms-and-conditions label, .login-remember-wrapper label { display: block; position: relative; padding-left: 20px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .decline-request label input, .terms-and-conditions label input, .login-remember-wrapper label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark-square { position: absolute; top: 0; left: 0; height: 14px; width: 14px; background-color: #fff; border: 1px solid #000; } .checkmark-square:after { content: ""; position: absolute; display: none; } .decline-request input:checked~.checkmark-square:after, .terms-and-conditions input:checked~.checkmark-square:after, .login-remember-wrapper input:checked~.checkmark-square:after { display: block; } .decline-request .checkmark-square:after, .terms-and-conditions .checkmark-square:after, .login-remember-wrapper .checkmark-square:after { left: 4px; top: 1px; width: 4px; height: 9px; border: solid #000; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* forgot password */ .login-forgot-wrapper a { text-decoration: none; color: #555; float: right; } /* sign-in btn*/ .btn-sign-in { margin-top: 36px; min-width: 102px; background-color: #333; border: 1px solid #333; border-radius: 2px; font-size: 16px; color: #fff; padding-left: 20px; padding-right: 20px; cursor: pointer; transition: .2s ease; } .btn-sign-in:hover, .btn-sign-in:focus { background-color: #fff; color: #333; } /* request acc */ .login-no-acc-wrapper { margin-top: 40px; } .login-no-acc-wrapper span { color: #555; } .login-no-acc-wrapper span a { color: #333; text-decoration: underline; } /* login logo-area */ .purple-background { background-color: #9C4D94; } .max-height-100 { max-height: 100%; } .login-logo-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60px); } .login-logo-wrapper span { font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: 39px; color: #fff; } .login-logo-wrapper span:nth-child(2) { font-weight: 300; } .yellow-triangle { background-image: linear-gradient(to left top, #e6a519 0%, #e6a519 50%, transparent 50%); position: absolute; width: 100%; height: 33%; bottom: 0; right: 0; } .yellow-triangle img { position: absolute; bottom: 10%; right: 10%; max-width: 116px; max-height: 26px; } .login .language { display: block; /* position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); */ } /********************/ /* FIRST LOGIN PAGE */ /********************/ .first-login .login-area { padding: 55px 60px 50px 79px; } .login-remember-label { line-height: 18px; transform: translatey(-2px); display: block; } .first-login .app-field-select-underlined { margin-bottom: 30px; } .first-login .login-field-wrapper { margin-bottom: 30px; transform: translateX(-5px); } .first-login .login-field-wrapper:first-child { margin-right: 20px; } .first-login .login-field { border-bottom: 1px solid #a3a3a3; } .first-login .mobile { /* max-width: 110px; */ width: 40%; } .first-login .login-wrapper { max-width: 850px; } .first-login .app-password-requirement-field .login-field-wrapper { margin-bottom: 0; } .first-login .terms-and-conditions { transform: translateX(-5px); } .first-login .terms-and-conditions a { color: #333; text-decoration: underline; } .first-login .btn-sign-in { transform: translateX(-5px); } .first-login .email { margin-bottom: 30px; color: #a3a3a3; line-height: normal; } .first-login .email span { display: block; margin-top: 5px; color: #333; } /***************************/ /* FORGOT & RESET PASSWORD */ /***************************/ .forgot-password-img { display: block; width: 170px; height: 93px; background: url("/assets/images/password-reset.png") center center no-repeat; background: url("/assets/images/password-reset.svg") center center no-repeat; background-size: contain; } .forgot-password h1 { margin-top: 25px; font-size: 29px; line-height: normal; text-align: center; } .forgot-password p { margin-top: 15px; margin-bottom: 40px; color: #555; line-height: normal; text-align: center; } .forgot-password .login-field-wrapper { margin-bottom: 45px; } .forgot-password .btn-sign-in { margin-top: 0; } .forgot-password a { margin-left: 30px; font-size: 16px; color: #555; text-decoration: underline; transition: .2s ease; } .forgot-password a:hover { color: #333; } .forgot-password .password-requirements { margin-top: 10px; margin-right: 35px; } /*****************************/ /* FORGOT PASSWORD MAIL SENT */ /*****************************/ .forgot-password-mail-sent .forgot-password-mail-sent-img { display: block; width: 84px; height: 103px; background: url("/assets/images/newsletter.png") center center no-repeat; background: url("/assets/images/newsletter.svg") center center no-repeat; background-size: contain; } .forgot-password-mail-sent h1 { margin-top: 25px; margin-bottom: 15px; font-size: 29px; line-height: normal; } .forgot-password-mail-sent p { color: #555; line-height: normal; } /************************/ /* REQUEST ACCOUNT PAGE */ /************************/ .request-account-img { display: block; width: 170px; height: 93px; background: url("/assets/images/computer-locked.png") center center no-repeat; background: url("/assets/images/computer-locked.svg") center center no-repeat; background-size: contain; } .request-account-sent h1, .request-account h1 { margin-top: 25px; font-size: 29px; line-height: normal; text-align: center; } .request-account-sent p, .request-account p { margin-top: 15px; margin-bottom: 40px; color: #555; line-height: normal; text-align: center; } .request-account .inline-field { max-width: 45%; } .request-account .login-field-wrapper { margin-bottom: 40px; } .request-account .btn-sign-in { margin-top: 0; } .request-account a { margin-left: 30px; text-decoration: underline; font-size: 16px; line-height: normal; color: #555; } .request-account .language { display: block; } /*****************************/ /* REQUEST ACCOUNT SENT PAGE */ /*****************************/ .request-account-sent-img { display: block; width: 170px; height: 93px; background: url("/assets/images/request-account-sent.png") center center no-repeat; background: url("/assets/images/request-account-sent.svg") center center no-repeat; background-size: contain; } .request-account-sent p { margin-bottom: 0; } .request-account-sent a.btn.btn-sign-in { color: #fff; } .request-account-sent a.btn.btn-sign-in:hover, .request-account-sent a.btn.btn-sign-in:focus { color: #333; } /***************/ /* NEWSLETTERS */ /***************/ .overview-title-ellipsis { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .newsletters-overview .app-on-off-switch .btn-group { min-width: 66px; font-size: 11px; padding: 2px 5px; margin-top: 0; line-height: normal; } .newsletters-overview .table tbody tr { transition: .2s ease; } .newsletters-overview .table tbody tr:hover { cursor: pointer; opacity: .7; } .newsletters-overview .table td { color: #555; line-height: 2.25; } /* create & detail */ .newsletter-view { padding-top: 80px; } /* LANGUAGE TABS */ .language-tabs.fix-to-top { transform: translateY(40px); } .language-tabs { margin-top: 10px; transition: .2s ease; display: block; } .language-tabs a { display: block; font-size: 18px; color: #a3a3a3; text-decoration: none; margin-top: 32px; transition: 0.2s ease; position: relative; } .language-tabs a:first-child { margin-top: 0; } .language-tabs a::before { transition: .2s ease; content: ''; width: 2px; height: 100%; position: absolute; background: #9c4c94; left: -5px; opacity: 0; } .language-tabs>a.active::before, .language-tabs>a:hover::before { left: -15px; opacity: 1; } .language-tabs a.active, .language-tabs a:hover { color: #555 !important; } .language-tabs-absolute { position: absolute; margin: 0; top: 100%; margin-top: 40px; } .fix-to-top { position: fixed; top: 0; top: 40px; } .newsletter-detail .manage-menu { display: inline-block; } .newsletter-preview-info>div>span { color: #555555; font-size: 14px; margin-bottom: 8px; display: block; } .newsletter-preview-info>div>div>span { color: #555555; } .newsletter-preview-info { margin-left: 54px; } .newsletter-preview-info .link { font-size: 12px; line-height: 24px; } .newsletter-preview-info>div>div { color: #555555; font-size: 18px; margin-bottom: 30px; display: block; line-height: normal; } .newsletter-preview-info>div:last-of-type>div { margin-bottom: 0; } .newsletter-title { /* font-size: 24px; font-weight: 300; line-height: normal; */ font-weight: 400; margin-top: 12px; margin-bottom: 12px; font-size: 18px; line-height: normal; } .newsletter-title span { font-weight: 300; } .standard-fw { font-weight: 400 !important; } .newsletter-view iframe, .publish-newsletter-instant iframe { max-width: calc(100% - 2px); min-height: 500px; margin-bottom: 90px; border: 1px solid #DDD; box-sizing: initial; /* padding-top: 30px; padding-bottom: 60px; */ } /* .newsletter-view iframe, .publish-newsletter-instant iframe{ max-width: 100%; min-height: 500px; margin-bottom: 90px; border: 25px solid #f5f6f7; margin-top: 40px; box-sizing: initial; } */ .btn-modal-action { margin-top: 36px; min-width: 102px; background-color: #333; border: 1px solid #333; border-radius: 2px; font-size: 16px; color: #fff !important; padding-left: 20px; padding-right: 20px; cursor: pointer; transition: .2s ease; } .btn-modal-action:hover, .btn-modal-action:focus { background-color: #fff; color: #333 !important; } .btn-modal-action--cancel { background-color: #fff; color: #333 !important; } .btn-modal-action--cancel:hover, .btn-modal-action--cancel:focus { background-color: #333; color: #fff !important; } .btn-modal-action:hover i.icon-chev-right, .btn-modal-action:focus i.icon-chev-right { background: url('/assets/icons/btn-arrow-black.png') center center no-repeat; background: url('/assets/icons/btn-arrow-black.svg') center center no-repeat; background-size: contain; } .send-email-img { display: block; width: 170px; height: 93px; background: url("/assets/images/sent.png") center center no-repeat; background: url("/assets/images/sent.svg") center center no-repeat; background-size: contain; } .confirm-modal-img { display: block; width: 170px; /* height: 93px; */ } /***************/ /* TASK FORCES */ /***************/ .task-forces h1 { margin-top: 25px; font-size: 24px; font-weight: 300; line-height: normal; } .task-forces-search { width: 280px; } .task-forces-search input { width: 100%; height: 34px; border: none; background-color: #fff; background-image: url(/assets/icons/search-light.png); background-image: url(/assets/icons/search-light.svg); background-repeat: no-repeat; background-position: left center; background-size: 20px 20px; padding-left: 31px; font-size: 14px; font-family: 'Noto Sans JP', sans-serif; color: #333; border-bottom: 1px solid #dcdcdc; } .task-forces-search input::placeholder { color: #bebebe; } .task-forces-filter { height: 34px; color: #333; border-bottom: 1px solid #dcdcdc; margin-left: 40px; /* padding-right: 10px; */ cursor: pointer; } i.icon-search-filter { width: 16px; height: 16px; background: url('/assets/icons/search-filter.png') center center no-repeat; background: url('/assets/icons/search-filter.svg') center center no-repeat; background-size: contain; } .cards-container { margin-top: 30px; } .basic-card { color: #333; border-radius: 2px; box-shadow: 0 1px 4px 0 rgba(163, 163, 163, 0.5); text-decoration: none !important; transition: color .2s ease; } .basic-card:hover { color: #333; } .cards-container .card-tile { width: 23.5%; background: #f5f6f7; color: #333; margin-right: 2%; margin-bottom: 2%; padding: 30px 20px; } .cards-container .card-tile:hover { background: #f8f8f8; box-shadow: 0 1px 7px 0 rgba(163, 163, 163, 0.5); } .cards-container .card-tile .type { font-weight: 500; font-size: 12px; margin-bottom: 4px; } .cards-container .card-tile .title { font-weight: 500; font-size: 22px; line-height: 26px; margin-bottom: 7px; } .cards-container .card-tile .parent { font-size: 12px; margin-bottom: 7px; } .cards-container .card-tile .parent span:first-of-type { color: #999999; margin-right: 5px; } .cards-container .card-tile .parent span:last-of-type { color: #555555; } .cards-container .card-tile .updates { color: #555555; font-size: 12px; } .cards-container .card-tile .uptodate { color: #555555; font-size: 12px; } .cards-container .card-tile .members { margin-top: 20px; transform: translateX(6px); flex-wrap: wrap; margin-bottom: -5px; } .cards-container .card-tile .members .member { width: 32px; height: 32px; position: relative; display: block; margin-left: -6px; margin-bottom: 5px; /* z-index: 0; */ } .cards-container .card-tile .members .member img { border-radius: 16px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .cards-container .card-tile .members .member i { border-radius: 16px; position: absolute; top: 0; right: 0; z-index: 0; } .cards-container .card-tile:nth-of-type(4n) { margin-right: 0; } i.icon-update { width: 11px; height: 11px; background: url('/assets/icons/update.png') center center no-repeat; background: url('/assets/icons/update.svg') center center no-repeat; background-size: contain; margin-right: 3px; transform: translateY(1px) } i.icon-up-to-date { width: 11px; height: 12px; background: url('/assets/icons/up-to-date.png') center center no-repeat; background: url('/assets/icons/up-to-date.svg') center center no-repeat; background-size: contain; transform: translateY(1px); margin-right: 3px; } i.icon-parent { width: 9px; height: 13px; background: url(/assets/icons/parent.png) center center no-repeat; background: url(/assets/icons/parent.svg) center center no-repeat; background-size: contain; transform: translatey(2px); margin-right: 2px; } i.icon-chairman { width: 10px; height: 10px; position: relative; z-index: 1; background: url('/assets/icons/chairman.png') center center no-repeat; background: url('/assets/icons/chairman.svg') center center no-repeat; background-size: contain; } .recipientsModal .profile-picture i { border-radius: 16px; position: absolute; top: 0; right: 0; z-index: 0; } i.icon-chev-down-bold { width: 12px; height: 8px; background: url('/assets/icons/chev-down-bold.png') center center no-repeat; background: url('/assets/icons/chev-down-bold.svg') center center no-repeat; background-size: contain; margin-left: 6px; transform: translateY(3px); } /*********************/ /* TASK FORCE DETAIL */ /*********************/ .task-force-detail h1 { margin-top: 25px; font-size: 24px; font-weight: 300; line-height: normal; width: 100%; } .title-select { position: relative; z-index: 99; } .title-select .custom-dropdown .custom-dropdown-selected { border: none; border-radius: 0; background: none; padding: 0; font-size: 24px; cursor: pointer; min-height: 0; position: relative; z-index: 2; } .title-select.title-select-sm .custom-dropdown .custom-dropdown-selected { font-size: 14px; } .title-select .custom-dropdown .custom-dropdown-selected span { font-weight: 400; } .title-select.title-select-sm .custom-dropdown .custom-dropdown-selected span { margin-top: 5px; margin-bottom: 5px; white-space: nowrap; } .title-select .custom-dropdown .custom-dropdown-selected span.preValue { font-weight: 300; margin-right: 6px; } .title-select .custom-dropdown .custom-dropdown-options li span { font-weight: 400; } .title-select .custom-dropdown .custom-dropdown-options li span.preValue { font-weight: 300; margin-right: 5px; } .title-select .custom-dropdown .custom-dropdown-options { width: auto !important; white-space: nowrap; min-width: 100%; border: none; padding: 0; } .task-force-detail-search input { border-bottom: none; flex-grow: 1; } .task-force-detail-search a { white-space: nowrap; } .task-force-detail-search { width: auto; flex-grow: 1; } .sidebar { /* border-left: 1px solid #dcdcdc; */ margin-top: 30px; padding-left: 70px; min-height: 100px; position: relative; } .sidebar::after { content: ''; width: 1px; background: #dcdcdc; position: absolute; left: 0; top: 0; height: 100%; max-height: 700px; } .main-sidebar { margin-top: 30px; padding-right: 70px; } .underline { text-decoration: underline !important; } i.icon-chev-down-link { width: 8px; height: 5px; background: url('/assets/icons/chev-down-link.png') center center no-repeat; background: url('/assets/icons/chev-down-link.svg') center center no-repeat; background-size: contain; margin-left: 3px; transform: translateY(1px); transition: .2s ease; } i.icon-round-add { width: 48px; height: 48px; background: url('/assets/icons/round-add.png') center center no-repeat; background: url('/assets/icons/round-add.svg') center center no-repeat; background-size: contain; transform: translateY(3px); margin-left: 65px; cursor: pointer; } .task-force-detail-search-container { padding-bottom: 7px; border-bottom: 1px solid #dcdcdc; } .sidebar h3, .indent-title { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } .members-color { border-color: #00afc3 !important; } .agenda-color { border-color: #9c4c94 !important; } .documents-color { border-color: #e6a519 !important; } .sidebar>div>div>div { margin-bottom: 40px; } .sidebar>div>div>div:first-of-type { margin-bottom: 35px; } .sidebar .members { transform: translateX(6px); } .more-users { width: 32px; height: 32px; position: relative; display: block; margin-left: -6px; margin-bottom: 5px; z-index: 0; border-radius: 20px; background-color: #f8f2f7; border: 1px solid #9C4D94; border-radius: 50%; } .more-users span { font-size: 14px; display: block; width: 100%; text-align: center; text-decoration: none !important; color: #9C4D94 !important; text-transform: uppercase; } .sidebar .members .member { width: 32px; height: 32px; position: relative; display: block; margin-bottom: 5px; margin-left: -6px; /* z-index: -1; */ } .sidebar .members .member i { border-radius: 16px; position: absolute; top: 0; right: 0; z-index: 0; } .sidebar .members .member img { border-radius: 16px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .taskforce-empty-state { font-weight: 300; color: #a3a3a3; font-size: 16px; margin-top: 20px; } .agenda-month { color: #333; text-decoration: none !important; } .agenda-month:hover { color: #333; } .sidebar .agenda-month h4 { margin-top: 2px; margin-bottom: 14px; } .sidebar .agenda-month:first-of-type h4 { margin-top: -2px; } .agenda-day { font-family: 'Noto Serif JP', serif; font-weight: 500; color: #bebebe; font-size: 36px; padding-bottom: 3px; } .agenda-item-sm>div>span { margin-top: 4px; } .agenda-item-sm>div>span span { word-break: break-word; display: inline-block; } .agenda-item-sm>div>span.agenda-hour { margin-top: 0; color: #a3a3a3; font-size: 10px; } .date-passed { opacity: .5; } .agenda-item-sm>div { border-left: 2px solid #9c4c94; margin-left: 8px; padding-left: 6px; } .agenda-item-sm { margin-bottom: 20px; } .sidebar .show-all { margin-top: 25px; } .sidebar .attachment i.icon { width: 18px; height: 24px; margin-top: 3px; } .sidebar .attachment .file-name { font-size: 12px; margin-bottom: 4px; word-break: break-word; } .sidebar .file-name span span { line-height: 15px; } .sidebar .attachment .file-info { font-size: 10px; color: #a3a3a3; } .sidebar .attachment { border-bottom: 1px solid #dcdcdc; margin-bottom: 10px; padding-bottom: 10px; color: inherit; text-decoration: inherit; } .sidebar .attachment:last-of-type { margin-bottom: 0; } .bullet-tag { border: 1px solid; border-radius: 16px; padding: 2px 9px 4px 9px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 300; display: inline-block; transform: translateX(-4px) translatey(-2px); } .bullet-tag-orange { color: #ff9b0e; border-color: #ff9b0e; } .agenda-item-header h4 { font-family: 'Noto Serif JP', serif; font-weight: bold; margin-bottom: 8px; font-size: 16px; } .agenda-item-header span.passive { color: #a3a3a3; } .sep { font-size: 9px; transform: translatey(-2px); display: inline-block; margin-left: 1px; margin-right: 1px; color: #a3a3a3; } .optional-light { font-weight: 300; } .agenda-item-info { font-size: 16px; line-height: normal; } .reactions { margin-top: 20px; padding-left: 30px; padding-right: 30px; padding-top: 25px; padding-bottom: 30px; background: #f5f6f7; } .reaction-label { color: #555555; font-size: 18px; font-size: 14px; } .reaction-notify-selects label, .reaction-notify-selects .inline-select a { font-size: 14px !important; } .new-task-force-post .square-checkbox-container span, .new-task-force-post .inline-select a { font-size: 14px !important; } .new-task-force-post tags-input, .reactions tags-input { min-height: 73px; max-width: 513px; z-index: 999; border-radius: 2px; } .reactions tags-input .tags { border-radius: 2px; } .reactions h5 { font-weight: lighter; font-family: 'Noto Serif JP', serif; } .reactions .reaction, .editor--alt { background: #fff; padding: 15px; border-radius: 2px; box-shadow: 0 1px 3px 0 rgba(163, 163, 163, 0.3); width: 100%; margin-top: 20px; } body div .editor--alt { box-shadow: none !important; border: 1px solid #a3a3a3 !important; padding: 0 !important; margin-top: 0 !important; } body div .editor--alt .medium-editor-custom { padding-left: 10px !important; padding-top: 10px !important; padding-bottom: 15px !important; min-height: 120px !important; border: none !important; cursor: text !important; } body div .editor--alt .mime-toolbar { border: none !important; transform: translatey(1px) !important; border-top-right-radius: 0; border-top-left-radius: 0; } .reaction-form-container .reaction, .editor--alt { box-shadow: none !important; border: 1px solid #a3a3a3; padding: 0 !important; position: relative; width: 100%; margin-top: 20px; position: relative; } .editor--alt .mime-editor-textarea-wrapper { padding: 0; margin: 0; border: 0 !important; width: 100% !important; } .reaction-form-container { background: #fff; padding-right: 15px; border-radius: 2px; box-shadow: 0 1px 3px 0 rgba(163, 163, 163, 0.3); margin-top: 20px; padding-left: 54px; padding-top: 65px; padding-bottom: 20px; position: relative; } .reaction-label--content { margin-bottom: -12px; display: block; } .reaction-header>div { color: #555555; } .reaction-header .passive { font-size: 12px; color: #a3a3a3; } .reaction-content { font-weight: lighter; font-size: 16px; margin-top: 0; margin-bottom: 5px; } .reaction-content p { line-height: normal; } .attachment.attachment-md .icon { width: 32px; height: 43px; } .attachment.attachment-md .file-name { margin-bottom: 7px; font-weight: normal; font-size: 14px; } .attachment.attachment-md .file-info { color: #a3a3a3; } .reaction-header { margin-bottom: 15px; } .reaction-new { cursor: pointer; } .write-new-reaction { box-shadow: 0 2px 6px 0 rgba(163, 163, 163, 0.7) !important; padding: 0 !important; position: relative; cursor: default !important; } .write-new-reaction app-profile-picture { padding-top: 4px; position: absolute; z-index: 9; left: 15px; top: 15px; } .write-new-reaction-options { position: relative; } .write-new-reaction-options .mime-editor-file { padding-left: 0; border: none !important; } body .write-new-reaction .medium-editor-custom { padding-left: 10px !important; padding-top: 10px !important; padding-bottom: 15px !important; min-height: 120px !important; border: none !important; cursor: text !important; } .write-new-reaction .mime-toolbar { border: none !important; transform: translatey(1px) !important; border-top-right-radius: 0; border-top-left-radius: 0; } .reaction-new .write-reaction:empty:before { cursor: pointer !important; } .reaction-new.active .write-reaction:empty:before { cursor: text !important; } .reaction-new .write-reaction { font-size: 14px; min-width: 50%; padding-top: 7px; padding-bottom: 7px; line-height: normal; } .reaction-new .write-reaction::placeholder { color: #a3a3a3; } .reaction-new .write-reaction:empty:before { content: attr(data-ph); color: #BEBEBE; cursor: text; } .editing-reaction { background: none !important; box-shadow: none !important; padding: 0 !important; padding-bottom: 10px !important; } .document-item-header h4 { font-family: 'Noto Serif JP', serif; font-weight: bold; margin-bottom: 8px; } .document-item-header span.passive { color: #a3a3a3; } .document-item-info { font-size: 16px; line-height: normal; margin-top: 10px; } .document-item-document { margin-top: 15px; } /* action options */ .action-options { z-index: 1; min-width: 140px; display: block; transition: .2s ease; opacity: 0; right: -10px; pointer-events: none; position: absolute; background-color: #fff; border-radius: 3px; box-shadow: 0 1px 6px 0 rgba(163, 163, 163, 0.9); } i.icon-delete-sm { width: 12px; height: 12px; background: url('/assets/icons/delete-sm.png') center center no-repeat; background: url('/assets/icons/delete-sm.svg') center center no-repeat; background-size: contain; } i.icon-edit-sm { width: 12px; height: 12px; background: url('/assets/icons/edit-sm.png') center center no-repeat; background: url('/assets/icons/edit-sm.svg') center center no-repeat; background-size: contain; } i.attachment-icon { width: 16px; height: 16px; background: url('/assets/icons/attachment-icon.png') center center no-repeat; background: url('/assets/icons/attachment-icon.svg') center center no-repeat; background-size: contain; } .attachment-icon-block { position: absolute; display: inline-block !important; width: auto !important; height: auto; padding-left: 10px !important; padding-right: 10px; top: -36px; left: 248px; z-index: 999; } .attachment-files { padding-top: 12px; padding-bottom: 2px; } .attachment-files .file-name { color: #333333; font-size: 16px; margin-bottom: 6px; } .attachment-files .file-info-size { color: #a3a3a3; font-size: 14px; } .attachment-files .file-info-delete { color: #FF7383 !important; text-decoration: underline !important; font-size: 14px; } .attachment-files i.icon { width: 32px; height: 42px; } .inlineSpinner .spinner-wrapper { margin: 0; margin-top: 15px; margin-bottom: 15px; width: auto; display: inline-block; } .inViewSpinner .spinner-wrapper { margin-top: 30px; } .action-options.show-action-options { opacity: 1; pointer-events: all; } .action-options a { display: block; width: 100%; color: #555; font-size: 14px; line-height: normal; border-bottom: 1px solid #e3e3e3; padding: 8px 12px; transition: .2s ease; text-decoration: none; font-size: 12px; white-space: nowrap; } .action-options a:hover { background: #f5f5f5; } .action-options a.delete { color: #ff7383; } .action-options a i.icon { margin-right: 10px; transform: translateY(1px) } .advanced-toolbar { height: 0; transition: .2s ease; overflow: hidden; opacity: 0; transform: translateY(1px); } .advanced-toolbar.expanded { height: 35px; transform: translateY(-3px); overflow: visible; opacity: 1; position: relative; z-index: 9; } .rotate180 { transform: translateY(0) rotate(180deg) !important; } .custom-dropdown.advanced-toolbar-options .custom-dropdown-selected { border: none; background: none; padding-left: 0; padding-right: 30px; } .custom-dropdown.advanced-toolbar-options ul { border: none; padding-top: 0; padding-block-end: 0; box-shadow: 0 1px 6px 0 rgba(163, 163, 163, 0.9); top: calc(100% + 3px); width: auto; overflow: visible; overflow-y: visible; } .custom-dropdown.advanced-toolbar-options .custom-dropdown-options li { padding-left: 30px; padding-right: 10px; padding-top: 12px; padding-bottom: 12px; white-space: nowrap; border-bottom: 1px solid #e3e3e3; } .custom-dropdown.advanced-toolbar-options .custom-dropdown-options li.active { background: white !important; } .custom-dropdown.advanced-toolbar-options .custom-dropdown-options li.active:hover { background: #f5f5f5 !important } .no-background-hover { background: white !important } .icon-chev-down-black-sm { width: 9px; height: 6px; transform: translatey(2px); background: url(/assets/icons/chev-down-black.png) center center no-repeat; background: url(/assets/icons/chev-down-black.svg) center center no-repeat; background-size: contain; margin-left: 4px; } .custom-dropdown.advanced-toolbar-options ul::after { content: " "; position: absolute; bottom: 100%; left: 47px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #fff transparent; border-top: none; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 5px solid white; } .custom-dropdown.advanced-toolbar-options ul::before { content: " "; position: absolute; bottom: 100%; left: 47px; margin-left: -6px; border-style: solid; border-top: none; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 6px solid rgba(103, 103, 103, 0.2); } .custom-dropdown.advanced-toolbar-options label>span { font-size: 9px; font-weight: lighter; margin-bottom: 2px; } .custom-dropdown.advanced-toolbar-options .app-field-date-picker input { padding: 4px 5px; min-height: 0; font-size: 12px; width: 93px; background-position: right 6px center; } .icon-check-selected { width: 12px; height: 8px; background: url(/assets/icons/check-selected.png) center center no-repeat; background: url(/assets/icons/check-selected.svg) center center no-repeat; background-size: contain; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } .search-tag-container { margin-top: 8px; } .post-tag-container { margin-top: 12px; } .post-tags-view { margin-top: 12px; /* margin-bottom: 20px; */ margin-bottom: 10px; } div div .post-tags-view span { /* color: #555555 !important; background: #dcdcdc !important; */ color: #AF6FA9 !important; background: #F8F2F7 !important; font-weight: 300 !important; padding: 1px 8px 3px 8px !important; font-size: 14px !important; border-radius: 5px !important; margin-right: 7px !important; cursor: default; } .inline-select-sm .inline-select { padding-top: 8px; } .post-tag>span { font-size: 14px; transform: translatey(2px); color: #555555; line-height: 18px; } .post-tag { /* padding: 2px 2px 2px 8px !important; */ padding: 0px 4px 5px 7px !important; border-radius: 5px !important; font-weight: 300; } tags-input .tags .tag-item { color: #555555 !important; background: #dcdcdc !important; font-weight: 300 !important; padding: 1px 6px 2px 8px !important; font-size: 14px !important; border-radius: 5px !important; margin-right: 7px !important; } tags-input .tags .tag-item span { color: #555555 !important; } tags-input .tags .tag-item .remove-button { margin-left: 1px !important; } .post-tag .tag-amount { font-style: unset; background: #555555; color: white; font-size: 9px; min-width: 16px; padding-left: 4px; padding-right: 4px; height: 16px; border-radius: 8px; text-align: center; line-height: 16px; transform: translatey(4px); font-weight: 500; } .search-tag { border-radius: 20px; border: 1px solid #555555; color: #555555; font-size: 11px; padding: 3px 4px 3px 8px; cursor: pointer; transition: .2s ease; margin-right: 8px !important; margin-bottom: 6px !important; } .search-tag.disabled { cursor: pointer !important; opacity: .5 !important; } .search-tag>span { display: block; /* transform: translatey(-1px); */ } .search-tag.disabled i.icon-toggle-cross { transform: rotate(45deg); } i.icon-toggle-cross { width: 12px; height: 12px; background: url('/assets/icons/toggle-cross.png') center center no-repeat; background: url('/assets/icons/toggle-cross.svg') center center no-repeat; background-size: contain; transition: .2s ease; } .card-tile-document { width: 17.6%; margin-right: 3%; margin-bottom: 3%; box-shadow: 0 1px 5px 0 rgba(163, 163, 163, 0.8); transition: .3s ease; } .card-tile-document:hover { background: #fdfdfd !important; box-shadow: 0 1px 8px 0 rgba(163, 163, 163, 1); } .card-tile-document i.icon { width: 38px; height: 50px; } .card-tile-document:nth-of-type(5n) { margin-right: 0; } .tile-attachment { min-height: 115px; padding-top: 10px; padding-bottom: 10px; } .tile-attachment div { font-size: 12px; font-weight: 500; word-wrap: break-word; overflow: hidden; display: inline-block; word-break: break-all; padding-left: 7px; padding-right: 7px; line-height: 15px; text-align: center; } .tile-attachment span { font-size: 8px; color: #a3a3a3; } .tile-attachment span span { font-size: 8px; font-weight: lighter; } .tile-attachment-footer { background: #f5f6f7; padding: 5px 10px; font-size: 10px; } .tile-attachment-footer span { color: #555555; } .tile-attachment-footer span span { font-weight: lighter; } .card-tile-agenda { width: 31.42%; margin-right: 2.5%; margin-bottom: 2.7%; box-shadow: 0 1px 5px 0 rgba(163, 163, 163, 0.8); transition: .3s ease; } .card-tile-agenda:hover { background: #fdfdfd !important; box-shadow: 0 1px 8px 0 rgba(163, 163, 163, 1); } .card-tile-agenda:nth-of-type(3n) { margin-right: 0; } .card-tile-agenda .agenda-item-sm { padding-left: 10px; padding-right: 10px; margin-bottom: 10px !important; margin-top: 10px !important; } section.agenda-month h2 { color: #333333; font-size: 24px; font-weight: 500; } .agenda-month-container { margin-top: 35px; margin-bottom: 20px; } .new-task-force-post { background: #f3fbfc; transition: opacity .4s ease !important; } .new-task-force-post-active { margin-top: 20px !important; padding: 25px 15px !important; padding-bottom: 30px !important; } .new-task-force-post h2 { color: #333333; font-size: 24px; } .new-task-force-post>div { margin-top: 30px; } .meeting-settings .btn-standard { padding: 2px 10px; min-width: 0; font-size: 14px; margin-right: 10px; } .meeting-settings .cancel { font-size: 14px; } .meeting-settings { padding: 10px !important; margin-top: -8px; padding-top: 8px !important; } .meeting-settings .newsletter-settings-on, .meeting-settings .appToggle label span { font-size: 15px; } .meeting-settings .newsletter-settings-on { font-size: 15px !important; transform: translatey(1px); } .event-dates-list i.icon-toast-close { width: 6px; height: 6px; cursor: pointer; transform: translateY(1px); display: inline-block; } .event-dates-list { font-size: 14px; font-weight: 300; margin-left: 18px; } .event-dates-list li:before { content: "·"; font-size: 26px; vertical-align: middle; line-height: 18px; transform: translatey(-1px); display: inline-block; } .divTime { text-align: center; padding-top: 32px; padding-left: 7px; padding-right: 7px; } body div .noMarginR { margin-right: 0 !important; } /* import attendees */ .attendee-dropzone-wrap { margin-top: 32px; } .attendee-dropzone-wrap .info-text { margin-top: 3px; color: rgb(159 159 159); font-size: 12px; line-height: normal; } .attendee-dropzone-wrap .link { text-decoration: none; } .attendee-dropzone-wrap .link:hover { text-decoration: underline; } .attendee-dropzone-wrap .attendee-table { margin-bottom: 2px; } .attendee-dropzone-wrap .attendee-table .table-wrap { background-color: #f8f8f8; overflow-y: auto; max-height: 400px; } .attendee-dropzone-wrap .attendee-table .table-wrap table { margin-bottom: 4px; } .attendee-dropzone-wrap .attendee-table .table-wrap table th { border-top: none; } .attendee-dropzone-wrap .error {} body div .attendee-dropzone-wrap .attendee-dropzone { display: flex !important; background-color: #ededed; width: 360px; text-align: center; font-weight: 300; width: 465px; height: 220px; background-size: cover; background-position: center center; position: relative; width: 100%; height: auto; padding: 24px; padding-bottom: 28px; margin: auto; } .replace-thumbnail-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.35); z-index: 9; color: white; opacity: 0; transition: .2s ease; cursor: pointer; } .attendee-dropzone-wrap .attendee-dropzone span.label { margin: 0; font-weight: 400; font-size: 18px; color: #555; line-height: normal; } .attendee-dropzone-wrap .attendee-dropzone span.or { display: block; font-size: 16px; color: #555; line-height: normal; text-align: center; margin-top: 2px; margin-bottom: 8px; } .attendee-dropzone-wrap .attendee-dropzone button { margin: 0 !important; padding: 4px 13px !important; padding-bottom: 5px !important; } .attendee-dropzone-wrap .attendee-dropzone .formats span { color: #555555; font-size: 12px; } /* invited attendee */ .invitation { padding: 20px 25px 23px 25px; background: #f3fbfc; margin-top: 12px; } .invitation h3 { color: #5E5E5E; font-size: 18px; margin-bottom: 8px; } .invitation p { color: #5E5E5E; font-size: 14px; margin-bottom: 13px; line-height: 1.3; } .invitation a { transition: .15s ease; } .invitation a:hover { opacity: .9; } /* attendees */ .attendees { height: 27px; } .attendees-emptystate { color: #a3a3a3; font-size: 10px; } .attendee-group { border-left: 1px solid #EDEDED; margin-left: 9px; padding-left: 9px; cursor: pointer; } .attendee-group .amount { font-size: 16px; } .attendee-group .amount>span:first-of-type { line-height: 13px; } .attendee-group .passive { font-size: 10px; line-height: 10px; color: #a3a3a3; } .attendee-group.confirmed .amount { color: #1ec180; } .attendee-group.maybe .amount { color: #ff9b0e; } .attendee-group.declined .amount { color: #ff7383; } .attendee-group.awaiting .amount { color: #a3a3a3; } .attendee-pictures { margin-left: 9px; } .attendee-pictures .member { margin-left: -8px; } .attendee-pictures .more-users { width: 24px; height: 24px; margin: 0; margin-left: -8px; cursor: pointer; } .attendee-pictures .more-users span { font-size: 10px !important; } /* /attendees */ /* teams */ i.icon-teams { width: 15px; height: 16px; background: url('/assets/icons/icon-teams.png') center center no-repeat; background: url('/assets/icons/icon-teams.svg') center center no-repeat; background-size: contain; } i.icon-teams-inactive { width: 15px; height: 16px; background: url('/assets/icons/icon-teams-inactive.png') center center no-repeat; background: url('/assets/icons/icon-teams-inactive.svg') center center no-repeat; background-size: contain; } .inline-button { padding: 4px 11px; transform: translatey(1px); font-size: 12px; border-radius: 3px; background-color: #1ec180; cursor: pointer; color: white !important; transition: .2s ease; text-decoration: none !important; } .inline-button--disabled { color: #a3a3a3 !important; border: 1px solid #a3a3a3 !important; background-color: white; cursor: pointer; } .inline-button:hover { opacity: .8; } /* /teams */ .tags-input .host { margin-top: 0 !important; } .new-task-force-post>div>label { margin-bottom: 12px; margin-bottom: 8px; color: #555555; font-size: 18px; font-size: 14px; } .checkmark-square-round { height: 18px; width: 18px; border-radius: 3px; border: 1px solid #555555; background: white; display: inline-block; } .new-task-force-post .checkmark-square-round, .reaction-notify-selects .checkmark-square-round { height: 14px; width: 14px; border-radius: 2px; } .square-checkbox-container .checkmark-square-round:after, .new-task-force-post .checkmark-square-round:after, .reaction-notify-selects .checkmark-square-round:after { left: 3px; top: 4px; width: 8px; height: 4px; } .checkmark-square-round:after { content: ""; position: absolute; display: none; } input:checked~.checkmark-square-round:after { display: block; } input:checked~.checkmark-square-round { background: #555555; } .checkmark-square-round:after { left: 4px; top: 4px; width: 10px; height: 6px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg) scaleX(-1); -ms-transform: rotate(45deg) scaleX(-1); transform: rotate(-45deg) scaleX(-1); } .inline-select.active, .zindex { position: relative; z-index: 9999; } .hide-checkbox { pointer-events: none; opacity: 0; visibility: hidden; width: 0; height: 0; } .square-checkbox-container { margin-bottom: 12px; color: #555555; font-size: 18px; cursor: pointer; } .height-show { height: auto !important; } .height-hide { height: 0; margin: 0; padding: 0; } .new-task-force-post .medium-editor-custom, .editor--alt-container .medium-editor-custom { width: 100%; min-height: 100px; background: white; border: 1px solid #a3a3a3; border-radius: 2px; padding: 7px 10px !important; font-size: 14px !important; } .editor--alt-container .medium-editor-custom ol, .new-task-force-post .medium-editor-custom ol, .reaction-content ol, .post-descr ol { list-style: decimal; } .editor--alt-container .medium-editor-custom ul, .new-task-force-post .medium-editor-custom ul, .reaction-content ul, .post-descr ul { list-style: disc; } .editor--alt-container .medium-editor-custom ul, .new-task-force-post .medium-editor-custom ul, .new-task-force-post .medium-editor-custom ol, .reaction-content ul, .reaction-content ol, .post-descr ul, .post-descr ol { font-size: 18px; line-height: 26px; margin-bottom: 5px; margin-top: 5px; margin-left: 35px; } .new-task-force-post p, .post-descr p { margin-bottom: 7px; } .post-descr, .reaction-content { word-break: break-word; } .post-descr, .post-descr p, .post-descr span, .post-descr ol, .post-descr ul, .post-descr td, .reaction-content, .reaction-content p, .reaction-content ol, .reaction-content ul, .reaction-content td, .reaction-content span { line-height: normal; /* font-size: 16px !important; */ font-size: 14px !important; font-weight: normal; } .editor--alt-container .medium-editor-custom, .editor--alt-container .medium-editor-custom p, .editor--alt-container .medium-editor-custom ol, .editor--alt-container .medium-editor-custom ul, .editor--alt-container .medium-editor-custom td, .new-task-force-post .medium-editor-custom, .new-task-force-post .medium-editor-custom p, .new-task-force-post .medium-editor-custom ol, .new-task-force-post .medium-editor-custom ul, .new-task-force-post .medium-editor-custom td { line-height: normal; font-size: 14px !important; font-weight: normal; } .reaction-content a { color: #00afc3; } .reaction-content, .reaction-content p, .reaction-content ol, .reaction-content ul, .reaction-content td { font-weight: lighter !important; } .post-descr a { color: #00afc3; } .new-task-force-post .mime-editor-textarea-wrapper, .new-task-force-post .mime-editor-file { padding: 0; margin: 0; border: 0 !important; } .editor--alt-container .mime-editor-textarea-wrapper .mime-toolbar, .new-task-force-post .mime-editor-textarea-wrapper .mime-toolbar { position: relative !important; opacity: 1 !important; margin: 0; transform: translateY(-3px); border: 1px solid #a3a3a3; border-top: transparent; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; width: 100% !important; } .editor--alt-container .medium-editor-placeholder:after, .new-task-force-post .medium-editor-placeholder:after { content: attr(data-placeholder) !important; white-space: pre; padding: inherit; margin: inherit; font-style: normal; font-size: 14px; color: #bebebe; } .editor--alt-container .medium-editor-toolbar, .new-task-force-post .medium-editor-toolbar { transform: translatey(-1px); } .new-task-force-post ul, .new-task-force-post ol { font-size: 14px !important; line-height: normal; } .app-field-time input { /* font-family: Helvetica,Arial,sans-serif; */ color: #333333; outline: none !important; box-shadow: none !important; border-color: #a3a3a3 !important; padding: 0; padding-left: 10px; padding-right: 10px; font-size: 14px; height: auto; min-height: 36px; border: 1px solid #a3a3a3; border-radius: 2px; width: 100%; max-width: 70px; } .app-field-time i { font-style: normal; transform: translateY(-1px); } .app-field-time>label>span { color: #555555; font-size: 13px; } /************************/ /* USER MANAGEMENT PAGE */ /************************/ .user-management h1, .newsletters-overview h1 { font-size: 24px; font-weight: 300; line-height: normal; } .user-management .access-requests-user-management, .newsletters-overview h1 { margin-bottom: 35px; } .user-management .access-requests-user-management h1, .newsletters-overview h1 { margin-top: 25px; margin-bottom: 25px; } .user-management tr, .newsletters-overview tr { padding: 12px 0; } .user-management .btn { margin-top: 0; } .extranet-table th.sortable { cursor: pointer; white-space: nowrap; } .extranet-table th.sortable i { width: 8px; height: 12px; background: url(/assets/icons/sorting/none.svg) center center no-repeat; background-size: contain; display: inline-block; margin-left: 6px; transform: translatey(.5px); } .extranet-table th.sortable.asc i { background: url(/assets/icons/sorting/asc.svg) center center no-repeat; background-size: contain; } .extranet-table th.sortable.desc i { background: url(/assets/icons/sorting/desc.svg) center center no-repeat; background-size: contain; } .extranet-table .table th, .user-management .table th, .newsletters-overview .table th { border-top: none; font-family: 'Noto Serif JP', serif; font-weight: 600; } .extranet-table .table td, .user-management .table td, .newsletters-overview .table td { color: #555; } .extranet-table .table th, .extranet-table .table td, .user-management .table th, .user-management .table td, .newsletters-overview .table th, .newsletters-overview .table td { border-bottom: 1px solid #a3a3a3; font-size: 16px; } .extranet-table .table tr td:first-child, .user-management .table tr td:first-child, .newsletters-overview .table tr td:first-child { padding-left: 0; color: #333; } .extranet-table .table tr td { line-height: 1.25; /* vertical-align: top; */ } .extranet-table .table td td:last-child, .user-management .table tr td:last-child, .newsletters-overview .table tr td:last-child { padding-right: 0; } .extranet-table .table tr td:first-child, .user-management .table tr th:first-child, .newsletters-overview .table tr th:first-child { padding-left: 0; } .extranet-table .table.btn-standard, .user-management .table .btn-standard, .newsletters-overview .table .btn-standard { margin-right: 10px; } .btn-standard { min-width: 100px; text-align: center; } .user-management .users h1, .newsletters-overview .users h1 { padding-top: 25px; margin-bottom: 25px; } .user-search { width: 843px; padding: 15px 10px 15px 36px; margin-bottom: 8px; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: 0; background-size: 27px 27px; font-size: 16px; line-height: normal; color: #555; border: none; border-bottom: 1px solid #dcdcdc; } .user-search::placeholder { color: #bebebe; } .user-management .search-tabs { margin-top: 0; border: none; } .press-clippings-page .search-tabs { margin-top: 0; margin-bottom: 20px; border: none; } .user-management .users .table { margin-top: 30px; } .user-management .user-options { width: 200px; display: none; position: absolute; top: -60px; left: 50%; transform: translateX(-51%); background-color: #fff; border-radius: 3px; box-shadow: 0 3px 8px 0 rgba(163, 163, 163, 0.7); } .extranet-table .options { width: 200px; display: none; position: absolute; top: unset; bottom: calc(100% - 15px); left: 50%; transform: translateX(-51%); background-color: #fff; border-radius: 3px; box-shadow: 0 3px 8px 0 rgba(163, 163, 163, 0.7); } .extranet-table .options.inactive-options, .user-management .user-options.inactive-user-options { top: -17px; } .extranet-table .options::after, .user-management .user-options::after { content: ""; display: block; position: absolute; bottom: -6px; left: 50%; transform: translateX(-25%); width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #fff transparent transparent transparent; } .extranet-table .options.show-options, .user-management .user-options.show-user-options { display: block; } .extranet-table .options a, .user-management .user-options a { display: block; width: 100%; color: #555; font-size: 14px; line-height: normal; border-bottom: 1px solid #e3e3e3; padding: 10px 15px; transition: .2s ease; text-decoration: none; } .extranet-table .options a:last-child, .user-management .user-options a:last-child { border: none; } .extranet-table .options .deactivate, .user-management .user-options .deactivate { color: #ff7383; } .extranet-table .options .activate, .user-management .user-options .activate { color: #5cb85c; } .user-management .user-options a:hover { background-color: #f1f1f1; color: #333; } .extranet-table .options a:hover { color: #333; background-color: #f1f1f1; } .extranet-table .options .deactivate:hover, .user-management .user-options .deactivate:hover { color: #ff7383; } .extranet-table .options .activate:hover, .user-management .user-options .activate:hover { color: #5cb85c; } .user-management .inactive-user td span { color: #a3a3a3; } .user-management .empty-state { margin-top: 30px; margin-bottom: 30px; } .user-management .empty-state { font-size: 18px; line-height: normal; font-weight: 300; color: #a3a3a3; } /***********************/ /* ACCESS REQUEST PAGE */ /***********************/ .access-request h1 { font-size: 24px; font-weight: 300; line-height: normal; margin: 25px 0; } .access-request h1:last-child { margin-top: 60px; } .access-request label span { color: #555; font-weight: 300; } .access-request a { margin-left: 20px; font-size: 16px; color: #555; text-decoration: underline; transition: .2s ease; } .access-request a:hover { color: #333; } .access-request .subscription-pack { margin-bottom: 30px; margin-top: 5px; } .access-request .icon-up-to-date, .event-subscribe--modal .icon-up-to-date { margin: 0 10px; } .access-request .subscription-pack span { margin-right: 5px; } .access-request p { font-size: 16px; color: #555; font-weight: 300 !important; line-height: normal; margin-bottom: 30px; } .access-request .error-typeahead { transform: translateY(-35px); } /************************/ /* DECLINE REQUEST MODAL */ /************************/ .decline-request h1 { margin-top: 17px; margin-bottom: 10px; font-size: 29px; line-height: normal; text-align: center; } .decline-request p { margin-bottom: 25px; color: #555; line-height: normal; text-align: center; } .decline-request textarea { width: 100%; resize: none; padding: 10px; } .decline-request .btn-white { margin-top: 36px; margin-left: 20px; } .decline-request .btn-soft-red { margin-right: 10px; } .decline-request .decline-btns { margin-top: 15px; } .decline-request-img { display: block; width: 58px; height: 72px; background: url("/assets/images/decline-access.png") center center no-repeat; background: url("/assets/images/decline-access.svg") center center no-repeat; background-size: contain; } /* custom anchor modal */ .custom-anchor-modal i.icon-plus-circle { transform: translatey(1px); } .custom-anchor-modal .fileName { font-size: 14px; display: block; margin-top: 3px; margin-bottom: -3px; } /***********/ /* TOOLBAR */ /***********/ .service-menu>li { margin-left: 30px; } .pxdown-1 { transform: translatey(1px); } .toolbar { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid #dcdcdc; background-color: #fff; } /* .toolbar .container img { width: 160px; height: 40px; } */ .toolbar .extranet-logo { display: block; width: 160px; height: 40px; background: url("/assets/images/logo-extranet.png") center center no-repeat; background: url("/assets/images/logo-extranet.svg") center center no-repeat; background-size: contain; } .toolbar .pharma-be-logo-header { display: block; width: 186px; height: 42px; transform: translatey(2px); background: url("/assets/images/pharma-be-logo-header.svg") center center no-repeat; background-size: contain; } .app-events .toolbar, .app-newsletters .toolbar { top: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; } .app-events .backlink { width: 100%; transform: translatey(32px); } /* .event--readonly .post-page-container{ max-width: 100%; } */ .app-events .events-overview>.container { padding-top: 28px; padding-bottom: 28px; } .toolbar .container .service-menu li .avatar { width: 40px; height: 40px; background-position: center; background-size: 40px 40px; } .navigation-wrapper { padding-top: 18px; } .navigation-wrapper .navigation li { margin-right: 50px; } .navigation-wrapper .navigation li a, .navigation-wrapper .navigation li span { color: #333; font-size: 18px; cursor: pointer; text-decoration: none; transition: 0.2s ease; line-height: 20px; } .navigation-wrapper .navigation li a.active { border-bottom: 2px solid #333; } .activeState { border-bottom: 2px solid #333; } .navigation-wrapper .navigation li a:hover, .navigation-wrapper .navigation li span:hover, .navigation-wrapper .navigation .dropdown-link:hover>span { color: #656565; } .navigation-wrapper .navigation .dropdown-link:hover:after { content: ''; display: block; position: absolute; top: 0; height: 30px; width: 80px; box-sizing: border-box; cursor: pointer; } .navigation-wrapper .navigation li a:focus { border-bottom: 2px solid #333; } /* topics submenu */ .toolbar .container .navigation-wrapper .topics-submenu { width: 100vw; min-height: 250px; max-width: 1340px !important; position: absolute; top: 25px; left: 50%; transform: translateX(-50%); background-color: #F5F6F7; box-shadow: 0 4px 5px 0 rgba(163, 163, 163, 0.44); box-sizing: border-box; margin: 0 !important; z-index: 99999; } .topic:not(:first-child) { margin-top: 30px; } .topics-submenu .topic h3 { font-size: 16px; margin-bottom: 7px; } .topics-submenu .topics-wrapper .topic h3 a { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 600; text-decoration: none; color: #333; } .topics-submenu .topics-wrapper { padding-top: 30px; padding-bottom: 30px; } .topic .subtopics li { margin-bottom: 10px; } .topic .subtopics li a { font-size: 14px; font-weight: 300; line-height: normal; color: #555; cursor: pointer; text-decoration: none; } .topic { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; margin: 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; display: table; } .wrap-topics-all { position: relative; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .wrap-topics-my { position: relative; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; display: inline-block; width: 70%; padding-top: 0; margin-top: 0; } .my-topics-search-wrapper { margin-top: 30px; height: 180px; padding-left: 15px; padding-bottom: 20px; border-left: 1px solid #dcdcdc; } .my-topics-search-form { background-color: #e8ecf0; padding: 11px 15px 15px 15px; margin-bottom: 20px; } .my-topics-search-form h3 { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 600; color: #333; padding-bottom: 6px; } .my-topics-search-form .my-topics-search { width: 304px; height: 32px; border: 1px solid #bebebe; border-radius: 3px; margin-bottom: 11px; background-image: url('/assets/icons/search.png'); background-image: url('/assets/icons/search.svg'); background-repeat: no-repeat; background-position: 10px; background-size: 20px 20px; padding-left: 40px; } .my-topics-search-form button { padding: 5px 25px; font-size: 16px; font-weight: 500; color: #fff; background-color: #00afc3; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.31); border-radius: 2px; text-transform: uppercase; } .my-topics-search-form button:hover, .my-topics-search-form button:focus { color: #fff; background-color: #23aaba; } .my-topics-search-wrapper .my-topics-search-form a { font-size: 12px !important; color: #00afc3 !important; text-decoration: none; cursor: pointer; } .my-topics-search-wrapper a { font-size: 14px !important; font-weight: 300; color: #333333; text-decoration: none; cursor: pointer; } /* empty-state myTopics */ .empty-interests { text-align: center; } .empty-interests h1 { font-size: 26px; line-height: normal; } .empty-interests p { margin-top: 13px; font-size: 16px; font-weight: 300; line-height: normal; } .empty-interests .btn-standard { margin-top: 25px; padding: 5px 30px; font-size: 16px; font-weight: 500; line-height: normal; text-transform: uppercase; } .toolbar .privacy-language { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* notifications dropdown */ .profile-section a i .notification-circle, .service-menu li i .notification-circle { position: absolute; right: -2px; width: 10px; height: 10px; border: 2px solid #e17575; background-color: #cf2525; border-radius: 50%; } .profile-section i.icon-user-management .notification-circle, .service-menu i.icon-user-management .notification-circle { top: -4px; left: 15px; } .toggle-notifications { cursor: pointer; } .notifications-wrapper { position: relative; } .notifications { position: absolute; top: 15px; right: -57px; width: 300px; padding: 10px 20px; box-shadow: 0 4px 5px 0 rgba(163, 163, 163, 0.7); background-color: #fff; z-index: 1; } /* pijltje textballon */ .notifications:before, .notifications:after { content: ' '; display: block; border-style: solid; border-width: 0 .5em .8em .5em; border-color: transparent; position: absolute; left: 225px; } .notifications:before { top: -.8em; border-bottom-color: #D9D9D9; } .notifications:after { top: -.7em; border-bottom-color: #fff; } .notifications a { position: relative; display: block; border-bottom: 2px solid #EBEBEB; font-size: 12px; color: #555; text-decoration: none; padding-top: 10px; padding-bottom: 30px; } .notifications a:last-child { border: none; } .notifications a .notification-timestamp { color: #7E7E7E; position: absolute; bottom: 10px; right: 5px; } .profile-dropdown { position: absolute; left: -255px; top: 55px; display: block; width: 300px; z-index: 9999; background-color: #fff; box-shadow: 0 2px 7px 1px rgba(163, 163, 163, 0.7); } .profile-dropdown .user-section { border-bottom: 1px solid #e3e3e3; padding: 15px; } .profile-dropdown .user { margin-left: 15px; } .profile-dropdown .user span { color: #555; font-size: 18px; line-height: normal; } .profile-dropdown img { display: block; width: 70px !important; height: 70px !important; } .profile-dropdown .btn.btn-white { margin-top: 5px; font-size: 14px; padding: 5px 10px; } .profile-dropdown a { display: block; font-size: 16px; line-height: normal; color: #555; } .profile-dropdown .interests-section, .profile-dropdown .admin-section { padding: 15px 20px; border-bottom: 1px solid #e3e3e3; } .profile-dropdown .icon { transform: translateY(2px); } .profile-dropdown .logout { padding: 10px 20px; color: #a3a3a3; } /* arrow */ .profile-dropdown:before, .profile-dropdown:after { content: ' '; display: block; border-style: solid; border-width: 0 .5em .8em .5em; border-color: transparent; position: absolute; left: 270px; } .profile-dropdown:before { top: -.8em; border-bottom-color: #fff; } .profile-dropdown:after { top: -.7em; border-bottom-color: #fff; } /* tooltip */ .app-tooltip { display: inline-block; cursor: pointer; position: relative; transition: .1s ease; } .tooltip { pointer-events: none; opacity: 0; transition: .3s ease; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); background: #333; /* padding: 3px 10px; */ padding: 1px 10px 3px 10px; border-radius: 7px } .app-tooltip:hover .tooltip { opacity: 1; pointer-events: all; } .app-tooltip span { color: #fff !important; font-family: 'Noto Sans JP', sans-serif; font-weight: 300; font-size: 16px; white-space: nowrap; } .regular-text { color: #333; text-decoration: none !important; } .regular-text:hover { color: #333; text-decoration: none !important; } /* animations */ @keyframes slideUpToolbar { from { top: 0 } to { top: -107px } /* to { top: -162px } */ } @keyframes slideDownToolbar { /* from { top: -162px } */ from { top: -107px } to { top: 0 } } .slide-up-toolbar { animation: slideUpToolbar .5s 1 forwards; } .slide-down-toolbar { animation: slideDownToolbar .5s 1 forwards; } .toolbar .toolbar-search input::-ms-clear { display: none; } /**************/ /* SEARCH-BAR */ /**************/ /* animations */ @keyframes slideUpSearch { from { top: 107px } to { top: -55px } } @keyframes slideDownSearch { from { top: -55px } to { top: 107px } } .slide-up-search { animation: slideUpSearch .5s 1 forwards; } .slide-down-search { animation: slideDownSearch .5s 1 forwards; } .fixed-offset { top: 107px; } .search-bar { border-bottom: 1px solid #dcdcdc; background-color: #fcfcfc; z-index: 99; } .search-bar .container input { width: 100%; height: 54px; border: none; background-color: #fcfcfc; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: left center; background-size: 32px 32px; padding-left: 55px; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; color: #333; } .search-bar ::placeholder { color: #bebebe; } .search-bar :-ms-input-placeholder { color: #bebebe; } .search-bar ::-ms-input-placeholder { color: #bebebe; } /*************/ /* HOME PAGE */ /*************/ .home, .topic-page { padding-top: 55px; } .home a { color: #333; } /* SPOTLIGHT */ .spotlight-sub { margin-top: 40px; } /* DAILY NEWS */ .daily-news-link { display: block; } .daily-news-link:hover img { opacity: .85; } .daily-news-link img { width: 100%; margin: auto; /* max-width: 370px; */ /* max-width: 393px; */ transition: .2s ease; border-radius: 2px; } .daily-press-wrap { border: 1px solid #DDD; border-radius: 5px; overflow: hidden; } /* ARTICLE OF THE DAY */ .daily-article h3 { font-size: 20px !important; } .daily-article-wrapper .article-otd-title, .daily-news-title, .social-wrapper>h3 { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid #e6a519; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } .daily-article { background-color: rgba(230, 165, 25, 0.07); padding: 10px 15px 16px 15px; } .daily-article .post-directive .post-descr { color: #555 !important; font-size: 14px !important; margin-top: 5px !important; } .daily-article .show-all { margin-top: 0; } .show-all-topic-directive { width: calc(100% - 40px) !important; } /* RECENT POSTS */ .recent-posts-wrapper { background-color: #f5f6f7; padding: 30px; padding-top: 40px; margin-right: 10px; } .show-all { width: 100%; margin-top: 50px; } .show-all a { text-align: center; color: #555; text-decoration: none; transition: 0.2s ease; } .show-all a:hover { color: #333; } /* SOCIAL MEDIA */ .social-icons { max-width: 238px; margin-bottom: 25px; } .social-wrapper>h3 { border-left: 2px solid #00afc3; } .twitter-feed { /* max-width: 370px; */ background-color: #008fc3; padding: 50px 25px; } .social-wrapper>a { display: block; width: 100%; height: 100%; text-decoration: none; } .twitter-feed i { display: block; width: 100%; } .twitter-feed span { display: block; width: 100%; font-weight: 500; color: #fff; line-height: normal; text-decoration: none; text-align: center; } .twitter-feed span:first-of-type { margin-top: 20px; } .twitter-feed span.twitter-handle { color: rgba(255, 255, 255, 0.76) !important; margin-bottom: 10px; } .twitter-feed p { display: block; width: 100%; text-align: center; color: #fff; line-height: normal; } /* TOPIC DIRECTIVE */ .topic-post { max-width: 242px; width: 100%; border-bottom: 1px solid #e3e3e3; padding-bottom: 20px; margin-right: 30px; } .topic-post:last-child { margin-right: 0; } .topic-directive .flex-no-wrap { flex-wrap: nowrap !important; } /* MOST READ */ .most-read .component-header { transform: none; margin-left: -15px; } .most-read-wrapper { padding: 0 15px 20px 15px; padding-left: 0; padding-right: 0; } .most-read .separator { padding-bottom: 20px; border-bottom: 1px solid #dcdcdc; margin-bottom: 30px; } .most-read .no-last-separator { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .most-read-post.first-post { padding-top: 0; } .most-read-wrapper .show-all { margin-top: 30px; } /* MOST READ HORIZONTAL */ .most-read-horizontal { max-width: 817px; width: 100%; } .most-read-x-bg { background-color: #f5f6f7; padding: 15px; } .most-read-horizontal .no-border, .topic-directive-wrapper .no-border { border-bottom: none; } .most-read-horizontal .small-posts { padding-top: 10px; } /* MOST READ MOBILE */ .most-read-horizontal .most-read-mobile { background-color: #f3fbfc; padding: 20px; } .most-read-horizontal .most-read-mobile .component-header { transform: translateX(-12px); } .most-read-horizontal .most-read-mobile .row { margin: 0 1px; padding: 20px 0; border-bottom: 1px solid #c6edf2; } .most-read-mobile .row:last-child { border-bottom: none; } .most-read-mobile .most-read-rank { font-size: 38px; font-weight: 300; line-height: 1; color: #00afc3; margin-right: 10px; } /* MY READING LIST - HOME */ .reading-list-wrapper { background-color: #f8f2f7; padding: 40px 30px 30px 50px; padding-top: 40px; } .reading-list-post { /* max-width: 240px; margin-right: 20px; */ } .reading-list-posts .post-directive { padding-left: 26px; padding-right: 20px; } .reading-list-wrapper { padding-left: 30px; } .recent-posts-wrapper, .reading-list-wrapper { margin-left: -30px; margin-right: 10px; } .daily-article { margin-left: -16px; } .reading-list-post:last-child { margin-right: 0; } .empty-reading-list { width: 100%; text-align: left; color: #555; font-size: 18px; margin-left: 15px; } .empty-reading-list .passive { font-size: 16px; color: #a3a3a3; font-weight: 400; margin-top: 5px; } .bold { font-weight: 500; } /************************/ /* MY READING LIST PAGE */ /************************/ div.container.reading-list-page { max-width: 734px !important; margin-left: 5%; } .reading-list-page { margin-top: 25px; } .reading-list-page h1 { font-size: 24px; font-weight: 300; color: #333; } .reading-list-page .post-directive .bookmark { left: -35px !important; } .bookmarked-post { margin-bottom: 50px; } .reading-list-page .empty-state { margin-top: 30px; margin-bottom: 30px; font-size: 18px; line-height: normal; font-weight: 300; color: #a3a3a3; } /************************/ /* PRESS CLIPPINGS PAGE */ /************************/ .press-clippings-page .go-to-topic-link { pointer-events: none; cursor: default; } .press-clippings-page .go-to-topic-link:hover { color: #555; } .press-clippings-page .user-search { width: 100%; } .press-clippings-page .search-tabs { width: 100%; } /*************/ /* LIST PAGE */ /*************/ div.container.list-page { max-width: 734px !important; margin-left: 5%; } div.container.press-clippings-page { max-width: 840px !important; margin-left: 5%; } .list-page h1 { margin: 25px 0; font-size: 24px; font-weight: 300; line-height: normal; } .list-page .search-bar { border-bottom: 1px solid #dcdcdc; background-color: #fff; margin-top: 25px; margin-bottom: 50px; } .list-page .search-bar input { width: 100%; height: 54px; border: none; background-color: #fff; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: left center; background-size: 23px 23px; padding-left: 33px; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; color: #333; } .list-page .search-bar ::placeholder { color: #bebebe; } .list-page .search-bar :-ms-input-placeholder { color: #bebebe; } .list-page .search-bar ::-ms-input-placeholder { color: #bebebe; } .list-post { margin-bottom: 50px; } .list-page .empty-state { margin-top: 30px; margin-bottom: 30px; font-size: 18px; line-height: normal; font-weight: 300; color: #a3a3a3; } /*****************/ /* SETTINGS PAGE */ /*****************/ .settings { color: #333; line-height: normal; font-weight: normal; } .settings h1 { margin-top: 25px; margin-bottom: 20px; font-size: 24px; font-weight: 300; } .settings h2 { margin-bottom: 20px; font-size: 20px; font-weight: 300; } .settings h3 { font-size: 18px; line-height: 1.56; } .settings span { margin-top: 2px; margin-bottom: 40px; color: #a3a3a3; } .settings .small-row { max-width: 700px; margin-bottom: 40px; } .settings .small-row>div { padding-right: 15px; } .settings .app-on-off-switch { transform: translateY(-6px); } .settings .date-wrapper { margin-top: 15px; margin-bottom: 60px; margin-right: 30px; } .settings label { margin-bottom: 5px; color: #555; } .settings .small-row.marginB60 { margin-bottom: 60px; } .settings .app-field-date-picker { max-width: 131px; } .settings a { margin-left: 20px; font-size: 16px; color: #555; text-decoration: underline; transition: .2s ease; } .settings a:hover { color: #333; } /******************************/ /* ADJUST YOUR INTERESTS PAGE */ /******************************/ .adjust-interests .small-container { padding-right: 50px !important; } .adjust-interests h1 { margin: 45px 0; font-size: 36px; } .adjust-interests .topics { /* margin-right: 70px; */ padding-right: 70px; /* width: 734px; */ max-width: 734px; } .adjust-interests .sorted-topics { padding-left: 70px; padding-right: 0; /* min-width: 367px; */ height: 500px; border-left: 2px solid rgba(163, 163, 163, 0.35); } .adjust-interests .empty-sort-list-msg { text-align: left; } .adjust-interests a { margin-left: 20px; color: #555; font-size: 16px; text-decoration: underline; transition: .2s ease; } .adjust-interests a:hover { color: #333; } /*************/ /* POST PAGE */ /*************/ .container.post-page { max-width: 1060px !important; margin-top: 45px; } .post-page-container { position: relative; /* max-width: 845px; */ margin: 0 auto; max-width: 788px; } .post-page-container .post-menu { position: absolute; left: -80px; top: 14px; } .post-page-container .post-menu a { margin-bottom: 30px; } .post-page-container h1 { font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: 36px; line-height: normal; } .post-page-container .bookmark-btn i.icon-bookmark-big { transform: translateY(-1px); } .post-page-container .bookmark-btn:hover i.icon-bookmark-big { width: 28px; height: 33px; background: url('/assets/icons/bookmark-hover.png') center center no-repeat; background: url('/assets/icons/bookmark-hover.svg') center center no-repeat; background-size: contain; transform: translateY(-1px); } .post-page-container .bookmark-btn i.icon-bookmark-big.bookmark-on { width: 28px; height: 33px; background: url('/assets/icons/bookmark-on.png') center center no-repeat; background: url('/assets/icons/bookmark-on.svg') center center no-repeat; background-size: contain; transform: translateY(-1px); } .post-detail-blocks-container { /* min-height: 80px; */ } .post-author-and-date { margin-top: 30px; margin-bottom: 30px; } .post-author-and-date .avatar { width: 60px; height: 60px; background-position: center; background-size: 60px 60px; margin-right: 10px; } .post-author-and-date .author, .post-author-and-date .date { display: block; font-size: 18px; line-height: normal; color: #555; } .post-author-and-date .date { color: #a3a3a3; font-size: 16px; } .post-text { margin-top: 35px; } .post-text p { font-size: 18px; line-height: normal; margin-bottom: 30px; color: #333; } .post-img { margin-bottom: 20px; } .post-img img { transform: translateX(-108px); } .post-img span { margin-top: 5px; font-size: 12px; color: #a3a3a3; } .bullet-list { display: list-item; list-style-type: disc; list-style-position: outside; margin-left: 25px; } .keywords h3, .post-meta h3 { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; } .keyword-tags { margin-top: 10px; } .keyword-tags a, .keyword-tags>div { display: inline-block; text-decoration: none; cursor: pointer; padding: 3px 0; } .keyword-tags a span, .keyword-tags>div>span { font-weight: 300; font-size: 14px; line-height: normal; color: #555; background-color: #dcdcdc; margin-right: 5px; padding: 0 7px; padding-bottom: 2px; border-radius: 5px; transition: 0.2s ease; } .keyword-tags a:hover>span { color: #fff; background-color: #00afc3; } @media only screen and (min-width: 992px) { .related-posts .related-post { max-width: 30% !important; margin-right: 5%; } .related-posts .related-post:last-of-type { max-width: 30% !important; margin-right: 0; } } @media only screen and (max-width: 1100px) { .navigation-wrapper .navigation li { margin-right: 3% !important; } } .related-posts { margin-top: 80px; margin-bottom: 100px; padding: 40px 80px; padding-bottom: 0; background-color: #f3fbfc; } .related-post { /* max-width: 370px; padding-right: 0; margin-right: 70px; */ padding-bottom: 40px; } .related-post:last-child { margin-right: 0; } /* confirm delete directive */ .show-opacity { opacity: 1 !important; pointer-events: all !important; } .app-confirm-delete { display: inline-flex; position: relative; cursor: pointer; z-index: 9; } .confirm-delete { pointer-events: none; opacity: 0; transition: .3s ease; position: absolute; top: -10px; left: 50%; transform: translate(-50%, -100%); background: white; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); width: 320px; background: #f6f6f6; padding: 16px 10px; color: #656565; } .app-confirm-delete .confirm-delete { width: 250px; } .confirm-delete:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: solid 7px #f6f6f6; border-left: solid 8px transparent; border-right: solid 8px transparent; } .confirm-delete:before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: solid 8px #cacaca; border-left: solid 10px transparent; border-right: solid 10px transparent; } .confirm-delete-title { font-weight: 500; font-size: 16px; color: #333333; margin-bottom: 10px; } .confirm-delete-text { white-space: normal; margin: 0; font-size: 12px; line-height: 16px; color: #777777; } .confirm-delete .btn-small { margin: 0; border-radius: 2px; background-color: white; color: #777777; border: 1px solid #777777; padding: 4px 10px 5px 10px; font-size: 12px; transition: .2s ease; cursor: pointer; } .confirm-delete .btn-small--delete { color: white; background-color: #ff7383; border-color: #ff7383; border-bottom: 2px solid #c95e6b; } .confirm-delete .btn-small--pos { color: white; background-color: #64d677 !important; border-color: #64d677 !important; border-bottom: 2px solid #4ead5e !important; } .confirm-delete .btn-small:hover { background-color: #777777; color: white; } .confirm-delete .btn-small--delete:hover { background-color: #dd6372; border-color: #dd6372; } .confirm-delete .btn-small--pos:hover { background-color: #4ead5e !important; border-color: #4ead5e !important; } /* confirm delete*/ .post-confirm-delete { transition: .3s ease; position: absolute; top: -20px; left: 40%; transform: translate(-50%, -100%); background-color: #fff; box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); width: 320px; padding: 16px 10px; color: #656565; z-index: 9999; width: 260px; } .confirmDeleteRight .post-confirm-delete { transform: translate(-9%, -100%); } .confirmDeleteRight .post-confirm-delete:before { left: 9%; } .confirmDeleteRight .post-confirm-delete:after { left: 9%; } .post-confirm-delete:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: solid 7px #fff; border-left: solid 8px transparent; border-right: solid 8px transparent; } .post-confirm-delete:before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-top: solid 8px #cacaca; border-left: solid 10px transparent; border-right: solid 10px transparent; } .confirm-delete-title { font-weight: 500; font-size: 16px; color: #333333; margin-bottom: 10px; } .confirm-delete-text { white-space: normal; margin: 0; font-size: 12px; line-height: 16px; color: #777777; } .post-confirm-delete .btn-small { margin: 0; border-radius: 2px; background-color: white; color: #777777; border: 1px solid #777777; padding: 4px 10px 5px 10px; font-size: 12px; transition: .2s ease; cursor: pointer; z-index: 9999; } .post-confirm-delete .btn-small--delete { color: white; background-color: #ff7383; border-color: #ff7383; border-bottom: 2px solid #c95e6b; } .post-confirm-delete .btn-small:hover { background-color: #777777; color: white; } .post-confirm-delete .btn-small--delete:hover { background-color: #dd6372; border-color: #dd6372; } .app-ml-13 { margin-left: 13px !important; } .label { font-size: 14px; color: #555555; display: block; line-height: normal; margin-bottom: 5px; } .label-value { font-size: 16px; color: #333333; } body div .label-value * { font-size: 16px !important; } /* post settings */ app-event .post-settings, app-post .post-settings { background-color: #f3fbfc; padding-top: 46px; padding-bottom: 40px; margin-top: 60px; } .post-settings .label { margin-top: 30px; margin-bottom: 5px; display: block; font-size: 16px; line-height: normal; color: #555; } .post-settings p { font-size: 18px; line-height: normal; color: #333; } .post-meta p { color: #a3a3a3; line-height: normal; font-size: 16px; } .post-settings p .from-until { color: #555; } .post-settings .post-img { display: block; max-width: 407px; width: 100%; min-height: 150px; background-size: contain !important; background-repeat: no-repeat; } .post-settings .keyword-tags>div { cursor: default; } .post-settings .topics span { display: inline; } .post-settings .topics .topic { font-weight: bold; } /**************/ /* TOPIC PAGE */ /**************/ .topic-wrapper { margin-top: 43px; } .topic-wrapper h1 { font-size: 36px; } .no-transform { transform: none !important; } .related-post-img { min-height: 170px; max-width: 380px; width: 100%; background-size: cover !important; } .topic-page .most-read-wrapper { background-color: #f5f6f7 !important; } .topic-page .component-header-purple { margin-bottom: 30px; } .topic-page .search-tabs { border-bottom: 1px solid #dcdcdc; } .topic-page .search-tabs li { white-space: nowrap; } .topic-page .social-wrapper { margin-bottom: 0; } .topic-page .topic-most-read .most-read-wrapper { padding-top: 20px; } .home-page .right-col, .topic-page .right-col { max-width: 30%; width: 100%; } /*****************/ /* SUBTOPIC PAGE */ /*****************/ .subtopic-page .container.subtopic-page-wrapper { max-width: 734px !important; margin-left: 5%; } .subtopic-page h1 { margin-top: 25px; font-size: 24px; font-weight: 300; line-height: normal; } .subtopic-page .post { margin-top: 50px; } .topic-page .most-read-wrapper { padding: 0 15px 20px 15px; margin-left: -15px; } .topic-page .most-read-x-bg { margin-left: -15px; } /*********************/ /* EDIT PROFILE PAGE */ /*********************/ .small-container { padding-left: 145px !important; padding-right: 145px !important; transition: .2s ease; } .edit-profile h2 { font-size: 24px; font-weight: 300; line-height: normal; margin: 25px 0; } .edit-profile .profile-picture-container { width: 135px; height: 135px; margin-bottom: 30px; border-radius: 50%; position: relative; overflow: hidden } .edit-profile .profile-picture-container .profile-picture, .edit-profile .profile-picture-container app-profile-picture { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .edit-profile .profile-picture-container .profile-picture-preview { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; } .edit-profile .profile-picture-container .profile-picture, .edit-profile .profile-picture-container .profile-picture>div { width: 100% !important; height: 100% !important; } .edit-profile .profile-picture-container .profile-picture-overlay { display: block; width: 135px; height: 135px; border-radius: 50%; background: url('/assets/icons/photo-big.png') center center no-repeat; background: url('/assets/icons/photo-big.svg') center center no-repeat; background-color: rgba(0, 0, 0, 0.25); z-index: 9; transition: .2s ease; position: relative; } .edit-profile .profile-picture-container .profile-picture-overlay:hover { background-color: rgba(0, 0, 0, 0.35); } .edit-profile label, .access-request label { display: block; color: #555; line-height: normal; } .edit-profile input, .access-request input, app-company-typeahead-field input { display: block; margin-bottom: 30px; margin-top: 5px; border: 1px solid #a3a3a3; padding: 5px 10px; } .reg-typeahead { margin: 0; color: #333333; outline: none !important; box-shadow: none !important; border-color: #a3a3a3 !important; padding-left: 10px; padding-right: 30px; font-size: 14px; height: auto; min-height: 36px; border: 1px solid #a3a3a3; border-radius: 2px; width: 100%; padding-top: 0; padding-bottom: 0; width: 100%; background-image: url('/assets/icons/search.svg'); background-repeat: no-repeat; background-position: right 6px center; background-size: 20px 20px; } .event-subscribe--modal a.typeahead-template { line-height: normal; } .edit-profile .edit-name label:first-child, .access-request, .edit-name label:first-child { /* margin-right: 30px; */ } .edit-profile #firstname, .edit-profile #mobile, .access-request #firstname, .access-request #mobile { /* width: 188px; */ width: 100%; max-width: 250px; } .edit-profile #lastname, .edit-profile #email, .access-request #lastname, .access-request #email, app-company-typeahead-field input { /* width: 298px; */ width: 100%; max-width: 330px; } .edit-profile #bio, .access-request #bio { max-width: 516px; width: 100%; } .edit-profile #current-password, .edit-profile #new-password, .access-request #current-password, .access-request #new-password { width: 406px; padding-right: 105px; } .edit-profile h3 { margin-top: 30px; margin-bottom: 22px; font-size: 20px; font-weight: 300; line-height: normal; } .edit-profile .password-label { position: relative; display: block; width: 406px; } .edit-profile label .show-password { position: absolute; right: 10px; top: 31px; font-size: 12px; line-height: normal; color: #00afc3; } .edit-profile #new-password { margin-bottom: 5px; } .password-requirements { margin-right: 25px; margin-bottom: 40px; } .password-requirements span { display: block; color: #bebebe; text-align: center; line-height: normal; transition: .5s ease; } .password-requirements span:first-child { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 900; } .password-requirements span:last-child { font-size: 9px; } .password-requirements.requirement-met span { color: #00afc3 !important; } .edit-profile .btn.btn-standard { padding-left: 30px; padding-right: 30px; margin-right: 20px; } .edit-profile .cancel { font-size: 16px; color: #555; text-decoration: underline; line-height: normal; transition: .2s ease; line-height: 35px; } .edit-profile .cancel:hover { color: #333; } .edit-profile .readonly { display: block; margin-bottom: 30px; font-size: 16px; color: #333; } .cancel { color: #555555; font-size: 16px; text-decoration: underline; transition: .2s ease; } .cancel:hover { color: #424242; /* font-size: 16px; */ text-decoration: underline; } /* BUTTON GROUP */ .btn-group { display: block; min-width: 115px; font-size: 14px; line-height: 1.67; padding: 4px 10px; border: 1px solid #333; border-right: none; border-radius: 0; transition: .2s ease; margin-top: 5px; background: white; } .btn-group-container .btn-group { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .btn-group-container .btn-group:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group:last-child { border-right: 1px solid #333; } .btn-group.selected, .btn-group:hover { background-color: #333; color: #fff; } .edit-profile .error { transform: translateY(-35px); } /********************************/ /* CREATE EXTRANET CONTENT PAGE */ /********************************/ .create-page h1 { text-align: center; color: #333; font-size: 36px; } /* CREATE POST TILE */ .create-post-tile { max-width: 300px; width: 300px; margin-bottom: 100px; } .create-post-tile-img { display: block; width: 100%; text-align: center; } .create-post-tile h3 { margin-top: 10px; font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 900; line-height: 32px; text-align: center; } .create-post-tile p { display: block; text-align: center; margin-top: 10px; font-size: 13px; color: #555; line-height: normal; } .create-post-tile .button-wrapper { margin-top: 23px; } .btn-white { border: 1px solid #333; border-radius: 2px; padding: 6px 25px; transition: 0.2s ease; } .btn-white span { transition: 0.2s ease; } .btn-white:hover { background-color: #333; color: #fff; } .btn-white:hover span { color: #fff; } .btn-white:hover>i.icon-chev-right-black { background: url('/assets/icons/btn-arrow-white.png') center center no-repeat; background: url('/assets/icons/btn-arrow-white.svg') center center no-repeat; } .btn-white span { font-size: 16px; color: #333; } /* CREATE PUBLIC NEWSLETTER */ .create-newsletter-public .delete-block--publicnewsletter { position: absolute; left: 100%; top: 50%; transform: translate(28px, -10px); } .create-newsletter-public .mime-block-wrap { width: 100%; } .create-newsletter-public .mime-block-left { width: 100%; } .create-newsletter-public .mime-add-block { transform: translateX(-46px); margin: auto; height: 0px; display: flex; align-items: center; z-index: 1; position: relative; transition: .2s ease; } .create-newsletter-public .mime-add-block--open { /* height: 60px; */ } .create-newsletter-public {} .create-newsletter-public .mime-block-wrap { /* z-index: 1; position: relative; */ } .create-newsletter-public .mimeToolbarBottom>div { position: absolute !important; bottom: 0; top: auto; left: auto; right: auto; height: auto; width: inherit; } .create-newsletter-public .mime-toolbar { width: 100% !important; margin-top: 2px; } .create-newsletter-public .mime-toolbar .medium-editor-toolbar-actions { box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.2); } .create-newsletter-public .mime-copy-from-lang { margin-bottom: 20px; margin-left: 169px; } .newsletter-header-image-placeholder { position: relative; overflow: hidden; } .newsletter-header-image-placeholder { position: relative; } .newsletter-header-image-overlay { z-index: 1; transition: .2s ease; opacity: 0; /* opacity: 1; */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #39465660; } .newsletter-header-image-overlay>span { padding: 5px; margin: 10px; border-radius: 100%; cursor: pointer; transition: .2s ease; opacity: .8; } .newsletter-header-image-overlay>span:hover { opacity: 1; transform: scale(1.05); } .newsletter-header-image-placeholder:hover .newsletter-header-image-overlay { opacity: 1; } .data-content-wrap { background-color: #F9F9FB; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; } .data-content { max-width: 650px; margin-top: 30px; display: block; margin: auto; background: white; border: 1px solid #E8E8E8; } .newsletter-header { /* max-width: 680px; margin-left: 30px; */ background-color: white; } .newsletter-header-image { overflow: hidden; } .newsletter-content * { /* font-family: 'Roboto', sans-serif; */ } .create-newsletter-public .mime-editor-close { margin-right: 16px !important; } /* .create-newsletter-public .mime-add-block{ height: 0; } */ /* CREATE INSTANT NEWSLETTER */ .newsletter-image-placeholder { position: relative; overflow: hidden; z-index: 2; cursor: pointer; background-color: #EAEAEA; transition: .2s ease; } .newsletter-image-placeholder:hover { background: #a6aeb7; background: #babfc5; } .newsletter-image-placeholder span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; color: #c7c7c7; margin-top: 30px; transition: .2s ease; } .newsletter-image-placeholder:hover span { color: white; } .newsletter-image-placeholder img { transition: .12s linear; } .newsletter-image-placeholder:hover img { filter: brightness(1.2); } .create-newsletter-instant { padding-top: 53px; } .create-newsletter-instant { font-size: 14px !important; line-height: normal !important; } .create-newsletter-instant .medium-editor-placeholder:after { font-size: 14px; } .create-newsletter-instant .medium-editor-custom p, .create-newsletter-instant .medium-editor-custom, .create-newsletter-instant .medium-editor-custom div, .create-newsletter-instant .medium-editor-custom { font-size: 14px; line-height: 20px; padding: 0; margin: 0; letter-spacing: 0; font-family: sans-serif; font-size: 14px; color: #555555; } .create-newsletter-instant .medium-editor-custom ol, .create-newsletter-instant .medium-editor-custom ul { line-height: 20px !important; } .create-newsletter-instant .medium-editor-custom ul, .create-newsletter-instant .medium-editor-custom ol, .create-newsletter-instant .mime-editor-textarea-wrapper td, .create-newsletter-instant .mime-editor-textarea-wrapper table { font-size: 14px; line-height: normal; } .create-article-publish .second-container { padding-left: 90px !important; padding-right: 90px !important; } /* end newsletter */ /* PUBLISH INSTANT NEWSLETTER */ .add-crm-list .dropdown-menu { max-height: 600px; overflow-y: auto; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.35); border: none; border-radius: 0; width: 100%; max-width: 440px; } .add-crm-list .typeahead-template.dropdown-menu li { padding: 8px 25px; transition: .2s ease; border-bottom: 1px solid #ececec; } .add-crm-list .typeahead-template.dropdown-menu li:first-child { padding-top: 10px; } .add-crm-list .typeahead-template.dropdown-menu li:last-child { padding-bottom: 10px; } .recipientsModal .modal-dialog { padding: 0; max-width: 340px !important; } .recipientsModal .modal-content { max-height: 85vh; overflow-y: scroll; } .addRecipientsModal .modal-dialog { padding: 0; max-width: 500px !important; } .addRecipientsModal h1 { font-size: 18px; margin-top: -15px; padding-bottom: 15px; margin-bottom: 10px; } .addRecipientsModal .close { transform: translate(20px, -20px); width: 11px; height: 11px; } .submit-cancel { margin-left: 20px; color: #555; text-decoration: underline; transition: .2s ease; } .recipientsModal h1 { font-size: 18px; margin-top: -15px; margin-bottom: 8px; padding-bottom: 15px; border-bottom: 1px solid rgba(163, 163, 163, 0.48); } .recipientsModal .input-field { border-bottom: 1px solid rgba(163, 163, 163, 0.48); margin-bottom: 20px; } .recipientsModal .close { transform: translate(20px, -20px); width: 11px; height: 11px; } .recipientsModal .email { color: #686868; font-size: 10px; font-weight: 300; margin-top: 3px; } .recipientsModal .user-li { margin-bottom: 10px; } .recipientsModal .user-li>div { border-bottom: 1px solid rgba(163, 163, 163, 0.48); width: 100%; padding-bottom: 10px; } .recipientsModal section .user-li:last-of-type .bordered { /* border-bottom: none; */ } .recipientsModal app-profile-picture { transform: translatey(-5px); } .publish-newsletter-instant i, .newsletters-overview i { font-style: normal !important; } .newsletter-detail span>i { font-weight: 500; font-style: normal; } .horizontal-separator { border: none; border-bottom: 1px solid #DDD; } .publish-newsletter-instant h1 { font-size: 36px; line-height: normal; } .publish-newsletter-instant .alert { transform: translatey(40px); margin-top: -18px; } .publish-newsletter-instant .draft { font-weight: 500; } .publish-newsletter-instant { padding-top: 53px; } .publish-newsletter-instant .label-lg { font-size: 18px; line-height: normal; color: #555; } .publish-newsletter-instant h2 { font-weight: 300; font-size: 24px; color: #333333; margin-top: 40px; margin-bottom: 18px; } .publish-newsletter-instant .label { margin-top: 40px; margin-bottom: 11px; margin-right: 7px; font-size: 18px; color: #555; line-height: normal; } .input-field { /* font-family: Helvetica,Arial,sans-serif; */ color: #333333; outline: none !important; box-shadow: none !important; border-color: #a3a3a3 !important; padding: 0; padding-left: 10px; padding-right: 10px; font-size: 14px; height: auto; min-height: 36px; border: 1px solid #a3a3a3; border-radius: 2px; width: 100%; } .input-field::placeholder { color: #bebebe; } .input-field--search { background-image: url(/assets/icons/search-light.png); background-image: url(/assets/icons/search-light.svg); background-repeat: no-repeat; background-position: left 8px center; padding-left: 32px; background-size: 17px; } .disabled-checkbox-container-button { cursor: not-allowed; opacity: .5; } .disabled-checkbox-container-button label { pointer-events: none; } .checkbox-container-button { border: 1px solid #a3a3a3; padding: 9px 9px !important; min-width: 170px; border-radius: 2px; margin-right: 15px; min-height: 71px; margin-bottom: 15px; } .checkbox-container-button .user-group-info { color: #a3a3a3; font-size: 16px; margin-left: 38px; font-weight: 300; } .checkbox-container-button .user-group-info .sm-link { font-size: 12px; transform: translateY(1px); } .checkbox-container-button .checkbox-container { padding-left: 0; } .link { color: #00afc3 !important; text-decoration: underline !important; cursor: pointer; } .button-link { border: none !important; background: none !important; padding: 0 !important; margin: 0 !important; color: #00afc3 !important; text-decoration: underline !important; cursor: pointer; } .link:hover { color: #00afc3; } .checkbox-container span.checkmark-md { margin-right: 13px; } .create-newsletter-instant .passive-lg-text { color: #a3a3a3; font-size: 18px; font-weight: 300; line-height: normal; } .create-newsletter-instant .press-table { width: calc(100% + 5px) !important; margin-left: 5px !important; } .create-newsletter-instant .draft { font-weight: 500; } /***********************/ /* CREATE ARTICLE PAGE */ /***********************/ .create-article, .create-article-publish, .create-event { padding-top: 53px; } .create-article .row:first-child, .create-article-publish .row:first-child { padding-top: 13px; } .passive-lg-text { color: #a3a3a3; font-size: 18px; font-weight: 300; line-height: normal; } .create-article .draft, .create-article-publish .draft, .create-newsletter-instant .draft, .create-event .draft { font-weight: 500; } .lightblue-lg-link, .lightblue-md-link { font-size: 18px; line-height: normal; color: #00afc3; text-decoration: underline; margin-right: 40px; transition: .2s ease; } .lightblue-lg-link:hover, .lightblue-md-link:hover { cursor: pointer; color: #008fc3; } .lightblue-md-link { font-size: 14px !important; } .btn-save-continue { font-size: 16px; line-height: normal; color: #fff; background-color: #00afc3; border-radius: 2px; border-bottom: 2px solid #0b8d9c; transition: 0.2s ease; } .btn-save-continue--light { font-size: 16px; line-height: normal; color: #00afc3; background-color: white; border: 1px solid #00afc3; border-radius: 2px; border-bottom: 2px solid #0b8d9c; transition: 0.2s ease; } .btn-save-continue i { transition: .2s ease; } .btn-save-continue--light:hover i.icon-send-blue { background: url('/assets/icons/send.svg') center center no-repeat; background-size: contain; } .btn-save-continue:hover { background-color: #23aaba; color: #fff; } .article-content { position: relative; } .alt-text-input { width: 67px; width: 93px; padding-left: 12px; margin-right: 15px; font-size: 16px; font-weight: 300; color: #dcdcdc; border: none; border-left: 1px solid #6e6e6e; background-color: #333; } /***************************/ /* CREATE & PUBLISH ARTICLE*/ /***************************/ .crop-thumbnail ui-cropper { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } .crop-thumbnail .crop-thumbnail-placeholder { width: 465px; max-width: 100%; opacity: 0; pointer-events: none; } .btn-cancel { margin-left: 20px; color: #555; font-size: 16px; text-decoration: underline; transition: .2s ease; } .btn-cancel:hover { color: #555; } .create-article-publish .second-container, .create-event .second-container { padding-left: 90px !important; padding-right: 90px !important; } .create-article-publish h1, .create-event h1 { font-size: 36px; line-height: normal; } .create-article-publish .label, .create-event .label { margin-top: 40px; margin-bottom: 11px; margin-right: 7px; font-size: 18px; color: #555; line-height: normal; } .create-article-publish .label-big-margin { margin-bottom: 15px; } .create-article-publish .label span, .create-event .label span { font-size: 16px; color: #555; line-height: normal; } .create-article-publish h3 span, .create-event h3 span { font-weight: 300; } .create-article-publish .thumbnail { display: -ms-flexbox !important; display: flex !important; background-color: #ededed; width: 360px; text-align: center; font-weight: 300; transition: .2s ease; width: 465px; height: 220px; background-size: cover; background-position: center center; position: relative; } .dragover { background: #e8e7e7 !important; } .replace-thumbnail-overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.35); z-index: 9; color: white; opacity: 0; transition: .2s ease; cursor: pointer; } .replace-thumbnail-overlay:hover { opacity: 1; } .replace-thumbnail-overlay>div { transform: translateY(-5px); text-align: center; /* pointer-events: all; */ } .replace-thumbnail-overlay>div p { margin-bottom: 7px; font-size: 14px; } .replace-thumbnail-overlay>div .btn { margin-top: 24px; border: 1px solid white; color: white; padding: 5px 13px; font-size: 14px; border-radius: 3px; z-index: 1; } .replace-thumbnail-overlay>div .btn:hover { background-color: white; color: #555555 !important; } .create-article-publish .thumbnail span.label { margin: 0; font-weight: 400; } .create-article-publish .thumbnail span.or { display: block; font-size: 16px; color: #555; line-height: normal; text-align: center; margin-top: 2px; margin-bottom: 8px; } .create-article-publish .thumbnail button { margin-bottom: 10px; } .create-article-publish .thumbnail-preview-blob { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-position: center; } .create-article-publish .thumbnail .formats span { color: #555555; font-size: 12px; } .thumbnail-preview { display: block; width: 360px; height: 217px; transition: 0.1s ease; } .thumbnail-preview:hover { border: 2px solid #e6a519; } .create-article-publish .short-desc { resize: none; padding: 7px 10px; border: 1px solid #a3a3a3; color: #555; font-size: 14px; border-radius: 2px; width: 550px; } .create-article-publish .tags { border-radius: 2x; width: 550px; } .create-article-publish .keywords { width: 550px; } .create-article-publish .short-desc::placeholder { color: #a3a3a3; } .create-article-publish .select { width: 300px; color: #333; } .create-article-publish .visible-for { margin-bottom: 60px; } .create-article-publish .owner-img { width: 20px; height: 20px; transform: translateY(1px); } .create-article-publish .owner-select { border: 1px solid #a3a3a3; border-radius: 2px; padding-right: 40px; padding-left: 10px; background: #fff url("/assets/icons/chev-down.png") right 12px center no-repeat; background: #fff url("/assets/icons/chev-down.svg") right 12px center no-repeat; width: 300px; text-align: left; } .create-article-publish .select.dropdown-menu { border: 1px solid #a3a3a3; border-radius: 2px; margin-top: -1px; width: 300px; box-shadow: 0 4px 5px 0 rgba(163, 163, 163, 0.44); } .create-article-publish .select.dropdown-menu li { padding: 5px 10px; transition: 0.2s ease; } .create-article-publish .select.dropdown-menu li:hover { background-color: #B5E8EE; } .create-article-publish .select.dropdown-menu li a:hover { text-decoration: none; } .create-article-publish .select.dropdown-menu li a { display: block; width: 100%; } .create-article-publish .select.dropdown-menu li div { color: #555; font-size: 16px; font-weight: 400; cursor: pointer; } .create-article-publish .select.dropdown-menu li a>span { color: #555; font-size: 16px; font-weight: 400; cursor: pointer; display: block; width: 100%; } /* BUTTON GROUP DIRECTIVE */ .btn-button-group { display: block; border: 1px solid #333; border-radius: 0; font-size: 18px; line-height: normal; margin-right: 10px; margin-bottom: 10px; padding: 3px 10px; cursor: pointer; transition: 0.2s ease; } .btn-button-group:focus { outline: none; } .btn-button-group.selected, .btn-button-group:hover { color: #fff; background-color: #333; } .button-group-buttons { margin-bottom: 10px; max-width: 100%; } /* topic selector */ .topic-selector { padding: 5px 13px; border: 1px solid #a3a3a3; color: #555; font-size: 14px; border-radius: 2px; transition: .3s ease; min-width: 300px; } .topic-selector-topic { font-size: 18px; font-size: 14px; cursor: pointer; } .topic-selector-topic:hover, .topic-selector-topic.active { color: #333333; } .topic-selector-topic>div { padding-bottom: 9px; padding-top: 9px; /* border: 1px solid blueviolet */ } .topic-selector-topic:first-of-type { padding-top: 0; } .topic-selector-topic:last-of-type { padding-bottom: 0; } .topic-selector .checkbox-container { margin: 0; padding: 0; margin-bottom: 7px; margin-top: 4px; padding-left: 5px; /* padding-right: 25px; */ position: relative; } .topic-selector .tooltip { top: 22px; } .topic-selector .pin { padding-left: 7px; padding-right: 5px; transform: translatey(1px); } .topic-selector i.icon-pin { width: 11px; height: 15px; background: url(/assets/icons/pin_inactive.svg) center center no-repeat; background-size: contain; transition: .05s ease; } .topic-selector .pin.active i.icon-pin { background: url('/assets/icons/pin_active.svg') center center no-repeat; transform: rotate(-30deg); } /* newsletter settings */ .newsletter-settings { padding: 19px; padding-top: 16px; background-color: #f5f6f7; border-radius: 2px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35); margin-bottom: 3px; } .newsletter-settings .appToggle { background: #e3e3e3; border-radius: 100px; margin-left: 0; margin-right: auto; } .newsletter-settings .appToggle input[type=radio], .newsletter-settings .appToggle input[type=checkbox] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .newsletter-settings .appToggle label { color: #555; font-size: 18px; line-height: normal; margin-right: 3px; } .newsletter-settings .appToggle label:last-of-type { margin-right: 0; } .newsletter-settings .appToggle label span { border-radius: 100px; padding-left: 13px; padding-right: 13px; padding-bottom: 3px; padding-top: 2px; transition: .2s ease; font-size: 15px !important; cursor: pointer; /* font-weight: 300; */ } .newsletter-settings .appToggle label span.active { background: #00afc3; color: white; } .newsletter-settings .appToggleDays { background: none; } .newsletter-settings .appToggleDays label span { padding: 0; width: 25px; height: 25px; text-align: center; line-height: 25px; margin-right: 3px; background: #e3e3e3; font-size: 12px !important; } .newsletter-settings-on { line-height: 25px !important; text-transform: lowercase; transform: translatey(-2px); display: block; margin-right: 11px !important; color: #555; font-size: 18px; } /* .newsletter-settings-sm-input{ color: #333; background-color: #fff; border: 1px solid #a3a3a3; border-radius: 2px; padding: 5px 10px; font-size: 14px; width: 32px; height: 32px; } */ .newsletter-settings .mb-1 { margin-bottom: .25rem !important; } /* checkmark sm */ span.checkmark-sm { position: relative; display: inline-block; height: 17px; width: 17px; border: 1px solid #555; border-radius: 50%; /* margin-bottom: 1px; */ margin-right: 2px; } .checkbox-container span.checkmark-sm:after { left: 4px; top: 4px; width: 7px; height: 4px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(45deg) scaleX(-1); -ms-transform: rotate(45deg) scaleX(-1); transform: rotate(-45deg) scaleX(-1); } /* checkmark md */ span.checkmark-md { position: relative; display: inline-block; height: 25px; width: 25px; border: 1px solid #555; border-radius: 50%; transform: translateY(0); top: 0; left: 0; } .checkbox-container span.checkmark-md:after { left: 6px; top: 7px; width: 11px; height: 7px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg) scaleX(-1); -ms-transform: rotate(45deg) scaleX(-1); transform: rotate(-45deg) scaleX(-1); } /* tags */ tags-input .tags { height: auto !important; min-height: 100px !important; overflow-y: initial !important; } /* custom dropdowns */ .custom-dropdown { color: #333333; position: relative; background-color: white; } .custom-dropdown-open { z-index: 3; } .custom-dropdown .custom-dropdown-selected { border: 1px solid #a3a3a3; border-radius: 2px; background: url(/assets/icons/chev-down.png) right 13px center no-repeat; background: url(/assets/icons/chev-down.svg) right 13px center no-repeat; background-size: 10px; padding-left: 10px; padding-right: 40px; font-size: 14px; cursor: pointer; min-height: 36px; position: relative; z-index: 2; } .custom-dropdown .custom-dropdown-options { border: 1px solid #a3a3a3; border-top: none; border-radius: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; background-size: 10px; font-size: 14px; cursor: pointer; position: absolute; width: 100%; top: calc(100% - 2px); background: white; z-index: 1; max-height: 400px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .1s ease; box-shadow: 0px 1px 4px rgba(103, 103, 103, 0.2); padding-top: 2px; } .custom-dropdown .custom-dropdown-show-options { opacity: 1; pointer-events: all; } .custom-dropdown .custom-dropdown-options li { padding: 10px 10px; transition: .2s ease; } .custom-dropdown .custom-dropdown-options span { display: block; transform: translateY(-1px); } .custom-dropdown .custom-dropdown-options li:hover, .custom-dropdown .custom-dropdown-options li.active { background-color: #f5f5f5; } .custom-dropdown .custom-dropdown-placeholder { color: #bebebe; } /* custom dropdowns */ /* publication periods */ .create-article-publish h2 { font-weight: 300; font-size: 24px; color: #333333; margin-top: 40px; margin-bottom: 18px; } .create-article-publish .label-lg, .create-event .label-lg { font-size: 18px; line-height: normal; color: #555; } .mt-40 { margin-top: 40px; } .checkbox-md-indent { margin-left: 34px; } /*********************/ /* CREATE EVENT PAGE */ /*********************/ .create-event .app-field-time { flex-direction: column !important; } .custom-select-ellipsis .custom-dropdown-selected>span>span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; width: 500px; } .custom-select-ellipsis li>span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: normal; width: 100%; } .custom-select-ellipsis .custom-dropdown { width: 100%; } .form-row { margin-bottom: 26px; } .form-row:last-of-type { margin-bottom: 0; } /* publish event */ .event-type { font-size: 12px; font-weight: 600; } .event-title { font-weight: 400 !important; font-size: 34px !important; line-height: 38px !important; margin-top: 3px !important; } .event-modal-title { font-weight: 400 !important; font-size: 30px !important; line-height: 36px !important; margin-bottom: 32px; } .event-date { font-weight: 400; font-size: 35px; line-height: 37px; color: #BEBEBE; font-family: 'Noto Serif JP', serif; /* white-space: nowrap; */ /* margin-top: 3px; */ } .event-location-type { margin-top: 12px; color: #5E5E5E; flex-wrap: wrap; line-height: 1.3; } .event-location-marker { width: 7px; height: 10px; margin-right: 6px; transform: translatey(-1px); } .event-time { /* margin-left: 12px; */ display: inline-block; } .events-overview .event-time { margin-left: 9px; } .event-time-svg { width: 10px; transform: translatey(-1px); margin-right: 1px; } .event-time-svg--detail { width: 11px; transform: translatey(-1.5px); margin-right: 1px; } /* .event-editor #event-title { width: 843px; font-size: 36px; line-height: normal; padding-left: 30px; border: none; border-left: 2px solid #bebebe; margin-bottom: 15px; } .event-editor #event-title:focus { border-left: 2px solid #00afc3; } .event-editor h3 { margin-top: 45px; margin-bottom: 15px; padding-left: 30px; font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 900; } .program-block .time-input { font-size: 16px; } .program-block input[type=number]::-webkit-inner-spin-button, .program-block input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } */ /***************/ /* SEARCH PAGE */ /**************/ .search-page .container .page-search { color: #333 !; max-width: 1061px; width: 100%; height: 70px; font-size: 28px; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: left center; background-size: 32px 32px; padding-left: 55px; border: none; border-bottom: 2px solid #555; margin-top: 43px; } .search-page ::placeholder { color: #a3a3a3; } .search-page :-ms-input-placeholder { color: #a3a3a3; } .search-page ::-ms-input-placeholder { color: #a3a3a3; } .search-tabs { margin-top: 30px; padding-bottom: 6px; max-width: 1170px; } .search-tabs li { margin-right: 40px; /* height: 30px; */ } /* .search-tabs{ flex-wrap: wrap; } */ .search-tabs li a { text-decoration: none; color: #a3a3a3; font-size: 16px; padding-top: 5px; padding-bottom: 5px; transition: 0.2s ease; } .search-tabs li a.active-tab { color: #333 !important; border-bottom: 2px solid #333 !important; } .search-tabs li a:hover { color: #333; } .search-content-wrapper { margin-top: 53px; } /* refine search */ .search-options { border-left: 2px solid #dcdcdc; padding-left: 69px; max-width: 375px; } .search-options .refine-search h3, .search-options .keywords-wrapper h3, .spotlight-wrapper>h3 { font-family: 'Noto Serif JP', serif; font-weight: 600; font-size: 16px; color: #333; border-left: 2px solid #00afc3; padding-left: 15px; margin-bottom: 15px; transform: translateX(-17px); } .search-options .keywords-wrapper h3 { margin-top: 39px; } .search-options .refine-search-input-wrapper { background-color: #F5F6F7; padding: 10px 15px 20px 15px; width: 300px; } .search-options .refine-search-input-wrapper label { display: block; font-size: 14px; color: #555; margin-bottom: 6px; } .search-options .refine-search-input-wrapper input, .search-options .refine-search-input-wrapper .custom-dropdown { margin-bottom: 20px; } .search-options .refine-search-input-wrapper .custom-dropdown { background-color: #fff; } .search-options .refine-search-input-wrapper input { width: 114px; height: 32px; } .search-options .refine-search-input-wrapper .btn-refine-search { width: 100%; height: 36px; font-size: 16px; font-weight: 500; color: #fff; background-color: #00afc3; box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.31); border-radius: 3px; text-transform: uppercase; border: 0; cursor: pointer; } .search-options .refine-search-input-wrapper .btn-refine-search:hover, .search-options .refine-search-input-wrapper .btn-refine-search:focus { background-color: #23aaba; } .refine-date-wrapper span { display: block; transform: translateY(10px); color: #555; } /* keywords */ .keywords .keyword { display: inline-block; line-height: normal; font-weight: 300; color: #555; background-color: #dcdcdc; border-radius: 5px; padding: 0 6px; padding-bottom: 3px; margin-bottom: 5px; margin-right: 5px; text-decoration: none; } .keywords .selected-keyword { color: #fff; background-color: #00afc3; } /* search articles*/ .search-results { margin-right: 68px; max-width: 732px; } .search-page .search-results-wrapper { margin: 0 auto; margin: 0; width: 100%; } .search-results .searched-post { margin-bottom: 50px; } /***************/ /* EVENTS PAGE */ /***************/ .search-helptext { color: #A9A9A9; font-size: 12px; padding: 15px; text-align: center; line-height: 1.3; } .search-helptext a { color: #A9A9A9; /* text-decoration: none; */ } .event .sep-v { display: inline-flex; /* margin-left: 12px; */ margin-right: 13px; width: 1px; height: 27px; transform: translatey(1px); background-color: #E3E3E3; } .event-detail-afterlabel { margin-right: 12px; font-size: 24px; } .event .stamps { /* margin-left: 10px; */ } .event .green-fill-stamp { margin-right: 10px; font-size: 14px; padding: 7px 13px; display: inline-flex; margin-top: 8px; } .event .red-light-stamp { margin-right: 10px; font-size: 14px; padding: 6px 12px; display: inline-flex; margin-top: 8px; } .event .btn-event-subscribe { margin-right: 10px; font-size: 14px; padding: 6px 12px; display: inline-flex; color: #01AFC3; border: 1px solid #01AFC3; margin-top: 8px; text-transform: uppercase; border-radius: 2px; background-color: transparent; transition: .2s ease; cursor: pointer; } .event .btn-event-subscribe:hover { background-color: #01AFC3; color: white; } /* extranet events overview */ .event-card {} .event-card-day { font-weight: 400; font-size: 36px; line-height: 1; color: #BEBEBE; font-family: 'Noto Serif JP', serif; margin-right: 6px; } .event-card-weekday { margin-top: 5px; text-transform: capitalize; margin-bottom: 3px; } .event-card-date { color: #A9A9A9; font-size: 12px; text-transform: capitalize; } .event-stamps { position: absolute; top: 7px; right: 0; } .green-fill-stamp { text-transform: uppercase; font-size: 9px; background-color: #1EC180; padding: 4px 8px; border-radius: 2px; color: white; display: inline-block; } .red-light-stamp { text-transform: uppercase; font-size: 9px; padding: 3px 7px; border: 1px solid #FF7383; border-radius: 2px; color: #FF7383; display: inline-block; } .event-card-type { font-size: 10px; font-weight: 600; margin-top: 12px; margin-bottom: 3px; } .event-card-line { width: 2px; height: 27px; top: 7px; left: -20px; position: absolute; } .event-card-title { line-height: 1.2; } .event-card-location { color: #A9A9A9; font-size: 12px; margin-top: 7px; display: block; } .svg-marker { width: 7px; margin-right: 3px; transform: translatey(-1px); height: 10px; } .events-overview .cards-container { margin-top: 0; } .events-overview .cards-container .card-tile { width: 31.3%; margin-right: 2.8%; margin-bottom: 2.8%; padding-top: 15px; padding-bottom: 24px; } .events-overview .cards-container .card-tile:nth-of-type(4n) { margin-right: 2.8%; } .events-overview .cards-container .card-tile:nth-of-type(3n) { margin-right: 0; } .search-options--events { border: 0 !important; padding-left: 0 !important; } .search-options--events .refine-search-input-wrapper { background-color: #F3FBFC; padding-top: 15px; } .search-options--events .refine-search h3 { margin-bottom: 17px; } .w-100>.custom-dropdown { width: 100%; } /* event admin overview */ .events-admin .passive, .event-settings .passive { color: #ACACAC !important; } /* */ .events h1, .app-newsletters h1 { display: inline-block; width: 100px; font-size: 24px; font-weight: 300; line-height: normal; color: #333; margin-bottom: 30px; margin-top: 23px; margin-right: 0; } .events .events-wrapper { max-width: 952px; padding-right: 29px; padding-bottom: 30px; } .events .filter-events-wrapper { transform: translateY(-35px); } .events .filter-events { background-color: #f3fbfc; padding: 10px 15px 20px 15px; } .filter-events label, .filter-events .event-between-wrapper span { color: #555; } .filter-events #keywords { margin-top: 5px; margin-bottom: 20px; padding-left: 11px; padding: 6px 11px; display: block; width: 100%; border: 1px solid #a3a3a3; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; font-weight: 300; line-height: normal; color: #bebebe; } .field-select-color { width: 14px; height: 14px; border-radius: 100%; margin-right: 7px; transform: translatey(.5px); } .filter-events #keywords::placeholder { color: #bebebe; } .filter-events .app-field-select { margin-bottom: 20px; } .filter-events .app-field-select select { font-weight: 300; font-size: 14px; } .filter-events .event-between-wrapper { margin-top: 5px; } .filter-events .app-field-date-picker { max-width: 110px; } .filter-events .past-events { margin-top: 20px; margin-bottom: 10px; } .filter-events .checkmark-small { transform: translateY(-2.5px); background-color: #f3fbfc; } .filter-events .btn-standard { width: 100%; margin-top: 30px; text-transform: uppercase; } /* event-block */ .events-wrapper app-event-block { margin-right: 25px; margin-bottom: 25px; } .events-wrapper app-event-block:nth-child(3n) { margin-right: 0; } margin-right: 0; } .event-block { display: block; width: 290px; background-color: #f5f6f7; border-radius: 2px; padding-bottom: 28px; box-shadow: 0 1px 4px 0 rgba(163, 163, 163, 0.44); } .event-block:hover { text-decoration: none; } .event-block .date-wrapper { padding: 15px 20px 15px 0; position: relative; } .event-block .date { display: block; height: fit-content; font-family: 'Noto Serif Jp', serif; font-size: 36px; font-weight: 500; line-height: 30px; color: #bebebe; padding-left: 20px; border-left: 2px solid #9c4c94; margin-right: 5px; } .event-block .date.gold-border { border-left: 2px solid #e6a519; } .event-block .day-month-year span { display: block; } .event-block .full-day { color: #555; } .event-block .month-year { font-size: 12px; color: #a3a3a3; transform: translateY(2px); } .event-block .title { color: #333; font-weight: 500; line-height: normal; padding-left: 20px; padding-right: 20px; margin-bottom: 2px; } .event-block .location { font-size: 12px; color: #a3a3a3; padding: 0 20px; padding-bottom: 28px; } .event-block .attending { position: absolute; right: 20px; font-size: 10px; font-weight: 500; text-transform: uppercase; color: #fff; background-color: #1ec180; padding: 4px 11.5px; } /**********************************************/ /* MY EXTRANET POSTS PAGE && MANAGE SPOTLIGHT */ /**********************************************/ .manage-spotlight h1, .most-read-posts h1, .my-extranet-posts h1 { margin-top: 25px; margin-bottom: 25px; font-size: 24px; font-weight: 300; line-height: normal; } .my-extranet-posts .container h1:nth-of-type(2) { margin-top: 60px; } .has-table .table tr th, .manage-spotlight .table tr th, .my-extranet-posts .table tr th { border-top: none; font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 600; border-bottom: 1px solid #a3a3a3; } .has-table .table tr td, .manage-spotlight .table tr td, .my-extranet-posts .table tr td { border-top: none; border-bottom: 1px solid #a3a3a3; font-size: 16px; color: #555; line-height: 2.25; line-height: 1.7; } .manage-spotlight .table .title, .my-extranet-posts .table .title { color: #333; max-width: 500px; } .has-table .table tbody tr, .my-extranet-posts .table tbody tr { transition: .1s ease; } .has-table .table tbody tr:hover, .my-extranet-posts .table tbody tr:hover { cursor: pointer; opacity: .7; } .extranet-table>div { overflow-x: unset !important; } .extranet-table .options { transform: translateY(-3px) translateX(-51%); } .extranet-table .icon-options { transform: translateY(-3px); } .extranet-table td { height: 54px; vertical-align: middle; } .extranet-table .table tr th:first-child, .extranet-table .table tr td:first-child, .manage-spotlight .table tr th:first-child, .manage-spotlight .table tr td:first-child, .my-extranet-posts .table tr th:first-child, .my-extranet-posts .table tr td:first-child { padding-left: 0; } .extranet-table .table .status span, .manage-spotlight .table .status span, .my-extranet-posts .table .status span { font-size: 14px; line-height: normal; } .manage-spotlight .table .status .spotlight, .my-extranet-posts .table .status .spotlight { color: #ff9b0e; border: 1px solid #ff9b0e; border-radius: 11px; padding: 0 10px 3px 10px; } .my-extranet-posts .table .status .draft { color: #00afc3; border: 1px solid #00afc3; border-radius: 11px; padding: 2px 10px; } .my-extranet-posts .table .status .published { color: #1ec180; border: 1px solid #1ec180; border-radius: 11px; padding: 0 10px 3px 10px; } .my-extranet-posts .manage-spotlight-link { display: block; margin-top: 10px; margin-bottom: 50px; color: #555; transition: .2s ease; } .my-extranet-posts .manage-spotlight-link:hover { color: #333; } .my-extranet-posts .posts-search { width: 843px; padding: 15px 10px 15px 36px; margin-bottom: 8px; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: 0; background-size: 27px 27px; font-size: 16px; line-height: normal; color: #555; border: none; border-bottom: 1px solid #dcdcdc; } .my-extranet-posts .posts-search::placeholder { color: #bebebe; } .quick-search { width: 100%; padding: 15px 10px 15px 36px; background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: 0; background-size: 27px 27px; font-size: 16px; line-height: normal; color: #555; border: none; border-bottom: 1px solid #dcdcdc; background-color: transparent; } .quick-search::placeholder { color: #bebebe; } .my-extranet-posts .search-tabs { margin-top: 2px; margin-bottom: 35px; } .my-extranet-posts .empty-state { font-size: 18px; line-height: normal; font-weight: 300; color: #a3a3a3; margin-bottom: 40px; } /* tabs */ .newsletters-overview .tabs { margin-bottom: 35px; } .tabs { margin-top: 30px; padding-bottom: 6px; max-width: 1170px; } .tabs li { margin-right: 40px; /* height: 30px; */ } /* .tabs{ flex-wrap: wrap; } */ .tabs li a { text-decoration: none; color: #a3a3a3; font-size: 16px; padding: 5px auto; transition: 0.2s ease; } .tabs li a.active-tab { color: #333 !important; border-bottom: 2px solid #333 !important; } .tabs li a:hover { color: #333; } /* MANAGE SPOTLIGHT SPECIFIC*/ .manage-spotlight .spotlight-table { margin-bottom: 50px; } .manage-spotlight h2 { margin-top: 25px; margin-bottom: 15px; font-size: 20px; font-weight: 300; line-height: normal; } .manage-spotlight .icon-drag-and-drop { position: initial; } .manage-spotlight .table tbody tr td:first-child { width: 40px; } .manage-spotlight .table tbody tr { cursor: grab; } .manage-spotlight .table tbody tr td { transition: 0.2s ease; transition-property: color, background-color, padding-left; } .manage-spotlight .table tbody tr:active td { cursor: grabbing; color: #fff; background-color: rgba(0, 175, 195, 0.9); } .manage-spotlight .table tbody tr:active td:first-child { padding-left: 10px; } .manage-spotlight .table tbody tr:active>td>i.icon { background: url('/assets/icons/drag-and-drop-arrows-white.png') center center no-repeat; background: url('/assets/icons/drag-and-drop-arrows-white.svg') center center no-repeat; } .ui-sortable-helper { display: table; } /**************/ /* EVENT PAGE */ /**************/ .event .container { /* width: 923px; padding-left: 0!important; padding-right: 0!important; */ } .event .event-wrapper { margin-top: 40px; } .event .event-icons { margin-top: 25px; } .event-icons a { display: block; margin-bottom: 50px; margin-right: 50px; } .event-content { width: 100%; } .event-content-excerpt { max-height: 420px; overflow: hidden; } .show-full-button { opacity: 0; pointer-events: none; position: absolute; left: 0; bottom: 6px; z-index: 1; color: #02AFC3 !important; font-size: 16px; text-decoration: underline; font-weight: 300; } .link-button { color: #02AFC3 !important; font-size: 16px; text-decoration: underline; font-weight: 300; } .event-content-excerpt .show-full-button { opacity: 1; pointer-events: all; } .shade-white { position: absolute; bottom: 0; left: 0; width: 100%; height: 24px; background-color: white; box-shadow: 0px 0px 36px 36px white; z-index: 1; } .event-content-excerpt .shade-white { opacity: 1; } .event-content-wrap { position: relative; } .event-teams-zoom-link { background-color: #F3FBFC; padding: 28px 30px; display: flex; margin-bottom: 30px; } td .td-title {} td .td-descr { color: #a5a5a5; font-size: 13px; margin-top: 1px; } .event-teams-zoom-link i {} .event-teams-zoom-link a { font-size: 14px; line-height: 18px; text-decoration: underline; color: #01AEC3; margin-left: 7px; margin-top: -2px; } /* attendees section, messages section */ .wysiwyg-var-wrap { display: flex; margin-top: 8px; align-items: center; } .wysiwyg-var-wrap .label { margin-bottom: 0; margin-right: 8px; transform: translateY(-1px); } .wysiwyg-var-wrap button { border: none; margin-right: 7px; background-color: rgb(1, 174, 195); color: white; display: flex; line-height: 21px; border-radius: 2px; padding: 0 6px; padding-bottom: 1px; font-weight: 300; transition: .1s ease; cursor: pointer; } .wysiwyg-variable { color: #01AEC3 !important; } .wysiwyg-var-wrap button:hover { background-color: #23AABA; } .send-test-btn { display: flex !important; padding: 0 !important; } .send-test-btn.disabled { pointer-events: none; } .send-test-btn>span { padding: 4px 28px; } .send-test-btn>div { display: flex; align-items: center; justify-content: center; padding: 13px 9px; position: relative; transition: .1s ease; } .send-test-btn>div.active, .send-test-btn>div:hover { background-color: #009EAF; } .send-test-btn>div::after { content: ''; width: 1px; height: 20px; background-color: #007C8A; display: block; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); } .send-test-btn>div>i { display: flex; align-items: center; } .send-test-btn>div>.tt { opacity: 0; pointer-events: none; transition: .1s ease; background-color: #F5F6F7; position: absolute; right: -20px; color: #555555; white-space: nowrap; top: calc(-100% - 17px); border-radius: 4px; padding: 8px 20px; box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 32%); cursor: pointer; /* @temp */ /* opacity: 1 !important; pointer-events: all !important; */ } /* .send-test-btn>div>.tt:hover{ opacity: .8 !important; } */ .send-test-btn>div>.tt::after { content: ''; display: block; width: 0; height: 0; position: absolute; border-bottom: 8px solid #F5F6F7; border-right: 8px solid transparent; transform: rotate(-45deg); top: calc(100% - 4px); right: 31px; } .send-test-btn>div.active .tt { opacity: 1 !important; pointer-events: all !important; } .event-attendees { background-color: #FAFAFA !important; } .event-messages { background-color: white !important; } .event-attendees .post-page-container, .event-messages .post-page-container { max-width: 100%; padding-left: 226px; } .saving--pre { transition: .2s ease; } body .saving { opacity: .7 !important; pointer-events: none !important; } @media (max-width: 1340px) { .event-attendees .post-page-container, .event-messages .post-page-container { padding-left: 0; } } /* settings section */ .event-settings {} .event-settings .color-dot { width: 16px; height: 16px; border-radius: 100%; display: inline-block; transform: translatey(1px); } /* .event-content .event-type { font-size: 12px; font-weight: 600; color: #00afc3; } .event-content .event-title, .event-content .event-date { font-size: 36px; line-height: normal; } .event-content .event-date { color: #bebebe; font-family: 'Noto Serif JP', serif; font-weight: 500; text-transform: capitalize; margin-right: 25px; margin-bottom: 5px; } .event-content .event-location { color: #555; display: block; } .event-content .event-desc { margin-top: 18px; font-size: 16px; line-height: 1.75; } .event-content .program-title { margin: 15px 0; font-family: 'Noto Serif JP', serif; font-size: 20px; font-weight: 900; line-height: 1.5; } .program .program-times { display: block; height: 35px; transform: translateY(8px); padding-right: 5px; border-right: 1px solid #e6a519; } .program .program-times span { display: block; text-align: right; transform: translateY(-8px); } .program .program-times span:first-child { font-size: 16px; color: #333; line-height: 1.75; } .program .program-times span:last-child { color: #a3a3a3; } .event-content .program-items { padding-left: 15px; } .program-items p { font-size: 16px; line-height: 1.75; margin-bottom: 20px; } .program-items .speakers { font-size: 10px; color: #a3a3a3; line-height: normal; margin-bottom: 5px; } .program-items .speaker-wrapper { margin-bottom: 15px; } .program-items .speaker-wrapper img { width: 60px; height: 60px; border-radius: 50%; } .program-items .speaker-info span { display: block; margin-left: 10px; } .program-items .speaker-info span:first-child { font-size: 16px; line-height: normal; } .program-items .speaker-info span:last-child { line-height: normal; color: #555; } */ /************************/ /* EVENT SUBSCRIBE PAGE */ /************************/ /* .event-subscribe h1 { margin-top: 50px; margin-bottom: 50px; font-size: 36px; line-height: normal; } */ /* payment */ .centered { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); } .event-subscribe .event-title { margin-top: 38px !important; margin-bottom: 46px !important; } .event-subscribe h3, h3.title { margin-top: 42px !important; margin-bottom: 16px; font-size: 20px; font-weight: 300; line-height: normal; } .event-subscribe .label, .event-subscribe .info { display: block; } .event-subscribe .label { color: #555555; line-height: normal; margin-bottom: 5px; } .event-subscribe .info { font-size: 18px; line-height: 24px; } .event-subscribe label { margin-bottom: 5px; line-height: normal; } .event-subscribe input { /* width: 298px; */ /* height: 32px; padding-left: 10px; line-height: normal; border: 1px solid #a3a3a3; */ } .event-subscribe .form-row>div { /* padding-right: 30px; */ } .event-subscribe .label-textarea { margin-top: 30px; } .event-subscribe textarea { font-family: 'Noto Sans JP', sans-serif; line-height: normal; padding: 10px; resize: none; border: 1px solid #a3a3a3; } .payment-methods .small-radio-container { padding: 10px; border-radius: 3px; border: 1px solid #cacaca; min-height: 54px; } /* start small radios */ .small-radio-container { display: block; margin-bottom: 8px !important; color: #555555; font-size: 18px; cursor: pointer; } .small-radio-container:last-of-type { margin-bottom: 0 !important; } .small-radio-container-radio { height: 20px; width: 20px; border-radius: 100%; border: 1px solid #555555; background: white; display: inline-block; margin-right: 9px !important; position: relative; flex-shrink: 0; } .small-radio-container-radio:after { content: ""; position: absolute; display: none; } input:checked~.small-radio-container-radio:after { display: block; } input:checked~.small-radio-container-radio { /* background: #555555; */ } .small-radio-container-radio:after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #555555; border-radius: 100%; } .small-radio-container .l { margin-top: -1px; line-height: 1.2; } /* end small radios */ /* start small checkboxes */ .small-checkbox-container { display: block; margin-bottom: 10px !important; color: #555555; font-size: 18px; cursor: pointer; } .small-checkbox-container:last-of-type { margin-bottom: 0 !important; } .small-checkbox-container a { color: #555555 !important; text-decoration: underline !important; } .small-checkbox-container-checkbox { height: 20px; width: 20px; border-radius: 100%; border: 1px solid #555555; background: white; display: inline-block; margin-right: 9px !important; position: relative; flex-shrink: 0; } .small-checkbox-container-checkbox:after { content: ""; position: absolute; display: none; } input:checked~.small-checkbox-container-checkbox:after { display: block; } input:checked~.small-checkbox-container-checkbox { background: #555555; } .small-checkbox-container-checkbox:after { left: 4px; top: 5px; width: 10px; height: 6px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(-45deg) scaleX(-1); } .small-checkbox-container .l { margin-top: -1px; line-height: 1.2; } .event-subscribe .btn-standard { padding-left: 30px; padding-right: 30px; margin-right: 20px; } .event-subscribe .cancel { transform: translateY(1px); display: inline-block; } /* end small checkboxes */ .event-question { margin-bottom: 26px; } .event-question { margin-bottom: 24px; } .event-question .label { /* margin-bottom: 9px; */ } .success-state { background-color: #F4FCFD; min-height: calc(100vh - 400px); width: 100%; display: inline-block; } .success-state-inner { box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35); max-width: 620px; margin: auto; margin-top: 100px; margin-bottom: 100px; width: 90%; background-color: #fff; padding: 60px 70px; } .success-state-inner .success-image { width: 90px; height: auto; margin-bottom: 20px; } .success-state-inner .title { color: #333333; font-size: 24px; margin-bottom: 14px; } .success-state-inner .descr { color: #555555; margin-bottom: 32px; } .success-state-inner .descr p { text-align: center; text-align: center; line-height: 1.3; } .success-state-inner .btn-standard { margin-right: 0; font-size: 16px; line-height: 1; padding-top: 7px; padding-bottom: 8px; margin-bottom: 12px; } .success-state-inner .btn-cancel { padding-left: 30px; padding-right: 30px; color: #b2b2b2; background-color: white; border: 1px solid #BEBEBE; font-size: 16px; line-height: 1; padding-top: 7px; padding-bottom: 8px; border-radius: 2px; margin: 0; text-decoration: none; transition: .1s ease; } .success-state-inner .btn-cancel:hover { opacity: .9; } /******************/ /* PRIVACY POLICY */ /******************/ .privacy-policy { line-height: normal; font-size: 16px; } .privacy-policy .sub-container { display: block; margin-top: 30px; margin-bottom: 70px; max-width: 1000px !important; } .privacy-policy section { margin-bottom: 40px; } .privacy-policy .box { border: 1px solid #555; padding: 5px; margin-bottom: 1em; } .privacy-policy h1 { text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 1em; } .privacy-policy h2 { font-size: 20px; text-align: center; font-weight: bold; margin-bottom: 1em; } .privacy-policy h3 { font-size: 18px; font-weight: bold; margin-bottom: 1em; } .privacy-policy h4 { text-decoration: underline; } .privacy-policy h5 { font-style: italic; } .privacy-policy p { margin-bottom: 1em; } .privacy-policy ul { list-style-type: square; margin-left: 40px; margin-bottom: 1em; } .privacy-policy ul li { margin-bottom: 5px; } .privacy-policy ol { list-style-type: decimal; margin-left: 17px; margin-bottom: 1em; } .privacy-policy ol li { margin-bottom: 1em; padding-left: 25px; } .privacy-policy ol p { transform: translateX(-17px); } .privacy-policy b { font-weight: bold; } .privacy-policy i { font-style: italic; } .modal-content i { font-style: normal; } .privacy-policy u { text-decoration: underline; } .privacy-policy a { color: #00afc3; transition: .2s ease; } .privacy-policy a:hover { color: #008fc3; } .privacy-policy table tr th:first-child, .privacy-policy table tr td:first-child { min-width: 200px; } /* newsletter thumbnail crop */ .newsletter-thumbnail-crop a { color: #00afc3 !important; font-size: 13px; } .newsletter-thumbnail-crop a:hover { text-decoration: underline !important; } .newsletter-thumbnail-crop-area { width: 120px; height: 120px; position: relative; overflow: hidden; background: lightgray; } /**********/ /* FOOTER */ /**********/ #app { padding-top: 107px; padding-bottom: 301px; position: relative; min-height: 100vh; } #app.app-newsletters { padding-top: 68px; } .newsletterpublicdomain-detail>div { padding-top: 60px; padding-bottom: 100px; background: #F9F9FB; } .app-newsletters .container { max-width: 1100px !important; } .app-events { padding-top: 69px !important; } .app-events .container.post-page { margin-top: 60px; } .app-events .event-subscribe .event-title { margin-top: 46px !important; } .sub-footer-grey { background-color: #8e999f; } .sticky-footer { position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #f6f6f6; background-color: #fff; } footer { color: #656565; font-size: 12px; background: white; } footer p { font-size: 16px; line-height: 23px; } footer a { font-size: 16px; line-height: 23px; } .top-footer { padding-top: 60px; padding-bottom: 60px; } .top-footer a { color: #00afc3; } .sub-footer a, .sub-footer a:hover { color: #fff; text-decoration: underline; } .sub-footer { padding-top: 20px; padding-bottom: 18px; height: 70px; color: #fff; font-size: 16px; } .limited-footer { width: 100%; float: left; } .dot { font-size: 7px; line-height: 10px; margin-left: 4px; margin-right: 4px; } .logo-footer { width: 231px; height: 51px; background: url('/assets/images/pharma-be-logo-footer.png') top center no-repeat; background: url('/assets/images/pharma-be-logo-footer.svg') top center no-repeat; background-size: contain; margin-top: 10px; } .sticky-footer .footer-logo-wrapper { margin-right: 15%; } .limited-footer>div { height: 110px; } .sticky-footer .footer-tel { margin-left: 113px; } @media (min-width: 1200px) { .container { max-width: 1280px; } } /* browser not supported page */ .browser-error * { font-size: 16px; color: #555555; line-height: 26px; text-align: center; } .browser-error>div { max-width: 630px; display: block; margin: auto; } .browser-error button { color: white; padding-left: 30px; padding-right: 30px; } .browser-error h1 { color: #333333; font-size: 36px; line-height: normal; } .browser-error a { color: #00afc3 !important; } /**********/ /* MODALS */ /**********/ .modal { z-index: 9999999 !important; /* pointer-events: none; */ padding: 15px; box-sizing: border-box; } .modal-backdrop { background: rgba(231, 231, 231, 0.7) !important; z-index: 999999 !important; } .modal-body { padding: 33px 50px; position: relative; } .fade.in { opacity: 1 !important; } .modal.in .modal-dialog { transform: translate(0, 0); } .modal-dialog .modal-content { border: 0; padding: 30px; } .modal-dialog { padding: 30px; background: white; border-radius: 1px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.35); margin-left: auto; margin-right: auto; } .modal-mobile-warning { height: 100%; max-height: 500px; text-align: center; } .fullModal .modal-content { height: 100%; } .lg-gray-text { font-size: 25px; color: #333; max-width: 250px; line-height: 30px; } .md-gray-text { font-size: 16px; color: #a3a3a3; line-height: 24px; max-width: 400px; margin-bottom: 10px; } .modal-mobile-warning a { display: block; font-size: 16px; margin-top: 20px; } .modal--top { z-index: 999999999 !important; background-color: #d6d6d69e; } .modal--top .modal-dialog { z-index: 999999999 !important; } .largeModal .modal-dialog { max-width: 1000px; } .subscribeModal .modal-dialog { max-width: 750px; padding: 0 !important; } .subscribeModal .modal-content { padding: 48px; padding-bottom: 54px; } .mediumLargeModal .modal-dialog { max-width: 750px; } .prettyLargeModal .modal-dialog { max-width: 800px; } .prettyLargeModal .modal-content { padding: 0 } .prettyLargeModal .new-task-force-post-active { margin-top: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; background: none; } .refineModal { top: 20%; left: 50%; transform: translateX(-50%); } .refineModal .modal-dialog { max-width: 300px; padding: 20px 15px 25px 15px; } .refineModal .modal-dialog .modal-content { padding: 0; } .keywordModal { z-index: 99999999 !important; } .keywordModal .modal-dialog { max-width: 470px; padding: 0; } .keywordModal .modal-dialog .modal-content { padding: 9px 15px 15px 15px; background-color: #f5f6f7; } .fullModal .modal-dialog { max-width: 100%; max-height: 100%; margin: 0; width: 100%; height: 100%; } .mediumModal .modal-dialog { max-width: 550px; } .smallModal .modal-dialog { max-width: 500px; padding: 0 } .cropModal .modal-dialog { max-width: 525px; padding: 0 } .modal-crop-newsletter-image .modal-dialog { max-width: 754px; padding: 0 } .modal-crop-newsletter-image-text-block .modal-dialog { max-width: 600px; padding: 0 } .modal-dialog h3 { margin-top: 0; } .modal-dialog { margin-top: 7vh; margin-bottom: 7vh; } /* WELCOME MODAL */ .welcome-modal h1 { font-size: 36px; color: #333; line-height: normal; } .welcome-modal p { font-size: 16px; font-weight: 300; line-height: normal; color: #555; } .skip { margin-top: 38px; margin-left: 20px; color: #333; border-bottom: 1px solid #333; text-decoration: none; } .skip:hover { color: #333; } .app-field-multiselect { position: relative; } .app-field-multiselect .select { background: #fff url('/assets/icons/chev-down.svg') right 12px center no-repeat; cursor: pointer; line-height: 24px; border: 1px solid #a3a3a3; display: inline-block; width: 100%; font-size: 14px; color: #333333; vertical-align: top; min-height: 36px; border: 1px solid #a3a3a3; border-radius: 2px; width: 100%; padding: 0 10px; padding-bottom: 2px; height: 36px; display: flex; align-items: center; } .app-field-multiselect * { font-size: 14px; } .app-field-multiselect .open-select { border: 1px solid #a3a3a3; position: absolute; width: 100%; max-height: 220px; overflow-y: auto; transform: translateY(-1px); box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); background-color: white; z-index: 9; margin-bottom: 20px; } .app-field-multiselect .open-select label { margin: 0 !important; padding: 6px 10px !important; cursor: pointer; } .app-field-multiselect .open-select li:first-of-type label { padding-top: 12px !important; } .app-field-multiselect .open-select li:last-of-type label { padding-bottom: 12px !important; } .app-field-multiselect .checkmark { position: relative; margin: 0; margin-right: 6px; } /* Customize the label (the container) */ .checkmark--alt-container { display: block; position: relative; padding-left: 20px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: auto !important; display: inline-block; } /* Hide the browser's default checkbox */ .checkmark--alt-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; display: inline-block; } /* Create a custom checkbox */ .checkmark--alt { position: absolute; position: relative; margin-top: 1px; margin-right: 6px; top: 0; left: 0; height: 13px; width: 13px; background-color: white; border: 1px solid #bebcbc; border-radius: 2px; flex-shrink: 0; } /* When the checkbox is checked, add a blue background */ .checkmark--alt-container input:checked~.checkmark--alt { background-color: #555555; } /* Create the checkmark--alt/indicator (hidden when not checked) */ .checkmark--alt:after { content: ""; position: absolute; display: none; } /* Show the checkmark--alt when checked */ .checkmark--alt-container input:checked~.checkmark--alt:after { display: block; } .checkmark--alt-container input:checked~.checkmark--alt { border-color: #555555; } /* Style the checkmark--alt/indicator */ .checkmark--alt-container .checkmark--alt:after { left: 3px; top: 0px; width: 5px; height: 8px; border: solid white; border-width: 0 1px 1px 0; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } /* Modal custom-checkboxes */ /* Customize the label (the container) */ .checkbox-container { display: block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox-container label { cursor: pointer; } /* Hide the browser's default checkbox */ .checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkmark { position: absolute; top: 3px; left: 0; height: 25px; width: 25px; background-color: #fff; border: 1px solid #555; border-radius: 50%; } .checkmark-small { height: 16px; width: 16px; } /* On mouse-over, add a grey background color */ .checkbox-container:hover input~.checkmark { background-color: #eee; } /* When the checkbox is checked, add a gray background */ .checkbox-container input:checked~.checkmark { background-color: #555; } /* Create the checkmark/indicator (hidden when not checked) */ .checkbox-container .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .checkbox-container input:checked~.checkmark:after { display: block; } /* Style the checkmark/indicator */ .checkbox-container .checkmark:after { left: 6px; top: 7px; width: 11px; height: 7px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg) scaleX(-1); -ms-transform: rotate(45deg) scaleX(-1); transform: rotate(-45deg) scaleX(-1); } .checkbox-container .checkmark.checkmark-small:after { left: 1px; top: 2px; } .welcome-modal-topic, #sortable-topics li { border-bottom: 2px solid rgba(163, 163, 163, 0.35); padding-top: 17px; padding-bottom: 17px; font-size: 20px; line-height: 28px; color: #333; } .welcome-modal-subtopic { font-size: 20px; line-height: 28px; color: #333; font-weight: 300; margin-left: 35px; margin-top: 15px; margin-bottom: 15px; } #sortable-topics li { position: relative; cursor: grab; transition: 0.2s ease; transition-property: color, background-color, padding-left; } #sortable-topics li:active { cursor: grabbing; color: #fff; padding-left: 10px; background-color: rgba(0, 175, 195, 0.9); } #sortable-topics li:active>i.icon { background: url('/assets/icons/drag-and-drop-arrows-white.png') center center no-repeat; background: url('/assets/icons/drag-and-drop-arrows-white.svg') center center no-repeat; } .sortable-placeholder { height: 62px; background-color: #F3FBFC; } .sortable-placeholder-questions { height: 36px; margin-bottom: 10px; background-color: #F5F5F5; max-width: 552px; margin-left: 27px; border-radius: 2px; } .questions-sortable>li { /* position: relative; */ } .questions-sortable .icon-drag-and-drop { position: relative; margin-right: 0; background-size: 14px; width: 27px; height: 35px; margin-top: 1px; cursor: grab; top: 0; right: 6px; } .empty-sort-list-msg { margin-top: 30px; color: #a3a3a3 !important; text-align: center; } /* KEYWORD MODAL */ .keyword-modal h1 { margin-bottom: 6px; font-size: 20px; line-height: 1.4; } .keyword-modal label { margin-bottom: 4px; display: block; color: #555; font-size: 18px; line-height: normal; } .keyword-modal input { margin-bottom: 15px; width: 100%; height: 32px; padding-left: 11px; } .keyword-modal .cancel { margin-left: 20px; color: #555; text-decoration: underline; transition: .2s ease; } .keyword-modal .cancel { color: #333; } .keyword-modal .btn-standard { font-size: 14px; padding: 3px 15px; } .keyword-modal .error { transform: translateY(-18px); } /* REFINE SEARCH MODAL */ .refine-search-modal .component-header { transform: none; } .refine-search-modal .refine-date-wrapper input { max-width: 114px; } .refine-search-modal .btn-standard { width: 100%; } .refine-search-modal .cancel { margin-top: 15px; width: 100%; text-align: center; font-size: 12px; color: #00afc3; text-decoration: underline; transition: .2s ease; } .refine-search-modal .cancel:hover { color: #008fc3; } /**************/ /* COMPONENTS */ /**************/ /* POST DIRECTIVE */ /* general */ .post-directive .post-content { transition: .2s ease; } .post-directive .post-content:hover { opacity: 0.75; } .text-decoration-none:hover { text-decoration: none !important; } .go-to-topic-link { display: block; margin-bottom: 0; text-decoration: none !important; } .go-to-topic-link span { font-size: 10px; color: #a3a3a3; transition: 0.2s ease; } .go-to-topic-link:hover span { color: #555 !important; } .go-to-topic-link:hover .spotlight-stamp { color: #e58b0c !important; } .post-category { font-weight: 700; } .spotlight-stamp { color: #ff9b0e !important; transition: .2s ease; } .bookmark:hover i.icon-bookmark { width: 18px; height: 20px; background: url('/assets/icons/bookmark-hover.png') center center no-repeat; background: url('/assets/icons/bookmark-hover.svg') center center no-repeat; background-size: contain; } .bookmark:hover i.bookmark-on { width: 16px; height: 19px; background: url('/assets/icons/bookmark-on.png') center center no-repeat; background: url('/assets/icons/bookmark-on.svg') center center no-repeat; background-size: contain; } .bookmark i.bookmark-on { width: 16px; height: 19px; background: url('/assets/icons/bookmark-on.png') center center no-repeat; background: url('/assets/icons/bookmark-on.svg') center center no-repeat; background-size: contain; } .post-info span { color: #a3a3a3 !important; line-height: normal; } .post-directive .article-files { margin-top: 7px; } .post-directive .article-files .file-link { margin: 11px 0; } .post-directive .article-files .other-docs { color: #555; font-weight: 300; line-height: 2; } .post-directive .post-author { color: #333 !important; } .post-directive .post-date, .post-directive .post-bullet { color: #a3a3a3; } /* video */ .video-thumb-icon { position: absolute; left: 0; bottom: 0; width: 36px; } .title-icon { width: 11px; height: auto; transform: translateY(-1px); display: inline-block; } .title-icon--video {} .title-icon--event { margin-right: 8px; transform: translatey(-1px); } .video-title-icon--spotlight { width: 15px; transform: translateY(-2px); } .video-thumb-icon-backdrop { fill: #FFFFFF; } .video-thumb-icon-play { fill: #9C4C94; } .recent-posts-wrapper .video-thumb-icon-backdrop, .topic-page .most-read-wrapper .video-thumb-icon-backdrop { fill: #F5F6F7; } .reading-list-wrapper .video-thumb-icon-backdrop { fill: #F8F2F7; } .related-posts .video-thumb-icon-backdrop { fill: #F3FBFC; } /* default */ .press-bg { padding: 15px; background-color: rgba(230, 165, 25, 0.07); } .post-directive .default .go-to-topic-link { margin-bottom: 5px; } .post-directive .default h3 { font-family: 'Noto Serif JP', serif; font-size: 16px; font-weight: 900; line-height: 1.38; margin-bottom: 0; color: #333; } .post-directive .default .post-img { margin-top: 15px; width: 100%; height: auto; margin-bottom: 0; } .post-directive .default .post-descr { margin-top: 6px; font-size: 14px; line-height: normal; color: #555; } .post-directive .bookmark { position: absolute; display: block; top: 4px; left: -25px; } /* spotlight */ .event-spotlight-wrap { display: flex; width: 100%; gap: 16px; } .event-spotlight-wrap:hover { text-decoration: none !important; } .event-spotlight-wrap .left { width: 50%; margin-top: 16px; } .event-spotlight-wrap .left h3 { margin-bottom: 8px; font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 900; line-height: 1.45; } .event-spotlight-wrap .left .location { display: flex; align-items: center; } .event-spotlight-wrap .left .location svg { width: 10px; height: 13px; margin-right: 5px; } .event-spotlight-wrap .left .location svg span { font-size: 14px; transform: translateY(2px); display: inline-block; color: #555555; } .event-spotlight-wrap .right { width: 50%; background-color: #F3FBFC; padding: 22px; display: flex; align-items: center; } .event-spotlight-wrap .right svg { margin-right: 20px; flex-shrink: 0; width: 80px; height: auto; } .event-spotlight-wrap .right .event-card-date-wrap { transform: translateY(-1px); } .event-spotlight-wrap .right .event-card-day { font-size: 50px; color: #555555; margin-right: 9px; } .event-spotlight-wrap .right .event-card-weekday { font-size: 19px; color: #555555; margin-top: 0; line-height: 18px; } .event-spotlight-wrap .right .event-card-date { font-size: 19px; color: #A3A3A3; line-height: 18px; margin: 0; } /* SM spotlight */ @media screen and (max-width: 767px) { .event-spotlight-wrap { flex-direction: column !important; gap: 0 !important; max-width: 500px !important; } .event-spotlight-wrap .left { width: 100% !important; order: 0 !important; } .event-spotlight-wrap .right { width: 100% !important; order: 1 !important; margin-top: 10px !important; margin-bottom: 24px !important; padding: 16px !important; } .event-spotlight-wrap .right svg { width: 60px !important; margin-right: 16px !important; } } .post-directive .spotlight { max-width: 786px; } .post-directive .spotlight .spotlight-text-wrapper { max-width: 425px; width: 100%; height: 100%; margin-top: 15px; } .tr-y-10 { transform: translateY(10px); } .post-directive .spotlight .spotlight-text h3 { margin-bottom: 5px; font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 900; line-height: 1.45; } .post-directive .spotlight .spotlight-text .post-descr { font-size: 14px; line-height: normal; color: #a3a3a3; } .post-directive .spotlight .spotlight-img { height: 100%; max-width: 350px; padding-left: 10px; } .post-directive .spotlight .spotlight-img a { display: block; width: 100%; height: 100%; } .post-directive .spotlight .spotlight-img img { object-fit: contain; max-width: 333px; } /* full */ .post-directive .full h3 { font-family: 'Noto Serif JP', serif; font-size: 22px; font-weight: 900; line-height: 1.45; color: #333; } .post-directive .full .post-descr { margin-top: 17px; font-size: 16px; color: #333; line-height: normal; } .post-directive .full .bookmark { top: -10px; left: -27px; } .post-directive .full .post-img-full { margin-top: 10px; width: 100%; max-width: 375px; } /* FIELD SELECT UNDERLINED */ .app-field-select-underlined label { line-height: normal; color: #a3a3a3; } .app-field-select-underlined select { display: block; margin-top: 5px; padding-bottom: 5px; width: 160px; -webkit-appearance: none; background-color: #fff; background: url('/assets/icons/chev-down-black.png') center right no-repeat; background: url('/assets/icons/chev-down-black.svg') center right no-repeat; border: none; border-radius: 0; border-bottom: 1px solid #00afc3; } /* PASSWORD WITH REQUIREMENTS */ .app-password-requirement-field .password-requirements { margin-top: 5px; } /* ON OFF SWITCH */ .app-on-off-switch .btn.btn-group { width: inherit; text-transform: uppercase; } .app-on-off-switch .btn.btn-group:not(.selected):hover { background-color: #fff; color: #000; } /* DEFAULT PROFILE PICTURE */ .profile-picture { cursor: pointer; } .profile-picture-tooltip { display: block; transition: .2s ease; opacity: 0; left: 50%; transform: translateX(-50%); pointer-events: none; position: absolute; background-color: #fff; border-radius: 3px; box-shadow: 0 1px 6px 0 rgba(163, 163, 163, 0.9); padding: 8px 12px; color: #555; z-index: 999; white-space: nowrap; top: calc(100% + 5px); } .profile-picture:hover .profile-picture-tooltip { opacity: 1; pointer-events: all; } .more-users:hover .profile-picture-tooltip { opacity: 1; pointer-events: all; } .profile-picture .default-profile-image { display: block; background-color: #f8f2f7; border: 2px solid #9C4D94; border-radius: 50%; } .profile-picture .default-profile-image span { display: block; width: 100%; text-align: center; text-decoration: none !important; color: #9C4D94 !important; text-transform: uppercase; } .profile-picture .default-profile-image span:hover { text-decoration: none !important; } .profile-picture .profile-image { transform: translateX(-1px); border-radius: 200px; overflow: hidden; position: relative; z-index: 0; } /* COMPANY TYPEAHEAD */ .typeahead-field input { background-image: url('/assets/icons/search-light.png'); background-image: url('/assets/icons/search-light.svg'); background-repeat: no-repeat; background-position: 98% center; padding-right: 32px; } .typeahead-field .company-type { text-transform: capitalize; font-weight: 400; } .typeahead-field .company-spots-full span { color: #f8333c !important; } /* TYPEAHEAD TEMPLATE */ .typeahead-template.dropdown-menu { padding-top: 0; padding-bottom: 0; } .typeahead-template.dropdown-menu li { /* padding: 2.5px 15px; transition: .2s ease; */ padding: 3px 15px; transition: .2s ease; border-bottom: 1px solid #ececec; } .typeahead-template.dropdown-menu li:first-child { padding-top: 5px; } .typeahead-template.dropdown-menu li:last-child { padding-bottom: 5px; } .translate-l-5 { transform: translateX(-5px); } .translate-t-sm .tooltip { transform: translateY(-7px) translateX(-50%); /* display: block; */ } .typeahead-template li:hover { background-color: #00afc3; color: #fff; } .typeahead-template li a { margin-left: 0px; transition: none; } .typeahead-field .no-spots { font-weight: 400; } /* SPINNER */ .spinner-wrapper { margin: 100px auto 100px; width: 70px; text-align: center; } .spinner-wrapper .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner-wrapper .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .spinner-wrapper>div { width: 18px; height: 18px; background-color: #00afc3; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* OPACITY SPINNER */ .opacity-spinner .spinner-wrapper { position: absolute !important; width: 100%; } .opacity-spinner-hide { opacity: 0 !important; transition: .3s ease; } .opacity-spinner-show { opacity: 1 !important; } .opacity-fade-in { animation: opacityfadein .3s; animation-timing-function: ease; animation-fill-mode: forwards; } @keyframes opacityfadein { from { opacity: 0; } to { opacity: 1; } } @keyframes opacityfadeout { from { opacity: 1; } to { opacity: 0; } } .opacity-hide { transition: .2s ease; opacity: 0; pointer-events: none; } .opacity-show { opacity: 1 !important; pointer-events: all !important; } .opacity-hide-inline { transition: .1s ease; opacity: 0; height: 0; pointer-events: none; } .opacity-show-inline { opacity: 1 !important; pointer-events: all !important; height: auto; } .no-background-image { background-image: none !important; background: transparent; } /* TOASTS GENERAL */ .toasts-container { position: fixed; bottom: 0; /* right:20px; */ z-index: 9999999; right: 0; padding-right: 20px; max-width: 100vw; padding-left: 20px; box-sizing: border-box; } .toast-wrapper { margin-bottom: 10px; width: 418px; box-shadow: 0 2px 6px 0 rgba(51, 51, 51, 0.5); max-width: 100%; } .toast-wrapper .toast-body { padding: 10px; } .toast-wrapper a { display: block; float: right; } .toast-wrapper .toast-icon { margin-right: 15px; } .toast-wrapper h1 { color: #333; font-size: 14px; font-weight: bold; line-height: normal; } .toast-wrapper p { color: #555; font-size: 12px; font-weight: 300; line-height: normal; } .toast-wrapper { /* transition: .8s ease; */ animation: opacityfadein .4s; animation-timing-function: ease; animation-fill-mode: forwards; } .toast-fadeout { animation: opacityfadeout .8s; animation-timing-function: ease; animation-fill-mode: forwards; } .toast-show { /* opacity: 1 !important; */ } /* TOAST SUCCESS */ .toast-success { background-color: #f6fcfa; } /* TOAST ERROR */ .toast-error { background-color: #fff8f8; } /* LANGUAGE PICKER */ .language-picker { min-height: 50px; } .language-picker a { font-size: 18px; color: #555; font-weight: bold; text-decoration: none; /* transform: translateY(1px); */ /* line-height: 1; */ line-height: 30px; margin-left: 0; } .language-picker .label { font-size: 18px; line-height: 30px; color: #555; } .language-picker .language-options { position: relative; right: 0; top: 12px; } .language-picker .language-options a { display: block; padding: 2px 0; transition: .2s ease; transform: none; } .language-picker .language-options a:hover { color: #333; } .language-picker .rotateable-chev { transition: .2s ease; } .transition { transition: .2s ease; } .language-picker .rotate-chev { transform: translateY(-2px) rotate(180deg); } /* inline-select */ .inline-select { position: absolute !important; display: table !important; z-index: 998; /* background: #f5f6f7; */ border-left: 2px solid transparent; padding: 6px 5px; padding-bottom: 10px; padding-right: 8px; white-space: nowrap; transform: translateY(-21px) translateX(-9px); transition: .2s ease; } .inline-select.active { border-color: #00afc3; background: #f5f6f7; transform: translateY(-21px) translateX(0); } .inline-select a { font-size: 18px; color: #555; font-weight: 500; text-decoration: none; transform: translateY(1px); line-height: 1; margin-left: 0; text-decoration: underline; } .inline-select .label { font-size: 18px; line-height: normal; color: #555; } .inline-select .select-options { /* position: absolute; top: 21px; left: 0; */ white-space: nowrap; } .inline-select .select-options a { text-decoration: none; display: block; padding: 2px 0; transition: .2s ease; transform: none; font-weight: 400; margin-top: 15px; } .inline-select .select-options a:first-of-type { margin-top: 13px; } .inline-select .select-options a:hover { color: #333; } .inline-select .rotateable-chev { transition: .2s ease; } .inline-select .rotate-chev { transform: translateY(-2px) rotate(180deg); } /* BLOCK LOADER */ .block-loader { display: block; max-width: 817px; width: 100%; /* height: 378px; */ /* background-color: #f5f6f7; */ } .limit-817 { display: block; max-width: 817px; width: 100%; } .block-loader .big-block { display: block; width: 252px; height: 221px; border-bottom: 1px solid #e3e3e3; /* background-color: #e3e6e8; */ } .block-loader .small-blocks { margin-top: 20px; } .block-loader .small-block { display: block; width: 252px; height: 106px; border-bottom: 1px solid #e3e3e3; /* background-color: #e3e6e8; */ } .block-loader .title { margin: 5px 0 5px 11px; display: block; height: 20px; width: 230px; background-color: #f5f6f7; } .block-loader .big-block .title:first-child { margin-top: 10px; } .block-loader .big-block .title:nth-child(2) { width: 195px; } .block-loader .big-block .title:nth-child(3) { width: 220px; } .block-loader .content { margin-top: 20px; } .block-loader .text { margin: 5px 0 5px 11px; display: block; height: 14px; width: 230px; background-color: #f5f6f7; } .block-loader .content .text:nth-child(2) { width: 200px; } .block-loader .content .text:nth-child(3) { width: 150px; } .block-loader .content .text:nth-child(5) { width: 180px; } .block-loader .content .text:nth-child(6) { width: 210px; } .block-loader .small-block .title:nth-child(2) { width: 195px; } .block-loader .small-block .title:nth-child(3) { width: 220px; } .block-loader .image, .block-loader .title, .block-loader .text { will-change: transform; animation: placeHolderShimmer 1s linear infinite forwards; background: #e6e6e6; background: linear-gradient(90deg, #eee 8%, #ddd 18%, #eee 33%); background-size: 800px 104px; position: relative } @keyframes placeHolderShimmer { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); background-position: -468px 0 } to { -webkit-transform: translateZ(0); transform: translateZ(0); background-position: 468px 0 } } /* SPOTLIGHT LOADER */ .spotlight-loader .big-block { width: 425px; height: 166px; border-bottom: none; } .spotlight-loader .small-block { border-bottom: none; } .spotlight-loader .big-block .title { width: 425px; } .spotlight-loader .big-block .title:nth-child(2) { width: 390px; } .spotlight-loader .text { width: 405px; } .spotlight-loader .content .text:nth-child(2) { width: 375px; } .spotlight-loader .content .text:nth-child(3) { width: 320px; } .spotlight-loader .image { display: block; width: 350px; height: 160px; } /* MOST READ LOADER */ .most-read-loader { display: block; max-width: 370px; width: 100%; height: 100%; } .topic-page .most-read-loader { height: 100%; } .most-read-loader .title, .most-read-loader .text, .most-read-loader .image { width: 350px; } .most-read-loader .title:nth-child(2) { width: 300px; } .most-read-loader .text-block { display: block; height: 130px; margin: 30px 0; } .most-read-loader .text { margin-top: 3px; margin-bottom: 3px; } .most-read-loader .text-block .content .text:nth-child(2) { width: 270px; } .most-read-loader .text-block .content .text:nth-child(3) { width: 320px; } .most-read-loader .text-block .content .text:nth-child(4) { width: 200px; } .most-read-loader .image-block { display: block; margin: 30px 0; } .most-read-loader .image { display: block; width: 350px; height: 160px; margin: 20px 0 0 11px; } .most-read-loader .border { display: block; width: 350px; height: 1px; border-bottom: 1px solid #e3e3e3; margin: 0 auto; } /* PAGINATION */ .pagination { margin-bottom: 70px; } .pagination, .pagination ul { width: 100%; } .pagination ul li a { display: block; text-decoration: none; color: #a3a3a3; padding: 5px 0; margin: 0 12.5px; cursor: pointer; transition: 0.2s ease; } .pagination li a:hover { color: #555 !important; border-bottom: 2px solid #333; } .pagination ul li .no-hover { color: #a3a3a3 !important; border-bottom: none !important; } .pagination ul li .no-pointer { cursor: default; } .active-page { color: #333 !important; border-bottom: 2px solid #333; } /* FILE LINK */ .file-link:hover { text-decoration: none; } .file-link i { margin-right: 10px; } .file-link span { color: #333; font-size: 16px; line-height: 1.75; transition: .2s ease; } .file-link span:hover { color: #00afc3; } .busy-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; cursor: progress; z-index: 9999; background-color: #00000026; } .clearfix { display: block; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .___developcontainer { position: fixed; left: 5px; top: 5px; z-index: 9999; opacity: 0.2; cursor: default; padding: 5px; background-color: #949494; border-radius: 3px; } .___developcontainer span { color: white; width: 65px; font-size: 9px; text-align: center; } .___developcontainer:hover { opacity: 1.0; } /************/ /* IE FIXES */ /************/ .ie .toolbar .navigation li { margin-right: 30px; } .ie .bookmark>i.icon-bookmark, .ie .bookmark-btn>i.icon-bookmark { background-size: 100% 100% !important; } .ie i.icon-file-type-zip-small, .ie i.icon-file-type-word-small, .ie i.icon-file-type-ppt-small, .ie i.icon-file-type-pdf-small, .ie i.icon-file-type-excel-small, .ie i.icon-file-type-general-small { background-size: 100% 100% !important; } /*****************/ /* MEDIA QUERIES */ /*****************/ /* xxLG */ @media screen and (max-width: 1340px) { .small-container { padding-left: 50px !important; padding-right: 50px !important; } .events-overview .cards-container .card-tile { width: 100%; margin-right: 0% !important; /* margin-bottom: 2.8%; padding-top: 15px; padding-bottom: 24px; */ margin-bottom: 24px !important; } /* .events-overview .cards-container .card-tile:nth-of-type(4n){ margin-right: 2.8%; } .events-overview .cards-container .card-tile:nth-of-type(3n){ margin-right: 0; } */ } @media screen and (max-width: 1280px) { /* General */ .hide-1280 { display: none !important; } .show-1280 { display: block !important; } .max100 { max-width: 100% !important; width: 100% !important; flex: 0 0 100% !important; } /* HOME */ .home .home-hide-1280 { display: none !important; } .home .home-show-1280 { display: block !important; } } @media screen and (max-width: 1023px) { .hide-1023 { display: none !important; } .show-all-topic-directive { width: 100% !important; } .show-1023 { display: block !important; } /* FOOTER */ .sticky-footer .footer-tel { margin-left: 15%; } /* HOME */ .max-817 { max-width: 817px; width: 100%; } /*TOOLBAR*/ .breadcrumb { display: none; } } @media screen and (max-width: 1000px) { .post-page-container .post-menu { right: 0; left: inherit; z-index: 9; } .post-page-container .post-menu a { margin-bottom: 25px; } } /* LG */ @media screen and (max-width: 991px) { .first-login .login-logo-area { display: none; } .navigation-wrapper .navigation li a { font-size: 16px; } /* FOOTER */ .sticky-footer .footer-logo-wrapper { margin-right: 0; } .sticky-footer .footer-tel { margin-left: 10%; } .adjust-interests .sorted-topics { border: none; padding: 0; padding-left: 15px; max-width: 350px; margin-top: 60px; height: auto; margin-bottom: 15px; } .adjust-interests .topics { padding-right: 15px; } .drag-drop-topic i.icon-drag-and-drop { display: none; } .drag-drop-topic i.icon-chev-order-up, .drag-drop-topic i.icon-chev-order-down { display: inline-block; } } @media screen and (max-width: 930px) { .hide-930 { display: none !important; } .show-930 { display: block !important; } /* most read horizontal */ .topic-directive .post-border, .most-read-horizontal .post-border { padding-bottom: 20px; border-bottom: 1px solid #e3e3e3; } .top-spacing { padding-top: 20px; } } @media screen and (max-width: 857px) { .logo-footer { margin-top: 0; } .hide-857 { display: none !important; } .show-857-flex { display: flex !important; } .show-857 { display: block !important; } /* TOOLBAR */ .toolbar .navigation li { margin-right: 35px; } /* FOOTER */ #app { padding-bottom: 355px; } .sticky-footer .footer-container { height: 285px; } .sticky-footer .top-footer { padding: 30px 0; display: block !important; height: 100%; } .sticky-footer .limited-footer, .sticky-footer .contact-info { display: block !important; } .sticky-footer .footer-logo-wrapper { height: 34px; margin-bottom: 15px; } .sticky-footer .footer-logo-wrapper .logo-footer { width: 151px; height: 34px; } .sticky-footer .footer-tel { margin-left: 0; margin-top: 15px; } .sticky-footer .pharma-links-mobile { margin-top: 20px; } .sticky-footer .pharma-links-mobile div:first-child { margin-right: 34px; } /* press-clippings-page */ .press-clippings-page .search-tabs { overflow-x: auto; } .press-clippings-page .search-tabs li { white-space: nowrap; } /* privacy and disclaimer */ .privacy-policy .sub-container { padding-left: 0 !important; padding-right: 0 !important; } } @media screen and (max-width: 800px) { /* LOGIN */ .login .login-area { padding-left: 50px; padding-right: 50px; } } /* SM */ @media screen and (max-width: 767px) { .mb-3--sm { margin-bottom: 1rem; } .event-subscribe input[type=text] { max-width: 100% !important; } .success-state-inner { padding: 50px 20px; margin-top: 60px; margin-bottom: 60px; } .event-subscribe .info { font-size: 16px; line-height: 23px; } .event-subscribe .event-title { font-size: 27px !important; line-height: 33px !important; margin-top: 34px !important; margin-bottom: 40px !important; } .small-radio-container .l, .small-checkbox-container .l { font-size: 16px; margin-top: 0 !important; } .event .event-price { font-size: 24px; line-height: 27px; font-size: 30px; line-height: 34px; margin-top: 0px; margin-bottom: 3px; display: block; } .event-detail-afterlabel { font-size: 30px; line-height: 34px; } .event-title { font-size: 30px !important; line-height: 34px !important; } .event-date { font-size: 30px; line-height: 34px; } .mb-5-sm { margin-bottom: 5px; } .sep-v { display: none !important; } .flex-column-sm { display: flex; flex-direction: column; } .events .events-wrapper { padding-right: 0; } .search-tabs { overflow-x: auto; } .largeModal .modal-dialog { padding: 0; } .welcome-modal h1 { font-size: 28px; } .select-favorite-topics { margin-top: 30px !important; } /* post detail */ .post-page-container .post-menu { top: 5px; } .post-page-container .manage-menu { display: none; } .post-page-container h1 { font-size: 24px; padding-right: 37px; } /* sm pages */ .sm-yellow-triangle { bottom: 0 !important; } .first-login .login-area { padding-left: 10px; padding-right: 10px; } .small-container { padding-left: 25px !important; padding-right: 25px !important; } .container { padding-left: 25px !important; padding-right: 25px !important; } .profile-picture { margin-right: 0 !important; } /* GENERAL */ .hide-sm { display: none !important; } .show-sm { display: block !important; } .show-sm-flex { display: flex !important } .container-padding-sm { padding-left: 20px !important; padding-right: 20px !important; } #app { padding-top: 106px; } .sm-background-purple { background-color: #9c4c94 !important; } .sm-text-white { color: #fff !important; } .sm-text-secondary-white { color: rgba(255, 255, 255, 0.8) !important; } .fixed-offset { top: 61px; } .home { padding-top: 0; } /* LOGIN */ .login .sm-logo-wrapper { margin-bottom: 70px; display: flex !important; } .login .sm-logo-wrapper span { font-family: 'Noto Serif JP', serif; font-size: 39px; line-height: normal; font-weight: 900; color: #fff; } .login .sm-logo-wrapper span:nth-child(2) { font-weight: 300; } .login .login-wrapper { width: 70vw; padding-bottom: 30vw; } .login .login-area { padding-left: 15px; padding-right: 15px; } .login .login-field-wrapper .login-field { border-bottom: 1px solid rgba(255, 255, 255, 0.8); } .login label div input:-webkit-autofill { color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 0 0 30px #9c4c94 inset !important; -webkit-box-shadow: 0 0 0 30px #9c4c94 inset !important; } .login #language-picker-mobile { display: flex !important; } .sm-yellow-triangle { position: absolute; bottom: 39px; width: 70vw; height: 0; padding-top: 55vw; overflow: hidden; z-index: 1; } .sm-yellow-triangle:after { content: ""; display: block; width: 0; height: 0; margin-top: -767px; border-top: 767px solid transparent; border-right: 1200px solid #e6a519; } .sm-yellow-triangle img { position: absolute; bottom: 10%; right: 10%; max-width: 116px; max-height: 26px; } .login .login-no-acc-wrapper, .login .login-forgot-wrapper, .login app-language-picker { position: relative; z-index: 99; } .login app-language-picker .language-picker span, .login app-language-picker .language-picker a { font-size: 14px; color: rgba(255, 255, 255, 0.8); transform: translateY(0px); } .login .language-picker .language-options a { transform: translateY(-3px); } .login .language-picker .language-options a:hover { color: #fff; } .login .language-picker .icon-chev-down-black { background: url('/assets/icons/chev-down.png') center center no-repeat; background: url('/assets/icons/chev-down.svg') center center no-repeat; } /* TOOLBAR */ .toolbar { padding: 0; } .toolbar .nav-mobile { height: 60px; } .toolbar .nav-mobile-wrapper { height: 60px; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid #dcdcdc; } .toolbar .nav-mobile-wrapper a { margin-right: 15px; } .toolbar .nav-mobile-wrapper a.profile-picture { margin-right: 0; } .toolbar .nav-mobile-wrapper a:last-child { margin-right: 0; } .toolbar .nav-mobile .mobile-extranet-logo:hover { text-decoration: none; } .toolbar .nav-mobile .mobile-extranet-logo i { margin-right: 5px; } .toolbar .nav-mobile .mobile-extranet-logo span { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 300; line-height: normal; color: #333; } .toolbar .nav-mobile .mobile-extranet-logo .extra { font-weight: 900; } .toolbar .nav-mobile .profile-section .notification-btn { margin-right: 13px; } .toolbar .nav-mobile .profile-section a:hover { text-decoration: none; } .toolbar .nav-mobile .search-bar .container { padding-left: 20px !important; padding-right: 20px !important; } .toolbar .nav-mobile .search-bar input { height: 45px; padding: 7px 15px 7px 40px; background-size: 27.3px 26.9px; padding-top: 0; padding-bottom: 0; line-height: normal; } .toolbar .mobile-dropdown { opacity: 0; pointer-events: none; width: 100vw; height: 100vh; overflow-y: scroll; background-color: #fff; padding-bottom: 100px; transition: .2s ease; } .toolbar .mobile-dropdown ul .active { font-weight: 700; } .toolbar .mobile-dropdown>ul { padding-top: 30px; padding-bottom: 100px; } .toolbar .mobile-dropdown li { width: 100%; } .toolbar .mobile-dropdown li a { padding: 12.5px 0; display: block; width: 100%; text-align: center; font-size: 22px; line-height: normal; color: #333; } .toolbar .mobile-dropdown ul li a>i { transform: translateY(-1px); } .toolbar .mobile-dropdown .mobile-service-menu { max-width: 100px; margin: 0 auto; padding-bottom: 70px; } .toolbar .mobile-dropdown .mobile-service-menu a { margin-right: 10px; } /* mobile nav topics */ .toolbar .mobile-all-topics, .toolbar .mobile-my-topics { margin-bottom: 20px; } .toolbar .mobile-topic h3 { font-family: 'Noto Serif JP', serif; font-size: 18px; font-weight: 600; line-height: normal; padding: 5px 0 !important; margin-top: 20px; } .toolbar .mobile-topic .mobile-topic-link { padding: 0; } .toolbar .mobile-subtopics li a { font-size: 18px; font-weight: 300; line-height: normal; padding: 5px 0 !important; } .toolbar .mobile-dropdown a i.icon-chev-down-gray.chev-rotate { transform: rotate(180deg) translateY(3px); } .toolbar .profile-dropdown-mobile { left: auto; right: 33px; top: 65px; } /* mobile nav animations */ .mobile-nav-open { opacity: 1 !important; pointer-events: all !important; } @keyframes slideDownMobileNav { from { height: 0 } to { height: 100vh } } @keyframes slideUpMobileNav { from { height: 100vh } to { height: 0 } } .slide-down-mobile-nav { animation: slideDownMobileNav .5s 1 forwards; } .slide-up-mobile-nav { transition-delay: .2s !important; animation: slideUpMobileNav .5s 1 forwards; } /* FOOTER */ .sticky-footer .footer-container, .sticky-footer .sub-footer-grey .sub-footer { padding-left: 20px !important; padding-right: 20px !important; } /* READING LIST */ .container.reading-list-page { margin-left: 0 !important; padding-right: 0 !important; padding-left: 32px !important; } .reading-list-page app-pagination { padding-right: 32px; } /* SEARCH */ .search-page .container { padding-right: 20px !important; } .search-page .search-tabs, .search-page .search-content-wrapper { margin-top: 20px; } .search-page .search-results { margin-right: 0; } .search-page .search-results-wrapper { width: 100%; } .search-page .file-link>span { width: 90%; overflow-wrap: break-word; } .pr-15 { padding-right: 15px !important; } /* SEARCH BAR */ .search-bar .container input { padding-right: 65px; } .search-bar .refine-mobile { position: absolute; top: 0; right: 20px; height: 45px; width: fit-content; font-size: 10px; line-height: 45px; letter-spacing: normal; text-align: right; color: #00afc3; transition: .2s ease; } .search-bar .refine-mobile:hover { text-decoration: none; color: #008fc3; } /* SUBTOPIC PAGE && Press CLIPPINGS PAGE */ app-press-clippings.container, .subtopic-page.container, app-most-read-posts.container { padding: 0 !important; } .press-clippings-page.container, .subtopic-page-wrapper.container { margin-left: 0 !important; } /* TOPIC PAGE */ .topic-page { padding-top: 0; } /* TOPIC & MOST READ DIRECTIVE */ .most-read-horizontal .hide-short, .topic-directive .hide-short { display: none !important; } .most-read-horizontal .show-full, .topic-directive .show-full { display: block !important; } .most-read-horizontal .last-separator, .topic-directive .last-separator { padding-bottom: 20px; border-bottom: 1px solid #e3e3e3; } .most-read-horizontal .most-read-mobile { margin: 0 -25px; overflow: hidden; } /* HOME */ /* spotlight */ .home .spotlight-wrapper .spotlight-text-wrapper { max-width: 500px; } .home .spotlight-wrapper .spotlight-mobile-img { max-width: 500px; width: 100%; } .home .spotlight-text-wrapper .post-descr { padding-top: 10px; background-color: #fff; max-width: 93%; transform: translateY(-30px); } .home .spotlight-wrapper .spotlight-sub { margin-top: 20px; } .home .spotlight-wrapper .spotlight-sub:first-child { margin-top: 0; } /* article otd */ .home .daily-article-wrapper { max-width: 350px; width: 100%; } /* recent */ .home .recent-posts-wrapper { width: auto; margin: 0 -30px; margin-right: -25px; overflow: hidden; } /* reading list */ .home .reading-list-wrapper { margin-left: -25px; margin-right: -25px; width: auto; } .home .reading-list-wrapper .component-header-gold { transform: translateX(-40px); transform: translateX(-22px); } .home .reading-list-posts { flex-wrap: wrap !important; } .home .reading-list-post { display: block; flex: none; margin-right: 0; padding: 20px 0; width: 100%; max-width: 100%; border-bottom: 1px solid #e4cfe2; } .home .reading-list-wrapper .show-all { margin-top: 20px; } /* search styled pages padding fix */ .subtopic-page.container.mobile-bookmark-padding, app-press-clippings.container.mobile-bookmark-padding, app-most-read-posts.container.mobile-bookmark-padding, .mobile-bookmark-padding { padding-left: 10px !important; padding-right: 10px !important; } app-most-read-posts .container.list-page { margin-left: 0; } /* .home .daily-article-wrapper .daily-article { margin-left: -30px; } */ #app { /* overflow: hidden; */ } } /* XS */ @media screen and (max-width: 576px) { /* HOME */ #app { /* overflow: hidden; */ } .recent-post { min-width: 240px; } /* article otd */ .home .daily-article-wrapper { max-width: none; width: auto; margin: 0 -25px; overflow: hidden; } .home .daily-article-wrapper .daily-article { margin-left: 0; padding-left: 25px; padding-right: 25px; } .home .daily-article-wrapper .article-otd-title { transform: translateX(8px); } /* recent */ .home .recent-posts-wrapper { overflow-x: scroll; } .home .recent-posts { width: 135%; } /* social */ .home .social-wrapper .twitter-feed { margin: 0 -25px; overflow: hidden; max-width: none; } /* post detail */ .author-and-date span { font-size: 14px !important; } .post-page-container h1 { font-size: 20px; } .post-settings p { font-size: 14px; line-height: 22px; } /* LOGIN */ .login .container-fluid { padding-left: 0; padding-right: 0; } .login .login-wrapper { width: 100vw; height: 110vh; margin: 0; } .login .sm-yellow-triangle { bottom: 0; width: 100vw; padding-top: 77vw; } /* sm pages */ .first-login .first-login-margins { margin: 0; width: 100%; padding-left: 10px !important; padding-right: 10px !important; } .small-page, .first-login .first-login-margins { max-width: 100%; /* position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin-top: 0; margin-bottom: 0; */ padding-left: 30px; padding-right: 30px; overflow-y: auto; box-shadow: none; margin-bottom: 0; } .mt--25-mobile { margin-top: -25px !important; } .mb-25-mobile { margin-bottom: 25px; } .login-background { background: white; padding: 0; } .small-page h1 { font-size: 20px; } .small-page-button-wrap { flex-direction: column !important; } .small-page-button-wrap button { width: 100%; } .small-page-button-wrap a { margin-left: 0; margin-top: 15px; font-size: 14px; } .small-page.small-mtop { margin-top: 0; } .pt-100-mobile { padding-top: 100px; } } @media screen and (max-width: 450px) { /* sm pages */ .first-login .login-field-wrapper:first-child { margin-right: 0; } .first-login .email { margin-left: -10px; } .first-login .mobile, .first-login .email { width: 100%; } .forgot-password .password-requirements { margin-right: 25px; } .i-flex-mobile { display: inline-flex !important; } .flex-column-mobile { flex-direction: column !important; } .request-account .inline-field { max-width: 100%; width: 100%; } /* GENERAL */ .hide-450 { display: none !important } /* FOOTER */ #app { padding-bottom: 400px; } .sticky-footer .footer-container { height: 330px; } .sticky-footer .pharma-links-mobile { display: block !important; } .sticky-footer .pharma-links-mobile div:first-child { margin-bottom: 20px; } /* SUBTOPIC PAGE && similar pages */ .post-info, .press-info { flex-wrap: wrap; } .post-date { display: block; width: 100%; margin-top: 3px; } .toast-wrapper .toast-icon i.icon { width: 40px; height: 40px; } .toast-wrapper h1 { font-size: 12px; } } /* sm: 576px, md: 768px, lg: 992px, xl: 1200px */