/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* END reset */ /* START Micro ClearFix */ .cf:before, .cf:after { content: ""; display: table } /* For modern browsers */ .cf:after { clear: both } .cf { zoom: 1 } /* For IE 6/7 (trigger hasLayout) */ /* END Micro ClearFix */ /* material-icons-regular - latin */ @font-face { font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url('/static/fonts/material-icons/material-icons-v140-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* material-icons-outlined-regular - latin */ @font-face { font-display: block; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Material Icons Outlined'; font-style: normal; font-weight: 400; src: url('/static/fonts/material-icons/material-icons-outlined-v109-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .material-icons-outlined { font-family: 'Material Icons Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } B { font-weight: 500; } /* ------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------ */ /* noto-sans-display-100 - latin_latin-ext */ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 100;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-100.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* noto-sans-display-200 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 200;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-200.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* noto-sans-display-300 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 300;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-300.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* noto-sans-display-regular - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 400;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-regular.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* noto-sans-display-500 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 500;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-500.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* noto-sans-display-600 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Noto Sans Display';*/ /* font-style: normal;*/ /* font-weight: 600;*/ /* src: url('/static/fonts/noto-sans-display/noto-sans-display-v20-latin_latin-ext-600.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /* ------------------------------------------------------------------------------------ */ /* poppins-100 - latin_latin-ext */ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 100;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-100.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* poppins-200 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 200;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-200.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* poppins-300 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 300;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-300.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* poppins-regular - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 400;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-regular.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* poppins-500 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 500;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-500.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /*!* poppins-600 - latin_latin-ext *!*/ /*@font-face {*/ /* font-display: swap; !* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. *!*/ /* font-family: 'Poppins';*/ /* font-style: normal;*/ /* font-weight: 600;*/ /* src: url('/static/fonts/poppins/poppins-v20-latin_latin-ext-600.woff2') format('woff2'); !* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ *!*/ /*}*/ /* ------------------------------------------------------------------------------------ */ /* #### Generated By: http://www.cufonfonts.com #### */ /*@font-face {*/ /* font-family: 'Product Sans Regular';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Regular.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Italic.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Thin Regular';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Thin.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Light Regular';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Light.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Medium Regular';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Medium.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Black Regular';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Black.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Thin Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-ThinItalic.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Light Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-LightItalic.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Medium Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-MediumItalic.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Bold';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-Bold.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Bold Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-BoldItalic.woff') format('woff');*/ /*}*/ /*@font-face {*/ /* font-family: 'Product Sans Black Italic';*/ /* font-style: normal;*/ /* font-weight: normal;*/ /* font-display: swap;*/ /* src: url('/static/fonts/google-sans/ProductSans-BlackItalic.woff') format('woff');*/ /*}*/ /* ------------------------------------------------------------------------------------ */ lite-youtube { background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; max-width: 720px; } /* gradient */ lite-youtube::before { content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); } /* responsive iframe with a 16:9 aspect ratio thanks https://css-tricks.com/responsive-iframes/ */ lite-youtube::after { content: ""; display: block; padding-bottom: calc(100% / (16 / 9)); } lite-youtube > iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0; } /* play button */ lite-youtube > .lty-playbtn { display: block; width: 68px; height: 48px; position: absolute; cursor: pointer; transform: translate3d(-50%, -50%, 0); top: 50%; left: 50%; z-index: 1; background-color: transparent; /* YT's actual play button svg */ background-image: url('data:image/svg+xml;utf8,'); filter: grayscale(100%); transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: none; } lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus { filter: none; } /* Post-click styles */ lite-youtube.lyt-activated { cursor: unset; } lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn { opacity: 0; pointer-events: none; } .lyt-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } /* ------------------------------------------------------------------------------------ */ div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-color:#fff transparent transparent}div#driver-popover-item .driver-popover-tip.bottom.position-center{left:49%}div#driver-popover-item .driver-popover-tip.bottom.position-right{right:20px}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-color:transparent #fff transparent transparent}div#driver-popover-item .driver-popover-tip.left.position-center{top:46%}div#driver-popover-item .driver-popover-tip.left.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-color:transparent transparent transparent #fff}div#driver-popover-item .driver-popover-tip.right.position-center{top:46%}div#driver-popover-item .driver-popover-tip.right.position-bottom{top:auto;bottom:20px}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-color:transparent transparent #fff}div#driver-popover-item .driver-popover-tip.top.position-center{left:49%}div#driver-popover-item .driver-popover-tip.top.position-right{right:20px}div#driver-popover-item .driver-popover-tip.mid-center{display:none}div#driver-popover-item .driver-popover-footer{display:block;margin-top:10px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:grey;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group,div#driver-popover-item .driver-popover-footer .driver-close-only-btn{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-clearfix:after,.driver-clearfix:before{content:"";display:table}.driver-clearfix:after{clear:both}.driver-stage-no-animation{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important}div#driver-highlighted-element-stage,div#driver-page-overlay{top:0;left:0;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}div#driver-highlighted-element-stage{position:absolute;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;-webkit-filter:none!important;-moz-filter:none!important;-ms-filter:none!important;-o-filter:none!important;filter:none!important;-webkit-perspective:none!important;-moz-perspective:none!important;-ms-perspective:none!important;-o-perspective:none!important;perspective:none!important;-webkit-transform-style:flat!important;-moz-transform-style:flat!important;-ms-transform-style:flat!important;transform-style:flat!important;-webkit-transform-box:border-box!important;-moz-transform-box:border-box!important;-ms-transform-box:border-box!important;-o-transform-box:border-box!important;transform-box:border-box!important;will-change:unset!important} /* ------------------------------------------------------------------------------------ */ HTML { height: 100%; } .nobg { background: none; } BODY { margin: 0px; font-size: 14px; font-weight: normal; color: #314861; font-family: "Roboto"; line-height: 20px; } A { font-family: "Roboto"; font-weight: 500; font-size: 14px; color: #297BE6; text-decoration: none; } A:hover { text-decoration: underline; } A:visited { color: #297BE6; } EM { font-style: italic } STRONG { font-weight: bold } SMALL { font-size: 0.688px } H1 { font-size: 1.875em; border-bottom: 0px dotted #555 } H2 { font-size: 1.250em; } .mt10 { margin-top: 10px } .mt20 { margin-top: 20px } .mt30 { margin-top: 30px } .mb10 { margin-bottom: 10px } .mb20 { margin-bottom: 20px } .mb30 { margin-bottom: 30px } .pt10 { padding-top: 10px } INPUT[type=checkbox] { position: relative; top: 1px } INPUT[type=text], INPUT[type=password], INPUT[type=search], INPUT[type=number]:not(.cur-year):not(.flatpickr-hour):not(.flatpickr-minute), TEXTAREA, SELECT:not(.flatpickr-monthDropdown-months) { box-sizing: border-box; border-radius: 3px; border-width: 1px; box-shadow: inset 0px 1px 2px #DDD; height: 44px; outline: none; font-family: "Roboto", sans-serif; font-size: 15px; color: #666; border-top: 1px solid #DDD; border-left: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF; border-bottom: 1px transparent; padding-left: 10px; padding-right: 3px; resize: none; margin: 0; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #BBB; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #BBB; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #BBB; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #BBB; } SELECT { padding-right: 0px; height: 28px } .tr { transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; -o-transition: all 0.25s; -ms-transition: all 0.25s; } .nosel { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .scale0 { transform: scale(0, 0); transition-timing-function: ease-in; } .wrap { word-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -o-hyphens: auto; hyphens: auto; } .break { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .left { float: left } .right { float: right } /* width */ .styledScrollbar::-webkit-scrollbar { width: 8px; height: 8px; border-radius: 20px; } /* button */ .styledScrollbar::-webkit-scrollbar-button { display: none; } /* Handle */ .styledScrollbar::-webkit-scrollbar-thumb { background: #D1D6DF; border-radius: 20px; } /* Handle on hover */ .styledScrollbar::-webkit-scrollbar-thumb:hover { background: #666; } /* Track */ .styledScrollbar::-webkit-scrollbar-track { background: #F3F5F9; } /* The track NOT covered by the handle.*/ .styledScrollbar::-webkit-scrollbar-track-piece { /*background: red;*/ } /* Corner */ .styledScrollbar::-webkit-scrollbar-corner { background: white; } /* Resizer */ .styledScrollbar::-webkit-resizer { background: #111; } /*---------------------------------------------------------------------------------------*/ :root { --gmail-yellow: #fff1d1; --gmail-green: #34A853; --gmail-red: #C5221F; --gmail-blue: #297BE6; --light-blue: #73a2ec; } #container { width: 500px; margin: 0 auto; padding: 20px; } #container .logo { text-align: center; } UL { list-style-type: disc; } LI { margin-left: 20px; margin-top: 10px; } .button { outline: 1px solid transparent; border: none; display: inline-block; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 13px; font-weight: 400; color: white !important; padding: 8px 16px; line-height: 18px; background-color: #297BE6; text-decoration: none; letter-spacing: 0.5px; border-radius: 4px; } .button.large { font-family: 'Roboto'; font-size: 14px; font-weight: 500; } .button:not([disabled]):hover { text-decoration: none; box-shadow: 0 1px 2px 0 rgb(26 115 232 / 45%), 0 1px 3px 1px rgb(26 115 232 / 30%) !important; opacity: 0.85; } .button[disabled] { background-color: #CCC; } #privacy { padding: 50px; } #privacy UL { margin-bottom: 10px; } #privacy LI { margin-top: 0px; } #privacy LI > P { margin-bottom: 2px; } #privacy H1 { margin: 20px 0; line-height: 30px; font-size: 1.875em; font-weight: 500; } #privacy H2 { margin: 20px 0px; line-height: 30px; font-size: 1.875em; } #privacy H3 { margin: 20px 0px 8px 0px; font-size: 18px; } #privacy H4 { font-weight: 500; } #privacy P { margin-bottom: 10px; } #privacy STRONG { font-weight: 500; } .generalLogo { text-align: center; margin-top: 45px; margin-bottom: 0px; } #webContainer { width: 1100px; margin: 0 auto; color: #666; font-weight: 300; font-size: 14px; padding: 0 30px; } #webContainer STRONG { font-weight: 400; } #webContainer .logo { width: 300px; height: 300px; background: url('/static/images/logo.webp') no-repeat center; background-size: contain; } #webContainer .content { margin-top: 50px; } #webContainer .content .main, #webContainer .content .mainl { display: flex; } #webContainer .content .main .l { padding-right: 65px; } #webContainer .content .main .r { margin-right: 40px; } #webContainer .content .signin { margin-top: 25px; float: left; } .g_id_signin { height: 44px; width: 200px; overflow: hidden; } .g_id_signin IFRAME { width: 220px !important; height: 44px !important; } #webContainer .content .main .title { font-family: 'Roboto', sans-serif; font-size: 61px; color: #000000; line-height: 74px; padding-top: 42px; } #webContainer .content .main H2.title { font-family: 'Roboto', sans-serif; font-size: 48px; line-height: 60px; padding-top: 65px; } #webContainer .content .desc { font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 300; line-height: 30px; padding-top: 10px; width: 100%; } #webContainer .content .desc.ja { font-size: 19px; } #signedInButton { border-radius: 4px; border: 1px solid #d2e3fc; box-sizing: border-box; color: #3c4043; cursor: default; font-family: 'Roboto'; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; box-shadow: none; overflow: hidden; padding: 0 8px; position: relative; text-align: center; vertical-align: middle; white-space: nowrap; background-color: rgba(66, 133, 244, 0.1); background-image: none; display: flex; } #signedInButton .userpic { width: 20px; height: 20px; border-radius: 50%; margin-top: 9px; } #signedInButton .glogo { width: 18px; margin-top: 9px; } #signedInButton .glogo SVG { display: block; } #signedInButton .text { font-family: 'Roboto'; font-size: 12px; font-weight: 500; padding: 7px 8px 0px 8px; text-align: left; } #signedInButton .text .name { line-height: 12px; max-width: 200px; } #signedInButton .text .email { color: #5f6368; font-size: 11px; line-height: 15px; font-weight: 400; max-width: 200px; } #signedInButton .text .email A { font-weight: 500 !important; font-size: 11px !important; padding-left: 2px; } .clipart1 { width: 300px; height: 300px; background-position: center; background-size: contain; background-repeat: no-repeat; } .clipart2 { width: 300px; height: 300px; background-position: center; background-size: contain; background-repeat: no-repeat; } .clipart3 { width: 300px; height: 500px; background-size: contain; background-position: center 10px; background-repeat: no-repeat; position: relative; } .clipart3 SPAN { display: block; position: absolute; top: 53px; width: 100%; text-align: center; color: white; font-size: 2vw; font-family: "Roboto", sans-serif; font-weight: 300; } .clipart4 { width: 300px; height: 400px; background-position: center; background-size: contain; background-repeat: no-repeat; } .clipart5 { width: 300px; height: 300px; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 50%; } .clipart6 { width: 300px; height: 300px; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 50%; } .clipart7 { width: 300px; height: 300px; background-position: left -10px; background-size: contain; background-repeat: no-repeat; } .clipart8 { width: 200px; height: 200px; background-position: left -10px; background-size: contain; background-repeat: no-repeat; margin-top: 56px; } .clipart9 { width: 200px; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-top: 56px; } .clipart10 { width: 240px; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-top: 10px; } .clipart11 { width: 240px; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-top: 32px; } #webContainer { padding-bottom: 200px; } #webContainer .content .mainl .title, #webContainer .paynow .title { font-family: 'Roboto', sans-serif; font-size: 48px; color: #000000; line-height: 60px; padding-top: 65px; } #webContainer .paynow .title { font-size: 37px; padding-top: 80px; } #webContainer .paynow .desc { } #webContainer .paynow .desc A { font-size: 20px; font-weight: 200; } .paynow { display: none; } #webContainer .content .main A, #webContainer .content .mainl A { font-size: 20px; font-weight: 200; } #webContainer .content .mainl .l { padding-right: 50px; } #webContainer .content .mainl.followup { margin-top: 80px; } #webContainer .content .main.merge { margin-top: 80px; } #webContainer .content .main.notifications { margin-top: 80px; } #webContainer .content .mainl.schedule { margin-top: 80px; } #webContainer .content .main.compatibility { margin-top: 80px; } #webContainer .content .mainl.privacy { margin-top: 80px; } #webContainer .content .main.contact { margin-top: 80px; } #webContainer .content .main.download { margin-top: 80px; } #webContainer .content .main.phones { margin-top: 80px; } #webContainer .content .main.download .button { margin-bottom: 5px; width: 250px; } #webContainer .content .main.download .button IMG, .button.store IMG { width: 30px; max-height: 30px; vertical-align: top; float: right; } #webContainer .content .main.download .button SPAN, .button.store SPAN { display: inline-block; padding-top: 5px; margin-right: 13px; font-size: 17px; font-weight: 400; } #webContainer .content .mainl.plansinclude { margin-top: 100px; } #webContainer .content .mainl.plansinclude .r { padding-left: 40px; } #webContainer .content .mainl.plansinclude LI .tag { display: inline-block; background-color: var(--gmail-blue); color: white; text-align: center; width: 50px; border-radius: 3px; font-size: 15px; font-weight: 500; margin-right: 2px; } #webContainer .content .mainl.plansinclude UL { list-style-type: none; } #webContainer .content .mainl.plansinclude LI { margin-left: 0; } #webContainer .content .mainl.plansinclude LI .min { font-size: 12px; display: inline-block; position: relative; top: -10px; font-style: italic; } #webContainer .content .main.video { margin-top: 80px; } #webContainer .content .main.video .title { padding-top: 0px !important; } #webContainer .content .main.video .l { padding-right: 35px !important; } #webContainer .content .main.video LITE-YOUTUBE, #webContainer .content .main.video IFRAME { width: 1060px; height: 596px; border: 10px solid black; border-radius: 20px; max-width: unset; } #webContainer .content .steps LITE-YOUTUBE { width: 430px; height: 242px; border: 10px solid black; border-radius: 20px; max-width: unset; } #webContainer .content .main.video IFRAME, #started IFRAME, #webContainer .content .steps IFRAME { border-width: 0px !important; border-radius: 0px !important; } #started LITE-YOUTUBE, #started IFRAME { width: 1060px; height: 596px; border: 10px solid black; border-radius: 20px; margin-top: 20px; max-width: unset; display: block; } #started IFRAME { margin-top: 0; } TABLE.comp { font-family: 'Roboto', sans-serif; border-collapse: separate; /*border: 1px solid #f2f2f2;*/ margin-top: 30px; margin-left: auto; margin-right: auto; border-radius: 6px; } TABLE.comp.common { margin-left: initial; margin-right: initial; } TABLE.comp THEAD { background-color: var(--gmail-blue); color: white; font-size: 18px; line-height: 21.6px; } TABLE.comp THEAD TH { padding-top: 19px; padding-bottom: 19px; text-align: center; } TABLE.comp THEAD TH:nth-child(2) { width: 90px; } TABLE.comp THEAD TH:nth-child(3) { width: 80px; } TABLE.comp TBODY { font-size: 15px; line-height: 18px; } TABLE.comp TBODY TD, TABLE.comp TBODY TH { color: #666; padding-top: 17px; padding-bottom: 17px; border-bottom: 1px solid #f2f2f2; } TABLE.comp TBODY TD:first-child, TABLE.comp TBODY TH { padding-left: 25px; border-left: 1px solid #f2f2f2; text-align: left; } TABLE.comp TBODY TD:nth-child(2) { text-align: center; } TABLE.comp TBODY TD:nth-child(3) { text-align: center; } TABLE.comp TBODY TD:nth-child(4) { text-align: center; } TABLE.comp THEAD TH:first-child { border-top-left-radius: 6px; } TABLE.comp THEAD TH:last-child { border-top-right-radius: 6px; } TABLE.comp TBODY TR:last-child TD:first-child, TABLE.comp TBODY TR:last-child TH:first-child { border-bottom-left-radius: 6px; } TABLE.comp TBODY TR:last-child TD:last-child { border-bottom-right-radius: 6px; } TABLE.comp TBODY TD:last-child { background-color: #FFF1D1; } TABLE.comp .button { font-family: 'Roboto', sans-serif; font-weight: 500 !important; font-size: 14px !important; letter-spacing: 0.2px; box-sizing: border-box; width: 100%; } TABLE.comp TFOOT TD { text-align: center; } TABLE.comp .limit { text-align: left; font-size: 12px; line-height: 15px; vertical-align: middle; padding-left: 6px; } TABLE.comp.common .limit { padding-top: 8px; } TABLE.comp I.new { color: var(--gmail-red); vertical-align: bottom; position: relative; top: 3px; } TABLE.comp.generic TD { background-color: #FEFEFE !important; padding: 20px; text-align: center; vertical-align: middle; } TABLE.comp.generic TD:last-child { border-right: 1px solid #f2f2f2; } TABLE.comp A { font-family: "Roboto", sans-serif; font-size: 15px !important; font-weight: 300 !important; } #webContainer .content .mainl.payments { margin-top: 30px; } #webContainer .content .mainl.payments .title { padding-top: 0px; } #webContainer .content .mainl.phones { margin-top: 80px; } #webContainer H2.planHeader { margin-top: 120px; margin-bottom: 60px; text-align: center; font-size: 30px; color: black; } #webContainer .plans { display: flex; } #webContainer .plan { margin-top: 20px; width: 30%; margin-right: 5%; border-radius: 4px; text-align: center; font-family: 'Roboto', sans-serif; box-shadow: 0 1px 4px 0 rgb(34 46 58 / 15%); box-sizing: border-box; padding: 20px; position: relative; background-image: linear-gradient(to right top, #ffffff, #f5f5f5); } #webContainer .plan:hover { box-shadow: 0 8px 16px 0 rgb(34 46 58 / 15%); } #webContainer .plan .freq { height: 40px; display: inline-block; margin-top: 20px; position: relative; } #webContainer .plan .freq .inner { display: inline-block; background-color: #E8EBF0; line-height: 40px; padding: 0 20px; font-weight: 500; position: relative; color: #222e3a; } #webContainer .plan .freq .inner:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 8px 0 0; border-color: #e8ebf0 #0000 #0000 #0000; position: absolute; right: -8px; top: 0; z-index: 2; } #webContainer .plan .freq .inner:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 0 0 8px; border-color: #0000 #0000 #0000 #e8ebf0; position: absolute; right: -8px; top: 20px; z-index: 2; } #webContainer .plan .freq:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 8px 20px 0; border-color: #0000 #e8ebf0 #0000 #0000; position: absolute; left: -8px; top: 0; } #webContainer .plan .freq:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 8px; border-color: #0000 #0000 #e8ebf0 #0000; position: absolute; left: -8px; top: 20px; } #webContainer .plan.p6 { margin-right: 0; } #webContainer .plan .price { margin-top: 70px; } #webContainer .plan .price .currency, #webContainer .plan .price .period, #webContainer .plan .price .change { font-size: 22px; display: inline-block; position: relative; top: -10px; } #webContainer .plan .price .currency { padding-right: 10px; } #webContainer .plan .price .period { padding-left: 5px; font-size: 18px; } #webContainer .plan .price .change { font-size: 28px; top: 0; color: #222e3a; } #webContainer .plan .amount { color: #222e3a; font-size: 68px; margin-top: 10px; } #webContainer .plan .billing { margin-top: 14px; color: #999; font-weight: 300; } #webContainer .plan .premiumsel { margin-top: 20px; color: #000; font-weight: 400; } #webContainer .plan .addnote { font-size: 12px; color: #999; } #webContainer .plan .addnote A { font-weight: 400; font-size: 12px; font-family: 'Roboto', sans-serif; } INPUT[type="checkbox"].styled { /* remove standard background appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* create custom radiobutton appearance */ display: inline-block; width: 14px; height: 14px; padding: 2px; /* background-color only for content */ background-clip: content-box; border: 1px solid black; background-color: transparent; border-radius: 2px; margin: 3px 3px 0px 5px; top: 2px; } INPUT[type="checkbox"].styled:active, LABEL:active INPUT[type="checkbox"] { background-color: #CCC !important; } /* appearance for checked radiobutton */ INPUT[type="checkbox"].styled:checked { background-color: #297BE6; } .plan.preferred INPUT[type="checkbox"].styled { border: 1px solid white; } .plan.preferred INPUT[type="checkbox"].styled:checked { background-color: white; } #webContainer .plan .savings { display: inline-block; background-color: #E8EBF0; line-height: 40px; padding: 0 20px; font-weight: 500; position: relative; color: #222e3a; border-radius: 4px; position: relative; top: -50px; } #webContainer .plan.preferred .savings { background-color: var(--gmail-red); color: white; } #webContainer .plan.preferred.lowprio .savings { background-color: var(--light-blue); color: white; } #webContainer .plan.preferred.lowprio .savings:before { border-color: var(--light-blue) #0000 #0000 #0000; } #webContainer .plan.preferred .savings:before { border-color: var(--gmail-red) #0000 #0000 #0000; } #webContainer .plan .savings:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0; border-color: #e8ebf0 #0000 #0000 #0000; } #webContainer .plan .action { padding-top: 20px; position: relative; } #webContainer .plan.preferred { background-image: linear-gradient(to right top, #549cfd, #004ab6); color: white; transform: scale(1.08) translateZ(0); backface-visibility: hidden; -webkit-font-smoothing: subpixel-antialiased; } #webContainer .plan.preferred.lowprio { background-image: linear-gradient(to right top, #ffffff, #d0e5ff); color: #666; } #webContainer .plan.preferred:not(.lowprio) .premiumsel { color: white; } #webContainer .plan.preferred:not(.lowprio) .addnote { color: white; font-weight: 200; } #webContainer .plan.preferred:not(.lowprio) .addnote A { color: white; font-weight: 400; font-size: 12px; font-family: 'Roboto', sans-serif; } #webContainer .plan.preferred:not(.lowprio) .price .amount, #webContainer .plan.preferred:not(.lowprio) .price .change { color: white; } #webContainer .plan.preferred:not(.lowprio) .billing { font-weight: 200; color: white; } #webContainer .plan.preferred .freq .inner { background-color: var(--light-blue); color: white; } #webContainer .plan.preferred .freq .inner:before { border-color: var(--light-blue) #0000 #0000 #0000; right: -7px; } #webContainer .plan.preferred .freq .inner:after { border-color: #0000 #0000 #0000 var(--light-blue); right: -7px; } #webContainer .plan.preferred .freq:before { border-color: #0000 var(--light-blue) #0000 #0000; left: -7px; } #webContainer .plan.preferred .freq:after { border-color: #0000 #0000 var(--light-blue) #0000; left: -7px; } #webContainer .plan .button { font-family: Roboto; padding: 10px 25px; } #webContainer .plan.preferred .button { background-color: var(--gmail-red); transition: all 0.25s; } #webContainer .plan.preferred .button:hover { background-color: #d7211e; opacity: 1; } #webContainer .plan .button[disabled] { background-color: #CCC; box-shadow: none !important; cursor: default; opacity: 1; } #webContainer .plan .button[disabled]:hover { background-color: #CCC; } #topbar { width: 1100px; margin: 0 auto; } #topbar UL { float: right;; list-style-type: none; margin-top: 20px; } #topbar LI { float: left; } #topbar A { color: #666; font-weight: 400; margin-left: 15px; } .action I { font-size: 45px; position: absolute; bottom: 0; margin-left: 10px; color: var(--gmail-green); text-shadow: 2px 0px 0px white; display: none; } .preferred:not(.lowprio) .action I { color: white; text-shadow: none; } .paynow { text-align: center; } .plans .action .wrapperButton { display: inline-block; } .tippy-content { font-size: 13px; font-weight: 300; font-family: 'Roboto', sans-serif; overflow: hidden; word-wrap: break-word; } #webContainer .content .success, #webContainer .content .section { margin-top: 100px; font-size: 25px; } #webContainer .content .success .icon, #webContainer .content .section .icon { color: var(--gmail-green); font-size: 62px; float: left; } #webContainer .content .section .icon { font-size: 65px; } #webContainer .content .success .text, #webContainer .content .section .text { padding-left: 85px; line-height: 32px; } #webContainer .content .section .secondLine, #webContainer .success .secondLine { font-size: 18px; } #webContainer .content .section .secondLine A, #webContainer .success .secondLine A { font-size: 18px; font-weight: 400; } #webContainer .content .success .text .tag, #webContainer .content .section .tag { display: inline-block; background-color: var(--gmail-blue); color: white; border-radius: 3px; padding: 5px 10px; font-size: 16px; position: relative; top: -2px; line-height: normal; } #webContainer .content .section .tag { text-transform: uppercase; } #webContainer .content .section .tag.red { background-color: var(--gmail-red); } .icon.red { color: var(--gmail-red) !important; } .icon.blue { color: var(--gmail-blue) !important; } .icon.yellow { color: var(--gmail-yellow) !important; } .icon.green { color: var(--gmail-green) !important; } .icon.gold { color: #F0C41B !important; } .invoices { padding-left: 85px; margin-top: 30px; font-size: 20px; } .invoices TABLE I { vertical-align: top; } .invoices TD { padding: 10px 20px 10px 0px; } .invoices TD:nth-child(2) { font-size: 16px; padding: 10px 0px 10px 15px; color: #777; } .invoices TD:last-child { padding: 10px 0px 10px 50px; } .invoices TD:last-child A:last-child { margin-left: 20px; } .invoices A { font-size: 16px; font-weight: 200; } .invoices A:hover I { opacity: 0.75; } FOOTER { width: 1100px; margin: 0 auto; text-align: center; padding-bottom: 50px; font-size: 16px; font-weight: 200; } FOOTER A { font-size: 16px; font-weight: 200; } .chromestore { float: left; margin-top: 16px; display: block; margin-left: 20px; } #continue { display: inline-block; width: 191px; height: 46px; background-image: url('/static/images/btn_google_signin_light_normal_web.png'); background-size: contain; background-repeat: no-repeat; vertical-align: middle; position: relative; top: -1px; outline: none; } #continue:focus { background-image: url('/static/images/btn_google_signin_light_focus_web.png'); } #continue:active { background-image: url('/static/images/btn_google_signin_light_pressed_web.png'); } #mailEdit { margin: 20px; padding: 20px; background-color: #F9F9F9; border-bottom: 20px solid white; } #mailEdit .header { display: flex; flex-direction: row; align-items: center; } #mailEdit .header .title { font-size: 20px; } #mailEdit .header .title .desc { font-size: 14px; margin-top: 5px; } #mailEdit .logo { width: 60px; height: 60px; background: url('/static/images/logo.webp') no-repeat center; background-size: contain; margin-right: 20px; } #mailEdit #editForm { margin-top: 25px; } #mailEdit H2 { font-size: 28px; font-weight: 400; } #editForm TABLE { width: 100%; margin-top: 20px; } #editForm TABLE TD { vertical-align: middle; padding-bottom: 20px; } #editForm TABLE TD:first-child { padding-right: 20px; width: 100px; } #editForm INPUT[type="text"], #editForm INPUT[type="number"] { width: 100%; } #editForm INPUT[type="radio"] { margin-left: 0; } #editForm TEXTAREA { width: 100%; height: 100px; resize: vertical; } #editForm H2 { margin-bottom: 40px; margin-top: 20px; border-bottom: 1px dotted #555; padding-bottom: 10px; } #editForm .tags { margin-top: 3px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } #editForm .tag { box-sizing: border-box; background-color: var(--gmail-blue); color: white; border-radius: 3px; padding: 5px 2px 5px 7px; font-size: 12px; line-height: normal; height: 24px; display: flex; flex-direction: row; align-items: center; margin-right: 5px; margin-top: 5px; } #editForm .tag.invalid { background-color: var(--gmail-red); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9); } #editForm .tag .text { display: block; max-width: 200px; } #editForm .tag .remove { margin-left: 5px; cursor: pointer; border-radius: 2px; } #editForm .tag .remove:hover { background-color: white; } #editForm .tag I { font-size: 20px; float: left; } #editForm .tag .remove:hover I { color: var(--gmail-blue); } #editForm .tag.invalid .remove:hover I { color: var(--gmail-red); text-shadow: none; } #editForm .tags.att .tag { cursor: pointer; } #editForm .note, #sheetsPicker .note, #csvDatesImport .note{ font-size: 12px; color: #777; margin-bottom: 3px; } #editForm .sets { font-size: 12px; color: #777; margin-bottom: 5px; } #editForm .sets A { font-size: 12px; } #editForm .edit I { vertical-align: middle; font-size: 18px; position: relative; top: -1px; } #editForm .edit-rec:not(.editable) .note, #editForm .edit-rec:not(.editable) .sets, #editForm .edit-rec:not(.editable) TEXTAREA { display: none; } #editForm .edit-rec.editable .edit { display: none; } #editForm .edit-rec TD:first-child { padding-top: 8px; } #addAtt I { vertical-align: middle; position: relative; top: -2px; } #editForm .button { width: auto; } .uploadProgress { margin-top: 8px; width: 200px; vertical-align: top; display: inline-block; background-color: bisque; border-radius: 2px; visibility: hidden; } .uploadProgress .progressBar { height: 5px; background-color: var(--gmail-red); width: 0%; border-radius: 2px; } .withCalendar { display: flex; flex-direction: row; align-items: center; } #calendarTrigger, #calendarTrigger_Until { width: 35px; margin-right: 5px; cursor: pointer; } #shortcuts { margin-bottom: 15px; } #shortcuts A { } .smallprint { font-size: 11px; color: #999999; font-style: italic; padding-top: 3px; padding-bottom: 6px; line-height: 13px; } .recurEveryCont { display: flex; flex-direction: row; align-items: center; font-size: 13px; } .recurEveryCont:not(:last-child) { margin-bottom: 10px; } .recurEveryCont SPAN:first-child { width: 90px; } .recurEveryCont SPAN:last-child { padding-left: 10px; white-space: nowrap; } #daysRec, #monthlyDayWhichRec { margin: 0 7px !important; } #monthlyDayRec { margin: 0 7px 0 0 !important; } #recTime { width: 90px !important; margin-left: 7px !important; } .summary { font-size: 14px; font-style: italic; color: #555; padding-left: 0px; } .summaryImp { font-size: 16px; font-weight: 500; margin-top: 15px; margin-bottom: 15px; padding-left: 40px; } .summaryImp.error { color: var(--gmail-red); } .summaryImp.rec { min-height: 24px; } .summaryImp.rec SPAN { margin-right: 25px; } .summaryImp.sch I { vertical-align: middle; color: var(--gmail-red); position: relative; top: -2px; margin-right: 3px; } .summaryImp.sch .local { font-weight: 400; font-size: 14px; margin-top: 10px; } .summaryImp.sch .local B { font-weight: 500; } #messageModal, #skipDatePicker, #feedbackModal, #stripeModal, #confirmSubModal, #sheetsPicker, #dataViewer, #csvDatesImport, #bulkRecipients, #bulkSendAs, #bulkBody { width: 100%; height: 100%; top: 0; left: 0; position: fixed; background: rgba(32, 33, 36, 0.6); z-index: 100; font-family: 'Roboto', sans-serif; display: none; backdrop-filter: blur(8px); } #messageModal STRONG, #skipDatePicker STRONG, #feedbackModal STRONG, #confirmSubModal STRONG, #sheetsPicker STRONG, #dataViewer STRONG, #csvDatesImport STRONG, #bulkRecipients STRONG, #bulkSendAs STRONG, #bulkBody STRONG { font-weight: 500; } #messageCont, #skipDatePickerCont, #feedbackModalCont, #stripePayCont, #confirmSubCont, #sheetsPickerCont, #dataViewerCont, #csvDatesImportCont, #bulkRecipientsCont, #bulkSendAsCont, #bulkBodyCont { width: calc(100% - 40px); max-width: 500px; max-height: calc(100% - 200px); position: fixed; left: 50%; top: 50%; background-color: white; border-radius: 4px; outline: none; box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%), 0px 1px 5px 0px rgb(0 0 0 / 20%); transform: translateX(-50%) translateY(-50%); } #bulkRecipientsCont, #bulkSendAsCont { max-width: 700px; } #bulkBodyCont { max-width: calc(100% - 200px); } #messageTitle, #skipDatePickerTitle, #feedbackModalTitle, #confirmSubTitle, #sheetsPickerTitle, #dataViewerTitle, #csvDatesImportTitle, #bulkRecipientsTitle, #bulkSendAsTitle, #bulkBodyTitle { -webkit-font-smoothing: antialiased; font-size: 1.375rem; color: #212121; line-height: 24px; padding: 24px 24px 16px 24px; } #messageTitle I { color: var(--gmail-red); margin-left: 5px; vertical-align: top; position: relative; top: -1px; display: none; } #messageTitle.error I { display: inline; } #messageContent, #skipDatePickerContent, #feedbackModalContent, #confirmSubContent, #sheetsPickerContent, #dataViewerContent, #csvDatesImportContent, #bulkRecipientsContent, #bulkSendAsContent, #bulkBodyContent { -webkit-font-smoothing: antialiased; font-size: .875rem; letter-spacing: .2px; color: #5F6368; padding: 0 24px; line-height: 20px; max-height: calc(100vh - 346px); overflow: auto; } #messageDismiss, #skipDatePickerDismiss, #feedbackModalDismiss, #stripeModalDismiss, #confirmSubDismiss, #sheetsPickerDismiss, #dataViewerDismiss, #csvDatesImportDismiss, #bulkRecipientsDismiss, #bulkSendAsDismiss, #bulkBodyDismiss { padding: 24px; text-align: right; } #messageDismiss .button, #skipDatePickerDismiss .button, #feedbackModalDismiss .button, #stripeModalDismiss .button, #confirmSubDismiss .button, #sheetsPickerDismiss .button, #dataViewerDismiss .button, #csvDatesImportDismiss .button, #bulkRecipientsDismiss .button, #bulkSendAsDismiss .button, #bulkBodyDismiss .button { padding-left: 25px; padding-right: 25px; font-size: 14px; font-family: 'Roboto', sans-serif; font-weight: 500; } #messageDismiss A.secondary, #stripeModalDismiss A.secondary { margin-right: 10px; font-weight: normal; font-size: 13px; display: none; } #confirmSubDismiss A.secondary { margin-right: 10px; font-weight: normal; font-size: 13px; } #messageNextSend { font-size: 14px; font-weight: 500; margin: 10px 0; } #messageNote { font-size: 12px; font-style: italic; } #messageContent A { font-weight: 400; } #messageSubject { color: #555; font-size: 14px; font-style: italic; display: inline-block; margin-left: 5px; position: relative; top: 1px; width: 300px; overflow: hidden; vertical-align: middle; } #confirmSubContent LABEL { display: flex; flex-direction: row; } #confirmSubContent LABEL { margin-top: 10px; } #confirmSubContent P { margin-bottom: 20px; margin-top: 10px; } #confirmSubContent .confcontent { margin-left: 10px; } #confirmSubContent .confcheck INPUT { width: 15px; height: 15px; margin: 1px 0 0 0; } #clearRec I, #clearUntil I, #clearSpec I { vertical-align: middle; position: relative; top: -1px; margin-left: 1px; } #clearUntil { margin-left: 20px; } #clearSpec { margin-left: 12px; display: none; } #editForm .button { padding-left: 25px; padding-right: 25px; font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 500; } #exticon { width: 16px; vertical-align: top; position: relative; top: 2px; margin-left: 3px; } #inlineGmailIcon { width: 16px; vertical-align: top; position: relative; top: 3px; margin-right: 3px; } #emailList { width: 100%; color: #314861; } #emailList .content { margin-top: 7px; font-size: 14px; color: #888888; } #emailList .recs SPAN { font-size: 12px; font-weight: 400; color: var(--gmail-blue); max-width: 96px; display: block; float: left; border-radius: 3px; padding-left: 4px; padding-right: 4px; margin-left: -3px; } #emailList .actions SPAN { cursor: pointer; color: #666; } #emailList .actions:not([data-status="active"]) SPAN.skip, #emailList .actions:not([data-status="active"]) SPAN.pause, #emailList .actions:not([data-status="active"]) SPAN.send, #emailList .actions:not([data-status="active"]) SPAN.cancel { opacity: 0.4; color: #777 !important; } #emailList .actions SPAN.info { cursor: default; } #emailList .actions SPAN:hover, #emailList .actions SPAN.active, #bulkActions SPAN:hover, #bulkActions SPAN.active { color: var(--gmail-green); } #emailList .subject, #emailList .content { max-width: 650px; } #emailList .select { position: absolute; top: 50%; left: -40px; display: block; height: 30px; width: 30px; cursor: pointer; transform: translateY(-50%); } #emailList .select INPUT { margin: 0; padding: 0; height: 16px; width: 16px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } #emailList TD { padding: 10px 20px 10px 0px; position: relative; } #emailList .actions { padding: 10px 0px 10px 25px; vertical-align: middle; width: 315px; } .listing { padding-left: 85px; margin-top: 30px; font-size: 20px; } #emailList .status, #statusTags .status, .genericStatus { display: none; font-size: 10px; color: white; padding: 3px 3px; line-height: 10px; position: relative; top: -1px; border-radius: 2px; margin-right: 5px; width: 10px; text-align: center; vertical-align: middle; cursor: default; } #emailList .status.manual, #statusTags .status.manual, .genericStatus.manual { background-color: var(--gmail-blue); } #emailList .status.skip, #statusTags .status.skip, .genericStatus.skip { background-color: #9F0D79; } #emailList .status.pause, #statusTags .status.pause, .genericStatus.pause { background-color: #AAA; /*text-shadow: 0px 1px 1px black;*/ } #emailList .status.cancel, #statusTags .status.cancel { background-color: var(--gmail-red); } #emailList .status.completed, #statusTags .status.completed, .genericStatus.completed { background-color: var(--gmail-green); } #emailList .status.draft, #statusTags .status.draft { background-color: goldenrod; } #emailList .status.error, #statusTags .status.error, .genericStatus.error { background-color: var(--gmail-red); } #emailList .status.tracked, #statusTags .status.tracked { background-color: olivedrab; } #emailList .status.advanced, #statusTags .status.advanced { background-color: black; } #emailList .recurInfo { display: none; font-size: 13px; color: #555; margin-top: 5px; margin-bottom: 5px; } #newMail { font-size: 15px !important; margin-top: 15px; display: inline-flex; flex-direction: row; align-items: center; padding: 8px 10px 8px 16px; } #newMail I { float: right; display: block; } #editBack { display: inline-block; margin-top: 25px; } #editBack I { vertical-align: top; position: relative; top: -3px; } #mceLoadingOverlay { width: 100%; height: 100%; top: 0; left: 0; position: absolute; background: rgba(255, 255, 255, 0.8); z-index: 50; } #mceLoadingOverlay IMG { top: 50%; left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%); width: 50px; height: 50px; } #emailFilters { padding-left: 85px; margin-top: 30px; font-size: 16px; } #emailFilters A:not(#emailFiltersSortBy):not(#emailFiltersPrint) { font-size: 14px; } #emailFilters A.active:not(#emailFiltersSortBy):not(#emailFiltersPrint) { background-color: var(--gmail-green); color: white; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; text-decoration: none; } #emailFilters A#emailFiltersSortBy.active { background-color: var(--gmail-green); border-radius: 3px; color: white; padding: 1px 2px; } #emailFilters A#emailFiltersSortBy, #emailFiltersPrint { text-decoration: none; } #faq_getstarted { margin-top: 20px; } #faq_getstarted IMG { margin-left: 20px; vertical-align: middle; } #faq .title IMG { width: 90px; border-radius: 50%; vertical-align: middle; position: relative; top: -2px; } #faq .title IMG.phones { border-radius: 0; vertical-align: middle; position: relative; top: -16px; margin-left: 17px; } #faq { margin-top: 50px !important; display: block !important; } #faq { font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 300; line-height: 30px; padding-top: 10px; } #faq A { font-size: 18px !important; } #faq DIV { margin-top: 9px; } #faq UL UL { margin-left: 20px; } #faq UL.faq { list-style-type: square; margin-top: 35px; max-width: 100%; } #faq UL.faq IMG { max-width: calc(100% - 60px); height: auto; } #faq UL:not(.faq) { list-style-type: circle; margin-bottom: 20px; } #faq OL { list-style-type: decimal; margin-bottom: 20px; margin-left: 20px; } #faq UL.faq > LI { margin-top: 40px; } #faq:not(.news) UL.faq > LI > DIV { /*display: none;*/ } #faq UL.faq > LI > DIV { margin-left: 6px; } #faq LI H2 { /*cursor: pointer;*/ padding-left: 5px; padding-right: 32px; border-radius: 4px; display: inline-block; position: relative; box-sizing: border-box; font-weight: 400; } #faq.news LI H2 { cursor: text; } #faq:not(.news) LI H2:hover { /*background-color: #EFEFEF;*/ } #faq LI H2 I { position: absolute; top: 50%; right: 0; margin-top: -12px; display: none; } #faq.news .title IMG { border-radius: initial; } .version { font-size: 18px; font-weight: 500; margin-top: 50px; } #highlight, .highlight { background-color: var(--gmail-yellow); padding: 8px 15px; display: flex; flex-direction: row; align-items: center; margin-top: 25px !important; margin-bottom: 50px !important; } #highlight I, .highlight I { vertical-align: top; color: var(--gmail-red); } #highlight DIV, .highlight DIV { margin: 0; margin-left: 10px; } .highlight.readInbox { margin: 10px 0 20px 0 !important; } .highlight.readInbox { margin: 10px 0 20px 0 !important; } .highlight.info { background-color: aliceblue; } .highlight.info I { color: var(--gmail-blue); } #extpuzzle { font-size: 50px; vertical-align: top; position: relative; top: 5px; color: #1860C9; } #offerDetails { margin-left: 85px; margin-top: 50px; } #offerDetails H2 { font-size: 25px; margin-bottom: 20px; } #foundon { display: flex; flex-direction: row; align-items: center; height: 40px; margin-top: 25px; padding-left: 20px; font-size: 12px; font-weight: 500; } #foundon SPAN { padding-right: 20px; text-align: right; line-height: 14px; } #foundon A { display: block; height: 100%; margin-right: 10px; } #foundon A.small { height: 25px; } #foundon A.small.first { margin-left: 10px !important; } #foundon A IMG { height: 100%; transition: all 0.2s; } #foundon A:hover IMG { transform: rotate(45deg); } #weekDaysRec { margin-left: 10px; } #weekDaysRec SPAN { display: inline-block; background-color: gainsboro; color: black; text-align: center; width: fit-content; min-width: 20px; padding: 2px 5px; border-radius: 3px; margin-left: 7px; cursor: pointer; text-shadow: 0px 1px 1px white; transition: all 0.1s; -webkit-tap-highlight-color: transparent; } #weekDaysRec SPAN.active { background-color: var(--gmail-blue) !important; color: white; text-shadow: none; } @media (min-width: 1201px) { #weekDaysRec SPAN:hover { background-color: #73a2ec; color: white; text-shadow: none; } } #skipInline { display: inline-block; margin-left: 8px; position: relative; top: -2px; } .inlinetag { display: inline-block; background-color: #DE7637; color: white; padding: 0 7px; border-radius: 3px; } .listlogs { width: 100%; } .listlogs THEAD { background-color: #EFEFEF; border-top-left-radius: 3px; } .listlogs TH { text-align: center; padding: 10px; font-size: 17px; color: #333; } .listlogs TH:first-child { border-top-left-radius: 4px; } .listlogs TH:last-child { border-top-right-radius: 4px; } .listlogs TD { padding: 7px; vertical-align: middle; } .listlogs TD:first-child { font-size: 12px; } .listlogs TD:last-child { text-align: center; } .listlogs TBODY TR:hover { background-color: #F5F5F5; } .listlogs .help { color: var(--gmail-blue); vertical-align: top; position: relative; top: 0px; font-size: 21px; } .listlogs .flag { height: 16px; border-radius: 3px; } .inlineSubTag { font-size: 10px; background-color: var(--gmail-blue); color: white; border-radius: 4px; padding: 0 4px; position: relative; top: -13px; display: none; margin-left: 3px; cursor: default; } .inlineSubTag.news { display: inline-block; top: -2px; vertical-align: super; line-height: 16px; } .inlineHelp { display: inline-block; margin-left: 3px; } .inlineHelp I { vertical-align: middle; position: relative; top: -1px; color: #AAA; transition: all 0.25s; } .inlineHelp I:hover { color: var(--gmail-blue); } #webContainer .mobile { display: none; } #downloadLinks { margin-top: 25px; display: flex; flex-wrap: wrap; } #downloadLinks A { display: flex; align-items: center; margin-right: 5px; } #downloadLinks SPAN { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 0 !important; } #downloadLinks A IMG { margin-left: auto; } #overlay { display: none; } #menuButton { position: fixed; display: none; top: 10px; right: 20px; color: black; font-size: 38px; z-index: 998; cursor: pointer; width: 38px; height: 38px; } #webContainer .content .mainl.plansinclude .r .title.small { font-size: 30px; } #tinyContainer { height: 600px; } .tox-tinymce { border-radius: 4px !important; } #followupContainer { height: 400px; display: none; } #faq_getstarted A IMG { margin-bottom: 30px; border: 1px solid #CCC; border-radius: 4px; } #faq_getstarted A IMG:hover { border-color: var(--gmail-blue); } #banner { width: 100%; height: 100%; top: 0; left: 0; position: fixed; background: rgba(32, 33, 36, 0.6); z-index: 100; font-family: 'Roboto', sans-serif; display: none; backdrop-filter: blur(3px); } #banner .bannerCont { width: calc(100% - 40px); max-width: 500px; max-height: calc(100% - 200px); position: fixed; left: 50%; top: 50%; background-color: white; border-radius: 4px; outline: none; box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%), 0px 1px 5px 0px rgb(0 0 0 / 20%); transform: translateX(-50%) translateY(-50%); background-image: linear-gradient(to right top, #549cfd, #004ab6); } #banner .iconline { margin-top: 20px; color: orange; } #banner .iconline .material-icons { font-size: 80px; } #banner .content { color: white; padding: 40px 20px 15px 20px; font-size: 20px; text-align: center; } #banner .text { line-height: 25px; } #banner .footer { padding: 20px; text-align: right; } #banner .button { background-color: white; color: var(--gmail-blue) !important; } #banner A { color: white; margin-right: 15px; font-weight: 400; } #banner .expires { line-height: 46px; margin-top: 13px; font-size: 19px; } #banner .expires SPAN { font-size: 27px; line-height: 27px; vertical-align: middle; color: red; display: block; } #banner .content .text EM { color: red; font-style: normal; } #banner .bannerCont.offer { background-color: black; background-image: none; overflow: hidden; height: 410px; max-height: calc(100% - 50px); } #banner .bannerCont.offer .content .text SPAN { background-color: black; } #banner .offer .button { color: black !important; } #banner .offer .iconline { margin-top: unset; color: white; vertical-align: middle; flex: 1 1 auto; margin-top: 15px; } #banner .offer .iconline SPAN { color: red; } #banner .offer .iconline .material-icons { color: #C42026; } #banner .offer .iconline .textline { line-height: 24px; } #banner .deco { display: flex; flex-direction: row; align-items: center; margin-top: 16px; } #banner .deco .bg { height: 150px; min-width: 260px; position: relative; } #banner .deco .bg IMG { position: absolute; bottom: 0; left: 0; z-index: -1; } #banner .offer .footer { box-sizing: border-box; line-height: 24px; padding: 5px 20px 20px 20px; width: 100%; position: absolute; bottom: 0; background-color: black; } #banner .offer .content { box-sizing: border-box; padding: 40px 20px 0px 20px; overflow-y: auto; height: calc(100% - 59px); } #offerRibbon { position: absolute; top: 45px; left: -74px; white-space: nowrap; background-color: black; color: white; transform: rotate(-45deg); display: block; padding: 10px 0; text-decoration: none; width: 280px; text-align: center; } #offerRibbon SPAN { color: red; } #folderPopup { position: absolute; top: 0; left: 0; background: white; border: 1px solid #CCC; border-radius: 3px; display: none; } #folderNew { border-bottom: 1px solid #CCC; padding: 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: pointer; } #folderNew:hover { background-color: var(--gmail-green); color: white; } #folderPopup LI { list-style-type: none; margin: 0; padding: 10px; cursor: pointer; } #folderPopup LI:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } #folderPopup LI:hover { background-color: var(--gmail-blue); color: white; } #folderInputCont { text-align: center; display: none; } #folderInput { width: calc(100% - 12px); min-width: 200px; margin: 6px; } #folderActions { margin-bottom: 5px; } #emailList .folder { font-weight: 500; font-size: 14px; } #emailList .folder .material-icons { vertical-align: middle; position: relative; top: -1px; } #emailList .folder .more { color: #AAA; cursor: pointer; } #emailList .folder .more.disabled { color: #DDD; cursor: default; } #emailList .folder .ftext { cursor: pointer; } #emailList .folder .ftext .material-icons:before { content: 'expand_more'; } #emailList .folder .ftext.empty .material-icons:before { content: '' !important; } #emailList TR.expanded .folder .ftext .material-icons:before { content: 'expand_less'; } #emailList .folder .ftext.empty { font-weight: 200; } #emailList TR:not(.folderRow) { display: none; } #emailList TR.visible:not(.folderRow) { display: table-row; } #emailList TR.visible.preview { background-color: aliceblue; } #folderEditPopup { position: absolute; top: 0; left: 0; background: white; border: 1px solid #CCC; border-radius: 3px; display: none; } #folderEditRename { border-bottom: 1px solid #CCC; padding: 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: pointer; } #folderEditRename:hover { background-color: var(--gmail-green); color: white; } #folderEditDelete { padding: 10px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; cursor: pointer; } #folderEditDelete:hover { background-color: var(--gmail-blue); color: white; } .editFolderName { padding: 2px 4px; display: inline-block; max-width: calc(100% - 100px); overflow: hidden; vertical-align: middle; } .contextPopup { position: absolute; top: 0; left: 0; background: white; border: 1px solid #CCC; border-radius: 3px; display: none; } .contextPopup UL { list-style-type: none; } .contextPopup UL LI { margin: 0; padding: 8px 10px; cursor: pointer; display: flex; align-items: center; } .contextPopup UL LI:first-child { border-top-left-radius: 3px; border-top-right-radius: 3px; } .contextPopup UL LI:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .contextPopup UL LI:hover { background-color: var(--gmail-blue); color: white; } #moreBulkPopup LI I { font-size: 24px; margin-right: 5px; } #moreBulkPopup LI SPAN { display: block; line-height: 1px; } #bulkActions .right SPAN { user-select: none; } @keyframes aniScale { 0% { transform: scale(1.0); } 100% { transform: scale(2.0); } } #emailList .openFolders.ani { animation: aniScale 0.3s ease-in-out 14 alternate; } #acRecs { position: absolute; top: 0; left: 0; background: white; border: 1px solid #CCC; border-radius: 3px; display: none; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); } #acRecs LI { list-style-type: none; margin: 2px; font-size: 12px; padding: 2px 4px; cursor: pointer; } #acRecs LI:hover, #acRecs LI.selected { background-color: var(--gmail-blue); color: white; border-radius: 3px; } #notFound { width: calc(100% - 100px); max-width: 500px; position: fixed; top: 40%; left: 50%; transform: translateX(-50%) translateY(-50%); color: black; box-sizing: border-box; } #notFound .title { font-size: 60px; line-height: 70px; color: var(--gmail-red); } #notFound .details { font-size: 20px; line-height: 25px; } #notFound .email { margin-top: 20px; line-height: 27px; } #notFound .email SPAN { display: inline-block; background-color: var(--gmail-blue); color: white; border-radius: 3px; padding: 5px 10px; font-size: 14px; line-height: normal; } #notFound #logout { margin-left: 7px; } #importGmail IMG { height: 16px; vertical-align: top; margin-left: 7px; } #importSheets, #importCSV { display: inline-flex; align-items: center; } #importSheets B, #importCSV B { display: block; line-height: 1; } #importSheets IMG { width: 16px; height: 16px; margin-left: 5px; } #importCSV IMG { width: 36px; height: 27px; margin-left: 0; } #importSheets { margin-right: 10px; /*display: none;*/ } #readDocs SPAN I { vertical-align: top; color: #297BE6; cursor: pointer; } #importGmail .loader, #importGmail .done, #readDocs .loader, #readDocs .done { height: 20px; margin-left: 50px; display: none; position: relative; top: -1px; } #createSet { margin-bottom: 40px; display: none; } #emailList.sets TR { display: table-row; } #emailList.sets .subject { font-size: 16px; } #emailList.sets .subject A { font-size: 16px; font-weight: normal; } #emailList.sets .actions { width: 60px; } #emailList.sets TD { vertical-align: middle; } #selectRecsCont { margin-top: 50px; } #selectRecsCont .title { margin-bottom: 15px; font-size: 14px; } #selectRecs { width: calc(100% - 20px); } #selectRecs OPTION { font-size: 13px; padding-top: 2px; padding-bottom: 2px; } .select2-selection__choice__display { font-size: 14px; line-height: 20px; } .select2-search__field { font-size: 14px !important; position: relative; top: -2px; } .select2-selection__choice__remove { top: 1px !important; } #saveRecs { margin-top: 10px; } #emailFiltersSortBy, #emailFiltersPrint { display: inline-block; margin-left: 10px; vertical-align: middle; cursor: pointer; } #emailFiltersPrint { font-size: 18px; } #highlight.importGmail { margin-bottom: 15px !important; font-size: 14px; font-weight: 400; } #highlight.importGmail .loader { width: 20px; } #highlight.importGmail .loader, #highlight.importGmail .done { display: none; } #highlight.importGmail #importGmailCount { margin-left: 10px; } #highlight.importGmail .sync { margin-left: 5px; } #highlight.importGmail SPAN, #highlight.importGmail DIV { position: relative; top: 1px; } A.new { white-space: nowrap; } A.new I { font-size: 18px; vertical-align: middle; position: relative; top: -1px; margin-left: 3px; } #relogo { vertical-align: top; margin-left: 6px; } #entpr { margin-top: 40px; text-align: center; } #installedBanner { position: fixed; height: 100%; width: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.9); z-index: 1000000; font-family: 'Roboto', sans-serif; display: none; } #installedBanner .content { position: absolute; max-width: 975px; width: calc(100% - 100px); max-height: calc(100% - 100px); min-height: 517px; height: auto; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: white; border-radius: 5px; box-shadow: 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%), 0px 5px 5px -3px rgb(0 0 0 / 20%); } #installedBanner .content .title { color: black; font-size: 22px; font-weight: 500; text-align: center; margin-top: 16px; } #installedBanner .content .features { display: flex; flex-direction: row; list-style-type: none; margin-top: 20px; flex-wrap: wrap; justify-content: center; overflow-x: auto; max-height: 295px; } #installedBanner .content .features LI { width: 25%; min-width: 230px; box-sizing: border-box; padding: 35px; margin: 0; } #installedBanner .content .features LI IMG { margin: 0 auto; display: block; } #installedBanner .content .features LI H3 { margin-top: 20px; margin-bottom: 10px; color: black; font-size: 18px; font-weight: 500; } #installedBanner .content .features LI P { line-height: 18px; } #installedBanner .content .action { text-align: center; margin-bottom: 35px; } #installedBanner .tip { background-color: #333333; position: fixed; top: 25px; right: 60px; width: 352px; color: white; box-sizing: border-box; padding: 15px; border-radius: 8px; } #installedBanner .tip::after { content: ''; position: absolute; top: -16px; right: 24px; width: 0px; height: 0px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid rgb(51, 51, 51); } #installedBanner .tip .pinit IMG { display: block; width: 100%; border-radius: 8px; } #installedBanner .tip .desc { font-weight: 100; font-family: 'Roboto'; font-size: 13px; letter-spacing: 0.4px; margin-top: 10px; margin-bottom: 15px; line-height: 21px; } #installedBanner .tip .title { display: flex; flex-direction: row; align-items: center; } #installedBanner .tip .title DIV { margin-left: 5px; font-family: "Roboto", sans-serif; font-size: 16px; } #installedBanner .tip .close { position: absolute; top: 10px; right: 9px; cursor: pointer; border-radius: 3px; } #installedBanner .tip .close I { float: left; font-size: 18px; } #installedBanner .tip .close:hover { background-color: white; } #installedBanner .tip .close:hover I { color: #333333; } .ident A { font-size: 12px; } .ident .remove { font-size: 15px; background-color: #DDD; border-radius: 3px; cursor: pointer; vertical-align: text-bottom; display: inline-block; margin-left: 2px; } .ident .remove:hover { background-color: var(--gmail-blue); color: white; } .inlineHelp.small I { font-size: 20px; } #emailList .sentvia { font-size: 12px; } #emailList .sentvia SPAN { color: #555; font-style: italic; } #emailList .sentvia SPAN.title { background-color: var(--gmail-yellow); display: inline-block; padding: 0 5px; border-radius: 4px; } #paymentMethods { width: 100%; max-width: 500px; margin: 0 auto; margin-top: 50px; display: flex; } #paymentMethods .header { list-style-type: none; flex: 0 0 170px; } #paymentMethods .header LI { display: block; margin: 0; border: 1px solid #EFEFEF; border-top-width: 0px; border-right-width: 0px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; padding: 10px 24px; cursor: pointer; box-sizing: border-box; text-align: left; position: relative; left: 0px; background-color: white; height: 41px; } #paymentMethods .header LI.active { width: calc(100% + 1px); } #paymentMethods .header LI.active IMG { filter: grayscale(0) !important; opacity: 1 !important; transform: none; transition: all 0.2s; } #paymentMethods .header LI:first-of-type { border-top-width: 1px; } #paymentMethods .header LI:hover { } #paymentMethods .header LI IMG { height: 25px; vertical-align: middle; position: relative; filter: grayscale(1); opacity: 0.7; transform: translateX(20px); } #paymentMethods .header LI[data-type="stripe"] IMG { left: -6px; top: -2px; } #paymentMethods .header LI[data-type="revolut"] IMG { height: 13px; opacity: 0.35; } #paymentMethods .header LI[data-type="paypal"] IMG { height: 19px; } #paymentMethods .container { border: 1px solid #EFEFEF; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 5px 5px 5px rgb(0 0 0 / 4%); flex: 1 1 0; min-height: 200px; display: table; } #paymentMethods .container > DIV { display: table-cell; text-align: center; vertical-align: middle; width: 100%; } .paynow .cards { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 165px; margin: 0 auto; margin-top: 5px; margin-bottom: 5px; } .paynow .cards SPAN { height: 31px; background-size: contain; background-repeat: no-repeat; background-position: center; display: block; flex: 0 0 50px; margin-right: 5px; margin-top: 5px; border-radius: 4px; } .paynow .cards SPAN:last-of-type { margin-right: 0; } .paynow .cards SPAN.visa { background-image: url('/static/images/cards/visa.png'); } .paynow .cards SPAN.mastercard { background-image: url('/static/images/cards/mastercard.png'); } .paynow .cards SPAN.amex { background-image: url('/static/images/cards/amex.png'); } .paynow .cards SPAN.googlepay { background-image: url('/static/images/cards/googlepay.svg'); } .paynow .cards SPAN.applepay { background-image: url('/static/images/cards/applepay.svg'); } #paypal-button-container { } #paypal-button-container > .paypal-buttons { width: 100px; margin-top: 20px; } #revolut-button-container { } #stripe-button-container { } #revpaycc, #stripepaycc { display: inline-flex; flex-direction: row; background-color: black; align-items: center; font-family: "Roboto"; font-weight: 300; letter-spacing: 0.3px; color: white; text-decoration: none; padding: 5px 14px; border-radius: 4px; width: auto; } #revpaycc:hover { background-color: #017EFB; transition: all 0.15s; } #revpaycc SPAN, #stripepaycc SPAN { display: block; margin-left: 10px; } #stripepaycc:hover { background-color: #6772E5; transition: all 0.15s; } #revpaycc.processing, #stripepaycc.processing { background-color: #5F6368; } #revpaycc DIV, #stripepaycc DIV { width: 20px; height: 20px; margin-left: 10px; background: url('/static/images/loader-white.svg') center center/contain no-repeat; display: none; } #revpaycc.processing SPAN, #stripepaycc.processing SPAN { display: none; } #revpaycc.processing DIV, #stripepaycc.processing DIV { display: block; } .powered { font-weight: 400; font-size: 11px; margin-top: 10px; } .powered A { font-size: 11px; } #gpaycont { height: 34px; width: 167px; margin: 0 auto; margin-top: 15px; } #gpaycont IFRAME { /*height: 100% !important;*/ } #bulkActions { padding-left: 85px; margin-top: 30px; font-size: 16px; } #bulkActions SPAN { vertical-align: bottom; position: relative; top: 2px; cursor: pointer; } #bulkActions SPAN:first-child { margin-left: 5px; color: var(--gmail-blue); } #bulkActions .search { width: 300px; background: url(/static/images/lens.svg) 12px 13px/17px 17px no-repeat; padding-left: 38px; color: #A4AEC4; } #bulkActions .reset I { vertical-align: middle; position: relative; top: -1px; } #skipDatePickerList { list-style-type: none; } #skipDatePickerList LI { box-sizing: border-box; margin: 0; font-size: 12px; padding: 10px 0px 0px 10px; height: 30px; min-width: 217.5px; float: left; } #skipDatePickerList LI INPUT { vertical-align: middle; top: -1px; margin-right: 7px; } #skipDatePickerList LI LABEL { height: 100%; width: 100%; display: inline-block; cursor: pointer; border-radius: 3px; } #skipDatePickerList LI LABEL:hover { background-color: #EFEFEF; } #skipDatesLink, #specDatesLink { margin-left: 10px; } #skipDatesText SPAN, #specDatesText SPAN { color: var(--gmail-red); font-size: 12px; font-weight: 500; padding: 0; } #specDatesText { width: auto; margin-left: 5px; font-size: 14px; } #skipDatePickerTitle A { font-weight: 400; position: relative; top: -1px; font-size: 13px; } #specDatesImport { margin-left: 12px; } #feedbackModalContent DIV { margin-top: 20px; } #feedbackModalContent TEXTAREA { width: 100%; height: 150px; } #feedbackIcon { width: 50px; height: 50px; background: url(/static/images/bug.webp) top left no-repeat; background-size: cover; position: fixed; top: 50%; right: 0; transform: rotate(-90deg) translateX(50%) translateY(15px); transition: all 0.2s; cursor: pointer; } #feedbackIcon:hover { transform: rotate(-90deg) translateX(50%) translateY(0px); } #feedbackModalTitle IMG { width: 18px; margin-left: 3px; position: relative; top: 1px; } .errorLabel { color: var(--gmail-red); margin-top: 15px !important; margin-bottom: 5px; font-family: 'Roboto', sans-serif; display: none; } .errorLabel I { vertical-align: middle; position: relative; top: -2px; } .successLabel { color: var(--gmail-green); margin-top: 15px !important; margin-bottom: 5px; font-family: 'Roboto', sans-serif; display: none; } .successLabel I { vertical-align: middle; position: relative; top: -2px; } #feedbackModalTitle .close { cursor: pointer; position: absolute; top: 10px; right: 10px; } #feedbackModalTitle .close:hover { background-color: var(--gmail-blue); color: white; } #howToLink I { vertical-align: sub; margin-left: 5px; display: inline-block; width: 24px; height: 24px; } #mailEdit #howToLink I { vertical-align: bottom; } ARTICLE.main .steps { display: flex; align-items: center; padding-top: 20px; flex-wrap: wrap; } ARTICLE.main .steps > DIV:first-child { margin-right: 50px; max-width: 540px; } /*ARTICLE.main IFRAME {*/ /* width: 500px;*/ /* height: 290px;*/ /* border: 10px solid black;*/ /* border-radius: 20px;*/ /* max-width: unset;*/ /* box-sizing: border-box;*/ /*}*/ ARTICLE H3 { font-size: 22px; color: black; font-weight: 400; } ARTICLE.main .benefits { padding-top: 30px; } ARTICLE.main .benefits H3 { color: #555; padding-top: 10px; } ARTICLE.main .benefits P { margin-top: 7px; } ARTICLE.main .benefits UL { list-style-type: none !important; } ARTICLE.main .benefits UL LI { margin-left: 0; } .store.button SPAN { font-size: 20px !important; } .customers { padding-top: 60px; } .customers H3 { text-align: center; font-size: 27px; margin-bottom: 50px; } .customers UL { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; list-style-type: none !important; } .customers LI { height: 200px; width: 200px; position: relative; } .content .customers LI IMG { width: 100%; max-height: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .content .customers { padding-top: 120px; } :not(#faq) > .customers { padding-bottom: 50px; } .content .customers H3 { text-align: center; font-size: 27px; margin-bottom: 50px; color: black; } .content .customers LI { filter: grayscale(100%); opacity: 0.6; transform: scale(0.7); transition: all 0.3s; } .content .customers LI:hover { filter: grayscale(0%); opacity: 1; } .content .customers H3 SPAN { display: inline-block; background-color: #DE7637; color: white; padding: 0 7px; border-radius: 3px; font-size: 23px; line-height: 32px; } #stripeModal { backdrop-filter: none; } #stripePayCont { width: 640px; max-width: 640px; max-height: unset; padding: 24px; box-sizing: border-box; } #stripeModalDismiss { padding: 0; padding-top: 24px; display: flex; align-items: center; } #stripeModalDismiss #stripeError { flex: 1 1 0; } #stripeModalDismiss BUTTON { margin-left: auto; } #stripeModalDismiss BUTTON IMG { display: none; width: 16px; height: 16px; vertical-align: middle; position: relative; top: -1px; } #stripeModalDismiss.processing IMG { display: inline-block; } #stripeModalDismiss.processing SPAN, #stripeModalDismiss.processing .secondary { display: none; } #stripePayCont FORM { overflow-x: hidden; overflow-y: auto; box-sizing: border-box; height: calc(100vh - 250px); /*height: 490px;*/ padding: 0 8px; } #stripeModalTitle { position: relative; margin-bottom: 24px; } #stripeModalTitle SPAN { color: black; font-size: 20px; } #stripeModalTitle .close { position: absolute; right: 0; cursor: pointer; } #stripeModalTitle .close:hover { color: var(--gmail-blue); } #stripeError { text-align: left; color: var(--gmail-red); font-size: 16px; display: none; } #stripeError .material-icons { vertical-align: middle; position: relative; top: -1px; margin-right: 3px; } #stripePaymentElement { margin-top: 15px; } FOOTER UL.langs { display: flex; justify-content: center; list-style-type: none; margin-top: 15px; box-sizing: border-box; flex-wrap: wrap; padding: 0 10px; } FOOTER UL.langs LI { margin: 0; padding: 8px; } FOOTER UL.langs A { display: block; } FOOTER UL.langs IMG { vertical-align: top; border-radius: 3px; /*width: 32px;*/ /*height: 24px;*/ filter: grayscale(1); opacity: 0.7; } FOOTER UL.langs IMG.jp, FOOTER UL.langs IMG.id, FOOTER UL.langs IMG.vi { border: 1px solid #DDD; } FOOTER UL.langs A.selected IMG { filter: none; opacity: 1; } .material-icons.warn { color: var(--gmail-red); vertical-align: middle; position: relative; top: -1px; } .translationPage { background-color: #F9F9F9; border-radius: 4px; margin: 20px; padding: 40px; } .translationPage INPUT:not([type="checkbox"]), .translationPage SELECT { width: 1000px; margin-bottom: 10px; } #translations { margin-top: 40px; } #translations TH { font-size: 18px; padding-top: 10px; padding-bottom: 10px; } #translations .file { font-size: 12px; cursor: pointer; } #translations .key { font-size: 13px; } #translations .translation { font-size: 12px; } #translations TEXTAREA { width: 500px; height: 60px; font-size: 13px; } #translations TD { vertical-align: middle; } #translations TR:nth-child(even) { background-color: white; } #translations TD:first-child { /*border-right: 1px solid rgba(0,0,0,0.1);*/ } #translations TD:nth-child(2) { padding-left: 10px; } #saveTranslations { position: fixed; bottom: 20px; left: 50%; margin-left: -100px; } #saveTranslations INPUT { width: 200px; } #translations INPUT.tip_dot { border: 1px solid var(--gmail-red) !important; } #translations INPUT.tip_ucfirst { border: 1px solid var(--gmail-blue) !important; } #translations .autoTranslated { background-color: antiquewhite !important; } .lastpaid { font-size: 17px; font-family: Monospace; } #topbar .submenu { position: relative; } #topbar .submenu > DIV { position: absolute; top: 20px; right: 0; background-color: white; border: 1px solid #EFEFEF; border-radius: 3px; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1); display: none; z-index: 3; } #topbar .submenu > DIV A { display: block; box-sizing: border-box; /*width: 100%;*/ padding: 10px; text-align: right; margin: 0; white-space: nowrap; } #topbar .submenu I { position: absolute; top: -1px; right: 0; font-size: 20px; } #topbar .submenu > A { padding-right: 20px; } #topbar .submenu .langs { display: flex; flex-direction: row; flex-wrap: wrap; width: 192px; margin: 0 auto; } #topbar .submenu DIV A.lang { } #topbar .submenu DIV A.lang SPAN { display: none; } #topbar .submenu DIV A.lang IMG { border-radius: 3px; vertical-align: middle; } #topbar .submenu DIV A.lang.selected IMG { } #topbar .submenu DIV A.lang IMG.jp, #topbar .submenu DIV A.lang IMG.id, #topbar .submenu DIV A.lang IMG.vi { border: 1px solid #DDD; } .signedOutButton { display: flex; flex-direction: row; align-items: center; border-radius: 4px; width: 100%; height: 40px; box-sizing: border-box; text-decoration: none !important; font-size: 15px; line-height: 17px; background-color: white; color: #666 !important; box-shadow: 0px 0px 2.2437px rgba(0, 0, 0, 0.2), 0px 1.4958px 2.2437px rgba(0, 0, 0, 0.3); } .signedOutButton:hover { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2), 1px 2px 4px rgba(0, 0, 0, 0.3); } .signedOutButton IMG { margin-left: 13px; } .signedOutButton SPAN { display: block; flex-grow: 1; font-size: 14px; font-weight: 500; margin-right: 4px; padding: 0 11px; } .install.hi SPAN { padding-top: 8px; } .calculation { font-size: 18px; margin: 0 auto; margin-top: 20px; } .calculation TD:first-child { text-align: left; padding-right: 15px; } .calculation TD:last-child { text-align: right; } .calculation .vat { border-bottom: 1px dotted #CCC; } .calculation .vat TD { padding-bottom: 5px; } .calculation .total TD { padding-top: 5px; color: black; } .calculation .total TD:last-child { font-weight: 500; } #paypal_na { font-size: 16px; font-weight: 300; display: block; padding: 0 60px; line-height: 22px; } #inboxAccess { margin-left: 20px; } #inboxAccess IMG { height: 16px; vertical-align: middle; margin-left: 7px; } OPTGROUP { font-size: 18px; font-weight: 500; } [name="tz_override"] { margin-right: 10px !important; } [name="tz_override"] OPTION { font-size: 14px; } #nextsendLocal, #repeatuntilLocal { margin-top: 5px; display: none; } #nextsendLocal .error, #repeatuntilLocal .error { color: var(--gmail-red); vertical-align: bottom; } #nextsendLocal .time, #repeatuntilLocal .time { font-weight: 500; } #resetTz I { vertical-align: middle; position: relative; top: -1px; } #recTimeLocal { display: none; } #recTimeLocal I { color: var(--gmail-red); vertical-align: bottom; } #recTimeLocal SPAN { padding-left: 3px; } #recTimeLocal B { font-weight: 500; } .longstring { width: calc(100%); word-wrap: break-word; margin-top: 10px; font-size: 11px; color: var(--gmail-red); } #visualizer { width: 100%; max-width: 600px; height: 250px; max-height: calc(100% - 20px); background-color: white; position: fixed; top: 10px; right: 10px; border-radius: 10px; z-index: 1; box-shadow: 0px 0px 2.2437px rgba(0, 0, 0, 0.184), 0px 1.4958px 2.2437px rgba(0, 0, 0, 0.268); box-sizing: border-box; visibility: hidden; } #repeat_until_human { max-width: 280px; } .new.readmore { font-size: 20px; } UL#reasons { text-align: left; margin-top: 20px; font-size: 13px; } UL#reasons A { font-size: 13px; } .variable { font-family: Monospace; color: black; } #sheetsList { list-style-type: none; display: flex; flex-direction: row; flex-wrap: wrap; } #sheetsList LI { background-color: var(--gmail-green); color: white; font-size: 12px; display: block; line-height: 1; border-radius: 3px; display: flex; width: 125px; cursor: pointer; } #sheetsList LI:hover .text { background-color: #60C27B; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } #sheetsList LI.selected .text { background-color: var(--gmail-blue); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } #sheetsList LI .text { padding: 4px 7px; width: 100%; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #sheetsList LI .icon { display: block; flex: 0 0 20px; height: 20px; background-image: url('/static/images/sheets.ico'); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; border-left: 1px solid #EFEFEF; } #sheetsPickerLoader, #dataViewerLoader { height: 32px; background: url('/static/images/loader-blue.svg') center/contain no-repeat; display: none; margin-top: 20px; } #sheetsPickerDismiss A, #csvDatesImportDismiss A, #bulkRecipients A, #bulkSendAs A, #bulkBody A { display: inline-block; margin-right: 7px; font-weight: 400; font-size: 12px; position: relative; top: 1px; } #bulkSendAs .note A { position: initial; top: initial; font-size: 14px; margin: 0; } #sheetsPicker B { font-weight: 500; } #dataSource { margin-right: 20px; } #dataViewerCont { max-width: unset; max-height: unset; height: calc(100% - 40px); background-color: #EFEFEF; } #dataViewerLoader { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translateX(-50%) translateY(-50%); margin: 0; } #dataViewerContent { max-height: unset; height: calc(100% - 148px); } #dataViewerDismiss { width: 100%; position: absolute; bottom: 0; box-sizing: border-box; } TABLE.xls { /*border-collapse: collapse;*/ font-family: 'Courier New', Courier, monospace; font-size: 12px; } TABLE.xls TD.celldata { /*border: 1px solid #CDCDCD;*/ /*padding: 8px 12px;*/ line-height: 1; background-color: white; } TABLE.xls TD.rownum, TABLE.xls TH { /*padding: 8px;*/ line-height: 1; /*text-align: center;*/ color: black; width: 1px; } TABLE.xls TR:not(:last-of-type) TD.rownum { border-bottom: 1px solid #CDCDCD; } TABLE.xls TH:not(:first-of-type):not(:last-of-type) { border-right: 1px solid #CDCDCD; } TABLE.xls TR:hover TD { background-color: cornsilk; } div.dt-container .dt-search input { background-color: white !important; } div.dt-container .dt-input { background-color: white !important; } TABLE.faqgrid { font-family: 'Courier New', Courier, monospace; font-size: 12px; } TABLE.faqgrid TD { border: 1px solid #CDCDCD; padding: 8px 12px; line-height: 1; background-color: #FAFAFA; } #sheetsDocUrl, #csvDatesImportText { width: 100%; height: 75px; } #bulkRecipients TEXTAREA { width: 100%; height: 70px; font-size: 12px; resize: vertical; } .bulkRecs { font-size: 12px; margin-top: 5px; } .bulkRecs SPAN, .email { color: var(--gmail-blue); } UL.paginator { margin-top: 30px; list-style-type: none; display: flex; width: fit-content; gap: 2px; } UL.paginator * { box-sizing: border-box; } UL.paginator LI { padding: 0px; margin: 0px; font-size: 12px; font-weight: bold; border-radius: 3px; cursor: pointer; height: 28px; flex: 1 0 28px; } UL.paginator LI A { line-height: 30px; text-align: center; height: 100%; width: 100%; display: block; white-space: nowrap; padding: 0 6px; } UL.paginator LI:hover { background-color: #BED4FF; } UL.paginator LI:hover A { color: white; text-decoration: none; } UL.paginator LI.first A, UL.paginator LI.last A, UL.paginator LI.prev A, UL.paginator LI.next A { font-size: 16px; line-height: 26px; } UL.paginator LI:active, UL.paginator LI.on { background-color: var(--gmail-blue); } UL.paginator LI:active A, UL.paginator LI.on A { color: white; } .note .variable { display: inline-block; max-width: 300px; white-space: nowrap; vertical-align: top; position: relative; top: -1px; } .note .variable.expanded { max-width: initial; white-space: initial; } #uninstallForm { padding-top: 30px; } #uninstallForm DIV { font-size: 16px; } #uninstallForm TEXTAREA { margin-top: 10px; width: 100%; height: 100px; } #uninstallForm .button { font-weight: 500; } .paynow .desc.compare SPAN { display: inline-block; font-size: 16px; font-weight: 500; line-height: 17px; background-color: var(--gmail-blue); color: white; border-radius: 4px; padding: 5px; } .paynow .desc.compare A { position: relative; padding-right: 21px; } .paynow .desc.compare A:after { display: block; position: absolute; content: '⤵'; top: 3px; right: 0; } #bulkRecipients .sets, #bulkSendAs .main { font-size: 12px; color: #777; } #bulkRecipients .sets A, #bulkSendAs .main A { font-size: 12px; position: initial; margin: 0; } #bulkSendAs .main, #bulkBody .main { margin: 10px 0; } #bulkSendAs INPUT { width: 100%; } #bulkTinyContainer { margin-top: 20px; height: 400px; } #bulkBody .reset { vertical-align: middle; color: var(--gmail-blue); cursor: pointer; margin-left: 10px; position: relative; top: -1px; } @media (max-width: 1200px) { #webContainer { width: 100%; box-sizing: border-box; } #webContainer .content .main.video LITE-YOUTUBE, #started LITE-YOUTUBE, /*#webContainer .content .main.video IFRAME,*/ #started IFRAME, #webContainer .content .steps LITE-YOUTUBE { width: calc(100% - 20px); height: 100%; aspect-ratio: 16 / 9; } #webContainer .content .main.video IFRAME, #started IFRAME { width: 100%; } #webContainer .content .main, #webContainer .content .mainl { display: block; } #webContainer .content .main .l { padding: 0; } FOOTER { width: 100%; margin: 0; } #foundon { flex-wrap: wrap; height: 104px; width: calc(100% - 0px); padding: 0; justify-content: center; margin-top: 100px; } #foundon SPAN { display: block; text-align: left; width: 100%; font-size: 16px; line-height: 22px; font-weight: 400; text-align: center; padding-bottom: 10px; } #webContainer .content .signin { float: none; display: inline-block; } #foundon A { height: 40px; padding-top: 10px; } #foundon A.small { height: 40px; } #foundon A.small.first { margin-left: 0px !important; } #webContainer .mobile { display: block; } #webContainer .mobile .logo { margin: 0 auto; width: 110px; height: 110px; } #webContainer .content .main .r { display: none; } #webContainer .content .mainl .l { padding: 0; } .clipart1, .clipart2, .clipart3, .clipart4, .clipart6, .clipart7, .clipart8, .clipart9, .clipart11 { margin: 0 auto; width: 150px; height: 150px; } .clipart7 { background-position-y: bottom; } .clipart3 SPAN { top: 20%; } #webContainer .content .mainl .title, #webContainer .paynow .title { padding-top: 30px; } #webContainer .content .main.phones { margin-top: 0; } #webContainer .content .mainl.payments { margin-top: 60px; } #downloadLinks { text-align: center; } #topbar { z-index: 1000; position: fixed; height: 100%; width: 200px; top: 0; right: -200px; background-color: white; transition: all 0.15s; } #topbar.visible { right: 0px; } #topbar UL { float: none; } #topbar LI { float: none; margin: 0; } #topbar LI A { display: block; margin: 0; padding: 15px 20px; font-size: 16px; } #topbar LI A:active { background-color: #297BE6; color: white; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } #overlay { background-color: rgba(0, 0, 0, 0.5); top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 999; display: none; } #signedInButton { transform: scale(1.2); transform-origin: 0 0; } #menuButton { display: block; } .main.video .r { display: block !important; margin: 0 !important; } .paynow { margin-top: 70px; } .paynow .title { line-height: 40px !important; margin-bottom: 20px; } #webContainer .content .mainl.plansinclude LI .min { display: block; top: 3px; line-height: 16px; } #webContainer .content .mainl.plansinclude .r { padding: 0; } #webContainer .content .mainl.plansinclude .r .title.small { line-height: 35px; padding-top: 40px; } .invoices TD:last-child { padding: 10px 0px 10px 20px; } .invoices TD:last-child A:last-child { margin-left: 0px; } #emailList { display: block; } #emailList TBODY { display: block; list-style-type: square; width: 100%; } #emailList TR { display: list-item; width: 100%; list-style-type: none; } #emailList TD { display: block; padding: 0 !important; width: 100% !important; } #emailList .actions { margin-top: 9px; margin-bottom: 50px; } #emailList .folderRow { margin-left: -31px; } #emailList .folderRow .actions { display: none; } #emailList .folderRow TD:first-child { margin-bottom: 20px; } #emailList TR.visible:not(.folderRow) { display: list-item; } .listing:not(.empty) { padding-left: 30px; } .inlineSubTag { top: -3px; } #tinyContainer, #followupContainer, #bulkTinyContainer { height: unset; aspect-ratio: 1 / 1.2; } #emailList .actions SPAN { font-size: 30px; } #webContainer .content .main .title { font-size: 48px; line-height: 59px; } #webContainer .content .mainl.phones { margin-top: 0px; } ARTICLE.main .steps > DIV:first-child { margin-right: 0; max-width: unset; width: 100%; } ARTICLE.main .steps > DIV:last-child { width: 100%; margin-top: 40px !important; } ARTICLE.main IFRAME { width: 100%; height: 100%; aspect-ratio: 16 / 9; } ARTICLE.main .customers UL { position: relative; left: -12px; } ARTICLE.main .steps .install { text-align: center; } #topbar .submenu I { top: 15px; right: 11px; } #topbar.loggedin .submenu > DIV { top: -365px; } #topbar .submenu > DIV { right: 200px; top: -265px; } } @media (max-width: 1000px) { #edit-type .note { display: none; } } @media (max-width: 640px) { #weekDaysRec SPAN { margin-bottom: 10px; } #mailEdit { margin: 10px; border-bottom-width: 10px; } #faq LI H2 { width: 100%; } SELECT[name="tz_override"] { width: 100%; } #resetTz { margin-top: 5px; display: inline-block; } } @media (max-width: 800px) { #webContainer .plans { display: block; } #webContainer .plan { width: 100%; max-width: 350px; margin: 0 auto !important; margin-top: 100px !important; } #weekDaysRec SPAN { padding: 6px 6px; } }