body {
padding: 0;
margin: 0;
-webkit-text-size-adjust: 100%;
}
*::selection {
background-color: #D2DCFF;
}
body.sepia {
background-color: #FBFBFA;
}
body.dark {
background-color: #333331;
}
body:not(.user-is-tabbing) *:focus {
outline: none;
}
a, a:hover {
color: inherit;
}
@font-face {
/*Mixed Hebrew - English serif text*/
font-family: 'HebrewInEnglish Serif Font';
src: url('/static/fonts/Taamey-Frank/TaameyFrankCLM-Medium.ttf'), local(Georgia), local(serif);
unicode-range: U+0590-05FF, U+25CC;
}
@font-face {
/*Mixed Hebrew - English serif text*/
font-family: 'HebrewInEnglish Serif Font';
src: url('/static/fonts/Taamey-Frank/TaameyFrankCLM-Bold.ttf'), local(Georgia), local(serif);
font-weight: bold;
unicode-range: U+0590-05FF, U+25CC;
}
@font-face {
/*Mixed Hebrew - English serif text*/
font-family: 'HebrewInEnglish Serif Font';
src: url('/static/fonts/Taamey-Frank/TaameyFrankCLM-MediumOblique.ttf'), local(Georgia), local(serif);
font-style: italic;
unicode-range: U+0590-05FF, U+25CC;
}
@font-face {
/*Mixed Hebrew - English serif text*/
font-family: 'HebrewInEnglish Serif Font';
src: url('/static/fonts/Taamey-Frank/TaameyFrankCLM-BoldOblique.ttf'), local(Georgia), local(serif);
font-weight: bold;
font-style: italic;
unicode-range: U+0590-05FF, U+25CC;
}
@font-face {
/*Mixed English - Hebrew serif text*/
font-family: 'EnglishInHebrew Serif Font';
src: url("https://use.typekit.net/af/2011b6/00000000000000003b9b00c1/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n4&v=3");
font-weight: normal;
unicode-range: U+0041-007A;
}
@font-face {
/*Mixed English - Hebrew serif text*/
font-family: 'EnglishInHebrew Serif Font';
src: url("https://use.typekit.net/af/af619f/00000000000000003b9b00c5/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=n7&v=3");
font-weight: bold;
unicode-range: U+0041-007A;
}
@font-face {
/*Mixed English - Hebrew serif text*/
font-family: 'EnglishInHebrew Serif Font';
src: url("https://use.typekit.net/af/5cace6/00000000000000003b9b00c2/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=i4&v=3");
font-style: italic;
unicode-range: U+0041-007A;
}
@font-face {
/*Mixed English - Hebrew serif text*/
font-family: 'EnglishInHebrew Serif Font';
src: url("https://use.typekit.net/af/6c275f/00000000000000003b9b00c6/27/l?primer=7fa3915bdafdf03041871920a205bef951d72bf64dd4c4460fb992e3ecc3a862&fvd=i7&v=3");
font-style: italic;
font-weight: bold;
unicode-range: U+0041-007A;
}
@font-face {
font-family: 'Noto Color Emoji';
src: url('/static/fonts/NotoColorEmoji.ttf');
unicode-range: U+1F1E6-1F1FF;
}
@font-face {
font-family: 'Meltho';
src: url('/static/fonts/SyrCOMBatnan.otf');
unicode-range: U+0700-074F;
}
@font-face {
font-family: 'Noto Sans Samaritan';
unicode-range: U+0800-083F;
}
@font-face {
/*Greek*/
font-family: 'Cardo';
src: url('/static/fonts/Cardo-Regular.ttf');
unicode-range: U+0300-036F, U+0370-03FF, U+1D00-1D7F, U+1DBF, U+1F00-1FFF, U+2126, U+AB65, U+10140-1018F, U+101A0, U+1D200-1D24F;
}
:root {
/* font stacks */
--english-sans-serif-font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
--hebrew-sans-serif-font-family: "Heebo", "Roboto", sans-serif;
--english-serif-font-family: "Cardo", "Meltho", "HebrewInEnglish Serif Font", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif, "Noto Sans Samaritan";
--hebrew-serif-font-family: "Noto Color Emoji", "EnglishInHebrew Serif Font", "Cardo", "Taamey Frank", "adobe-garamond-pro", "Crimson Text", "Times New Roman", serif;
--serif-h1-font-size: 48px;
--serif-h2-font-size: 30px;
--serif-h3-font-size: 24px;
--serif-body-font-size: 18px;
--serif-small-font-size: 14px;
--sans-serif-h1-font-size: 40px;
--sans-serif-h2-font-size: 30px;
--sans-serif-h3-font-size: 22px;
--sans-serif-body-font-size: 16px;
--sans-serif-small-font-size: 14px;
/* colors */
--priors-darkblue: #133059;
--independence-maroon: #733122;
--constituting-green: #509B70;
--forging-slate: #7491B1;
--coming-war-orange: #C87448;
--civil-war-red: #A9373C;
--inline-link-blue: #4871bf;
--sefaria-blue: #18345D;
--highlight-blue: #DDEEFF;
--highlight-blue-light: #F0F7FF;
--beit-midrash-grey: #333333;
--dark-grey: #666666;
--medium-grey: #999999;
--light-grey: #CCCCCC;
--lighter-grey: #EDEDEC;
--lightest-grey: #FBFBFA;
--commentary-blue: #4B71B7;
--essay-links-green: #3B5849;
--tanakh-teal: #004E5F;
--mishnah-blue: #5A99B7;
--talmud-gold: #CCB479;
--midrash-green: #5D956F;
--halakhah-red: #802F3E;
--kabbalah-purple: #594176;
--liturgy-rose: #AB4E66;
--philosophy-purple: #7F85A9;
--taanitic-green: #00827F;
--chasidut-green: #97B386;
--mussar-purple: #7C416F;
--responsa-red: #CB6158;
--apocrypha-pink: #C6A7B4;
--modern-works-blue: #B8D4D3;
--grammar-green: #B2B272;
--reference-orange: #D4896C;
--miscelaneous-green: #3B5849;
--selected-option: #000000;
--select-blue: #0B71E7;
}
/* Font Family */
body, .sans-serif {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
--is-serif: initial; /* false */
}
.serif {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
--is-serif: ; /* true */
}
.sans-serif-in-hebrew {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
body, .en, .int-en {
--is-hebrew: initial; /* false */
}
.he, .int-he {
unicode-bidi: plaintext;
--is-hebrew: ; /* true */
}
* {
--hebrew-font-conditional: var(--is-hebrew) var(--hebrew-font);
font-family: var(--hebrew-font-conditional, var(--english-font));
}
.he {
font-size: 122%;
}
.int-he {
direction: rtl;
}
.int-he.enInHe {
direction: ltr;
}
.enInHe {
unicode-bidi: isolate;
}
.int-en.heInEn {
direction: rtl;
}
.btn, .btn-sm, .btn-xs {
display: inline-block;
color: white;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
margin: 10px 20px;
background-color: var(--sefaria-blue);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 7px;
cursor: pointer;
font-size: 16px;
box-sizing: border-box;
line-height: 19px;
text-align: center;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.btn.white, .btn-sm.white, .btn-xs.white {
background-color: white;
color: #333;
}
.btn {
width: 300px;
height: 50px;
}
.btn-sm {
width: 150px;
height: 40px;
}
.btn-xs {
width: 75px;
height: 30px;
}
/*
Legacy Style Guide Font Hierarchy -- the below should be refactored away in favor of the above
*/
.featureTitle .int-en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 50px;
font-weight: normal;
color: #000;
}
.pageTitle .int-en,
.pageTitle .int-he.enInHe {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 30px;
font-weight: normal;
color: #000;
}
.readerPanel.hebrew .he .enInHe {
font-size: 83%;
}
.readerPanel span.mediumGrey {
color: var(--medium-grey);
}
.chapterText .int-en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #333;
}
.chapterText.lowercase .int-en {
text-transform: none;
}
.sectionTitleText .int-en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 16px;
font-weight: normal;
color: #666;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.smallText .int-en,
.smallText .int-he.enInHe {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
font-weight: normal;
color: #999;
}
.systemText .int-en,
.systemText .int-he.enInHe {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
/* font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif; */
font-size: 16px;
font-weight: normal;
color: #000;
}
.contentText .int-en,
.contentText .en,
.contentText.en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 18px;
font-weight: normal;
color: #000;
}
.featureTitle .int-he {
font-family: "Heebo", sans-serif;
font-size: 40px;
font-weight: normal;
color: #000;
}
.pageTitle .int-he,
.pageTitle .int-en.heInEn {
font-family: "Heebo", sans-serif;
font-size: 30px;
font-weight: normal;
color: #000;
}
.chapterText .int-he {
font-family: "Taamey Frank", "Times New Roman", serif;
font-size: 22px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #333;
}
.sectionTitleText .int-he {
font-family: "Heebo", sans-serif;
font-size: 16px;
font-weight: normal;
color: #666;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.smallText .int-he,
.smallText .int-en.heInEn {
font-family: "Heebo", sans-serif;
font-size: 14px;
font-weight: normal;
color: #999;
}
.systemText .int-he,
.systemText .int-en.heInEn {
font-family: "Heebo", sans-serif;
font-size: 16px;
font-weight: normal;
color: #000;
}
.contentText .int-he,
.contentText .he,
.contentText.he {
font-family: "Taamey Frank", "Times New Roman", serif;
font-size: 18px;
font-weight: normal;
color: #000;
}
.italics {
font-style: italic;
}
/* end Legacy Style Guide */
#s2 {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#s2.headerOnly {
z-index: 1000;
height: 60px;
}
#readerAppWrap {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
body:not(.inApp).nochrome #s2 .headerNavSection a:not(.home),
body:not(.inApp).nochrome #s2 .headerLinksSection,
body:not(.inApp).nochrome #footerContainer {
display: none;
}
#bannerMessage {
color: white;
background-color: #4871bf;
height: 120px;
box-sizing: border-box;
padding: 0 36px;
display: flex;
transition: .5s;
}
#bannerMessage.hidden {
height: 0;
}
body.hasBannerMessage {
transition: padding-top .3s;
padding-top: 120px;
}
body.hasBannerMessage #s2.headerOnly {
height: 180px;
}
.interface-hebrew #bannerMessage {
direction: rtl;
}
#bannerMessageClose {
position: absolute;
top: -3px;
right: 7px;
color: white;
opacity: 0.5;
font-size: 26px;
cursor: pointer;
}
.interface-hebrew #bannerMessageClose {
right: auto;
left: 7px;
}
#bannerMessageContent {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
color: white;
max-width: 880px;
margin: 0 auto;
}
#bannerTextBox {
flex: 1;
}
#bannerTextBox a {
color: white;
}
#bannerButtonBox {
margin-left: 50px;
}
.interface-hebrew #bannerButtonBox {
margin: 0 50px 0 0;
}
#bannerMessage .mobileOnly {
display: none;
}
@media (max-width: 540px) {
#bannerButtonBox,
.interface-hebrew #bannerButtonBox {
margin:0;
margin-inline-start: 10px;
max-width: 170px;
}
#bannerMessage .mobileOnly {
display: block;
}
#bannerMessage {
padding: 0 10px;
}
}
@media (max-width: 450px) {
#bannerMessage {
font-size: 13px;
}
}
.noOverflowX {
overflow-x: hidden;
}
.readerApp {
display: flex;
flex: 1;
position: relative;
}
.noselect {
user-select: none;
}
input.noselect {
-webkit-user-select: auto; /* Safari/Opera -- required for Safari to allow inputs to be accessible. See http://caniuse.com/#feat=user-select-none "Known Issues" for details TODO Check back to see if bug is fixed in future version */
}
.interface-hebrew {
direction: rtl;
}
.interface-hebrew .int-en,
.interface-english .int-he {
display: none;
}
.interface-hebrew #panelWrapBox {
direction: rtl;
}
.interface-english #panelWrapBox,
.readerApp.interface-english .readerPanel {
direction: ltr;
}
#panelWrapBox {
position: absolute;
height: calc(100% - 60px);
box-sizing: border-box;
}
.multiPanel #panelWrapBox {
top: 60px;
}
#panelWrapBox.wrapBoxScroll {
overflow-x: scroll;
overflow-y: hidden;
}
.singlePanel #panelWrapBox {
padding-top: 0;
height: 100%;
top: 0;
}
.headerInner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: white;
z-index: 1001;
box-sizing: border-box;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.headerOnly .headerInner, .headerInner.boxShadow {
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.interface-hebrew .header {
direction: rtl;
}
.headerInner .headerNavSection {
display: flex;
justify-content: flex-start;
}
.headerInner .headerNavSection a {
font-size: 16px;
color: #666;
margin-inline-end: 30px;
font-weight: 500;
line-height: 26px;
vertical-align: middle;
}
.headerInner .headerLinksSection {
display: flex;
justify-content: flex-end;
min-width: 40%;
align-items: center;
}
.header .header-nav {
margin-top: 1px;
}
.header .header-links {
margin-top: 1px;
}
.header .textLink,
.header .home,
.header .menuButton,
.header .my-profile,
.header .notifications,
.header .readerNavMenuSearchButton {
cursor: pointer;
}
.header .textLink,
.header .menuButton,
.header .my-profile,
.header .readerNavMenuSearchButton {
display: inline-block;
color: #999;
border: none;
background: transparent;
padding: 0;
}
.header .my-profile,
.header .notifications {
display: inline-block;
vertical-align: middle;
}
.header .textLink,
.header .menuButton,
.header .my-profile {
font-size: 24px;
line-height: 24px;
margin-top: 2px;
}
.header .searchBox {
overflow: hidden;
display: flex;
align-items: center;
padding: 0;
text-align: inherit;
background: #EDEDEC;
border-radius: 250px;
width: 160px;
height: 30px;
}
.header .searchBox.searchFocused {
width: 280px;
}
.header .searchBox input {
background-color: transparent; /*for firefox */
padding: 0;
flex: 1;
height: 100%;
margin-bottom: 1px;
font-size: var(--serif-body-font-size);
}
.header .searchBox input::placeholder {
font-style: normal;
}
.header .search {
outline: none;
border: none;
box-shadow: none;
color: black;
font-size: 18px;
margin: 0;
width: 100px;
}
.header .searchFocused .search {
width: 200px;
}
.header .search.hebrewSearch {
font-size: 18px;
}
.mobileNavMenu {
position: fixed;
height: calc(100vh - 60px);
box-sizing: border-box;
top: 60px;
width: 100%;
background-color: white;
left: 0;
z-index: 1000;
overflow-y: scroll;
}
div:has(#bannerMessage) + .readerApp.singlePanel .mobileNavMenu {
position: fixed; /*This takes the 60px of the header plus 120px of the banner into account */
height: calc(100vh - 180px);
top: 180px;
}
@supports not selector(:has(a, b)) {
/* Fallback for when :has() is unsupported */
.mobileNavMenu {
position: absolute;
}
}
.mobileNavMenu.closed {
display: none;
}
.mobileNavMenu .searchLine {
padding: 15px 10px;
border-bottom: 1px solid #EDEDEC;
}
.header .mobileNavMenu .searchBox,
.header .mobileNavMenu .searchBox.searchFocused
.header .mobileNavMenu .searchBox .search,
.header .mobileNavMenu .searchBox.searchFocused .search {
width: 100%;
}
.header.mobile .ui-autocomplete {
width: 100% !important;
}
.mobileNavMenu a,
.mobileInterfaceLanguageToggle {
display: block;
color: #666;
font-size: 16px;
padding: 15px;
border-bottom: 1px solid #EDEDEC;
}
.mobileNavMenu a > img,
.mobileInterfaceLanguageToggle img {
margin-inline-end: 15px;
width: 16px;
height: 16px;
position: relative;
top: 3px;
}
.mobileNavMenu a > img.blackIcon {
opacity: 0.4;
}
.mobileNavMenu a.blue {
background-color: #18345D;
color: white;
border-bottom: unset;
}
.mobileNavMenu a.blue img {
filter: invert(1);
opacity: 1;
}
.mobileNavMenu .mobileAccountLinks {
background-color: #FBFBFA;
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.mobileNavMenu .mobileAccountLinks img {
opacity: 1;
}
.mobileNavMenu .mobileAccountLinks .login {
display: block;
padding: 15px;
}
.mobileNavMenu .profile-pic {
display: inline-block;
margin-inline-end: 11px;
position: relative;
top: 4px;
}
.mobileNavMenu .mobileAccountLinks .accountLinks {
display: block;
}
.header .mobileInterfaceLanguageToggle .int-en,
.header .mobileInterfaceLanguageToggle .int-he {
display: inline;
}
.mobileInterfaceLanguageToggle a {
display: inline;
padding: 0;
border: none;
}
.mobileInterfaceLanguageToggle .separator {
margin: 0 7px;
font-size: 13px;
}
.mobileInterfaceLanguageToggle .inactive {
color: #999;
}
.mobileNavMenu .logout {
color: #999;
}
.ui-autocomplete .ui-menu-item.search-override {
border-bottom: solid 1px #ccc;
padding-top: 12px;
}
.ui-autocomplete .ui-menu-item.hebrew-result a {
direction: rtl;
}
.ui-autocomplete .ui-menu-item.english-result a {
direction: ltr;
}
.header .home {
margin-top: 2px;
}
.header .home img {
vertical-align: middle;
height: 25px;
margin-top: -7px;
width: 92px;
}
.interface-hebrew .header .home img {
width: 77px;
}
.header .accountLinks {
display: flex;
align-items: center;
font-size: 16px;
margin-top: 2px;
color: #666;
}
.header .accountLinks > * {
margin-inline-start: 17px;
position: relative;
}
.header .accountLinks.anon a {
margin: 0;
}
.header .accountLinks.anon a:nth-last-child(2){
background: #FFFFFF;
border: 1px solid #EDEDEC;
box-sizing: border-box;
border-radius: 6px;
}
.accountLinks .help {
margin-inline-start: 23px;
margin-top: 3px;
}
.loggedIn .help {
margin-inline-start: 17px;
}
.loggedIn .help img {
height: 24px;
margin-bottom: 3px;
}
.accountLinks.anon .help {
margin-top: 6px;
}
.header .interfaceLinks {
display: block;
align-items: center;
margin-top: 2px;
color: #666;
cursor: pointer;
position: relative;
-webkit-margin-start: 20px;
-moz-margin-start: 20px;
margin-inline-start: 10px;
}
.header .interfaceLinks img {
height: 18px;
width: 18px;
vertical-align: middle;
margin-inline-end: 2px;
}
.header .interfaceLinks a.interfaceLinks-button::after {
display: inline-block;
background: no-repeat url("/static/icons/chevron-down.svg");
height: 10px;
width: 12px;
vertical-align: middle;
content: "";
transform: scale(0.75);
}
.header .interfaceLinks .interfaceLinks-menu {
top: 35px;
position: absolute;
z-index: 1;
width: 150px;
background: #FBFBFA;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
display:none;
overflow:hidden;
}
.header .interfaceLinks .interfaceLinks-menu.profile-menu {
top: 10px;
display: block;
}
.header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header.profile-menu {
padding: 10px 17px 10px 17px;
font-weight: 700;
color: #000000;
height: 23px;
}
.header .interfaceLinks .interfaceLinks-menu.profile-menu .profile-menu-middle {
margin-top: 5px;
margin-bottom: 5px;
}
.interface-english .header .interfaceLinks .interfaceLinks-menu {
right: 0px;
min-width: 150px;
width: max-content;
}
.interface-hebrew .header .interfaceLinks .interfaceLinks-menu {
left: 0px;
min-width: 150px;
width: max-content;
}
.header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px;
color: #999999;
padding: 12px;
border-bottom: 1px solid #CCCCCC;
}
.header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header:not(:first-child) {
border-top: 1px solid #CCC;
}
.interface-english .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
}
.interface-hebrew .header .interfaceLinks .interfaceLinks-menu .interfaceLinks-header {
font-family: "Heebo", sans-serif;
}
.interfaceLinks-options {
display: flex;
flex-direction: column;
padding: 4px 0;
}
.header .interfaceLinks .interfaceLinks-option {
display: flex;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 23px;
text-align: right;
color: #666666;
padding: 5px;
direction: ltr;
}
.header .interfaceLinks .interfaceLinks-option:hover {
background-color: var(--lighter-grey);
}
.header .interfaceLinks .interfaceLinks-menu.open {
display: block;
}
.interface-hebrew .header .interfaceLinks .interfaceLinks-option.int-bi {
direction: rtl;
}
.interface-english .header .interfaceLinks .interfaceLinks-option.int-bi {
direction: ltr;
}
.header .interfaceLinks .interfaceLinks-row {
align-items: center;
display: flex;
text-decoration: none;
font-style: normal;
font-weight: 400;
line-height: 18px;
text-align: right;
color: #000000;
font-family: "Roboto", "Heebo", "Helvetica Neue", Ariel, sans-serif;
padding: 5px 17px 5px 17px;
font-size: 14px;
text-decoration-color: #666666;
height: 23px;
}
.header .interfaceLinks .interfaceLinks-row:hover {
background-color: var(--lighter-grey);
}
div.interfaceLinks-row a:hover {
text-decoration: none;
}
.header .interfaceLinks .interfaceLinks-row.languages {
display: flex;
}
div.interfaceLinks-row a.active {
color: #000000;
display: flex;
order: -1;
}
div.interfaceLinks-row a.active::after {
content: "•";
padding: 0 4px;
}
div.interfaceLinks-row a {
color: #666666;
display: flex;
}
.header .interfaceLinks .interfaceLinks-row.bottom {
font-size: 14px;
text-decoration-color: #000000;
}
.header .interfaceLinks .interfaceLinks-menu.profile-menu .interfaceLinks-hr {
border-top: 1px solid #CCCCCC;
margin-top: 0px;
margin-bottom: 0px;
}
.header .interfaceLinks .interfaceLinks-row.logout {
font-size: 14px;
color: #666666;
padding-top: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.header .profile-menu-he {
color: #666666;
}
.header .interfaceLinks .interfaceLinks-option::before {
content: "";
font-family: FontAwesome;
color: #999;
font-weight: normal;
font-size: 13px;
font-style: normal;
padding: 0 15px;
}
.header .interfaceLinks .interfaceLinks-option.active {
order: -1;
}
.header .interfaceLinks .interfaceLinks-option.active::before {
content: "\f00c";
padding: 0 8px;
}
@media screen and (max-width: 910px) {
.header .headerInner {
padding: 0 15px;
}
.header .accountLinks .login {
padding: 5px 5px;
}
.header .accountLinks {
margin-inline-start: 5px;
}
}
@media screen and (max-width: 780px) {
.header .donate {
display: none;
}
}
@media screen and (max-width: 700px) {
.multiPanel .header .home {
display: none;
}
}
@media screen and (max-width: 580px) {
.header .interfaceLinks,
.accountLinks .help,
.header .notifications {
display: none;
}
}
.header .notifications.unread::after {
content:"";
background-color: #CB6158;
width: 8px;
height: 8px;
border-radius: 4px;
display: block;
top: 3px;
right: 1px;
position: absolute;
}
.header .login {
color: #666;
display: inline-block;
line-height: 1;
padding: 8px 15px;
}
.header .headerInner.mobile {
padding: 0 15px;
}
.header .headerInner.mobile {
display: flex;
}
.header .headerInner.mobile div {
flex: 1;
}
.mobileHeaderCenter {
text-align: center;
}
.header .headerInner.mobile .mobileHeaderLanguageToggle {
text-align: end;
}
.mobileHeaderLanguageToggle.hebrew .en,
.mobileHeaderLanguageToggle.english .he {
display: none;
}
.overlay {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.3;
position: fixed;
z-index: 1001;
}
.sefariaModalBox {
transition: none;
}
#interruptingMessageBox {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
z-index: 1001;
opacity: 1;
transition: opacity .3s ease-in;
}
#interruptingMessageBox.hidden {
opacity: 0;
}
#interruptingMessageOverlay, .whiteOverlay {
width: 100%;
height: 100%;
background-color: white;
opacity: 0.7;
position: absolute;
}
#interruptingMessage {
max-width: 90%;
max-height: 90%;
box-sizing: border-box;
position: absolute;
padding: 18px 15px;
z-index: 1001;
border: 1px solid #E6E6E6;
background-color: #FBFBFA;
text-align: center;
color: #666;
}
#interruptingMessage.sefariaModalContentBox {
background-color: #18345D;
color: white;
padding: 50px 70px;
border-color: transparent;
border-radius: 5px;
}
@media (max-width: 450px) {
#interruptingMessage.sefariaModalContentBox {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: 0;
}
}
#interruptingMessage.beitMidrashModalContentBox {
height: 230px;
width: 450px;
text-align: start;
background-color: var(--beit-midrash-grey);
color: var(--light-grey);
padding: 15px;
border-color: transparent;
border-radius: 5px;
}
@media (max-width: 450px) {
#interruptingMessage.beitMidrashModalContentBox {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border-radius: 0;
}
}
#interruptingMessage.beitMidrashModalContentBox .buttonContainer {
display: flex;
flex-direction: row;
width: calc(100% + 20px);
margin: 0 -10px;
}
#interruptingMessage.beitMidrashModalContentBox button {
margin: 10px;
}
#interruptingMessage.beitMidrashModalContentBox button.red {
background-color: var(--responsa-red);
color: white;
}
#interruptingMessage.beitMidrashModalContentBox .sefariaModalContent h2 {
margin-top: 0px;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
#interruptingMessage.beitMidrashModalContentBox button.light-grey {
background-color: var(--lighter-grey);
color: var(--dark-grey);
}
#interruptingMessage.beitMidrashModalContentBox button.dark-grey {
background-color: var(--beit-midrash-grey);
color: var(--light-grey);
border: 1px var(--light-grey) solid;
}
.beitMidrashModalInnerContent {
margin-bottom: 10px;
}
.sefariaModalContent {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
height: 100%;
font-size: 16px;
line-height: 1.5;
}
.interface-hebrew .sefariaModalContent {
direction: rtl;
}
.sefariaModalContent a {
color: white;
}
.sefariaModalContent h2 {
font-weight: normal;
font-size: 30px;
margin-bottom: 0px;
}
.sefariaModalInnerContent {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 40px;
}
.sefariaModalInnerContent div, .sefariaModalInnerContent h3{
display: flex;
align-items: center;
text-align: start;
padding: 10px 0;
}
.sefariaModalContent h3{
align-items: center;
text-align: start;
padding: 10px 0;
font-size: 18px;
line-height: 1.5;
font-weight: normal;
margin-bottom: 10px;
margin-top: 5px;
}
.sefariaModalBottomContent {
font-size: 16px;
color: #999;
}
.sefariaModalContent .button {
width: 100%;
}
.sefariaModalInnerContent img {
width: 16px;
height: 16px;
padding-right: 10px;
}
.readerApp.interface-hebrew .sefariaModalInnerContent img {
padding-right: 0;
padding-left: 10px;
}
#interruptingMessageContentBox {
position: relative;
border: 1px solid #CCC;
background-color: white;
}
#interruptingMessageContentBox.hasColorLine{
border-top: none;
}
.colorLine {
width: 100%;
height: 4px;
z-index: 101;
background: linear-gradient(90deg, var(--tanakh-teal) 0% 10%, var(--mishnah-blue) 10% 20%, var(--talmud-gold) 20% 30%, var(--midrash-green) 30% 40%, var(--halakhah-red) 40% 50%, var(--kabbalah-purple) 50% 60%, var(--liturgy-rose) 60% 70%, var(--philosophy-purple) 70% 80%, var(--taanitic-green) 80% 90%, var(--chasidut-green) 90% 100%)
}
#interruptingMessageClose.sefariaModalClose {
color: white;
}
#interruptingMessageClose {
position: absolute;
top: 2px;
right: 12px;
color: #AAA;
font-size: 32px;
cursor: pointer;
}
#interruptingMessageContent {
padding: 32px 32px 16px 32px;
}
#interruptingMessage h1 {
font-style: italic;
font-size: 28px;
font-weight: normal;
letter-spacing: 1px;
text-align: center;
margin: 0 0 30px;
color: #333;
}
.interface-hebrew #interruptingMessage h1 {
font-style: normal;
}
/* Styles used from previously existing modals */
.line-break {
white-space: pre-wrap;
}
#defaultModal {
width: 410px;
max-height: 100%;
max-width: 100%;
}
.interface-english #defaultModal {
text-align: left;
}
.interface-hebrew #defaultModal {
text-align: right;
direction: rtl;
}
#defaultModalBody {
color: #555555;
margin-top: 0;
}
#defaultModalBody .reactMarkdown {
font-family: "adobe-garamond-pro", Georgia, serif;
}
#defaultModal #defaultModalBody .sub {
color: var(--medium-grey);
font-size: 12px;
font-family: "Roboto", "Helvetica Neue", Helvetica, sans-serif;
}
#defaultModal .button {
margin-bottom: 20px;
}
#defaultModal img {
max-width: 100%;
}
#defaultModal .buttons {
text-align: right;
}
.leader {
font-weight: bold;
}
.center {
text-align: center;
}
#email-input-wrapper {
display: flex;
align-items: flex-start;
flex-direction: column;
}
.newsletterInput#email-input {
width: 300px;
padding: 10px;
margin-bottom: 20px;
border-radius: 7px;
border: 1px solid #EEEEEE;
color: var(--beit-midrash-grey);
}
.header .my-profile img {
height: 24px;
width: 24px;
border-radius: 50%;
display: block;
}
.header .readerNavMenuMenuButton {
margin: 0 8px 0 6px;
font-size: 17px;
}
.readerNavMenuSearchButton {
position: relative;
margin: 0 9px 0 7px;
top: -2px;
}
.header .readerNavMenuSearchButton {
top: 2px;
}
.readerNavTop .readerNavMenuSearchButton {
top: 0;
}
.readerNavMenuSearchButton img {
height: 18px;
width: 18px;
opacity: 0.4;
}
.sidebarSearch .readerNavMenuSearchButton img {
margin-top: 12px;
}
.header .headerNavContent {
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
top: 0;
padding-top: 60px;
z-index: 1000;
}
.ui-autocomplete {
position: absolute;
background: white;
list-style-type: none;
padding: 6px 0;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
z-index: 1000000 !important;
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.header > .ui-autocomplete {
z-index: 1000 !important;
}
.ui-autocomplete .ui-menu-item {
display: flex;
padding: 6px 12px;
}
.ui-autocomplete .ui-menu-last-item {
border-top: 1px solid var(--lighter-grey);
display: flex;
padding: 6px 12px;
}
.interface-hebrew .ui-autocomplete .ui-menu-item {
direction: rtl;
text-align: right;
}
.ui-autocomplete .ui-menu-item img {
display: inline-block;
opacity: .4;
height: 18px;
width: 18px;
}
.ui-autocomplete .ui-menu-item img.ac-img-User {
opacity: 1;
}
.ui-autocomplete .ui-menu-item a {
display: inline-block;
line-height: 21px;
font-size: 19px;
color: #000;
cursor: pointer;
margin: 0 10px;
vertical-align: top;
}
.ui-autocomplete .ui-menu-item.ui-state-focus {
background: #EDEDEC;
}
.ui-helper-hidden-accessible {
display: none;
}
.interface-hebrew .ui-autocomplete .ui-menu-item a {
direction: rtl;
text-align: right;
}
#globalWarningMessage {
position: fixed;
width: 100%;
z-index: 1000;
text-align: center;
bottom: 0;
color: white;
background-color: #EFB4B6;
padding: 14px 20px;
box-sizing: border-box;
}
#globalWarningMessage .close {
float: right;
cursor: pointer;
font-size: 20px;
}
.multiPanel .readerPanelBox {
box-sizing: border-box;
}
.readerPanelBox {
position: absolute;
height: 100%;
width: 100%;
direction: ltr; /* Even in Hebrew Interface we want scroll bars on the right */
}
.readerPanelBox + .readerPanelBox {
border-left: 1px solid #eee;
}
.readerPanelBox.sidebar {
border-left: none;
}
.readerPanel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: inherit;
}
.readerContent {
width: 100%;
height: calc(100% - 60px);
background-color: inherit;
}
.dark .readerContent {
color: white;
}
.readerContent .readerError {
padding: 100px 150px;
}
.readerContent .readerError .readerErrorText {
padding-top: 20px;
font-size: .8em;
}
.textColumn {
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
position: relative;
box-sizing: border-box;
background-color: inherit;
}
.textColumn .loadingMessage.base,
.sheetsInPanel .loadingMessage {
margin: 30px 0;
color: #999;
font-size: 16px;
font-style: normal;
text-align: center;
padding: 0 6px 4px;
}
.textColumn .loadingMessage.base.prev {
margin: 70px 0 0 0;
}
.textColumn .loadingMessage.base.next {
margin: 30px 0 70px;
height: calc(100% - 128px); /* The 128px here appears to be the minimum needed to keep a line on the screen when scrolling passes loaded content) */
}
.textColumn .textRange.loading + .textRange.loading {
display: none;
}
.int-he .int-he {
font-size: inherit;
}
.readerPanel .content {
direction: ltr; /* Even in Hebrew Interface, we want scroll bars on the right */
}
.readerPanel .he {
direction: rtl;
text-align: right;
unicode-bidi: initial;
}
}
.interface-hebrew .readerPanel .en {
direction: ltr;
}
.interface-hebrew .readerPanel.bilingual .en {
direction: ltr;
}
.interface-hebrew .readerPanel .contentInner,
.interface-hebrew .readerPanel .columnLayout,
.interface-hebrew .readerControls,
.interface-hebrew .readerPanel .textRange,
.interface-hebrew .readerPanel .readerNavMenu .gridBox,
.interface-hebrew .readerPanel.bilingual .readerNavMenu .gridBox,
.readerPanel.hebrew .readerNavSection,
.readerPanel.hebrew .readerNavMenu .gridBox {
direction: rtl;
}
.interface-english .readerPanel.hebrew .readerNavMenu .readerTocResources .gridBox {
direction: ltr;
}
.interface-english .readerPanel .readerNavMenu,
.readerPanel.english .readerNavSection,
.readerPanel.english .readerNavMenu .gridBox{
direction: ltr;
}
.readerPanel.bilingual .readerNavSection,
.readerPanel.bilingual .readerNavMenu .gridBox {
direction: ltr;
}
.readerPanel.english .he {
display: none;
}
.readerPanel.english .he.heOnly{
display: inline;
text-align: right;
}
.readerPanel.english .en {
display: inline;
}
.readerPanel.hebrew .he {
display: inline;
text-align: right;
}
.readerPanel.hebrew .en {
display: none;
}
.readerPanel.english .heOnly .he,
.readerPanel.bilingual .heOnly .he {
display: inline;
}
.languageToggle {
display: inline;
line-height: 32px;
}
.languageToggle img {
opacity: 0.4;
height: 18px;
width: 18px;
}
.bilingual .languageToggle .he {
display: none;
}
.loadingMessage {
font-size: 14px;
font-style: italic;
}
.bilingual .loadingMessage .he {
display: none;
}
.readerPanel.light {
background-color: white;
}
.readerPanel.sepia {
background-color: #f7f7f7;
}
.readerPanel.dark {
background-color: #333331;
}
.readerNavMenu,
.homeFeedWrapper {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.readerNavMenu .content,
.homeFeedWrapper .content {
box-sizing: border-box;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
font-size: 16px;
}
.readerNavMenu .content {
padding: 60px 0 0 0;
}
.singlePanel .readerNavMenu .content {
padding: 85px 0 0 0;
}
.singlePanel .readerNavMenu .categoryColorLine {
top: 60px;
}
.singlePanel .readerNavMenu.bookPage:not(.fullBookPage) .content {
padding-top: 25px;
}
.singlePanel .readerNavMenu.bookPage:not(.fullBookPage) .categoryColorLine {
top: 0;
}
.readerNavMenu.compare .content,
.readerNavCategoryMenu.compare .content,
.bookPage.compare .content {
padding: 30px 10px;
}
.readerNavMenu .content .contentInner {
width: 725px;
margin: 0 auto;
min-height: 520px;
max-width: 100%;
box-sizing: border-box;
padding-bottom: 70px;
padding-inline-start: 30px;
padding-inline-end: 30px;
}
.homeFeedWrapper .content .contentInner {
max-width: none;
}
.homeFeedWrapper.userStats .content .contentInner {
max-width: 660px;
margin: 0 auto;
}
.navTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 40px;
}
.navTitle.tight {
margin-bottom: 15px;
}
.readerNavMenu .navTitle h1,
.singlePanel .readerNavMenu .navTitle h1 {
margin-bottom: 0;
}
.navTitle + .dedication {
margin-bottom: 20px;
}
.navSidebarModule + .dedication {
margin-top: -30px;
}
.navTitle .languageToggle,
.tocTitle .languageToggle,
.header .languageToggle {
text-align: center;
color: #ccc;
display: inline-flex;
width: 32px;
height: 32px;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
font-size: 22px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.navTitleTab {
margin-inline-end: 26px;
color: #999;
}
.navTitleTab:hover {
color: inherit;
text-decoration: none;
}
.navTitleTab.current {
color: inherit;
pointer-events: none;
}
.readerNavMenu h1 .navTitleTab img {
height: 14px;
margin-inline-end: 6px;
}
.readerNavMenu h1 .navTitleTab.current img {filter: brightness(0.5);}
.sidebarLayout {
display: flex;
flex-direction: row;
}
@media (max-width: 700px) {
.sidebarLayout {
flex-direction: column;
}
}
@media (min-width: 1485px) {
.sidebarLayout {
max-width: 1485px; /*assuming inner is 665 and sidebar 420*/
margin: 0 auto;
}
}
.sidebarLayout h1 {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.interface-hebrew .sidebarLayout {
direction: rtl;
}
.readerPanel.hebrew .followsContentLang {
direction: rtl;
}
.navSidebar {
width: 420px;
background-color: #FBFBFA;
/* HACK: add grey background beyond bounding box of sidebar by utilizing negative margins! */
border-top: 80px solid #FBFBFA;
border-bottom: 120px solid #FBFBFA;
margin: -80px 0 0 0;
}
.singlePanel .navSidebar {
width: 100%;
margin: 20px 0 0 0;
padding: 30px 0 0 0;
border: none;
}
.navSidebarModule {
font-size: 16px;
color: #666;
margin-bottom: 34px;
padding: 0 44px;
}
.connectionsPanel .navSidebarModule{
padding: initial;
}
.singlePanel .navSidebarModule {
padding: 0 15px;
}
.singlePanel .contentInner .navSidebarModule {
padding: 0;
}
.singlePanel .contentInner .navSidebarModule h1 {
border: none;
padding: 0;
}
.readerPanel .navSidebarModule h3,
.readerPanel .navSidebarModule h1,
.readerPanel .bookPage h3{
margin: 0 0 20px;
font-size: 22px;
text-transform: none;
letter-spacing: 0;
border-bottom: 1px solid var(--light-grey);
padding-bottom: 14px;
font-weight: 500;
height: auto;
}
.navSidebarModule.blue {
background-color: var(--sefaria-blue);
color: white;
padding: 34px 44px 45px;
}
.singlePanel .navSidebarModule.blue {
padding: 34px 15px 45px;
}
.readerPanel .navSidebarModule.blue h3 {
color: white;
}
.navSidebarIcon {
height: 18px;
width: 18px;
margin-inline-end: 10px;
vertical-align: middle;
margin-top: -4px;
}
.navSidebarLink {
font-size: 16px;
margin-bottom: 10px;
}
.navSidebarLink a {
color: black;
}
.navSidebarLink.gray a {
color: #666;
}
.navSidebarLink > ul {
font-size: 18px;
margin-top: 16px;
display: flex;
flex-wrap:wrap;
padding: 0;
margin: 0;
}
.navSidebarLink > ul > li {
display: inline;
}
.navSidebarLink > ul > li:after {
content: "\2022";
white-space:pre;
margin: 0 5px;
}
.navSidebarLink > ul > li:last-child:after {
content: none;
}
.navSidebarLink .languageItem, .translationsPage .languageItem {
display: inline;
font-size: 18px;
}
.navSidebarLink.language {
font-size: 18px;
margin-top: 16px;
display: flex;
flex-wrap:wrap;
}
.navSidebarLink.ref {
font-size: 18px;
}
.navSidebar .linkList {
margin-top: 20px;
}
.navSidebarModule .button {
margin: 12px 0 0 0;
}
.navSidebarModule .button img {
filter: invert(1);
height: 18px;
width: 18px;
margin-inline-end: 10px;
vertical-align: middle;
margin-top: -2px;
}
.navSidebar .button.white img {
filter: none;
opacity: .6;
}
.navSidebar .button.appButton.white img {
opacity: 1;
}
.navSidebar .button.appButton.ios img {
margin-top: -5px;
}
.navSidebar .button + .button {
margin-inline-start: 7px;
}
.navSidebar .button.get-start {
height: 39px;
width: 221px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 0;
margin-right: 0;
}
.navSidebar .button .get-start {
white-space: nowrap;
size: 16px;
}
.navSidebar .button.get-start img {
filter: unset;
}
.navSidebar .readingsSection {
margin-bottom: 15px;
}
.navSidebar .readingsSectionTitle {
margin-bottom: 8px;
display: block;
}
.navSidebar a.allLink {
color: #999;
font-size: 13px;
}
.navSidebar a.moreLink:hover {
color: inherit;
cursor: pointer;
}
.navSidebar a.inTextLink,
.translationsDesc a.inTextLink {
color: inherit;
text-decoration: underline;
margin-inline-start: 5px;
}
.navSidebar .newsletterSignUpBox {
margin-top: 20px;
}
.navSidebar .newsletterSignUpBox .newsletterInput {
width: 100%;
box-sizing: border-box;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border: none;
}
.navSidebarModule.wide {
display: flex;
margin-bottom: 0;
}
.navSidebarModule.wide div:first-child {
flex: 1;
}
.navSidebarModule.wide .button {
margin-top: 0;
}
.navSidebarModule .authorByLine {
margin-bottom: 15px;
}
.navSidebarModule .imageModuleImage {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--lighter-grey);
}
.aboutTextMetadata {
margin-bottom: 20px;
}
.aboutTextMetadata .aboutTextComposedText,
.aboutTextMetadata .aboutTextAuthorText {
color: black;
}
.readerNavTop {
width: 100%;
background-color: #FBFBFA;
border-bottom: 1px solid #E2E2E1;
box-sizing: border-box;
height: 60px;
z-index: 1;
padding: 10px 25px 10px 25px;
vertical-align: middle;
display: flex;
justify-content: space-between;
align-items: center;
line-height: 60px;
}
.interface-hebrew .readerNavTop {
direction: rtl;
}
.readerNavTop .readerNavTopStart {
display: flex;
align-items: center;
justify-content: flex-start;
}
.singlePanel .readerNavTop {
padding: 0 10px;
}
.readerNavTop.colorLineOnly {
height: auto;
border-bottom: none;
padding: 0;
}
.readerPanel .readerNavTop h2 {
margin: 0;
font-weight: 400;
color: black;
}
.readerNavTop .readerNavTopCategory .en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.readerNavTop .readerNavTopCategory .he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
}
.readerNavMenu .readerSearch {
margin: 0;
width: 60%;
box-sizing: border-box;
border: none;
background-color: inherit;
font-size: 18px;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
height: 48px;
}
.readerNavMenu .readerSearch:focus {
outline: 0;
}
.readerNavTop .readerNavMenuSearchButton,
.readerNavTop .readerNavMenuCloseButton,
.readerNavTop .readerNavMenuMenuButton,
.readerNavTop .readerOptions {
text-align: left;
box-sizing: border-box;
color: #999;
float: left;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
}
.readerNavMenuCloseButton:hover {
text-decoration: none;
}
.readerNavTop .readerNavMenuCloseButton {
display: block;
font-size: 46px;
padding: 0;
margin-top: -6px;
}
.readerNavMenuCloseButton:hover {
text-decoration: none;
}
.readerNavTop .readerNavMenuCloseButton .fa {
font-size: 20px;
}
.readerNavTop .readerOptions {
float: right;
text-align: right;
display: flex;
align-items: center;
width:27px;
}
.sefariaLogo img {
width: 110px;
}
.readerNavTop .sefariaLogo img {
vertical-align: middle;
}
.readerNavTop .searchBox {
display: flex;
align-items: center;
justify-content: flex-start;
}
.interface-hebrew .sidebarSearch .searchBox,
.interface-hebrew .sidebarSearch .version,
.interface-hebrew .sidebarSearch .result-title {
direction: rtl;
}
.sidebarSearch .searchBox {
display: flex;
align-items: center;
padding: 0;
text-align: inherit;
background: var(--lighter-grey);
border-radius: 250px;
width: 100%;
height: 30px;
margin-bottom: 0;
}
.sidebarSearch .searchBox input {
background: transparent;
outline: none;
border: none;
box-shadow: none;
font-size: var(--serif-body-font-size);
width: 100%;
}
.sidebarSearch .searchTopMatter,
.sidebarSearch .searchTopic {
display: none;
}
.sidebarSearch .result-title {
padding: 14px 0 14px 0;
font-size: var(--serif-body-font-size);
border-top: 1px solid var(--lighter-grey);
margin-top: 14px;
color: var(--dark-grey);
}
.sidebarSearch .similar-results {
margin-inline-start: 30px;
}
.sidebarSearch .snippet.he,
.sidebarSearch .snippet.en {
font-size: var(--serif-body-font-size);
display: block;
}
.sidebarSearch .colorBarBox {
border-inline-start: none;
padding-inline-start: 0;
}
.readerNavTop .searchBox .readerNavMenuSearchButton {
margin: 0 5px 0 10px;
}
.interface-hebrew .readerNavTop .searchBox .readerNavMenuSearchButton {
margin: 0 10px 0 5px;
}
.readerNavTop .searchBox .readerSearch {
flex: 1;
}
.readerNavMenu h1,
.readerNavMenu h2.styledH1 {
text-align: start;
color: #666;
position: relative;
font-size: 22px;
font-weight: 500;
margin: 0 0px 30px 0;
height: auto;
text-transform: none;
}
.singlePanel .readerNavMenu h1,
.singlePanel .readerNavMenu h2.styledH1 {
margin-bottom: 10px;
}
.readerNavMenu h1 img {
margin-inline-end: 9px;
}
.readerNavMenu h1 :not(.languageToggle) .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.readerNavMenu h1 .button {
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 26px;
}
.singlePanel .readerNavCategoryMenu .readerTocTopics.content {
padding-top: 30px;
}
.topicPanel .readings {
margin-bottom: 40px;
}
.topicPanel .readings .parasha-date {
font-style: italic;
}
.topicPanel .readings .parasha-date > span:first-child::after {
content: '•';
color: #999;
font-size: 15px;
margin: 0 5px;
}
.topicPanel .readings .sectionTitleText {
margin-top: 15px;
}
.topicPanel .readings .sectionTitleText .int-en,
.topicPanel .readings .sectionTitleText .int-he {
font-size: 16px;
line-height: 18.75px;
text-transform: initial;
}
.topicPanel .readings .parasha .navSidebarLink {
margin-bottom: 0;
}
.topicPanel .readings .parasha .aliyot {
margin-inline-start: 25px;
}
.topicPanel .readings .haftarot {
display: flex;
flex-direction: column;
}
.topicPanel .mainColumn {
padding: 0 40px;
}
@media (max-width: 450px) {
.topicPanel .mainColumn,
.interface-hebrew .topicPanel .mainColumn {
padding: 0 25px !important;
margin: 0;
}
.topicPanel .filterable-list .filter-sort-wrapper, .collectionPage .filterable-list .filter-sort-wrapper {
margin-top: 20px;
}
}
.topicPanel .sideColumn {
width: 420px;
background-color: #FBFBFA;
/* HACK: add grey background beyond bounding box of sidebar by utilizing negative margins! */
border-top: 80px solid #FBFBFA;
border-bottom: 120px solid #FBFBFA;
margin: -80px 0 -120px 0;
}
.topicPanel h1 {
text-align: unset;
margin-bottom: 10px;
height: unset;
}
.topicPanel h1 span {
font-size: 40px;
}
.topicPanel .sideColumn h2 {
text-align: unset;
border-bottom: 1px solid #CCC;
padding-bottom: 10px;
margin-top: 30px;
margin-bottom: 10px;
}
.topicPanel .sideColumn .link-section{
padding: 0 44px;
}
.topicPanel .sideColumn .link-section:first-child h2 {
margin-top: 0;
}
.topicPanel h2 span {
font-size: 22px;
font-weight: normal;
color: #666;
text-align: unset;
text-transform: none;
margin-bottom: 20px;
height: unset;
line-height: unset;
}
.topicPanel h2 {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.topicPanel .mainColumn .story {
padding: 0 0 20px 0;
}
.topicPanel .mainColumn .storySheetListItem {
padding: 0 0 30px 0;
}
.topicPanel .sideColumn .sideList {
font-size: 18px;
line-height: 26px;
}
.topicPanel .sideColumn .sideList a.relatedTopic {
display: block;
color: #000;
}
.topicPanel .sideColumn .sideList .topicMetaData .int-en,
.topicPanel .sideColumn .sideList .topicMetaData .int-he {
color: #666;
}
.topicPanel .sideColumn .sideList a.relatedTopic .int-en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.topicPanel .sideColumn .sideList a.relatedTopic .int-he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
}
.topicPanel .sideColumn .topicCategory {
margin-bottom: 30px;
}
.topicPanel .authorOrganizationsystemText {
font-size: 16px;
color: #666;
}
.story .storyTitle {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.story .storyTitle .int-he {
font-size: 29px;
}
.topicPanel .story .storyTitle {
font-size: 24px;
}
.topicPanel h1 {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.topicPanel h1 .int.en {
font-size: 30px;
}
.topicPanel h1 .int-he {
font-size: 36px;
}
.pageTitle .topicTitleInHe .heInEn {
color: #888;
font-size: 20px;
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
}
.topicPanel .topicCategory {
margin: 0 0 15px 0;
}
.readerTocTopics .topicDescription {
margin: 10px 0 40px 0;
text-align: center;
}
.readerTocTopics .topicTitle .int-he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
}
.readerTocTopics .topicDescription.systemText .int-en,
.readerTocTopics .topicDescription.systemText .int-he {
color: #666;
}
.topicPanel .topicDescription {
margin: 0 0 15px 0;
}
.topicPanel .topicDescription a {
color: var(--commentary-blue);
}
.topicPanel .resourcesLink.blue {
padding: 8px 16px;
font-size: 20px;
border: 0;
display: inline-flex;
align-items: center;
width: unset;
margin-bottom: 40px;
margin-top: 5px;
}
.topicPanel .resourcesLink.blue img {
opacity: 1;
width: 20px;
height: 20px;
margin: 0 8px 5px 0;
filter: invert(1);
}
.interface-hebrew .topicPanel .resourcesLink.blue img {
margin: 0 0 5px 8px;
}
.topicPanel .resourcesLink.blue .int-en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.topicPanel .resourcesLink.blue .int-he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
margin-bottom: -3px;
}
.imageWithCaptionPhoto{
border: 1px solid #EDEDEC;
max-width: 100%;
height: auto;
padding: 0 44;
top: 121px;
left: 835px;
}
.imageCaption .int-en {
font-family: Roboto;
}
.imageCaption .int-he {
font-family: Roboto;
}
.imageCaption {
font-size: 12px;
font-weight: 400;
line-height: 15px;
letter-spacing: 0em;
color: var(--dark-grey);
width: 100%;
}
.topicImage{
padding-left: 44px;
padding-right: 44px;
}
.navSidebarModule .portalMobile .button {
margin-top: 0;
}
.portalTopicImageWrapper {
padding-top: 5px;
margin-bottom: 25px;
}
.portalTopicImageWrapper .topicImage {
padding-left: 0;
padding-right: 0;
}
@media (max-width: 600px) {
.imageWithCaptionPhoto{
height: auto;
max-width: calc(66.67vw);
max-height: calc(66.67vw);
margin-bottom: 10px;
}
.topicImage{
padding-left: 0;
padding-right: 0;
margin-top: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.imageCaption {
font-size: 12px;
font-weight: 400;
line-height: 15px;
letter-spacing: 0em;
color: var(--dark-grey);
width: 80vw;
margin-bottom: 30px;
text-align: center;
}
}
.readerPanel .translationsPage h2 {
margin: 40px 0 0 0;
font-size: 24px;
text-transform: none;
color: #000;
}
.translationsPage details > ul,
.translationsPage > ul {
padding: 0;
margin: 20px 0;
display: flex;
flex-wrap: wrap;
}
.translationsPage details > ul > li:after,
.translationsPage > ul > li:after {
content: "\2022";
white-space:pre;
margin: 0 5px;
}
.translationsPage details > ul > li:last-child:after,
.translationsPage > ul > li:last-child:after{
content: none;
}
.readerPanel .translationsPage details > summary::-webkit-details-marker {
display: none;
}
.readerPanel .translationsPage details > summary {
list-style: none;
cursor: pointer;
font-size: 18px;
}
h1 .languageToggle {
text-align: center;
position: absolute;
right: 0;
color: #ccc;
display: block;
width: 32px;
height: 32px;
border: 1px solid #ccc;
border-radius: 6px;
line-height: 34px;
cursor: pointer;
}
h1 div.languageToggle .en {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-weight: normal;
}
h1 .languageToggle .he {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 22px;
}
.authorIndexTitle {
margin-top: 30px;
}
.sectionTitleText.authorIndexTitle .int-en {
text-transform: none;
letter-spacing: 0;
}
.authorIndexList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20px;
}
.authorIndex {
width: 50%;
font-size: var(--serif-h3-font-size);
margin-bottom: 10px;
padding-right: 20px;
box-sizing: border-box;
}
.interface-hebrew .authorIndex {
padding-right: 0;
padding-left: 20px;
}
@media (max-width: 450px) {
.readerNavMenu.home .tagline {
margin-top: 29px;
height: 60px;
}
.readerNavMenu .tagline .en {
font-size: 19px;
}
.readerNavMenu .tagline .he {
font-size: 20px;
}
.authorIndex {
width: 100%;
padding: 0;
}
}
.readerNavMenu .libraryMessage {
font-size: 18px;
margin-bottom: 40px;
}
.readerPanel.hebrew .navToggles {
direction: rtl;
}
.readerNavMenu .navToggles {
flex-direction: row;
flex: 1;
margin-inline-start: 16px;
margin-top: 4px;
margin-bottom: 30px;
}
.readerNavMenu .navToggles .navTogglesDivider {
color: #ccc;
}
.readerNavMenu .navToggle {
margin-inline-end: 12px;
display: inline-block;
text-transform: uppercase;
color: #666;
font-size: 13px;
font-weight: lighter;
cursor: pointer;
}
.readerNavMenu .navToggle.active {
color: black;
border-bottom: 2px solid #999;
padding-bottom: 4px;
}
.readerPanel h2, .readerPanel h3,
.translationsPage details > summary {
text-transform: uppercase;
text-align: start;
font-size: 15px;
color: #666;
margin: 30px 0 0 0;
font-weight: normal;
}
.readerNavSection h2, .topicsPanel h2 {
font-size: 16px;
font-weight: normal;
letter-spacing: 1px;
margin-bottom: 40px;
}
.readerNavSection {
margin-bottom: 44px;
}
a.resourcesLink,
input.resourcesLink {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
min-height: 60px;
}
.savedHistoryList .story {
border-top: 1px solid var(--lighter-grey);
padding: 20px 0;
}
.savedHistoryList .story .storyTitle {
font-size: 18px;
}
.savedHistoryList .story .storyBody {
color: var(--dark-grey);
}
.savedHistoryList .saveButton {
visibility: hidden;
}
.savedHistoryList .story:hover .saveButton {
visibility: visible;
}
.savedHistoryList .timeStamp {
color: var(--medium-grey);
font-size: 14px;
margin-inline-start: 10px;
}
.savedHistoryMessage {
color: var(--dark-grey);
}
.readerNavCategories {
width: 100%;
margin-bottom: 30px;
}
.readerNavCategories a {
color: #000;
}
.readerNavCategories .gridBox .gridBoxItem,
.readerNavCategoryMenu .category .gridBoxItem {
margin: 0 5px;
padding: 0;
}
.navBlock {
padding-bottom: 12px;
border-top: 1px solid #EDEDEC;
}
.navBlock.withColorLine {
border-top: 4px solid transparent;
}
.navBlockTitle {
text-align: start;
font-size: 24px;
padding: 15px 0 8px;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
line-height: 1.3;
flex: 1;
font-weight: 400;
}
a.navBlockTitle {
color: #000;
margin-inline-end: 20px;
}
a.navBlockTitle:hover {
text-decoration: none;
color: var(--dark-grey);
}
.navBlockTitle .subtitle {
color: var(--dark-grey);
margin-inline-start: 5px;
}
.interface-english .calendarListing .subtitle::before {
content: "(";
}
.interface-english .calendarListing .subtitle::after {
content: ")";
}
.navBlockDescription {
font-size: 14px;
line-height: 18px;
color: #666;
margin-inline-end: 20px;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.hebrew .navBlockDescription{
line-height: 24px;
}
.categoryFilter:not(.withBooks) .sidebarDescription{
display: none;
}
.sidebarDescription{
color: var(--dark-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-small-font-size);
padding-top: 10px;
}
.sidebarDescription.lowlight{
color: var(--light-grey);
}
.navBlockTitle .int-he, .navBlockDescription .int-he{
font-size: 122%;
}
.interface-english .navBlockDescription.clamped .int-en,
.interface-hebrew .navBlockDescription.clamped .int-he {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.interface-english .navBlockDescription.clamped5 .int-en,
.interface-hebrew .navBlockDescription.clamped5 .int-he {
-webkit-line-clamp: 5;
}
.bilingual .navBlock .he {
display: none;
}
.navSidebarModule.wide {
background-color: #FAFAFB;
padding: 24px;
border-radius: 6px;
}
.navSidebarModule.wide h3 {
border-bottom: none;
margin-bottom: 0px;
}
.sidebarPromo {
color: var(--dark-grey);
padding-right: 44px;
padding-left: 44px;
}
.sidebarPromo:not(:first-child) {
margin-top: 34px;
}
.navSidebarModule .sidebarPromo {
margin-right: -44px;
margin-left: -44px;
}
.sidebarPromo h3 {
margin: 0 0 20px;
font-size: 22px;
text-transform: none;
letter-spacing: 0;
border-bottom: 1px solid var(--light-grey);
padding-bottom: 14px;
font-weight: 500;
height: auto;
}
.sidebarPromo.blue {
padding-top: 33px;
padding-bottom: 33px;
background-color: var(--sefaria-blue);
color: #FFF;
}
.sidebarPromo.blue h3 {
color: #fff
}
.sidebarPromo.blue a.button {
padding: 10px 14px;
width: fit-content;
text-align: center;
display: inline-block;
color: var(--sefaria-blue);
background-color: white;
}
.sidebarPromo a.button img {
height: 18px;
width: 18px;
filter: invert(1);
margin-inline-end: 10px;
vertical-align: middle;
margin-top: -2px;
}
.sidebarPromo.blue a.button img {
filter: invert(0);
}
.sidebarPromo a {
margin-inline-start: 0px;
}
.sidebarPromo.blue.button a:hover {
color: var(--sefaria-blue);
}
.sidebarPromo img {
height: 18px;
width: 18px;
margin-inline-end: 10px;
vertical-align: middle;
margin-top: -4px;
}
.readerPanel .communityPage h2 {
text-transform: none;
font-size: 22px;
color: #666;
margin-top: 0;
margin-bottom: 0;
}
.communityPage .gridBoxRow:first-child,
.communityPage .recentlyPublished {
border-top: 1px solid var(--lighter-grey);
}
.communityPage .gridBox {
margin-bottom: 30px;
}
.communityPage .gridBox .gridBoxItem {
padding: 0
}
.communityPage .gridBox {
margin-bottom: 25px;
}
.communityPage .navBlock {
padding: 25px 0 0 0;
border: none;
}
.communityPage .navBlockTitle {
padding-top: 0;
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.communityPage .readingLinks {
margin-top: 20px;
}
.communityPage .readingLinksHeader {
color: #666;
font-size: 14px;
margin-bottom: 4px;
}
.communityPage .readingLinks a {
font-size: 18px;
}
.communityPage .calendarDate {
font-size: 14px;
color: #999;
margin-bottom: 15px;
}
.featuredSheetHeading {
color: #666;
font-size: 16px;
margin-bottom: 10px;
}
.featuredSheet .navBlockDescription {
margin-bottom: 12px;
}
.featuredSheetBottom {
display: flex;
justify-content: flex-start;
align-items: center;
}
.featuredSheetDate {
color: var(--medium-grey);
font-size: 14px;
}
.communityPage .recentlyPublished {
padding-top: 30px;
}
.communityPage .recentlyPublished .gridBoxRow {
border: none;
}
.communityPage .recentlyPublished .loadingMessage {
margin-top: 30px;
}
.recentlyPublished .loadMore {
margin-top: 30px;
}
.bilingual .readerNavMenu .he {
display: none;
}
.readerNavCalendar {
margin-bottom: 30px;
margin-top: -8px;
}
.userDataButtons {
margin-bottom: 44px;
}
.blockLink,
.readerNavMenu .resourcesLink {
display: inline-block;
background-color: white;
text-align: center;
color: #000;
font-size: 16px;
border-top: 4px solid transparent;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
width: 100%;
cursor: pointer;
min-height: 56px;
vertical-align: middle;
margin: 0;
box-sizing: border-box;
padding: 14px 8px;
}
.blockLink:hover {
color: #333;
}
.blockLink + .blockLink {
margin: 5px 0;
}
.blockLink img {
margin: 0 8px;
height: 16px;
width: 16px;
opacity: 0.4;
vertical-align: -1px;
}
.resourcesLink {
border-radius: 7px;
}
.resourcesLink.faded {
color: #999;
}
.readerNavMenu .blockLink.calendarLink .blockLinkSubtitle{
display: block;
font-size: 13px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.readerNavMenu .resourcesLink .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.readerNavMenu .resourcesLink .he {
font-family: "Heebo", sans-serif;
}
.readerNavMenu .resourcesLink .fa {
margin: 0 6px;
color: #999;
}
.readerNavMenu .resourcesLink img {
width: 16px;
height: 16px;
margin: 0 5px;
position: relative;
top: 2px;
}
.uppercase {
text-transform: uppercase;
}
.readerNavMenu .divider {
color: #ccc;
}
.readerNavCategoryMenu {
height: 100%;
}
.readerNavMenu.readerNavCategoryMenu .navTitle {
margin-bottom: 40px;
}
.readerNavMenu.readerNavCategoryMenu h1 {
color: #000;
text-transform: uppercase;
font-size: 30px;
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.readerNavCategoryMenu h2 {
font-size: 18px;
color: #666;
margin: 0 0 20px;
}
.readerNavCategoryMenu .categoryDescription.top {
margin-top: -26px;
margin-bottom: 40px;
}
.readerNavCategoryMenu h2 .categoryDescription {
text-transform: none;
font-size: 18px;
margin-inline-start: 5px;
}
.readerNavCategoryMenu .categoryDescription {
margin-bottom: 16px;
font-size: 14px;
color: #666;
}
.readerNavCategoryMenu .categoryDescription.long {
margin: -8px 0 20px 0;
}
.readerNavCategoryMenu .content .category,
.readerNavCategoryMenu .content .gridBox {
margin-bottom: 40px;
}
.readerNavCategoryMenu .categoryAttribution {
color: #666;
text-align: start;
font-size: 24px;
font-style: italic;
margin: 16px 0 30px;
}
.readerNavCategoryMenu .categoryAttribution .he {
font-style: normal;
}
.readerNavMenu .blockLink,
.readerNavMenu .catLink,
.readerNavMenu .navButton,
.bookPage .refLink {
display: block;
margin: 0;
padding: 14px 8px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-top: 4px solid transparent;
color: #000;
font-size: 18px;
font-weight: 400;
line-height: 23px;
background-color: white;
cursor: pointer;
text-align: center;
unicode-bidi: plaintext;
flex: 1;
display: flex;
justify-content: center;
align-items: inherit;
flex-direction: column;
}
.readerNavCategoryMenu .blockLink,
.gridBox .navButton {
display: flex;
align-items: center;
justify-content: center;
}
.readerNavMenu .blockLink .he,
.readerNavMenu .catLink .he,
.readerNavMenu .navButton .he,
.bookPage .refLink .he {
text-align: center;
}
.blockLink:active,
.navButton:active,
.readerNavCategory:active,
.resourcesLink:active {
background-color: #EDEDED;
}
@media (max-width: 450px) {
.readerNavMenu .refLink,
.readerNavMenu .catLink,
.readerNavMenu .navButton,
.readerNavMenu .sheetLink,
.bookPage .refLink {
font-size: 18px;
}
}
.readerNavMenu .readerNavCategoryMenu .blockLink,
.gridBox .navButton {
width: 100%;
height: 100%;
padding: 13px 8px 19px;
display: inline-block;
}
.readerNavMenu .readerNavCategoryMenu .blockLink.incomplete {
opacity: 0.65;
}
.categoryColorLine {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
z-index: 101;
}
.readerApp.interface-hebrew .readerNavMenu.noLangToggleInHebrew .en {
display: none;
}
.readerApp.interface-hebrew .readerNavMenu.noLangToggleInHebrew .he {
display: inline;
}
.bookPage .readerTextToc {
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
}
.bookPage .readerTextToc .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.bookPage .readerTextToc .he {
font-family: "Heebo", sans-serif;
}
.readerNavMenu .dedication {
text-align: start;
color: #666;
background-color: #FBFBFA;
padding: 26px 19px;
font-size: 18px;
margin-bottom: 27px;
}
.singlePanel .readerNavMenu .dedication{
margin: 27px 0;
}
.readerNavMenu .dedication a {
text-decoration: underline;
}
.bookPage .categoryAttribution,
.bookPage .dedication {
margin: 25px 0 10px;
text-align: center;
font-size: 18px;
font-style: italic;
}
.bookPage .categoryAttribution,
.bookPage .dedication {
text-align: start;
}
.bookPage .categoryAttribution .he,
.bookPage .dedication .int-he,
.readerNavMenu .dedication .int-he {
font-style: normal;
}
.readerNavMenu .dedication .int-he {
font-family: "Heebo", sans-serif;
font-size: 18px;
}
.readerNavMenu .dedication .int-en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-style: italic;
}
.bookPage .tocTop {
padding-bottom: 15px;
}
.bookPage .tocCategory{
color:#999;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.bookPage.sheetPage .tocCategory{
margin-top: 15px;
margin-bottom: 15px;
display: block;
}
.bookPage .tocCategory .en {
--english-font: var(--english-sans-serif-font-family);
}
.bookPage .tocTitle,
.sheetContent .title,
.bookMetaDataBox .title {
text-align: center;
font-size: 30px;
line-height: 1.3;
unicode-bidi: plaintext;
}
.bookPage.fullBookPage .tocTitle {
text-align: start;
margin-bottom: 8px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bookPage .currentSection,
.bookPage .authorStatement,
.sheetContent .sheetMetaDataBox .authorStatement,
.sheetContent .sheetMetaDataBox .collectionStatement {
font-size: 17px;
color: #999;
margin-top: 6px;
letter-spacing: 1px;
}
.sheetContent .sheetMetaDataBox .authorStatement,
.sheetContent .sheetMetaDataBox .collectionStatement {
margin-top: 16px;
}
.sheetContent .sheetMetaDataBox .collectionStatement a,
.sheetContent .sheetMetaDataBox .authorStatement a {
color: #999;
margin-inline-start: 5px;
}
.bookPage .currentSection .he,
.bookPage .authorStatement .he,
.bookPage .sheetMeta .he {
font-family: "Heebo", sans-serif;
}
.bookPage .authorStatement a {
color: #333;
}
.authorStatement .imageBox,
.collectionStatement .imageBox {
width: 30px;
height: 30px;
display: inline-block;
vertical-align: middle;
margin-inline-end: 10px;
float:none;
}
.authorStatement .profile-pic {
margin-inline-end: 10px;
}
.authorStatement span p {
display: inline-block;
}
.fullBookPage .readButton {
margin: 6px 0px 12px;
}
.fullBookPage .about {
margin-top: 10px;
}
.fullBookPage .categoryAttribution {
color: var(--dark-grey);
font-size: 24px;
}
.bookPage .sheetMeta {
font-size: 14px;
color: #999;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
margin-top: 10px;
margin-bottom: 20px;
letter-spacing: 1px;
}
.bookPage.sheetPage .sheetMetaButtons{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
.bookPage.sheetPage .sheetMetaButtons .button{
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.bookPage.sheetPage .sheetMetaButtons .button img{
margin-inline-end: 5px;
max-height: 18px;
}
.bookPage .tocDetails{
margin-top:40px;
font-size: 16px;
line-height: 19px;
color: var(--dark-grey);
text-align: start;
}
.bookPage .tocDetails h3{
margin-bottom: 25px;
}
.bookPage .tocDetails .sheetSummary {
margin: 6px 0 16px;
font-style: normal;
font-size: 22px;
line-height: 1.4;
text-align: center;
}
.bookPage .moderatorSection {
margin-inline-start: 20px;
margin-inline-end: 20px;
}
.bookPage .moderatorSectionExpand, .bookPage .moderatorSectionCollapse {
cursor: pointer;
color: #666;
font-size: 14px;
}
.bookPage.fullBookPage .moderatorSectionExpand, .bookPage.fullBookPage .moderatorSectionCollapse {
margin: 13px 6px 0;
}
.bookPage.fullBookPage .tocTitleControls{
display: flex;
}
.bookPage .moderatorSectionExpand:hover {
text-decoration: underline;
}
.interface-english .bookPage .moderatorSection .button {
padding: 12px 16px;
font-size: 16px;
margin: 0 0 0 10px;
}
.interface-hebrew .bookPage .moderatorSection .button {
padding: 12px 16px;
font-size: 16px;
margin: 0 10px 0 0;
}
.bookPage .moderatorSection .moderatorSectionMessage {
margin-top: 20px;
font-size: 18px;
}
.bookPage .moderatorSection .button .fa {
color: #999;
margin-right: 4px;
}
.bookPage .versionEditForm {
text-align: left;
background-color: #ddd;
padding: 10px;
width: 100%;
}
.bookPage .versionEditForm label {
display: inline-block;
padding: 10px 10px 0 0;
}
.bookPage .versionEditForm label#versionNotes_label {
display: block;
}
.bookPage .versionEditForm #versionTitle,
.bookPage .versionEditForm #versionSource,
.bookPage .versionEditForm #versionNotes,
.bookPage .versionEditForm #versionTitleInHebrew,
.bookPage .versionEditForm #versionNotesInHebrew,
.bookPage .versionEditForm #purchase_name,
.bookPage .versionEditForm #purchase_url,
.bookPage .versionEditForm #purchase_image
{
width: 98%;
}
.bookPage .versionEditForm #priority {
width: 25px;
}
.bookPage .versionEditForm #digitzedBySefaria {
margin-right: 10px;
}
.bookPage .versionEditForm #save_button,
.bookPage .versionEditForm #delete_button {
text-align: center;
cursor: pointer;
color: white;
background: #212E50;
padding: 4px 10px;
border-radius: 3px;
margin: 10px auto 0;
width: 60px;
}
.bookPage .versionEditForm #delete_button {
float: right;
background: white;
color: #999;
border: 1px solid #999;
width: 100px;
margin: 0;
}
.bookPage .versionTitle .fa,
.bookPage .versionEditForm .fa {
font-size: 10px;
color: #666;
vertical-align: super;
margin-left: 3px;
cursor: pointer;
}
.interface-hebrew .bookPage .versionTitle .fa,
.interface-hebrew .bookPage .versionEditForm .fa {
margin: 0 3px 0 0 ;
}
.bookPage .versionTitle .error {
color: red;
}
.bookPage .content {
box-sizing: border-box;
text-align: center;
height: 100%;
}
.bookPage.fullBookPage .content {
text-align: start;
}
.bookPage .content .sheetTags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.textTableOfContents .structToggles{
margin-top: 20px;
margin-bottom: 20px;
}
.connectionsPanel .textTableOfContents .structToggles {
margin-top: 0;
}
.textTableOfContents .structToggles .structTogglesInner {
display: flex;
flex-direction: row;
align-items: start;
}
.interface-hebrew .textTableOfContents .structToggles{
direction: rtl;
}
.interface-english .textTableOfContents .structToggles{
direction: ltr;
}
.altStructToggleBox a, .altStructToggleBox a:hover, .altStructToggleBox a:visited, .altStructToggleBox a:link, .altStructToggleBox a:active {
text-decoration: none;
}
.textTableOfContents .structToggles .altStructToggle {
color: var(--dark-grey);
cursor: pointer;
text-align: start;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
text-align: justify;
}
.textTableOfContents .structToggles .altStructToggleBox:not(:last-child):after{
content: "•";
color: var(--dark-grey);
margin-inline-start: 5px;
margin-inline-end: 5px;
}
.bookPage.compare .structToggles .altStructToggle {
font-size: 16px;
}
.textTableOfContents .structToggles .altStructToggle.active {
color: #000000;
}
.textTableOfContents .structToggles .toggleDivider {
color: #ccc;
margin: 0 8px;
}
.textTableOfContents .sectionLink {
display: inline-block;
height: 50px;
min-width: 50px;
line-height: 50px;
vertical-align: middle;
font-size: 18px;
font-weight: lighter;
margin: 3px;
text-align: center;
background-color: #FBFBFA;
color: #666;
cursor: pointer;
padding: 0 6px;
box-sizing: border-box;
}
.textTableOfContents .torahNavParshiot .sectionLink,
.connectionsPanel .textTableOfContents .torahNavParshiot .sectionLink,
.topicPanel .readings .sectionLink{
display: initial;
background-color: initial;
font-size: 14px;
margin: 0;
padding: 0 4px;
line-height: 30px;
color: var(--medium-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.connectionsPanel .textTableOfContents .sectionLink {
background-color: #ffffff;
color: #000000;
}
.textTableOfContents .sectionLink.current{
background-color: var(--sefaria-blue);
color: #FFFFFF;
}
.textTableOfContents .torahNavParshiot .sectionLink.current{
color: var(--sefaria-blue);
font-weight: bold;
}
.textTableOfContents .sectionName {
display: none;
}
.textTableOfContents .tocSection > .sectionName {
font-size: 24px;
margin: 0 3px 4px;
color: #666;
display: block;
}
.bookPage .content .tab-view.largeTabs {
padding: 20px 0 40px;
text-align: start;
}
.bookPage.compare .content .textTableOfContents {
padding: 10px 0;
}
.bookPage.narrowPanel .textTableOfContents {
padding: 0 0 40px;
}
.textTableOfContents .tocSection {
margin-bottom: 22px;
display: block;
text-align: left;
}
.textTableOfContents .tocSection.noSubLevels{
display: none;
}
.textTableOfContents > .tocLevel {
margin-bottom: 30px;
}
.textTableOfContents > .tocContent > .tocLevel > .schema-node-toc > .schema-node-title {
font-size: 24px;
line-height: 29px;
}
.textTableOfContents .schema-node-title {
color: black;
font-size: 18px;
display: inline-block;
margin-bottom: 10px;
cursor: pointer;
}
.textTableOfContents .torahNavParshiot .schema-node-title {
font-size: 24px;
margin-bottom: 0;
}
.textTableOfContents .schema-node-toc {
display: block;
}
.textTableOfContents .schema-node-toc.linked.current,
.textTableOfContents .schema-node-toc.linked.current .schema-node-title {
color: var(--sefaria-blue);
font-weight: bold;
}
.textTableOfContents .schema-node-toc:not(.linked)>.schema-node-title:not(.fixed):after {
content: "\f105";
display: inline-block;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: FontAwesome;
margin-inline-start: 8px;
font-size: 14px;
position: relative;
top: -2px;
color: var(--medium-grey);
}
.textTableOfContents .schema-node-toc:not(.linked) > .schema-node-title.open:not(.fixed):after {
content: "\f107";
}
.readerPanel.hebrew .textTableOfContents .schema-node-toc:not(.linked) > .schema-node-title:not(.fixed):after,
.readerApp.interface-hebrew .noLangToggleInHebrew .textTableOfContents .schema-node-toc:not(.linked) > .schema-node-title:not(.fixed):after {
content: "\f104";
font-size: 122%;
margin-inline-start: 9px;
}
.readerPanel.hebrew .textTableOfContents .schema-node-toc:not(.linked) > .schema-node-title.open:not(.fixed):after,
.readerApp.interface-hebrew .noLangToggleInHebrew .textTableOfContents .schema-node-toc:not(.linked) > .schema-node-title.open:not(.fixed):after {
content: "\f107";
}
.textTableOfContents .schema-node-contents {
margin: 0 auto 22px;
display: block;
width: 100%;
}
.textTableOfContents .torahNavParshiot .schema-node-contents {
margin-bottom: 0;
}
.textTableOfContents .schema-node-contents > .tocLevel > .schema-node-toc:not(.janode){
margin-inline-start: 15px;
}
.textTableOfContents .schema-node-contents.closed {
display: none;
}
.textTableOfContents .schema-node-toc .schema-node-contents.closed {
display: block;
}
.textTableOfContents .tocLevel {
display: block;
}
.textTableOfContents .torahNavParshiot .tocLevel {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.textTableOfContents .torahNavParshiot .tocLevel .schema-node-toc {
flex: 1 1 50%;
text-decoration: none;
}
.textTableOfContents > .tocLevel > .schema-node-toc {
margin: 10px 0;
}
.textTableOfContents.schema-node-toc {
margin: 6px 20px;
}
.textTableOfContents .schema-node-toc.linked:hover .schema-node-title {
text-decoration: underline;
}
.textTableOfContents .specialNavSectionHeader {
font-size: 16px;
line-height: 18.75px;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
margin-bottom: 10px;
color: var(--dark-grey);
}
.textTableOfContents .torahNavParshiot{
margin-top: 30px;
}
.textTableOfContents .altStruct .refLink {
width: 49%;
margin: 3px;
box-sizing: border-box;
display: inline-block;
}
@media (max-width: 450px) {
.textTableOfContents .altStruct .refLink {
margin: 0.5%;
}
}
.hebrew .textTableOfContents .tocSection,
.hebrew .textTableOfContents,
.english .noLangToggleInHebrew .textTableOfContents,
.bilingual .noLangToggleInHebrew .textTableOfContents{
text-align: right;
}
.english .noLangToggleInHebrew .textTableOfContents,
.bilingual .noLangToggleInHebrew .textTableOfContents{
direction: rtl;
}
.bookPage .button.allVersionsButton {
color: #999;
text-transform: uppercase;
font-size: 15px;
padding: 12px 50px;
margin: 20px 0;
}
.bookPage .allVersionsButton.inactive {
background-color: transparent;
}
.versionBlock{
display: flex;
flex-flow: column;
}
.versionBlock .versionBlockHeading{
display: flex;
justify-content: start;
align-items: flex-start;
margin-bottom: 10px;
}
.versionBlock .versionTitle {
font-size: 18px;
color: #000;
/*unicode-bidi: plaintext;*/
}
.versionBlock.with-preview .versionPreviewWithOptionalEllipsis {
--english-font: "adobe-garamond-pro", var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
font-size: 18px;
display: block;
}
.versionBlock .versionPreview {
--line-height: 22px;
line-height: var(--line-height);
text-decoration: none;
}
.versionBlock .versionPreview big {
font-size: inherit;
}
.versionBlock .versionPreview i.footnote {
display: none;
}
.versionBlock.with-preview {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.versionBlock .versionPreview.shouldAttemptTruncation {
display: block;
overflow: hidden;
--max-lines: 5;
max-height: calc(var(--line-height) * var(--max-lines));
}
.version-with-preview-title-line {
display: inline;
flex-wrap: wrap;
font-size: 14px;
line-height: 22px;
color: var(--medium-grey);
margin-inline-start: 5px;
}
.version-with-preview-title-line .open-details {
display: inline;
margin-inline-end: 5px;
font-style: italic;
}
.versionBlock.with-preview summary {
margin-top: 10px;
}
[open] .versionBlock.with-preview summary {
margin-bottom: 10px;
}
.versionBlock.with-preview details summary::before {
content: url('/static/icons/little-chevron-down.svg');
}
.versionBlock.with-preview details[open] summary::before {
content: url('/static/icons/little-chevron-up.svg');
}
.versionBlock.with-preview summary::-webkit-details-marker {
/*hide marker for safari*/
display: none;
}
.versionBlock.with-preview summary {
/*hide marker for chrome*/
list-style: none;
cursor: pointer;
}
details .open-details::before {
margin-inline-end: 5px;
}
.version-with-preview-title-line .selectButton {
text-decoration: none;
}
.version-with-preview-title-line .selectButton.currSelectButton {
cursor: default;
}
.version-with-preview-title-line .selectButton:not(.currSelectButton) {
color: var(--select-blue);
}
.version-with-preview-title-line .selectButton::before {
content: "•";
margin-inline-end: 5px;
color: var(--medium-grey);
}
.version-block-with-preview-details {
background-color: var(--lighter-grey);
border-radius: 6px;
padding: 10px;
}
.versionDetails-version-title {
color: black;
}
.bookPage .versionBlock .versionTitle{
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 29px;
max-inline-size: max-content;
}
.versionsBox .versionBlock:not(.with-preview) {
border-top: solid 1px #CCC;
padding: 20px 0;
}
.versionsBox .versionBlock.with-preview {
padding: 15px 0;
}
.language-block .versionLanguage {
border-bottom: solid 1px #CCC;
}
.bookPage .versionsBox .versionBlock{
padding-top: 20px;
padding-bottom: 34px;
}
.bookPage .versionsBox .versionBlock:first-child{
padding-top: 0;
border-top: none;
}
.singlePanel .versionsBox .versionBlock .versionTitle .he {
display: inline;
}
.versionBlock .versionTitle a {
color: black;
}
.versionBlock .versionBlockHeading .versionLanguage {
display: none;
}
.bookPage .versionBlock .versionBlockHeading .versionLanguage{
display: initial;
margin-inline-start: auto;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px;
color: #666666;
background: #EDEDEC;
border-radius: 25px;
padding: 5px 10px;
}
.aboutBox .versionBlock .versionTitle:hover {
text-decoration: none;
}
.versionBlock .versionTitle a{
}
.versionBlock .versionBlockHeading .versionEditIcon{
display: none;
}
.versionBlock .versionBlockHeading .versionEditIcon.enabled{
display: inline-block;
align-self: self-start;
font-size: 14px;
padding: 5px;
}
.versionBlock .versionBlockHeading .versionEditIcon.enabled:hover{
color: #666666;
cursor: pointer;
}
.versionBlock .versionSelect{
margin: 10px 0;
}
.bookPage .versionBlock .versionSelect, .aboutBox .currVersionSection .versionSelect{
display: none;
}
.versionBlock .versionNotes a {
font-style: normal;
font-weight: normal;
color: #666666;
text-decoration: underline;
}
.versionBlock .versionDetails {
display: flex;
flex-flow: row;
justify-content: space-between;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 20px;
color: #666666;
}
.bookPage .versionBlock .versionDetails{
line-height: 20px;
}
.versionBlock .versionDetails .versionDetailsInformation{
display: flex;
flex-flow: column;
}
.versionBlock .versionDetails .versionDetailsImage{
margin-top: 5px;
}
.versionBlock .versionDetails .versionDetailsInformation .versionDetailsElement.versionBuyLink a{
color: #18345D;
}
.versionBlock .versionDetails .versionDetailsLabel, .versionBlock .versionDetails .versionDetailsLabel:hover{
text-decoration: none;
}
.versionBlock .versionDetails .versionBuyImage .versionDetailsImageLink img{
height: 120px;
}
.versionBlock .versionDetails .n-a, .versionBlock .n-a{
display: none;
}
.versionBlock .versionTitle:hover {
text-decoration: underline;
cursor: pointer;
}
.versionBlock .versionNotes {
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
color: #666666;
margin: 10px 0;
text-align: start;
}
.bookPage .versionBlock .versionNotes{
font-size: 16px;
line-height: 19px;
padding-bottom: 15px;
}
.versionBlock .versionEditIcon {
margin: 0 7px;
vertical-align: 1px;
}
.versionBlock .versionExtendedNotesLinks{
font-style: italic;
display: block;
}
.versionBlock .versionExtendedNotesLinks.no-notes{
display: none;
}
.versionBlock .versionExtendedNotesLinks{/*temporary because broken*/
display: none;
}
.modTools {
width: 50%;
margin: 0 auto;
overflow-y: scroll;
height: 100%;
}
.modTools .modToolsSection {
padding: 50px;
border-top: 1px solid #ccc;
}
.bookPage .content .dlSection {
}
.modTools .dlSectionTitle {
width: 60%;
margin: 0 auto;
}
.modTools .dlSectionTitle,
.bookPage .content h2 {
text-transform: uppercase;
color: #999;
padding: 10px 0;
margin-bottom: 14px;
}
.bookPage .content h2[role=button] {
cursor: pointer;
}
.bookPage .content h2 img {
opacity: 0.43;
padding: 0 5px;
height: 10px;
width: 10px;
}
.bookPage .versionSectionHeader {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bookPage .versionSectionSummary {
text-transform: none;
color: #ccc;
font-size: 14px;
}
.bookPage .versionSectionSummaryHidden {
visibility: hidden;
}
.modTools .dlVersionSelect {
display: block;
}
select {
width: 100%;
margin: 10px auto;
background-color: white;
font-size: 14px;
height: 50px;
border-color: #ccc;
border-radius: 3px;
color: #333;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.modTools .dlVersionSelect option,
.bookPage .content .dlVersionSelect option{
unicode-bidi: plaintext;
}
.modTools .modtoolsButton,
.bookPage .content .versionDownloadButton {
width: 60%;
margin: 10px auto;
background-color: white;
font-size: 14px;
height: 3em;
border: 1px solid #ccc;
border-radius: 3px;
color: #ccc;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.modTools .modtoolsButton .modtoolsButtonInner,
.bookPage .content .versionDownloadButton .downloadButtonInner {
font-size: 16px;
padding: 10px;
}
.modTools .modtoolsButton .he,
.bookPage .content .versionDownloadButton .he {
font-family: "Heebo", sans-serif;
direction: rtl;
text-align: right;
}
.modTools a .modtoolsButton,
.bookPage .content a .versionDownloadButton {
border-color: #212E50;
background-color: #212E50;
}
.modTools .workflowy-tool{
width: 60%;
margin: auto;
}
.modTools .workflowy-tool .dlSectionTitle{
width: unset;
}
.modTools .workflowy-tool .modtoolsButton{
color: black;
}
.modTools .workflowy-tool .modtoolsButton:hover{
background-color: #999;
}
.modTools .workflowy-tool textarea {
width: 100%;
min-height: 30rem;
font-family: "Lucida Console", Monaco, monospace;
font-size: 0.8rem;
line-height: 1.2;
}
.modTools .workflowy-tool .workflowy-tool-form{
display: flex;
flex-flow: column;
}
.dictionarySearchBox {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 5px;
color: var(--medium-grey);
font-size: 16px;
line-height: 19px;
width: 300px;
height: 30px;
background: var(--lighter-grey);
border-radius: 6px;
margin-bottom: 25px;
position: relative;
}
.dictionarySearchBox .dictionarySearchButton{
width: 16px;
height: 16px;
margin-inline-start: 8px;
margin-inline-end: 5px;
}
.searchBox.dictionarySearchBox .keyboardInputInitiator {
margin-bottom: 2px;
border: none;
}
.interface-hebrew .searchBox.dictionarySearchBox .keyboardInputInitiator {
display: none;
}
.dictionarySearchBox input {
font-size: 17px;
background-color: transparent;
border: none;
height: 18px;
margin-inline-end: auto;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.dictionarySearchBox input::placeholder{
font-size: 16px;
line-height: 19px;
color: var(--dark-grey);
}
body .ui-autocomplete.dictionary-toc-autocomplete {
margin-top: 40px;
padding: 6px 0 0;
width: 300px;
min-height: 85px;
max-height: 185px;
background: #FFFFFF;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
overflow-y: auto;
}
body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item {
padding: 4px 25px;
font-size: 22px;
line-height: 29px;
color: black;
cursor: pointer;
display: block;
}
body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item:hover{
background: var(--lighter-grey);
}
body .ui-autocomplete.dictionary-toc-autocomplete .ui-menu-item a.ui-state-focus {
text-decoration: underline;
}
.searchContent h1 {
height: 40px;
font-size: 30px;
color: #000;
margin-bottom: 5px;
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
}
.searchContent h1.englishQuery {
font-size: 30px;
}
.searchContent h1.hebrewQuery {
font-family: var(--hebrew-serif-font-family);
}
.searchContent .searchTopLine {
margin-bottom: 40px;
}
.searchContent .searchResultCount {
color: var(--dark-grey);
}
.searchContent .searchTopMatter {
position: relative;
display: flex;
border-bottom: 1px solid var(--light-grey);
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.searchTopMatter .type-buttons {
display: flex;
flex-direction: row;
align-self: flex-start;
}
.searchTopMatter .search-dropdown-button {
font-size: 22px;
color: #999;
cursor: pointer;
padding: 10px 0;
-webkit-touch-callout: none; /* iOS Safari */
user-select: none;
margin-inline-end: 20px;
}
@media (max-width: 540px) {
.searchTopMatter .search-dropdown-button {
margin-inline-end: 15px;
}
.searchTopMatter .search-dropdown-button,
.searchTopMatter .dropdown-button {
font-size: 16px;
}
}
.compare .searchTopMatter .search-dropdown-button {
margin-inline-end: 15px;
}
.compare .searchTopMatter .search-dropdown-button,
.compare .searchTopMatter .dropdown-button {
font-size: 16px;
}
.searchTopMatter .search-dropdown-button.active {
color: #000;
border-bottom: 4px solid var(--medium-grey);
}
.searchContent .searchResultList {
padding-top: 25px;
max-width: 665px;
padding-top: 25px;
max-width: 665px;
}
.searchResultList .topicTitle .int-en, .searchResultList .topicTitle .int-he {
font-size: 24px;
}
.searchContent .searchResultList #searchTopics {
border-top: 1px solid #EDEDEC;
border-bottom: 1px solid #EDEDEC;
padding-top: 30px;
padding-bottom: 5px;
margin-bottom: 25px;
}
.searchResultList .searchTopic {
margin-bottom: 30px;
}
.searchResultList .searchTopic .topicDescSearchResult {
margin-top: 10px;
}
.searchResultList .searchTopic .topicSourcesSheets {
margin-top: 10px;
}
.searchResultList .searchTopic .topicSourcesSheets.systemText .int-en,
.searchResultList .searchTopic .topicSourcesSheets.systemText .int-he {
color: #666666;
}
@media (min-width: 701px) {
/* prevent width of left-pane from changing due to content size when filters applied */
.searchContent .searchResultList {
width: 60vw;
}
}
.searchContent .searchFilters h2 {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: 22px;
text-transform: none;
color: var(--dark-grey);
border-bottom: 1px solid var(--light-grey);
padding-bottom: 10px;
margin: 0 0 10px 0;
}
.searchContent .searchStatusLine {
text-align: center;
font-size: 13px;
height: 10px;
}
.searchFilterBoxes .type-button {
padding: 6px 14px;
margin: 5px;
border-radius: 12px;
border: 1px solid #DADADA;
font-size: 13px;
color: #666;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
letter-spacing: 1px;
cursor: pointer;
}
.searchFilterBoxes .type-button .he {
font-family: "Heebo", sans-serif;
}
.searchFilterBoxes .type-button.active {
color: #000;
background-color: white;
}
.searchContent .type-button-title,
.searchContent .type-button-total {
display: inline-block;
padding: 2px;
}
.searchContent .results-count,
.searchContent .searchStatusLine > .loadingMessage {
color: #999;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
letter-spacing: 1px;
padding-top: 5px;
}
.dropdown-modal {
position: relative;
}
.dropdown-modal.position-unset {
position: unset;
}
.dropdown-button {
color: #666;
margin-left: 5px;
margin-right: 5px;
font-size: 18px;
letter-spacing: 1px;
cursor: pointer;
font-weight: lighter;
user-select: none;
}
.dropdown-button:hover {
text-decoration: underline;
}
.dropdown-button .active {
color: #000;
}
.dropdown-button .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.dropdown-button .he {
font-family: "Heebo", sans-serif;
}
.dropdown-button img {
opacity: 0.43;
padding: 0 5px;
height: 10px;
width: 10px;
}
.dropdown-button.buttonStyle {
letter-spacing: 0;
background-color: var(--lighter-grey);
font-size: 16px;
padding: 5px 10px;
border-radius: 6px;
margin: 0;
}
.dropdown-button.buttonStyle:hover {
text-decoration: none;
}
.message-modal {
position: fixed;
text-align: center;
padding: 10px;
background-color: #eee;
width: auto;
height: auto;
margin: 0;
z-index: 100;
overflow: hidden;
line-height: 1.2;
border-radius: 0;
max-width: 100%;
border-radius: 6px;
}
.message-overlay {
display: none;
position: fixed;
z-index: 20;
background: black;
opacity: 0.4;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.messageHeader {
font-weight: bold;
font-size: 14px;
margin-bottom: 4px;
}
.message-modal textarea {
display: block;
max-width: 100%;
height: 140px;
width: 480px;
box-sizing: border-box;
margin-bottom: 20px;
}
.searchContent .searchFilterGroup {
margin-bottom: 30px;
}
.searchContent .searchFilterBoxes li {
display: flex;
justify-content: space-between;
flex: 1 0 45%; /* see https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row */
padding: 6px 0;
font-size: 18px;
cursor: pointer;
line-height: 125%;
color: #000;
}
.searchContent .searchFilterBoxes li img {
height: 10px;
width: 10px;
opacity: 0.43;
padding: 0 10px;
}
.searchContent .searchFilterBoxes .searchFilterExactBox li {
justify-content: flex-start;
}
.searchContent .searchFilterBoxes li .checkboxAndText {
display: flex;
}
.searchContent .searchFilterBoxes li .checkboxAndText label {
opacity: 0.4;
}
.searchContent .searchFilterBoxes li .checkboxAndText label:hover {
opacity: 0.6;
}
.searchContent .searchFilterBoxes li input[type="checkbox"] {
display: none;
}
.searchContent .searchFilterBoxes li input[type="checkbox"] + label span {
display:inline-block;
width: 15px;
height: 15px;
cursor:pointer;
background-image: url(/static/img/checkbox-unchecked.svg);
background-size: contain;
margin-inline-end: 10px;
}
.searchContent .searchFilterBoxes li input[type="checkbox"]:checked + label span {
background-image: url(/static/img/checkbox-checked.svg);
}
.searchContent .searchFilterBoxes li input[type="checkbox"]:indeterminate + label span {
background-image: url(/static/img/checkbox-partially.svg);
}
.searchContent .searchFilterTitle:hover {
text-decoration: underline;
}
.searchContent .searchFilterBoxes li .filter-count {
color: var(--dark-grey);
}
.searchContent .searchFilterBoxes li .fa {
color: var(--medium-grey);
font-size: 20px;
}
.searchContent .searchFilterBooks {
padding-inline-start: 27px;
margin-top: -6px;
}
.searchContent .searchFilters .showMore {
display: block;
margin-inline-start: 27px;
cursor: pointer;
font-size: 14px;
margin-top: 4px;
background: none!important;
border: none;
padding: 0!important;
color: inherit;
}
.searchContent .searchFilters .showMore:hover {
text-decoration: underline;
}
.searchFilters .searchBox {
overflow: hidden;
display: flex;
align-items: center;
padding-left: 10px;
padding-right: 10px;
text-align: inherit;
background: #EDEDEC;
border-radius: 250px;
border: none;
width: calc(100% - 10px);
height: 30px;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-body-font-size);
margin-bottom: 10px;
}
.searchFilters .searchFilterIcon {
float: right;
margin: 0px -5px 1px 0px;
}
.searchBox input.searchFiltersInput {
width: calc(100% - 10px);
background-color: transparent;
border: 0;
font-size: var(--sans-serif-body-font-size);
}
.searchBox button {
border:0;
}
.dropdown-option-list {
margin-top: 10px;
background: white;
width: auto;
position: absolute;
z-index: 1;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
border: 1px solid #ccc;
}
.dropdown-option-list-label span {
white-space: nowrap;
}
.interface-english .dropdown-option-list {
right: 0;
}
.interface-hebrew .dropdown-option-list {
left: 0;
}
.dropdown-option-list.hidden{
display: none;
}
.dropdown-option-list table {
border-collapse: collapse;
}
.dropdown-option-list tr {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
padding: 15px;
font-size: 16px;
cursor: pointer;
}
.interface-hebrew .dropdown-option-list tr {
font-family: "Heebo", sans-serif;
}
.dropdown-option-list tr:hover {
background-color: var(--lighter-grey);
}
.dropdown-option-list tr:not(:last-child) {
border-bottom: 1px solid #eee;
}
.dropdown-option-list td:not(:first-child) {
padding: 15px 15px 15px 0;
}
.dropdown-option-list td:first-child {
padding: 0 0 0 15px;
}
.interface-hebrew .dropdown-option-list td:not(:first-child) {
padding: 15px 0 15px 15px;
}
.interface-hebrew .dropdown-option-list td:first-child {
padding: 0 15px 0 0;
}
.dropdown-option-list tr.unselected {
color: #aaa;
}
.dropdown-option-list tr .dropdown-option-check {
width: 10px;
height: 10px;
padding-left: 0;
padding-right: 10px;
}
.interface-hebrew .dropdown-option-list tr .dropdown-option-check {
padding-left: 10px;
padding-right: 0;
}
.dropdown-option-list tr.unselected .dropdown-option-check {
display: none;
}
.searchContent .mobileSearchFilters {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
z-index: 1002;
background-color: var(--lightest-grey);
}
.mobileSearchFiltersHeader {
background-color: var(--lighter-grey);
padding: 20px 15px;
display: flex;
justify-content: center;
color: var(--dark-grey);
}
.mobileSearchFiltersHeader .readerNavMenuCloseButton {
font-size: 45px;
color: var(--medium-grey);
height: 20px;
display: block;
line-height: 20px;
position: absolute;
margin-right: 100%;
margin-left: 45px;
}
.mobileSearchFilters .searchFilters {
flex-grow: 1;
overflow-y: scroll;
padding: 20px 15px;
}
.mobileSearchFilters .toggleSet {
width: 100%;
margin: 10px 0 0 0;
}
.mobileSearchFiltersFooter {
padding: 15px;
border-top: 1px solid var(--light-grey);
}
.searchContent .result {
padding-bottom: 20px;
}
.searchContent .result a:hover,
.sidebarSearch .result a:hover {
text-decoration: none;
}
.searchContent .similar-results {
padding: 0 25px;
}
.searchContent .similar-results .result-title {
display: none;
}
.searchContent .result-title {
font-size: 24px;
margin-bottom: 15px;
}
.searchContent .result-title .int-he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-size: 22px;
}
.searchContent .sheetResult .sheetData{
display: flex;
justify-content:flex-start;
align-items: center;
color: #999;
font-size: 13px;
margin: 15px 0 5px;
}
.searchContent .sheetResult .ownerData{
display: flex;
justify-content:flex-start;
align-items: center;
font-size: 13px;
}
.searchContent .sheetResult .ownerName {
color: #000;
margin-inline-start: 10px;
}
.searchContent .sheetResult .sheetData .tagsViews a:not(:last-of-type):after{
content: ",";
margin-inline-end: 4px;
}
.searchContent .sheetResult .sheetData .tagsViews a:first-of-type:before{
content: '•';
margin-inline-start: 4px;
margin-inline-end: 4px;
}
.searchContent .result .result-title:hover {
text-decoration: underline;
}
.readerPanel.english .searchContent .snippet.he,
.readerPanel.hebrew .searchContent .snippet.en,
.bilingual .searchContent .snippet.he {
display: block;
}
.searchContent .snippet {
font-size: 18px;
color: #000;
}
.searchContent .sheet_result .snippet:hover {
text-decoration: none;
}
.searchContent .similar-results .result .result-title {
padding: 0 0 5px;
}
.searchContent .result .version,
.sidebarSearch .result .version {
color: #999;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 13px;
margin: 15px 0 5px;
display: flex;
align-items: center;
}
.searchContent .result .version .ownerMetadata {
margin-inline-start: 10px;
}
.searchContent .result .similar-trigger-box,
.sidebarSearch .result .similar-trigger-box {
color: #999;
font-weight: lighter;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
padding: 0;
cursor: pointer;
margin: 8px 0;
}
.searchContent .result .similar-trigger-box i {
padding: 0 5px;
}
.searchContent .result + .loadingMessage {
margin-top: 30px;
}
.readerNavMenu .yourSheetsLink.navButton {
width: 98%;
margin-bottom: 20px;
text-transform: uppercase;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.readerNavMenu .sheet {
display: flex;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #eee;
color: black;
}
.readerNavMenu .sheet:hover{
text-decoration: none;
}
.readerNavMenu .sheet .sheetImg {
height: 40px;
width: 40px;
margin: 1px 0 0 0;
border-radius: 2px;
}
.readerNavMenu .sheet .sheetTextInfo {
display: flex;
justify-content: flex-start;
}
.readerNavMenu .sheet:hover .sheetTextInfo {
text-decoration: underline;
}
.readerNavMenu .sheet .sheetAuthTitle{
display: flex;
flex-flow: column;
margin: auto 14px;
}
.readerNavMenu .sheet .sheetAuthor {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #999;
font-size: 14px;
margin-bottom: 6px;
letter-spacing: 1px;
}
.readerNavMenu .sheet .sheetTitle {
overflow: hidden;
font-size: 16px;
unicode-bidi: plaintext;
}
.readerNavMenu .sheet .sheetViews {
color: #999;
font-size: 13px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.readerNavMenu .sheet:hover .sheetViews {
display: inline-block ;
text-decoration: none;
}
.interface-english .readerPanel .readerNavMenu .tagsList .gridBox {
direction: ltr;
}
.interface-hebrew .readerPanel .readerNavMenu .tagsList .gridBox {
direction: rtl;
}
.tagsList .heOnly {
direction: rtl;
}
.tagsList .enOnly {
direction: ltr;
}
.readerControls {
position: relative;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
text-align: center;
z-index: 100;
height: 60px;
line-height: 60px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: #FBFBFA;
}
.sepia .readerControls {
background-color: #F3F3F1;
}
.dark .readerControls {
background-color: #2D2D2B;
color: white;
border-color: #444;
}
.dark .readerControls .readerTextToc .readerTextTocBox {
color: white;
}
.readerNavMenuCloseButton {
font-family: var(--english-serif-font-family);
}
.readerControls.connectionsHeader {
background-color: #F3F3F2;
white-space: nowrap;
box-shadow: none;
}
.readerControls.connectionsHeader.fullPanel {
background-color: #EDEDED;
}
.readerControls .connectionsPanelHeader .connectionsHeaderTitle {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 16px;
font-weight: lighter;
}
.connectionsPanelHeader .connectionsHeaderTitle.active {
text-transform: none;
cursor: pointer;
}
.connectionsHeaderTitle .fa-chevron-left {
margin-right: 10px;
}
.connectionsHeaderTitle .fa-chevron-right {
margin-left: 10px;
}
.connectionsHeaderTitle .fa-chevron-left, .connectionsHeaderTitle .fa-chevron-right{
color: #999;
}
.readerControls .readerControlsInner {
position: relative;
width: 760px;
margin: 0 auto;
padding: 0 30px;
display: flex;
justify-content: space-between;
max-width: 100%;
box-sizing: border-box;
}
.compare .readerControls .readerControlsInner {
padding: 0 25px;
}
.readerControls.connectionsHeader .readerControlsInner {
padding: 0 34px;
}
.readerControls.transLangPrefSuggBann {
background-color: #EDEDEC;
z-index: 99;
}
.readerControls .readerControlsInner.transLangPrefSuggBannInner {
justify-content: center;
align-items: center;
line-height: initial;
height: 100%;
color: #666;
}
.readerControls.transLangPrefSuggBann .transLangPrefCentered {
display: flex;
align-items: center;
margin-inline-start: auto;
}
.readerControls .readerControlsInner.transLangPrefSuggBannInner .yesNoGroup {
margin: 0 10px;
display: flex;
}
.readerControls .readerControlsInner.transLangPrefSuggBannInner .yesNoButton {
border-radius: 6px;
background-color: white;
padding: 5px 11px;
margin: 0 7px 0 0;
user-select: none;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.interface-hebrew .readerControls .readerControlsInner.transLangPrefSuggBannInner .yesNoButton {
margin: 0 0 0 7px;
}
.readerControls .readerControlsInner.transLangPrefSuggBannInner .readerNavMenuCloseButton {
font-size: 35px;
margin-inline-start: auto;
margin-top: -6px;
color: #bbb;
}
.trans-pref-header-container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-inline: 12px;
padding-block: 10px;
align-items: center;
}
.trans-pref-header-container .trans-pref-reset {
display: flex;
align-items: center;
text-decoration: none;
}
.interface-hebrew .trans-pref-header-container .trans-pref-reset {
direction: rtl;
}
.interface-hebrew .trans-pref-header-container .trans-pref-reset .smallText {
padding-bottom: 2px;
}
.trans-pref-header-container img.reset-btn {
width: 10px;
height: 10px;
opacity: 0.4;
}
.singlePanel .readerControls .readerControlsInner {
padding: 0px 15px;
}
.readerControls .readerTextToc a {
color: inherit;
}
.readerControls .readerTextToc a:hover {
text-decoration: none;
}
.readerControls .readerTextToc .readerTextTocBox h1 {
display: unset;
font-size: unset;
font-weight: unset;
margin-block-start: unset;
margin-block-end: unset;
}
.readerControls .readerTextToc .readerTextTocBox a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.readerControls .readerTextToc .readerTextTocBox a .readerControlsTitle {
display: flex;
align-items: center;
justify-content: center;
}
.readerControls.connectionsHeader .readerTextToc {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
text-transform: uppercase;
color: #666;
width: 100%;
}
.readerControls .readerTextToc.attributed .readerTextTocBox {
line-height: 1.2;
}
.readerControls .readerTextToc .categoryAttribution {
font-style: italic;
font-size: 15px;
color: #999;
margin: 0 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 2px;
display: inline;
}
.readerControls .readerTextToc .categoryAttribution .he {
font-style: normal;
}
.interface-english .leftButtons,
.interface-hebrew .rightButtons {
display: flex;
flex-direction: row;
text-align: left;
}
.interface-english .rightButtons,
.interface-hebrew .leftButtons {
display: flex;
flex-direction: row;
text-align: right;
}
/* icons need a little nudge in flipped hebrew mode */
.interface-hebrew .rightButtons {
margin-left: -3px;
}
.interface-hebrew .leftButtons {
margin-right: 2px;
}
.leftButtons .saveButton,
.rightButtons .saveButton {
display: flex;
align-items: center;
justify-content: flex-end;
width: 30px;
height: 56px;
cursor: pointer;
}
.saveButton img {
height: 18px;
width: 18px;
margin-top: 3px;
}
.rightButtons .saveButton.tooltip-toggle::before {
top: 47px;
left: -50px;
}
.interface-hebrew .rightButtons .saveButton.tooltip-toggle::before {
left: auto;
right: -50px;
}
.saveButton.tooltip-toggle.three-dots-button {
background-color: #ededec;
padding: 0 6px; /* HACK: setting width and height to equal values doesn't make this circular, but this does! */
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.three-dots-button img {
width: 10px;
height: 10px;
margin-top: 0;
}
.topicPanel .mainColumn .saveLine .saveButton.three-dots-button {
margin-left: 10px;
margin-right: 0;
padding-bottom: 0;
}
.interface-hebrew .topicPanel .mainColumn .saveLine .saveButton.three-dots-button {
margin-left: 0;
margin-right: 10px;
}
.interface-hebrew .topicPanel .three-dots-button {
margin-left: 0px;
margin-right: 10px;
}
.leftButtons .readerNavMenuSearchButton,
.leftButtons .readerNavMenuMenuButton,
.leftButtons .readerNavMenuCloseButton,
.rightButtons .readerOptions,
.rightButtons .readerNavMenuCloseButton {
width: 40px;
height: 56px;
line-height: 56px;
color: #666666;
font-size: 20px;
display: inline-block;
cursor: pointer;
}
.readerOptions .int-en {
margin-right: 4px;
}
.readerOptions .int-he {
margin-left: 8px;
}
.readerOptions .int-he img {
height: 18px;
}
.rightButtons .readerOptions {
vertical-align: middle;
}
.rightButtons .readerOptions:hover {
text-decoration: none;
}
.leftButtons .readerNavMenuMenuButton {
font-size: 24px;
margin-top: 6px;
}
.compare .leftButtons .readerNavMenuMenuButton {
font-size: 20px;
}
.leftButtons .readerNavMenuCloseButton {
font-size: 44px;
}
.leftButtons .readerNavMenuSearchButton span,
.rightButtons .readerOptions img,
.leftButtons .readerNavMenuCloseButton span {
vertical-align: middle;
}
.readerControls .readerTextToc {
font-size: 18px;
box-sizing: border-box;
height: 50px;
text-align: center;
display: inline-block;
cursor: pointer;
vertical-align: middle;
min-width: 0; /* see https://css-tricks.com/flexbox-truncated-text/ */
}
.readerControls .readerTextToc.connected, .readerControls .readerTextToc.connected a{
cursor: initial;
}
.readerTextTocHeader.readerTextToc {
font-size: 16px;
}
.hebrew .readerControls .readerTextToc {
direction: rtl;
}
.english .readerControls .readerTextToc {
direction: ltr;
}
.interface-english .bilingual .readerControls .readerTextToc {
direction: ltr;
}
.interface-hebrew .bilingual .readerControls .readerTextToc {
direction: rtl;
}
.interface-hebrew .bilingual .readerControls .readerTextToc .readerTextTocBox.sheetBox,
.interface-hebrew .english .readerControls .readerTextToc .readerTextTocBox.sheetBox {
padding-left: 23px;
padding-right: 0;
}
.english .readerControls .readerTextToc .readerTextTocBox.sheetBox,
.bilingual .readerControls .readerTextToc .readerTextTocBox.sheetBox {
padding-right: 23px;
padding-left: 0;
}
.readerControls .readerTextToc .readerTextTocBox {
display: inline-block;
vertical-align: middle;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.readerControls .readerTextToc .readerTextTocBox a h1,
.readerControls .readerTextToc .readerTextTocBox a span,
.readerControls .readerTextToc .readerTextTocBox a div {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%;
}
.readerControls .readerTextToc .readerTextVersion {
font-size: 15px;
color: #999;
}
.readerControls .readerTextToc .fa {
color: #999;
font-weight: bold;
margin: 0 7px;
vertical-align: 0;
}
.readerControls .readerTextToc .fa.invisible {
visibility: hidden;
}
/*.bilingual .readerTextToc .he {
display: none;
}*/
.readerOptions img {
height: 16px;
}
.readerOptions .textIcon {
font-size: 22px;
line-height: 60px;
}
.dark .readerOptions img {
}
.readerOptionsPanel {
position: absolute;
width: 100%;
top: 58px;
right: 0;
padding: 20px;
box-sizing: border-box;
direction: ltr;
background: #FBFBFA;
border-bottom: 1px solid #ccc;
z-index: 103;
}
.readerOptionsPanelInner {
max-width: 530px;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
color: #999;
}
.toggleSet {
display: inline-block;
width: 47%;
margin: 2px auto 0 auto;
}
#accountSettingsPage .toggleSet {
display: flex;
}
#accountSettingsPage .additional-info {
color: var(--dark-grey);
}
/* #accountSettingsPage .saveCancel {
display: flex;
justify-content: space-between;
margin-top: 30px;
} */
.toggleSet.aliyotTorah, .toggleSet.punctuationTalmud, .toggleSet .toggle-set-label {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--english-sans-serif-font-family);
text-transform: uppercase;
}
.toggleSet .toggle-set-label{
font-size: 13px;
display: block;
text-align: center;
margin: 10px;
letter-spacing: 1.5px;
}
.toggleSetToggleBox {
display: flex;
}
.toggleOption {
font-size: 26px;
box-sizing: border-box;
text-align: center;
border: 1px solid #ccc;
margin-left: -1px;
padding: 4px;
height: 42px;
line-height: 34px;
flex: 1;
background-color: #FBFBFA;
vertical-align: middle;
}
.toggleSet.aliyotTorah .toggleOption,
.toggleSet.punctuationTalmud .toggleOption {
font-size: 14px;
}
.toggleSet.vowels .toggleOption.all span span,
.toggleSet.vowels .toggleOption.partial span span {
position: relative;
top: -3px;
}
.toggleSet.fontSize .toggleOption {
color: black;
}
.toggleSet.biLayout .toggleOption img,
.toggleSet.layout .toggleOption img {
opacity: 0.5;
}
.toggleOption:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.toggleOption:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid #999;
}
.toggleOption.on,
.toggleOption:hover {
background-color: white;
color: black;
}
.toggleSet.biLayout .toggleOption.on img,
.toggleSet.layout .toggleOption:hover img {
opacity: 1;
}
.toggleSet.separated .toggleOption {
margin-right: 3%;
border-right: 1px solid #999;
}
.toggleSet.separated .toggleOption:last-child {
margin-right: 0;
}
.color .toggleOption {
border-radius: 5px;
height: 38px;
}
.color .toggleOption.on {
border-color: black;
}
.color .light, .color .light.on {
background-color: white;
}
.color .sepia, .color .sepia.on {
background-color: #f7f7f7;
}
.color .dark, .color .dark.on {
background-color: #333331;
}
.toggleSet .toggleOption .he,
.toggleSet .toggleOption .en {
display: inline;
}
.toggleOption.bilingual {
font-size: 18px;
}
.toggleOption.segmented, .toggleOption.continuous {
font-size: 18px;
}
.toggleOption.smaller, .toggleOption.larger {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.interface-hebrew .toggleOption.smaller, .interface-hebrew .toggleOption.larger {
font-family: "Heebo", sans-serif;
}
.toggleOption.smaller {
font-size: 12px;
}
.toggleOption.larger {
font-size: 22px;
}
.toggleSet.blueStyle {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
border-radius: 6px;
}
.toggleSet.blueStyle.primary {
width: 100%;
}
.toggleSet.blueStyle.primary .toggleOption {
background-color: revert;
}
.toggleSet.blueStyle .toggleOption {
border: none;
font-size: 16px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.toggleSet.blueStyle .toggleOption.on {
background-color: var(--sefaria-blue);
color: white;
border-radius: 6px;
}
.readerOptionsPanel .line {
margin: 20px 0;
border-top: 1px solid #ddd;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 102;
cursor: pointer;
}
.textRange.basetext {
width: 100%;
box-sizing: border-box;
font-size: 2.2em;
line-height: 1.6;
text-align: justify;
background-color: inherit;
margin: 0 auto;
max-width: 760px;
position: relative;
padding: 0 30px;
}
.singlePanel .textRange.basetext,
.singlePanel .sheetContent {
padding: 0;
}
.narrowColumn .textRange.basetext {
}
.narrowColumn .content .contentInner {
padding: 0 15px;
}
.textRange.basetext .title, .sheetContent .customSourceTitle {
padding: 0 28px;
margin: 30px 0 24px 0;
color: #000;
text-align: center;
justify-content: center;
font-weight: lighter;
letter-spacing: 1px;
font-size: 1.1em;
}
.sheetContent .customSourceTitle {
padding-top: 14px;
}
.dark .textRange.basetext .title, .dark .sheetContent .title {
color: #ccc;
}
.textRange.basetext .title .titleBox, .sheetContent .customSourceTitle .titleBox {
display: inline-block;
border-bottom: 4px solid #E6E5E6;
padding: 0 6px 3px;
}
.dark .textRange.basetext .title .titleBox, .dark .sheetContent .title .titleBox {
border-bottom: 4px solid #666;
}
.bilingual .sheetContent .title .he {
display: none;
}
.interface-hebrew .readerPanel.english .textRange,
.interface-hebrew .readerPanel.english .categoryFilterGroup,
.interface-hebrew .readerPanel.bilingual .categoryFilterGroup,
.interface-hebrew .readerPanel.english .essayGroup,
.interface-hebrew .readerPanel.bilingual .essayGroup,
.interface-hebrew .readerPanel.english .textTableOfContents,
.interface-hebrew .readerPanel.bilingual .textTableOfContents {
direction: ltr;
}
.interface-english .readerPanel.hebrew .textRange,
.interface-english .readerPanel.hebrew .categoryFilterGroup,
.interface-english .readerPanel.hebrew .essayGroup,
.interface-english .readerPanel.hebrew .structToggles,
.interface-english .readerPanel.hebrew .textTableOfContents,
.interface-english .readerPanel.hebrew .connectionsPanel .toolsButton.more,
.interface-english .readerPanel.hebrew .connectionsPanel .toolsButton.seeLess {
direction: rtl;
}
.basetext .text, .sheetContent .text {
padding: 0 44px;
margin: 30px 0;
background-color: inherit;
}
.sheetContent .text.editorContent {
padding: 30px 44px;
margin: 0;
}
.narrowColumn .basetext .text, .narrowColumn .sheetContent .text {
padding: 0 26px;
}
.singlePanel .basetext .text, .singlePanel .sheetContent .text {
padding: 0 34px;
}
.parashahHeader {
text-align: center;
color: #000;
margin: 32px 0;
font-size: 24px;
letter-spacing: 1px;
}
.parashahHeader.aliyah span {
text-transform: uppercase;
font-size: 18px;
}
.title + .text span:first-child .parashahHeader {
margin-top: -5px;
}
.title + .text {
margin-top: 0;
}
.segment {
cursor: pointer;
display: block;
background-color: inherit;
margin-bottom: 14px;
}
.segment .segmentText table, th, td {
border: 1px solid;
}
.continuous .segment {
display: inline;
margin: 0;
padding: .3333em 0;
}
.readerPanel.english.continuous .segment {
padding: .15em 0; /* underline of named entities is cut off if padding is higher */
}
.continuous .clearFix {
display: none;
}
.segment .segmentText{
display: inline;
}
.segment > .he,
.segment > .en,
.segment > p > .he,
.segment > p > .en {
margin-top: 0;
margin-bottom: 0;
}
.basetext .segment {
margin-bottom: 26px;
}
.segment .segmentText .poetry.indentWhenWrap {
text-indent: -30px;
padding-inline-start: 30px;
display: inline-block;
}
.segment .segmentText .poetry.indentAll {
padding-inline-start: 30px;
display: inline-block;
}
.segment .segmentText .poetry.indentAllDouble {
padding-inline-start: 60px;
display: inline-block;
}
.continuous .segment .segmentText .poetry {
text-indent: initial;
padding-inline-start: initial;
display: inline;
margin-inline-end: .5em;
}
.continuous .segment .segmentText br {
display: none;
}
/*.hebrew.segmented .segment > .he,
.hebrew.segmented .segment > p > .he{
display: block;
}
.hebrew.continuous .segment > .he,
.hebrew.continuous .segment > p > .he{
display: inline;
}*/
.bilingual .segment > .he,
.bilingual .segment > p > .he{
display: block;
}
.bilingual .segment > .en,
.bilingual .segment > p > .en {
display: block;
}
.bilingual .segment > .en ,
.bilingual .segment > p > .en {
text-align: left;
}
.bilingual .segment > .he,
.bilingual .segment > p > .he {
text-align: right;
}
.stacked.bilingual .basetext .segment {
margin-bottom: 14px;
display: block;
}
.stacked.bilingual .segment > .en,
.stacked.bilingual .segment > p > .en {
margin-top: 6px;
text-align: left;
}
.stacked.bilingual .sheetContent .segment > .en,
.stacked.bilingual .sheetContent .segment > p > .en {
margin-top: 0;
}
.stacked.bilingual .basetext .segment > .en ,
.stacked.bilingual .basetext .segment > p > .en {
margin: 10px 0 20px;
color: #666;
}
.stacked.bilingual .segment.heOnly > .he,
.stacked.bilingual .segment.enOnly > .en,
.stacked.bilingual .segment.heOnly > p > .he,
.stacked.bilingual .segment.enOnly > p > .en {
display: block;
}
.heLeft.bilingual .basetext .text,
.heRight.bilingual .basetext .text,
.heLeft.bilingual .sheetContent .text,
.heRight.bilingual .sheetContent .text {
padding: 0;
}
.heLeft.bilingual .segment > .en,
.heLeft.bilingual .segment > .he,
.heRight.bilingual .segment > .en,
.heRight.bilingual .segment > .he,
.heLeft.bilingual .segment > p > .en,
.heLeft.bilingual .segment > p > .he,
.heRight.bilingual .segment > p > .en,
.heRight.bilingual .segment > p > .he {
width: 50%;
box-sizing: border-box;
display: block;
}
.heLeft.bilingual .sheetItem.enOnly > .en,
.heLeft.bilingual .sheetItem.heOnly > .he,
.heRight.bilingual .sheetItem.enOnly > .en,
.heRight.bilingual .sheetItem.heOnly > .he,
.heLeft.bilingual .sheetItem.enOnly > p > .en,
.heLeft.bilingual .sheetItem.heOnly > p > .he,
.heRight.bilingual .sheetItem.enOnly > p > .en,
.heRight.bilingual .sheetItem.heOnly > p > .he {
width: 100%;
}
.readerPanel .sheetItem.heOnly > .en,
.readerPanel .sheetItem.heOnly > p > .en {
display: none;
}
.readerPanel .sheetItem.heOnly > .he,
.readerPanel .sheetItem.heOnly > p > .he {
display: block;
}
.readerPanel .sheetItem.enOnly > .he,
.readerPanel .sheetItem.enOnly > p > .he {
display: none;
}
.readerPanel .sheetItem.enOnly > .en,
.readerPanel .sheetItem.enOnly > p > .en {
display: block;
}
.readerPanel.english .SheetSource .sheetItem.segment .en {
background-color: white;
}
.heLeft.bilingual .segment > .en,
.heRight.bilingual .segment > .he ,
.heLeft.bilingual .segment > p > .en,
.heRight.bilingual .segment > p > .he {
float: right;
padding-left: 20px;
}
.heRight.bilingual .segment > .en,
.heLeft.bilingual .segment > .he,
.heRight.bilingual .segment > p > .en,
.heLeft.bilingual .segment > p > .he {
float: left;
padding-right: 20px;
}
.basetext .segment:active,
.basetext .segment:focus {
background-color: #f5faff;
}
.sheetContent .segment:active .segmentNumber,
.sheetContent .segment:focus .segmentNumber,
.sheetContent .segment:active .linkCount,
.sheetContent .segment:focus .linkCount,
.basetext .segment:active .segmentNumber,
.basetext .segment:focus .segmentNumber,
.basetext .segment:active .linkCount,
.basetext .segment:focus .linkCount {
background-color: transparent;
}
.dark .basetext .segment:active,
.dark .basetext .segment:focus {
background-color: #444;
}
.basetext .segment.highlight,
.sheetContent .segment.highlight .en,
.sheetContent .segment.highlight .he,
.sheetContent .textPreviewSegment.highlight,
.editTextInfo .textPreviewSegment.highlight,
.readerPanel.bilingual.heLeft .sheetContent .segment.highlight,
.readerPanel.bilingual.heRight .sheetContent .segment.highlight,
.editorContent .sheetItem.highlight,
.editorContent .sheetItem.highlight .SheetSource .en,
.editorContent .sheetItem.highlight .SheetSource::after
{
background-color: #F0F7FF;
}
.sheetContent .segment.highlight .linkCount .en,
.sheetContent .segment.highlight .linkCount .he,
.sheetContent .segment.highlight .segmentNumber .en,
.sheetContent .segment.highlight .segmentNumber .he {
background-color: transparent;
}
.sheetContent .segment.highlight .en div,
.sheetContent .segment.highlight .he div {
background-color: inherit;
}
.sheetContent .segment a {
color: #4B71B7;
cursor: pointer;
}
.sheetContent .segment .sourceContentText a {
text-decoration: underline;
}
.readerPanel.bilingual.stacked .sheetContent .segment.highlight .he {
padding-bottom: 1px;
}
.basetext .segment.highlight .segmentNumber,
.basetext .segment.highlight .linkCount,
.sheetContent .segment.highlight .linkCount,
.sheetContent .segment.highlight .segmentNumber {
background-color: transparent;
}
.sepia .basetext .segment.highlight,
.sepia .sheetContent .segment.highlight {
background-color: #E3E3E1;
}
.dark .basetext .segment.highlight,
.dark .sheetContent .segment.highlight {
background-color: #444;
}
.textRange {
line-height: 1.4;
font-size: 1.6em;
}
.textRange .textInner, .sheetContent .textInner {
position: relative;
}
.textRange.lowlight .text {
color: #999;
}
.segment {
}
.segment.heOnly{
text-align: right;
direction: rtl;
}
.segment.enOnly{
text-align: left;
direction: ltr;
}
.segment.heOnly .en{
display: none;
}
.segment.enOnly .he{
display: none;
}
.segment.heOnly .he{
display: initial;
}
.segment.enOnly .en{
display: initial;
}
/*
This is an attempt to fix dictionary entries in this layout (hebrew continuous) from having the headwords flip to the right instead of left.
But not to use a display block directive that might break continuous mode for other English only texts
*/
.readerPanel.hebrew.continuous .segment.enOnly .en{
unicode-bidi: embed;
}
.readerPanel.hebrew .segment.enOnly .sheetSegmentNumber .en{
display: none;
}
.readerPanel.english .segment.enOnly .sheetSegmentNumber .he{
display: none;
}
.segment .segmentNumber,
.segment .linkCount,
.textRange .numberLabel {
position: absolute;
background-color: inherit;
font-weight: lighter;
color: #ccc;
display: block;
width: 30px;
text-align: center;
-webkit-text-size-adjust: 100%;
user-select: none;
-webkit-user-select: none;
}
.segmentNumber .segmentNumberInner,
.linkCount .linkCountDot {
display: inline-block;
user-select: none;
-webkit-user-select: none;
}
.bilingual .segmentNumber .segmentNumberInner,
.bilingual .linkCount .linkCountDot,
.bilingual .numberLabel .numberLabelInner {
margin-top: 0;
}
.segment .segmentNumber,
.segment .linkCount {
display: none;
line-height: 1.4;
}
.hebrew .segment .segmentNumber,
.hebrew .segment .linkCount {
display: none;
line-height: 1.6;
}
.sheetContent .segment .linkCount {
display: inline-block;
}
.segment .segmentNumber .segmentNumberInner,
.segment .segmentNumber .segmentNumberInner .he,
.textRange .numberLabel .numberLabelInner {
font-size: 12px;
vertical-align: middle;
}
.segment .segmentNumber,
.textRagnge .numberLabel {
color: #000;
top: 0;
}
.dark .segment .segmentNumber,
.dark .textRagnge .numberLabel {
color: white;
}
.segment .linkCount {
}
.segment .linkCountDot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 12px;
background-color: black;
vertical-align: middle;
}
.dark .segment .linkCount {
filter: invert(100%);
-webkit-filter: invert(100%);
}
.readerPanel .segment .segmentNumber .en,
.readerPanel .segment .segmentNumber .he {
text-align: center;
}
.readerPanel.english .segment .segmentNumber {
left: -48px;
}
.readerPanel.hebrew .segment .segmentNumber,
.readerPanel.bilingual .segment .segmentNumber {
right: -46px;
}
.readerPanel.hebrew .segment .linkCount,
.readerPanel.bilingual .segment .linkCount {
left: -48px;
}
.readerPanel.english .segment .linkCount {
right: -46px;
left: auto;
}
.readerPanel.heLeft.bilingual .segment .segmentNumber,
.readerPanel.heRight.bilingual .segment .segmentNumber {
left: 50%;
margin-left: -15px;
right: auto;
}
.readerPanel.heLeft.bilingual .segment .linkCount,
.readerPanel.heRight.bilingual .segment .linkCount {
visibility: hidden;
}
.singlePanel .readerPanel.english .segment .segmentNumber {
left: -30px;
}
.singlePanel .readerPanel.hebrew .segment .segmentNumber,
.singlePanel .readerPanel.bilingual .segment .segmentNumber {
right: -30px;
}
.singlePanel .readerPanel.english .segment .linkCount {
right: -30px;
}
.singlePanel .readerPanel.hebrew .segment .linkCount,
.singlePanel .readerPanel.bilingual .segment .linkCount {
left: -30px;
}
.singlePanel .readerPanel.english .sheetItem.segment .linkCount {
left: auto;
right: -30px;
}
.readerPanel.english .segment.heOnly .segmentNumber .he,
.readerPanel.bilingual .segment.heOnly .segmentNumber .he,
.readerPanel.hebrew .segment.enOnly .segmentNumber .en {
display: none;
}
.readerPanel.english .segment.heOnly .segmentNumber .en,
.readerPanel.bilingual .segment.heOnly .segmentNumber .en,
.readerPanel.hebrew .segment.enOnly .segmentNumber .he {
display: block;
}
.segment .refLink, .scrollLink {
font-size: .8em;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: #333;
}
.scrollLink:hover, .refLink:hover {
text-decoration: underline;
}
.segment .namedEntityLink {
color: inherit;
}
.segment .namedEntityLink:hover {
cursor: text;
text-decoration: none;
}
.segment.showNamedEntityLinks .namedEntityLink:hover {
/* only show named entity underline when class showNamedEntityLinks exists */
cursor: pointer;
border-bottom: 2px dotted #666;
}
.stacked.bilingual .segment .en .namedEntityLink:hover {
border-bottom-color: #666;
}
.textRange .actionLinks {
text-align: right;
}
.textRange .actionLinks > span {
font-size: 13px;
text-transform: uppercase;
display: inline-block;
margin: 0 7px;
cursor: pointer;
color: #aaa;
}
.textRange .actionLinks > span > img {
height: 13px;
width: 13px;
margin: 0 5px;
opacity: 0.3;
vertical-align: baseline;
}
.textRange .actionLinks > span > i {
margin: 0 5px;
font-size: 16px;
vertical-align: top;
}
.textRange .actionLinks .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", arial, sans-serif;
}
.textRange .actionLinks .he {
font-family: "Heebo", sans-serif;
}
/* Footnotes */
.segment sup,
.versionPreview sup {
margin-left: .2em;
margin-right: .2em;
text-decoration: none;
font-family: var(--hebrew-sans-serif-font-family);
font-size: 0.6em;
line-height: 1;
}
.segment sup.footnote-marker,
.segment sup.endFootnote{
color: var(--inline-link-blue);
}
.segment .he sup {
font-size: 0.6em;
}
.segment sup.footnote-marker:hover {
text-decoration: underline;
}
.sheetContent .segment sup:hover {
text-decoration: none;
}
.segment sup::before {
padding: 12px 12px;
content: "";
margin-inline-start: -7px;
position: absolute;
}
.segment sup.itag {
text-decoration: none;
font-family: var(--hebrew-sans-serif-font-family);
font-size: 0.5em;
line-height: 1;
color: var(--inline-link-blue);
}
.segment i.footnote {
display: none;
font-size: .8em;
margin-left: .5em;
margin-right: .5em;
color: #666;
font-style: normal;
}
.segment img {
max-width: 100%;
}
.segment i[data-overlay="Vilna Pages"] {
display: inline-block;
}
.segment i[data-overlay="Vilna Pages"]:after {
color: grey;
content: attr(data-value);
font-size: .4em;
font-style: normal;
font-family: var(--english-sans-serif-font-family);
}
.segment i[data-overlay="Venice Columns"] {
display: inline-block;
}
.segment i[data-overlay="Venice Columns"]:after {
color: grey;
content: attr(data-value);
font-size: .4em;
font-style: normal;
font-family: var(--english-sans-serif-font-family);
}
.connectionsPanelHeader {
display: flex;
justify-content: space-between;
align-items: center;
}
.singlePanel .connectionsPanelHeader {
justify-content: flex-start;
align-items: stretch;
height: 100%;
}
.interface-hebrew .connectionsPanelHeader {
direction: rtl;
}
.interface-english .connectionsPanelHeader {
direction: ltr;
}
.connectionsPanelHeader .rightButtons {
margin-top: -4px;
}
.connectionsPanelHeader .languageToggle,
.connectionsHeader .readerNavMenuCloseButton.circledX{
height: 32px;
width: 30px;
text-align: center;
line-height: 32px;
}
.readerNavMenu.compare {
background-color: var(--lightest-grey);
}
.readerNavMenu.compare .readerNavTop .readerNavMenuCloseButton.circledX {
height: 32px;
width: 30px;
display: flex;
align-items: center;
margin: 0 15px;
}
.connectionsPanelHeader .languageToggle {
margin: 0 15px;
}
.connectionsHeader .readerNavMenuCloseButton.circledX,
.readerNavMenu.compare .readerNavTop .readerNavMenuCloseButton.circledX {
width: 20px;
}
.connectionsHeader .readerNavMenuCloseButton.circledX img,
.readerNavMenu.compare .readerNavTop .readerNavMenuCloseButton.circledX img {
height: 20px;
width: 20px;
vertical-align: middle;
}
.readerNavMenu.compare .navBlockDescription,
.readerNavMenu.compare .categoryDescription {
display: none;
}
.readerNavMenu.compare .navToggles {
margin-inline-start: 0;
}
.connectionsPanelHeader .languageToggle img {
vertical-align: middle;
margin-top: -2px;
}
.connectionsPanel .flashMessage {
font-size: 18px;
color: #999;
margin-bottom: 30px;
text-align: left;
}
.interface-hebrew .connectionsPanel .flashMessage {
text-align: right;
}
.textList {
width: 100%;
height: 54%;
bottom: 0;
left: 0;
position: absolute;
margin: 0 auto;
background-color: #FBFBFA;
}
.textList.marginless .texts,
.textList.fullPanel.marginless .texts {
padding: 0 0 80px 0;
}
.dark .textlist {
background-color: #333331;
}
.textList.fullPanel {
padding-top: 60px;
height: 100%;
box-sizing: border-box;
}
.textList .texts {
height: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.textList .texts .contentInner {
max-width: 660px;
margin: 0 auto;
}
.textList .texts {
padding: 30px 30px 80px 30px;
}
.textList.fullPanel .texts {
padding: 40px 40px 80px 40px;
}
.textList .segment.heOnly,
.textList .segment.enOnly {
text-align: justify;
}
.textListTop {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: inherit;
z-index: 1;
}
.textList.fullPanel .textListTop {
text-align: center;
height: 55px;
}
.dark .textList {
background-color: #333331;
}
.dark .textList .anchorText {
background-color: #333331;
}
.textList .heOnly {
display: block;
}
.textList.fullPanel .textListTop .leftButtons {
margin: 9px 0 0 10px;
}
.textList.fullPanel .textListTop .rightButtons {
margin: 9px 10px 0 0;
}
.gridBox {
width: 100%;
background-color: transparent;
}
.gridBox .gridBoxRow {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
}
.gridBox .gridBoxItem {
flex: 1;
/* HACK: overflow hidden will hide any box shadow beneath (b/c overflow cuts off at padding-box) can get around this by increasing padding-box and decreasing margin-box. see here https://stackoverflow.com/questions/33949013/css-overflow-hidden-cuts-shadow*/
display: flex;
flex-direction: column;
padding: 5px;
}
.gridBox .gridBoxItem.placeholder {
visibility: hidden;
}
.gridBox .gridBoxItem:first-child {
padding-inline-start: 0;
margin-inline-start: 0;
}
.gridBox .gridBoxItem:last-child {
padding-inline-end: 0;
margin-inline-end: 0;
}
.dark .filterSet td {
border-color: #555;
}
.filterSet td.empty {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
.topFilters {
text-transform: none;
}
.dark .topFilters {
background-color: #2D2D2B;
border-bottom: 1px solid #444;
}
.textList.fullPanel .topFilters {
margin: 0;
border-top: 8px solid transparent;
padding: 6px 22px 5px;
background-color: #EDEDED;
}
.topFilters .textFilter {
color: #999;
display: inline-block;
padding: 16px 8px;
}
.topFilters .textFilter.on {
color: black;
}
.dark .topFilters .textFilter {
color: #bbb;
}
.topFilters .textFilter > div {
display: table-cell;
vertical-align: middle;
}
.textList.fullPanel .recentFilterSet {
margin: 0 0 12px 0;
}
.textList .recentFilterSet .textFilter,
.connectionsPanelHeader .recentFilterSet.topFilters .textFilter {
display: inline-block;
padding: 0;
margin: 6px 14px;
background-color: transparent;
color: #999999;
border-bottom: 4px solid #cccccc;
margin-inline-start: 0;
}
.connectionsPanelHeader .recentFilterSet.topFilters .textFilter {
margin: 18px;
margin-inline-end: 14px;
margin-inline-start: 0;
}
.textList .recentFilterSet .textFilter.on, .connectionsPanelHeader .recentFilterSet.topFilters .textFilter.on {
color: #000000;
border-bottom-color: var(--category-color);
}
.recentFilterSet.filterSet .textFilter, .recentFilterSet.filterSet .textFilter span{
font-family: "HebrewInEnglish Serif Font", "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.hebrew .textList .recentFilterSet.filterSet {
direction: rtl;
}
.textList.singlePanel .connectionsHeader .topFilters{
overflow-x: scroll;
overflow-y: hidden;
}
.topFiltersInner {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.textList.fullPanel .topFiltersInner {
white-space: normal;
}
.textList.singlePanel .versionsTextList .topFiltersInner .textFilter {
padding: 5px;
margin-bottom: 5px;
color: #999;
}
.textList.singlePanel .versionsTextList .topFiltersInner {
white-space: pre-wrap;
}
.showMoreFilters {
vertical-align: middle;
float: right;
}
.categoryFilter {
margin: 19px 34px;
font-size: 18px;
cursor: pointer;
line-height: 21.6px;
color: #000;
-webkit-tap-hightlight-color: rgba(0,0,0,0); /* pulled from common.css; should apply more broadly? */
}
.categoryFilter:not(.withBooks) .filterInner:before{
min-width: 18px;
width: 18px;
height: 16px;
content: '';
-webkit-mask: url("/static/img/connection-book.svg") no-repeat;
mask: url("/static/img/connection-book.svg") no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
line-height: 25px;
/**transform: scale(0.95);*/
display: inline-block;
background-color: var(--category-color);
}
.connectionsPanel .toolsButton.more{
color: #666666;
}
.connectionsPanel .toolsButton.seeLess{
margin-inline-start: 33px;
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 18px;
color: #999999;
align-items: center;
}
.connectionsPanel .toolsButton.seeLess img.toolsButtonIcon{
height: 10px;
width: 10px;
}
.connectionsPanel .toolsButton.seeLess .toolsButtonText{
margin-inline-start: 5px;
}
.connectionsPanel .topToolsButtons {
margin-top: 30px;
}
.categoryFilter:not(.withBooks) .filterText{
margin-inline-start: 15px;
margin-inline-end: auto;
}
.textFilter {
padding: 19px 0px;
font-size: 18px;
line-height: 1.2;
display: block;
cursor: pointer;
color: #333;
margin-inline-start: 34px;
margin-inline-end: 34px;
}
.connectionsCount {
color: #666;
font-size: 16px;
font-weight: lighter;
letter-spacing: 1px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
unicode-bidi: isolate;
}
.englishAvailableTag {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
text-transform: uppercase;
align-self: flex-start;
color: #999;
border: 1px solid #CCC;
border-radius: 3px;
font-size: 12px;
line-height: 18px;
padding: 0px 3px;
margin-left: 4px;
}
.filterInner {
display: flex;
justify-content: space-between;
align-items: center;
}
.essayGroup a:hover {
text-decoration: none;
}
.essayGroup .filterText {
margin-inline-start: 15px;
margin-inline-end: auto;
text-align: left
}
.essayGroup .filterInner:before{
min-width: 18px;
width: 18px;
height: 16px;
content: '';
-webkit-mask: url("/static/img/connection-book.svg") no-repeat;
mask: url("/static/img/connection-book.svg") no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
line-height: 25px;
/**transform: scale(0.95);*/
display: inline-block;
background-color: #3B5849;
}
.essayGroup .textFilter {
padding: 0 0 0 0;
margin: 19px 34px;
}
.categoryFilterGroup.withBooks {
/*border-bottom: 1px solid #E5E5E5;*/
border-top: 4px solid;
border-top-color: var(--category-color);
}
.categoryFilterGroup.withBooks .categoryFilter{
margin: initial;
margin-inline-end: 34px;
margin-inline-start: 34px;
padding: 19px 0px;
border-bottom: 1px solid #E5E5E5;
}
.categoryFilterGroup a:hover {
text-decoration: none;
}
.categoryFilterGroup.withBooks + .categoryFilterGroup {
/*margin-top: 30px;*/
}
.categoryFilterGroup .textFilter {
border-bottom: 1px solid #E5E5E5;
}
.categoryFilterGroup :first-child .textFilter {
border-top: 1px solid #E5E5E5;
}
.categoryFilter.on, .textFilter.on {
color: black;
}
.dark .categoryFilter.on, .dark .textFilter.on {
color: white;
}
.textFilter.lowlight {
color: #999;
}
.topFilters .textFilter.showMoreFilters {
color: #999;
}
.bilingual .textFilter .he,
.bilingual .categoryFilter .he {
display: none;
}
.textList .textListTop > .loadingMessage,
.textList .texts .contentInner > .loadingMessage {
padding: 22px 10px 0;
color: #999;
font-size: 14px;
text-align: center;
}
.textList .textListTop > .loadingMessage {
position: relative;
top: 70px;
}
.textList .texts {
position: relative;
background-color: #FBFBFA;
}
.sepia .textList .texts {
background-color: #FBFBFA;
}
.dark .textList .texts {
background-color: #333331;
}
.textList .texts .textRange {
font-size: 1.8em;
padding-top: 16px;
margin-top: 12px;
position: relative;
cursor: text;
}
.textList .texts .textRange .segment{
cursor: text;
}
.textListTextRangeBox {
border-bottom: 1px solid #eee;
}
.textList .texts .textRange .title {
color: #999;
}
.textList .texts .segment .queryTextHighlight {
padding: 0;
background-color: inherit;
font-weight: bold;
}
.dark .textList .texts .textRange .title {
color: #ddd;
}
.textList.singlePanel .textListTextRangeBox:first-child {
margin-top: -30px;
}
.textRange .title {
display: flex;
justify-content: space-between;
}
.textRange .title .buttons {
}
.bilingual .textList .title .he {
display: none;
}
.textList .sheetList .sheet,
.textList .note {
padding: 0 0 24px 0;
display: flex;
flex-flow: column;
}
.textList .sheet + .sheet {
padding: 24px 0;
border-top: 1px solid #E6E5E6;
}
.textList .sheetList .sheet a.sheetTitle {
margin-bottom: 0;
align-items: flex-start;
}
.textList .sheet .sheetInfo {
display: flex;
justify-content: space-between;
}
.sheet .sheetInfo .sheetUser {
display: flex;
align-items: center;
}
.textList .sheet .sheetAuthorImg,
.textList .note .noteAuthorImg {
height: 26px;
width: 26px;
vertical-align: -8px;
}
.textList .sheet .sheetViews {
color: #999;
font-size: 12px;
}
.textList .sheet .sheetAuthor,
.textList .note .noteAuthor {
color: #666;
font-size: 16px;
margin: auto 14px;
}
.textList .sheet .sheetTitle {
display: flex;
justify-content: flex-start;
margin-top: 14px;
font-size: 18px;
text-align: left;
color: #000;
}
.textList .sheet .sheetLeft .sheetTitle img.sheetIcon {
width: 14px;
height: 14px;
margin: 3px 0 0 0;
}
.textList .sheet .sheetTitle .sheetTitleText{
margin: auto 6px;
}
.textList .sheet .sheetTags {
display: flex;
flex-flow: row wrap;
margin-top: 6px;
font-size: 13px;
color: #999;
text-align: left;
}
.textList .sheet .sheetTag {
color: inherit;
display: inline-block;
white-space: nowrap;
}
.sheet .sheetRight {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding-top: 5px;
margin: 0 -4px;
}
.sheet .sheetRight img {
display: none;
padding: 0 5px;
width: 22px;
height: 22px;
margin: 0;
}
.sheet .sheetRight img.pinned,
.sheet:hover .sheetRight img {
display: block;
}
.sheet:hover .sheetRight img:hover {
opacity: 0.6;
cursor: pointer;
}
.sheet .sheetTag .separator {
display: inline-block;
margin-right: 8px;
}
.sheet .sheetTags .unlisted img,
.collectionListing .collectionListingDetails .unlisted img,
.tocTop .unlisted img {
width: 13px;
height: 13px;
opacity: 0.4;
margin-inline-end: 3px;
position: relative;
top: 2px;
}
.sheetTag.button,
.sheetTag.button:hover,
.sheetTag.button:active {
background-color: #EDEDED;
border-color: #ccc;
color: #999;
font-size: 14px;
margin: 4px;
}
.bookPage .sheetTag.button {
padding: 5px 16px;
height: 30px;
}
.textList .sheetList {
padding-top: 40px;
}
.textList .sheetList:first-of-type {
padding-top: 0px;
}
.textList .sheetList + .sheetList {
border-top: 1px solid #E6E5E6;
}
.textList .note .noteAuthorInfo {
margin-bottom: 14px;
}
.textList .note .noteTitle {
font-weight: bold;
}
.textList .note .noteTitle,
.textList .note .noteText {
font-size: 16px;
}
.textList .textListTextRangeBox + .sheet {
margin-top: 24px;
}
.mediaList .media {
border-top: solid 1px #CCC;
padding: 20px 0;
}
.mediaList .mediaTitle {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: #666;
padding-bottom: 15px;
}
.mediaList .mediaTitle .he {
font-size: 16px;
}
.mediaList .media .title {
font-size: 22px;
color: #000;
}
.mediaList .media a {
color: #999;
}
.mediaList .media .description {
margin: 10px 0;
font-size: 13px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
flex-flow: row;
justify-content: space-between;
color: #666;
}
.mediaList .media .panel{
background: #e6e6e6;
border-radius: 50px;
text-align: center;
margin: 15px 0;
padding: 15px;
font-size: 13px;
line-height: 15px;
flex-direction: row;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
text-align: left;
direction: ltr;
}
.mediaList .media .panel .playTimeContainer {
display: inline-flex;
align-self: center;
font-size: 13px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.mediaList .media .panel .playTimeContainer span {
margin: 0 15px;
}
.mediaList .media .panel .sliderContainer {
display: inline-flex;
flex: 2;
align-self: center;
}
.mediaList .media .panel input[type='image'] {
width: 10px;
height: 10px;
padding: 2.5px;
}
.slider {
-webkit-appearance: none;
height: 2px;
background: #4d4d4d;
outline: none;
opacity: 0.7;
width: 100%;
}
.slider:hover {
opacity: 5;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
border-radius: 50%;
background: #4871bf;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: #4871bf;
cursor: pointer;
}
/* All the same stuff for IE */
.slider::-ms-thumb {
width: 10px;
height: 10px;
border-radius: 50%;
background: #4871bf;
cursor: pointer;
}
.webpageList .website {
text-align: start;
display: flex;
justify-content: flex-start;
color: #000;
cursor: pointer;
font-size: 16px;
letter-spacing: 1px;
margin: 20px 34px;
align-items: center;
}
.webpageList .website .icon {
height: 16px;
width: 16px;
margin-top: 2px;
}
.webpageList .webpage {
margin-bottom: 30px;
text-align: left;
direction: ltr;
}
.webpageList .webpage.hebrew{
text-align: right;
direction: rtl;
}
.webpageList .webpage .icon {
margin-right: 10px;
}
.webpage.hebrew .icon {
margin: 0 0 0 10px;
}
.webpageList .webpage .title {
font-size: 22px;
color: black;
text-decoration: none;
margin-bottom: 10px;
}
.webpageList .webpage .title:hover {
text-decoration: none;
}
.webpageList .webpage .domain {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
.webpageList .webpage .description {
font-size: 18px;
color: #999;
}
.webpageList .webpage .webpageMetadata,
.mediaList .media .meta,
.manuscript .meta {
font-size: 13px;
color: #999;
margin-top: 5px;
}
.interface-hebrew .webpageList .webpage .webpageMetadata {
text-align: right;
direction: rtl;
}
.interface-english .webpageList .webpage .webpageMetadata {
text-align: left;
direction: ltr;
}
.webpageList .website .siteName {
margin-inline-start: 15px;
}
.manuscript .meta span,
.manuscript .meta a {
font-family: "Roboto", "sans-serif";
margin-top: 2px;
}
.manuscript .meta .int-he {
font-family: "Heebo", "sans-serif";
}
.webpageList.empty .loadingMessage {
margin-top: 0px;
}
.webpageList .webpagesLinkerMessage {
padding: 20px 0px;
color: #999;
border-top: 1px solid #E5E5E5;
font-size: 13px;
}
.marginless .webpageList .webpagesLinkerMessage {
padding: 20px 34px;
}
.webpageList .webpagesLinkerMessage a {
color: #999;
text-decoration: underline;
}
.manuscriptImage {
width: auto;
max-height: 180px;
border-radius: 3px;
}
.manuscriptCaption {
font-family: "Adobe Garamond Pro", "sans-serif";
font-size: 18px;
line-height: 22px;
margin-top: 13px;
margin-bottom: 2px;
border-bottom: 0px;
text-align: left;
}
.manuscriptCaptionHe {
font-family: "Taamey Frank", "Heebo", "sans-serif";
font-size: 22px;
line-height: 22px;
margin-top: 13px;
margin-bottom: 2px;
border-bottom: 0px;
text-align: right;
}
.fullSizeImageLink {
width: 292px;
height: 23px;
left: 830px;
top: 367px;
font-family: "Roboto", "sans-serif";
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 15px;
color: #999999
}
.manuscript {
border-bottom: 1px solid #DDDDDD;
margin: 29px 34px;
padding-bottom: 19px;
overflow-x: hidden;
}
.manuscript a {
color: inherit;
}
/*.manuscriptBorder {*/
/* border: 1px solid #dddddd;*/
/* position: absolute;*/
/* width: 292px;*/
/* height: 0px;*/
/* left: 830px;*/
/* top: 409px;*/
/*}*/
.manuscriptList :last-child {
border-bottom: 0px solid red;
}
.textList.marginless .webpageList.empty .loadingMessage {
margin: 50px 40px;
}
.textRange .numberLabel {
position: absolute;
top: 14px;
}
.english .textRange .numberLabel {
left: -24px;
}
.english .textRange .numberLabel.itag {
right: -30px;
left: initial;
}
.hebrew .textRange .numberLabel,
.bilingual .textRange .numberLabel {
right: -30px;
}
.multiPanel .textRange .numberLabel{
display: none;
}
.multiPanel .textRange .numberLabel.itag{
display: block;
color: #4871bf;
}
.textRange.lowlight .numberLabel {
color: #999;
}
.readerPanel.bilingual .connectionsPanel .he {
display: none;
}
.connectionsSummaryLoading {
padding: 20px 34px;
color: #999;
}
.connectionsPanel .connectionPanelSectionHeader{
margin-inline-start: 34px;
margin-inline-end: 34px;
margin-top: 30px;
margin-bottom: 15px;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 13px;
}
.connectionsPanel .connectionPanelSectionHeader .connectionPanelSectionHeaderInner{
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
letter-spacing: 0em;
text-align: justified;
color: #666666;
text-transform: uppercase;
}
.connectionsPanel .connectionsSummaryLoading .loadingMessage {
margin-top: 0;
}
.textListTextRangeBox {
position: relative;
}
.textListTextRangeBox .textRange{
margin-bottom: 0;
padding-bottom: 0;
}
.textListTextRangeBox .connection-buttons, .versionsTextList .connection-buttons{
margin-bottom: 28px;
display: flex;
align-items: flex-start;
align-content: flex-start;
}
.connection-buttons.access-user .connection-button.delete-link{
display:none;
}
.connection-buttons .connection-button,
.version-block-with-preview-details .connection-button{
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 15px;
color: #999999;
margin-inline-end: 15px;
text-decoration: none;
cursor: pointer;
display: flex;
flex-flow: row wrap;
align-items: center;
}
.version-block-with-preview-details .connection-button {
font-size: 14px;
color: var(--dark-grey);
margin-top: 15px;
}
.version-block-with-preview-details img {
padding-inline-start: 15px;
}
.singlePanel .connection-buttons .connection-button{
text-align: start;
margin-inline-end: 5px;
}
.connection-buttons .connection-button span{
text-align: initial;
}
.connection-buttons .connection-button .int-en{
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.connection-buttons .connection-button .int-he{
font-family: "Heebo", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.toolsMessage {
margin: 130px 0;
text-align: center;
font-size: 18px;
}
.connection-buttons .connection-button::before,
.version-block-with-preview-details .connection-button::before{
display: block;
content: ' ';
background-size: 15px 15px;
background-repeat: no-repeat;
height: 15px;
width: 15px;
margin-inline-end: 5px;
}
.version-block-with-preview-details .connection-button::before {
height: 18px;
}
.connection-buttons .panel-open-link::before,
.version-block-with-preview-details .connection-button::before{
background-image: url("/static/icons/open-panel.svg");
}
.connection-buttons .delete-link::before{
background-image: url("/static/icons/remove-connection.svg");
}
.connection-buttons .add-to-sheet-link::before{
background-image: url("/static/icons/add-to-sheet.svg");
}
.toolsButtonContainer {
display: flex;
justify-content: flex-start;
color: #000;
/*border-top: 1px solid #E5E5E5;*/
cursor: pointer;
font-size: 16px;
letter-spacing: 1px;
margin: 20px 34px;
align-items: center;
flex-wrap: wrap;
}
.toolsButtonContainer .toolsButtonText,
.toolsButtonContainer .toolsSecondaryButton {
position: relative;
top: 1.5px;
}
.toolsButton {
background: none;
padding: 0;
border: 0px;
flex: 1 1 auto;
}
.toolsSecondaryButton {
color: var(--dark-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
height: var(--sans-serif-small-font-size);
margin-inline-start: 30px;
align-self: flex-start;
}
.linkArrow {
height: var(--sans-serif-small-font-size);
position: relative;
top: 1px;
}
.toolsButtonContainer .toolsButton.greyColor {
color: var(--dark-grey);
}
.toolsButton .toolsButtonText .connectionsCount::before{
content: " ";
}
.topicList.topicsHe {
direction: rtl;
}
.topicList.topicsEn {
direction: ltr;
}
.interface-hebrew .topicList.topicsEn {
direction: rtl;
}
.topicButton {
display: flex;
justify-content: flex-start;
color: #000;
cursor: pointer;
font-size: 16px;
flex-direction: column;
letter-spacing: unset;
align-items: initial;
border-top: 1px solid #E5E5E5;
padding: 20px 34px;
margin: initial;
}
.topicList #topicItem-0 {
border-top: none;
}
.topicButton:hover {
text-decoration: none;
}
.topicButton .topicButtonTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.topicButton .topicButtonTitle .he {
text-align: right;
}
.topicButton .contentText .en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.topicButtonTitle .he {
font-size: 122%;
}
.topicButton .three-dots-button.tooltip-toggle::before,
.named-entity-title-bar .three-dots-button.tooltip-toggle::before {
transform: none;
left: unset;
right: 30px;
width: 180px;
}
.readerPanel.hebrew .topicButton .three-dots-button.tooltip-toggle::before,
.readerPanel.hebrew .named-entity-title-bar .three-dots-button.tooltip-toggle::before {
right: unset;
left: 30px;
text-align: right;
}
.topicButton .smallText {
margin-top: 10px;
line-height: 18px;
font-size: 18px;
text-align: start;
}
.topicButton .smallText .en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 13px;
font-weight: normal;
color: #999;
}
.topicButton .smallText .he {
font-family: "Heebo", sans-serif;
font-size: 13px;
font-weight: normal;
color: #999;
}
.toolsButton:hover {
text-decoration: none;
color: inherit;
}
.toolsButton.systemTypeface .toolsButtonText span.int-en,
.toolsButton.systemTypeface .toolsButtonText span.en{
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.toolsButton.textTypeface .toolsButtonText span.int-en,
.toolsButton.textTypeface .toolsButtonText span.en{
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.toolsButton.systemTypeface .toolsButtonText span.int-he,
.toolsButton.systemTypeface .toolsButtonText span.he{
font-family: "Heebo", "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.toolsButton.textTypeface .toolsButtonText span.int-he,
.toolsButton.textTypeface .toolsButtonText span.he{
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-size: 122%;
}
.toolsButton .toolsButtonIcon {
color: #999;
font-size: 20px;
width: 20px;
margin-top: -1px;
}
.interface-hebrew .toolsButton .toolsButtonIcon {
margin-top: 1px;
}
.toolsButton img.toolsButtonIcon {
width: 18px;
height: 18px;
vertical-align: middle;
}
.toolsButton .toolsButtonText{
margin-inline-start: 15px;
}
.shareSettingsBox .shareDropdown {
display: inline-block;
height: 20px;
width: 52px;
margin: 0 3px;
border: 0;
color: var(--sefaria-blue);
font-weight: 600;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-body-font-size);
align-self: flex-end;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
bottom: 1px;
position: relative;
background-color: Transparent;
background-image: url(/static/icons/arrow-down-bold.svg);
background-repeat: no-repeat;
background-position: right;
background-size: 12px;
}
.shareInputBox .copyLinkIcon {
float: right;
margin: 0px -5px 1px 0px;
}
.shareInputBox span {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-body-font-size);
}
.shareInputBox {
position: relative;
display: flex;
box-sizing: border-box;
border-radius: 7px;
border: none;
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
font-size: var(--sans-serif-body-font-size);
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #666;
padding: 20px 20px;
margin: 19px 33px;
}
.shareInput {
width: calc(100% - 40px);
box-sizing: border-box;
border-radius: 7px;
border: none;
font-size: var(--sans-serif-body-font-size);
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #666;
text-overflow: ellipsis;
}
.shareInputBox .shareInputButton {
background-color: #fff;
position: absolute;
border: 0;
margin-inline-start: calc(100% - 60px);
}
.shareInputBox .shareInputButton:active {
background-color: var(--light-grey);
}
.shareSettingsBox {
display: flex;
box-sizing: border-box;
border-radius: 7px;
border: none;
font-size: var(--sans-serif-body-font-size);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
color: var(--dark-grey);
margin: 20px 34px;
}
.addToSourceSheetBox {
position: relative;
}
.addToSourceSheetBox input {
padding: 13px 12px;
margin: 0;
cursor: pointer;
font-size: 18px;
border-radius: 4px;
box-shadow: none;
border: 1px solid #E9E9E9;
width: 60%;
height: 50px;
box-sizing: border-box;
}
.addToSourceSheetBox .button {
width: 100%;
text-align: center;
margin: 0;
}
.addToSourceSheetBox .button.small {
width: 37%;
box-sizing: border-box;
height: 50px;
padding: 17px;
margin: 0;
float: right;
}
.interface-hebrew .addToSourceSheetBox input {
width: 47%;
}
.interface-hebrew .addToSourceSheetBox .button.small {
width: 50%;
float: left;
}
.addToSourceSheetBox .newSheet {
border-top: 1px solid #E9E9E9;
padding: 14px 22px;
}
.addToSourceSheetBox .newSheet input::placeholder { /* eventual spec? */
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.addToSourceSheetBox .newSheet input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.addToSourceSheetBox .newSheet input::-moz-placeholder { /* Firefox 19+ */
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.addToSourceSheetBox .newSheet input:-ms-input-placeholder { /* IE 10+ */
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.addToSourceSheetBox .newSheet input:-moz-placeholder { /* Firefox 18- */
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.confirmAddToSheet {
text-align: center;
background-color: #FBFBFA;
margin-bottom: 10px;
}
.confirmAddToSheet .message{
text-align: start;
}
.confirmAddToSheet.addToSourceSheetBox .message span{
font-family: 'HebrewInEnglish Serif Font', "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 25px;
text-decoration-line: none;
color: #666666;
}
.confirmAddToSheet.addToSourceSheetBox .message span a{
text-decoration: underline;
color: #666666;
}
.confirmAddToSheet .button {
width: 100%;
}
.connectionsPanel .allSheetsLink,
.connectionsPanel .allNotesLink {
display: block;
margin-top: 10px;
}
.interface-hebrew .allNotesLinks {
text-align: left;
}
.noteList + .noteList {
border-top: 1px solid #ccc;
}
.connectionsPanel .loadingMessage {
margin-top: 40px;
}
.connectionsPanel textarea.noteText,
.connectionsPanel textarea.feedbackText,
.sideColumn textarea.feedbackText {
width: 100%;
min-height: 100px;
border: none;
border-radius: 7px;
padding: 20px 25px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
font-size: 18px;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
margin-bottom: 10px
}
.connectionsPanel .noteSharingToggle {
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 12px;
}
.connectionsPanel .notePrivateButton,
.connectionsPanel .notePublicButton {
width: 50%;
display: inline-block;
text-align: center;
color: #CCC;
padding: 16px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
letter-spacing: 1px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
box-sizing: border-box;
}
.connectionsPanel .notePrivateButton.active,
.connectionsPanel .notePublicButton.active {
background-color: white;
color: #666;
}
.connectionsPanel .notePrivateButton {
border-right: 1px solid #ccc;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.hebrew .connectionsPanel .notePrivateButton {
border-left: 1px solid #ccc;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-right: none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.connectionsPanel .line {
width: 100%;
border-bottom: 1px solid #ccc;
margin: 40px 0;
}
.connectionsPanel .deleteNote {
text-align: center;
padding: 18px 0;
color: #999;
font-size: 15px;
cursor: pointer;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.connectionsPanel.textList .note {
padding: 30px 0;
position: relative;
}
.connectionsPanel.textList .note {
border-top: 1px solid #E6E5E6;
}
.connectionsPanel.textList .note:first-child {
border-top: none;
}
.connectionsPanel .noteButtons {
position: absolute;
top: 30px;
left: -32px;
}
.interface-hebrew .connectionsPanel .noteButtons {
left: auto;
right: -32px;
}
.connectionsPanel .editNoteButton {
visibility: hidden;
}
.connectionsPanel .note:hover .editNoteButton {
visibility: visible;
}
.connectionsPanel .noteButtons .fa {
cursor: pointer;
color: #C6C6C6;
font-size: 20px;
margin: 0 8px;
}
.feedbackOverlay .buttonContainer {
width: 100%;
margin-top: 15px;
text-align: center;
}
.connectionsPanel .divineNameReplacer p {
font-size: 16px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
line-height: 19px;
color: #666666;
}
.addConnectionBox {
font-size: 18px;
text-align: center;
}
.addConnectionBox .dropdown .dropdownMain{
justify-content: center;
}
.addConnectionBox .dropdown .dropdownMain span, .addConnectionBox .dropdown .dropdownMain img{
margin-inline-start: auto;
}
.addConnectionSummary {
margin-bottom: 20px;
}
.loginPrompt {
text-align: center;
}
.loginPrompt .loginPromptMessage {
font-size: 18px;
margin-bottom: 20px;
}
.loginPrompt .button {
width: auto;
margin: 0 6px;
}
.profile-pic {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 4px;
}
.profile-page {
background-color: var(--lightest-grey);
}
.profile-page .profile-pic .profile-pic-hover-button {
display: none;
}
.profile-pic-cropper-error {
line-height: 1;
max-width: 50vw;
overflow: hidden;
}
.profile-page .profile-pic:hover .profile-pic-hover-button.profile-pic-button-visible {
display: flex;
}
.profile-page .profile-pic .profile-pic-button-row {
display: flex;
}
.profile-page .profile-pic .profile-pic-button {
position: relative;
top: calc(-1 * ((175px/2) + (46px/2))); /* height of .profile-img + height of .profile-pic-button */
}
.profile-pic-cropper-modal {
max-width: unset !important;
max-height: unset !important;
padding: 15px 15px 17px 15px !important;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
background-color: #FFF !important;
border-radius: 6px;
}
.profile-pic-cropper-modal-inner {
overflow: auto;
display: block;
line-height: 0;
border-radius: 6px;
}
.profile-pic-loading {
display: flex;
align-items: center;
justify-content: center;
margin-top: 17px;
}
.profile-pic-cropper-modal .ReactCrop__crop-selection {
border-radius: 50%;
box-shadow: 0 0 0 9999em rgba(255, 255, 255, 0.6);
}
.profile-pic-cropper-modal .ReactCrop__image {
max-width: 50vw;
max-height: 50vh;
}
.profile-pic-close {
right: 25px !important;
}
.profile-pic-cropper {
}
.profile-page .profile-pic .profile-pic-cropper-modal .profile-pic-cropper-button {
display: inline-flex;
}
.profile-page .profile-pic .profile-pic-cropper-desc {
margin-top: 9px;
margin-bottom: 18px;
}
.profile-pic .profile-pic-input-file {
/* make it essentially invisible so it stays in DOM and is accessible */
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.readerNavMenu.profile-page .resourcesLink img {
top: 0;
}
.profile-page .logoutLink {
box-shadow: none;
font-size: 16px;
}
.profile-page .logoutLink .int-en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.profile-page .logoutLink .int-he {
font-family: "Heebo", sans-serif;
}
.notificationsTopContainer {
display: flex;
flex-direction: row;
margin-bottom: 30px;
}
.notificationsHeaderBox {
flex-grow: 1;
margin-bottom: 12px
}
.readerNavMenu .notificationsHeaderBox h1 {
margin: 4px 0 0 0;
}
.notificationsTitleIcon {
position: relative;top: 2px;
}
.notification {
border-bottom: 1px solid var(--light-grey);
border-top: none;
padding: 25px 0;
line-height: 1.4;
}
.notification {
display: flex;
}
.notification .imageSection {
margin-inline-end: 15px;
}
.notification .imageSection img {
height: 30px;
width: 30px;
border-radius: 15px;
}
.notification .mainSection {
flex: 1;
}
.notification a {
unicode-bidi: plaintext;
}
.notification a:hover {
color: inherit;
}
.notification .topLine {
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 2px;
align-content: space-between;
}
.notification .topLine a {
font-weight: bold;
}
.notification .topLineText {
flex: 1;
}
.notification .date {
color: var(--medium-grey);
font-size: 14px;
margin-inline-start: 15px;
}
.notification .notificationBody {
margin-top: 20px;
}
.notification .sheetTitle,
.notification .collectionName {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
font-size: 24px;
display: block;
}
.notification .sheetSummary {
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
color: var(--dark-grey);
font-size: 18px;
margin-top: 10px;
}
.notification .replyButton {
margin-top: 15px;
}
.notification .replyButton img {
width: 15px;
height: 10px;
margin-inline-end: 10px;
}
.notification-message-link {
display: inline-block;
padding: 0 5px;
}
.globalUpdateForm {
padding: 20px;
background-color: #ddd;
border-radius: 15px;
font-size: 18px;
}
.globalUpdateForm .storyTypeSelector {
padding-bottom: 15px;
}
.globalUpdateForm select {
margin: 0 0 0 15px;
}
.globalUpdateForm .error {
color: red;
font-size: 90%;
}
.globalUpdateForm input[type="text"] {
padding: 5px;
margin: 5px 0;
width: 260px;
}
.globalUpdateForm input[type="radio"] {
padding: 5px;
margin: 8px;
}
.globalUpdateForm label {
padding-top: 10px;
display: block;
}
.globalUpdateForm .previewButton {
margin-left: 85%;
font-size: 20px;
}
.update {
position: relative;
}
.update .imageSection {
display: none;
}
.update .delete-update-button {
position: absolute;
top: 8px;
right: 0px;
color: var(--dark-grey);
}
.story-action-button {
display: inline-block;
background: #CB6158;
padding: 0 15px;
margin: 0 8px;
width: 60px;
text-align: center;
height: 19px;
color: #fff;
cursor: pointer;
border-radius: 8px;
box-shadow: 1px 1px 1px #ccc;
border: 1px solid #ccc;
}
.lds-ring {
display: inline-block;
position: relative;
width: 34px;
height: 34px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 21px;
height: 21px;
margin: 6px;
border: 6px solid #999;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #999 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.sefariaLogo {
text-align: center;
text-transform: uppercase;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
#appLoading {
position: fixed;
text-align: center;
background-color: #FBFBFA;
height: 100%;
width: 100%;
direction: initial;
}
#appLoading .loadingMessage {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
#appLoading img.int-en {
width: 150px;
height: 42px;
margin-bottom: 6px;
}
#appLoading img.int-he {
width: 150px;
height: 49px;
margin-bottom: 6px;
}
.emptyDesktop {
margin-top: 200px;
text-align: center;
color: #999;
}
.button {
display: inline-block;
color: white;
background-color: var(--sefaria-blue);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
border-radius: 6px;
padding: 16px 30px;
margin: 0 2px 6px 2px;
cursor: pointer;
font-size: 16px;
box-sizing: border-box;
line-height: 19px;
text-align: center;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
border: none;
}
.button.disabled{
border: 1px solid var(--light-grey);
background-color: var(--lightest-grey);
font-size: 16px;
line-height: 19px;
text-align: center;
color: var(--medium-grey);
box-shadow: none;
}
.button.disabled:hover{
color: var(--medium-grey);
cursor: initial;
}
a.button {
color: white;
}
.button:hover,
a.button:hover {
color: white;
text-decoration: none;
}
.button.white {
background-color: white;
color: #333;
}
a.button.white {
color: var(--dark-grey);
}
.button.grey {
background-color: var(--lighter-grey);
color: var(--dark-grey);
box-shadow: none;
border: none;
}
a.button.mini {
padding: 5px;
font-size: .8em;
}
.interface-english .userSheetTitle a.button.mini {
float: right;
}
.interface-hebrew .userSheetTitle a.button.mini {
float: left;
}
.button.transparent {
color: #666;
background-color: transparent;
border: 1px solid transparent;
}
.profile-page .button.transparent {
border: 0;
}
.button.transparent.bordered {
border: 1px solid #CCC;
}
.button.fillWidth {
width: 100%;
text-align: center;
display: block;
margin: 10px 0;
}
.button.squareBorder {
border-radius: 0;
}
a .button:hover {
text-decoration: none;
}
.reactMarkdown a {
color: var(--commentary-blue);
}
.button.small {
padding: 10px 14px;
width: -moz-fit-content;
width: fit-content;
}
.button.extraSmall {
border-radius: 6px;
box-shadow: none;
margin: 0;
padding: 5px 8px;
height: 30px;
line-height: 20px;
letter-spacing: normal;
}
.button.extraSmall.topic {
color: #000000;
background-color: var(--lighter-grey);
white-space: nowrap;
}
.adminButtons .button.extraSmall.topic.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.adminButtons .button.extraSmall.topic.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom: 1px solid var(--light-grey);
}
.adminButtons .button.extraSmall.topic {
box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
border-radius: revert;
color: #666666;
}
.headerWithAdminButtons {
display: flex;
position: relative;
flex: 1;
}
.adminButtons.hiddenButtons {
display: none;
}
.adminButtons {
display: flex;
flex-direction: column;
width: 147px;
position: absolute;
height: 90px;
padding: 0 20px 0 20px;
}
.button .buttonIcon {
margin-inline-end: 7px;
vertical-align: middle;
}
.button.small .buttonIcon {
height: 14px;
width: 14px;
margin-top: -3px;
}
.button.appButton {
box-shadow: none;
border: 2px solid #18345D;
color: #18345D;
}
.button.appButton img {
margin-inline-end: 5px;
}
.button.appButton.iconOnly {
width: 40px;
height: 40px;
box-sizing: border-box;
display: inline-flex;
padding: 0;
justify-content: center;
align-items: center;
}
.button.appButton.iconOnly img {
width: 18px;
height: 18px;
margin: 0;
}
.lexicon-content{
font-size: 15px;
padding-bottom: 10px;
margin-bottom: 1px;
}
.lexicon-link:hover {
text-decoration: underline;
}
.lexicon-header {
padding: 10px;
border-bottom: 1px solid #e5e5e5;
background-color: #AAAAAA;
}
.lexicon-header h4 {
font-size: 1.2em;
margin: 0;
}
.entry + .entry {
padding-top: 10px;
}
.lexicon-results {
padding-top: 20px;
}
.named-entity-attribution {
margin-top: 13px;
}
.named-entity-ambiguous {
margin-bottom: 24px;
}
.named-entity-ambiguous .systemText .int-en,
.named-entity-ambiguous .systemText .int-he {
color: #999;
}
.named-entity-title-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.named-entity-wrapper {
display: flex;
flex-direction: column;
}
.named-entity-wrapper + .named-entity-wrapper {
margin-top: 26px;
}
.readerPanel.english .named-entity-wrapper {
direction: ltr;
}
.readerPanel.hebrew .named-entity-wrapper {
direction: rtl;
}
.lexicon-results .named-entity-description {
margin-top: 13px;
}
.lexicon-results .named-entity-description .en,
.lexicon-results .named-entity-description .he {
color: #666;
}
.lexicon-results .entry > div {
padding: 1% 0 1% 0;
margin: auto;
}
.lexicon-results .entry a {
font-size: .8em;
font-weight: bold;
letter-spacing: 1px;
cursor: pointer;
color: #333;
}
.lexicon-results .entry .headline {
color: #333;
font-size: 1.2em;
display: block;
}
.lexicon-results .entry .headwords .headword {
display: inline;
}
.lexicon-results .entry .morphology {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #999;
display: inline;
margin-right: 5px;
}
.lexicon-results .entry .lang-ref {
}
.lexicon-results .entry .definition-content{
color: #444;
}
.lexicon-results ol {
list-style-position: inside;
}
.lexicon-results .entry .definition li.sense{
margin-left: 15px;
padding-bottom: 10px;
}
.lexicon-results .entry .definition ol.senses{
padding-left: 0;
}
.lexicon-results .entry .definition > li.sense{
margin-left: 0;
}
.lexicon-results .entry ol.definition {
list-style-type: none;
padding-top: 2px;
padding-left: 0;
margin: 0;
}
.lexicon-results .entry .definition .notes {}
.lexicon-results .entry .definition .derivatives {display: block;margin-left: 15px;}
.lexicon-results .attribution {
}
.lexicon-results .attribution div,
.named-entity-wrapper .attribution div {
display: block;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #aaa;
font-size: 10px;
}
.lexicon-content .headword.en, .lexicon-content .headword.he,
.lexicon-content .definition-content.en, .lexicon-content .definition-content.he,
.lexicon-content .lexicon-results .attribution {
display: inline;
}
.lexicon-content .headword.he, .lexicon-content .definition-content.he {
direction: rtl;
}
.lexicon-content .headword.en, .lexicon-content .definition-content.en {
direction: ltr;
}
.lexicon-instructions,
.lexicon-content .loadingMessage {
font-size: 15px;
font-style: italic;
}
.splitHeader {
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #666;
font-weight: 300;
}
.splitHeader .en {
font-size: 14px;
}
.splitHeader .he {
font-size: 14px;
}
.splitHeader select {
margin-inline-start: 6px;
}
.sheetsNewButton {
text-align:center;
margin-bottom: 30px;
}
.sheetsNewButton a {
color: inherit;
}
.sheet.userSheet .sheetTitle {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 20px;
color:#333;
margin-bottom: 6px;
unicode-bidi: plaintext;
}
.sheet.userSheet {
font-size: 14px;
color:#999;
text-decoration: none;
flex-direction: column;
}
.interface-english .sheet.userSheet{
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.interface-hebrew .sheet.userSheet{
font-family: "Heebo", "sans-serif";
}
.sheet.userSheet .userSheetInfo{
display: flex;
justify-content: flex-start;
}
.sheet.userSheet .userSheetInfo span:before{
content: '·';
margin: auto 4px;
}
.sheet.userSheet .userSheetInfo span:first-child:before{
content: '';
margin: 0;
}
.sheet.userSheet .sheetAccess{
margin: auto 4px;
}
.filterByTag {
cursor: pointer;
text-transform: none;
font-size: 18px;
}
.sheet.userSheet .sheetEditButtons {
font-size: 24px;
height: 32px;
width: 32px;
text-align: center;
line-height: 32px;
background-color: white;
border: 1px solid #E6E6E6;
border-radius: 4px;
margin-left: 10px;
display: none;
float:right;
cursor: pointer;
color: #999;
text-decoration: none;
}
.sheetButton:hover {
text-decoration: underline;
}
.sheetButton{
border: 1px solid #fff;
}
.sheetButton.active {
border: 1px solid #333;
}
.tagString a {
text-decoration: none;
color: #999;
}
.tagString a:after {
content: ", ";
color: #999;
}
.tagString a:last-child:after {
content: "";
}
.singlePanel .collectionsList {
margin-top: 0;
}
.collectionsList .enCollections,
.collectionsList .heCollections {
margin-bottom: 50px;
}
.readerPanel .collectionsList .enCollections .gridBox,
.readerPanel .collectionsList .enCollections .int-he {
direction: ltr;
}
.readerPanel .collectionsList .heCollections .gridBox {
direction: rtl;
}
.collectionListing {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.profile-page .collectionListing {
padding: 20px 0;
}
.collectionListing .left-content {
display: flex;
flex-direction: row;
align-items: center;
}
.collectionListing + .collectionListing {
border-top: 1px solid #ccc;
}
.collectionListingImageBox {
width: 40px;
height: 40px;
border-radius: 20px;
margin-inline-end: 10px;
overflow: hidden;
flex-shrink: 0;
}
.sheetMetaDataBox .collectionListingImageBox,
.tocTop .collectionListingImageBox {
background-color: transparent;
overflow: initial;
}
.sheetMetaDataBox .title {
display: block;
}
.sheetMetaDataBox .title br { /* hide the line breaks that are stripped before saving */
display: none;
}
.sheetMetaDataBox .title * { /* chrome adds <div> tags to contenteditables and we want those inline as well */
display: inline;
}
.sheetMetaDataBox .title:empty:before {
content: "Untitled";
color: #999;
position: relative;
pointer-events: none;
width: auto;
}
.interface-hebrew .sheetMetaDataBox .title:empty:before {
content: "×œ×œ× ×©×";
}
.publishBox {
text-align: start;
background-color: #EDEDEC;
border-radius: 6px;
padding: 10px 20px;
max-width: 540px;
margin: 20px -20px;
font-size: 16px;
color: #666;
}
div.transparentBackground.publishBox {
background-color: inherit;
border-radius: 0px;
padding: 0px 20px;
color: inherit;
}
.publishBox .smallText .int-en, .publishBox .smallText .int-he.enInHe {
color: #666;
}
.publishBox p.error {
color: red;
}
.publishBox p {
margin-bottom: 15px;
}
.publishBox .error .react-tags,
.publishBox textarea.error {
border: 1px solid red;
}
.publishBox p strong {
color: black;
font-weight: 400;
}
.publishBox h3 {
font-size: 22px;
font-weight: 500;
color: #666;
margin-top: 12px;
margin-bottom: 14px;
text-transform: none;
text-align: start;
}
.publishBox hr {
border-bottom: none;
border-right: none;
border-left: none;
border-top: 1px solid #CCC;
margin-top: 20px;
}
.publishBox .smallText {
color: #666666
}
.publishBox textarea {
width: 100%;
height: 100px;
resize: none;
box-sizing: border-box;
font-size: 16px;
color: #000;
border: none;
border-radius: 6px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
font-style: normal;
padding: 10px 10px 4px 10px;
margin-bottom: 0px;
}
.publishBox textarea::placeholder {
font-size: 16px;
color: #666;
font-style: normal;
font-family: var(--english-sans-serif-font-family);
}
.publishBox .react-tags {
position: relative;
padding: 10px 10px 4px 10px;
border-radius: 6px;
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
/* shared font styles */
font-size: 16px;
line-height: 1.2;
color: #666;
/* clicking anywhere will focus the input */
cursor: text;
}
.publishBox .react-tags.is-focused {
border-color: #B1B1B1;
}
.publishBox .react-tags__selected {
display: inline;
}
.publishBox .react-tags__selected-tag {
display: inline-block;
box-sizing: border-box;
margin: 0 6px 6px 0;
padding: 6px 8px;
border: none;
border-radius: 6px;
background: #EDEDEC;
color: #000;
/* match the font styles */
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.publishBox .react-tags__search-input,
.publishBox .react-tags__search-input:focus,
.publishBox .react-tags__search-input:focus-visible {
font-family: inherit;
font-size: inherit;
border: none;
outline: none;
}
.publishBox .react-tags__search-input::placeholder {
font-size: 16px;
font-style: normal;
font-family: var(--english-sans-serif-font-family);
}
body.interface-hebrew .publishBox .react-tags__search-input::placeholder,
body.interface-hebrew .publishBox textarea::placeholder {
font-family: var(--hebrew-sans-serif-font-family);
}
.publishBox .react-tags__selected-tag:after {
content: '\2715';
color: #AAA;
margin-inline-start: 8px;
vertical-align: middle;
font-size: 10px;
}
.publishBox .react-tags__selected-tag:hover,
.publishBox .react-tags__selected-tag:focus {
border-color: #B1B1B1;
}
.publishBox .react-tags__search {
display: inline-block;
/* match tag layout */
padding: 7px 2px;
margin-bottom: 6px;
/* prevent autoresize overflowing the container */
max-width: 100%;
}
.publishBox .publishButton {
margin: 18px 0;
text-align: end;
}
.publishBox .publishButton .button.published {
background-color: #EDEDEC;
border: 1px solid #CCCCCC;
color: #666666
}
.publishBox .publishButton .button {
padding: 15px 20px;
}
.publishSettingsEditMode .publishButton {
margin: 14px 0 0;
text-align: end;
flex-direction: row;
justify-content: flex-end;
display: flex;
}
.publishSettingsEditMode .publishButton .publishedText {
text-align: start;
margin-top: 5px;
margin-bottom: 0px;
margin-inline-start: 0px;
margin-inline-end: 15px;
font-size: var(--sans-serif-body-font-size);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
color: var(--dark-grey);
}
.publishSettingsEditMode .publishButton .publishedText .publishedTextBold {
font-weight: bold;
color: black;
}
.publishSettingsEditMode .button.published {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: var(--dark-grey);
height: fit-content;
align-self: center;
border-radius: 6px;
box-sizing: border-box;
box-shadow: none;
padding: 9px 10px;
}
.publishBox .react-tags__suggestions ul {
position: absolute;
inset-inline-start: 0; /* Note reduntant css rules below `body.interface-[hebrew|english] .publishBox .react-tags__suggestions ul` */
top: 100%;
margin: 4px -1px;
padding: 0;
list-style: none;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
min-width: 300px;
}
/* Reduntant given above `inset-inline-start` rule, but not standard on all browsers yet
RMN: 2021-04-22 */
body.interface-hebrew .publishBox .react-tags__suggestions ul {
right: 0;
}
/* Reduntant given above `inset-inline-start` rule, but not standard on all browsers yet
RMN: 2021-04-22 */
body.interface-english .publishBox .react-tags__suggestions ul {
left: 0;
}
.publishBox .react-tags__suggestions li {
border-bottom: none;
padding: 6px 8px;
}
.publishBox .react-tags__suggestions li mark {
text-decoration: none;
background: none;
font-weight: normal;
}
.publishBox .react-tags__suggestions li:hover {
cursor: pointer;
background: #eee;
}
.publishBox .react-tags__suggestions li.is-active {
background: #eee;
}
.publishBox .react-tags__suggestions li.is-disabled {
opacity: 0.5;
cursor: auto;
}
.interface-hebrew .sheetMetaDataBox .authorStatement {
direction: rtl;
}
.editorSidebarToggle {
position: fixed;
top: 150px;
right: 30px;
height: 30px;
width: 30px;
border-radius: 30px;
border: none;
background-color: var(--sefaria-blue);
cursor: pointer;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
.interface-hebrew .editorSidebarToggle {
left: 30px;
right: auto;
}
.editorSidebarToggle:active {
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
.editorSidebarToggle::after {
content: url("/static/img/3vdots.svg");
position: absolute;
top: 7px;
left: 13px;
}
.collectionListingImage {
height: 100%;
width: 100%;
object-fit: cover;
background-color: white;
}
.collectionListingImage.default {
width: 80%;
height: 80%;
margin: 10%;
opacity: 0.4;
}
.collectionListingName {
display: block;
font-size: 30px;
color: #000;
margin-bottom: 5px;
}
.collectionListingName:hover {
color: #333;
}
.collectionListingDetails {
color: #999;
font-size: 14px;
}
.collectionListingMembership {
text-transform: capitalize;
}
.collectionListingDetailSeparator {
margin: 8px;
}
.collectionInfo {
margin-bottom: 35px;
}
.interface-hebrew .collectionInfo .he {
display: inline;
}
.interface-hebrew .collectionInfo .en {
display: none;
}
.collectionPage h1 {
color: black;
font-size: 30px;
margin-bottom: 5px;
--hebrew-font: var(--hebrew-serif-font-family);
--english-font: var(--english-serif-font-family);
}
.collectionPage .navTitle {
margin-bottom: 5px;
}
.collectionPage .collectionLabel {
text-transform: uppercase;
color: #666;
font-size: 16px;
letter-spacing: 2px;
display: block;
margin-bottom: 25px;
}
.collectionPage a:hover {
color: inherit;
}
.collectionPage .collectionWebsite {
display: block;
font-size: 16px;
margin-top: 15px;
color: #4B71B7;
direction: ltr;
}
.collectionPage .collectionDescription {
font-size: 16px;
color: #666;
line-height: 1.3;
}
.collectionPage .collectionDescription .dedication {
--hebrew-font: var(--hebrew-serif-font-family);
--english-font: var(--english-serif-font-family);
}
.collectionPage .collectionDescription .en .dedication {
font-style: italic;
font-size: 18px;
display: block;
}
.collectionPage .collectionDescription .he .dedication {
font-size: 20px;
display: block;
}
.collectionPage .bubbleTab {
font-size: 16px;
}
.collectionPage .tagsList {
--hebrew-font: var(--hebrew-serif-font-family);
--english-font: var(--english-serif-font-family);
}
.collectionPage .emptyMessage .button {
margin-top: 22px;
}
.collectionPage .emptyMessage .button:hover {
color: white;
}
.collectionContentsTab .gridBox {
margin-bottom: 30px;
}
.collectionPage .collectionContentsSectionLabel {
color: var(--dark-grey);
size: 16px;
margin: 30px 0 12px 0;
}
.collectionPage .collectionContentsTag {
font-size: 24px;
}
.collectionPage .sheetIcon {
display: none;
}
.collectionPage .filterable-list .sheet a.sheetTitle {
font-size: 24px;
}
.collectionPage .searchInCollectionLink {
font-size: 16px;
color: var(--dark-grey);
margin-top: 20px;
display: block;
}
.collectionInvitationBox {
padding-bottom: 20px;
}
.collectionInvitationBox .button {margin: 0;}
.collectionSheetInner {
display: flex;
}
.collectionSheetInnerContent {
flex: 1;
}
.sheet .sheetTitleText {
font-family: var(--english-serif-font-family);
}
.sheetListingPinButton {
display: none;
opacity: 0.3;
cursor: pointer;
}
.sheet:hover .sheetListingPinButton.active {
display: block;
}
.sheetListingPinButton.pinned {
display: block;
opacity: 0.6;
}
#collectionInvitationInput {
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: none;
margin-inline-end: 10px;
font-size: 18px;
position: relative;
border-radius: 7px;
box-sizing: border-box;
width: 215px;
padding: 10px 15px;
}
.collectionInvitationBoxMessage {
font-size: 18px;
padding: 12px 0 0;
text-align: center;
}
.flexLineBreak {
width: 100%;
height: 0;
}
.collectionPage .collectionMemberListing {
padding-bottom: 24px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 16px;
color: #666;
display: flex;
flex-direction: row;
justify-content: start;
}
.collectionMemberListingPic {
margin-inline-end: 10px;
}
.collectionMemberListingPic.invitation {
background-color: var(--medium-grey);
border-radius: 1000px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.collectionMemberListingName {
color: black;
}
.collectionMemberListingRole {
color: var(--dark-grey);
font-size: 13px;
margin-top: 4px;
}
.collectionMemberListingText {
position: relative;
}
.collectionPage .collectionMemberListing .collectionMemberListingActions {
display: none;
}
.collectionPage .collectionMemberListing:hover .collectionMemberListingActions {
display: inline-flex;
}
.collectionMemberListingActions .collectionMemberListingActionsButton {
cursor: pointer;
color: var(--dark-grey);
margin-inline-start: 8px;
}
.collectionMemberListingActionsMenu {
position: absolute;
left: 0;
top: 46px;
line-height: 30px;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
color: #999;
font-size: 15px;
z-index: 1;
}
.interface-hebrew .collectionMemberListingActionsMenu {
right: 0;
left: unset;
}
.collectionMemberListingActionsMenu .action {
padding: 4px 10px;
cursor: pointer;
white-space: nowrap;
}
.collectionMemberListingActionsMenu .action:hover {
background-color: #eee;
}
.collectionMemberListingActionsMenu .action + .action {
border-top: 1px solid #ccc;
}
.collectionMemberListingActionsMenu .role {
font-size: 17px;
margin-right: 4px;
}
.collectionMemberListingActionsMenu .role.current {
color: var(--dark-grey);
}
.collectionInvitationListing {
display: inline-block;
min-height: 50px;
line-height: 50px;
}
.topicFilterBox {
display: flex;
align-items: center;
margin-bottom: 30px;
background-color: var(--lighter-grey);
border-radius: 100px;
padding: 0 10px;
margin-top: 0;
width: 285px;
max-width: 100%;
}
.singlePanel .topicFilterBox {
margin-top: 20px;
}
.topicFilterBox .searchIcon {
height: 18px;
width: 18px;
opacity: 0.4;
}
.topicFilterInput {
padding: 0px 10px;
line-height: 30px;
flex: 1;
box-sizing: border-box;
border: none;
background: transparent;
font-size: 18px;
}
.topicsFilterReset {
cursor: pointer;
color: var(--medium-grey);
}
.topicsFilterResetIcon {
height: 16px;
width: 16px;
margin-inline-start: 8px;
vertical-align: -2px;
}
.alphabeticalTopicsNav {
color: var(--dark-grey);
margin-bottom: 5px;
}
.alphabeticalTopicsNav a {
display: inline-block;
margin-bottom: 10px;
}
.alphabeticalTopicsNav a + a {
margin-inline-start: 10px;
}
.allTopicsList {
min-height: 500px;
}
.topicPanel .topicLabel {
text-transform: uppercase;
font-weight: lighter;
margin-bottom: 10px;
font-size: 14px;
}
.topicPanel .topicLabel a {
color: #8E8E8E;
}
.topicPanel .sideColumnMore {
cursor: pointer;
font-size: 16px;
line-height: 26px;
color: #666;
}
.topicPanel .sideColumnMore:hover {
cursor: pointer;
text-decoration: underline;
}
.topicPanel .sourceList {
min-height: 500px;
}
.topicPanel .sourceList .loadingMessage {
text-align: center;
}
.topicPanel .topicSource {
margin-bottom: 40px;
cursor: pointer;
position: relative;
}
.topicPanel .topicSource .title {
font-weight: bold;
}
.topicPanel .topicSource .score {
font-size: 17px;
color: #333;
font-weight: normal;
white-space: nowrap;
border-radius: 4px;
padding: 3px;
}
.topicPanel .topicSource .score:hover {
background-color: #EEE;
}
.topicPanel .topicSource .score:active {
background-color: #DDD;
}
.hebrew .topicPanel .topicSource .score {
right: auto;
left: 5px;
}
.topicPanel .topicSource .score img {
width: 15px;
height: 15px;
vertical-align: middle;
margin: -4px 0 0 2px;
opacity: 0.6;
}
ul.aboutSheetLinks {
list-style-type: none;
padding-inline-start: 0;
--english-font: var(--english-serif-font-family);
--hebrew-font: var(--hebrew-serif-font-family);
font-size: var(--serif-body-font-size);
}
h3.aboutSheetHeader {
text-transform: none;
color: var(--dark-grey);
font-size: var(--sans-serif-h3-font-size);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
margin-bottom: 17px;
margin-top: 36px;
padding-bottom: 18px;
border-style: none none solid none;
border-color: var(--light-grey);
border-width: 1px;
}
.translationsHeader {
margin-bottom: 35px;
}
.translationsHeader h3 {
text-transform: none;
color: var(--dark-grey);
font-size: var(--sans-serif-h3-font-size);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
margin-bottom: 12px;
margin-top: 0;
}
.translationsHeader .translationsDesc {
font-size: var(--sans-serif-body-font-size);
color: var(--dark-grey);
}
.aboutSheetPanel hr {
height: 0px;
border: 1px solid var(--light-grey);
}
.aboutSheetPanel div.description {
color: var(--dark-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-body-font-size);
margin: 20px 0px;
}
.aboutSheetPanel h2 {
font-size: var(--serif-h3-font-size);
color: #000000;
text-transform: none;
margin: 0px;
}
div.aboutSheetPanel>div.authorStatement {
font-size: 16px;
margin: 20px 0px;
}
.aboutSheetPanel h3.aboutSheetSubtitle {
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
margin-top: 5px;
margin-bottom: 20px;
}
div.aboutSheetMetadata {
color: var(--medium-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-size: var(--sans-serif-small-font-size);
display: flex;
flex-direction: column;
margin: 10px 0px;
}
div.aboutSheetMetadata span:not(:first-child)::before{
content: '•';
margin-inline-start: 4px;
margin-inline-end: 4px;
}
.hebrew .topicPanel .topicSource .score img {
margin: -4px 2px 0 0;
}
.note a {
color: #333;
text-decoration: underline;
}
.noteListing {
margin-bottom: 30px;
border-bottom: 1px solid #ccc;
}
.noteListing a:hover {
text-decoration: none;
}
.noteListing .textRange .title {
font-size: 18px;
color: #999;
margin-bottom: 10px;
}
.noteListing .textRange .title:hover {
text-decoration: underline;
}
.noteListing .textRange .text {
font-size: 18px;
font-style: italic;
color: #999;
margin-bottom: 18px;
}
.noteListing .textRange .text .he {
font-style: normal;
}
.noteListing .segment {
display: block;
}
.noteListing .note {
font-size: 18px;
}
.noteListing .actionButtons {
visibility: hidden;
float: right;
display: inline-block;
cursor: pointer;
}
.interface-hebrew .noteListing .actionButtons {
float: left;
}
.noteListing:hover .actionButtons {
visibility: visible;
}
.noteListing .actionButtons img {
width: 16px;
height: 16px;
}
.noteListing .actionButtons img + img {
margin: 0 0 0 10px;
}
.interface-hebrew .noteListing .actionButtons img + img {
margin: 0 10px 0 0;
}
.noteListing:hover .actionButtons img:hover {
opacity: 0.6;
}
.noteListing .mask {
background-color: white;
opacity: 0.5;
}
.addToSourceSheetModal {
position: absolute;
display: block;
left: 40%;
top: 240px;
width: 330px;
padding: 20px;
background: #FBFBFA;
border: #ccc 1px solid;
border-radius: 4px;
box-shadow: 0 0 10px #ccc;
z-index: 200;
}
.addToSourceSheetModal .closeButton {
margin-bottom: 10px;
cursor: pointer;
height: 18px;
width: 18px;
float: right;
}
.searchBox .keyboardInputInitiator {
opacity: 0.4;
width: 22px;
height: 20px;
padding: 4px 7px 2px;
position: initial;
vertical-align: 0px;
}
.searchBox.TopicSearchBox {
margin: 30px 0px 20px 30px;
}
.searchBox.TopicSearchBox input {
padding: 15px;
box-sizing: border-box;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border: none;
height: 40px;
width: 209px;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
border-radius: 6px;
font-size: 18px;
color: #000000;
}
.searchBox.TopicSearchBox input.selected {
color: var(--commentary-blue);
}
.header .searchBox .keyboardInputInitiator {
display: none;
}
body #keyboardInputMaster {
opacity: 1;
background-color: #FBFBFA;
border: 1px solid #ccc;
padding: 5px;
box-shadow: none;
border-radius: 0.3em;
/*position: relative;
top: 100px;
left: 395px;*/
}
body #keyboardInputMaster thead {
display: none;
}
body #keyboardInputMaster tbody tr td table{
border-spacing: 2px 2px;
}
body #keyboardInputMaster tbody tr td table tbody tr td{
border: 0.5px solid #eee;
background: white;
font-family: "Heebo","Roboto", sans-serif;
min-width: 15px;
vertical-align: middle;
padding: 2px 8px;
text-align: center;
font-size: 14px;
color: #333;
}
body #keyboardInputMaster tbody tr td table tbody tr td:hover,
body #keyboardInputMaster tbody tr td table tbody tr td:active,
body #keyboardInputMaster tbody tr td table tbody tr td.pressed{
border: 1px solid #eee;
background: #eee;
}
.calendarRefs {
margin-bottom: 16px;
}
.calendarRef {
font-size: 18px;
color: #666;
display: flex;
margin: 2px 0;
}
.calendarRef a {
color: inherit;
}
.calendarRef img {
margin-top: 2px;
}
#editCollectionPageContainerInner {
position: relative;
}
#editCollectionPage :not(h1) .int-en {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
#editCollectionPage :not(h1) .int-he {
font-family: "Heebo", sans-serif;
}
#editCollectionPage .field {
box-sizing: border-box;
width: 100%;
display: inline-block;
vertical-align: top;
padding: 12px;
}
#editCollectionPage .field.halfWidth {
width: 50%;
display: inline-block;
}
#editCollectionPage .field.quarterWidth {
width: 25%;
display: inline-block;
}
#editCollectionPage .field.threeQuarterWidth {
width: 75%;
display: inline-block;
}
#editCollectionPage .field > label {
display: block;
margin-bottom: 15px;
color: #666;
}
#editCollectionPage input,
#editCollectionPage textarea {
display: block;
width: 100%;
padding: 15px 12px;
border-radius: 5px;
border: none;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #333;
font-size: 14px;
}
.interface-hebrew #editCollectionPage input,
.interface-hebrew #editCollectionPage textarea {
font-family: "Heebo", sans-serif;
}
#editCollectionPage .hiddenFileInput {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#editCollectionPage .collectionImage {
max-width: 200px;
margin-bottom: 5px;
display: block;
}
#editCollectionPage .helperText {
color: #999;
font-size: 13px;
width: 500px;
}
#editCollectionPage .collectionHeaderBox {
width: 100%;
background-color: white;
margin-bottom: 5px;
}
#editCollectionPage .collectionHeader {
float: right;
max-width: 100%;
}
#editCollectionPage .deleteCollection {
cursor: pointer;
margin: 30px 10px;
color: #999;
text-align: right;
}
#editCollectionPage .deleteCollection:hover {
text-decoration: underline;
}
.dropdown {
position: relative;
}
.dropdown .dropdownMain {
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 7px;
padding: 16px 22px;
font-size: 16px;
margin-bottom: 10px;
cursor: pointer;
line-height: 19px;
color: var(--dark-grey);
display: flex;
justify-content: space-between;
flex-direction: row;
}
.dropdown .dropdownMain.selected{
color: var(--selected-option);
}
.dropdown .dropdownList .dropdownOption {
font-size: 18px;
cursor: pointer;
padding: 0 22px;
margin: 26px 0;
border: none;
color: var(--dark-grey);
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
}
.dropdown .dropdownOpenButton {
margin-inline-start: 6px;
cursor: pointer;
color: var(--dark-grey);
font-size: 18px;
}
.interface-hebrew .dropdownOpenButton {
float: left;
margin-left: 0;
}
.dropdown .dropdownListBox {
position: absolute;
z-index: 1;
margin-top: -14px;
width: 100%;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background: white;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.dropdown .dropdownList {
color: #999;
background-color: white;
box-sizing: border-box;
padding: 0;
max-height: 250px;
overflow-x: hidden;
overflow-y: scroll;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.singlePanel .dropdown .dropdownList {
max-height: 150px;
}
.dropdown .dropdownList .dropdownOption.selected {
color: var(--selected-option);
}
.addToSourceSheetBox .dropdownMain.noselect {
display: flex;
justify-content: space-between;
align-items: center;
align-content: flex-start;
text-align: start;
}
.addToSourceSheetBox .dropdownMain.noselect::before{
content: url("/static/img/sheet.svg");
opacity: 0.4;
display: inline-block;
margin-inline-end: 10px;
transform: scale(0.8);
vertical-align: text-bottom;
line-height: 10px;
}
.addToSourceSheetBox .dropdownMain.noselect::after{
content: url("/static/icons/chevron.svg");
margin-inline-start: auto;
opacity: 0.4;
height: 24px;
transform: scale(0.6) rotate(90deg);
transform-origin: center center;
}
.addToSourceSheetBox .dropdownMain.noselect.open::after{
transform: scale(0.6) rotate(-90deg);
transform-origin: center center;
}
.addToSourceSheetBox .dropdownMain .loadingMessage {
margin: 0;
}
.addToSourceSheetBoxTitle{
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 15px;
color: #999999;
margin-bottom: 11px;
}
.addToSourceSheetBox .selectedRef{
padding: 16px 22px;
font-size: 16px;
margin-bottom: 15px;
cursor: pointer;
background: #FBFBFA;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
text-align: start;
}
.addToSourceSheetBox .selectedRef span{
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 25px;
color: #666666;
}
.readerPanel.hebrew .addToSourceSheetBox .selectedRef span{
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
font-size: 1.2em;
}
.addToSourceSheetBox .dropdown .dropdownList .dropdownOption::before{
content: url("/static/img/sheet.svg");
opacity: 0.4;
display: inline-block;
margin-inline-end: 10px;
transform: scale(0.8);
vertical-align: text-bottom;
line-height: 10px;
}
#footer {
background-color: white;
border-top: 1px solid #F4F4F4;
overflow: hidden;
padding: 18px 40px 70px 40px;
text-align: left;
color: #999;
}
.singlePanel #footer {
padding: 18px 15px 70px 15px;
}
#footer a {
display: block;
color: #666;
}
.interface-hebrew #footer{
direction: rtl;
text-align: right;
}
.interface-english #footer .int-he {
display: none;
}
.interface-hebrew #footer .int-he {
display: inline;
text-align: right;
}
#footerInner {
max-width: 1000px;
margin: 0 auto;
}
#footer .section {
display: inline-block;
vertical-align: top;
width: 200px;
margin: 20px 0;
}
.interface-english #footer .section {
text-align: left;
}
.interface-hebrew #footer .section {
text-align: right;
}
#footer .section .header {
color: #000;
margin-bottom: 18px;
font-weight: normal;
font-size: 16px;
}
#footer .section.last {
float: right;
text-align: right;
}
.interface-hebrew #footer .section.last {
float: left;
text-align: left;
}
#footer .section a {
font-size: 16px;
margin: 2px 0;
}
#footer .fa {
margin: 0 3px;
}
#footer .header.connect {
text-transform: uppercase;
}
.newsletterSignUpBox {
position: relative;
margin-bottom: 4px;
}
.newsletterSignUpBox .newsletterInput {
border-radius: 6px;
padding: 10px 32px 12px 16px;
width: 150px;
font-size: 15px;
border: 1px solid #EEE;
margin-bottom: 6px;
color: #333;
}
.newsletterSignUpBox .educatorNewsletterInput {
padding: 10px;
-webkit-appearance: auto
}
.newsletterSignUpBox img {
height: 18px;
width: 18px;
opacity: 0.2;
position: absolute;
top: 10px;
right: 12px;
}
.interface-hebrew .newsletterSignUpBox .newsletterInput {
padding: 8px 16px 11px 32px;
}
.interface-hebrew .newsletterSignUpBox img {
right: auto;
left: 12px;
transform: scale(-1, 1);
}
.newsletterEducatorOption {
font-size: 14px;
padding: 0px 3px;
margin-top: 2px;
}
.newsletterSignUpBox .subscribeMessage {
margin: 4px 0 14px 0;
color: #333;
font-size: 14px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-style: italic;
text-align: center;
direction: ltr;
}
#footer .section.connect a {
display: inline;
margin: 0 4px;
}
#footer .section.connect .socialLinks a {
color: #666;
}
#footer #socialButtons {
margin-bottom: 6px;
}
#footer #facebookButton {
display: inline-block;
vertical-align: top;
}
#footer #twitterButton {
display: inline-block;
vertical-align: top;
margin-left: 4px;
}
.interface-hebrew #footer #twitterButton {
margin-left: 0;
margin-right: 4px;
}
#footer #siteLanguageToggle {
color: #999;
margin-top: 30px;
font-size: 15px;
}
#footer #siteLanguageToggle #siteLanguageToggleLabel {
display: block;
text-transform: uppercase;
color: #000;
}
#footer a#siteLanguageEnglish,
#footer a#siteLanguageHebrew {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
cursor: pointer;
color: #666;
display: inline;
margin: 0 3px;
}
#footer #siteLanguageEnglish:hover,
#footer #siteLanguageHebrew:hover {
text-decoration: underline;
}
#footer a#siteLanguageHebrew {
font-family: "Heebo", sans-serif;
}
.gemarra-regular, .gemarra-italic {
font-weight: bold;
}
.it-text, .gemarra-italic {
font-style: italic;
}
.categoryAttribution a {
color: inherit;
}
.bubbleTab {
padding: 10px 25px;
margin: 3px;
background-color: white;
border-radius: 20px;
border: 1px solid #DADADA;
display: inline-block;
font-size: 12px;
color: #999;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
letter-spacing: 1px;
cursor: pointer;
}
.bubbleTab:hover {
text-decoration: none;
}
.bubbleTab.active {
color: #333;
}
.aboutBox .detailsSection{
margin-bottom: 40px;
}
.aboutBox .aboutHeader {
color: var(--dark-grey);
padding-bottom: 13px;
margin: 0;
margin-bottom: 15px;
text-align: initial;
text-transform: none;
font-size: 22px;
border-bottom: solid 1px var(--light-grey);
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.aboutBox .aboutTitle {
padding: 10px 0 10px 0;
display: inline-block;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 29px;
color: #000000;
}
.aboutBox .tocCategory{
display: block;
margin-bottom: 17px;
font-size: 16px;
line-height: 19px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dark-grey);
}
.aboutBox .aboutSubtitle {
font-style: italic;
font-weight: normal;
font-size: 18px;
line-height: 22px;
color: #666666;
}
.aboutBox .aboutSubtitle .he {
font-style: normal;
}
.aboutBox .aboutAuthor{
font-size: 16px;
line-height: 19px;
color: var(--dark-grey);
margin-bottom: 22px;
display: flex;
}
.readerPanel.hebrew .aboutBox .aboutAuthor .aboutAuthorInner{
direction: rtl;
}
.aboutBox .aboutAuthor .authorName{
margin-inline-start: 5px;
color: black;
}
.aboutBox .aboutDesc {
margin: 15px 0 15px 0;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
color: var(--dark-grey);
}
.aboutBox .aboutComposed{
font-size: 14px;
line-height: 18px;
color: var(--medium-grey);
}
.readerApp.interface-hebrew .aboutBox .versionDetails,
.readerApp.interface-hebrew .versionsBox .versionDetails {
text-align: right;
}
.aboutBox .versionDetails .separator,
.versionsBox .versionDetails .separator {
margin: 0 3px;
}
.aboutBox .currVersionSection, .aboutBox .alternateVersionsSection {
padding-bottom: 30px;
}
.aboutBox .versionsBox .versionBlock:first-child{
border-top: none;
padding-top: 10px;
}
.aboutBox .currVersionSection .versionBlock + .versionBlock {
border-top: solid 1px #CCC;
padding-top: 20px;
margin-top: 20px;
}
.version-with-buy-button {
display: flex;
flex-direction: column;
}
.version-with-buy-button .version-text-image{
display: flex;
justify-content: space-between;
}
.version-with-buy-button .version-text-image .versionBlock{
align-self: flex-start;
}
.versionsBox .version-with-buy-button{
border-top: solid 1px #CCC;
}
.versionsBox .version-with-buy-button .versionBlock{
border-top: none;
}
.versionsBox .version-with-buy-button .version-text-image .version-with-buy-button-image
{
padding: 20px;
}
.versionsBox .version-with-buy-button .version-with-buy-button-link{
padding: 10px 20px;
}
.version-with-buy-button .version-with-buy-button-link{
align-content: flex-start;
min-width: 50%;
}
.version-with-buy-button .version-with-buy-button-link a.button{
color: #FFFFFF;
padding: 7px 20px;
}
.version-with-buy-button .version-text-image .version-with-buy-button-image img.buy-img {
height: 85px;
border-radius: 2px;
}
.versionsBox .versionLanguage {
padding-bottom: 15px;
letter-spacing: 1px;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
color: #666666;
}
.interface-hebrew .versionsBox .versionLanguage {
direction: rtl;
}
.versionsBox div:not(:first-child) .versionLanguage {
padding-top: 25px;
}
.versionsBox .versionLanguage .versionCount {
color: #999;
}
.versionsBox a.selectButton:not(.version-with-preview-title-line .selectButton) {
font-style: normal;
font-weight: normal;
font-size: 13px;
color: #666666;
box-shadow: 0 1px 2px #999;
padding: 2px 8px;
background-color: white;
border-radius: 4px;
line-height: 18px;
cursor: pointer;
}
.versionsBox a.selectButton.currSelectButton:not(.version-with-preview-title-line .selectButton) {
background-color: #212E50;
text-decoration: none;
cursor: default;
line-height: 20px;
color: #FFFFFF;
}
.versionsTextList .topFiltersInner .uppercase {
text-transform: none;
}
span.purim-emoji img{
height: 25px;
width: 25px;
}
/* Sheets */
.sheetsInPanel {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
padding: 0 15px;
box-sizing: border-box;
position: relative;
}
.sheetContent {
width: 100%;
box-sizing: border-box;
font-size: 2.2em;
line-height: 1.6;
text-align: justify;
background-color: inherit;
margin: 0 auto;
max-width: 760px;
position: relative;
padding: 0 30px;
counter-reset: css-counter 0;
}
.sheetContent .ref {
cursor: pointer;
color: #999;
font-size: 1em;
}
.sheetContent .ref a {
color: #999;
}
.sheetContent img {
max-width: 100%;
}
.sheetContent table {
margin: auto;
max-width: 100%;
width: 100%;
border-collapse: collapse;
table-layout: fixed
}
.sheetContent table th,
.sheetContent table td {
padding: 10px;
border-top: 1px solid #E6E5E6;
vertical-align: top;
}
.sheetContent table thead th {
vertical-align: bottom;
border-bottom: 2px solid #E6E5E6;
border-top: none;
}
.sheetContent table th:first-of-type,
.sheetContent table tr td:first-of-type {
padding-left: 0;
}
.sheetContent table th:last-of-type,
.sheetContent table tr td:last-of-type {
padding-right: 0;
}
.sheetContent tbody {
width: 100%;
}
.sheetContent .center {
text-align: center;
}
.readerPanel .sheetItem {
position: relative;
}
.heLeft.bilingual section.SheetSource .sheetItem.enOnly > .en,
.heLeft.bilingual section.SheetSource .sheetItem.heOnly > .he,
.heRight.bilingual section.SheetSource .sheetItem.enOnly > .en,
.heRight.bilingual section.SheetSource .sheetItem.heOnly > .he {
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.readerPanel .sheetItem.indented-1,
.readerPanel section.SheetSource.indented-1,
.readerPanel section.SheetOutsideBiText.indented-1 {
margin-left: 30px;
margin-right: 30px;
}
.readerPanel .sheetItem.indented-2,
.readerPanel section.SheetSource.indented-2,
.readerPanel section.SheetOutsideBiText.indented-2 {
margin-left: 60px;
margin-right: 60px;
}
.readerPanel .sheetItem.indented-3,
.readerPanel section.SheetSource.indented-3,
.readerPanel section.SheetOutsideBiText.indented-3 {
margin-left: 90px;
margin-right: 90px;
}
.sheetContent .customSourceTitle {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
text-transform: none;
margin-bottom: 0;
margin-top: 40px;
}
.sheetContent p {
margin: 0 0 1em 0;
}
.segmentNumber.sheetSegmentNumber {
display: block;
position: absolute;
text-align: center;
}
.readerPanel.bilingual.heLeft .sheetItem.segment .segmentNumber.sheetSegmentNumber,
.readerPanel.bilingual.heRight .sheetItem.segment .segmentNumber.sheetSegmentNumber {
left: 50%;
margin-left: -15px;
}
.readerPanel.bilingual.heLeft .sheetItem.segment.enOnly .segmentNumber.sheetSegmentNumber,
.readerPanel.bilingual.heRight .sheetItem.segment.enOnly .segmentNumber.sheetSegmentNumber {
right: 0px;
left: auto;
margin-left: 0;
}
.readerPanel.bilingual.heLeft .sheetItem.segment.heOnly .segmentNumber.sheetSegmentNumber,
.readerPanel.bilingual.heRight .sheetItem.segment.heOnly .segmentNumber.sheetSegmentNumber {
left: 0px;
margin-left: 0;
}
.readerPanel.english .sheetItem.segment.heOnly .segmentNumber .en,
.readerPanel.hebrew .sheetItem.segment.enOnly .segmentNumber .he
.readerPanel.hebrew section.SheetSource .sheetItem.enOnly > .en,
.readerPanel.english section.SheetSource .sheetItem.heOnly > .he,
.readerPanel.hebrew section.SheetOutsideBiText .sheetItem.enOnly > .en,
.readerPanel.english section.SheetOutsideBiText .sheetItem.heOnly > .he {
display: block;
}
.sheetTocIcon {
color: #ccc;
font-size: 16px;
width: 15px;
height: 15px;
margin: 0 8px;
vertical-align: middle;
}
.bookPage .content h2.tagsTitle {
text-align: center;
color:black;
font-size: 13px;
margin-bottom: 0;
padding-bottom: 8px;
}
.sheetMetaDataBox {
margin: 40px auto 0 auto;
text-align: center;
}
.bookMetaDataBox {
margin: 40px auto;
text-align: center;
}
.sheetContent .sheetItem.segment .sourceContentText {
margin-bottom: 18px;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
}
.sheetContent h1,
#sheet .outside h1,
.sourceContentText h1 {
font-weight: 400;
font-size: var(--serif-h3-font-size);
text-align: center;
margin-top: 45px;
margin-bottom: 30px;
}
.sheetContent h1 span,
.sourceContentText h1 span {
border-bottom: 4px solid var(--lighter-grey);
}
.readerPanel.hebrew .sheetContent .sheetItem.segment .sourceContentText.outsideBiText.en {
display: none;
}
.readerPanel.english .sheetContent .sheetItem.segment .sourceContentText.outsideBiText.he {
display: none;
}
.readerPanel.hebrew .sheetContent .sheetItem.segment.enOnly .sourceContentText.outsideBiText.en {
display: inline;
}
.readerPanel.english .sheetContent .sheetItem.segment.heOnly .sourceContentText.outsideBiText.he {
display: inline;
}
.readerPanel.english .sheetContent .sheetItem .SheetOutsideText.segment.he,
.readerPanel.hebrew .sheetContent .sheetItem .SheetOutsideText.segment.en,
.readerPanel.english .sheetContent .sheetItem .SheetComment.segment.he,
.readerPanel.hebrew .sheetContent .sheetItem .SheetComment.segment.en {
display: inline;
}
.sourceContentText.centeredSheetContent {
text-align: center;
}
.sheetContent .sheetItem.segment .sourceContentText p:last-child,
.sheetContent .editorContent .sheetItem.segment .sourceContentText p {
margin-bottom: 0;
}
.sheetContent .editorContent .sheetItem.noPointer {
pointer-events: none;
}
.sheetContent .editorContent .sheetItem.noPointer iframe {
pointer-events: auto;
}
.sheetContent .editorContent .sheetItem.noPointer .element-link,
.sheetContent .editorContent .sheetItem.noPointer .element-link a {
cursor: pointer;
pointer-events: auto;
}
.sheetContent .sheetItem.segment .addedBy {
margin-top: -20px;
}
.sheetContent .element-link {
display: inline;
position: relative;
}
.sheetContent .element-link .popup {
position: absolute;
left: 0;
display: flex;
align-items: center;
background-color: white;
padding: 0;
border-radius: 6px;
z-index: 1;
top: -38px;
pointer-events: auto;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
}
.sheetNotice {
color: var(--dark-grey);
background: var(--lighter-grey);
border: 1px solid var(--light-grey);
box-sizing: border-box;
border-radius: 6px;
padding: 10px 20px;
margin: 22px 44px 0;
font-size: 16px;
}
.interface-hebrew .sheetContent .element-link .popup {
direction: rtl;
}
.sheetContent .element-link .popup input {
border: none;
width: 200px;
padding: 6px;
font-size: 16px;
color: rgb(0, 136, 204)
}
.sheetContent .element-link .popup a {
display: flex;
align-items: center;
gap: 5px;
padding-right: 10px;
border-right: 1px solid lightgrey;
}
.sheetContent .element-link .popup button {
border: none;
background: transparent;
padding: 6px;
}
.sheetContent .element-link .popup button:hover {
color: rebeccapurple;
cursor: pointer;
}
.sheetContent .editorContent,
.sheetContent .editorContent .segment {
cursor: text;
}
.interface-english .sheetContent .sheetItem.segment .addedBy {
float: left;
}
.interface-hebrew .sheetContent .sheetItem.segment .addedBy {
float: right;
}
.youTubeContainer {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
pointer-events: auto;
}
.youTubeContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.sheetContent .media {
margin: 0 auto;
display: table;
table-layout: fixed;
}
.sheetContent .media.fullWidth {
width: 100%;
}
.sheetContent .media .mediaCaption {
display: table-caption;
caption-side: bottom;
padding-top: 8px;
}
.sheetContent .media .mediaCaptionInner {
display: flex;
justify-content: space-between;
}
.sheetContent .media .mediaCaption .en {
font-size: 80%;
text-align: left;
flex: 1;
}
.sheetContent .media .mediaCaption .he {
font-size: 72%;
flex: 1;
font-family: "Heebo", "sans-serif";
}
.sheetContent .media .mediaCaption.heOnly .he,
.sheetContent .media .mediaCaption.enOnly .en {
display: block;
}
.sheetContent .media .mediaCaption.heOnly .en,
.sheetContent .media .mediaCaption.enOnly .he {
display: none;
}
.sheetContent .spacer:only-of-type.empty {
line-height: inherit;
}
.sheetItem:only-of-type.empty .SheetOutsideText:before,
.sheetContent .spacer:only-of-type.empty:before {
color: #999;
position: absolute;
pointer-events: none;
}
.interface-english .sheetItem:only-of-type.empty .SheetOutsideText:before,
.interface-english .spacer:only-of-type.empty:before,
.interface-english .spacer:only-of-type.empty:before {
content: "Write something... ";
}
.interface-hebrew .sheetItem:only-of-type.empty .SheetOutsideText:before,
.interface-hebrew .spacer:only-of-type.empty:before,
.interface-hebrew .spacer:only-of-type.empty:before {
content: "לכתוב משהו...";
}
.editorAddInterface {
position: relative;
pointer-events:none;
background-color: transparent;
}
.editorAddInterface:before {
content: "";
margin-inline-start:-46px;
position: absolute;
width: 30px;
height: 30px;
transform: rotate(45deg);
background-color: white;
background-image: url("/static/icons/heavy-x-dark.svg");
border: 1px solid var(--light-grey);
background-size: 14px;
border-radius: 50%;
pointer-events:auto;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
box-sizing: border-box;
box-shadow: 0px 1px 3px 0px #00000040;
}
.editorAddInterface:hover::before {
background-color: var(--lighter-grey);
}
.editorAddInterface.active:hover::before {
background-color: white;
}
.editorAddInterface.active {
background-color: white;
line-height: initial;
}
.editorAddInterface.active:before {
transform: rotate(0);
}
.editorAddInterface .editorAddInterfaceButton {
display: none;
}
.addInterfaceInput {
pointer-events: none;
display: inline-block;
}
.addInterfaceInput .textPreview {
border-inline-start: 4px solid;
padding-inline-start: 36px;
padding-inline-end: 10px;
padding-top: 30px;
padding-bottom: 30px;
pointer-events: auto;
margin-top: 10px;
background-color: white;
}
.addInterfaceInput .button {
font-size: 14px;
padding-top: 5px;
padding-bottom: 5px;
height: 30px;
position: absolute;
}
.addInterfaceInput .textPreviewSegment {
display: inline;
}
.addInterfaceInput .textPreview .inner {
max-height: 272px;
overflow-y: scroll;
padding-inline-end: 30px;
position: relative;
}
.addInterfaceInput .suggestionBoxContainer,
.addInterfaceInput .textPreviewContainer {
position: absolute;
z-index: 1;
}
.addInterfaceInput .suggestionBox,
.addInterfaceInput .textPreview {
border: 1px solid var(--light-grey);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
}
.addInterfaceInput .suggestionBox {
height: 100%;
}
.addInterfaceInput select.suggestionBox {
font-size: 22px;
}
.addInterfaceInput select.suggestionBox:focus > option:checked {
background: var(--light-grey) !important;
}
.addInterfaceInput select.suggestionBox option:checked,
.addInterfaceInput select.suggestionBox option:hover {
box-shadow: 0 0 10px 100px var(--light-grey) inset;
}
.addInterfaceInput input,
.addInterfaceInput button,
.addInterfaceInput .suggestion {
pointer-events: auto;
cursor: pointer;
}
.addInterfaceInput .suggestion {
border-inline-start: 4px solid;
padding-inline-start: 36px;
padding-inline-end: 40px;
padding-top: 9px;
padding-bottom: 9px;
border-bottom: 1px solid var(--lighter-grey);
}
.addInterfaceInput .suggestion:last-of-type {
border-bottom: none;
}
.addInterfaceInput input {
min-width: 350px;
max-width: 450px;
border-radius: 250px;
border: none;
box-shadow: none;
box-sizing: border-box;
font-size: 22px;
padding-inline-start: 30px;
padding-top: revert;
margin-inline-end: 20px;
background: url("/static/icons/iconmonstr-magnifier-2-240.svg") no-repeat scroll left 7px top 7px;
background-color: var(--lighter-grey);
}
.topicSearch.addInterfaceInput {
display: flex;
margin-left: 30px;
margin-right: 30px;
justify-content: space-between;
}
.topicSearch.addInterfaceInput input {
margin-top: 30px;
height: 30px;
max-width: 250px;
min-width: 250px;
padding-inline-end: 30px;
margin-left: 0;
margin-right: 0;
font-size: 20px;
}
.topicSearch.addInterfaceInput input.selected {
color: #4B71B7;
}
.topicSearch.addInterfaceInput .button {
margin-top: 30px;
position: relative;
white-space: nowrap;
}
.addInterfaceInput .suggestion {
font-size: 20px;
}
.topicSearch.addInterfaceInput select.suggestionBox {
margin-top: 60px;
}
.addInterfaceInput.mediaInput input {
background: url("/static/icons/link_grey.svg") no-repeat scroll left 7px top 7px;
background-color: var(--lighter-grey);
}
.readerApp.interface-hebrew .addInterfaceInput input {
background-position: right 7px top 7px;
font-family: var(--hebrew-serif-font-family);
}
.addInterfaceInput input::placeholder {
font-size: 22px;
font-style: normal;
}
.addInterfaceInput input+span.helperCompletionText {
position: absolute;
margin-inline-start: 4px;
color: var(--medium-grey);
}
.editorAddInterface.active .editorAddInterfaceButton {
width: 30px;
height: 30px;
padding: 10px;
display: inline-block;
background-size: auto 12px;
background-repeat: no-repeat;
background-position: center;
border-radius: 6px;
background-origin: content-box;
background-color: var(--lighter-grey);
margin-inline-end: 6px;
box-sizing: border-box;
cursor: pointer;
pointer-events: auto;
}
.editorAddInterface.active .cursorHolder {
display: inline-block;
}
#addSourceButton.editorAddInterfaceButton {
background-image: url("/static/icons/quotation.svg");
}
#addImageButton.editorAddInterfaceButton {
background-image: url("/static/icons/image.svg");
}
#addMediaButton.editorAddInterfaceButton {
background-image: url("/static/icons/video.svg");
}
#addImageFileSelectorLabel {
width: 30px;
height: 30px;
margin-inline-start: -5px;
margin-top: -5px;
display: block;
position: absolute;
cursor: pointer;
}
.sheetContent .sheetItem .SheetOutsideText.segment p {
margin: 0
}
.sheetContent .sheetItem .SheetOutsideText.segment {
margin: 0
}
.sheetContent .sheetItem .SheetSource.segment,
.sheetContent .sheetItem .SheetOutsideBiText.segment {
margin-top: 2px;
margin-bottom:30px;
}
.sheetContent .text.loading {
cursor: wait;
}
.oldSheetNotice,
.oldSheetNotice a,
.editSheetNotice,
.editSheetNotice a {
font-size: 12px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #999;
}
.cookiesNotification {
position: fixed;
z-index: 9999;
color: white;
background-color: #212E50;
border-top: 1px solid #ccc;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 10px 0;
line-height: 1.1;
text-align: center;
unicode-bidi: plaintext;
}
.cookiesNotification a {
text-decoration: underline;
color: inherit;
margin-inline-start: 5px;
}
.cookiesNotification .button {
margin-inline-start: 12px;
}
.readerMessageBox {
z-index: 9999;
color: #000;
font-size: 16px;
background-color: #ededec;
border: 1px solid #ccc;
top: 0;
left: 0;
box-sizing: border-box;
padding: 10px 0;
margin: 40px;
line-height: 1.1;
text-align: center;
}
.readerMessageBox a {
text-decoration: underline;
color: inherit;
}
.he sup.sourcePrefix {
margin-right: -35px;
position: absolute;
text-decoration: none;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #000;
}
.en sup.sourcePrefix {
margin-left: -35px;
position: absolute;
text-decoration: none;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #000;
}
.heLeft.bilingual .sheetContent .text sup.sourcePrefix,
.heRight.bilingual .sheetContent .text sup.sourcePrefix {
margin-right: -28px;
}
.heLeft.bilingual .sheetContent .text .en sup.sourcePrefix,
.heRight.bilingual .sheetContent .text .en sup.sourcePrefix {
display: none
}
.sheetItem.ref-display-none .ref {
display: none;
}
section.SheetSource .en,
section.SheetOutsideBiText .en {
background-color: #FBFBFA;
}
section.SheetSource,
section.SheetOutsideBiText {
border-inline-start: 4px solid;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
margin-bottom: 30px;
}
.SheetOutsideBiText, .SheetSource {
counter-increment: css-counter 1;
}
.SheetOutsideBiText:before,
.SheetSource:before {
position: absolute;
color: var(--medium-grey);
font-size: 12px;
}
.english .SheetOutsideBiText:before,
.english .SheetSource:before {
content: counter(css-counter);
left: -34px;
font-family: var(--english-sans-serif-font-family);
}
.bilingual .SheetOutsideBiText:before,
.bilingual .SheetSource:before {
content: counter(css-counter);
right: -34px;
font-family: var(--english-sans-serif-font-family);
}
.hebrew .SheetOutsideBiText:before,
.hebrew .SheetSource:before {
content: counter(css-counter, hebrew);
right: -34px;
font-family: var(--hebrew-sans-serif-font-family);
}
.readerPanel.hebrew section.SheetSource .sheetItem > .he,
.readerPanel.english section.SheetSource .sheetItem > .en,
.readerPanel.hebrew section.SheetOutsideBiText .sheetItem > .he,
.readerPanel.english section.SheetOutsideBiText .sheetItem > .en {
display: block;
}
.readerPanel.hebrew section.SheetSource .sheetItem > .en,
.readerPanel.english section.SheetSource .sheetItem > .he,
.readerPanel.hebrew section.SheetOutsideBiText .sheetItem > .en,
.readerPanel.english section.SheetOutsideBiText .sheetItem > .he {
display: none;
}
.interface-english section.SheetSource .sheetItem > .he,
.interface-english section.SheetSource .sheetItem > .en,
.interface-english section.SheetOutsideBiText .sheetItem > .he,
.interface-english section.SheetOutsideBiText .sheetItem > .en {
padding: 15px 20px 15px 16px;
}
.interface-hebrew section.SheetSource .sheetItem > .he,
.interface-hebrew section.SheetSource .sheetItem > .en,
.interface-hebrew section.SheetOutsideBiText .sheetItem > .he,
.interface-hebrew section.SheetOutsideBiText .sheetItem > .en {
padding: 15px 16px 15px 20px;
}
.readerPanel.bilingual.stacked .sheetContent section.SheetSource .segment.highlight .he,
.readerPanel.bilingual.stacked .sheetContent section.SheetOutsideBiText .segment.highlight .he {
padding-bottom: 15px;
}
section.SheetSource.highlight,
section.SheetOutsideBiText.highlight {
background-color: #E9E9E7;
}
section.SheetSource .segmentNumber,
section.SheetSource .SheetOutsideBiText {
display: none;
}
.sheetContent section.SheetSource.highlight .sheetItem.segment.highlight .sourceContentText,
.sheetContent section.SheetSource .sheetItem.segment .sourceContentText,
.sheetContent section.SheetOutsideBiText.highlight .sheetItem.segment.highlight .sourceContentText,
.sheetContent section.SheetOutsideBiText .sheetItem.segment .sourceContentText {
margin: 0;
}
.sheetItem .SheetSource,
.sheetItem .SheetOutsideBiText {
border-inline-start: 4px solid;
padding-inline-start: 16px;
padding-inline-end: 20px;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.25);
}
.sheetItem .SheetSource.segment,
.sheetItem .SheetOutsideBiText.segment {
cursor: pointer;
}
.sheetItem .SheetSource.selected.segment,
.sheetItem .SheetOutsideBiText.selected.segment {
border-top: 2px solid var(--select-blue);
border-bottom: 2px solid var(--select-blue);
border-inline-end: 2px solid var(--select-blue);
margin-top: 0;
margin-bottom: 28px;
margin-inline-end: -2px;
cursor: text;
}
.sheetItem .SheetSource .he,
.sheetItem .SheetSource .en,
.sheetItem .SheetOutsideBiText .he,
.sheetItem .SheetOutsideBiText .en {
padding-inline-start: 16px;
padding-inline-end: 20px;
margin-inline-start: -16px;
margin-inline-end: -20px;
padding-top: 15px;
padding-bottom: 15px;
}
.interface-hebrew .sheetItem .SheetSource .he,
.interface-hebrew .sheetItem .SheetSource .en,
.interface-hebrew .sheetItem .SheetOutsideBiText .he,
.interface-hebrew .sheetItem .SheetOutsideBiText .en {
padding-inline-start: 20px;
padding-inline-end: 16px;
margin-inline-start: -20px;
margin-inline-end: -16px;
}
.interface-hebrew .bilingual.heLeft .sheetItem .SheetOutsideBiText .he,
.interface-hebrew .bilingual.heLeft .sheetItem .SheetSource .he,
.interface-hebrew .bilingual.heRight .sheetItem .SheetOutsideBiText .en,
.interface-hebrew .bilingual.heRight .sheetItem .SheetSource .en,
.interface-english .bilingual.heRight .sheetItem .SheetOutsideBiText .he,
.interface-english .bilingual.heRight .sheetItem .SheetSource .he,
.interface-english .bilingual.heLeft .sheetItem .SheetOutsideBiText .en,
.interface-english .bilingual.heLeft .sheetItem .SheetSource .en {
padding-inline-end: 20px;
margin-inline-end: 0px;
padding-inline-start: 20px;
margin-inline-start: 0px;
}
.interface-hebrew .bilingual.heLeft .sheetItem .SheetOutsideBiText .en,
.interface-hebrew .bilingual.heLeft .sheetItem .SheetSource .en,
.interface-english .bilingual.heLeft .sheetItem .SheetOutsideBiText .he,
.interface-english .bilingual.heLeft .sheetItem .SheetSource .he {
padding-inline-end: 16px;
margin-inline-end: 0px;
padding-inline-start: 20px;
margin-inline-start: 0px;
}
.interface-hebrew .bilingual.heRight .sheetItem .SheetOutsideBiText .he,
.interface-hebrew .bilingual.heRight .sheetItem .SheetSource .he,
.interface-english .bilingual.heRight .sheetItem .SheetOutsideBiText .en,
.interface-english .bilingual.heRight .sheetItem .SheetSource .en {
padding-inline-end: 20px;
margin-inline-end: 0px;
padding-inline-start: 16px;
margin-inline-start: 0px;
}
.readerPanel.bilingual.heRight .sheetItem .SheetSource,
.readerPanel.bilingual.heRight .sheetItem .SheetOutsideBiText,
.readerPanel.bilingual.heLeft .sheetItem .SheetSource,
.readerPanel.bilingual.heLeft .sheetItem .SheetOutsideBiText {
padding-left: 0;
padding-right: 0;
}
.readerPanel.english .sheetItem .SheetSource .he,
.readerPanel.english .sheetItem .SheetSource .en,
.readerPanel.english .sheetItem .SheetOutsideBiText .he,
.readerPanel.english .sheetItem .SheetOutsideBiText .en,
.readerPanel.hebrew .sheetItem .SheetSource .he,
.readerPanel.hebrew .sheetItem .SheetSource .en,
.readerPanel.hebrew .sheetItem .SheetOutsideBiText .he,
.readerPanel.hebrew .sheetItem .SheetOutsideBiText .en
{
padding-inline-start: initial;
padding-inline-end: initial;
margin-inline-start: initial;
margin-inline-end: initial;
}
.readerPanel.english .sheetItem .SheetSource.segment,
.readerPanel.hebrew .sheetItem .SheetSource.segment {
padding-top: 15px;
padding-bottom: 15px;
}
.sheetItem .SheetSource .he.editable.selected .sourceContentText,
.sheetItem .SheetSource .en.editable.selected .sourceContentText,
.sheetItem .SheetOutsideBiText .he.editable.selected .sourceContentText,
.sheetItem .SheetOutsideBiText .en.editable.selected .sourceContentText {
background-color: #FFFFFF;
box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
border-radius: 6px;
}
.sheetItem .SheetSource ::selection,
.sheetItem .SheetOutsideBiText ::selection {
background-color: rgba(0,0,0,0);
}
.sheetItem .SheetSource .he.editable.selected ::selection,
.sheetItem .SheetSource .en.editable.selected ::selection,
.sheetItem .SheetOutsideBiText .he.editable.selected ::selection,
.sheetItem .SheetOutsideBiText .en.editable.selected ::selection {
background-color: #D2DCFF;
}
.sheetItem .SheetSource .en,
.sheetItem .SheetOutsideBiText .en {
background-color: #FBFBFA;
}
.sheetItem .SheetSource .ref,
.sheetItem .SheetOutsideBiText .ref {
pointer-events: none;
user-select: none;
}
.readerPanel.bilingual .sheetItem .SheetSource:after,
.readerPanel.bilingual .sheetItem .SheetOutsideBiText:after {
content: " ";
display: block;
clear: both;
height: 0;
background-color: #FBFBFA;
}
.sheetItem .SheetMedia {
margin-bottom: 14px;
}
.readerPanel.bilingual.heRight .SheetSource {
background-image:
linear-gradient(
to left,
#fff,
#fff 50%,
#FBFBFA 50%,
#FBFBFA 100%,
#fff 100%
);
}
.readerPanel.bilingual.heLeft .SheetSource {
background-image:
linear-gradient(
to right,
#fff,
#fff 50%,
#FBFBFA 50%,
#FBFBFA 100%,
#fff 100%
);
}
.bilingual.heLeft .sheetContent .boxedSheetItem,
.bilingual.heRight .sheetContent .boxedSheetItem {
margin-bottom: 30px;
}
.bilingual.heLeft .sheetContent .sheetItem .SheetSource.segment,
.bilingual.heRight .sheetContent .sheetItem .SheetSource.segment {
margin-bottom: 0;
}
.boxedSheetItem + .spacer {
margin-top: -30px;
transition: all .5s ease-in-out;
}
.boxedSheetItem + .spacer.spacerSelected {
margin-top: unset;
margin-bottom:30px;
transition: all .5s ease-in-out;
}
.boxedSheetItem[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
-khtml-user-drag: element;
-webkit-user-drag: element;
}
.boxedSheetItem.dragged {
opacity: .2;
}
.boxedSheetItem .boxedSourceChildren {
position: absolute;
top: 0;
}
.draggedOver.draggedOverBefore::before {
content: "​"; /* zwsp required for chrome to display content */
display: block;
background-color: #D2DCFF;
width: 100%;
}
.draggedOver.draggedOverAfter::after {
content: "​"; /* zwsp required for chrome to display content */
display: block;
background-color: #D2DCFF;
width: 100%;
}
.dragIcon {
background-color: #F0F8FF;
width: auto;
height: 30px;
left: -3000px;
border-inline-start: 4px solid;
font-size: 22px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
position: absolute;
}
.dragIconContainer {
position: absolute;
left: -9999px;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.1);
}
.feedbackBox p {
font-size: 16px;
letter-spacing: 1px;
}
.feedbackBox .button {
margin: auto;
width: 100%;
}
.feedbackBox input {
padding: 16px 22px;
margin-bottom: 20px;
cursor: pointer;
font-size: 18px;
border-radius: 4px;
box-shadow: none;
border: 1px solid #E9E9E9;
width: 100%;
box-sizing: border-box;
}
.connectionsPanel textarea.feedbackText {
border-radius: 7px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.img-circle {
border-radius: 50%;
}
.tab-view .tab-list {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.tab-view .tab-list .tab {
font-size: 16px;
color: black;
text-align: center;
padding: 10px 0;
margin: 0;
margin-inline-end: 30px;
cursor: pointer;
}
.tab-view .tab-list .tab a {
color: inherit;
}
.tab-view .tab-list .tab a:hover {
text-decoration: none;
}
.tab-view .tab-list .active .tab {
border-bottom: 4px solid #CCC;
}
.interface-hebrew .tab-view .tab-list .tab {
margin: 0 0 0 30px;
}
.tab-view .tab-list .tab img {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
top: 2px;
position: relative;
}
.interface-hebrew .tab-view .tab-list .tab img {
margin: 0 0 0 10px;
}
.tab-view .tab-list .justifyright {
margin: 0 0 4px auto;
display: flex;
align-items: center;
}
.tab-view .tab-list .tab.filter,
.tab-view.largeTabs .tab-list .tab.filter {
font-size: 16px;
margin: 0;
padding: 6px 9px;
border: 1px solid #EDEDEC;
background-color: #EDEDEC;
border-radius: 6px;
}
.tab-view .tab-list .tab.filter.open {
background-color: inherit;
}
.tab-view .tab-list .tab.filter img {
margin: 0 0 1px 6px;
width: 12px;
height: 12px;
}
.interface-hebrew .tab-view .tab-list .tab.filter img {
margin: 0 6px 1px 0;
}
.tab-view .tab-list .applink a {
color: #666;
}
.interface-hebrew .tab-view .tab-list .justifyright {
margin: 0 auto 0 0;
}
.tab-list :not(.active) .tab, .tab-list :not(.active) .tab a{
color: #666;
}
.tab-view.largeTabs .tab-list {
border-bottom: 1px solid #CCC;
margin-bottom: 18px;
}
.tab-view.largeTabs .filter-bar {
margin-bottom: 30px;
}
.tab-view.largeTabs .tab-list .tab {
font-size: 22px;
}
.tab-view.largeTabs .tab-list .active .tab {
border-bottom: 4px solid var(--light-grey);
}
@media (max-width: 540px) {
.profile-page .tab-view .tab .tabIcon {
display: none;
}
.interface-hebrew .tab-view .tab-list .justifyright {
margin: initial;
}
.tab-view .tab-list .justifyright {
margin: initial;
}
.tab-view .tab-list{
flex-wrap: wrap;
}
.profile-page .profile-actions .resourcesLink.profile-settings,
.profile-page .profile-actions .button.logoutLink{
display: none;
}
}
.profile-page .textRange {
font-size: 18px;
color: #666;
}
.profile-page .note-text {
font-size: 18px;
}
.profile-page .note {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 0 20px 0;
}
.profile-page .note + .note {
border-top: 1px solid #CCC;
}
.profile-page .noteLeft {
flex-grow: 1;
}
.profile-page .noteRight {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.profile-page .note .noteRight img {
display: none;
}
.profile-page .note .noteRight img + img {
margin: 0 0 0 10px;
}
.interface-hebrew .profile-page .note .noteRight img + img {
margin: 0 10px 0 0;
}
.profile-page .note:hover .noteRight img {
display: inline-block;
width: 16px;
height: 16px;
opacity: 0.4;
}
.profile-page .note:hover .noteRight img:hover {
opacity: 0.6;
cursor:pointer;
}
.profile-page .social-icon img {
width: 13px;
height: 13px;
opacity: 0.4;
}
.profile-page .social-icon + .social-icon {
padding: 0 5px;
}
.profile-page .social-icon:hover img {
opacity: 0.6;
}
.editorToggleHeader {
width: 100%;
background-color: #18345D;
color: white;
height: 60px;
font-size: 16px;
margin-top: -60px;
margin-left: -12px;
margin-bottom: 80px;
padding-right: 12px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
left: 0;
}
.interface-hebrew .editorToggleHeader {
direction: rtl;
}
.editorToggleHeader .button {
padding: 5px 8px;
margin-inline-start: 15px;
margin-top: 5px;
height: 30px;
letter-spacing: 0;
}
.feedbackOverlay {
position: fixed;
width: 100%;
height:100%;
background-color: #FBFBFA;
z-index: 1001;
top: 0;
left: 0;
padding: 120px 60px;
box-sizing: border-box;
}
.interface-hebrew .feedbackOverlay {
direction: rtl;
}
.feedbackOverlay .buttonContainer {
margin-top: 50px;
}
.feedbackOverlay h2 {
font-size: 30px;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
margin: 0 auto 50px auto;
color: black;
text-transform: none;
max-width: 600px;
}
.feedbackOverlay p, .feedbackOverlay ul {
font-size: 16px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: black;
max-width: 600px;
margin: 10px auto;
}
.feedbackOverlay textarea {
font-size: 18px;
color: #000;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
border: none;
width: 100%;
padding: 12px;
font-weight: normal;
font-style: normal;
margin-top: 10px;
height: 120px;
}
.interface-hebrew textarea,
.interface-hebrew textarea::placeholder,
.interface-hebrew input
{
font-family: var(--hebrew-sans-serif-font-family);
}
.feedbackOverlay textarea::placeholder {
font-size: 16px;
font-style: normal;
color: #666;
}
.feedbackOverlay a {
color: #4871bf;
}
.feedbackOverlay .button {
margin: 0;
}
.feedbackOverlay a.button {
color: white;
}
.sheetList .sheet {
border-bottom: none;
}
.sheetList .sheet {
display: flex;
flex-direction: row;
}
.sheetList .sheet .sheetLeft {
display: flex;
flex-direction: column;
}
.sheetList .sheet .sheetTags {
color: #999;
}
.sheetList .sheet .sheetTags .bullet {
margin: 0 5px;
}
.sheetList .sheet a {
color: inherit;
cursor: pointer;
}
.sheetList .sheet a.sheetTitle {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 10px;
font-size: 18px;
}
.sheetList .sheet .sheetLeft .sheetTitle img,
.textList .sheet .sheetLeft .sheetTitle img {
width: 18px;
height: 18px;
margin-inline-end: 10px;
}
.sheetLeft div.sheetSummary {
margin-bottom: 10px
}
.default-profile-img {
width: 175px;
height: 175px;
background-color: #999;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 75px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.default-profile-img.invisible {
visibility: hidden;
}
.profile-page .filterable-list {
/* to distinguish top half of profile from bottom half */
background-color: white;
border: 1000px solid white;
border-top: 4px solid white;
border-bottom: 120px solid white;
margin: -4px 0 -120px -1000px;
width: 100%;
}
.interface-hebrew .profile-page .filterable-list {
margin: -4px -1000px -120px 0;
}
.filterable-list .filter-bar {
border-bottom: 1px solid #E2E2E1;
display: flex;
flex-direction: row;
align-items: center;
padding: 16px 0;
justify-content: space-between;
}
.filterable-list .filter-bar-new {
padding: 0 0 20px 0;
justify-content: space-between;
align-items: center;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.filterable-list .filter-bar-new .filter-input {
background-color: #EDEDED;
border-radius: 5px;
padding: 5px;
color: black;
width: 250px;
display: flex;
align-items: center;
}
.filterable-list .filter-bar-new .filter-input ::placeholder {
color: #999;
}
.filterable-list .filter-bar-new .sort-option {
padding: 7px;
color: #666;
font-size: 16px;
cursor: pointer;
margin: 0 0 0 7px;
background-color: #EDEDED;
border-radius: 5px;
}
.interface-hebrew .filterable-list .filter-bar-new .sort-option {
margin: 0 7px 0 0;
}
.filterable-list .filter-bar-new .sort-option.active {
color: black;
}
.filterable-list .filter-bar-new .systemText span {
color: #000;
}
.filterable-list .filter-bar .filter-bar-inner {
display: flex;
align-items: center;
}
.filterable-list .readerNavMenuSearchButton {
margin: 0 10px 0 5px;
display: inline-flex;
top: 0;
}
.interface-hebrew .filterable-list .readerNavMenuSearchButton {
margin: 0 5px 0 10px;
}
.filterable-list input {
border: 0;
font-size: 18px;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
background-color: transparent;
}
.filterable-list .loadingMessage {
margin-top: 30px;
}
.profile-page .filterable-list .filter-content {
padding-top: 25px;
}
.profile-page .sheet-header {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 10px;
}
.profile-page .collectionListingImage {
width: 18px;
height: 18px;
border-radius: 50%;
vertical-align: middle;
margin: 0;
margin-inline-end: 10px;
position: relative;
top: -2px;
}
.profile-page .collectionListingName {
font-size: 18px;
margin-bottom: 10px;
}
.profile-page .collectionListing + .collectionListing {
border-top: 0;
}
.profile-page .profile-summary-content a {
color: inherit;
}
.profile-page .profile-summary a.logoutLink {
color: #666;
padding: 16px 15px;
}
.profile-page .profile-summary {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 40px;
}
.profile-page .profile-summary .summary-column {
display: flex;
flex-direction: column;
flex-grow: 3;
flex-basis: 0;
}
.profile-page .profile-summary .summary-column.start {
align-items: flex-start;
}
.profile-page .profile-summary .summary-column.end {
flex-grow: 1;
}
.profile-page .profile-summary .small-margin {
margin: 0 4px;
}
.profile-page .profile-summary .sub-sub-title > .small-margin:first-child,
.profile-page .profile-summary .sub-sub-title > span:first-child .small-margin {
margin: 0 4px 0 0;
}
.profile-page .profile-summary .sub-sub-title > .small-margin:last-child,
.profile-page .profile-summary .sub-sub-title > span:last-child .small-margin {
margin: 0 0 0 4px;
}
.interface-hebrew .profile-page .profile-summary .sub-sub-title > .small-margin:last-child,
.interface-hebrew .profile-page .profile-summary .sub-sub-title > span:last-child .small-margin {
margin: 0 4px 0 0;
}
.profile-page .aboutText {
margin-top: 20px;
font-size: 18px;
line-height: 1.4;
}
@media (max-width: 540px) {
.profile-page .profile-pic:hover .profile-pic-hover-button.profile-pic-button-visible {
display: none !important; /* dont allow profile pic upload on mobile b/c causes black image on iOS */
}
.profile-page .profile-pic .profile-pic-button {
top: calc(-1 * ((87px/2) + (46px/2))); /* height of .profile-img + height of .profile-pic-button */
}
.profile-page .editorToggleHeader {
display: none !important;
}
.profile-page .profile-summary .profile-img {
width: 87px !important;
height: 87px !important;
font-size: 43.5px !important;
}
.profile-page .profile-summary .default-profile-img {
width: 87px !important;
height: 87px !important;
font-size: 43.5px !important;
}
.profile-page .profile-summary .profile-actions {
flex-wrap: wrap;
}
}
.profile-page .profile-summary .follow {
color: #999;
font-size: 13px;
letter-spacing: 1px;
}
.profile-page .profile-summary .follow .follow-bull {
padding: 0 5px;
}
.profile-page .profile-summary .profile-actions {
display: flex;
flex-direction: row;
margin: 10px 0;
}
.profile-page .resourcesLink.faded {
color: #666;
}
.resourcesLink.blue {
color: white;
background-color: #18345d;
}
.resourcesLink.blue img {
filter: invert(1);
opacity: 1;
}
.profile-page .authorByLine {
margin: 20px 0;
}
.authorByLineImage a {
text-decoration: none;
}
.profile-page .follow-header {
font-size: 20px;
color: #000;
padding-bottom: 10px;
}
.profile-page .follow-header .follow-count {
color: #999;
}
.profile-page .resourcesLink {
min-height: 46px;
height: 46px;
overflow: visible;
padding: 0px 16px;
border-top: 0;
display: flex;
align-items: center;
width: unset;
}
.profile-page .emptyList {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.profile-page .emptyList .emptyListText {
font-size: 16px;
margin: 30px 0;
color: #999;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
line-height: 1.5;
}
.profile-page .profile-summary .resourcesLink + .resourcesLink,
.profile-page .profile-summary .largeFollowButton + .resourcesLink {
margin: 0 0 0 10px;
}
.interface-hebrew .profile-page .profile-summary .largeFollowButton + .resourcesLink,
.interface-hebrew .profile-page .profile-summary .resourcesLink + .resourcesLink {
margin: 0 10px 0 0;
}
.profile-page .profile-summary .title {
margin-bottom: 10px;
}
.profile-page .profile-summary .sub-title {
color: #000;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 16px;
}
.profile-page .profile-summary .sub-sub-title {
color: #666;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 16px;
}
/* Tooltip - source: https://codepen.io/cristina-silva/pen/XXOpga */
.tooltip-toggle {
cursor: pointer;
position: relative;
line-height: normal;
}
.tooltip-toggle svg {
height: 18px;
width: 18px;
}
/*Tooltip text container*/
.three-dots-button.tooltip-toggle::before {
/* make the tooltip appear on right. % is an estimate that works most of the time */
top: 0;
transform: translateY(-35%);
left: 30px;
color: #999;
text-align: left;
}
.interface-hebrew .three-dots-button.tooltip-toggle::before {
left: unset;
right: 30px;
text-align: right;
}
@media (max-width: 450px) {
.three-dots-button.tooltip-toggle::before {
left: -165px;
}
.interface-hebrew .three-dots-button.tooltip-toggle::before{
right: -165px;
}
}
.tooltip-toggle::before {
color: #000;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 13px;
opacity: 0;
pointer-events: none;
text-align: center;
position: absolute;
top: 30px;
left: -70px;
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
border-radius: 5px;
content: attr(aria-label);
text-transform: none;
transition: all 0.5s ease;
width: 140px;
z-index: 1;
}
/*Triggering the transition*/
.tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
.largeFollowButton {
display: inline-flex;
min-height: 46px;
height: 46px;
overflow: visible;
padding: 0px 16px;
align-items: center;
text-align: center;
cursor: pointer;
background: #18345d;
color: #fff;
border-radius: 6px;
box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
.profile-page .largeFollowButton.following .int-en,
.profile-page .largeFollowButton.following .int-he {
color: black;
}
.largeFollowButton.following span {
color: #666;
}
.smallFollowButton {
height: 20px;
line-height: 18px;
width: min-content;
text-align: center;
cursor: pointer;
background: var(--sefaria-blue);
color: white;
border-radius: 3px;
margin-inline-start: 15px;
display: none;
letter-spacing: normal;
padding: 0 3px;
}
.smallFollowButton.smallText span {
color: white;
}
.largeFollowButton.following, .smallFollowButton.following {
background: #fff;
color: black;
}
.smallFollowButton.following{
border: 1px solid #CCCCCC;
box-sizing: border-box;
}
.smallFollowButton.following.smallText span {
color: black;
}
.authorByLine.small .smallFollowButton.following{
line-height: 18px;
}
.authorByLine .smallFollowButton.following{
line-height: 16px;
}
body .homeFeedWrapper {
background-color: white;
}
body .homeFeedWrapper .content {
padding: 0;
}
.columnLayout {
display: flex;
flex-direction: row;
}
@media (max-width: 540px) {
.topicPanel .columnLayout {
flex-direction: column;
}
.topicPanel .sideColumn {
padding: 20px 25px 30px 25px;
max-width: 100%;
align-self: stretch;
border: 0;
margin: 0;
}
.topicPanel .navSidebar {
width: unset;
border-top: 30px solid #FBFBFA;
margin: 0;
}
}
.sideColumn .topicSideColumn {
margin-bottom: 20px;
}
.sideColumn .section {
margin-bottom: 70px;
}
.sideColumn .section h2 {
text-transform: none;
font-size: 24px;
letter-spacing: normal;
text-align: inherit;
margin: 0 0 30px 0;
}
.sideColumn .section h2 .int-en {
text-align: left;
}
.sideColumn .section h2 .int-he {
text-align: right;
}
.sideColumn .section .description {
margin-bottom: 25px;
}
.sideColumn .button img {
width: 16px;
height: 16px;
margin: 0 5px;
position: relative;
top: 2px;
filter: invert(1);
}
.sideColumn .button.white img {
filter: none;
opacity: .4;
}
.sideColumn .button .fa {
opacity: .4;
margin: 0 5px;
}
.sideColumn .inlineButtonBox {
display: flex;
justify-content: space-between;
}
.sideColumn .inlineButtonBox a {
flex: 1;
}
.sideColumn .inlineButtonBox a .button {
width: 100%;
}
.sideColumn .button {
letter-spacing: 0;
}
.sideColumn h2 {
font-weight: 400;
}
.sideColumn .newsletterInput {
height: 53px;
}
.sideColumn .newsletterSignUpBox img {
height: 23px;
width: 23px;
opacity: 0.35;
position: absolute;
top: 15px;
right: 17px;
}
.interface-hebrew .sideColumn .newsletterSignUpBox img {
right: auto;
left: 17px;
transform: scale(-1, 1);
}
.sideColumn .newsletterInput, .sideColumn .newsletterInput::placeholder {
width: 100%;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
font-style: normal;
color: #000;
}
.interface-english .sideColumn .newsletterInput, .interface-english .sideColumn .newsletterInput::placeholder {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
}
.interface-hebrew .sideColumn .newsletterInput, .interface-hebrew .sideColumn .newsletterInput::placeholder {
font-family: "Heebo", sans-serif;
}
.sideColumn .feedbackBoxOverlay.open {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #FBFBFA;
}
.sideColumn .feedbackBoxOverlay.open .feedbackBox {
width: 470px;
}
.homeFeedWrapper .mainColumn {
background-color: white;
}
.storyFeedInner,
.interface-hebrew .storyFeedInner {
width: 760px;
margin: 0 auto;
padding-top: 60px;
max-width: 100%;
box-sizing: border-box;
min-height: 500px;
}
.interface-hebrew .topicPanel .storyFeedInner {
padding-top: 0;
}
.storyByLine:hover .smallFollowButton,
.authorByLine:hover .smallFollowButton {
display: inline-block;
}
.bilingual .homeFeedWrapper span.he,
.bilingual .readerNavMenu.topicPanel .he {
display: block;
padding-bottom: 10px;
}
.mainColumn .story {
padding: 0 0 60px 0;
}
.story .subHeading .int-en, .story .subHeading .int-he {
color: #666;
}
.story .learningPrompt {
padding: 10px 0 20px;
}
.mainColumn .story .storyTitleBlock {
clear: both;
}
.mainColumn .story .storyTitleBlock {
text-align: start;
}
.colorBarBox {
clear: both;
border-inline-start: 4px solid transparent;
padding-inline-start: 20px;
}
.readerPanel.hebrew .savedHistoryList .colorBarBox{
direction: rtl;
}
.interface-english .citationLine,
.interface-english .learnMoreLink {
padding-left: 34px;
}
.interface-hebrew .citationLine,
.interface-hebrew .learnMoreLink {
padding-right: 34px;
}
.storyTextListItem {
padding-bottom: 18px;
}
.storyTextListItem:last-child {
padding-bottom: 0;
}
.mainColumn .saveButton {
align-self: flex-start;
}
.mainColumn .saveLine.storyTitleWrapper .saveButton,
.mainColumn .story.publishSheetStory .saveLine .saveButton {
margin-top: 2px;
}
.interface-english .mainColumn .story .storyTypeBlock {
float: left;
}
.interface-hebrew .mainColumn .story .storyTypeBlock {
float: right;
}
.story .storyBody {
clear: both;
margin: 10px 0;
text-align: justify;
font-size: 18px;
}
.story .storySheetListItem > div.storyBody.sheetSummary > * {
color: var(--dark-grey);
font-family: var(--english-sans-serif-font-family);
font-size: 15px;
}
.story .storyBody .en {
line-height: 1.6;
}
.story .storyBody .he {
font-size: 22px;
line-height: 1.6;
}
.story .storySheetList {
clear: both;
}
.story .storySheetListItem {
padding-bottom: 20px;
}
.story .storySheetListItem:last-child {
padding-bottom: 0;
}
.story .storySheetList .sheetTitle {
padding-bottom: 10px;
}
.story .storySheetList .storyTitle span {
font-size: 20px;
}
.story .saveLine {
display: flex;
align-items: flex-start;
clear: both;
margin-bottom: 10px;
}
.story .saveLine .beforeSave {flex: 1;}
.interface-hebrew .story .saveLine .beforeSave {
padding-left: 10px;
}
.interface-english .story .saveLine .beforeSave {
padding-right: 10px;
}
.story .citationLine.contentText .int-en,
.story .citationLine.contentText .int-he {
color: #999;
}
.authorByLine {
display: flex;
}
.authorByLine .authorByLineText {
padding: 0 10px;
line-height: 22px;
margin-top: -1px;
display: flex;
justify-content: center;
flex-direction: column;
}
.authorByLine .authorByLineText.small{
line-height: 18px;
}
.authorByLine .authorOrganization,
.authorByLine .authorName {
display: block;
}
.saveLine .authorByLine + .saveButton {
position: relative;
bottom: 12px;
}
.authorOrganization {
color: #999;
}
.authorByLine.small {
font-size: 14px;
width: max-content;
}
/* .mainColumn a:not(.button) {
color: #000;
} */
.storyBody a {
text-decoration: underline;
}
.learnMoreLink a {
text-decoration: none;
color: #999;
}
.segment .queryTextHighlight {
background-color: #D2DCFF;
padding-left: 2px;
padding-right: 2px;
}
body .homeFeedWrapper.userStats {
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
background-color: #faf9f9;
}
.editTextInfo {
top: 0px;
right: 0px;
left: 0px;
height: 100%;
width: 100%;
position: absolute;
overflow: auto;
z-index: 1;
background-color: var(--lighter-grey);
}
.editTextInfo .static .inner {
padding: 5px 0 100px;
}
.editTextInfo .static input {
cursor: auto;
color: #000000;
}
.editTextInfo .static label {
margin-bottom: 15px;
}
.editTextInfo #newIndex {
margin: 100px auto;
font-size: 16px;
font-weight: normal;
color: #000;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
}
.editTextInfo #newIndex .publishBox {
text-align: start;
background-color: #EDEDEC;
border-radius: 6px;
padding: 0 0 0 0;
margin: 0 0 0 0;
width: 660px;
max-width: 100%;
}
.editTextInfo #newIndex .publishBox .react-tags__selected-tag-name {
--english-font: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
--hebrew-font: "Heebo", sans-serif;
font-size: 18px;
font-weight: normal;
color: #000;
}
.editTextInfo #newIndex .default {
height: 200px;
width: 97%;
box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
border: none;
border-radius: 7px;
font-size: 16px;
line-height: 18.75px;
padding: 10px;
}
.editTextInfo #newIndex .default::placeholder {
color: #666;
}
.button.small.deleteTopic {
color: var(--dark-grey);
float: right;
margin-top: 30px;
background-color: var(--lightest-grey);
}
.button.small.addTopic {
background-color: #212E50;
color: #FFFFFF;
float: right;
margin-right: 30px;
}
.categoryChooserMenu {
overflow: hidden;
background: url("/static/img/arrow-down.png") 98% 20px/10px 10px no-repeat #ffffff;
width: 100%;
height: 50px;
margin: 0 0 10px 0;
border-radius: 7px;
box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
border: none;
}
.reorderTool {
height: 50px;
margin: 0 0 10px 0;
border-radius: 7px;
box-shadow: 0px 1px 3px rgb(0 0 0 / 20%);
border: none;
}
.reorderTool #title {
margin: 10px;
display: inline-block;
width: 85%;
}
.reorderTool #up, .reorderTool #down {
width: 10px;
margin: 0 4% 0 0;
display: inline-block;
}
.categoryChooserMenu select {
background: transparent;
font-size: 16px;
width: 680px;
border: none;
margin: 0 0 10px 0;
padding: 4px 25px 4px 10px;
}
.connectionsPanel .editTextInfo .categoryChooserMenu {
width: 102%;
}
.connectionsPanel .editTextInfo .collectionsWidget {
width: 70%;
}
.connectionsPanel .editTextInfo .categoryChooserMenu select {
width: 98.5%;
}
.searchBox .editTextInfo .collectionsWidget {
width: 280px;
}
.searchBox .editTextInfo #newIndex {
margin: 50px auto;
}
.searchBox .categoryChooserMenu {
width: 97%;
background: url("/static/img/arrow-down.png") 99% 20px/10px 10px no-repeat #ffffff;
}
.searchBox .categoryChooserMenu select {
width: 100%;
}
.searchBox .editTextInfo #newIndex input {
width: 97%;
}
.searchBox .editTextInfo #newIndex #topicDesc {
width: 92%;
}
.categoryChooserMenu img {
opacity: 0.43;
padding: 0 5px;
height: 10px;
width: 10px;
}
.editTextInfo #newIndex .publishBox .react-tags__selected-tag {
margin: 0 12px 12px 0;
padding: 12px 14px;
}
.editTextInfo #newIndex .publishBox input {
box-shadow: none;
}
.editTextInfo #newIndex .publishBox .react-tags__search {
padding: 0 0 0 0;
}
.editTextInfo #newIndex .optional {
font-size: 13px;
color: var(--light-grey);
font: var(--english-sans-serif-font-family);
}
.editTextInfo #newIndex input[type="text"] {
padding: 4px 10px 4px 10px;
width: 640px;
height: 50px;
font-size: 16px;
margin: 0 0 10px 0;
max-width: 97%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
box-sizing: content-box;
border-radius: 7px;
background: white;
font-family: revert;
}
.editTextInfo #newIndex input::placeholder {
color: #666;
font-size: 16px;
}
.editTextInfo #newIndex #heTitle {
direction: rtl;
}
.interface-english .editTextInfo .static label {
text-align: left;
}
.interface-hebrew .editTextInfo .static label {
text-align: right
}
.editTextInfo #newIndex .sectionType input{
width: 100px;
margin: 0 5px;
font-size: 16px;
}
.editTextInfo #newIndex .remove {
color: white;
background: #bbb;
display: inline-block;
height: 18px;
width: 18px;
line-height: 18px;
border-radius: 6px;
text-align: center;
font-size: 14px;
font-family: sans-serif;
cursor: pointer;
vertical-align: 15%;
}
.editTextInfo #newIndex .sectionType .remove {
margin: -5px 11px 0 -32px;
}
.editTextInfo #newIndex .headerWithButtons a {
color: #666;
}
.editTextInfo .nodeTemplate {
display: none;
}
@media screen and (max-width: 680px) {
.categoryChooserMenu {
background: url("/static/img/arrow-down.png") 300px 20px/10px 10px no-repeat #ffffff;
width: 320px;
}
.editTextInfo .static .headerWithButtons h1 {
margin: 30px;
}
.categoryChooserMenu select {
width: 340px;
}
.editTextInfo #newIndex input {
width: 300px;
}
.editTextInfo #newIndex .publishBox {
width: 320px;
}
}
.collectionsModalBox {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1002;
display: flex;
align-items: center;
justify-content: center;
}
.collectionsModalBox .collectionsWidget {
width: 340px;
box-shadow: 0 1px 8px rgba(0,0,0,.2);
}
.collectionsWidget {
background-color: white;
border-radius: 8px;
z-index: 1;
}
.editTextInfo .collectionsWidget {
width: 39%;
box-shadow: 0 1px 8px rgba(0, 0, 0, .2);
height: 100px;
position: absolute;
padding: 50px 50px 0 50px;
text-align: center;
margin-top: 200px;
}
.collectionsWidgetTop {
display: flex;
padding: 15px 20px;
border-bottom: 1px solid #DDD;
text-align: start;
}
.collectionsEditorTop {
margin-bottom: 15px;
}
.collectionsWidgetTitle {
flex-grow: 1;
font-size: 22px;
vertical-align: middle;
display: block;
color: #666;
}
.collectionsWidgetClose {
font-size: 40px;
color: #CCC;
line-height: 14px;
cursor: pointer;
}
.collectionsWidgetList {
height: 180px;
padding: 0px 20px;
overflow-y: scroll;
border-bottom: 1px solid #EDEDEC;
}
.collectionsWidgetList .checkmarkLabel {
display: block;
letter-spacing: 1.1px;
font-size: 18px;
margin: 20px 0;
text-align: start;
}
.collectionsWidgetList .emptyMessage {
display: block;
color: #666;
padding: 20px 0px;
line-height: 1.5;
text-align: start;
}
.collectionsWidgetCreate,
.collectionsWidgetDone {
display: flex;
padding: 0px 20px;
}
.collectionsWidgetCreate {
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
}
.collectionsEditorCreate {
display: flex;
align-items: center;
padding: 0px 20px;
}
.collectionsWidgetPlus {
color: #666;
font-size: 25px;
margin-inline-end: 13px;
margin-top: -5px;
}
.collectionsWidget .collectionsWidgetCreateInputBox {
flex: 1;
margin-inline-end: 10px;
}
.collectionsWidget input.collectionsWidgetCreateInput {
height: 50px;
border: none;
font-size: 18px;
color: black;
width: 100%;
box-sizing: border-box;
}
.collectionsWidget input.collectionsWidgetCreateInput::placeholder {
font-style: normal;
color: #666;
}
.interface-hebrew .collectionsWidget input.collectionsWidgetCreateInput::placeholder {
font-family: "Heebo", sans-serif;
}
.userStats h1 {
text-align: center;
font-weight: normal;
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
font-size: 30px;
padding: 60px 0 30px;
margin: 0;
}
.userStats h2 {
text-transform: none;
padding: 40px 0 30px;
font-size: 21px;
color: #888;
}
.userStats .statcardRow {
display: flex;
justify-content: space-around;
}
.userStats .statcardRow .statcard {
background-color: #fff;
height: 190px;
width: 32%;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border-radius: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}
.userStats .statcardRow .statcard img {
opacity: 0.3;
height: 60px;
width: 60px;
margin: 0 auto 20px;
}
.userStats .statcardRow .statcard .statcardValue {
font-size: 24px;
text-align: center;
}
.userStats .statcardRow .statcard .statcardLabel {
font-size: 21px;
padding-top: 5px;
text-align: center;
color: #aaa;
}
.userStats .chartRow {
display: flex;
justify-content: space-between;
}
.userStats .chartRow.centered {
justify-content: space-around;
}
.userStats .statHeader {
padding-top: 40px;
text-align: center;
}
.userStats .statHeader span {
color: #666;
letter-spacing: 0.7px;
line-height: 23px;
}
.userStats .chartRow .chartWrapper {
font: 11px sans-serif;
padding: 0;
}
.bilingual .userStats .blockLink .he,
.english .userStats .blockLink .he {
display: none;
}
.hebrew .userStats .blockLink .en {
display: none;
}
.bilingual .userStats .blockLink .en,
.english .userStats .blockLink .en {
font-family: "adobe-garamond-pro", "Crimson Text", Georgia, serif;
}
.hebrew .userStats .blockLink .he {
font-family: "Taamey Frank", "adobe-garamond-pro", "Crimson Text", Georgia, "Times New Roman", serif;
}
.userStatModeChooser {
padding: 0;
display: flex;
justify-content: center;
width: 240px;
margin: 0 auto;
background: white;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.userStatModeButton {
background-color: #fff;
color: #666;
border-radius: 5px;
height: 50px;
width: 120px;
text-align: center;
vertical-align: center;
cursor: pointer;
font-size: 16px;
}
.userStatModeButton.active {
background-color: #19365d;
color: #fff;
}
.userStatModeButton span {
display: block;
margin: 15px 0;
}
.userStats .blockLink {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.userStats .yourPopularSheetsBlock > div {
padding: 10px 0;
}
.userStats .chartLabel {
text-align: center;
padding-top: 8px;
}
a.topicLexiconTitle.contentText {
color: black;
}
.editorToolbar {
position:fixed;
top: 0;
left: 0;
z-index: 100000;
}
#sheetEditToggle {
padding-top: 0;
padding-bottom: 0;
padding-inline-end: 8px;
padding-inline-start: 0;
margin-top: 15px;
margin-inline-end: 0;
margin-bottom: 0;
margin-inline-start: -70px;
width: 70px;
height: 30px;
background: #fff;
border: #ccc solid 1px;
color: #666;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
font-size: 13px;
box-sizing: border-box;
border-radius: 6px;
visibility: hidden;
}
#sheetEditToggle img {
height: 13px;
margin-top: 0;
margin-bottom: 0;
margin-inline-start: 0;
margin-inline-end: 5px;
top: 2px;
position: relative;
filter: invert(67%) sepia(32%) saturate(0%) hue-rotate(54deg) brightness(85%) contrast(91%); /* #999 */
}
#sheetEditToggle i {
margin: 5px;
}
.hoverMenu {
position: absolute;
z-index: 1;
top: -10000px;
left: -10000px;
margin-top: -6px;
opacity: 0;
background-color: #333333;
border-radius: 4px;
transition: opacity 0.75s;
padding: 8px 10px 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.highlightDot {
height: 16px;
width: 16px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.highlightMenu .highlightCancel {
z-index: 0;
height: 15px;
width: 15px;
position: relative;
top: -1px;
font-size: 18px;
}
.highlightButton {
background-color: white;
border: none;
padding: 5p 5px 2px 5px;
position: relative;
margin: auto;
}
.highlightButton:hover {
background-color: var(--lightest-grey);
}
.highlightMenu {
position: absolute;
z-index: 1;
border: 1px solid #CCCCCC;
box-sizing: border-box;
border-radius: 3px;
background-color: white;
padding: 5px 7px 2px 7px;
top: 33px;
left: -10px;
white-space: nowrap;
}
.hoverButton {
padding: 10px;
}
.hoverButton i {
color: #CCCCCC
}
.hoverButton i.active {
color: #fff;
}
.editorHoverBox {
position: fixed;
top: 120px;
background-color: #ccc;
padding: 3px;
font-size: 12px;
}
.inlineTextRef {
color: #4B71B7
}
.headerWithButtons {
display: flex;
align-items: center;
margin-bottom: 60px;
}
.headerWithButtons h1,
.static .headerWithButtons h1 {
margin: 0;
text-transform: capitalize;
}
.headerWithButtons .start,
.headerWithButtons .end {
flex: 1;
}
.headerWithButtons .start {
text-align: start;
}
.headerWithButtons .end {
text-align: end;
}
@media screen and (max-width: 700px) {
.headerWithButtons {
display: flex;
flex-direction: column;
justify-content: center;
}
.headerWithButtons h1 {
margin-bottom: 20px;
}
.headerWithButtons .start,
.headerWithButtons .end {
text-align: center;
}
}
#communityPagePreviewControls {
position: fixed;
width: 380px;
bottom: 0;
right: 0;
color: white;
z-index: 9999;
background-color: #18345D;
padding: 20px;
line-height: 1.6;
text-align: center;
border: 1px solid #ccc;
}
.interface-hebrew #communityPagePreviewControls {
right: auto;
left: 0;
}
#communityPagePreviewControls a.date {
display: block;
font-size: 22px;
}
#communityPagePreviewControls a {
margin-inline-end: 10px;
}
#communityPagePreviewControls a:hover {
color: inherit;
}
.bold {
font-weight: bold; /* because apparently it isn't recommended to use <b> or <strong> to style thing https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong#usage_notes */
}
/* Customize checkmark inputs */
.checkmarkLabel {
display: block;
position: relative;
padding-inline-start: 28px;
cursor: pointer;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkmarkLabel input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 3px;
left: 0;
height: 13px;
width: 13px;
background-color: white;
border: 1px solid #CCC;
border-radius: 3px;
}
.interface-hebrew .checkmark {
left: auto;
right: 0;
}
/* On mouse-over, add a grey background color */
.checkmarkLabel:hover input ~ .checkmark {
background-color: #EEE;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkmarkLabel input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkmarkLabel .checkmark:after {
left: 4px;
top: 1px;
width: 3px;
height: 6px;
border: solid #666;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* demo coloring of ref-link parentheses for quotation finder project*/
span.ref-link-color-1 {color: orange}
span.ref-link-color-2 {color: #0cd200}
span.ref-link-color-3 {color: blue}
/* start css code for loading bezel */
.sourceLoader {
margin-left: -34px;
top: 15px;
font-size: 4px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.beitMidrashContainer {
background: #333333;
color: white;
height: 100%;
font-size: 16px;
--english-font: var(--english-sans-serif-font-family);
--hebrew-font: var(--hebrew-sans-serif-font-family);
font-weight: 400;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
}
.beitMidrashContainer video {
width: 100%;
}
.beitMidrashContainer video.flippedVideo {
transform: rotateY(180deg);
}
.beitMidrashContainer video.pip {
position: absolute;
height: 50px;
top: 20px;
inset-inline-end: 10px;
text-align: end;
width: initial;
border-radius: 6px;
}
.beitMidrashContainer video.hiddenVideo {
display: none;
}
.beitMidrashContainer .muteButton {
position: absolute;
width: 40px;
height: 30px;
border-radius: 6px;
z-index: 1;
background-color: #999999;
opacity: 0.5;
left: -8.5px;
top: -3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
cursor: pointer;
}
.beitMidrashContainer #micIcon {
display: inline-block;
position: relative;
background-image: url("/static/img/unmute.svg");
/* background-position: center; */
background-repeat: no-repeat;
background-size: auto;
opacity: 1;
width: 20px;
height: 22px;
background-position: 5px;
}
.beitMidrashContainer .muted #micIcon {
background-image: url("/static/img/mute.svg");
}
.beitMidrashContainer .muted .muteButton {
background-color: #CB6158;
}
.beitMidrashContainer #buttonHolder {
display: flex;
width: 80%;
justify-content: space-between;
margin-top: -50px;
margin-inline-start: 30px;
padding-bottom: 50px;
}
.beitMidrashContainer .endCallButton {
position: absolute;
width: 40px;
height: 30px;
border-radius: 6px;
z-index: 1;
background-color: #CB6158;
left: -8.5px;
top: -3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
background-image: url("/static/img/endcall.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.beitMidrashContainer #endCallIcon {
display: inline-block;
position: relative;
background-image: url("/static/img/endcall.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 1;
width: 20px;
height: 20px;
}
.beitMidrashContainer summary {
list-style: none;
}
.beitMidrashContainer summary::-webkit-details-marker {
display: none;
}
.beitMidrashHomeContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin-top: 14px;
display: flex;
flex-direction: column;
width: 100%;
}
#beitMidrashHeader {
color: white;
font-size: 22px;
font-weight: 500;
margin-inline-start: 30px;
display: flex;
justify-content: space-between;
}
#newCall {
margin:10px;
}
#newCallImg {
height: 12px;
width: 24px;
margin-left: 34px;
margin-right: 18px;
}
.peopleInBeitMidrash {
overflow-y: auto;
overflow-x:hidden;
flex-grow: 1;
display: flex;
flex-direction: column;
margin: 10px 30px;
border-top: 1px solid #999999;
}
.peopleInBeitMidrashInnerContainer {
width:100%;
overflow:visible;
position: relative;
}
.beitMidrashUser {
color: white;
font-size: 16px;
font: "Roboto";
font-weight: 400;
display: flex;
gap: 10px;
/* width: 270px; */
padding-inline-end: 10px;
padding-top: 10px;
cursor: pointer;
}
.beitMidrashUser:hover {
background-color: #555;
}
.beitMidrashUser .userDetailsToggle {
float: inline-end;
margin-inline-end: 15px;
color: var(--medium-grey);
font-weight: bolder;
display: none;
}
.beitMidrashUser:hover .userDetailsToggle {
display: block;
}
.beitMidrashUser .userDetailsMenu {
position: absolute;
background-color: black;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
right: 0px;
}
.beitMidrashUser .userDetailsMenu[dir="rtl"] {
position: absolute;
background-color: black;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
left: 0px;
right: auto;
}
.beitMidrashUser .userDetailsMenu.hidden {
right: -99999px;
left: auto;
}
.beitMidrashUser .largeFollowButton {
all: revert;
}
.beitMidrashUser .userDetailsMenu ul {
list-style-type: none;
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
padding-left: 0;
margin: 15px;
float: inline-end;
}
.beitMidrashUser.unreadMessages::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background-color: var(--halakhah-red);
flex-shrink: 0;
}
#beitMidrashProfilePic {
margin-right: 10px;
}
.beitMidrashUserText {
margin: 0;
flex: 1;
}
.beitMidrashUserText li div.largeFollowButton,
.beitMidrashUserText li img {
display: inline-block;
}
.beitMidrashUserText li img {
margin-bottom: -2px;
width: 16px;
margin-inline-end: 9px;
}
.bm-follow-button {
color: white;
display: inline-block;
}
.bm-follow-button img {
width: 16px;
}
.beitMidrashUserText li {
margin-top: 8px;
margin-bottom: 8px;
}
.beitMidrashUserHeader {
display: flex;
flex-direction: row;
}
.beitMidrashUserNameStatus {
flex-grow: 1;
}
.beitMidrashUserNameStatus .fa-headphones {
margin-inline-start: 5px;
}
.beitMidrashOrg {
font-weight: 200;
}
.noUsers {
margin-top: 10px;
}
.noUsers input {
background: #FBFBFA;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
border: none;
width: calc(100% - 22px);
padding: 15px 11px;
font-family: "Roboto", "Helvetica Neue", "Helvetica", sans-serif;
color: #666;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
margin-top: 10px;
}
.chat {
bottom: 0;
right: 0;
overflow: hidden;
min-height: 300px;
max-height: 300px;
display: flex;
flex-direction: column;
padding-top: 20px;
margin: 10px 30px 20px;
border-top: 1px solid #999999;
}
#hideButtonHolder{
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#hideButton {
color: #CCCCCC;
font-size: 14px;
font-weight: 400;
cursor: pointer;
}
.chatBoxHeader {
display: flex;
align-items: center;
margin-top: 5px;
justify-content: space-between;
}
#chatUser {
display: flex;
align-items: center;
cursor: pointer;
}
#greenCameraButton {
width: 24px;
height: 12px;
cursor: pointer;
}
.chatBoxName {
margin-inline-start: 10px;
}
.chats-container {
overflow-y: auto;
display: flex;
flex-grow:2;
flex-direction: column;
}
.chatMessage {
display: flex;
margin: 7px 0;
margin-inline-start: 4px;
}
.chatText {
margin-inline-start: 13px;
flex-grow: 1;
}
.chatNameAndTime {
color: #999999;
font-size: 14px;
font-weight: 500px;
}
.chat-form {
position: relative;
bottom: 0;
display: flex;
align-items: center;
}
.chat-input-holder {
background-color: black;
display: flex;
align-items: center;
flex-direction: row;
border-radius: 6px;
padding: 0 15px;
border: 0px;
height: 50px;
width: 100%;
justify-content: space-between;
}
.chat-input {
color: white;
background: transparent;
border: 0;
display: flex;
justify-content: flex-end;
flex-grow:1;
font-size: 16px;
}
.chat-input:active {
outline: none;
}
.chat-submit {
background-image: url("/static/img/chat_submit_arrow.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 20px;
width: 18px;
border: 0px;
background-color: black;
cursor: pointer;
}
.chat-submit-blue {
background-image: url("/static/img/chat_submit_arrow_blue.svg");
}
.chat-submit-hebrew {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.callContainer {
display: flex;
flex-direction: column;
height: 100%;
}
.callContainer .default-profile-img,
.callContainer .img-circle {
opacity: 0.25;
border-radius: 0;
}
.callContainer .callText {
margin: 53px 29px 23px;
font-size: 22px;
font-weight: 500;
}
.callContainer.incoming .callText {
margin: 23px 29px;
}
#endCallButtonHolder {
display: flex;
width: 80%;
justify-content: flex-end;
margin-top: -50px;
}
#endCallIcon {
display: inline-block;
position: relative;
background-image: url("/static/img/endcall.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 1;
width: 20px;
height: 20px;
}
.endCallButton {
position: absolute;
width: 40px;
height: 30px;
border-radius: 6px;
z-index: 1;
background-color: #CB6158;
left: -8.5px;
top: -3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
background-image: url("/static/img/endcall.svg");
background-position: center;
background-repeat: no-repeat;
}
#incomingCallButtonHolder {
display: flex;
justify-content: space-evenly;
margin: 15px;
}
#acceptButton {
background-color: #5D956F;
border-radius: 6px;
color: white;
border: 0px;
height: 40px;
width: 127.67px;
margin: 5px;
cursor: pointer;
}
#declineButton {
background: #CB6158;
border-radius: 6px;
color: white;
border: 0px;
height: 40px;
width: 127.67px;
margin: 5px;
cursor: pointer;
}
#currentlyReadingContainer {
margin: 5px 30px;
flex-grow: 1;
}
.blockButton {
cursor: pointer;
}
.image-in-text {
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 100%;
height: auto;
padding-top: 20px;
padding-left: calc((100% - 2/3 * 100vw - 200px) / 2);
padding-right: calc((100% - 2/3 * 100vw - 200px) / 2);
flex-direction: column;
}
@media screen and (max-width: 540px) {
.image-in-text {
padding-left: calc((100% - 100vw) / 2);
padding-right: calc((100% - 100vw) / 2);
width: 100%;
height: auto;
}
}
@media screen and (min-aspect-ratio: 2/1) {
.image-in-text {
max-height: calc(4/3 * 2/3 * 100vw);
}
}
@media screen and (min-width: 540px) {
.image-in-text {
width: 67%;
}
}
.image-in-text-title {
margin: auto; /* English System Small */
margin-top: 15px;
text-align: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 18px;
color: #666666;
@-webkit-keyframes load5 {
0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)}
12.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.7),1.8em -1.8em 0 0 #ffffff,2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.5)}
25%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.5),1.8em -1.8em 0 0 rgba(0,0,0,0.7),2.5em 0 0 0 #ffffff,1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
37.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.5),2.5em 0 0 0 rgba(0,0,0,0.7),1.75em 1.75em 0 0 #ffffff,0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
50%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.5),1.75em 1.75em 0 0 rgba(0,0,0,0.7),0 2.5em 0 0 #ffffff,-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
62.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.5),0 2.5em 0 0 rgba(0,0,0,0.7),-1.8em 1.8em 0 0 #ffffff,-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
75%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.5),-1.8em 1.8em 0 0 rgba(0,0,0,0.7),-2.6em 0 0 0 #ffffff,-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
87.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.5),-2.6em 0 0 0 rgba(0,0,0,0.7),-1.8em -1.8em 0 0 #fff}
}
@keyframes load5 {
0%,100%{box-shadow:0 -2.6em 0 0 #ffffff,1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.5),-1.8em -1.8em 0 0 rgba(0,0,0,0.7)}
12.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.7),1.8em -1.8em 0 0 #ffffff,2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.5)}
25%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.5),1.8em -1.8em 0 0 rgba(0,0,0,0.7),2.5em 0 0 0 #ffffff,1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
37.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.5),2.5em 0 0 0 rgba(0,0,0,0.7),1.75em 1.75em 0 0 #ffffff,0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
50%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.5),1.75em 1.75em 0 0 rgba(0,0,0,0.7),0 2.5em 0 0 #ffffff,-1.8em 1.8em 0 0 rgba(0,0,0,0.2),-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
62.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.5),0 2.5em 0 0 rgba(0,0,0,0.7),-1.8em 1.8em 0 0 #ffffff,-2.6em 0 0 0 rgba(0,0,0,0.2),-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
75%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.5),-1.8em 1.8em 0 0 rgba(0,0,0,0.7),-2.6em 0 0 0 #ffffff,-1.8em -1.8em 0 0 rgba(0,0,0,0.2)}
87.5%{box-shadow:0 -2.6em 0 0 rgba(0,0,0,0.2),1.8em -1.8em 0 0 rgba(0,0,0,0.2),2.5em 0 0 0 rgba(0,0,0,0.2),1.75em 1.75em 0 0 rgba(0,0,0,0.2),0 2.5em 0 0 rgba(0,0,0,0.2),-1.8em 1.8em 0 0 rgba(0,0,0,0.5),-2.6em 0 0 0 rgba(0,0,0,0.7),-1.8em -1.8em 0 0 #fff}
}
/* end css code for loading bezel */