/*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// app.css /////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CSS IMPORTS / FONTS /////////////////////////////////////////////////////////////////////////*/ /*// https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800,900&display=swap ///////////*/ /*// Active In Main App: 400, 600, 700, 800 //////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @import url('https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800,900&display=fallback'); /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CSS VARIABLES ///////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ :root { --color-white:#ffffff; --color-black:#000000; --color-bg: #ffffff; --color-placeholder:#A0AEC0; --color-gray-100: #F7FAFC; --color-gray-150: #F2F6FA; --color-gray-200: #EDF2F7; --color-gray-300: #E2E8F0; --color-gray-350: #D7DFE8; --color-gray-400: #CBD5E0; --color-gray-450: #B6C2D0; --color-gray-500: #A0AEC0; --color-gray-550: #8997AB; --color-gray-600: #718096; --color-gray-700: #4A5568; --color-gray-750: #3C4658; --color-gray-800: #2D3748; --color-gray-900: #1A202C; --color-primary-100: #EBF8FF; --color-primary-200: #BEE3F8; --color-primary-300: #90CDF4; --color-primary-400: #63B3ED; --color-primary-500: #4299E1; --color-primary-600: #3182CE; --color-primary-700: #2B6CB0; --color-primary-800: #2C5282; --color-primary-900: #2A4365; --color-gold-100: #FFFFF0; --color-gold-200: #FEFCBF; --color-gold-300: #FAF089; --color-gold-400: #F6E05E; --color-gold-500: #ECC94B; --color-gold-600: #D69E2E; --color-gold-700: #B7791F; --color-gold-800: #975A16; --color-gold-900: #744210; --color-green-100: #F0FFF4; --color-green-200: #C6F6D5; --color-green-300: #9AE6B4; --color-green-400: #68D391; --color-green-500: #48BB78; --color-green-600: #38A169; --color-green-700: #2F855A; --color-green-800: #276749; --color-green-900: #22543D; --color-red-100: #FFF5F5; --color-red-200: #FED7D7; --color-red-300: #FEB2B2; --color-red-400: #FC8181; --color-red-500: #F56565; --color-red-600: #E53E3E; --color-red-700: #C53030; --color-red-800: #9B2C2C; --color-red-900: #742A2A; --color-primary-gradient: linear-gradient(to bottom right,#09BFEF,#3D98F2); --color-transparent:rgba(255,255,255,0); --border-radius:3px; --border-radius-lg:15px; --fade-in: fade-in .2s ease-out; --slide-down: slide-down .2s ease-out; --slide-left: slide-left .2s ease-out; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// FONT UTILITIES CLASSES //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .text-xs { font-size: 0.75rem; } /* 12px */ .text-sm { font-size: 0.875rem; } /* 14px */ .text-base { font-size: 1rem; } /* 16px */ .text-lg { font-size: 1.125rem; } /* 18px */ .text-xl { font-size: 1.25rem; } /* 20px */ .text-2xl { font-size: 1.5rem; } /* 24px */ .text-3xl { font-size: 1.875rem; } /* 30px */ .text-4xl { font-size: 2.25rem; } /* 36px */ .text-5xl { font-size: 3rem; } /* 48px */ .font-light { font-weight:300; } .font-normal { font-weight:400; } .font-semibold { font-weight:600; } .font-bold { font-weight:700; } .font-extrabold { font-weight:800; } .font-black { font-weight:900; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ROOT AND BODY CSS ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ html{ background:var(--color-bg); color:var(--color-gray-800); scrollbar-color: var(--color-gray-400) transparent; scrollbar-width: none; } body{ font-family: 'Muli', sans-serif; overflow: auto; margin:0; padding:0; min-width: 900px; min-height:550; height:100%; overscroll-behavior: none; } ::-webkit-scrollbar-track{ border-radius: 0px; background-color:var(--color-transparent);} ::-webkit-scrollbar{ width: 4px; height:4px; background-color:var(--color-transparent);} ::-webkit-scrollbar-thumb{ border-radius:var(--border-radius); background-color: var(--color-gray-350); min-height: 4rem;} body::-webkit-scrollbar{ width: 0px; } .unselectable{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} body:not(.dark) :not(:-webkit-autofill)::selection{ color:var(--color-white) !important; background: var(--color-gray-700) !important; } .hide-on-desktop{ display:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SPACING UTILITY CLASSES /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ vspacer{ height: 1rem; display: block; user-select: none;} hspacer{ width: 1rem; display: inline-block; user-select: none;} .full-width{ width: 100% !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// STANDARD TEXT CLASSES ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ h1{ color: var(--color-gray-900); font-weight: 800; margin-block-start: 0; margin-block-end: 0rem; margin:0 0 1rem 0; font-size:1.875rem; } h2{ color: var(--color-gray-800); font-weight: 800; margin-block-start: 0; margin-block-end: 0rem; margin:0 0 1rem 0; font-size:1.25rem; } p{ margin:0.5rem 0; color: var(--color-gray-600); font-size:1rem; } small{ color:var(--color-gray-600); } hr{ margin: 1.5rem 0; border: 1px solid var(--color-gray-300); background: var(--color-gray-300);} summary{ outline: none; cursor:pointer; list-style:none;} details summary::-webkit-details-marker { display:none; } a{ color:var(--color-primary-600)} a:hover{ text-decoration:underline; cursor: pointer; } div, span{ -webkit-tap-highlight-color:var(--color-transparent); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// STANDARD BUTTON CLASSES ////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ button{ font-family: 'Muli', sans-serif; -webkit-appearance:none; appearance: none; display: inline-block; font-size: 0.875rem; cursor: pointer; border-radius: var(--border-radius); outline: none; padding: 0.75rem 2rem; box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; border: none; background:var(--color-gray-800); color:var(--color-white); font-weight:700; transition:0.15s ease-out; } button:hover{ background: var(--color-gray-900); } button::-moz-focus-inner { border: 0; } button.primary{ box-shadow: 1px 2px 4px rgba(42,67,101,0.5); } button.primary:hover{ background: var(--color-gray-900); box-shadow: none; transform: translateY(1px); box-shadow: 1px 1px 3px rgba(42,67,101,0.5); } button.primary:active, button.primary:focus{ box-shadow:0 0 0 3px rgba(74,85,104,0.45); } button.secondary{ background: var(--color-gray-200); color:var(--color-gray-600); box-shadow: none; } button.secondary:hover{ background: var(--color-gray-300); color:var(--color-gray-700); transform: none; } button.secondary:active, button.secondary:focus{ box-shadow:0 0 0 3px rgba(203,213,224,0.85); } button.tertiary{ background: var(--color-white); color:var(--color-gray-600); box-shadow: none; } button.tertiary:hover{ color:var(--color-gray-700); text-decoration: underline; transform: none; } button.tertiary:active, button.tertiary:focus{ color:var(--color-primary-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// STANDARD INPUT CLASSES //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ form{ position:relative; margin-block-end:0; margin-block-start:0; } input, select{ -webkit-appearance:none; appearance:none; font-family: 'Muli', sans-serif; display: inline-block; font-size:0.875rem; font-size:1rem; border-radius: 0; outline: none; padding: 0.625rem 0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; border-style: solid; border-color:var(--color-gray-400); border-width: 0 0 2px 0; font-weight: 700; color:var(--color-gray-900); background:var(--color-transparent); width:100%; line-height: 1rem; } input:focus, select:focus{ border-color: var(--color-primary-500); } input::-ms-input-placeholder, textarea::-ms-input-placeholderinput{ color:var(--color-placeholderr); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{ color:var(--color-placeholder); } input::-moz-placeholder, textarea::-moz-placeholder{ color:var(--color-placeholder); opacity: 1;} input::placeholder, textarea::placeholder{ color:var(--color-placeholder) } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-text-fill-color:var(--color-gray-800) !important; -webkit-box-shadow: 0 0 0 30px var(--color-white) inset !important; box-shadow: 0 0 0 30px var(--color-white) inset !important;} input:disabled{ color: var(--color-gray-600); } select{ cursor: pointer; padding:0.5rem 30px 0.5rem 0; } select + .fa-caret-down{ margin:0.75rem 2rem 0px -0.5rem; font-size: 0.6875rem; color:var(--color-gray-700); } select:-moz-focusring { color: transparent !important; text-shadow: 0 0 0 #959ba2 !important; } select option{ background:var(--color-white); color:var(--color-gray-600); } select option:disabled{ color:var(--color-gray-400); } body:not(.mobile) select.pad-left-zero:focus { padding-left: 0.5rem; margin-left:-0.5rem; } label{ padding:0.25rem 0; display: inline-block; font-weight: 600; color: var(--color-gray-500); font-size: 0.875rem; } input:focus + label{ color: var(--color-primary-500); } label.tooltip:hover{ background: var(--color-gray-200); } option{ background-color: var(--color-gray-800); color: var(--color-gray-400); font-weight: bold; } option:disabled{ color: var(--color-gray-700); } .clear-search{ cursor: pointer; padding:1rem; opacity:0.3; transition: 0.15s; visibility: hidden; } .clear-search:hover{ opacity: 1; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);} /*////////////////////////////////////////////////////////////////*/ /*// CONTAINER CSS ///////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ #main{ width:100%; display: flex; height: 100%; transition: 0.2s; opacity: 0; flex-wrap:wrap; -webkit-overflow-scrolling: touch;} #loginPage, #appContainer{ position: relative; box-sizing:border-box; padding:0; box-sizing:border-box; width:0%; overflow: hidden; height: 100%; z-index:1; } #loginPage{ display: flex; align-items: center; justify-content:center; width:100%; --padding-bottom:5vh; background:var(--color-white);} #loginPage::-webkit-scrollbar-thumb{ background-color: var(--color-gray-transparent); } #app{ display: none; border-top:0px solid var(--color-gray-800); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ACTIVE APP ADJUSTMENTS //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .active #main{ opacity:1;} .active #loginPage{ display:none; } .active #appContainer{ width:100%; box-shadow:none; background:var(--color-transparent); padding:0;} .active #app{ display:block; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ANIMATIONS CSS /////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(-5%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-webkit-keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(-5%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-down { 0% { opacity: 0; -moz-transform: translateY(-5%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-left { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-webkit-keyframes slide-left { 0% { opacity: 0; -webkit-transform: translateX(20%); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes slide-left { 0% { opacity: 0; -moz-transform: translateX(20%); } 100% { opacity: 1; -moz-transform: translateX(0); } } .slide-down{ animation: var(--slide-down); -webkit-animation: var(--slide-down); -moz-animation: var(--slide-down); } .slide-left{ animation: var(--slide-left); -webkit-animation: var(--slide-left); -moz-animation: var(--slide-left); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// AUTO LOGIN ANIMATION CSS ////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #autoLogin{ position: fixed; width: 100vw; height: 100vh; background:var(--color-white); display: flex; display: none; justify-content: center; align-items: center; z-index:50; --off-animation:pulse 1.75s ease-out 0s infinite; transition:0.3s;} #autoLogin img{ --width:20vw; width:300px; margin-top:-2.5rem; max-width:300px; } #fontAwesomeLoader { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// PASSWORD VISIBILITY & STRENGTH //////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .fa-mask { margin-left:-35px; color:var(--color-gray-400) !important; cursor:pointer; border:10px solid var(--color-gray-transparent); display:inline !important; } .fa-mask:hover{ color:var(--color-gray-500) !important; } .password-meter{ height:4px; margin-top: -31px; position: relative; z-index: 1; } .password-strength{ background:var(--color-gray-200); height:100%; transition:0.25s ease-out; border-radius: 0 0 0 var(--border-radius) var(--border-radius); } #passwordReqNote{ color:var(--color-gray-550); margin:8px 0 16px; width:90%; font-size:13px; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SIGN IN CSS /////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #twoFactorForm, #createAccountForm, #createAccountForm #referralCode{ display: none; } #signIn, #loading{ min-width:425px; width:425px; margin-right:0rem; } #signIn{ transition: 0.3s; display: flex; flex-wrap:wrap; align-items:center; } #signIn.create-user, #loading.create-user{ margin-right:3rem; } #signIn > div{ width:100%; } #signIn #leftTitle{ margin-bottom: 1.5rem; } #signIn .sign-in-option{ color:var(--color-gray-600); font-weight: 600; margin-bottom: 0.75rem; cursor: pointer; padding:0.5rem 0; display:inline-block; margin-right:2.5rem; border-bottom:2px solid var(--color-transparent); } #signIn .sign-in-option.active{ font-weight:800; color:var(--color-primary-800); border-color:var(--color-primary-500) } #signIn input{ margin:1rem 0 0.5rem; padding-left:2rem; width:90%; box-sizing:border-box; font-weight:700; } #signIn #signInForm input{ max-width: 300px; margin-bottom:1rem;} #signIn #signInPassword, #signIn #newPassword { padding-right: 3rem; } #signIn i.input-before{ position:relative; color:var(--color-gray-600); margin-right:-20px;} #signIn button.primary{ margin-top:1rem; padding: 0.75rem 4rem; background:var(--color-primary-600)} #signIn button.primary:hover{ background: var(--color-primary-700); transform: translateY(1px); box-shadow: 1px 1px 3px rgba(42,67,101,0.5); } #signIn button.primary:active, #signIn button.primary:focus{ box-shadow:0 0 0 3px rgba(49,130,206,0.4); } #signIn input[name="newFirst"]{ width:40%; padding-right:8px; padding-left: 34px; margin:0 !important; } #signIn input[name="newLast"]{ width:50.5%; padding-left:8px; margin-left:-1%; } #signIn .password-meter{ width:90%; margin-top: -11px; margin-left: -2px;} #signIn .password-strength{ border-radius:0; background:var(--color-transparent); } #signIn #rememberMe{ color:var(--color-gray-500); padding:10px 10px 10px 1px; cursor:pointer; margin:4px 0px 10px; display:inline-block; border-bottom: 2px solid var(--color-transparent); } #signIn #rememberMe:hover{ border-color:var(--color-gray-300); } #signIn #rememberMe i{ margin-right:14px; } #signIn #rememberMe[data-remember-me="TRUE"]{color:var(--color-gray-800); } #signIn #rememberMe[data-remember-me="TRUE"] i{color:var(--color-primary-500); } #signIn #rememberMe[data-remember-me="TRUE"] .fa-circle{ display:none; } #signIn #rememberMe[data-remember-me="FALSE"] .fa-dot-circle{ display:none; } #signIn #rememberMe[data-remember-me="TRUE"] .fa-dot-circle{ display:inline-block; } #signIn #forgotPassword{ color:var(--color-gray-500); cursor:pointer; margin:50px 0 0; } #desktopSignUp{ display:block; } #mobileSignUp{ display:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SIGN IN LOADING MODULE CSS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @-webkit-keyframes progressAnimation{ 100%{background-position:0% 50%} 0%{background-position:150% 50%} } @-moz-keyframes progressAnimation{ 100%{background-position:0% 50%} 0%{background-position:150% 50%} } @keyframes progressAnimation{ 100%{background-position:0% 50%} 0%{background-position:150% 50%} } #loading{ display:none; align-items:center; justify-content: center; max-width:425px; transform: translateX(-1.5rem); } #loading:not(.create-user){ transform: translateX(-3rem); } #loading img{ height:200px; filter:grayscale(100%) sepia(0.6) contrast(2) hue-rotate(160deg); opacity:0.35; margin-left: -80px; } #loading #loadingCircle{ width:90%} #loading #loadingCircle > div:first-of-type{ width:100%; text-align:center; height:75px; font-size:19px; } #loading #loadingBarCont{ width:90%; max-width:275px; margin:auto; margin-bottom:100px; height:7px; background:var(--color-gray-300); border-radius:var(--border-radius); overflow:hidden; } #loading #loadingBar{background:var(--color-primary-500); height:100%; width:100%; transition:1.5s linear; border-radius:10px; transform:scaleX(0); transform-origin:left; background: linear-gradient(125deg, var(--color-primary-700), var(--color-primary-700), var(--color-primary-300), var(--color-primary-300), var(--color-primary-700)); background-size: 300% 100%; -webkit-animation: progressAnimation .85s ease-in-out infinite; -moz-animation: progressAnimation .85s ease-in-out infinite; animation: progressAnimation .85s ease-in-out infinite;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// LANDING PAGE CSS ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /* #landingMsg > div{ padding:6rem; padding-left: 8.5rem; background:var(--color-white); position: relative; max-width:325px; border-radius:var(--border-radius); --box-shadow: 0px 32px 32px -32px var(--color-gray-400); border-left: 2px solid var(--color-gray-300); } */ #landingMsg > div{ background-image: url(resources/marketing/images/hero-video-placeholder.png); background-size: contain; height: 460px; background-repeat: no-repeat; width: 700px; margin-right: -175px; background-position-y: center; } #landingMsg #quoteChar{ position: absolute; z-index:1; color:var(--color-gray-300); font-size:50px; top:4.25rem; left:7rem; } #landingMsg #primaryMsg{ color:var(--color-gray-700); position: relative; z-index: 2; line-height: 1.7; } #landingMsg #primaryMsg span{ color: var(--color-gray-800); display: inline-flex; align-items:center; margin: 2rem 0; } #landingMsg #primaryMsg span img{ border-radius: 45px; height:45px; width:45px; margin-right:1rem;} #landingMsg a{ color:var(--color-primary-600); text-decoration: none; padding:1rem 1rem 1rem 0; display: inline-block; } #landingMsg a:hover{ color:var(--color-primary-800); } #landingMsg a i{ transition:0.2s ease-out; } #landingMsg a:hover i{ transform:translateX(5px); } @media only screen and (max-width: 1200px) { #landingMsg{ display:none; } } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// CUSTOM PATTERN CSS //////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #patternCont{ display:none; background:var(--color-gray-800); padding:0px 3.5rem; color:var(--color-white); transition:0.15s; overflow:hidden; position: relative; z-index:10;} #patternCont > input{ border:none; width:250px; color:var(--color-white); padding:20px 0; } #patternCont .instructions{ margin-left:20px; padding-left:20px; border-left:1px solid var(--color-white); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NAVIGATION BAR CSS //////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #nav{ display:flex; align-items: center; box-sizing:border-box; position:relative; z-index: 4; padding: 0.25rem 3.25rem 0; height:5rem; justify-content:space-between; } #nav > div{ display:flex; align-items: center; width: calc(50% - 150px); } #nav > #settingsModule{ justify-content: flex-end;} #nav #profilePicture, #multiSignIn #activeProfilePicture{ border-radius:var(--border-radius-lg); background:var(--color-primary-gradient); height:40px; width:40px; display:flex; justify-content:center; color:var(--color-white); margin-right:1rem; min-width:40px; cursor:pointer; align-items: center; background-position: center; box-shadow:inset 0px 0px 4px rgba(42,67,101,0.25); background-position: center !important;} #nav #profilePictureImg{ transition:0.15s ease-out; transform:scale(0.001); display:none; width:100%; height:100%; border-radius:var(--border-radius-lg); object-fit: cover; position: relative; z-index: -1; } #nav #profilePicture:hover #profilePictureImg, #nav #profilePicture:active #profilePictureImg{ filter:brightness(80%);} #nav #profileIndicator { display: none; background: var(--color-red-600); width: 14px; height: 14px; border-radius: 1rem; position: absolute; top: -7px; right: -9px; border: 4px solid white; } #nav .nav-icon{color:var(--color-gray-500); background: none; padding:0.75rem; transition:0.1s ease-out; position: relative; z-index: 3; font-size:18px; margin-right:1.5625rem; border-radius:var(--border-radius) } #nav .nav-icon:hover, #settingsIcon:focus{ color:var(--color-gray-900); --background:var(--color-gray-200); transform: scale(1.15); transform-origin: center;} #nav .nav-icon.selected{ color:var(--color-primary-600); } #customSidePanelIcon1, #customSidePanelIcon2, #mobileCustomSidePanelIcon1, #mobileCustomSidePanelIcon2 { display:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NAV FILTER/CATEGORIES CSS ////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #nav #filterContainer{ position: relative;} #nav #filterButton{ color:var(--color-gray-900); background:var(--color-transparent); transition:0.2s; padding:9px 1rem; border:1px solid var(--color-transparent); white-space: nowrap; text-align:left;} #nav #filterButton #filterButtonText{ max-width:225px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; vertical-align: bottom;} #nav #filterButton:focus{ border-color: var(--color-primary-300); } #nav #filterButton:hover, #nav #filterButton:focus,#filterContainer:hover #filterButton{ color:var(--color-primary-600); background:var(--color-primary-100); } #filterButton .fa-angle-down{ transition:0.2s ease-out;} #nav #filterButton:hover .fa-angle-down, #filterButton:focus .fa-angle-down, #filterContainer:hover .fa-angle-down{ transform:rotate(180deg); } #nav #filterMenu{ display: block; visibility: hidden; position: absolute; top:2rem; left:0; background:var(--color-white); padding:1.5rem; border-radius:var(--border-radius); box-shadow:0px 0px 15px rgba(45,55,72,0.15); box-shadow: 0px 10px 20px rgba(42,67,101,0.35); text-align: left; transition:0.2s; transform:translateY(0px); opacity:0; z-index:3; overflow:visible; transition-delay: 0.25s; } #nav #filterMenu:before{ content:''; width:100%; height:5px; top:-5px; left:0px; position:absolute; } #filterButton:hover + #filterMenu, #filterButton:focus + #filterMenu, #nav #filterMenu:hover{visibility: visible; transform:translateY(15px); opacity:1; } #nav #filterMenu .filter-option{ display:block; background:var(--color-white); position:relative; padding:10px; transition:0.2s; cursor:pointer; border-radius:var(--border-radius); --margin-right:1rem; color:var(--color-gray-800); transition:0.1s ease-out;} #nav #filterMenu .filter-option:hover, #nav #filterMenu .filter-option.focus{ color:var(--color-gray-900); background:var(--color-gray-200); } #nav #filterMenu .filter-option span{ position: absolute; left:calc(100% + 10px); color:var(--color-gray-400); font-size:12px; } #nav #filterMenu #filterOptions{ max-height:400px; overflow: auto; scrollbar-width: thin; width: max-content; max-width: 200px; min-width:125px;} #nav #filterMenu #organizeCategories{ color:var(--color-primary-600); margin:0.5rem 0 0.25rem;} #nav #filterMenu .fa-th-large{ color:var(--color-primary-600); } #nav #filterMenu .fa-star{ color:var(--color-gold-500); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NAV SEARCH INPUT CSS ////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #nav #searchModule{ width:325px !important;} #nav #searchBar{ display: inline-flex; align-items: center; box-sizing: border-box; width:320px; border-bottom:1px solid var(--color-transparent); position: relative; } #nav #searchBar:before{ position: absolute; content:''; transition:0.15s ease-out; margin-left:50%; width:0; left:0; bottom:0; height:2px; background:var(--color-transparent);} #nav #searchModule.searching #searchBar:before{ width:100%; margin-left:0; background:var(--color-gray-700); } #nav #searchContainer{ width:100%; display: inline-block; margin:0;} #nav #searchInput{ color:var(--color-gray-800); border:none; padding:10px 0; position: relative; z-index: 1;} #nav #searchInput::placeholder{ color:var(--color-gray-550) } #nav #searchBar .fa-search{ padding-right: 1rem; color:var(--color-gray-700);} #nav #sortDirectionModule{ display: none; } #nav #searchAutoComplete{ color:var(--color-gray-500); position: absolute; left:2rem; z-index: 0; width:250px; overflow: hidden; white-space: nowrap;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SETTINGS BTN/DROPDOWN CSS ///////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #nav #settingsIcon{ margin-right:0; } .fa-signal-3{ transform:rotate(-90deg) translateX(5px) translateY(-3px); font-size:20px; } #settingsMenu{display: block; visibility: hidden; position: absolute; top:4rem; right:3rem; background:var(--color-white); padding:1rem 0; border-radius:var(--border-radius); box-shadow: 0px 10px 20px rgba(42,67,101,0.35); width:275px; text-align: left; transition:0.2s; transform:translateY(0px); opacity:0; z-index:4; overflow:visible; border-top:3px solid var(--color-gray-900); } body:not(.mobile) #settingsIcon:focus + #settingsMenu, #settingsMenu:hover{visibility: visible; transform:translateY(15px); opacity:1; } #settingsMenu #settingsTop{ display: none; } #settingsMenu #settingsPlan span{ font-style:italic; } #settingsMenu .settings-option{ color:var(--color-gray-700); padding:15px 30px; cursor: pointer; transition:0.2s; display:flex; align-items:center;} #settingsMenu .settings-option.settings-no-icon{ padding-left: 37px;} #settingsMenu .settings-option span{ text-align:center; display:block; width:30px; margin-right:15px; transform:translateY(-1px); font-size:17px; color:var(--color-gray-600); } #settingsMenu .settings-option span .fa-credit-card, #settingsMenu .settings-option span .fa-monitor-heart-rate{ font-size:0.875rem; } #settingsMenu .settings-option:hover, #settingsMenu .settings-option:active{ color:var(--color-primary-600); background:var(--color-gray-200)} #settingsMenu .settings-option:hover span{ color:var(--color-primary-500); } .settings-divider{ background:var(--color-gray-200); height:2px; margin:1rem 0px;} #settingsMenu #clsMobMenu, #settingsMenu #mobileSettingsLeft, #settingsMenu #goOnlineButton, #settingsMenu #clearClipboardButton, #settingsMenu #rewardsButton{ display: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NARROW NAV ADJUSTMENTS CSS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width: 1200px) { #nav #filterButton #filterButtonText { max-width: 170px !important; } #nav #searchModule { width: 285px !important; } #nav > #settingsModule{ width: calc(50% - 200px); } #nav #searchAutoComplete{ display:none; } } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// GENERAL CONTAINERS CSS //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #tileContainer{ display: flex; flex-wrap: wrap; width: calc(100% - 5rem); box-sizing: border-box; transition:0.15s ease-out; margin-top:0.5rem; border-radius:var(--border-radius); overflow-y:scroll; height: calc(100vh - 70px); padding:0 0 0 0rem; margin-left:3rem; align-content: baseline; border-top:3px solid var(--color-white); scrollbar-color: var(--color-transparent) var(--color-transparent); scrollbar-width:thin; } #tileContainer::-webkit-scrollbar-thumb{ border-top:0.5rem solid var(--color-white); background-color: var(--color-white);} #tileContainer.scrolled-down::-webkit-scrollbar-thumb{ border-top:0.5rem solid var(--color-white); background-color: var(--color-gray-300); } #tileContainer.scrolled-down{ border-color:var(--color-gray-400); scrollbar-color: var(--color-gray-400) var(--color-transparent); } .bottom-spacer{ height:16rem; width:100%; } #tileContainer.three-quarter-width{ width: calc(100% - 23rem); } #desktopTileContainerTopGradient{ height:0.5rem; width:100%; background:linear-gradient(to bottom, var(--color-white), var(--color-transparent)); margin-bottom: -0.4rem; margin-top: -0.1rem; position:relative; z-index:2; display:none !important; } #sidePanelContainer{ display: none; position: absolute; top:5.5rem; right:3.5rem; bottom:1rem; width:15rem; z-index:3; } #sidePanelContainer > div{ border-radius:var(--border-radius) var(--border-radius) 0 0; border-top:3px solid var(--color-primary-600); overflow:hidden; width:100%; height:100%; } #sidePanelContainer > div iframe{ width:100%; height:calc(100% - 0.5rem); margin-top:0.5rem; border:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// WEBSITE TILE COMPONENT CSS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .account-card{ background: var(--color-white); transition:0.1s ease-out; --transition:transform 0.07s; box-sizing: border-box; position:relative; cursor:pointer; padding:10px 15px; height: 185px; margin: 0px 20px 20px 0px; width:calc(8.3333% - 20px); border-radius: var(--border-radius); border:2px solid rgba(43,108,176,0.125); box-shadow: 1px 2px 5px rgba(42,67,101,0.12), 2px 8px 10px rgba(38, 47, 56, 0.15); box-shadow: 1px 1px 5px -1px rgba(42,67,101,0.2), 2px 7px 10px -2px rgba(43,108,176,0.25); box-shadow: 3px 3px 3px var(--color-gray-300); border:2px solid rgba(43,108,176,0.125); box-shadow: 0px 16px 18px -16px rgba(43,108,176,0.3); border:2px solid var(--color-gray-350); box-shadow: 0px 15px 14px -15px var(--color-gray-400);} @media only screen and (max-width: 3600px) { .account-card{ width:calc(09.0909% - 20px); } .three-quarter-width .account-card{ width:calc(10.0000% - 20px); } } @media only screen and (max-width: 3260px) { .account-card{ width:calc(10.0000% - 20px); } .three-quarter-width .account-card{ width:calc(11.1111% - 20px); } } @media only screen and (max-width: 2900px) { .account-card{ width:calc(11.1111% - 20px); } .three-quarter-width .account-card{ width:calc(12.5000% - 20px); } } @media only screen and (max-width: 2520px) { .account-card{ width:calc(12.5000% - 20px); } .three-quarter-width .account-card{ width:calc(14.2857% - 20px); } } @media only screen and (max-width: 2220px) { .account-card{ width:calc(14.2857% - 20px); } .three-quarter-width .account-card{ width:calc(16.6667% - 20px); } } @media only screen and (max-width: 1920px) { .account-card{ width:calc(16.6667% - 20px); } .three-quarter-width .account-card{ width:calc(20.0000% - 20px); } } @media only screen and (max-width: 1620px) { .account-card{ width:calc(20.0000% - 20px); } .three-quarter-width .account-card{ width:calc(25.0000% - 20px); } } @media only screen and (max-width: 1310px) { .account-card{ width:calc(25.0000% - 20px); } .three-quarter-width .account-card{ width:calc(33.3333% - 20px); } } @media only screen and (max-width: 1020px) { .account-card{ width:calc(33.3333% - 20px); } .three-quarter-width .account-card{ width:calc(50.0000% - 20px); } } .account-card:hover{ border-color:var(--color-primary-600) !important; transition:0.1s ease-out;} .account-card .account-row-1 .fa-ellipsis-h{ float:right; color:var(--color-gray-450); font-size:20px; margin:-10px -15px -5px 0; cursor:pointer; position: relative; padding:0.875rem; border-radius:0 0 0 var(--border-radius); transition:0.15s ease-out; } .account-card:hover .account-row-1 .fa-ellipsis-h{ opacity: 1; color:var(--color-primary-600); } .account-card .account-row-1 .desktop-copy{ position: absolute; opacity:0; color:var(--color-primary-600); left:0; top:0; font-size:15px; cursor: pointer; padding: 18px 21px 19px 19px; padding:18px; border-radius:0 0 var(--border-radius) 0; transition:0.1s ease-out; transform:scale(0.4);} .account-card:hover .account-row-1 .desktop-copy{ opacity: 1; transform:scale(1); } .account-card .account-row-1 .desktop-copy:active{ padding:14.5px; font-size:22px; } .account-card .account-row-2{ width:100%; margin-top:25px; display: flex; align-items: center; justify-content: center;} .account-card .account-row-2 .logo{ color:var(--color-white); display:flex; align-items:center; justify-content:center; } .account-card .account-row-2 .logo, .account-row-2 .logo img{ height: 45px; border-radius: 45px; width:45px; object-fit: cover; background-size: cover; min-width: 45px; } .account-card .account-row-2 .favorite-icon, .account-card .account-row-4 .fa-star{ display: none; } .account-card .favorite-account .favorite-icon{ display: inline-flex; width:20px; height:20px; margin-left:-18px; position: relative; color:var(--color-gold-500); margin-top:28px; min-width:20px; justify-content: center; align-items: center; background:var(--color-white); border-radius:15px;} .account-card .account-row-3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:85%; margin:auto; color:var(--color-gray-900); text-align: center; margin-top:15px; } .account-card .account-row-4{ padding:1rem; transition:0.15s ease-out; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:var(--color-gray-550); --color:#8997AB; font-size:13px; position: absolute; left:0; bottom:0.75rem; width:100%; box-sizing:border-box; } .account-card .account-row-4.context-menu{ color:var(--color-primary-700) !important; } .account-card.example-tile .account-row-4 span{ color: var(--color-gold-600); } .account-card.highlighted, .account-card.highlighted .account-row-4{ border-color:var(--color-primary-400) !important; z-index:1;} .account-card .account-row-4 .fa-horizontal-rule{ opacity:0.5; } .account-card.example-tile .desktop-copy, .account-card.no-password .desktop-copy{ display: none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SEPTEMBER 2021 TILE DESIGN (LIGHT THEME FLAT) ///////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ @media only screen and (max-width: 3600px) { body:not(.dark) .account-card{ width:calc(09.0909% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(10.0000% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(10){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 3260px) { body:not(.dark) .account-card{ width:calc(10.0000% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(11.1111% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(9){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 2900px) { body:not(.dark) .account-card{ width:calc(11.1111% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(12.5000% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(8){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 2520px) { body:not(.dark) .account-card{ width:calc(12.5000% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(14.2857% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(7){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 2220px) { body:not(.dark) .account-card{ width:calc(14.2857% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(16.6667% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(6){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 1920px) { body:not(.dark) .account-card{ width:calc(16.6667% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(20.0000% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(5){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 1620px) { body:not(.dark) .account-card{ width:calc(20.0000% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(25.0000% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(4){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 1310px) { body:not(.dark) .account-card{ width:calc(25.0000% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(33.3333% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(3){ border-radius:0 3px 0 0; } } @media only screen and (max-width: 1020px) { body:not(.dark) .account-card{ width:calc(33.3333% - 0px); } body:not(.dark) .three-quarter-width .account-card{ width:calc(50.0000% - 1px); } body:not(.dark):not(.mobile) .account-card:nth-of-type(2){ border-radius:0 3px 0 0; } } :root{ --tile-border-width: 2px; } body:not(.dark):not(.mobile) #tileContainer{ padding: var(--tile-border-width) 0 0 var(--tile-border-width); margin-left:3.25rem; width:calc(100% - 5.8rem); } body:not(.dark):not(.mobile) #tileContainer.three-quarter-width{ width: calc(100% - 23.25rem); } body:not(.dark):not(.mobile) .account-card{ margin: calc(var(--tile-border-width) * -1) 0 0 calc(var(--tile-border-width) * -1); box-shadow:none; border-radius:0; transition:none; border-width:var(--tile-border-width); border-color:var(--color-gray-400); } body:not(.dark):not(.mobile) .account-card:hover{ z-index:1; border-radius:var(--border-radius) !important; box-shadow: 0px 1px 5px -1px rgba(42, 67, 101, 0.25), 0px 7px 10px -2px rgba(43, 108, 176, 0.25); } body:not(.dark):not(.mobile) .account-card:first-of-type{ border-radius:var(--border-radius) 0 0 0; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// TILE OPTIONS DROPDOWN CSS ///////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .account-options{ font-family:"Muli", sans-serif; display:none; position: absolute; right:6px; padding:15px 20px 10px; top:8px; box-sizing:border-box; background: var(--color-white); box-shadow: 0px 10px 20px rgba(42,67,101,0.25); border-top:1px solid var(--color-gray-300); width:215px; border-radius: var(--border-radius); z-index: 2; } .account-row-1 i.fa-ellipsis-h:hover { color:var(--color-primary-600); background:linear-gradient(to bottom left, var(--color-gray-200), var(--color-white)); } .account-row-1 i.fa-clone:hover { color:var(--color-primary-600); background:linear-gradient(to bottom right, var(--color-gray-200), var(--color-white)); } .account-row-1 i:active .account-options, .account-options:hover, .account-row-1 i.account-options-open .account-options{ display: block; } .account-options .option-title{ color:var(--color-primary-600); padding:15px 10px; white-space: nowrap; width:155px; overflow: hidden; text-overflow: ellipsis; border-radius: var(--border-radius); } .account-options .option-title:hover, .account-options .option-title:active{ color:var(--color-primary-600); background: var(--color-gray-200); } .account-options .option-item{ color:var(--color-gray-900); padding:10px 10px; margin:2px 0px; line-height: 1.4; cursor: pointer; transition:0.1s; border-radius: var(--border-radius); } .account-options div i{ margin-right:10px; font-size:12px; transform: translateY(-1px);} .account-options .option-item span{ color:var(--color-gray-600); white-space:nowrap; overflow:hidden; font-size:12px;} .account-options .option-item:hover, .account-options .option-item:active{ color:var(--color-gray-900); background: var(--color-gray-200); } .account-options .option-item:hover span, .account-options .option-item:active span{ color:var(--color-gray-600);} .account-options .option-item-divider{ width:214px; margin:15px 0px 15px -20px; height:2px; background:var(--color-gray-200); } .account-options .delete{ color:var(--color-gray-500); padding:10px 10px 15px; } .account-options .delete:hover{ color:var(--color-red-600); } .account-options:before{ content:''; position: absolute; background:var(--color-transparent); top:-20px; right:-30px; left:-5px; bottom:-40px; z-index: -1;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ADD WEBSITE TILE CSS ////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #addAccount .account-row-3{ margin-top:3.75rem; color:var(--color-gray-500); } #addAccount .account-row-3 div{ margin-top:1rem; } #addAccount:hover .account-row-3 { color: var(--color-primary-600) !important; } #addAccount .account-row-4{ display:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DESKTOP NOTE LIST CSS ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #noteContainerHeader{ color: var(--color-gray-800); padding:1rem 0 0.75rem; display: flex; align-items: center; justify-content: space-between;} #noteContainerHeader span{ cursor:pointer; } #noteContainerHeader span:hover{ opacity:0.6; } #notesList{ overflow-y: auto; max-height: calc(100% - 60px); scrollbar-width:none; padding-bottom: 10rem; box-sizing: border-box; } #notesList::-webkit-scrollbar{ width:0; } #newNoteButton{ padding: 0.5rem 0.625rem; border-radius:var(--border-radius); color:var(--color-primary-600); cursor:pointer; } #newNoteButton:hover{ background:var(--color-primary-600); color:var(--color-white); } .note-list-item{ padding:0.65em 0; cursor: pointer; position:relative; color:var(--color-gray-600); -webkit-tap-highlight-color: var(--color-transparent);} .note-list-item:hover .note-list-name{ color:var(--color-primary-600); --font-weight:700 !important; } .note-list-name{ overflow:hidden; text-overflow:ellipsis; --white-space:nowrap; width:calc(100% - 2.5rem); } .note-list-item.favorite-account .note-list-name{ width:calc(100% - 3.5rem); } .note-list-icon{ padding:0.625rem; border-radius:var(--border-radius); background:var(--color-white); position:absolute; top:0.25rem; right:0; opacity:0; color:var(--color-gray-400); } .note-list-item:hover .note-list-icon{ opacity:1; } .note-list-item.favorite-account .favorite-status{ color: var(--color-gold-500); opacity:1; } .note-list-icon.delete{ right:2.25rem; transform: translateY(1px); --border-left: 0.75rem solid var(--color-white); } .note-list-icon.delete:before{ content:''; position:absolute; right:100%; top:0; bottom:0; width:1.25rem; background:linear-gradient(to right, var(--color-transparent), var(--color-white), var(--color-white)); } .note-list-icon:hover{ color:var(--color-gray-600); background:var(--color-gray-200); } .note-list-item.favorite-account .favorite-status:hover{ color: var(--color-gold-600); } #noteEmptyState{ display: none; } #noteEmptyState div{ text-align: center; cursor: pointer; color:var(--color-primary-600); } #noteEmptyState span{ display:block; text-align: center; line-height: 1.9; color:var(--color-gray-600); } #notesEmptyStateImageDark{ display:none; } .tile-notification { font-size:5px !important; color:var(--color-primary-600); transform: translate(6px, -7px); } .tile-notification-count { font-size: 13px !important; color:var(--color-primary-600); font-weight:800; vertical-align: top; display: inline-block; transform: translateY(-2px); } .tile-notification-count-container { margin-left: 5px; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DESKTOP NOTE FOLDER CSS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .note-folder .note-folder-title i { color: var(--color-gray-450); transition:0.1s ease-out; transform: translateY(1px); } .note-folder.folder-open .note-folder-title i { transform: rotate(90deg); } .note-folder > .note-list-item:not(.note-folder-title) { display:none; } .note-folder.folder-open > .note-list-item:not(.note-folder-title) { display: block; } body:not(.mobile) .note-folder > .note-list-item:not(.note-folder-title) { border-left:2px solid var(--color-gray-200); padding-left:14px; width:calc(100% - 16px); } /*///////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ALERTIFY TILE DETAILS CSS //////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify-tile-details{ margin-bottom:-1.5rem;} .alertify-tile-details *::-webkit-scrollbar{ height:0px; scrollbar-width: thin; } .alertify-tile-details-header{ margin:-2rem 0 0 -2rem; padding:0rem 1rem; box-sizing:border-box; width:calc(100% + 4rem); background:var(--color-gray-200); display:flex; align-items: center; justify-content: flex-end; } .alertify-tile-details-action{ cursor: pointer; padding:1rem; color:var(--color-gray-500); } .alertify-tile-details-action.fa-star.true{ color:var(--color-gold-500); } .alertify-tile-details-action:hover{ color:var(--color-gray-700); } .alertify-tile-details-action:active{ color:var(--color-gray-800); background:var(--color-gray-400);} .alertify-tile-details-logo .logo{ display:flex; font-weight:800; color:var(--color-white); font-size:1.25rem; align-items:center; justify-content:center; width:55px; height:55px; border-radius:55px; overflow:hidden; border:5px solid white; margin:-2rem 0 0.75rem -5px; border-radius:55px; } .alertify-tile-details-logo img{ width:100%; height:100%; object-fit: cover; background:white;} .alertify-tile-details-categories{ margin:0.5rem 0; display:flex; flex-wrap: wrap;} .alertify-tile-details-categories > div{ margin-right: 1rem; color:var(--color-gray-600); line-height: 1.8; } .alertify-tile-details-data-row{ margin:1rem 0; display:flex; align-items: center; } .alertify-tile-details-data-row i{ padding:0.75rem; color:var(--color-primary-600); background:var(--color-primary-200); margin-right:0.75rem; cursor:pointer; border-radius: var(--border-radius); } .alertify-tile-details-data-row i:active{ background:var(--color-primary-600); color:var(--color-white); } .alertify-tile-details-data-row span{ color:var(--color-gray-500); letter-spacing: 1px;} .alertify-tile-details-data-row > div{ flex-grow: 1; width:calc(100% - 55px); } .alertify-tile-details-data-row > div > div { font-weight:600; width:100%; overflow-x: auto; white-space: nowrap; color:var(--color-gray-700); scrollbar-width: none; } .alertify-tile-details-link{ position: relative;;} .alertify-tile-details-link > i{ border-radius: var(--border-radius) 0 0 var(--border-radius); } .alertify-tile-details-link > div{ background:var(--color-gray-200); font-weight:600; color:var(--color-gray-600); width:100%; overflow-x: auto; white-space: nowrap; border-radius:0 var(--border-radius) var(--border-radius) 0; margin-left:-0.75rem; padding:0.5rem 1.5rem 0.5rem 0.75rem; position: relative; scrollbar-width: none;} .alertify-tile-details-link:after{ content:''; position: absolute; right:0; top:3px; width:1.5rem; height:2rem; background:linear-gradient(to right, rgb(237,242,247,0), var(--color-gray-200), var(--color-gray-200)) } .alertify-tile-details-bottom-message{ border-top:1px solid var(--color-gray-400); margin:1rem 0 0.5rem; padding:0.75rem 0; color:var(--color-gray-600); cursor: pointer;} .alertify-tile-details-bottom-message b{ white-space: nowrap;} .alertify-tile-details-bottom-message:hover{ color: var(--color-gray-800); } /*///////////////////////////////////////////////////////////////////////////////////////////////*/ /*// GENERAL MODAL CSS //////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////*/ .modal-container{ position: absolute; top:0px; left:0px; width: 100%; height: 100%; z-index: 10; animation: var(--fade-in); background: rgba(26,32,44,0.55); align-items: center; justify-content: center; display: none; transition:0.2s ease-out; } .modal-container.display-flex{ display: flex; } .modal{ width:550px; background: var(--color-white); border-radius: var(--border-radius); padding: 3rem; box-shadow: 0px 15px 35px rgba(45,55,72,0.5); max-height:90vh; overflow-y: auto; box-sizing:border-box; scrollbar-width: thin; position: relative; line-height: 1.45; } .modal.modal-wide{ width:720px; } .modal .modal-mobile-header{ display: none;} body.opening-large-input-editor * { cursor: zoom-in !important; } .large-input-editor { border: 2px solid var(--color-gray-300); background: var(--color-gray-100); padding: 1rem; box-sizing: border-box; min-height: 15rem; margin-bottom: -1rem; font-weight: 600; width: 100% !important; resize: vertical; font-family: 'Muli', sans-serif; font-size: 1rem; outline: none; position: relative; z-index: 2; line-height: 1.5;} /*///////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MODAL BUTTONS AND INNPUTS CSS //////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////*/ .modal button.primary, .modal button.secondary{ float: right; margin-left:1rem; } .modal .multi-input-row select{ line-height: unset;} .modal .multi-input-row{ display: flex; justify-content: space-between; } .modal .multi-input-row .multi-input-half-width{ width: calc(50% - 1rem); } .modal .multi-input-row .multi-input-two-third-width{ width:calc(66% - 1rem); } .modal .multi-input-row .multi-input-third-width{ width:calc(33% - 1rem); } .modal .multi-input-row .multi-input-quarter-width{ width:calc(25% - 1.5rem); } .modal .fa-times.close-modal{ float:right; cursor:pointer; background:var(--color-gray-200); color:var(--color-gray-500); margin:-3rem -3rem 0 0; padding: 1rem 1.25rem; font-size:1.125rem; border-radius:0 0 0 var(--border-radius);} .modal .fa-times.close-modal:hover{ color:var(--color-red-600); background:var(--color-red-200); } /*///////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MODAL TABLE CSS ///////////////////////////////////////////////////////////////////////////*/ /*///////////////////////////////////////////////////////////////////////////////////////////////*/ .table-header{ color:var(--color-gray-700); display: flex; padding:10px 0; border-bottom:2px solid var(--color-gray-400); margin-bottom:5px; } .table-header > div, .table-row > div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:10px; box-sizing: border-box; } .table-row{ display:flex; padding:1.25rem 0; align-items: center; transition:0.1s;} .table-row:hover{ background:var(--color-gray-200); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT ACCOUNT (TILE) CSS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount .modal{ width: 660px; } #editAccount #editWebsiteHeader{ display:flex; align-items: center;} #editAccount #editWebsiteHeader #editAccountImg{ margin-right:1.5rem; border-radius:50px; height:50px; width:50px; background-size: cover; object-fit:cover; cursor:pointer;} #editAccount #editWebsiteHeader #editAccountImg:hover{ filter:brightness(75%); } #editAccount #editWebsiteHeader input{ width:calc(100% - 235px); border: none; line-height: unset !important; } #editAccount #editWebsiteHeader button.tertiary{ padding: 0.75rem 2rem 0; } #editAccount #editWebsiteHeader select{ width:34px; padding:1rem 0 0.5rem 0.5rem; border-width:0; color: var(--color-gray-600); } #editAccount #editWebsiteHeader .fa-sliders-h{ color: var(--color-gray-600); pointer-events: none; margin-left: -2rem; margin-top: 0.75rem; } #editAccount #passwordOverride input{ transition:0.15s ease-out; padding-right: 2.5rem; } #editAccount #passwordOverride .fa-mask{ position: absolute; right:0px; top:0.75rem; } #editAccount #passwordOverride #autoGenerateButton{ cursor:pointer; color:var(--color-primary-600); } #editAccount #passwordOverride #linkPasswordButton{ cursor:pointer; color:var(--color-primary-600); } #editAccount:not(.note) .tooltiptext{ transition-delay:0.4s !important; letter-spacing: 0; bottom:5rem; } #editAccount.express-password-change{ visibility: hidden; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT TILE SUGGESTED TEMPLATES CSS ///////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount:not([data-account-index="new-account"]) #templateAccounts{ display: none !important; } #templateAccounts{ position:absolute; top:125px; left:3rem; max-height:250px; overflow-y: auto; padding:0.75rem; background:white; border-radius:var(--border-radius); box-shadow:0px 7px 15px rgba(45,55,72,0.3); z-index:15; max-width:1000px; display:none; scrollbar-width:thin; } #templateAccounts > div:first-of-type{ margin-bottom:1rem; color:var(--color-gray-500); } #templateAccounts .template-option{ display: flex; align-items: center; padding:0.75rem; cursor: pointer; overflow: hidden; height:50px; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; border-radius:var(--border-radius); margin-right:1rem; max-width: 400px;} #templateAccounts .template-option:hover{ background: var(--color-gray-200); } #templateAccounts .template-option img{height:30px; width:30px; object-fit: cover; border-radius:30px; margin-right: 1rem; pointer-events: none;} #templateAccounts .template-option span{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; pointer-events: none;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT ACCOUNT NOTE CSS ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount #fullNoteContainer, #editAccount #fullNoteFormatBar{ display: none;} #editAccount.note #templateAccounts, #editAccount.note #editWebsiteForm, #editAccount.note #editAccountImg, #editAccount.note #editWebsiteHeader button, #editAccount.note #editWebsiteHeader select, #editAccount.note #editWebsiteHeader i, #editAccount.note button.primary, #editAccount.note button.secondary{ display:none !important; } #editAccount.note .modal{ transition:0.4s cubic-bezier(0.68, -0.47, 0.58, 1); transition:0.4s cubic-bezier(0.1, 0.7, 0.3, 1); width:90vw; max-width:656px; overflow: visible; position: relative; } #editAccount.note .modal:before{ content: 'Click anywhere outside of the note to save and close.'; color:white; position:absolute; top:-2rem; left:0; pointer-events: none; font-weight:600; background:#81848a; border-radius:var(--border-radius); padding:0.125rem 0.25rem; } #editAccount.note { --backdrop-filter: blur(4px); } #editAccount.note #editWebsiteHeader input{ width: 100%; padding:0; color:var(--color-gray-750); font-weight:800; } #editAccount.note #fullNoteContainer{ display:block; height:60vh; margin:0.5rem 0 1.5rem; margin-bottom:0; transition:0.15s ease-out; } #editAccount.note #fullNoteContainer #noteArea{ height:calc(100% - 0.25rem); width:calc(100% + 2.9rem); padding:0.75rem 3.5rem 8.5rem 0.125rem; margin-left:-0.125rem; overflow:auto; overflow-x: hidden; box-sizing: border-box; outline: 0 !important; word-break: break-word; transition:0.1s; scrollbar-color: var(--color-transparent) var(--color-transparent); } #editAccount.note #fullNoteContainer #noteArea:hover, #editAccount.note #fullNoteContainer #noteArea.is-editing { scrollbar-color: var(--color-gray-400) transparent; } #editAccount.note #fullNoteContainer #noteArea::selection { color:var(--color-white) !important; background: var(--color-gray-700) !important; } /* #editAccount.note #fullNoteContainer #noteArea::-webkit-scrollbar{ height: 0px; width: 0.75rem; transition: 0.15s ease-out; } */ /* #editAccount.note #fullNoteContainer #noteArea::-webkit-scrollbar-thumb{background:var(--color-white); transition: 0.2s ease-out; min-height: 8rem !important; --border-top:0.75rem solid var(--color-white); } */ /* #editAccount.note .modal:hover #fullNoteContainer #noteArea::-webkit-scrollbar-thumb{ background:var(--color-gray-200); } */ /* #editAccount.note .modal:hover #fullNoteContainer #noteArea::-webkit-scrollbar-thumb:hover{ background:var(--color-gray-400); width: 0.75rem; } */ #editAccount.note #fullNoteContainer #noteArea::spelling-error { text-decoration: underline var(--color-red-500) 2px; } #editAccount.note #fullNoteContainer #noteArea::grammar-error { text-decoration: underline var(--color-primary-500) 2px; } #editAccount.note #fullNoteContainer #noteArea li.checked::spelling-error, #editAccount.note #fullNoteContainer #noteArea li.checked::grammar-error{ text-decoration: underline var(--color-transparent) 0px; } #editAccount.note #fullNoteContainer #noteContextMenuTrigger{ float: right; font-size:1.15rem; margin-bottom:-1rem; padding: 1rem 0.5rem 0.5rem 1rem; color: var(--color-gray-500); cursor: pointer; } #editAccount.note #fullNoteContainer #noteContextMenuTrigger:hover{ color:var(--color-gray-800); } #editAccount.note .tooltiptext{ pointer-events: none; bottom:55px;} #editAccount.note #noteAreaTopGradient{ background: linear-gradient(to bottom, var(--color-white), var(--color-white), var(--color-transparent)); height:0.5rem; width: calc(100% - 1rem); position: relative; z-index: 2; margin-bottom: -0.3rem;} #editAccount.note #getNoteUpdates .tip-left{ left:-60px !important;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE EDITOR EFFECTS CSS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount.note.saving-note{ overflow: hidden; cursor:wait; background: rgba(255,255,255,0); } #editAccount.note.saving-note .modal{ transform:translateY(20vh); opacity:0; pointer-events:none !important; } #editAccount.note.switching-note, #editAccount.note.loading-note-template{ cursor:wait; } #editAccount.note.switching-note .modal > *{ opacity:0.3; } #editAccount.note.loading-note-template .modal > *{ transition: 0s; opacity:0; } #editAccount.note.switching-note .modal *, #editAccount.loading-note-template .modal *{ pointer-events: none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EXPANDED NOTE EDITOR CSS ////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body:not(.mobile) #editAccount.note.expanded-note-editor .modal{ max-width: 1200px; } body:not(.mobile) #editAccount.note.expanded-note-editor #fullNoteContainer{ height: calc(85vh - 139px); } #expandNoteEditorButton, #compressNoteEditorButton{ display:none; padding:1rem; color:var(--color-transparent); cursor:pointer; position: absolute; top:0; right:0; z-index:3 } #editAccount.note.expanded-note-editor #compressNoteEditorButton{ display:block; } #editAccount.note:not(.expanded-note-editor) #expandNoteEditorButton{ display:block; } #expandNoteEditorButton:hover, #compressNoteEditorButton:hover{ color:var(--color-primary-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE FOCUS WINDOW ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ body.note-focus { overflow: hidden; } body.note-focus #app { display: none; } body.note-focus #editAccount.note .modal { width: 100vw !important; height: 100vh !important; max-width: none !important; max-height: none !important; border-radius: 0; transition: 0s !important; animation: none !important; padding-top: 2rem !important; } body.note-focus #editAccount.note #fullNoteContainer { height: calc(100vh - 128px) !important;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT NOTES FORMAT BAR CSS ///////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount.note #fullNoteFormatBar{ display:block; opacity:0; pointer-events: none; transition:0.1s ease-out; position: absolute; bottom: 1.25rem; bottom:0; right:1.5rem; max-width: calc(100% - 4rem); background:var(--color-white); border-bottom: 1.25rem solid var(--color-white); } #editAccount.note #fullNoteFormatBar::-webkit-scrollbar{ height: 0px; } #editAccount.note.show-format-toolbar #fullNoteFormatBar{ opacity: 1; pointer-events: all;} #editAccount.note #fullNoteFormatBar .format-divider{ height:26px; width:2px; background:var(--color-gray-300); margin: 0 10px;display: inline-block; transition:0.2s ease-out; transform: translateY(7px);} #editAccount.note .note-format-option{ display:inline-block; padding:0.75rem; border-radius:var(--border-radius) ; color:var(--color-gray-450); cursor:pointer; -webkit-tap-highlight-color:var(--color-transparent); transition:0.2s ease-out;} #editAccount.note .note-format-option:hover{ background:var(--color-gray-200); color:var(--color-primary-600); } #editAccount.note .note-format-option .fa-sync { font-size:15px; } #editAccount.note #createNoteTemplate { display:none; } #editAccount.note[data-account-index="new-account"] #getNoteUpdates, #editAccount.note[data-account-index="new-account"] #userSaveNoteButton, #editAccount.note[data-account-index="new-account"] .format-divider{ display:none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE TEXT COLOR SELECTION MODAL CSS /////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #notePresetColorSection { display: flex; margin-bottom: 1rem; } #notePresetColorSection > div { width: 4rem; height: 2rem; margin-right: 0.75rem; border-radius: var(--border-radius); cursor: pointer; } #notePresetColorSection > div:hover { filter:brightness(0.8); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE TILE REFRENCE SELECTION MODAL CSS //////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .note-single-tile-menu{ height:calc(55vh - 180px); overflow-y:scroll; margin:15px 0 -15px 0; padding-right:10px } .note-reference-tile-option{ padding:0.5rem; border-radius: var(--border-radius); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .note-reference-tile-option:hover{ color:var(--color-gray-900); background:var(--color-gray-200); } .note-reference-tile-option .logo{ height:20px; width:20px; margin-right:0.75rem; display: inline-flex; border-radius:20px; align-items:center; justify-content:center; color:var(--color-transparent); } .note-reference-tile-option .logo img{ height:100%; width:100%; border-radius:20px; object-fit: cover; background:var(--color-white); transform:translateY(0.25rem); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE DUE DATE CALENDAR CSS //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .calendar-container{ height:50vh; overflow-x:hidden; overflow-y:scroll; scrollbar-width: none; margin-top:-0.5rem; padding-bottom:10vh; padding-right:0.5rem; } .calendar-container::-webkit-scrollbar-thumb{ background:var(--color-white) !important; } table.calendar{ table-layout: fixed; width:100%; } table.calendar th, table.calendar td{ font-size:0.75rem; width: 14.2%; text-align:center; color:var(--color-gray-500); padding-bottom:0.75rem; } table.calendar td{ color:var(--color-gray-700); padding:0.5rem 0.5rem; border-radius:var(--border-radius); font-weight:700; } table.calendar td:not(.empty-date):hover{ background:var(--color-gray-200); color:var(--color-gray-700); cursor:pointer; } table.calendar td.today{ font-weight:900; --background: var(--color-primary-100); color:var(--color-primary-600); position: relative; } table.calendar td.selected, table.calendar td:not(.empty-date):active{ background:var(--color-primary-600) !important; color:var(--color-white) !important; } table.calendar tr#sevenDayStructure td { padding: 0; } .month-header-container{ position: sticky; top: 0px; margin-top:8px; background: var(--color-white); box-shadow: 0px -6px 6px rgba(255,255,255,1); z-index: 1;} .month-header-container:first-of-type{ margin-top:0px} .month-header{ color:var(--color-gray-800); padding:1rem 0 0.25rem; margin-bottom:0.5rem; text-align:left; font-size:0.75rem; font-weight:800; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--color-gray-400); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE BASIC FORMATTING CSS ///////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount.note #noteArea{ font-weight:600 !important; line-height: 1.75; color:var(--color-gray-700); } #editAccount.note #noteArea b, #editAccount.note #noteArea strong{ font-weight:800 !important;} #editAccount.note #noteArea a, #editAccount.note #noteArea .hyperlink{ transition:0.1s ease-in; font-weight:700; color:var(--color-primary-600); text-decoration: none; cursor: pointer; padding: 0rem 2px; margin:0 -2px; } #editAccount.note #noteArea a:hover, #editAccount.note #noteArea .hyperlink:hover{ color:var(--color-white) !important; background:var(--color-primary-600) !important; border-radius:var(--border-radius); } #editAccount.note #noteArea h3{ font-size: 1.25rem !important; margin-block-start: 1rem !important; margin-block-end: 1rem !important; font-weight: 700; } #editAccount.note #noteArea > h3:first-child{ margin-block-start: 0rem !important; } #editAccount.note #noteArea p{ display: inline !important; color:unset; line-height: 1.75; font-size: 16px !important; } #editAccount.note #noteArea font{ color:var(--color-gray-700) !important; } #editAccount.note #noteArea strike{ text-decoration-color: var(--color-transparent) !important; text-decoration: none !important; font-weight:800 !important; color:var(--color-gray-700) /*!important*/; } #editAccount.note #noteArea code { background:var(--color-gray-200); padding:0rem 0.5rem; border-radius: var(--border-radius); display: inline-block; color:var(--color-red-700); font-weight: 500; } #editAccount.note #noteArea code.code-copying { background:var(--color-gray-700) !important; color: var(--color-white) !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); } #editAccount.note #noteArea img{ width:66%; border-radius:var(--border-radius-lg); margin:0.5rem 0; cursor:pointer; } #editAccount.note #noteArea img.small-image{ width:33%; } #editAccount.note #noteArea img.large-image{ width:100%; } #editAccount.note #noteArea iframe{ border:none; width:100%; height:300px; } #editAccount.note #noteArea ol, #editAccount.note #noteArea ul{ padding-inline-start:30px; margin-block-start: 0px; margin-block-end: 0px;} #editAccount.note #noteArea li{ list-style-type: none; position: relative; --transition:0.2s ease-out; margin:0.5rem 0; padding-left:4px; } #editAccount.note #noteArea li * { --transition: 0.15s ease-out; } #editAccount.note #noteArea hr{ margin: 1.875rem 0; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE CUSTOM OBJECTS CSS /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editAccount.note #noteArea ul li::before { content:"\f0c8"; font-family: "Font Awesome 5 Pro"; position: absolute; top: 11px; left: -20px; font-size: 5px; color: var(--color-gray-700); font-weight: 800; } #editAccount.note #noteArea ol li::before { content:"\f0c8"; font-family: "Font Awesome 5 Pro"; position: absolute; top: 1px; left: -32px; font-size: 23px; color: var(--color-gray-400); font-weight:300; line-height:1.25; padding:0 3px; cursor:pointer; } #editAccount.note #noteArea ol li.checked::before { content:"\f14a"; font-weight:700; color:var(--color-green-400);} #editAccount.note #noteArea ol li.checked{ user-select:none; } #editAccount.note #noteArea ol li.checked, #editAccount.note #noteArea ol li.checked *, #editAccount.note #noteArea ol li.checked .hyperlink{ text-decoration: line-through; color:var(--color-gray-400) !important;} #editAccount.note #noteArea ol li.checked img{ filter:grayscale(100%); opacity: 0.4 !important; } #editAccount.note #noteArea ol li.checked .hyperlink:hover{ color:var(--color-gray-600) !important; background:var(--color-gray-200) !important; border-color:transparent; } #editAccount.note #noteArea ol li.checked .tile-reference{ background: none !important; box-shadow:none !important; --padding:0.1rem 0.25rem !important; } #editAccount.note #noteArea ol.nl { padding-inline-start: 0px; counter-reset: list-counter 0; } #editAccount.note #noteArea ol.nl li { display: list-item; counter-increment: list-counter; padding-left: 34px; } #editAccount.note #noteArea ol.nl li:before { content: counter(list-counter); position: absolute; left: 1px; width: 20px; white-space:nowrap; text-align: right; color: var(--color-gray-700); font-weight: 800; font-family: 'Muli', sans-serif !important; font-size: 1rem !important; top: 0px; line-height: 1.75 !important; padding: 0 !important; cursor: default !important; } #editAccount.note #noteArea ol li.checked ol.nl li:before { color: var(--color-gray-400) !important; } #editAccount.note #noteArea ol.nl li:nth-child(n+100):before { left: -2px; } #editAccount.note #noteArea .tile-reference{ display:inline-block; white-space: nowrap; background: var(--color-white); border:1px solid var(--color-white); border-radius: var(--border-radius); box-shadow: 0px 2px 5px rgba(42,67,101,0.25); font-size: 0.75rem; font-weight:800; padding: 0rem 0.375rem 0 0.3125rem !important; margin: 0 0.25rem; color: var(--color-gray-900) !important; line-height: 1.9; transform: translateY(-1px); border-radius:30px !important; } #editAccount.note #noteArea .hyperlink.tile-reference:hover{ background:var(--color-white) !important; --transform:none; color:var(--color-primary-600) !important; --border-color:var(--color-gray-400); --box-shadow:none; } #editAccount.note #noteArea .hyperlink.tile-reference .fa-file-alt{ margin: 0 0.4375rem 0 0.25rem; font-size: 15px; display: inline-block; height: 18px; padding-top: 4px; } #editAccount.note #noteArea .hyperlink .tooltiptext{ top: calc(100% + 10px) !important; left: -5px !important;} #editAccount.note #noteArea .hyperlink div{ display:inline} #editAccount.note #noteArea .hyperlink img{ height: 18px !important; width:18px !important; object-fit:cover; border-radius: 12px; margin:0 6px 0 0 !important; transform:translateY(4px)} #editAccount.note #noteArea code.note-input-pill{ cursor: pointer; color: var(--color-gray-700); font-weight: 700; margin-left: 0.18rem; font-size: 14px; border-radius: 100px; padding: 1px 0.75rem 0; font-family: 'Muli'; color: var(--color-white); background: var(--color-primary-600); } #editAccount.note #noteArea .note-table-container{ max-width:100%; } #editAccount.note #noteArea .note-table-container-overflow{ max-width:100%; overflow: auto; scrollbar-width: thin; } #editAccount.note #noteArea table{ border-spacing: 0; border-radius: var(--border-radius); border:1px solid var(--color-gray-350); } #editAccount.note #noteArea table td{ min-width: 5rem; vertical-align:top; border:1px solid var(--color-gray-350); padding: 0.25rem 0.5rem; font-weight:600 !important; line-height: 1.75; color:var(--color-gray-700); word-break: inherit; } #editAccount.note #noteArea table.has-header tr:first-child { background: var(--color-gray-100); } #editAccount.note #noteArea table.has-header tr:first-child td { padding: 2px 0.5rem; font-size: 13px; font-weight: 700 !important; color: var(--color-gray-550); } #editAccount.note #noteArea .note-columns-container table{ width:100%; border:none; } #editAccount.note #noteArea .note-columns-container table td{ border:none; width:50%; padding:0; padding-left:1.5rem; } #editAccount.note #noteArea .note-columns-container table td:first-child{ border-right: 2px solid var(--color-gray-300); padding-left:0rem; padding-right:1.5rem; } #editAccount.note #noteArea .note-table-controls{ opacity:0; transition:0.25s; } #editAccount.note #noteArea .note-table-container:hover .note-table-controls, #editAccount.note #noteArea .note-table-controls.lock-open{ opacity:1; } #editAccount.note #noteArea .note-table-controls .note-table-controls-open { cursor: pointer; color: var(--color-gray-550); } #editAccount.note #noteArea .note-table-controls.lock-open .note-table-controls-open, #editAccount.note #noteArea .note-table-controls .note-table-controls-option { display: none; } #editAccount.note #noteArea .note-table-controls.lock-open .note-table-controls-option { display: inline; color: var(--color-gray-550); } #editAccount.note #noteArea eitan-duedate{ font-size:0.875rem; padding:0.125rem 0.5rem; color:var(--color-gray-550); background:var(--color-gray-200); border-radius:var(--border-radius); font-weight: 700; transition:0.2s ease-out; margin:0 0.25rem 0 0; cursor:pointer; white-space: nowrap; font-style: normal !important;} #editAccount.note #noteArea eitan-duedate.due-date-high{ color:#9B2C2C; background:#FED7D7; } #editAccount.note #noteArea eitan-duedate.due-date-medium{ color:#C05621; background:#FEEBC8; } #editAccount.note #noteArea li.checked eitan-duedate{ color:var(--color-gray-400) !important; background:var(--color-gray-100) !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// NOTE CONTEXT MENU ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #noteContextMenuContainer{ position: absolute; top:0; right:0; left:0; bottom:0; overflow: hidden; z-index:20; display:none; } #noteContextMenuContainer #noteContextMenu { background: var(--color-white); position: absolute; top:500px; left:500px; box-shadow: 0px 3px 4px -1px rgb(30 41 59 / 10%), 0px 0px 15px rgb(30 41 59 / 10%), 0px 18px 20px -15px rgb(30 41 59 / 25%); padding:0.5rem; border-radius: var(--border-radius); scrollbar-width: none; font-size:0.9rem; border:1px solid rgba(30 41 59 / 20%); } #noteContextMenuContainer .note-context-menu-open-more-options { color:var(--color-gray-600); transition:0.1s ease-out; cursor:pointer; padding:0.5rem 1rem; display: inline-block; } #noteContextMenuContainer .note-context-menu-open-more-options:hover{ color:var(--color-primary-700); } #noteContextMenuContainer .note-context-menu-list{ scrollbar-width: none; } #noteContextMenuContainer .note-context-menu-list::-webkit-scrollbar{ width: 0px; } #noteContextMenuContainer .note-context-menu-item { display:inline-block; padding:0.65rem; border-radius: var(--border-radius); color:var(--color-gray-600); cursor:pointer; transition: 0.1s ease-out; } #noteContextMenuContainer .note-context-menu-item:hover { background-color: var(--color-gray-300); color:var(--color-gray-800); } #noteContextMenuContainer .note-context-menu-item.font-bold { line-height: 1; } #noteContextMenu .note-context-menu-more-options { display:none; } #noteContextMenu.show-more-options .note-context-menu-more-options { display:block; } #noteContextMenu.show-more-options .note-context-menu-open-more-options{ transform: rotate(90deg);} #noteContextMenuContainer .note-context-menu-item-full-width {display: block; color:var(--color-gray-800); padding: 0.3125rem 0.625rem; white-space: nowrap;} #noteContextMenuContainer .note-context-menu-item-full-width span{ float:right; text-align: right; opacity:0.65; } #noteContextMenuContainer .note-context-menu-item-full-width span monospace { font-family: monospace; font-weight: 500; font-size: 15px; } #noteContextMenuContainer .note-context-menu-divider{ margin: 0.75rem 0 0.75rem -0.5rem; width:calc(100% + 1rem); height:calc(100% + 1rem); height:1px; background: var(--color-gray-400); } #noteContextMenuContainer .note-context-menu-item-option-title, #noteContextMenuContainer .note-context-menu-item-option { display: inline-block;} .note-context-menu-item-option:hover { text-decoration: underline 2px; font-weight: 700} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ORGANIZE TAGS MODULE ////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #organizeTags .modal{ width:750px; min-width:750px; overflow-y:hidden; height:80vh; } #organizeTags .modal h2 span{ color:var(--color-gray-500); font-size:1rem; margin-left:1.5rem; display: inline-block; font-weight:700;} #organizeTags .modal h2 span a.button-off{ color:var(--color-gray-500) !important; } #organizeTags #organizeTagsList{ margin: 0 0 1.5rem 0; height: calc(80vh - 333px); padding-top:0.75rem; overflow: auto; padding-right:1rem; scrollbar-width: auto; } #organizeTags #organizeTagsList::-webkit-scrollbar{ width: 12px; } #organizeTags .organize-tag-row{ border:2px solid var(--color-white); display: flex; align-items: center; padding: 0.5rem 0 0.425rem 0.6875rem; border-radius: var(--border-radius-lg); transition:0.1s; } #organizeTags .organize-tag-row.hidden-tile{ display:none !important; } #organizeTags #organizeTagsList.show-hidden .organize-tag-row.hidden-tile{ display:flex !important; } #organizeTags:not(.selection-method) .organize-tag-row-bg-gray { background: #F2F6FA; border-color:#F2F6FA; background:var(--color-gray-200); border-color: var(--color-gray-200); } #organizeTags:not(.selection-method) #organizeTagsList.show-hidden .organize-tag-row-bg-gray { background: var(--color-white); border-color:var(--color-white); } #organizeTags .organize-tag-row .logo{ height: 30px; border-radius: 30px; width:30px; min-width: 30px; margin-right:15px; display:flex; align-items: center; justify-content: center; color:var(--color-white); } #organizeTags .organize-tag-row img{ height: 30px; border-radius: 30px; width:30px; object-fit: cover; background-size: cover; min-width: 30px;} #organizeTags .organize-tag-row-name{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:0.875rem; } #organizeTags .organize-tag-row-name::-webkit-scrollbar{ height: 0px; } #organizeTags .organize-tag-row input{ width: 400px; margin-left:20px; margin-bottom:0; border:0; font-size:0.875rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ORGANIZE TAGS SELECTION COMPONENTS //////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #organizeTags #organizeTagsSelectionBlock{ display: none; margin-top:-0.25rem; margin-bottom:1.125rem; } #organizeTags #organizeTagsSelectionContainer{ border:2px solid var(--color-gray-300); display: inline-block; width:calc(100% - 140px); transition:0.1s; border-radius: var(--border-radius) 0 0 var(--border-radius); cursor: pointer; } #organizeTags #organizeTagsSelectionContainer:hover{ border-color: var(--color-primary-300); background:var(--color-primary-100); } #organizeTags #organizeTagsSelectionCaret{ pointer-events: none; margin-left:-30px; } #organizeTags #organizeTagsSelection{ line-height:1.25rem; width:calc(100% - 5px); padding-left:0.75rem; border-width: 0 !important;} #organizeTags #editCurrentlySelectedTagName, #organizeTags #addNewPotentialTag{ padding:7px 1rem 6px; display: inline-block; color:var(--color-gray-600); margin-left:-0.25rem; border:2px solid var(--color-gray-300); cursor:pointer; border-left:0; } #organizeTags #addNewPotentialTag{ border-radius:0 var(--border-radius) var(--border-radius) 0;} #organizeTags #editCurrentlySelectedTagName:hover, #organizeTags #addNewPotentialTag:hover{ background:var(--color-gray-200); color:var(--color-gray-800); } #organizeTags #toggleSelectedTilesOnly{ color:var(--color-gray-500); display: none; padding:0.5rem; cursor: pointer; position: absolute; top: 10.25rem; right: 2.5rem; text-align: right; } #organizeTags #toggleSelectedTilesOnly i{display: none; padding-right: 0.35rem; } #organizeTags #toggleSelectedTilesOnly.show-selected-only{ color:var(--color-primary-600); } #organizeTags #toggleSelectedTilesOnly.show-selected-only i{ display: inline-block; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #organizeTags.selection-method .organize-tag-row-name{ width:500px; } #organizeTags.selection-method .organize-tag-row input{ opacity:0; width:0px; } #organizeTags.selection-method #organizeTagsSelectionBlock{ display: block; } #organizeTags.selection-method #toggleSelectedTilesOnly{ display: inline-block; } #organizeTags.selection-method #searchOrganizeTagsModule{ padding-right:12rem; } #organizeTags .organize-tag-row .organize-tag-selection{ overflow: hidden; max-width: 0px; padding:1.125rem 0; font-size:1.25rem; margin:-1.1875rem 0.2rem -1rem 0rem; transition:0.1s; cursor:pointer; color:var(--color-gray-600); border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0; } #organizeTags.selection-method .organize-tag-row .organize-tag-selection{ --display:block; max-width: 100px; padding:1.125rem; margin-left:-0.6875rem; } #organizeTags .organize-tag-row .organize-tag-selection i{ transform: translateY(1px); } #organizeTags .organize-tag-row .organize-tag-selection .fa-circle{ display: inline-block; } #organizeTags .organize-tag-row .organize-tag-selection .fa-check-circle{ display: none; font-weight:800 !important; } #organizeTags.selection-method .organize-tag-row{ cursor:pointer; overflow: hidden; border-color:var(--color-white); } #organizeTags.selection-method .organize-tag-row-name{ width:600px; } #organizeTags.selection-method .organize-tag-row.selected{ background: #F2F6FA; background:var(--color-gray-200); } #organizeTags.selection-method .organize-tag-row.selected .fa-circle{ display: none; } #organizeTags.selection-method .organize-tag-row.selected .fa-check-circle{ display: inline-block; color:var(--color-primary-600);} #organizeTags.selection-method #organizeTagsList.show-selected-only .organize-tag-row:not(.selected) { display: none !important;} #organizeTags.selection-method #organizeTagsList.show-notes-only .organize-tag-row:not(.tag-row-note) { display: none !important;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ORGANIZE TAGS SAVING ANIMATION //////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #organizeTags #tagSavingAnimation{ display: none; height: calc(80vh - 333px); margin: 0.75rem 0 1.5rem 0; } #organizeTags.saving-tags{ pointer-events: none; } #organizeTags.saving-tags #organizeTagsList { display:none; } #organizeTags.saving-tags #tagSavingAnimation{ display: flex; align-items: center; justify-content: center;} #organizeTags.saving-tags img{ height: 200px; max-width:100%; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// EDIT PREFERENCES CSS ////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editPreferences select{ width:auto; } #editPreferences p{ margin:0.75rem 0 0; } #editPreferences a{ color: var(--color-gray-600) !important; font-weight:700; text-decoration: none;} #editPreferences button.tertiary{ padding-left:0; padding-bottom:0; color:var(--color-primary-600) } #editPreferences button[disabled] { color: var(--color-gray-800); text-decoration: none !important; cursor: default; } #editPreferences #advancedUserSettings{ display:none; } #editPreferences #desktopStartupScript { min-height: 6rem; margin: 0.25rem 0; font-family: monospace; font-size:12px; font-weight: 400; } #editPreferences #defaultPatternSelection, #editPreferences #fingerprintSelection, #fingerprintSelectionCaret{ display:none; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// KEYBOARD SHORTCUTS DEFINITIONS CSS //////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .keyboard-shortcut-definitions .dialog > * { width:475px; } .keyboard-shortcut-definitions .shortcuts-container{ overflow: auto; scrollbar-width:none; overflow-x: visible; height:55vh; padding-right:0rem; margin-top:1rem;} .keyboard-shortcut-definitions .shortcuts-container::-webkit-scrollbar{ width:0; } .keyboard-shortcut-definitions table{ padding-top:0.5rem; margin-bottom: 2rem; border-top:2px solid var(--color-gray-300);} .keyboard-shortcut-definitions td{ width:255px; vertical-align:middle; font-weight:600; padding:0.5rem 0; color:var(--color-gray-600); } .keyboard-shortcut-definitions tr > td:nth-child(2){ text-align: right; width:145px; font-weight:800; letter-spacing: 2px;} .keyboard-shortcut-definitions td div{ display: inline; color:var(--color-gray-500);} .keyboard-shortcut-definitions span:not(.typing){ display: inline-block; padding:0.5rem 0.75rem; font-size:0.875rem; border-radius: var(--border-radius); letter-spacing: 0px; cursor: default; min-width:38px; min-height: 36px; text-align: center; border:1px solid var(--color-gray-400); color:var(--color-primary-600); font-weight:700; box-shadow:0px 2px 0px var(--color-gray-400); transition:0.15s ease-out; } .keyboard-shortcut-definitions span:not(.typing):hover{ transform:translateY(2px); box-shadow:none; } .keyboard-shortcut-definitions span.typing{ border-radius:var(--border-radius); display:inline-block; border:1px solid var(--color-gray-300); background-color: var(--color-gray-100); font-family: monospace; letter-spacing:0; padding:0.65rem; color: var(--color-gray-700); } .keyboard-shortcut-definitions code{ font-size: 1rem; padding: 2px 5px; color: var(--color-primary-700); font-weight: 600; letter-spacing: 0.5px; background: var(--color-gray-200); border-radius: var(--border-radius); } .keyboard-shortcut-definitions i:not(.fas){ font-style:normal; font-size:0.875rem; font-weight: 600; color: var(--color-gray-800);} .keyboard-shortcut-definitions summary p{ color:var(--color-primary-800); } .keyboard-shortcut-definitions details[open] summary .fas{ transform: rotate(90deg) translate(1px,-2px)} .keyboard-shortcut-definitions .gradient{ pointer-events:none; position:relative; background:linear-gradient(to bottom, var(--color-transparent), var(--color-white)); height:2rem; margin-top:-1.75rem; margin-bottom:-0.5rem;} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// PASSWORD HEALTH REPORT //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #passwordHealthReport .modal{ width:900px; min-width:900px; height:90vh; overflow-y:hidden; } #passwordHealthReport .nav{ display:flex; align-items: center; padding:0.25rem 0 1.25rem; color:var(--color-gray-500); padding-left:0px; opacity:0 } #passwordHealthReport .nav > div{ padding:3px 0; margin-right:35px; cursor:pointer; border-bottom:2px solid var(--color-transparent); } #passwordHealthReport .nav > div.selected{ color:var(--color-primary-600); border-color:var(--color-primary-600); } #passwordHealthReport .nav span.tooltip { margin: -0.15rem 0 0 -1rem;display: inline-block; } #passwordHealthReport .nav .tooltip .tip-note{ top:calc(100% + 15px) !important; left: -8px !important; } #passwordHealthReport #passwordHealthHeaders{ width:calc(100% - 1rem); } #passwordHealthReport #passwordHealthItems{ padding-bottom: 2rem; height: calc(100% - 160px); overflow: auto; scrollbar-width:auto; } #passwordHealthReport #passwordHealthItems::-webkit-scrollbar{ width: 12px; } #passwordHealthReport .table-row:hover{ background:var(--color-white); } #passwordHealthReport .passowrd-health-row > div > span{ display:inline-block; color:var(--color-gray-600); margin-top:0.1875rem; width: 100%; overflow: hidden; text-overflow: ellipsis; } #passwordHealthReport .password-health-name{ cursor:pointer; transition:0.1s; } #passwordHealthReport .password-health-name span{ color:var(--color-gray-500); } #passwordHealthReport .password-health-name span img{ height:12px; transform: translateY(1px);} #passwordHealthReport .password-health-name span span{ color:var(--color-primary-600); } #passwordHealthReport .password-health-meter{ background:var(--color-gray-400); height:0.5rem; width:90%; border-radius:0.5rem; margin: 0.25rem 0 0.375rem; } #passwordHealthReport .password-health-strength{ background:var(--color-gray-200); height:100%; transition:0.25s ease-out; border-radius:var(--border-radius); } #passwordHealthReport .password-health-action button { margin: 0; float: none; width: 100%; padding: 0.75rem 0; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ADMIN MEMBER VIEW ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #policyOwnerOptions{ margin:15px 0px 20px; display:none; } #policyOwnerOptions > div:first-child{ display:flex;} #passwordHealthReport #policyOwnerOptions .fa-caret-down{ margin-left: -25px; margin-top: 14px; color:var(--color-gray-400); } #passwordHealthReport #policyMemberProfilePicture{ border-radius:var(--border-radius) 0 0 var(--border-radius); background:var(--color-primary-gradient); height:44px; width:44px; display:inline-flex; justify-content:center; color:var(--color-white); min-width:44px; align-items: center; background-size:cover !important; background-position: center !important; transition:0.2s ease-out;} #passwordHealthReport #policyMemberSelection{ width:calc(100% - 44px); line-height: unset; padding-left:1rem; border:1px solid var(--color-gray-400); margin-bottom:0; border-radius: 0 var(--border-radius) var(--border-radius) 0; } #passwordHealthReport #policyMemberDetails{ margin:15px 0; color:var(--color-gray-600); padding:10px 15px; background:var(--color-gray-200); border-radius:var(--border-radius); } #passwordHealthReport #policyMemberDetails .delete-user{ float:right; cursor:pointer; border-left: 15px solid var(--color-white); margin: -10px -15px 0 0; padding: 10px 15px; border-radius: 0 var(--border-radius) var(--border-radius) 0;} #passwordHealthReport #policyMemberDetails .delete-user:hover{ color: var(--color-white); background:var(--color-red-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MUTLI SIGN-IN CSS ///////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #multiSignIn .multi-profile-group{ display:flex; align-items: center; color: var(--color-gray-700); } #multiSignIn .multi-profile-group *{ pointer-events: none;} #multiSignIn .multi-profile-group .multi-profile-image{ margin-right:1rem !important; } #multiSignIn .multi-profile-name{ width: calc(100% - 60px); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #multiSignIn .multi-profile-name span{ color: var(--color-gray-600); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; display: inline-block; } #multiSignIn #uploadProfilePicture, #uploadNoteMediaFile{ color:var(--color-primary-600); padding:6px 20px; border:1px solid var(--color-gray-400); border-radius:var(--border-radius); margin-top:15px; display:inline-block; cursor:pointer;} #multiSignIn #uploadProfilePicture:hover, #uploadNoteMediaFile:hover { background:var(--color-gray-200); } #multiSignIn #connectedAccounts{ margin: 0.5rem 0px 2rem 0px; } #multiSignIn #connectedAccounts .multi-profile-group{ margin-bottom:0.25rem; padding:0.75rem 0; border-radius:var(--border-radius); cursor:pointer; transition:0.15s ease-out; -webkit-tap-highlight-color: var(--color-transparent); } #multiSignIn #connectedAccounts .multi-profile-group:first-of-type{ margin-top:0.75rem; } #multiSignIn #connectedAccounts .multi-profile-group:hover, #multiSignIn #connectedAccounts .multi-profile-group:active{ padding-left:0.75rem; background:var(--color-gray-200); } #multiSignIn #connectedAccounts .multi-profile-group:hover *{ color:var(--color-gray-900) !important; } #multiSignIn #connAccntForm{ display:none; } #multiSignIn #newConnectPassword{ padding-right:3rem; } body.running-background-refresh #multiSignIn #resetAutoLockTimerButton { color: var(--color-gray-400); pointer-events: none; } /*////////////////////////////////////////////////////////////////*/ /*// AI ASSISTANT MODAL CSS //////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ #aIAssistantButton { display:none; margin: 0 !important; cursor: pointer; color: var(--color-gray-900) !important; } #aIAssistantButton.tooltip .tooltiptext { top: calc(100% + 10px); } #aiAssistantSettingsButton { float:right; color:var(--color-gray-500); cursor: pointer; padding: 0.375rem; font-size: 1.25rem; transform: translate(-34px, -21px); } #aiAssistantSettingsButton:hover { color: var(--color-gray-900); } #aiAssistantProfilePicture { margin-right: 0.5rem; } #aiAssistantResponseArea { min-height: 18rem; } .alertify.typing #aiAssistantProfilePicture { color: var(--color-primary-600); } .alertify.typing #aiAssistantResponseArea { margin-bottom: 4rem; } #aiAssistantGreeting { margin: 1.5rem 0 0.75rem; } @keyframes aIAssistantThinking { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } } .ai-assistant-thinking { animation: aIAssistantThinking 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1); } #aiAssistantBodyMessage b { color: var(--color-gray-700); } #aiAssistantBodyMessage vspacer { height: 0.75rem; } #aiAssistantBodyMessage code { background: var(--color-gray-150); display: block; border-radius: var(--border-radius); padding: 0.75rem; font-size: 0.875rem; margin: 1rem 0; } .ai-assistant-follow-up { color: var(--color-primary-700); margin: 1.75rem 0; font-weight: 600; background: var(--color-gray-100); padding: 1rem 1.5rem; border-radius: 1rem; width: max-content; margin-left: auto; max-width: 80%; border: 2px solid var(--color-gray-300); } .ai-assistant-follow-up.follow-up-placeholder { color: var(--color-gray-600); cursor:pointer; transition: 0.1s ease-out; margin-bottom: 0.75rem; } .ai-assistant-follow-up.follow-up-placeholder:hover { background: var(--color-gray-200); color: var(--color-gray-700); } .ai-assistant-follow-up.follow-up-placeholder i { margin-right: 0.5rem; } #aIAssistantInstructions { padding-inline-start: 24px; margin-bottom: -2rem; } #aIAssistantInstructions li { padding-left: 10px; } #aIAssistantInstructions .fa-circle-check, #aIAssistantInstructions .fa-circle { color: var(--color-gray-300); margin: 0 10px 0 -30px; background: var(--color-white); transform:translateY(1px); } #aIAssistantInstructions .fa-circle-check { color: var(--color-green-500); } #aIAssistantInstructions .fa-info-square { cursor:pointer; } #aIAssistantInstructions small { display: none; } #aIAssistantInstructions .large-input-editor { min-height: 10rem; margin: 0.5rem 0 1rem; font-weight: 500; font-size: 0.9375rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// SHARED TILES CSS ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #newlySharedTiles{ min-height:90px; } #newlySharedTiles .shared-object-row{ transition:0.15s; padding: 15px 0; } #newlySharedTiles .shared-object-image{ height:40px; width:40px; border-radius:30px; margin-right:15px; } #newlySharedTiles .shared-object-name{ width:calc(100% - 180px); } #newlySharedTiles .shared-object-accept, #newlySharedTiles .shared-object-decline{ text-align:center; padding:5px; margin:0 15px; font-size: 30px; color: var(--color-gray-400); cursor:pointer; } #newlySharedTiles .shared-object-decline:hover{ color:var(--color-red-600); } #newlySharedTiles .shared-object-accept{ color:var(--color-green-400); text-align:center; } #newlySharedTiles .shared-object-accept:hover{ color:var(--color-green-700); } #newlySharedTiles .shared-object-decline, #newlySharedTiles .shared-object-accept{ overflow:visible} #sharedTiles small{ color:var(--color-gold-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// PAYMENT CSS ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #editSubscription span{ color:var(--color-gray-900); } #editSubscription .plan-group{display: flex; flex-wrap: wrap;} #editSubscription .plan-type{ margin:0.5rem 1rem 0 0; padding:0.5rem 1rem; background:var(--color-gray-100); border:2px solid var(--color-gray-300); border-radius:var(--border-radius); cursor:pointer; white-space: nowrap; color:var(--color-gray-700); } #editSubscription .plan-type-selected{ color:var(--color-gray-900); border:2px solid var(--color-primary-600); background:var(--color-white); box-shadow: 1px 3px 5px rgba(0,0,0,0.2); } #editSubscription .plan-type:hover{ background:var(--color-gray-200); } #paymentLoading{ display: none; text-align: center; background:var(--color-white); padding:0px 25px 50px 25px; box-sizing: border-box; border-radius: 25px; } #paymentLoading img{ height:200px; filter:grayscale(100%) sepia(0.6) contrast(2) hue-rotate(160deg); opacity:0.35; } #editSubscription .fa-square{ color: var(--color-gray-400); } #editSubscription .fa-check-square{ color: var(--color-primary-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// STRIPE CREDIT CARD ELEMENT //////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #payment-form > div{ display: flex; align-items: center;} #payment-form .form-row{ width:calc(100% - 55px); } #payment-form .StripeElement{ padding: 0.75rem; border-radius:var(--border-radius); border: 1px solid var(--color-gray-400); } #payment-form .StripeElement--invalid{ border-color: var(--color-red-600); } #payment-form .StripeElement--webkit-autofill{ background-color: #fefde5 !important; } #payment-form button{ background:var(--color-primary-100); color:var(--color-primary-600); border: 1px solid var(--color-primary-200); padding: 0.875rem 1rem; transform:translate(10px, 3px); border-radius:var(--border-radius);} #payment-form button:hover{ background:var(--color-primary-200); } #payment-form #card-errors{ color:var(--color-red-600); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*/// MOBILE INSTURCTIONS ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #mobileInstructions{ display:flex;} #mobileInstructions > div{ width:50%; } #mobileInstructions .secondary{ margin-bottom:-1rem !important; } #mobileInstructions img{ width:130%; margin-left:-20%; margin-top:1.5rem; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// TUTORIAL CSS ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #tutorial #tutorialGraphic{ margin-top:1rem; transition: 0.15s ease-out; min-height: 230px; max-height: 240px; } #tutorial #initialTileOptions{ display: flex; flex-wrap: wrap; height: 305px; max-height:calc(100vh - 435px); margin-top:2rem; overflow-y: auto; padding-bottom:60px; transition:0.2s; border-top:2px solid var(--color-transparent);} #tutorial #initialTileOptions::-webkit-scrollbar { width: 10px; } #tutorial #initialTileOptionsGradient{ height:0.5rem; margin:-0.25rem 0 1rem -2px; position:relative; background:var(--color-white); box-shadow: 0px -5px 7px -1px rgba(42,67,101,0.1); } #tutorial #initialTileOptions > span.grouping{ display:block; width:100% !important; margin:32px 0 12px 2px; color:var(--color-gray-700); } #tutorial #initialTileOptions > span.grouping:first-of-type{ margin-top:0;} #tutorial #initialTileOptions > div{ width:30%; box-sizing: border-box; margin: 0 3% 5px 2px; padding:12px 28px 12px 8px; white-space:nowrap; display:flex; align-items: center; border-radius: var(--border-radius); transition: 0.1s; cursor: pointer; min-width: 170px; overflow:hidden; font-weight:bold; position:relative; background: var(--color-white); color: var(--color-gray-800); border:1px solid var(--color-transparent); } #tutorial #initialTileOptions > div img{ height:25px; width:25px; border-radius:25px; margin:0px 10px 0 5px; } #tutorial #initialTileOptions > div .tile-option-title{ width: calc(100% - 50px);overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #tutorial #initialTileOptions > div[data-service="-"]:hover{ background: var(--color-gray-200); } #tutorial #initialTileOptions > div[data-service="-"]{ border-color:var(--color-white); color: var(--color-gray-700); } #tutorial #initialTileOptions > div[data-service="-"] .fa-check-square{ display: none; } #tutorial #initialTileOptions > div[data-service="-"] .fa-square{ display: block; color:var(--color-gray-300)} #tutorial #initialTileOptions > div:not([data-service="-"]){ border-color: var(--color-gray-300); box-shadow: 2px 3px 4px rgba(42,67,101, 0.3); color: var(--color-gray-900); } #tutorial #initialTileOptions > div > i{ display:none !important; } #tutorial #initialTileOptions > div:not([data-service="-"]) .fa-check{ display: block !important; color:var(--color-green-400); position: absolute; right: 16px; font-size: 12px; } #tutorial #intialTileCountDisplay{ position: absolute; bottom:3.5rem; left:3rem; color:var(--color-gray-500); transition: 0.12s ease-out;} #tutorial #intialTileCountDisplay span{ color:var(--color-gray-800); } #tutorialTooltip{ position: absolute; background: linear-gradient(to right, var(--color-primary-500), var(--color-primary-600)); top: 81px; z-index: 10; left: 590px; padding:20px; width: 160px; border-radius: var(--border-radius); color: var(--color-white); line-height: 1.5; display: none; } #tutorialTooltip:before{ content:''; position:absolute; top:15px; left:-32px; transform: rotate(-90deg); pointer-events: none; border-width: 20px; border-style: solid; border-color: transparent transparent var(--color-primary-500); } #tutorialTooltip:after{ content:'\f141'; position:absolute; top:10px; left:-66px; font-family: "Font Awesome 5 Pro"; padding: 11px 15px; border:3px solid var(--color-primary-600); border-radius:var(--border-radius); pointer-events: none; color:var(--color-primary-600); background:var(--color-white) } #tutorialTooltip h4{ margin-block-start: 0; margin-block-end: 0; margin:5px 0;} #tutorialTooltip span{ display: block; cursor: pointer; padding:8px 0; opacity:0.9; text-align: center; background: rgba(0,0,0,0.15); margin: 20px -20px -20px; border-radius: 0 0 var(--border-radius) var(--border-radius); } #tutorialTooltip span:hover{ background: rgba(0,0,0,0.25); } /*////////////////////////////////////////////////////////////////*/ /*// SLEEP MODE CSS ///////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ #sleepModeActivateButton { display:none; position:absolute; top: 1rem; right: 4.125rem; font-size: 1.25rem; cursor: pointer; color: var(--color-gray-500) !important; transition: 0.1s ease-out; } #sleepModeActivateButton:hover { color: var(--color-gray-900) !important; } #sleepModal { overflow:hidden; display: none; background: var(--color-black); position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 5000; color: var(--color-white); } #sleepModal iframe { pointer-events: none; width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #sleepModalImage { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; filter:blur(8px) brightness(0.35); transform: scale(1.2); transform: scale(1); opacity:0; transition: transform 20s ease-out, opacity 0.5s; } #sleepModalText { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; box-sizing:border-box; display:flex; opacity: 0; transition: 0.5s; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.3)); cursor:default !important; } #sleepModalHeadline { line-height: 1.1; } #sleepModalDescription { line-height: 1.5; } #sleepModal a { font-weight: 700; color: var(--color-primary-400); margin-left :2rem; cursor:pointer !important; } #sleepModal a:hover { opacity:1; } #sleepModalArticleTimerBar { margin: 0.5rem 0 2rem; width: 100%; height: 6px; border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.25); overflow:hidden; } #sleepModalArticleTimerFill { background: var(--color-primary-500); height: 100%; width: 100%; transform: translateX(-100%); transition: 18.5s linear; } #sleepModalSwitchItemButtons { position: absolute; bottom: 0; right: 0; padding: 2rem; cursor: default; } #sleepModalSwitchItemButtons a { color: var(--color-white); opacity: 0.5; font-size: 1.5rem; padding: 1rem; margin-left: 0.5rem; } #sleepModalSwitchItemButtons a:hover { opacity: 1; } #sleepModalSwitchItemButtons span { opacity: 0; display: inline-block; margin-right:1.25rem; transition: 0.4s ease-out; } #sleepModalSwitchItemButtons:hover span { opacity: 0.5; } /*////////////////////////////////////////////////////////////////*/ /*// BLANK NEW TAB ///////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ .blank-new-tab #autoLogin, .blank-new-tab #loginPage, .blank-new-tab #nav > .nav-section:first-child, .blank-new-tab #nav > .nav-section:last-child, .blank-new-tab .account-card .fa-ellipsis-h, .blank-new-tab #addAccount { display: none; } .blank-new-tab #appContainer { width: 100%; } .blank-new-tab #main { opacity: 1; } .blank-new-tab #app #nav #searchModule, .blank-new-tab #app #nav #searchBar { width: 100% !important; } .blank-new-tab:not(.dark):not(.mobile) .account-card:nth-of-type(2) { border-radius: var(--border-radius) 0 0 0; } /*////////////////////////////////////////////////////////////////*/ /*// OFFLINE CSS /////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ .offline-mode #profilePicture{ pointer-events:none !important; filter:grayscale(90%); opacity:0.8; } .offline-mode #paymentsButton, .offline-mode #rewardsButton, .offline-mode #helpButton, .offline-mode #lockAccountsButton, .offline-mode #addAccount, .offline-mode #installMobile, .offline-mode #preferencesButton, .offline-mode #installExtension, .offline-mode #organizeCategories, .offline-mode .settings-divider, .offline-mode #healthButton, .offline-mode .note-list-icon, .offline-mode #newNoteButton, .offline-mode .option-item:not(:first-child), .offline-mode .account-options .delete, .offline-mode .option-item-divider, .offline-mode #mobileAddNew, .offline-mode #mobileNoteToolbarToggle, .offline-mode #sleepModeActivateButton{ display:none !important; } .offline-mode .alertify-tile-details-action{ opacity:0; pointer-events: none; } .offline-mode #settingsMenu #goOnlineButton{ display: flex; } /*////////////////////////////////////////////////////////////////*/ /*// TOOLTIP CSS /////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////*/ .tooltip {position: relative;} .tooltip .tooltiptext{ position: absolute; opacity:0; visibility: hidden; background-color: var(--color-gray-900); color: var(--color-white); top:calc(100% + 25px); white-space: nowrap; left:50%; width:150px; margin-left:-75px; box-sizing: border-box; font-weight: bold; text-align: center; border-radius: var(--border-radius); padding: 10px; font-size:14px; z-index: 10; transition: 0.15s ease; transform:scale(0.9); font-family:"Muli", sans-serif;} .tooltip:hover .tooltiptext{ opacity:1; visibility: visible; transition-delay:0.5s; transform:scale(1);} .tooltip .tooltiptext::after { content: ""; position: absolute; top: -15px; left:50%; margin-left: -8px; border-width: 8px; border-style: solid; border-color: transparent transparent var(--color-gray-900); } .tooltip .tooltiptext b{ opacity: 0.6; margin-left:7px; } .tip-short{ width:100px !important; margin-left:-50px !important; } .tip-right{ margin-left:0px !important; left:5px !important; } .tip-right::after, .tip-note::after { left:16px !important} .tip-right-side{ margin-left:20px !important; left:100% !important; top:0 !important; width:180px !important;} .tip-right-side::after { left:-8px !important; top:9px !important; transform:rotate(-90deg); } .tip-note{ white-space: pre-line !important; text-align: left !important; font-size: 13px !important; margin-left: 0px !important; left: 0px !important; top: calc(100% + 50px) !important; width:200px !important; transition-delay:0s !important; } .tip-left{ margin-left:0px !important; left:-150px !important; } .tip-left::after { left:auto !important; right:12px !important} .tip-above{ top: auto !important; bottom: 40px; } .tip-above::after { top:auto !important; bottom:-15px; transform:rotate(180deg) } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ALERTIFY CSS ////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify ::-webkit-scrollbar-thumb{ background-color: var(--color-gray-400);} .alertify{ display:flex; align-items:center; justify-content:center; z-index:100; color:var(--color-gray-800); background: rgba(26,32,44,0.4); } .alertify > * { top:0 !important; transform: none !important; } .alertify .dialog > * { border-radius: var(--border-radius); min-width: 475px; line-height:1.5; padding:2rem; max-height: 90vh; box-shadow: 0px 15px 35px rgba(45,55,72,0.5); overflow: auto; animation: var(--slide-down); -webkit-animation: var(--slide-down); -moz-animation: var(--slide-down); text-align: left !important; scrollbar-width: thin; } .alertify.wide-alertify .dialog > * { width: 750px; } .alertify.medium-wide-alertify .dialog > * { width: 650px; } .alertify.small-wide-alertify .dialog > * { width: 610px; } .alertify.narrow-alertify .dialog > * { width: 400px; min-width: 0; } .alertify.extra-narrow-alertify .dialog > * { width: 320px; min-width: 0; } .alertify .alert .msg, .alertify .dialog .msg{ padding:0; } .alertify p.msg{ margin:0 !important; color:var(--color-gray-700); font-size:16px; } .alertify input{ margin-top:1rem; margin-bottom:0 !important; padding:0.5rem 0 !important; font-size: 1rem !important;} .alertify h4{ margin-block-end: -0.5rem;} .alertify-logs>*, .alertify-logs>.default{ font-size:0.875rem; background:var(--color-primary-600); color:var(--color-primary-100); border-radius:var(--border-radius); font-weight:700; } .alertify-logs { z-index:101; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// ALERTIFY BUTTONS ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .alertify button{ line-height:unset !important; margin:2rem 0 0 !important; --color:var(--color-primary-600) !important; filter:none !important; border:none !important; font-weight:700 !important; text-transform: none !important; padding:0.75rem 1rem !important; font-size: 0.875rem !important; border-radius:var(--border-radius) !important; } .alertify button.ok{ background:var(--color-gray-800) !important; color:white !important; box-shadow: 1px 2px 4px rgba(42,67,101,0.5);} .alertify button.ok:hover{ background:var(--color-gray-900) !important; transform: translateY(1px); box-shadow: 1px 1px 3px rgba(42,67,101,0.5); } .alertify button.ok:active{ box-shadow:0 0 0 3px rgba(74,85,104,0.45); } .alertify button.cancel{margin-right:15px !important; background: var(--color-gray-200) !important; color:var(--color-gray-600) !important; } .alertify button.cancel:hover{ background: var(--color-gray-300) !important; color:var(--color-gray-700) !important; } .alertify button.cancel:active{ box-shadow:0 0 0 3px rgba(203,213,224,0.85); } .alertify.top-right-close-button button.ok{ transition: none; background:var(--color-gray-200) !important; color:var(--color-gray-500) !important; padding: 1rem 1.25rem !important; font-size:1.125rem !important; border-radius: 0 var(--border-radius) 0 12px !important; min-width: 0 !important; border: 0px solid white !important; border-width: 0 0 0.5rem 0.5rem !important; position: absolute !important; top: -20px !important; transform: translateX(-28px) !important; box-shadow: none !important; outline: none !important; height: 60px; width: 60px;} .alertify.top-right-close-button button.ok:hover{ color:var(--color-red-600) !important; background:var(--color-red-200) !important; } .alertify .show-text, .alertify a{ cursor:pointer; color:var(--color-gray-600) } .alertify .show-text:hover{ color:var(--color-gray-500) } .alertify .bottom-left-button-area { position:absolute; bottom:44px; background: var(--color-white); } .alertify .bottom-left-button { color: var(--color-gray-500); border: 2px solid var(--color-gray-300); padding: 0.75rem; margin-right: 0.25rem; display: inline-block; cursor:pointer; font-size:17px; border-radius: var(--border-radius); transition:0.2s ease-out; height: 45px; min-width: 45px; } .alertify .bottom-left-button:hover { color: var(--color-primary-600); border-color: var(--color-gray-800); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// UNLOCK MODAL (PASSWORD/PHRASE) CSS //////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .unlock-modal h2{ display:flex; align-items:center; } .unlock-modal h2 > div{ background:var(--color-gray-200); color:var(--color-gray-800); margin-right:15px; min-width:45px; height:45px; width:45px; border-radius:45px; display:flex; align-items:center; justify-content:center; font-size:16px; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// BACKUP KEY PROMPT CSS ///////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .backup-key-modal-row{ display:flex; padding:15px 0; cursor:pointer; margin-left: -30px; padding-left: 30px;} .backup-key-modal-row i{ color:var(--color-gray-500); margin-top: 8px; height: min-content; margin-right:0.75rem;} .backup-key-modal-row:hover{ background:var(--color-gray-200);} .backup-key-modal-row.selected i{ color:var(--color-primary-500); background:var(--color-primary-500); line-height: 0.78; vertical-align: unset;} .backup-key-modal-row.selected{ font-weight:bold; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// MISC CSS ////////////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #backToTop{ display: none; -webkit-tap-highlight-color: var(--color-transparent); position: fixed; background: rgba(42, 67, 101,0.5); color:#fff; bottom:0px; left:0px; z-index: 2; padding: 2.25rem 2rem 1rem 1rem; font-size: 1.25rem; font-weight: bold; border-radius: 0 150px 0px 0px; cursor: pointer;} #backToTop:hover{ opacity:0.75; } #dummyCopyElement{display: block; opacity: 0; position: absolute; top:0px; left:0px; width:1px; height:1px; font-size:1px; } #tileLogoSelection, #profPicSelection, #noteMediaFileSelection{ visibility: hidden; width:1px; display:none !important; } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE CSS ///////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ #turnOffDarkMode, .dark #turnOffDarkMode{ display:inline-block; } #turnOffDarkMode, .dark #turnOnDarkMode{ display:none; } .dark{ background: var(--color-gray-900); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE NAV ///////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .dark #nav .nav-icon:hover, .dark #settingsIcon:focus{ color:var(--color-white); } .dark #nav .nav-icon.selected{ color:var(--color-primary-400); } .dark #nav #filterButton, .dark #nav #searchBar i, .dark #nav .fa-angle-down{ color: var(--color-gray-100) !important; } .dark #nav #filterButton:hover, .dark #nav #filterButton:focus, .dark #filterContainer:hover #filterButton{ background:var(--color-gray-800); } .dark #nav #filterButton:focus{ border-color: var(--color-gray-700); } .dark #nav #profilePicture .tooltiptext{ background:var(--color-gray-700); } .dark #nav #profilePicture .tooltiptext:after { border-color: transparent transparent var(--color-gray-700); } .dark #nav #aIAssistantButton { color: var(--color-gray-400) !important; } .dark #nav #filterMenu{ box-shadow: 0px 15px 30px rgba(0,0,0,0.5), 0px 2px 4px rgba(0,0,0,0.5) } .dark #settingsMenu{ border-color:var(--color-white); box-shadow: 0px 15px 30px rgba(0,0,0,0.5), 0px 2px 4px rgba(0,0,0,0.5) } .dark #settingsMenu { box-shadow: 0px 15px 30px rgb(0 0 0 / 70%), 0px 2px 4px rgb(0 0 0 / 70%); background: var(--color-gray-750); } .dark #settingsMenu .settings-option { color: var(--color-gray-300); } .dark #settingsMenu .settings-option:hover { background: var(--color-gray-600); } .dark #settingsMenu .settings-option span { color:var(--color-gray-400); } .dark .settings-divider { background:var(--color-gray-600); } .dark #nav #searchInput{ color:var(--color-white); } .dark #nav #searchModule.searching #searchBar:before{ background:var(--color-gray-200); } .dark .clear-search{ opacity:0.55; } .dark #tileContainer::-webkit-scrollbar-thumb{ background-color: var(--color-gray-900);} .dark #tileContainer.scrolled-down::-webkit-scrollbar-thumb, .dark #notesList::-webkit-scrollbar-thumb{ background-color: var(--color-gray-700);} .dark #tileContainer::-webkit-scrollbar-thumb{ border-top:0.5rem solid var(--color-gray-900); } .dark #tileContainer{ border-color:var(--color-gray-900); } .dark #tileContainer.scrolled-down{ border-color:var(--color-gray-800); scrollbar-color: var(--color-gray-800) transparent; } .dark #desktopTileContainerTopGradient{ background: linear-gradient(to bottom, var(--color-gray-900), rgba(26,32,44,0));} /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE WEBSITE TILES /////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .dark .account-card{ background:var(--color-gray-800); border-color:var(--color-transparent); box-shadow:3px 9px 20px rgba(0,0,0,0.25) } .dark .account-card:hover{ border-color:var(--color-primary-400) !important; } .dark .account-card .account-row-2 { transform: translateY(-5px); } .dark .account-card .account-row-3{ color:var(--color-gray-100); } .dark .account-card .logo{ position: relative; height:44px; min-width: 44px; width:44px; } .dark .account-card .logo img{ background:var(--color-white); border:2px solid var(--color-white); position: relative; height:42px; width:42px; min-width:42px; } .dark .account-card .logo:before{ content:''; position: absolute; opacity:0.4; top:-6px; left:-6px; border:6px solid var(--color-gray-700); z-index:0; width:calc(100% + 12px); height:calc(100% + 12px); border-radius:60px; box-sizing: border-box; } .dark .account-row-1 i.fa-ellipsis-h{ color: var(--color-gray-600); } .dark .account-card:hover .account-row-1 .fa-ellipsis-h, .dark .account-row-1 .desktop-copy{ color: var(--color-primary-300); } .dark .account-row-1 i.fa-ellipsis-h:hover, .dark .account-row-1 .fa-clone:hover { color: var(--color-primary-300) !important; background: var(--color-gray-700); } .dark .account-card .favorite-account .favorite-icon{ background:var(--color-gray-800); transform: translate(6px, 4px); } .dark .account-card .account-row-2 .card-action{ color:var(--color-primary-400); } .dark .account-card .account-row-2 .card-action:hover { background: var(--color-gray-700);} .dark .account-card.example-tile .account-row-4 span { color: var(--color-gold-500); } .dark .account-card .account-row-4.context-menu{ color:var(--color-primary-100) !important; } .dark #addAccount .account-row-3{ color:var(--color-gray-400); } .dark #addAccount:hover .account-row-3{ color:var(--color-primary-400) !important; } .dark .account-options{ border:none; box-shadow: 0px 10px 20px rgba(0,0,0,0.4); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE NOTES SECTION //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .dark #noteContainerHeader { color: var(--color-primary-100); } .dark #sidePanelContainer > div { border-color:var(--color-primary-400); } .dark #newNoteButton { color: var(--color-primary-400); } .dark #newNoteButton:hover{ background: var(--color-primary-400); color: var(--color-gray-900); } .dark .note-list-item { color: var(--color-gray-500); } .dark .note-list-item:hover .note-list-name{ color: var(--color-primary-400); } .dark .note-list-icon {background:var(--color-gray-900); color: var(--color-gray-600); } .dark .note-list-icon:hover { color: var(--color-gray-400); background:var(--color-gray-800) } .dark .note-list-icon.delete{ border-color: var(--color-gray-900); } .dark .note-list-icon.delete:before{ background:linear-gradient(to right, var(--color-transparent), var(--color-gray-900), var(--color-gray-900)); } .dark .note-list-item.favorite-account .favorite-status:hover{ color: var(--color-gold-400); } body.dark:not(.mobile) .note-folder > .note-list-item:not(.note-folder-title) { border-color: var(--color-gray-700); } .dark #notesEmptyStateImageDark{ display:block; } .dark #notesEmptyStateImageLight{ display:none; } .dark #noteEmptyState div{color: var(--color-primary-400); } .dark #noteEmptyState span{ color: var(--color-gray-400); } .dark .tile-notification, .dark .tile-notification-count { color:var(--color-primary-400); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE NOTES SECTION //////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .dark #editAccount.note .modal, .dark #editAccount.note .modal .modal-mobile-header, .dark #editAccount.note #fullNoteFormatBar{ background: var(--color-gray-800) !important; } .dark #editAccount.note #editWebsiteHeader input { color: var(--color-gray-100); } .dark #editAccount.note #fullNoteContainer #noteArea, .dark #editAccount.note #noteArea strike, .dark #editAccount.note #noteArea h3, .dark #editAccount.note #noteArea p, .dark #editAccount.note #noteArea span, .dark #editAccount.note #noteArea font, .dark #editAccount.note #noteArea ol.nl li:before, .dark #editAccount.note #noteArea ul li::before, .dark #editAccount.note #noteArea td { color:var(--color-gray-300) !important; } .dark #editAccount.note #noteArea select, .dark #editAccount.note #noteArea input { border-color: var(--color-gray-600); color: var(--color-gray-100); } .dark #editAccount.note #noteArea a, .dark #editAccount.note #noteArea .hyperlink { color:var(--color-primary-400); } .dark #editAccount.note #noteArea span { background: none !important; } .dark #editAccount.note #noteArea hr { background: var(--color-gray-600); border-color: var(--color-gray-600); } .dark #editAccount.note #noteArea td, .dark #editAccount.note #noteArea table { border-color: var(--color-gray-700) !important; } .dark #editAccount.note #noteArea li.checked eitan-duedate { background:var(--color-gray-700); } .dark #editAccount.note #noteArea eitan-duedate { color: var(--color-gray-800); background: var(--color-gray-500); } .dark #editAccount.note #noteAreaTopGradient { background: linear-gradient(to bottom, var(--color-gray-800), var(--color-gray-800), var(--color-transparent)); } .dark #expandNoteEditorButton:hover, .dark #compressNoteEditorButton:hover { color: var(--color-primary-400); } .dark #editAccount.note #fullNoteContainer #noteArea::-webkit-scrollbar-thumb { background: var(--color-gray-800); border-color:var(--color-gray-800); } .dark #editAccount.note .modal:hover #fullNoteContainer #noteArea::-webkit-scrollbar-thumb { background:var(--color-gray-700); } /*////////////////////////////////////////////////////////////////////////////////////////////////*/ /*// DARK MODE MODALS ////////////////////////////////////////////////////////////////////////////*/ /*////////////////////////////////////////////////////////////////////////////////////////////////*/ .dark .modal-container, .dark .alertify{ background: rgba(26,32,44,0.75); } .dark #editAccount.note .modal:before{ background:#191f2a; } .dark .modal{ box-shadow: 0px 4px 10px rgba(0,0,0,0.4), 0px 10px 50px rgba(0,0,0,0.5); } .dark #backToTop{ background: rgba(74,85,104,0.5); }