*{ margin:0; padding:0; border:0; font-size: 100%; outline: 0; vertical-align: baseline; font-weight: normal; line-height: normal; font-style: normal; list-style: none; text-decoration: none; } :root{ --white:#ffffff; --black:#242424; --red5:#f04444; --gray0:#f9fafb; --gray1:#f3f4f6; --gray2:#e5e7eb; --gray3:#d1d5dc; --gray4:#9ca3af; --gray5:#6b7280; --gray6:#4b5563; --gray7:#374151; --gray8:#1f2937; --gray9:#111827; --slate0:#f8fafc; --slate1:#f1f5f9; --slate2:#e2e8f0; --slate3:#cbd5e1; --slate4:#94a3b8; --slate5:#64748b; --slate6:#475569; --slate7:#334155; --slate8:#1e293b; --slate9:#0f172a; --blue0:#eff6ff; --blue1:#dbeafe; --blue2:#bfdbfe; --blue3:#93c5fd; --blue4:#60a5fa; --blue5:#3b82f6; --blue6:#2563eb; --blue7:#1d4ed8; --blue8:#1e40af; --blue9:#1e3a8a; --orange0:#fff7ed; --orange1:#ffedd5; --orange2:#fed7aa; --orange3:#fdba74; --orange4:#fb923c; --orange5:#f97316; --orange6:#ea580c; --orange7:#c2410c; --orange8:#9a3412; --orange9:#7c2d12; --green0:#f0fdf4; --green1:#dcfce7; --green2:#bbf7d0; --green3:#86efac; --green4:#4ade80; --green5:#22c55e; --green6:#16a34a; --green7:#15803d; --green8:#166534; --green9:#14532d; --bkgrnd:#f2f3f9; --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --success:url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2096%2096%22%3E%3Cdefs%3E%3Cstyle%3E.st0%20%7Bfill%3A%20%23fff%3B%7D.st1%20%7Bfill%3A%20%2322c55e%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ccircle%20class%3D%22st1%22%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%2248%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M43.4%2C61.8l-13-13%2C3.3-3.3%2C9.8%2C9.8%2C21-21%2C3.3%2C3.3-24.2%2C24.2Z%22%2F%3E%3C%2Fsvg%3E"); --alert:url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2096%2096%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.st0%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23f97316%3B%0A%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20.st1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fff%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2247.9%22%20cy%3D%2248%22%20r%3D%2248%22%2F%3E%0A%20%20%3Cpath%20class%3D%22st1%22%20d%3D%22M47.7%2C64.6c-1%2C0-1.9-.4-2.6-1.1s-1.1-1.6-1.1-2.6.4-1.9%2C1.1-2.6%2C1.6-1.1%2C2.6-1.1%2C1.9.4%2C2.6%2C1.1%2C1.1%2C1.6%2C1.1%2C2.6-.4%2C1.9-1.1%2C2.6c-.7.7-1.6%2C1.1-2.6%2C1.1ZM44%2C53.6v-21.9h7.3v21.9h-7.3Z%22%2F%3E%0A%3C%2Fsvg%3E"); } html{ font-family: var(--system-ui); color:var(--black); } body{ background-color: var(--bkgrnd); } bd{     display: flex;     flex-direction: column;     height: 100vh; -webkit-text-size-adjust: 100%; } .space_top{ flex:0 0 40px; } .login_top{ height:80px; } main{ flex:1 1 auto; } footer{ flex:0 0 100px; text-align: center; font-size: 14px; } .footer_text{ line-height: 100px; color:var(--gray8); } .footer_text a{ color:var(--blue5); } .footer_text a:hover{ text-decoration: underline; } b{ font-weight:700; } ::placeholder { color:var(--gray3); } .bold{ font-weight:700; } /* .content{ margin-top:60px; margin-left:auto; margin-right:auto; padding:0 16px; max-width: 1080px; } @media only screen and (min-width: 1024px) {     .content {         margin-top: 60px;     } } */ .content{ margin-top:0; margin-left:auto; margin-right:auto; padding:16px 28px 36px 28px; max-width: 1080px; background-color: var(--white); } @media only screen and (min-width: 1024px) {     .content {         margin-top: 60px;         border-radius:16px;     } } .space1{ display:block; height:1px; } .space2{ display:block; height:2px; } .space4{ display:block; height:4px; } .space8{ display:block; height:8px; } .space12{ display:block; height:12px; } .space16{ display:block; height:16px; } .space20{ display:block; height:20px; } .space24{ display:block; height:24px; } .space28{ display:block; height:28px; } .space32{ display:block; height:32px; } .space36{ display:block; height:36px; } .space40{ display:block; height:40px; } /* == Dashboard ============== */ .guages_top {     display: grid;     grid-template-columns: 1fr 1fr 1fr;     column-gap: 8px;     row-gap: 8px;     max-width: 1080px;     margin-bottom: 9px; } .guages_bottom {     display: grid;     grid-template-columns: 1fr 1fr;     column-gap: 8px;     row-gap: 8px;     max-width: 1080px;     margin-bottom: 16px; } .guage{ display:block; border: 1px solid var(--gray2); text-align: center; padding:8px 0 9px 0; } .guage:hover{ border: 1px solid var(--gray4); } .guage_title{ font-size:14px; pointer-events: none; color:var(--gray5); } .guage_number{ font-size:40px; pointer-events: none; color:var(--black); } /* comments ========================== */ ul.comments{ padding:0 10px; } ul.comments li{ display:block; font-size: 14px; line-height: 22px; margin-bottom: 12px; color:var(--gray5); } .comments_approved{ font-weight: 700; color:var(--green5); } ul.comments li a{ text-decoration: none; color:var(--gray7); } ul.comments li a:hover{ text-decoration: underline; } ul.comments li a.orange{ text-decoration: none; color:var(--orange5); } ul.comments li a.orange:hover{ text-decoration: underline; } div.success {     display: block;     margin: 0 auto;     height: 96px;     width: 96px;     background-image: var(--success);     background-repeat: no-repeat;     background-position: left center;     background-size: 100%; } div.alert {     display: block;     margin: 0 auto;     height: 96px;     width: 96px;     background-image: var(--alert);     background-repeat: no-repeat;     background-position: left center;     background-size: 100%; }  header{ flex:0 0 40px; display:flex; height:40px; background-color:var(--slate6); position: fixed; top: 0; width: 100%; z-index: 10; } .header_left{ flex: 1 1 auto; display:flex; } .header_brand{ display:block; color:var(--white); line-height: 39px; padding:0 8px 0 20px; margin-bottom: 1px; font-size: 22px; font-weight: 300; } .header_right{ display:none; } .header_mobile{ display:block; } .header_menu {     display: inline-block;     height: 40px;     width: 40px;     padding:0;     background-image: url(/assets/svg/menu.svg);     background-repeat: no-repeat;     background-position: right center;     background-size: 100%;     margin-top: 0;     margin-right: 12px; } @media only screen and (min-width: 1024px){ .header_mobile{ display:none; } .header_right{ display:block; flex: 0 0 auto; height:40px; margin-right: 10px; } .header_link{ display: inline-block; line-height: 40px; padding: 0 10px; font-size: 14px; color:var(--white); transition: .2s; } .header_link-selected{ text-decoration: underline; } .header_link-bold{ font-weight: 700; } .header_link:hover{ text-decoration: underline; } .header_logout:hover{ text-decoration: underline; } }  .btnspinner{ display:inline-block; width:40px; height:40px; background: url("/assets/svg/spinner_btn.svg") no-repeat 50% 50%; } .orline{ width:100%; border-bottom: 1px solid var(--gray4); text-align: center; } .ortext{ margin:0 auto; width:50px; text-align: center; margin-top: -10px; background-color: var(--bkgrnd); z-index: 10; font-size: 14px; } .searchinput{ display:block; -webkit-appearance: none; line-height: 29px; font-size: 16px; width:220px; color:var(--black); border: 1px solid var(--gray3); border-radius: 29px; text-indent: 40px; background-image: url('/assets/svg/search.svg'); background-repeat: no-repeat; background-position: left center; } .searchinput:focus{ box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } .form_col{ margin:0 auto; max-width:440px; } .form_col2{ margin:0 auto; max-width:400px; padding:0 20px; } .form_title{ font-size: 28px; text-align: center; font-weight: 700; color:var(--black); } .form_logotitle{ font-size: 28px; text-align: center; font-weight: 300; color:var(--black); } .form_input{ -webkit-appearance: none; background-color: var(--white); border:1px solid var(--gray3); line-height: 36px; width:calc(100% - 2px); color:var(--gray8); border-radius: 3px; font-size: 16px; text-indent: 16px; } .form_input:focus { box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } .form_input:disabled{ background-color: var(--gray2); color:var(--gray5); } .form_btn{ display:block; width:100%; border-radius: 3px; line-height: 40px; height:40px; background-color: var(--slate6); color:var(--white); transition: 0.3s; cursor:pointer; font-size: 16px; text-align: center; font-weight: 700; padding-bottom: 1px; } .form_btn:hover{ background-color: var(--slate8); } .form_btn-green{ display:block; width:100%; border-radius: 3px; line-height: 40px; height:40px; background-color: var(--green6); color:var(--white); transition: 0.3s; cursor:pointer; font-size: 16px; text-align: center; font-weight: 700; padding-bottom: 1px; } .form_btn-orange{ display:block; width:100%; border-radius: 3px; line-height: 40px; height:40px; background-color: var(--orange5); color:var(--white); transition: 0.3s; cursor:pointer; font-size: 16px; text-align: center; font-weight: 700; padding-bottom: 1px; } .form_btn-google { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; line-height: 40px; border-radius: 4px; background-color: var(--slate6); color: var(--white); border: none; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; text-decoration: none; } .form_btn-google:hover { background-color: var(--slate8); box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .form_btn-google:active { background-color: var(--slate8); } .google-logo { width:22px; margin-right: 12px; } .google-text { white-space: nowrap; font-size: 16px; font-weight: 500; } .form_cancel{ display:block; font-size: 16px; text-align:center; color:var(--gray4); line-height: 24px; width:100%; } .form_cancel:hover{ text-decoration: underline; } .cancelbtn{ display:block; font-size: 16px; text-align:center; color:var(--gray4); line-height: 24px; width:100%; } .cancelbtn:hover{ text-decoration: underline; } .form_foottext{ text-align: center; font-size: 14px; line-height: 22px; color:var(--gray4); } .form_footlink{ color:var(--blue5); } .form_footlink:hover{ text-decoration: underline; } .eye_on{ display:inline-block; width:24px; height:24px; background-image: url(/assets/svg/eye-on.svg);     background-repeat: no-repeat;     background-position: center center; } .eye_off{ display:inline-block; width:24px; height:24px; background-image: url(/assets/svg/eye-off.svg);     background-repeat: no-repeat;     background-position: center center; } .form_passcontainer { position: relative; width: 100%;  } .form_passcontainer input { width:calc(100% - 2px); } .form_passtoggle { position: absolute; right: 10px; top: 55%; transform: translateY(-50%); cursor: pointer; } .form_select { display:block; font-size: 16px; font-family: sans-serif; font-weight: 400; color: var(--black); line-height: 36px; padding:0 0 0 16px; width: 100%; box-sizing: border-box; margin: 0; background-color: var(--white); border:1px solid var(--gray3); border-radius: 3px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url('/assets/svg/selectarrow.svg'); background-repeat: no-repeat, repeat; background-position: right 10px top 52%, 0 0; background-size: .85em auto, 100%; } .form_select:focus { box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } .form_textarea {     -webkit-appearance: none;     font-family: var(--system-ui);     background-color: var(--white);     border:1px solid var(--gray3);     height:80px;     width:calc(100% - 24px);     line-height: 28px;     color: var(--black);     border-radius: 3px;     font-size: 16px;     padding:12px;     text-indent: 0px; } .form_textarea:focus { box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } label{ display:block; font-size: 14px; line-height: 30px; color:var(--gray5); } label.center {     text-align: center; } label a{ display:inline-block; font-size: 14px; line-height: 30px; color:var(--blue5); } label a:hover{ text-decoration: underline; } label button{ background-color: var(--bkgrnd); color:var(--blue4); } label button:hover{ cursor:pointer; } label button:hover{ text-decoration: underline; } /* picker ================ */ .form_pick{ -webkit-appearance: none; background-color: var(--white); border:1px solid var(--gray3); line-height: 34px; width:calc(100% - 20px); color:var(--gray7); border-radius: 3px; font-size: 16px; text-indent: 8px; } .form_pick:focus { box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } .form_pick:disabled{ background-color: ##EEEEEE; } input[type="date"]{ padding:0 18px 0 0; font-family: inherit; margin:0px; } /* radio ================ */ .radio{ display:flex; line-height: 40px; border-bottom: 1px solid var(--gray3); color:var(--gray7); font-size: 14px; } .radio_label{ flex:1 1 auto; font-size: 14px; color:var(--gray5); padding:12px 0; } .radio_rt{ flex:0 0 130px; text-align: right; padding:12px 0; } .radio_inp{ margin-right: 2px; } .radio_rt span{ display:inline-block; margin-right: 20px; } .form_2c {     display: flex; } .form_2cl {     flex: 1 1 50%;     margin-right: 3px; } .form_2cr {     flex: 1 1 50%;     margin-left: 3px;     text-align: right; } .form_2cr a {     display: inline-block;     font-size: 14px;     line-height: 30px;     color: var(--blue5); } .form_3c {     display: flex; } .form_3cl {     flex: 1 1 33.33%;     margin-right: 3px; } .form_3cc {     flex: 1 1 33.33%;     margin-right: 3px;     margin-left: 3px; } .form_3cr {     flex: 1 1 33.33%;     margin-left: 3px;     text-align: left; } .form_earn {     display: flex; } .form_earn1 {     flex: 1 1 70%;     margin-right: 6px; } .form_earn2 {     flex: 1 1 30%; } .form_csz {     display: flex; } .form_c {     flex: 1 1 auto;     margin-right: 6px; } .form_s {     flex: 0 0 60px;     margin-right: 6px; } .form_z {     flex: 0 0 90px; } .form_accrue {     display: flex; } .form_accrue_left {     display: flex;     flex: 1 1 40%;     margin-right: 12px; } .form_accrue_right {     flex: 1 1 60%; } .form_accrue_left div {     font-size: 14px;     line-height: 37px;     margin-left: 4px; } .form_amt {     -webkit-appearance: none;     background-color: var(--white);     border: 1px solid var(--gray3);     line-height: 36px;     width: calc(100% - 18px);     color: var(--gray8);     border-radius: 3px;     font-size: 16px;     text-align: right;     padding-right: 16px; } .form_amt:focus { box-shadow: 0 0 0 1px rgba(59, 153, 252, .7); box-shadow: 0 0 0 1px -moz-mac-focusring; border-color:rgba(59, 153, 252, .7); outline: none; } .form_accruebal {     display: flex; } .form_accruebal_left {     display: flex;     flex: 1 1 50%;     margin-right: 16px; } .form_accruebal_right {     display: flex;     flex: 1 1 50%; } .form_accruebal_left div {     font-size: 14px;     line-height: 37px;     margin-left: 4px; } .form_accruebal_right div {     font-size: 14px;     line-height: 37px;     margin-left: 4px; } .form_subtitle{ font-size: 16px; font-weight: 700; line-height: 24px; } .form_text{ font-size: 16px; color:var(--gray5); line-height: 24px; } .topline {     border-top: 1px solid var(--gray3); } .form_checkbox-label { display:flex;     appearance: none;     line-height: 40px;     color: var(--black);     font-size: 14px;     padding-left: 16px;     cursor: pointer;     border-bottom: 1px solid var(--gray3); } .form_checkbox {     margin-right: 16px;     cursor: pointer; } .form_clocktitle {     font-size: 24px;     text-align: center;     font-weight: 500;     color: var(--black); } clock-date {     font-size: 24px;     text-align: center;     font-weight: 500; } .form_clocktime {     font-size: 110px;     font-weight: 300;     text-align: center;     line-height: 110px; } clock-time {     font-size: 110px;     font-weight: 300;     text-align: center;     line-height: 110px; } .form_clocksubtitle {     font-size: 16px;     text-align: center;     line-height: 24px; } .form_redtext {     font-size: 20px;     text-align: center;     line-height: 28px;     color: var(--orange5); } .form__connectqbbtn{ display:block; width:100%; border-radius: 3px; line-height: 43px; height:43px; background-color:#2c9f1c; color:var(--white); transition: 0.3s; cursor:pointer; margin:0 auto; border:none; font-weight: 500; padding:0 10px; background-image: url("/assets/svg/connecttoquickbooks.svg"); background-repeat: no-repeat; background-position: center center; } .form__connectqbbtn:hover{ background-color:#2c8419; }  .nav{ display:none; } .nav_links{ display:none; } .nav_login{ display:none; } @media only screen and (min-width: 1024px){ nav{ flex:0 0 48px; display:flex; height:40px; padding-bottom: 8px; position: fixed; top: 40px; width: 100%; z-index: 8; } .nav.scrolled{ border-bottom: 1px solid var(--gray2); } .nav_links{ display:block; flex: 1 1 auto; height:40px; margin-left: 12px; } .nav_link{ line-height: 40px; padding:6px 12px; font-size: 16px; color:var(--gray5); } .nav_link-static{ display:inline-block; line-height: 40px; padding:6px 12px; font-size: 16px; color:var(--gray5); } .nav_nonlink{ display:inline-block; line-height: 40px; padding:6px 12px; font-size: 16px; color:var(--gray5); } .nav_link:hover{ border-bottom: 1px solid var(--gray3); } .nav_link-selected:hover{ border-bottom: 1px solid var(--black); } .nav_link-selected{ color:var(--black); border-bottom: 1px solid var(--black); } .nav_link-orange{ color:var(--orange5) !important; font-weight: 500; } .nav_login{ display:block; flex: 0 0 auto; height:40px; margin-right: 6px; } .nav_login a{ line-height: 40px; padding:6px 10px; font-size: 16px; color:var(--gray5); } .nav_login em{ font-style: normal; line-height: 40px; padding:6px 10px; font-size: 16px; color:var(--gray5); } .nav_login a:hover{ border-bottom: 1px solid var(--gray3); } }  .post{ margin:0 auto; max-width: 700px; } .post p{ font-size: 18px; line-height: 28px; margin-bottom: 28px; } .post h1{ font-size: 36px; font-weight: 700; margin-bottom: 28px; } .post h2{ font-size: 24px; font-weight: 700; margin-bottom: 20px; } .post ul, .post ol {     margin: 0 auto;     max-width: 700px;     margin-block-start: 1.1em;     margin-block-end: 1.1em;     font-size: 18px;     line-height: 28px; } .post ul li {     display: list-item;     list-style: disc;     margin-left: 19px;     padding-left: 6px;     line-height: 1.4em;     margin-bottom: 0.5em;     color: var(--black); } .post a{ color:var(--blue5); } .post a:hover{ text-decoration: underline; } dash-time{ font-weight: 700; } .title{ display:flex; } .title_left{ flex:1 1 auto; display:flex; font-size: 24px; font-weight: 700; } .title_h2{ font-weight: 700; font-size: 24px; color:var(--black); } .title_left span{ display:inline-block; font-size: 16px; line-height: 29px; color:var(--gray5); margin-left: 12px; } .title_sublink{ display:inline-block; line-height: 31px; font-size: 16px; padding:0 20px 0 0; color:var(--black); /*  border-bottom: 1px solid var(--white); */ } .title_sublink-off{ color:var(--gray4); } .title_sublink-off:hover{ text-decoration: underline; } .title_left span a{ display:inline-block; font-size: 16px; line-height: 29px; color:var(--gray7); margin-left: 0px; } .title_right{ display:flex; } .title .dt{ display:none; } .title_right span{ display:inline-block; color:var(--gray4); height:24px; line-height: 24px; margin-right: 8px; } .title_right a.addwide {     display: inline-block; height:24px;     border-radius: 24px;     color: var(--white);     transition:.2s;     background-color: var(--black);     border:1px solid var(--black);     font-size: 16px;     font-weight: 500;     text-align: center;     line-height: 23px;     padding:0 20px; } .title_right a.addwide:hover{ background-color: var(--brand); border:1px solid var(--brand); color: var(--white); } .title_right a.add {     display: inline-block; width:84px; height:24px;     border-radius: 24px;     color: var(--white);     transition:.2s;     background-color: var(--slate6);     border:1px solid var(--slate6);     font-size: 16px;     font-weight: 500;     text-align: center;     line-height: 23px; } .title_right a.add:hover{ background-color: var(--slate8); border:1px solid var(--slate8); color: var(--white); } .title_right a.close {     display: inline-block; width:24px; height:24px;     border-radius: 24px;     color: var(--white);     transition:.2s;     background-color: var(--slate6);     border:1px solid var(--slate6);     background-image: url(/assets/svg/close.svg);     background-repeat: no-repeat;     background-position: left center;     margin-left: 4px; } .title_right a.close:hover{ background-color: var(--slate8); border:1px solid var(--slate8); color: var(--white); } .title_right a.upgrade {     display: inline-block; width:100px; height:24px;     border-radius: 24px;     color: var(--white);     transition:.2s;     background-color: var(--slate6);     border:1px solid var(--slate6);     font-size: 16px;     font-weight: 500;     text-align: center;     line-height: 23px; } .title .right a.upgrade:hover{ background-color: var(--slate8); border:1px solid var(--slate8); color: var(--white); } .ti-switch-on{ display:inline-block; font-size: 14px; color:var(--black); padding:8px 8px 0 8px; } .ti-switch{ display:inline-block; font-size: 14px; color:var(--gray4); padding:8px 8px 0 8px; } .ti-em{ display:inline-block; font-size: 14px; color:var(--black); padding-top: 8px; } .ti-switch:hover{ text-decoration: underline; } .subtitle{ display:flex; /*  background-color: var(--white); */ color:var(--gray8); font-size: 16px; padding-top: 6px; } .subtitle .left{ flex: 1 1 auto; } .subtitle .left a{ display:inline-block; line-height: 31px; font-size: 16px; padding:0 10px; color:var(--gray4); border-bottom: 1px solid var(--bkgrnd); } .subtitle .left a:hover{ border-bottom: 1px solid var(--gray3); } .subtitle .left a.selected{ color:var(--gray8); border-bottom: 1px solid var(--gray5); } .subtitle .left a.selected:hover{ border-bottom: 1px solid var(--gray5); } .subtitle .left div{ display:inline-block; line-height: 31px; font-size: 16px; padding:0 10px; color:var(--gray4); border-bottom: 1px solid var(--white); } .subtitle .left div:hover{ border-bottom: 1px solid var(--white); } .subtitle .left div.selected{ color:var(--gray8); } .subtitle .left div.selected:hover{ border-bottom: 1px solid var(--white); } .subtitle .right{ flex: 0 0 auto; text-align: right; } .subtitle .dt{ display:none; } @media only screen and (min-width: 768px){ .subtitle .dt{ display:block; } } .title .left{ display:flex; } .title .left h2{ display:inline-block; font-weight: 700; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .title_locked{ display:none; } @media only screen and (min-width: 1088px){ .title .left h2{ max-width: 400px; } .title_locked{ display:inline-block; font-size: 16px; padding-top: 6px; margin-left: 10px; color:var(--orange5); } } .title .left a.subtitle{ font-size: 18px; line-height: 30px; } .arrows2 {     display: flex;     height: 32px;     width: 69px;     margin-right: 10px; } a.arrowleft {     display: inline-block;     line-height: 30px;     height: 30px;     width: 30px;     border: 1px solid var(--gray2);     border-radius: 1px;     background-image: url(/assets/svg/arrow_left.svg);     background-repeat: no-repeat;     background-position: left center;     margin-right: 5px; } a.arrowleft:hover{ border: 1px solid var(--gray5); } div.arrowleft{ display:inline-block; line-height: 30px; height:30px; width:30px; border:1px solid var(--gray2); border-radius: 1px; margin-right: 5px; } a.arrowright {     display: inline-block;     line-height: 30px;     height: 30px;     width: 30px;     border: 1px solid var(--gray2);     border-radius: 1px;     background-image: url(/assets/svg/arrow_right.svg);     background-repeat: no-repeat;     background-position: left center; } a.arrowright:hover{ border: 1px solid var(--gray5); } div.arrowright{ display:inline-block; line-height: 30px; height:30px; width:30px; border:1px solid var(--gray2); border-radius: 1px; } @media only screen and (min-width: 1088px){ .title .dt{ display:inline-block; } } .rangebtns{ display: inline-block; padding: 10px 0; text-align: right; line-height: 32px; } .title_range{ color:var(--gray4); } .title_range a { display: inline-block; padding: 0 6px; line-height: 32px; font-size: 16px; color:var(--gray4); } .title_range a:hover { text-decoration: underline; } .title_range div { display: inline-block; padding: 0 6px; line-height: 32px; font-size: 16px; color:var(--gray7); }  table { width: 100%;   border-collapse:separate;   border-spacing: 0; font-size: 14px; border-top: 1px solid var(--gray4); } .tablescroll {     overflow-x: scroll; } td div, td a{ display:block; padding:10px; white-space: nowrap; color:var(--gray7); } .formtable td div, .formtable td a{ display:block; padding:10px; white-space: nowrap; color:var(--gray7); } .tgreen{ color:var(--green5); } .torange{ color:var(--orange5); } td a.link{ color:var(--blue5); font-weight: 500; } td a.red{ color:var(--red5); } td a.green, td div.green{ color:var(--green5); } td a.orange, td div.orange{ color:var(--orange5); } td a.blue, td div.blue{ color:var(--brandlnk); } td a.greenlink, td div.greenlink{ color:var(--green5); } td a span{ pointer-events: none; } td a span.red{ color:var(--red5); } td a b{ pointer-events: none; } td a.red{ color:var(--red5); } .dkline{ border-bottom: 1px solid var(--gray4); } .dkline-bold{ border-bottom: 1px solid var(--gray4); font-weight: 700; } .ltline{ border-bottom: 1px solid var(--gray2); } .ltline-bold{ border-bottom: 1px solid var(--gray2); font-weight: 700; } tr.gr{ background-color: var(--gray0); } tr.nohovgr{ background-color: var(--gray0); } tr:hover{ background-color: var(--bkgrnd); } tr.hov:hover{ background-color: var(--blue0); } tr.gr:hover{  background-color: var(--blue0); } tr.nohov:hover{ background-color: var(--white); } tr.nohovgr:hover{  background-color: var(--gray0); } .drawer_table .dkline{ border-bottom: 1px solid var(--gray4); } .drawer_table .ltline{ border-bottom: 1px solid var(--gray3); } .drawer_table tr:hover{ background-color: var(--white); } .drawer_table tr.hov:hover{ background-color: var(--white); } .drawer_table tr.nohov:hover{ background-color: var(--bkgrnd); } .warnbtn{ color:var(--orange5); font-weight: 500; } .warnbtn:hover{ background-color: var(--orange5); color:var(--white); } .greenbtn{ color:var(--green6); } .greenbtn:hover{ background-color: var(--green6); color:var(--white); } .graytxt{ color:var(--gray4); } .warn{ color:var(--orange5); font-weight: 500; } .warn:hover{ background-color: var(--orange5); color:var(--white); } .balert{ color:var(--green5); } .balert:hover{ background-color: var(--green5); color:var(--white); } .galert{ color:var(--yellow5); } .galert:hover{ background-color: var(--yellow5); color:var(--white); } .editable{ color:var(--gray7); } .editable:hover{ background-color: var(--blue4); color:var(--white); } .hscroll{ overflow-x: scroll; } .hscroll table{ width: 1080px; } .hscroll .title{ width: 1080px; } .hscroll .subtitle{ width: 1080px; } td.dt{ display:none; } @media only screen and (min-width: 768px){ td.dt{ display:table-cell; } } .split {     display: block; } .split_left { } .split_right { } @media only screen and (min-width: 768px){ .split {     display: flex; } .split_left {     flex: 1 1 50%;     padding-right: 20px; } .split_right {     flex: 1 1 50%;     padding-left: 20px; } } .table_btns {     text-align: right; } .table_btns a {     display: inline-block;     font-size: 14px;     line-height: 30px;     color: var(--gray8);     border-radius: 5px;     padding: 0 12px 0 12px;     margin: 2px 0;     border: 1px solid var(--gray2);     background-color: var(--white);     transition: .1s; } .table_btns a:hover{ border: 1px solid var(--gray5); } .table_btns button{     display: inline-block;     font-size: 14px;     line-height: 30px;     color: var(--gray8);     border-radius: 5px;     padding: 1px 12px 0 12px;     margin: 2px 0;     border: 1px solid var(--gray2);     background-color: var(--white);     transition: .1s; } .table_btns button:hover{ border: 1px solid var(--gray5); cursor:pointer; } .table_btns recalc-btn{     display: inline-block;     font-size: 14px;     line-height: 30px;     width:76px;     text-align: center;     color: var(--gray8);     border-radius: 5px;     padding: 0 12px 0 12px;     margin: 2px 0;     border: 1px solid var(--gray2);     background-color: var(--white);     transition: .1s; } .table_btns recalc-btn:hover{ border: 1px solid var(--gray5); cursor:pointer; } .table_btns recalc-btn.green{ border: 1px solid var(--green5); background-color: var(--green5); color:var(--white); } .table_btns sendtoqbo-btn{     display: inline-block;     font-size: 14px;     line-height: 30px;     width:132px;     text-align: center;     color: var(--gray8);     border-radius: 5px;     padding: 0 12px 0 12px;     margin: 2px 0;     border: 1px solid var(--gray2);     background-color: var(--white);     transition: .1s; } .table_btns sendtoqbo-btn:hover{ border: 1px solid var(--gray5); cursor:pointer; } .table_btns sendtoqbo-btn.green{ border: 1px solid var(--green5); background-color: var(--green5); color:var(--white); }  .drawer { display: none; } .drawer_header{ display:flex; height:50px; background-color:var(--slate6); border-bottom:1px solid var(--gray3); } .drawer_hdleft{ flex:0 0 114px; text-align: left; padding-top: 8px; padding-left: 10px; background-color:var(--slate6); } .drawer_hdright{ display:flex; flex:0 0 114px; padding-top: 10px; padding-right: 10px; justify-content: right; background-color:var(--slate6); } .drawer_hdright span{ display:inline-block; padding-top: 8px; font-size: 14px; color:var(--slate3); margin-right: 8px; } .drawer_title{ flex:1 1 auto; display:block; line-height: 50px; font-size: 21px; padding:0 10px; font-weight: 500; color:var(--white); text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .drawer_close { margin: 0; padding: 0; border: 1px solid var(--slate6); background-color:var(--slate6); cursor: pointer; line-height: 32px; width: 32px; height: 32px; background-image: url('/assets/svg/drawerclose.svg'); background-repeat: no-repeat; background-position: center center; vertical-align: top; border-radius: 2px; } a.drawer_back {     display: inline-block;     line-height: 32px;     height: 32px;     width: 32px;     border: 1px solid var(--slate6);     border-radius: 2px;     background-image: url('/assets/svg/arrowleft.svg');     background-repeat: no-repeat;     background-position: left center;     margin-right: 32px; } .drawer_back:hover, .drawer_close:hover { border: 1px solid var(--slate5); background-color:var(--slate5); } .drawer_arrows {     display: flex; } a.drawer_arrowleft {     display: inline-block;     line-height: 32px;     height: 32px;     width: 32px;     border: 1px solid var(--slate6);     border-radius: 2px;     background-image: url('/assets/svg/arrowleft.svg');     background-repeat: no-repeat;     background-position: left center;     margin-right: 4px; } .drawer_arrowleft {     display: inline-block;     line-height: 32px;     height: 32px;     width: 32px;     border: 1px solid var(--slate6);     border-radius: 2px;     background-image: url('/assets/svg/arrowleft_off.svg');     background-repeat: no-repeat;     background-position: left center;     margin-right: 4px; } a.drawer_arrowright {     display: inline-block;     line-height: 32px;     height: 32px;     width: 32px;     border: 1px solid var(--slate6);     border-radius: 2px;     background-image: url('/assets/svg/arrowright.svg');     background-repeat: no-repeat;     background-position: left center; } .drawer_arrowright {     display: inline-block;     line-height: 32px;     height: 32px;     width: 32px;     border: 1px solid var(--slate6);     border-radius: 2px;     background-image: url('/assets/svg/arrowright_off.svg');     background-repeat: no-repeat;     background-position: left center; } div.drawer_arrowright{ display:inline-block; line-height: 32px; height:32px; width:32px; border: 1px solid var(--slate6); border-radius: 2px; } a.drawer_arrowleft:hover{ border: 1px solid var(--slate5); background-color:var(--slate5); } a.drawer_arrowright:hover{ border: 1px solid var(--slate5); background-color:var(--slate5); } .drawer_body { position: fixed; top: 0; right: 0; bottom: 0; height: 100%; width: 100%; max-width: 600px; z-index: 9999; overflow: auto; transition: transform 0.2s; background-color: var(--bkgrnd); display: flex; flex-direction: column; -webkit-transform: translateX(103%); transform: translateX(103%); -webkit-overflow-scrolling: touch; box-shadow: 0 2px 6px #777; } .drawer_content{ padding:12px 12px 16px 12px; background-color: var(--white); border-radius:16px; } .drawer_main { position: relative; overflow-x: hidden; overflow-y: auto; height: 100%; flex-grow: 1; padding: 20px; } .drawer.isactive { display: block; } .drawer.isvisible .drawer_body { -webkit-transform: translateX(0); transform: translateX(0); } .drawer.isvisible .drawer_modal { opacity: 0.36; } .drawer_modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; z-index: 200; opacity: 0; transition: opacity 0.2s; background-color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .drawer_tabs{ display:flex; color:var(--gray8); font-size: 16px; margin-bottom: 8px; } .drawer_tabs .left{ flex: 1 1 auto; } .drawer_tabs .left a{ display:inline-block; line-height: 31px; font-size: 16px; padding:0 10px; color:var(--gray4); border-bottom: 1px solid var(--bkgrnd); } .drawer_tabs .left a:hover{ border-bottom: 1px solid var(--gray3); } .drawer_tabs .left a.selected{ color:var(--gray8); border-bottom: 1px solid var(--gray5); } .drawer_tabs .left a.selected:hover{ border-bottom: 1px solid var(--gray5); }