/* File : 0 */ /* Started Brand Theme CSS : Invoice_Basic - practice.aliens.school */ /* Ended Brand Theme CSS : Invoice_Basic - practice.aliens.school */ /* Started App Theme CSS : App:Invoice - Branch:practice.aliens.school */ /* Base CSS */ :root{ --0: rgb(0 0 0 / 0); --a: rgb(64 141 251); --aa: rgb(0 106 231); --aat: rgb(0 66 189 / 22%); --aaa: linear-gradient(333deg, var(--a), var(--aa)); --a1: rgb(51 56 80); --a2: rgb(76 82 108); --lgaa:linear-gradient(270deg,#a47fd2,#79afee,#1e80f3); --lgb:conic-gradient(#aebcff 1%, #7e94ff 24%, #62bce7 45%, #ce70ff 66%, #b8c3fd 92%); --at: rgba(45 140 255 / 44%); --b: rgb(255 255 255); --b1:rgb(247 247 254); --b2:rgb(235 243 254); --br: rgb(26 25 25); --bt: rgb(244 244 244); --b-t: rgb(237 237 247); --tb: linear-gradient(180deg, rgb(230 230 230), transparent, transparent); --c: rgb(44 43 43); --c1: rgb(24 28 46); --c2: rgb(33 38 60); --cr: rgb(228 37 39); --cg: rgb(73 85 105); --cbg: rgb(45 50 74); --cbg1: rgb(119 119 119); --c0: rgb(181 179 191); --green: rgb(8 152 73); --green1: rgb(250 252 255); --red: #d6141d; --y1: #fff9e6; --y2: rgb(251, 244, 210); --y3: #cc9a06; --bc: rgb(240 240 240); --bg: rgb(244 244 244 / 44%); --hover: linear-gradient(90deg, rgb(0 0 0 / 1%), rgb(0 0 0 / 4%), rgb(0 0 0 / 4%), rgb(0 0 0 / 4%), rgb(0 0 0 / 1%)); --b-t22: rgb(255 255 255 / 22%); --b-t44: rgb(255 255 255 / 44%); --b-t50: rgb(216 247 246 / 50%); --b-t52: rgb(79 165 144 / 52%); --b-t77: rgb(255 255 255 / 77%); --b-t88: rgb(255 255 255 / 88%); --b-t95: rgb(255 255 255 / 95%); --bor: rgb(63 63 63 / 30%); --btn: linear-gradient(333deg, var(--a), var(--aa)); --btn1: linear-gradient(333deg, var(--a), var(--aa)); --btn2: linear-gradient(333deg, var(--a), var(--aa)); --btn3: linear-gradient(333deg, var(--a), var(--aa)); --btn4: linear-gradient(333deg, var(--a), var(--aa)); --bt-bx: 0 2px 3px rgba(0, 0, 0, .050980392156862744); --bs: 0 0.5rem 1.2rem rgb(189 197 209 / 20%); --bss: 0px 2px 4px 0px rgb(31 31 31 / 22%); --bs-b: 0px 2px 5px 3px rgb(31 31 31 / 11%); --bs-bp: 0 7px 12px 0 rgb(215 213 226); --bs-bb: inset 0 -15px 22px 0px rgb(0 0 0 / 7%), inset 0 1px 4px 0px rgb(0 0 0 / 7%), 0 1px 2px rgb(0 0 0 / 11%); --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 4%), inset 0 1px 4px 0px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 4%); --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 2%), inset 0 1px 4px 0px rgb(0 0 0 / 2%), 0 1px 2px rgb(0 0 0 / 2%); --bs-bs: inset 0 -7px 11px 0px rgb(0 0 0 / 1%), inset 0 1px 4px 0px rgb(0 0 0 / 1%), 0 1px 2px rgb(0 0 0 / 1%); --bs-bt: inset 0 0px 4px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%); --bs-bl: inset 0 -4px 7px 0px rgb(0 0 0 / 11%), inset 0 1px 7px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(0 0 0 / 11%); --bs-br: 0px 4px 7px 0px rgb(215 215 215), inset 0px 0px 56px 0px rgb(222 228 240); } /*@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap'); */ @import url('https://fonts.googleapis.com'); @import url('https://fonts.gstatic.com'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); html{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } @media (min-width: 999px){ /* SCROLLBAR */ ::-webkit-scrollbar {width:0;height:4px} ::-webkit-scrollbar-track {background: var(--b-t22);} ::-webkit-scrollbar-thumb {background: var(--bc);} ::-webkit-scrollbar-thumb:hover {background: #4444;} /* SCROLLBAR */ } /*# Tags */ html,body,aliens,dapp,app,.app{display:block;height:100%;width:100%;overflow:hidden} html{position:fixed;height:100%;width:100%;overflow:hidden;color:#eff;font-family:system-ui;color:var(--c);} body{margin:0;overflow:hidden;background:var(--b);} desktop { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } content { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: 3; } aerea { display: block; } /*main>* { margin: 0 22px; }*/ d.hero { padding-left: calc(var(--bs-x)* .3); margin-right: auto; margin-left: auto; position: relative; } ext:active { border: solid 2px var(--bc); border-radius: 8px; } ext { display: flex ; justify-content: center; align-items: center; height: 33px; width: 33px; border: solid 2px var(--0); } rightbar { position: absolute; height: auto; bottom: 0; left: 0; right: 0; width: 100%; cursor: default; z-index: 999999999; } content {display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;overflow: hidden;} header, aerea { display: block;position:relative; } /*aerea { background-image: linear-gradient(189deg, var(--b1) 0, rgba(var(--lg-b), 0) 85rem); } aerea { min-height: calc(100vh - 144px); min-width: 100%; } */ bl hd{display:block}bl bd{display:block} bl bs { position: relative; border-radius: 33px; display: flex; justify-content: center; align-items: center; background: var(--b); z-index: 8; box-shadow: var(--bs-b); padding: 22px; } bl bs count{width: 100%;} /*grid bl{display: block; position: relative; z-index: 2; overflow: hidden; border-radius:22px; }*/ grid bl.bl{transition: 333ms;} grid bl.bl:active { transform: scale(1.1); z-index: 88; left: 0; right: 0; background: rgb(0 0 0); position: relative; box-shadow: -7px 11px 7px 0px rgb(0 0 0); } grid bl::before{ content: ''; background-image: url(); height: 111px; width: 111px; position: absolute; left: 11%; top: 44%; z-index: 1; background-position: 50%; filter: blur(44px); } grid bl bl { border-radius: 0px;url();background-size: 100% 100%;} /*grid bl bd{display:block; position: relative;z-index: 2;}*/s grid bl mm{ position: absolute; right: 0; top: 11px; width: 25px; margin: 0; padding: 0;transition: 333ms;} chms btn { padding: 7px 11px; } ins { text-decoration: unset; } tr{transition:333ms;background-image:unset} /*tr:hover{scale(1.02) translate(0px, 2px)box-shadow: 0 7px 22px 0px rgba(0,0,0,0.22);background-image:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.10), rgba(255,255,255,0.05) )} */ tr.done { color: rgba(0,255,0,1); background: #000; } tr { cursor: default; } tr { background: linear-gradient( 123deg , rgb(63 81 181 / 10%), rgb(0 188 212 / 10%), rgb(63 81 181 / 10%) ); } th, td{padding: 11px;overflow-wrap: anywhere;height: 55px; text-align: center; box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.11); } table { width: 100%; } cr { color: green; font-size: 200%; background: rgba(139,195,74,0.22); padding: 0 22px; border-radius: 7px; } dr { color: red; font-size: 200%; padding: 0px 22px; background: rgba(244,67,54,0.22); border-radius: 7px; } square { width: 100%; display: block; height: auto; } square::after { content: ''; padding-top: 100%; display: block; } .square { position: absolute; top: 0; bottom: 0; height: auto; left: 0; right: 0; width: auto; } price { font-size: .78515625rem; font-weight: 400; } th:nth-child(1), td:nth-child(1) { padding-left: 1rem ; } a.this { color: var(--a); font-weight: unset; } .cblue {color: var(--aa);} .bblue {background: var(--aa);color: var(--b);} .bgrey { background: var(--bc); } .circle { display: flex ; background: var(--b-t50); justify-content: center; border: solid 1px var(--b-t52); border-radius: 15px; width: 1.5rem; height: 1.5rem; } .bblue:hover { background: var(--a); } .bgrey:active { background: var(--c0); color: var(--b); } hd table tr { border: unset; width: 100%;} circle { display: grid; left: 0; right: 0; top: 0; bottom: 0; position: absolute; grid-template-columns: auto auto; border-radius: 50%; background: #fff; box-shadow: inset 0px 0px 7px 0px #000; overflow: hidden; } circle::after { content: ''; top: 15%; bottom: 15%; left: 15%; right: 15%; border-radius: 50%; position: absolute; z-index: 2; background: #fff; box-shadow: 0px 0px 7px 0px #0004; } scchs .aerea { flex-direction: row; display: flex ; margin-top: 1rem; margin-left: auto; max-width: 1400px; padding-right: var(--bs-x); padding-left: var(--bs-x); margin-right: auto; padding-bottom: 5rem; } sidebar { top: 0px; height: min-content; min-width: 180px; } screen { background: var(--b); } screen:last-child { display: block; opacity: 1; z-index: 333; transition: 333ms; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; overflow-y: scroll; height: auto; width: auto; } /*screen header { background:var(--0); display: block; position: sticky; top: 0; z-index: 888; padding:0;backdrop-filter: blur(35px);}*/ screen h{ display: block; position: relative; } screen h f { height: 55px; display: grid; align-items: center; z-index: 22; grid-template-columns:55px 55px auto 55px; width: 100%; } screen h f>back { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } screen h f back svg { height: 44%; width: 44%; } screen h f>i{display: block;height: 25px;width: 25px;fill: var(--b);} screen h f>h3{display: flex;align-items: center;} screen:last-child { display: block; opacity: 1; z-index: 333; transition: 333ms; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; overflow-y: scroll; height: auto; width: auto; } /*screen { display: block; transition: 333ms; position: absolute; opacity: 0; padding-bottom: 123px; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; overflow-y: scroll; z-index: 22; height: 0; padding: 0; position: unset; width: 0; } */ @media only screen and (max-width: 999px){ html, body { overflow: scroll !important;} /*content { top: 0px;bottom:0px; }*/ .content { margin-top: 0px; } } body { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /*hovers*/ /*nav btn:hover,smenu btn:hover,hero btn:hover,aerea btn:hover { background: var(--bc); } */ @media only screen and (min-width: 999px) { console { width: calc(100% - 0px);margin-right: 0px; } smbo .aerea { gap: 1%; } bg {align-items: center;display: flex;} bg.L2 { margin: 7px; border-radius: 22px; } royal{position:absolute;left: 0; right: 0; top: 0; bottom: 0; } content { position: absolute; left: 222px; right: 48px; top: 49px; bottom: 0;;transition: 333ms } .content{max-width:99999px;position: relative; margin: auto; } extra{position:absolute;right: 0; top: 0; bottom: 0; width:444px; } new.fixed.new{position:absolute;box-shadow: unset;} .img-box { height: 434px; width: 463px; position: relative; top: unset; left: 0; margin: unset; } /*.aerea {display: flex;flex-direction: row-reverse;margin: 0 22px; justify-content:center}*/ /*sidebar{min-width:333px;width:30%;top: 0px; position: sticky; height: min-content;border-left: solid 0px var(--bc);border-right: solid 0px var(--bc);}*/ /*main { width: 70%;overflow: hidden;} */ aprove.aprove { background: #000; padding: 44px 0; } aprove exit{display:none} a.this:hover bt { border-color: transparent; } } @media only screen and (max-width: 999px) { bg.hd { background: linear-gradient(180deg, var(--b), var(--bt), var(--0)); backdrop-filter: blur(44px); -webkit-backdrop-filter: blur(44px); } console { height: calc(100% - 0px);margin-top: 0px; } nav m a { height: 50px;width: 50px;} nav m a.this { height: 55px;width: 55px;} content{top:0px} extra .extra { bottom: 55px; top: 88px; } header { padding: 0; position: sticky; top: 0; z-index: 999999; } main>* { margin: 0; } menubar {padding: 0;} m { grid-gap: 0; } m a { background: unset; box-shadow: unset; } m a.this { box-shadow: unset; } m a bt { opacity: 1; display: block; left: 0; background: transparent; font-size: 7px; padding: 0; right: 0; bottom: 4px; top: unset; } #Dashboarded i { margin-top: -18px; } #Dashboarded bt { bottom: 11px; } footer {margin-bottom: 0;} grid bl{margin-bottom: 0;} } /*# Elements */ a { color: var(--c); text-decoration: unset; font-weight: bold; } a.a, a.above { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; } bg { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; z-index: 0; } bg{display:block;position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:0;} bg>img,bg>photo,bg>.img-box{ max-width: 100%; max-height: 100%;position: absolute;opacity:0} bg.img{ background-image:var(--bg);} bg.color{ background-color:var(--b); } bg.blur{ backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); } bg.bgc{background: linear-gradient(180deg, var(--b), var(--bt), transparent, transparent, transparent, transparent, transparent, transparent, #fff1, var(--b))} bg.bgh { background: linear-gradient(180deg, var(--bt)); } i>svg, svg { height: -webkit-fill-available; width: -webkit-fill-available; margin: auto; } /*i{position: relative;display: flex; height: 55%; width: 100%; border-radius: 7px; justify-content: center; align-items: center; }*/ svg{opacity:1;max-width:100%;max-height:100%;display:block;fill:var(--c)} i { position: relative; display: flex; height: 55%; width: 100%; border-radius: 7px; justify-content: center; align-items: center; } h0, h1, h2, h3, h4, h5, h6, h7, h8, h9 { margin: 0; } bl { display: block; } h7 { font-size: 0.7em; } p { font-size: 0.88em; } d,block{display:block} f,flex{display:flex;position: relative;} grid{display:grid;grid-gap: 0;grid-template-columns: 100%;} name { font-weight: 600; display: block; } /*Code_Reader*/ @media only screen and (min-width: 999px) { sccor sidebar { width: 33.33333333%; } sccor main { width: 66.66666667%; } sccor d.aerea {flex-direction: row; } /*header{display:none;}*/ sccor sidebar { flex: 0 0 auto; margin-bottom: .5rem; border-right: solid 1px var(--bc); padding-right: 2rem; } sccor main { flex: 0 0 auto; } } @media only screen and (max-width: 999px) { sccor d.aerea { flex-direction: column; } } sccor d.aerea { display: flex ; padding-bottom: 5rem; z-index: 9; position: relative; margin-top: 1rem; margin-left: auto; } sccor d.aerea {max-width: 1400px; padding-right: var(--bs-x); padding-left: var(--bs-x); margin-right: auto; } label { font-size: .9062rem; } grid.active { background: var(--bc); } bb { right: 7px; position: absolute; display: block; height: 34px; max-height: 34px; width: 77px; border-radius: 50px; border: solid 2px; color: #fff; transition: 333ms; box-shadow: inset 0 0 0 2px; overflow: visible; top: 5px; } .oo bb { box-shadow: inset 60px 0px 0px; color: var(--c1); } bo { display: block; height: 100%; width: 100%; } oo { display: block; height: 30px; width: 30px; background: #fff; margin: 2px; border-radius: 50%; position: absolute; transition: 333ms; box-shadow: -4px 0 11px; color: #000; } .oo oo { box-shadow: unset; } bb.oo{ background: blue;} ib { display: inline-block; } select {color: var(--c); height: 100%; width: calc(100% - 44px); margin: 0 22px; border: unset; background: transparent; font-weight: bold; } select:focus-visible { outline: unset; } square { width: 100%; display: block; height: auto; } .square { position: absolute; top: 0; bottom: 0; height: auto; left: 0; right: 0; width: auto; } square::after { content: ''; padding-top: 100%; display: block; } nv gg back>i { height: 23px; width: 23px; } h h3 { white-space: nowrap; font-size: 16px; font-weight: 500; } h nv gg { height: 46px; align-items: center; display: flex ; border-bottom: 1px solid var(--bc); padding: 8px 3px 0; background: var(--b1); } h nv gg>i { height: 100%; width: 100%; fill: #fff; display: flex; justify-content: center; align-items: center; } h nv t { display: flex; align-items: center; text-align: center; width: 100%; display: block; } h nv op { display: flex; justify-content: center; align-items: center; } wl bl mg a { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative;margin: 0 2px; } wl bl mg a.this { border-bottom: solid 2px; color: var(--a); } h nv gg>i>svg { height: 66%; width: 66%; } h nv t>h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } h nv back { font-family: monospace; font-size: 1.23em; height: 100%; width: 55px; display: flex; justify-content: center; align-items: center; } h nv gg>i { height: 100%; width: 100%; fill: #fff; display: flex; justify-content: center; align-items: center; } h nv t { display: flex; align-items: center; text-align: center; width: 100%; justify-content: end;} h nv op { display: flex; justify-content: center; align-items: center; } wl bl mg a { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative;margin: 0 2px; } wl bl mg a.this { border-bottom: solid 2px; color: var(--a); } h nv op>i { height: 23px; width: 23px; } h nv gg>i>svg { height: 66%; width: 66%; } label { opacity:0.77} sl, .sl { display: block; border-radius: 11px; margin-bottom: 11px; position: relative; height: 60px; overflow: hidden; background: var(--bc); width: 100%; } sl label { position: absolute; pointer-events: none; left: 20px; top: 18px; transition: 0.2s ease all; font-size: 0.88em;font-weight: bold;} sl input:focus { box-shadow: inset 0 0 0 2px var(--c); border-radius: 11px; } sl input:focus ~ label, sl input:not(:focus):valid ~ label, .edt label { top: 2px; bottom: 10px; left: 11px; font-size: 11px; opacity: 1; font-weight: bold; margin-left: 11px; letter-spacing: 0;opacity:0.77 } sl input { font-size: 14px; width: calc(100% - 44px); margin: 0; background: transparent; border: unset; box-shadow: unset; } sl error { font-size: 0.66em; color: red; display: block; margin-top: 2px; } img { max-width: 100%; max-height: 100%; } btn:focus { border: solid 3px var(--bc); } input.checkbox { height: 15px; width: 15px; } select { border: solid 1px var(--bc); border-radius: 8px;width: -webkit-fill-available; } select:focus { border: solid 3px var(--bc); } input:focus { border: solid 3px var(--bc); } input { border: solid 1px var(--bc); border-radius: 8px; width: -webkit-fill-available; } input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); height: 40px; font-weight: bold; padding: 0 12px; } button { outline: 0; border: 0; padding: 11px; } /*teble*/ section { white-space: nowrap; } table th { font-size: .76615625rem; padding: .6rem .5rem; height: 30px; overflow-wrap: break-word; text-align: -webkit-match-parent; } tbody tr:hover { background: var(--bt); } table td btn { max-width: 50px; } table td div, th div { display: flex ; align-items: center; gap: 5px; } table { font-size: .9062rem; border-collapse: collapse; letter-spacing: 0.5px;} table td a { font-weight: 400; } table i { width: 15px; height: auto; } table td { padding: .6rem .5rem; overflow-wrap: break-word; text-align: -webkit-match-parent; height: 25px;} /*table td btn path { fill: var(--c); }*/ table tr { background: unset; border-bottom: solid 1px var(--bc); } /*table tr:nth-child(1) { border-top: unset; }*/ table div btn { padding: 4px 6px; } table td t { color: var(--c0); } table h5 { font-weight: 400; } table h6 { font-weight: 300; } /*teble*/ no { display: grid; grid-template-rows: auto auto; width: 77%; margin: 44px auto; justify-content: center; align-items: center; text-align: center; } no img { height: auto; margin: auto; width: 111px; } trcs { display: block; } trcs>trc { background: var(--b-t);display: grid; margin: 7px auto; padding: 22px; grid-template-columns:66px auto 88px; border-radius: 14px; box-shadow: var(--bs-bs);max-width:666px;width: calc(100% - 66px);} trcs>trc>hd { overflow:hidden;display: flex; justify-content: center; align-items: center; height: 55px; width: 55px; background:var(--b-t); border-radius: 16px; } order>bd { display: grid; } trcs>trc name { letter-spacing: 0; font-size: 1em; font-weight: bold; } trcs>trc price { font-weight: bold; } trcs>trc time, trc email, trc phone { font-weight: bold; letter-spacing: 0; color: gray; padding-left:4px} trcs>trc qty { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; font-weight: bold; background: rgb(0 0 0 / 10%); border-radius: 11px; margin:2px} trcs>trc img { object-fit: contain; height: 77%; width: 77%; } trcs>trc h6, trcs>trc h5{display:grid;grid-template-columns:max-content auto;max-width: 100%; overflow-wrap: anywhere; letter-spacing: 0;} trcs>trc>bd { display: flex; flex-direction: column; justify-content: center; padding-left:4px} trcs>trc>ft { display: flex; flex-direction: column; justify-content: center; align-items: end; text-align: end;} trcs>trc>odr { grid-column-start: 2; grid-column-end: 4;font-size:0.77em;} trcs>trc>ft amount { display: block; } trcs>trc actn{display: grid;grid-gap: 0;min-height: 33px;padding: unset;grid-template-columns: 70% 30%;margin: unset;position: relative;border-radius: 11px;width: 100%;} trcs>trc actn>ac1{ display: flex; justify-content: center; align-items: center; } trcs>trc actn>ac1>bb{position: relative;display: block;height: 34px;max-height: 30px;width: 60px;border-radius: 50px;border: solid 2px;color: #fff;transition: 333ms;box-shadow: inset 0 0 0 2px;overflow: visible;top: unset;height: 38px;color: var(--c1);right: unset;} trcs>trc actn>ac1>bb>bo{display: block; height: 100%; width: 100%;transition:333ms;border-radius: 50px; } trcs>trc actn>ac1>bb>bo>oo{display: block;height: 25px;width: 25px;background: #fff;margin: 2px;border-radius: 50%;position: absolute;transition: 333ms;box-shadow: -4px 0px 11px;color: #000;} trcs>trc actn>ac2 { display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: monospace; font-size: 2.5em; color: var(--c1); transform: rotate(270deg); height: 36px; width: 36px; } trcs>trc p { margin: 0; } tr.cr td:nth-of-type(1){color:#00ff00;} tr.dr td:nth-of-type(1){color:#ff0000;} V {transform: scale(0.77);position: relative; display: flex; justify-content: center; align-items: center; max-width: 44px; width: 100%;opacity:0 } V:before, v:after { content: ''; width: 50%; height: 4px; background: var(--c); display: block; position: absolute;border-radius: 50px; transition: 333ms; transition-timing-function: cubic-bezier(1, 0.55, 0, 0.55);} V::before { transform: rotate( 45deg ); left: 4px; } V::after { transform: rotate( 135deg ); right: 4px; } V.A:before { transform: rotate( -45deg ); } V.A:after { transform: rotate(225deg) } /** Elements */ /*# Class */ .dnone, .dn {display: none !important;} .cgreen { color: #007600; } .cred { color: #CC0C39; } /** Class */ /*# App Layout */ ::-webkit-scrollbar { display: none; } @media (min-width: 999px) { ::-webkit-scrollbar { width: 0; height: 4px; } ::-webkit-scrollbar-thumb { background: var(--bc); } ::-webkit-scrollbar-track { background: var(--b-t22); } } .splash console{opacity:0} .account content { margin-top: calc(100vh - 22px); } .after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; } /** App Layout */ /*# Screen Layout */ /*# Screen Layout 1 #*/ @media only screen and (max-width: 999px) { .sl1 smenu { display: none; } } @media only screen and (min-width: 999px) { .sl1 {display: grid ; grid-template-columns:277px calc(100% - 277px); max-width:1920px;min-width: 1280px; margin: 0 auto;} .sl1 nev { display: grid ; grid-column-start: 1; grid-column-end: 3; } .sl1 smenu { display: grid ; grid-row-start: 1; grid-row-end: 3; height: calc(100vh - 44px); position: sticky; top: 0; bottom: 0; overflow: auto; } /* .sl1 header { display: none;}*/ .sl3 hero { display: grid ; grid-column-start: 2; grid-column-end: 3; } .sl1 aerea { display: grid ; grid-column-start: 2; grid-column-end: 3; } .sl1 main { margin: 0 auto; } .sl1 sidebar { max-width: 333px;} .sl1 footer { display: grid ; grid-column-start: 2; grid-column-end: 3; } } /** Screen Layout 1 **/ /*# Screen Layout 2 #*/ @media only screen and (max-width: 999px) { .sl2 smenu { display: none; } } @media only screen and (min-width: 999px) { .sl2 {display: grid ; grid-template-columns:100%; max-width:1920px;min-width: 1280px; margin: 0 auto;} .sl2 nev { display: grid ; } .sl2 smenu { display: grid ; } .sl2 header { display: grid ; } .sl2 hero { display: grid ; } .sl2 aerea { display: grid ; } .sl2 main { max-width: 777px; margin: 0 auto; } .sl2 sidebar { max-width:333px;} .sl2 footer { display: grid ; } } /** Screen Layout 2 **/ /*# Screen Layout 3 #*/ @media only screen and (max-width: 999px) { /* .sl3 smenu { display: none; }*/ } @media only screen and (min-width: 999px) { .sl3 {display: grid ; grid-template-columns:100%; max-width:1920px;min-width: 1280px; margin: 0 auto;} .sl3 nev { display: grid ; } .sl3 smenu { display: grid ; } .sl3 header { display: grid ; } .sl3 hero { display: grid ; } .sl3 aerea { display: grid ; } .sl3 main { width:100%; max-width: 100%; margin: 0 auto; } .sl3 sidebar { max-width:333px;} .sl3 footer { display: grid ; } } /** Screen Layout 3 **/ /** Screen Layout */ flyouts> bg { backdrop-filter: blur(11px); background: var(--b1t44); } flyouts { position: absolute; display: none; justify-items: center; opacity: 0; visibility: hidden; z-index: 9999; inset: 0px; place-content: center; transition: 333ms; } .ds flyouts { display: block; visibility: visible; opacity: 1; } scroll { display: flex; align-items: center; position: absolute; top: 0; bottom: 0; z-index: 99; } cdco scroll btn i { transform: rotate(90deg); min-width: 28px; min-height: 28px; } scroll>btn { padding: 5px; background: var(--b-t95); height: 33px; display: block; width: 33px; border-radius: 55%; box-shadow: 0 0 4px 6px var(--bc); } @media(max-width:999px){ content{ top:38px;} } @media screen and (max-width: 999px) { aerea { padding-bottom:48px; display: block; } } html { font-family: Kanit, sans-serif; } /* Section : Section */ sections { position: relative; } /* staking sacreen */ sskg d.main { margin: 0 11%; } @media (max-width: 999px) { sskg d.main { margin: 0 11px; } } /* btn1 feels */ .btn1 { transition: 95ms; } .btn1:hover { opacity: 0.7; } .btn1:active { transform: translate(0, 2px); } /* Template : popup */ popup { position: absolute; inset: 0; display: flex ; align-items: center; justify-content: center; transition: 333ms; z-index: 999999; } .popup popup { opacity: 1; visibility: visible; position: fixed; } popup>rvm { position: absolute; inset: 0; z-index: 0; } /* Terms sacreen */ stmo d.main { margin: 0px 11%; } @media (max-width: 999px) { stmo d.main { margin: 0px 5%; } } /* comoponent Smenu by Arnav*/ smenu { border-right: 1px solid var(--bor); } nav { display: grid; position: absolute;transition: 333ms; align-items: center; background: var(--b1); height: 44px; z-index: 999999; padding: 2px 0; justify-content: unset; top: 0; width: -webkit-fill-available; left: 0px; right: 0px; border-bottom: solid 1px var(--bc); } start { transition: 333ms; z-index: 9999; position: absolute; display: block;height: 100vh; top: 0; overflow: hidden; } @media only screen and (min-width: 999px) { nav { left: 222px;} menubar {display:block; position: absolute; right: 0; top: 49px; width: 48px; height: calc(-49px + 100vh); background: var(--b1); border-left: solid 1px var(--bc); z-index: 999; transition: 333ms;} start {width: 222px; } .start start {width:70px; visibility: unset; } .menubar menubar { width: 0; } .menubar content { right: 0; } } @media only screen and (max-width: 999px) { menubar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 99; height: 48px; background: var(--b1); border-top: solid 1px var(--bc); } start { width: 0; } .start start {width:100%;} } start bg.bg { backdrop-filter: blur(2px); background: var(--bor); } .start content { left:70px} /* Gurpreet Singh */ @media only screen and (min-width: 999px) { /*.btn { position: relative; }*/ .btn hv { position: absolute; background: var(--c); color: var(--b); line-break: anywhere; white-space: unset; font-size: 0.66em; font-weight: 500; width: max-content; max-width: 288px; padding: 7px; border-radius: 5px; z-index: 99999; opacity: 0; visibility: hidden; } .btn hv:after { content: ''; position: absolute;right: -4px;background: var(--c); height: 7px; width: 7px; transform: rotate( 46deg); z-index: -2; top: 10px; } .btn:hover hv { opacity: 1; visibility: visible; } /* Left */ .btn.l hv { right: 100%; margin-right: 11px; } /* Left */ /* Right */ .btn.r hv { left: 100%; margin-left: 11px; } .btn.r hv:after { left: -4px; top: 8px; } /* Right */ /* Bottom */ .btn.b hv { right: 0; top: 100%; left: 50%; transform: translateX(-50%);margin-top: 7px; border-top-left-radius: 3px; } .btn.b hv::after { top: -3px; right: 50%; } /* Bottom */ /* Top */ .btn.t hv::after { bottom: -4px; right: 50%; top: unset; } .btn.t hv { bottom: 100%; right: 0;margin-bottom: 7px; left: 50%; transform: translateX(-50%); } /* Top */ /* Gurpreet Singh */ } @media only screen and (max-width: 999px) { .btn hv {display:none;} } /* Header by GaganNayak */ header { position: relative; height: 55px; z-index: 999; } /* layout Account by Gagan Kumar */ /* Account */ account { max-width: 444px; display: block; overflow-y: auto; position: absolute; width: 100%; left: 0; right: 0; border: solid 1px var(--bc); bottom: unset; height: auto; margin: auto; transform: scale(0); transition: 99ms; height: 100%; } #account { display: block; position: relative; z-index: 2;overflow:hidden } #account>*{ position:relative;z-index:2 } app.account account { transform: scale(1); z-index: 999999999; } app.account.login forgot { display:none; } app.account.register forgot { display:none; } saco login, account register, account forgot, account character { display: none; } #AccountRegular{ display: grid; grid-template-columns: 100% 100% 100%; } saco .wrapper { position: relative; box-shadow:unset; border-radius: 44px;margin-top:11px;} saco input { -webkit-border: solid 1px var(--bc); padding: 11px 33px; font-size: 1em; width: calc(100% - 66px); margin: 0; transition: 99ms; border: solid 1px var(--bc); background: transparent; border-radius: 11px; height: 30px; font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } saco input[type="radio"]:focus { box-shadow: unset; } saco input:focus { box-shadow: inset 0 0 0 2px var(--c); } saco steps { opacity: 0; } #account>bd { display: block; position: relative; margin-top: 55px; } saco .btn { background: var(--a); border: unset; color: var(--b); height: 47px; font-size: 1em; font-weight: bold; box-shadow: var(--bs-b); border-radius: 6px; padding: 0; display: block; text-align: center; place-content: center; line-height: 1; margin-top: 7px; max-width: 350px; margin: 11px auto; } saco .gf { grid-column-start: 1; grid-column-end: 3; display: grid; margin-top: 14px; } saco gds { display: grid; grid-template-columns: 50% 50%; color: var(--c); gap: 2%; row-gap: 7px; } gds gd:last-child { grid-column-start: 1; grid-column-end: 3; } gds gd { display: block; padding: 9px 11px; border: solid 0.5px var(--bc); position: relative; overflow: hidden; background: transparent; border-radius: 11px; } gds gd>btn { display: grid; grid-template-columns: 33px auto 33px; align-items: center; } account gd input[type="radio"] { margin: 0; height: 16px; width: 16px; } account gd label { display: block; opacity: 0.77; font-weight: unset; } account #RBirthday gd { display: grid; grid-template-columns: auto; padding: 0; } account gd select { width: 100%; height: 44px; padding: 11px; background: transparent; color: var(--c); border: unset; outline: unset; font-family: var(--ff); font-weight: bold; opacity: 0.7; border-radius: 0; } account gd select option { background: var(--b); } form.success::after { content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 9; } account .success{ background:linear-gradient(90deg, rgb(111 111 111 / 10%), rgb(111 111 111 / 22%), rgb(111 111 111 / 10%));padding: 44px 0; } account .success .btns{display:none} account .success input { background: unset; } account steps { display: flex; width: 77%; height: 11px; justify-content: center; margin: 11px auto; grid-gap: 5%; position: relative; transition: 111ms; z-index: 8; opacity: 1; } account steps>step { height: 7px; width: 7px; border-radius: 11px; border: 2px solid var(--b-t); transition: 333ms; } account.verifying steps>step:nth-of-type(1) { border: 1px solid var(--b); width: 22px; background: var(--b); } account.verified steps>step:nth-of-type(1) { border: 1px solid var(--b); width: 22px; background: var(--b); } account.verified steps>step:nth-of-type(2) { border: 1px solid var(--b); width: 22px; background: var(--b); } .account content { margin-top:unset } account label { font-weight: bold; letter-spacing: 0.44px; display: block; opacity: 1; font-size: 18px; margin: 5px; } .regbtn{box-shadow: var(--bs-b);display: flex;justify-content: center;align-items: center;width:100%;height: 50px;border: solid 2px var(--b-t);border-radius: 7px;} account span.help-block { font-family: monospace; color: #00bcd4; text-align: center; width: 100%; display: block;max-width: 222px; text-align: center; margin:0 auto; } account f{ position: absolute; bottom: 0; left: 0; right: 0; height: 44px; display: flex;} account f input { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; background: rgba(255,255,255,0.11); font-weight: bold; letter-spacing: 1px; margin: 0; padding: 0; border: 0; border-radius: 0;color:#eef} account f input.this{background:transparent} account h1 { margin-top: 44px; display: inline-block; text-align: center; line-height: 1; width: 100%;color:#008} i.Phone{position: absolute; top: 0; left: 8px; bottom: 0; width: 50px; display: flex; justify-content: center; align-items: center; height: auto; color: var(--c); font-style: unset; font-weight: bold; background: var(--b-t); border-top-right-radius: 0; border-bottom-right-radius: 0;z-index: 8;} account #rpwdc { grid-column-start: 1; grid-column-end: 3; display: grid; } account #rpwd { grid-column-start: 1; grid-column-end: 3; display: grid; } account.verify #RRefer{display:none} account.verify #RGender{display:none} account.verify #RBirthday{display:none} account.verify #rpln{display:none} account.verify #rpwdc{display:none} account.verify #AjaxRegister{display:none} account.otp #PhoneVerify{display:none} account.otp #rotp{display:none} account #SendOTP{display:none} account.otp #SendOTP{display:flex} account #RPhone{display:none} account.otp #RPhone{display:block} account.verified #PhoneVerify { display: none; } account.verified #rotp { display: block; } account illu{ display:none} account illu>*{ position: absolute; margin: auto; display: block; left: 0; right: 0; } account d1 { opacity: 1; } account d2 { opacity: 0; } .register account d2 { opacity: 1; } .register account d1 { opacity: 0; } saco .img-box{display: flex;justify-content: center;align-items: center;} saco>hd { height: 55px; display: block; position: relative; } saco hd grid>* { margin: unset; } saco>bd { position: absolute; top: 55px; bottom: 0; left: 0; right: 0; } saco eye { position: absolute; background: #0000; right: 11px; top: 0; height: 100%; width: 25px; opacity: 0.7; padding: 0 11px; display: flex; } .register account register { left: 0; display: block; } .register account login { left: -100%; display: block; } .character character { display: block; } .wla { width: 55%; margin: auto; display: block; text-align: center; margin-top: 44px; } .wla>h3 { font-weight:unset } .wlb { max-width: 111px; left: 0; right: 0; margin: 22px auto; display: block; } saco forgot { top: 100%; transition: 333ms; z-index: 8; display: none; } .forgot account forgot { top: 0; display: block; } account.LoginOTP aa#PhoneVerify { display: none; } saco aa.loginOTP { display: none; } account.LoginOTP aa.loginOTP { display: flex; } account.LoginOTP input#RegRefer { display: none; } saco>d>hd { display: flex; justify-content: space-between; padding: 7px; } form.success::after {content: '';position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 9;} account .success{background:linear-gradient(90deg, rgb(111 111 111 / 10%), rgb(111 111 111 / 22%), rgb(111 111 111 / 10%));padding: 44px 0;} account .success .btns{display:none} account .success input { background: unset; } .forgot #fpwd {display:none} .forgot #fpwdc {display:none} .forgot #fotp {display:none} .forgot #FPhoneVerify {display:none} .forgot #FChangePassword {display:none} .forgot account.Fverifying #fPhone{display:none} .forgot account.Fverifying #FSendOTP{display:none} .forgot account.Fverifying #fotp{display:block} .forgot account.Fverifying #FPhoneVerify{display:flex} .forgot account.Fverified #fotp{display:none} .forgot account.Fverified #FPhoneVerify{display:none} .forgot account.Fverified #fpwd{display:block} .forgot account.Fverified #fpwdc{display:block} .forgot account.Fverified #FChangePassword{display:flex} #fresend{color: var(--a);margin: auto;text-align: center;display:none} #fce{color: var(--a);margin: auto;text-align: center;display:none} account again{display:none;margin: 11px;text-align: center;} .forgot account.Fverifying again{display:block} .forgot account.Fverifying #fresend{display:block} .forgot account.Fverifying #fce{display:block} account sl.edt>label { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; height: 22px; margin: auto 0; padding: 22px; font-size: 0.77em; letter-spacing: 0.44px; transition: 333ms; } saco sl>input:focus { transform: unset; } account sl.edt>input:focus ~ label, account sl.edt>input:valid ~ label { opacity: 0; } .eyelogo form sl .btn:after { content: " "; height: 27px; position: absolute; width: 3px; background: #526c88; top: 9px; bottom: 0; transform: rotate(45deg); right: 20px; border-radius: 22px; } /* Account in Desktop */ @media screen and (min-width: 999px) { account { border: solid 1px var(--bt); max-width: unset; max-height: unset; top: 0; backdrop-filter: blur(3px); display: block ; align-items: center; justify-content: center; } saco { display: block; } #account { border-radius: 22px; display: block; padding: 7px; margin: 4px; position: relative; z-index: 2; overflow: hidden; } cento .phone { display: none; } clgso { display: grid; grid-template-columns: 62% 38%; } clgso>cvr { display: block; padding: 22px; background: var(--bc); width: auto; margin: 22px; border-radius: 22px; overflow: hidden; border: 1px solid var(--bor); height: 55vh; max-width: 88%; margin: 0 auto; } clgso>cvr>i>img { height: 100%; width: 100%; object-fit: cover; } clgso>cvr>i { height: 100%; width: 100%; overflow: hidden; border-radius: 22px; } cento>ft>.btn { max-width: 333px; } cafro { display: grid; grid-template-columns: 56% 44%; justify-content: center; height: 66vh; padding: 11px; } cafgo { display: block; max-width: 444px; margin: 0 auto; } cafro>cvr { display: block; height: 65vh; border-radius: 22px; overflow: hidden; margin: 0 auto; } cafro>cvr>i { height: 100%; width: 100%; overflow: hidden; } cafro>cvr>i>img { height: 100%; width: 100%; object-fit: cover; } crgro { display: grid; grid-template-columns: 56% 44%; } crgro>cvr { display: block; padding: 22px; background: var(--bc); height: 74vh; width: 100%; border-radius: 22px; overflow: hidden; border: 1px solid var(--bor); max-height: 77%; max-width: 88%; margin: 0 auto; } crgro>cvr>i { height: 100%; width: 100%; overflow: hidden; border-radius: 22px; } crgro>cvr>i>img { height: 100%; width: 100%; object-fit: cover; } cchro>ft>btn.btn { display: block; place-content: center; text-align: center; height: auto; padding: 11px 22px; max-width: 222px; } cchro { width: 100%; margin: auto; padding: 0; max-width: 444px; } conbo { display: grid; grid-template-columns: 56% 44%; justify-content: center; } cchro>bg { display: none; } conbo>cvr>i { height: 100%; width: 100%; animation: oscillate 18s infinite; } conbo>cvr>i>img { height: 96%; width: 66%; } conbo>cvr { display: block; height: 95%; border-radius: 22px; overflow: hidden; background: var(--aa); margin: 22px; position: relative; } conbo>cvr>bg { background-image: url(/0/IMG/0Stars.webp); background-repeat: repeat; background-size: 100%; background-position: 100% 100%; animation: Flow 3s infinite; display: grid; grid-template-rows: 16% 16% 16% 16% 16% 16%; } } @media screen and (max-width: 999px) { crgro>cvr { display: none; } } @media only screen and (max-width: 999px){ account { top: 0; border: unset; max-height: unset; bottom: 0; background: var(--b); } #account>bd { display: block; overflow: hidden; overflow-y: scroll; max-height: calc(100% - 55px); margin-top: 55px; } #account>bg { opacity: 0; } saco { border-radius: 0; box-shadow: none; max-height: unset; } saco { border-radius: 0; box-shadow: none; max-height: unset; max-width: 529px; display: block; width: -webkit-fill-available; } } @media(min-width:999px){ account { border: solid 1px var(--bt); max-width: unset; max-height: unset; top: 0; backdrop-filter: blur(3px); display: block; justify-content: center; align-items: unset; } } account.verify #rpfn { display: block; margin-top: 14px;} account.verify #rpwd { display: block; margin-top: 14px;} account hd exit { display: flex; justify-content: center; align-items: center; position: absolute; right: 0; top: 0; padding: 11px; height: 33px; width: 33px; margin: 11px; z-index: 9999999999999999999999; } @media(max-width:999px){ account.verify #rpwd { display: none; } crgs d p:nth-child(1) { display: none; } crgs>bl ft d>p { display: none; } account { max-width:unset;display: block; overflow-y: auto; position: absolute; width: 100%; left: 0; right: 0; border: solid 1px var(--bc); bottom: unset; height: auto; transform: scale(0); transition: 99ms; height: 100%; justify-content: center; display: flex; } } saco bg { display: block; height: 100%; background: url(/-Brand/Invoice/asset/Account_BG.png) var(--b); min-height: 110vh; background-position: 54%; background-repeat: no-repeat; background-size: cover; } @media(max-width:999px) {saco bg { background-image: none; }} /*Account*/ caue>bl { display: block; align-items: center; box-shadow: var(--bss); border-radius: 3px; padding: 14px; background: var(--b); } caue>bl>hd>h4 { font-weight: 400; font-size: 1.22rem; } caue>bl>bd>i { height: 60px; width: 60px; } caue>bl>bd>span { font-size: 0.88rem; font-weight: 400; } caue>bl>bd { display: flex; gap: 10px; } caue>bl>bd>div { display: flex; gap: 10px; line-height: 13px; align-items: center; justify-content: center; } caue bd box { display: flex; background: var(--bc); align-items: center; justify-content: center; height: 43px; width: 53px; position: relative; border-radius: 7px; } caue>bl>bd>div>box>i { height: 24px; width: 30px; } caue>bl>bd>div>mg { display: block; line-height: 23px; } /* Component : AccountLogin */ clgno form sl:nth-child(2) { grid-template-columns: auto 55px; display: grid; } clgno h1 { margin: 0; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; font-size: 1.88em; letter-spacing: 1px; color: var(--c); } clgno ops { display: flex; justify-content: space-between; padding: 7px; align-items: center; color: var(--a); height: 22px; } clgno ops>op { display: grid; grid-template-columns: auto 22px; align-items: center; letter-spacing: 1px; font-weight: 400; } clgno ops>a { color: var(--a); font-weight: 400; letter-spacing: 1px; } clgno>bd p>input { height: 17px; width: 17px; margin: 0; padding: 0; } clgno>bd p>label { margin: 0; } clgno ops svg { fill: var(--a); } clgno bl>ft>.btn { display: flex; justify-content: center; height: auto; padding: 11px; width: auto; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; letter-spacing: 1px; height: 33px; align-items: center; } clgno>ft btn { display: grid ; grid-template-columns: 44px auto; justify-content: center; text-align: center; align-items: center; font-size: 0.88em; font-weight: 600; letter-spacing: 0.88px; padding: 15px; margin: 4px; border: 1px solid var(--c); border-radius: 7px; } clgno>ft btns { display: grid ; grid-template-columns: 50% 50%; position: relative; } clgno>ft btn>i { display: flex; height: 19px; width: 19px; margin: 0 auto; border-radius: 11px; } clgno>bd>p { text-align: center; } clgno divider { width: auto; white-space: nowrap; opacity: 0.6; margin: 33px 11px; display: grid ; grid-template-columns: 34.5% auto 35.5%; } clgno>bd>aa { display: block; text-align: center; padding: 11px; } clgno divider>t { font-weight: 400; } clgno a { font-weight: 400; } clgno label>input { margin: 6px; height: 13px; width: 13px; border: 1px solid; margin-left: 0; } clgno bl p { font-weight: 400; font-size: 0.88em; text-align: unset; margin-block-end: 0; } clgno>hd>d { display: block; text-align: center; } clgno bl>hd>label { display: grid ; grid-template-columns: 22px auto; font-size: 0.88em; align-items: center; } login steps { display: none; } clgno>hd { display: block; text-align: center; margin: 11px; margin-bottom: 44px; } clgno>hd>p { margin: 11px 0; font-size: 1em; } clgno>hd>d>i { height: 44px; width: 44px; margin: 22px auto; margin-top: 0; } clgno>bd>bl>ft { margin: 11px 0; margin-bottom: 22px; } .login login { display: block; } clgno>bd p.forgetmenot { display: grid ; grid-template-columns: 22px auto; align-items: center; padding: 4px 7px; text-align: start; margin: 0; } login>bg { background: var(--aaa); z-index: -1; } saco login { transition: 333ms; display: none; } saco login logo>h1 { margin: 22px; padding: 22px; color: var(--b); width: auto; text-align: center; display: block; } login out svg { fill: var(--b); } login>hd { display: grid; grid-template-columns: 55px auto 129px; align-items: center; text-align: end; color: var(--b); font-size: 0.88em; position: sticky; top: 7px; z-index: 999; backdrop-filter: blur(20px); border-radius: 11px; margin: 7px; background: var(--aat); } login>hd>btn.btn { background: var(--b-t44); height: auto; padding: 11px; font-weight: 400; border-radius: 7px; margin: 0 11px; } login>ft { display: block; height: 75vh; } /*clgno:after { content: ""; position: absolute; top: -11px; left: 0; right: 0; height: 14px; width: 90%; background: var(--b-t44); display: block; margin: 0 auto; z-index: -1; border-radius: 44px 44px 0 0; box-shadow: 0 -2px 7px var(--c); opacity: 0.5; }*/ clgno form { position: relative; } app.account.forgot login { display:none; } app.account.register login { display:none; } @media screen and (min-width: 999px) { login>hd { background: transparent; color: var(--c); position: unset; } login out svg { fill: var(--c); } login>hd>btn.btn { background: var(--aaa); } clgno:after { display: none; } login>bg { opacity: 0; } saco login logo>h1 { color: var(--c); } clgso>cvr { position: sticky; top: 0; } clgno { background: transparent; } } clgno bl p { font-weight: 400; font-size: 17px; text-align: unset; margin-block-end: 0; } clgno btns { display: grid ; grid-auto-flow: column; } clgno btn { display: grid ; row-gap: 7px; } clgno ft aa.jrac { font-weight: 500; text-decoration: underline; color: var(--aa); } .login crgs { display: none; } clgno form lable { font-weight: 600;display: block; font-size: 22px; margin-top: 22px; } clgno form sl .btn { display: flex; margin: 0; position: relative; z-index: 99; width: 44px; height: 44px; align-items: center; justify-content: center; grid-column-start: 2; background: transparent; box-shadow: none; opacity: 0.7; position: absolute; top: 0; bottom: 0; right: 0; margin: auto; margin-block-start: 0; } clgno ft aa.jrac:nth-child(2) { font-weight: 500; text-decoration: underline; color: var(--aa); display: block; } @media(max-width:999px){ clgno { margin: 10px; border: solid 1px var(--b-t44); } } clgno bl p { font-weight: 400; font-size: 0.88em; text-align: unset; margin-top: 22px; } clgno { background: var(--b); border-radius: 10px; height: unset; max-width: 890px; display: flex ; border: solid 1px var(--bc); overflow: hidden; box-shadow: 0px 0px 4px 2px var(--bc); flex-direction: row-reverse; margin: 22px auto; } clgno hd>div>i { height: 45px; justify-content: unset; width: fit-content; } clgno hd>div>btn { display: flex; align-items: center; background: var(--btn1); border-radius: 20px; gap: 7px; color: var(--b); height: 31px; padding: 3px 13px; } clgno hd>div { display: flex; justify-content: space-between; align-items: center; } clgno btn i { width: 15px; height: 16px; margin: auto; } clgno btn t { font-size: 0.77em; font-weight: 500; text-align: center; } clgno>cl { right: 0; left: 0; margin-left: auto; padding: 22px; width: 40%; box-shadow: 0px 0px 0px 2px var(--bc); display: grid; position: relative; text-align: center; } clgno>cl b { font-size: 0.99em; font-weight: 500; display: block; margin-bottom: 7px; } clgno>cl span { font-size: 0.78em; line-height: 21px; font-weight: 400; margin-bottom: 30px; } clgno>cl btn { display: flex; justify-content: center; align-items: center; border: solid 1px var(--bc); padding: 9px 15px; border-radius: 20px; font-size: 0.98em; font-weight: 700; color: var(--aa); width: max-content; margin: auto; background: var(--bg); } clgno>cl btn:hover { background: var(--b2); } clgno>bl { display: block; max-width: 50%; box-shadow: 0px 0px 2px 0px var(--bc); padding: 22px; border-radius: 11px 0 0 11px; } clgno form>t { font-size: 0.88em; } clgno form sl { display: flex; align-items: center; background: unset; overflow: unset; height: unset; margin: 0; } clgno form sl>input { display: flex; align-items: center; border: 1px solid var(--bc); border-radius: 0; box-shadow: unset; margin: 11px 0; background: var(--bg); color: var(--bor); margin-top: 28px;border-radius: 2px;padding: 11px; } clgno sl>input:focus { transform: unset; box-shadow: unset; border: solid 1px var(--a); border-radius: 2px; } clgno bd>btn { background: var(--a); border: unset; height: 40px; font-size: 23px; box-shadow: var(--bs-b); padding: 0; display: block; text-align: center; place-content: center; line-height: 1; border-radius: 4px; color: var(--b); font-weight: 400; margin-top: 7px; } clgno bl>bd { display: block; margin-bottom: 18px; } clgno ft>dv>span { font-size: 0.88em; } clgno btns { display: flex; margin: 10px 0; gap: 10px; flex-wrap: wrap; } clgno btns>btn { display: grid; background: var(--a); border-radius: 5px; align-items: center; justify-content: center; height: 40px; width: 44px; } clgno btns>btn i { height: 18px; width: 18px; } clgno btns>btn:nth-child(2) { background: var(--b1); } clgno btn:nth-child(3)>i svg { fill: var(--b); } clgno btns>btn:nth-child(3) { background: var(--btn3); } clgno btns>btn:nth-child(5) { background: var(--aa); } clgno btns>btn:nth-child(7) { background: var(--c); } clgno btns>btn:nth-child(8) { background: var(--bc); } clgno btn i>svg { fill: var(--bor); } clgno>cl i { display: block; width: 300px; height: 240px; margin: auto; } clgno p>aa { font-weight: 500; color: var(--a); } @media(max-width:999px){ clgno>cl { display: none; } clgno>bl { max-width: unset; box-shadow: none; } clgno { box-shadow: none; border: none; margin: 0; } } /* Component : AccountRegister */ crgs>bl hd>d i { height: 29px; width: 29px; display: block; } crgs>bl hd>d { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 11px; } crgs>bl hd>span { display: block; text-align: center; font-size: 1.4em; font-weight: 300; line-height: 27px; color: var(--br); } crgs>bl ft>div btns btn { width: 37px; height: 37px; margin: 0; background: unset; max-width: unset; padding: 0; } crgs>bl ft>div btns btn i { width: 25px; height: 20px; } crgs>bl ft>div btns { display: flex; justify-content: center; align-items: center; } crgs>bl>ft d>f { display: flex; position: unset; align-items: center; margin: 22px auto; gap: 0; } crgs>bl hd>span t { color: var(--aa); } register { overflow-y: auto; scroll-behavior: smooth; } gds gd>btn>label { margin: 0; opacity: 1; font-weight: 400; } register>bg { background: var(--aaa); z-index: -1; } register>hd { display: grid; grid-template-columns: 55px auto 129px; align-items: center; text-align: end; color: var(--b); font-size: 0.88em; position: sticky; top: 7px; z-index: 999; backdrop-filter: blur(20px); border-radius: 11px; margin: 7px; } register>hd>btn.btn { background: var(--b-t44); height: auto; padding: 11px; font-weight: 400; border-radius: 7px; margin: 0 11px; } saco register logo>h1 { margin: 22px; padding: 22px; color: var(--b); width: auto; text-align: center; display: block; } crgs>bl { display: block; padding: 33px 11px; background: var(--b); border-radius: 22px 22px 0 0; position: relative; min-height: 100%; max-width: 100%; } register>ft { display: block; height: 75vh; } register>bg { display: none; } saco register logo>h1 { color: var(--c); } register>hd>btn.btn { background: var(--aaa); } .register account steps { padding-top: 33px; } crgs>bl:after { content: ""; position: absolute; top: -11px; left: 0; right: 0; height: 14px; width: 90%; background: var(--b-t44); display: block; margin: 0 auto; z-index: -1; border-radius: 44px 44px 0 0; box-shadow: 0 -2px 7px var(--c); opacity: 0.5; } register>bg { display: none; } saco register logo>h1 { color: var(--c); } register>hd>btn.btn { background: var(--aaa); } .register account steps { padding-top: 33px; } app.account.forgot register { display:none; } app.account.login register { display:none; } .register account steps { z-index: 2; background: transparent; opacity: 1; position: relative; top: unset; padding-bottom: 33px; } register out svg { fill: var(--b); } crgs>bl sl.edt { grid-template-columns: auto 44px; display: grid; border-radius: 11px; padding: 0 11px; width: auto; height: 55px; background: transparent; border: 1px solid var(--bc); } crgs>bl sl.edt>input { position: absolute; z-index: 0; border: none; height: auto; top: 0; bottom: 0; width: auto; left: 0px; right: 0px; margin: 0; background: transparent; font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; padding: 11px 22px; padding-right: 55px; } crgs>bl sl.edt>btn { display: flex; margin: 0; position: relative; z-index: 99; width: 44px; height: 44px; align-items: center; justify-content: center; grid-column-start: 2; background: transparent; box-shadow: none; opacity: 0.7; margin: auto; } crgs>bl ft d { display: grid; text-align: center; } crgs>bl ft d span { font-size: 0.88em; margin-top: 11px; } crgs>bl ft d>aa:last-child { font-weight: 500; color: var(--a); } crgs>bl bd d { font-size: 0.88em; display: flex; align-items: center; } @media screen and (max-width: 999px) { register>ft>cvr { position: absolute; top: -255px; opacity: 0.06; } register>ft>cvr>img { height: 100%; width: 100%; object-fit: cover; } } @media screen and (min-width: 999px) { register>hd { color: var(--c); background: transparent; backdrop-filter: unset; position: relative; } register>ft { height: auto; display: grid; grid-template-columns: 55% 45%; } saco register logo { display: none; } register>ft>cvr>img { height: 100%; width: 100%; object-fit: cover; } register>ft>cvr { display: block; height: 61vh; border-radius: 22px; overflow: hidden; margin: 11px; position: sticky; top: 0; } crgs>bl { max-width: 444px; display: block; margin: 0 auto; background: transparent; min-height: auto; } crgs>bl:after { display: none; } account.verified steps>step:nth-of-type(1), account.verified steps>step:nth-of-type(2),maccount.verifying steps>step:nth-of-type(1) { border-color: var(--aa); background: var(--aaa); border-width: 2px; } account steps>step { border-color: var(--c); } } saco>d>hd name { font-size: 2em; font-weight: bold; text-align: center; } crgs cc { display: grid; grid-template-columns: 34% 66%; } register { overflow: unset; } crgs>bl { max-width: 444px; display: block; margin: 0 auto; background: transparent; min-height: auto; border-radius: 11px; padding: 25px;} saco input { padding: 17px 10px; font-size: 0.88rem; margin: 0; transition: 99ms; width: -webkit-fill-available; border: solid 1px var(--bc); border-radius: 3px; height: unset; padding-left: 37px; background: var(--b); } crgs cc { display: grid; grid-template-columns:auto; gap: 7px; } crgs cc>select { max-width: 121px; margin: 0; background: var(--aat); padding: 1px 6px; width: auto; border-radius: 8px; height: 43px; } crgs>bl ft t { font-weight: 400; text-align: center; display: block; font-size: 0.99em; margin-bottom: 11px; } crgs>bl ft d>p { align-items: center; font-weight: 600; font-size: 15px; display: block;} crgs d p i { height: 21px; width: 22px; } crgs d p { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 16px; } crgs d a { font-weight: 500; color: var(--aa); font-size: 15px; margin: 4px; text-decoration: underline; } crgs d aa { font-weight: 500; color: var(--aa); font-size: 15px; margin: 4px; text-decoration: underline; } crgs hd h2 { font-size: 1.77em; font-weight: 400; } crgs bd btn t { color: var(--aa); font-weight: 500; margin: 3px; } crgs cc { display: grid; grid-template-columns:auto; gap: 7px; } crgs bl>ft { display: block; padding: 26px; background: var(--bt); border: solid 1px var(--bc); border-radius: 11px; border-top-right-radius: 0; border-top-left-radius: 0; border-top: 0; } crgs bl>bd { display: block; padding: 26px; background: var(--bt); border: solid 1px var(--bc); border-radius: 11px; border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } saco .btn { background: var(--a); border: unset; color: var(--b); height: 47px; font-size: 1em; font-weight: bold; box-shadow: var(--bs-b); border-radius: 6px; padding: 0; text-align: center; line-height: 1; margin: auto; max-width: unset; } crgs d p { display: flex; align-items: center; font-size: 13px; color: var(--bor); margin: 0; gap: 3px; } crgs d p>span { color: var(--c); text-decoration: underline; } crgs bd d>c { display: grid; grid-template-columns: 13px auto; gap: 7px; margin-top: 11px; } crgs d a { font-weight: 500; color: var(--aa); font-size: 0.88em; margin: 4px; text-decoration: underline; } crgs>bl hd>d name { font-weight: 400; display: block; font-size: 22px; } crgs bd d>i { display: flex; height: 17px; width: 17px; opacity: 40%; position: absolute; left: 11px; } crgs bd cc>i { display: flex; height: 17px; width: 17px; opacity: 40%; position: absolute; left: 11px; } crgs cc { display: flex; align-items: center; gap: 7px; } crgs div>d>select { padding: 17px 10px; font-size: 0.88rem; transition: 99ms; width: -webkit-fill-available; border: solid 1px var(--bc); border-radius: 3px; height: unset; padding-left: 37px; background: var(--b); margin: 11px 0; font-weight: 400; } crgs div>d>select:focus { border: solid 1px var(--a); } crgs d>input:focus { border: solid 1px var(--a); box-shadow: unset;} crgs cc>input:focus { border: solid 1px var(--a); box-shadow: unset;} @media(max-width:999px){ crgs bl>bd { padding: 11px; } crgs bl>ft { padding: 11px; } crgs>bl { padding: 7px; } } /* Forgot Password */ cfrgo { display: block; position: relative; border: 1px solid var(--bor); border-radius: 10px; max-width: 333px; padding: 13px 13px 13px 20px; margin: 11px auto; } cfrgo>hd i { display: block; height: 44px; width: 44px; } cfrgo>hd p { margin: 2px 0; font-size: 15px; font-weight: 400; } cfrgo>bd .wrapper { padding: 0; } cfrgo>bd aa.regbtn { margin: 22px 0; background: var(--a); font-weight: 500; } cfrgo>ft d { display: block; text-align: center; } baho hd { display: block; margin: 16px; } baho hd dv { display: flex; } baho hd span { font-size: x-large; width: fit-content; display:flex;} baho hd div p { line-height: 2; } baho hd div p a { font-weight: 300; color: var(--aa); } baho hd div p a i { display: flex; height: 12px; position: absolute; top: 7vh; right: 25.6%; width: fit-content; } @media(max-width: 999px){ baho hd span { font-size: 0.9rem; } }/* component :-Action_Pack */ cank bl { padding: 11px; } cank hd div { display: flex; gap: 11px; align-items: center;margin-bottom: 12px; } cank hd b { border: solid 1px var(--br); padding: 27px 0px 3px 0px; margin-top: 11px;margin-bottom: 10px; } cank hd f { color: var(--cr); background: var(--aat); font-size: 12px; padding: 4px; } cank hd span { font-size: 0.88em; color: var(--aa); display: flex; align-items: center; margin-left: -13px; } cank hd h3 { font-weight: 400; font-size: 1.50em; } cank hd h2 { font-weight: 500; font-size: 1.60em; } cank hd i { width: 36px; height: 44px; } cank hd mg { background: var(--bc); display: flex; border-radius: 3px;align-items: center;margin-bottom: 22px;} cank hd p { font-size: 0.79em; margin-left: 5px; } cank bd a { color: var(--aa); font-weight: 400; font-size: 0.90em; } cank bd p { font-size: 13px;line-height: 18px;} cank bd dv { background: var(--y2); display: flex; border-radius: 4px; align-items: center; } cank bd span { font-size:0.8em; line-height: 21px;padding: 10px } cank bd i { width: 37px; margin-bottom: 20px; margin-left: 10px; } cank bd b { font-weight: 700; font-size: 13px; } cank bd a { text-decoration: underline; } @media(max-width:999px){ cank bd i { width: 100px; } cank bd dv { background: var(--y2); display: flex ; border-radius: 4px; align-items: center; } cank hd h3 { font-size: 14px; } cank hd div { overflow: scroll; } } /*component: ActiveItem*/ /*component:-ActiveItems*/ mats hd table thead tr { border: solid 1px var(--bc); padding: 2px; display: flex; align-items: center; justify-content: space-between; background: var(--b1); position: relative; } @media(min-width: 999px){ mats hd table th:nth-child(3) { font-size: 12px; padding: 6px 4px; height: 18px; font-weight: 500; position: relative; color: var(--cg); left: 15%; } mrps hd tr td:nth-child(6) { position: relative; left: 34px; }} mats bl { display: block; } mats hd tr td:nth-child(9) { position: relative; right: 9%; } mats input { width: 13px; height: 13px; } mats hd th:nth-child(1), mats hd th td:nth-child(1) { padding-left: 1rem; display: flex; font-size: 12px; font-weight: 400;align-items: center;} mats hd thead { background: var(--bc); } mats hd name { font-weight: 400; display: flex; align-items: center; gap: 5px; color: var(--a); } mats hd table th { font-size: 12px; padding: 6px 4px; height: 18px; font-weight: 500; color: var(--cg); } mats tr td { padding: 4px 0; display: flex; align-items: center; } mats hd table tr { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 6px 27px; } mats hd span { font-size: 12px; } mats hd table td t { color: var(--br); font-size: 14px; } mats hd table i { width: 26px; height: 19px; } mats td t d i { width: 30px; height: 12px; } mats hd d { display: block; } mats tr td:nth-child(3) { padding: 4px 0; display: flex; align-items: center; position: relative; right: 2%; } mats tr td:nth-child(2) { padding: 4px 0; display: flex; align-items: center; position: relative; right: 10%; } mats tr td:nth-child(4) { padding: 4px 17px; display: flex; align-items: center; position: relative; right: 23%; } mats tr td:nth-child(4) { padding: 4px 17px; display: flex; align-items: center; position: relative; right: 25%; } mats tr th:nth-child(5) { font-size: 12px; height: 18px; font-weight: 500; color: var(--cg); padding: 4px 17px; } @media(max-width: 999px){ mats tr td:nth-child(2) { padding: 4px 0; display: flex; align-items: center; position: relative; right: 9%; } mats tr td:nth-child(3) { padding: 4px 0; display: flex; align-items: center; position: relative; right: 13%; } mats tr td:nth-child(4) { padding: 4px 17px; display: flex; align-items: center; position: relative; } mats hd table th:nth-child(3) { font-size: 12px; padding: 6px 4px; height: 18px; font-weight: 500; position: relative; color: var(--cg); } mats hd thead { background: var(--bc); display: flex; max-width: 444px; min-width: 625px; } mats hd table tbody tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; max-width: 633px; } mats hd tr td:nth-child(6) { position: relative; } mats hd table th { min-width: max-content; } mats hd table tr { max-width: fit-content; } mats bl { display: block; overflow: scroll; } mats hd table tr { max-width: 623px; } mats hd span { font-size: 12px; }} /* component:-Active_Custmer*/ /*component:-Active_Custmers*/ cave bl { display: block; } cave input[type="checkbox"] { width: 13px; height: 13px; } cave hd th:nth-child(1), cave td:nth-child(1) { padding-left: 1rem; display: flex; font-size: 12px; font-weight: 400;align-items: center; } cave hd thead { background: var(--b1); } cave hd name { font-weight: 400; display: flex; color: var(--a); align-items: center; gap: 9px; } cave hd table th { font-size: 12px; padding: .6rem .5rem; height: 18px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); } cave hd table tr { border: solid 1px var(--b-t); display: flex; align-items: center; justify-content: space-between; } cave hd span { font-size: 12px; } cave hd table td t { color: var(--br); font-size: 14px; } cave hd table tr { border: solid 1px var(--b-t); } cave hd table i { width: 26px; height: 19px; } cave hd table tr { border: solid 1px var(--b-t); padding: 11px; } cave td t d i { /* width: 30px; */ height: 12px; } cave hd d { display: block; margin-left: -21px; } cave>bl table { margin-top: 12px; } @media(max-width: 999px){ cave hd table th { min-width: max-content; } cave hd table tr { max-width: fit-content; } cave bl { display: block; margin-top: 3px; overflow: scroll; } cave hd table tr { max-width: 623px; } cave hd span { font-size: 12px; margin-left: -19px; } } /*Activity_Table*/ aito bl>hd { display: flex; padding: 10px; align-items: center; justify-content: end; gap: 22px; } aito bl { display: block; box-shadow: var(--bss); } aito hd div { display: flex; align-items: center; justify-content: center; gap: 11px; } aito hd input { display: flex; border: 1px solid var(--bor); border-radius: 3px; } aito hd box { display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--bor); border-radius: 4px; background: var(--b); } aito hd boxs { display: flex; gap: 10px; align-items: center; justify-content: center; } aito bd div { display: flex; align-items: center; justify-content: space-between; } aito bd b { opacity: 70%; font-size: 15px; font-weight: 500; } aito bd dv { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; } aito bd { display: block; padding: 12px; background: var(--b); } aito bd svg { height: 17px; width: auto; } aito bd f { font-size: 0.77rem; } aito input:focus { box-shadow: 0px 0px 1px 0px; border: none; } aito bd i { width: 24px; height: auto; } aito hd span { font-size: 0.77rem; } aito bd f svg { height: 19px; width: 19px; filter: opacity(0.5); } aito bd span { display: flex; gap: 3px; font-size: 0.77rem; } @media(max-width: 999px){ aito bd div { display: flex; align-items: center; gap: 23px; overflow: scroll; } aito bd dv { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; white-space: nowrap; } aito hd box { display: none; } aito bd f svg { height: 19px; width: 19px; filter: opacity(0.5); } aito hd div { align-items: center; display: flex; gap: 12px; } aito hd span { white-space: nowrap; font-size: 0.88rem; }} /*Additional_Feature*/ .Additional Additional { opacity: 1; visibility: visible; top: 44px; } Additional { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: -100%; height: 100%; overflow: hidden; visibility: hidden; } catf ul>f t i { height: 11px; width: 11px; } catf { display: block; background: var(--b); border-radius: 8px; width: -webkit-fill-available; max-width: 534px; margin: 10px; position: absolute; padding: 11px 22px; box-shadow: 0px 2px 5px 3px var(--b-t); inset: 0px 173px auto auto; } catf ul>li { display: flex; list-style: unset; gap: 5px; align-items: center; padding: 11px 0px; position: relative;} catf ul>li t { font-size: 13px; } catf ul>li i { height: 9px; width: 9px; background: var(--bor); padding: 2px; border-radius: 50px; } catf bd>d { display: flex; justify-content: space-between; } catf ul { padding: unset; } catf ul >f { align-items: center; gap: 4px; opacity: 72%; margin-bottom: 6px; } catf ul>li t { color: var(--br); font-size: 13px; opacity: 93%; } catf ul f>t { text-transform: uppercase; font-size: 12px; display: flex; gap: 7px; } catf>bl ul>li:hover svg { fill: var(--b); } catf>bl ul>li:hover i { background: var(--a); } @media(max-width:999px){ catf { inset: 0px auto auto auto; width: -webkit-fill-available; } } /*Advanced*/ caco { display: block; padding: 10px; background: var(--b); margin: 11px; position: relative; box-shadow: var(--bss); } caco select:focus { border: none; } @media(min-width :999px){ caco bd select { height: 40px; border-radius: 5px; padding: 4px 4px 4px 4px; margin: 10px 0px 0px 8px; font-weight: 400; background: unset; } caco bd sl { background: none; display: flex; border-radius: 5px; align-items: center; width: 100%; padding-bottom: 0; padding-top: 32px; } caco bl>bd { display: flex; }} caco bd span { position: relative; font-size: 15px; left: 40px; white-space: nowrap; padding-top: 14px; } caco hd btn { display: flex; padding: 11px; align-items: center; justify-content: center; position: absolute; right: 0; top: 0px; background: var(--aa); color: var(--b); } @media(max-width :999px){ caco bd span { position: relative; font-size: 15px; left: 19px; white-space: nowrap; padding-top: 18px; } caco bd sl { background: none; display: flex; border-radius: 5px; align-items: center; overflow-x: scroll; } caco bd select { border: 2px solid var(--bor); background: var(--bc); display: block; height: 45px; border-radius: 5px; margin: 13px; } caco hd btn { display: none; }}/*component:-BillExperience*/ cbes bl { background-image: url('/_Apps/Invoice/upload/billingg.png'); padding: 70px 100px 50px; text-align: center; background-size: cover; } cbes bd p { color: var(--cg); } cbes hd h4 { font-size: 22px; } cbes bd btns { display: flex; justify-content: center; gap: 11px; } cbes bd btn t { background: var(--a); padding: 9px; border-radius: 11px; color: var(--b); font-size: 13px; } cbes bd btn t:nth-child(2) { background: var(--0); border: solid 1px var(--bor); color: var(--br); font-weight: 400; padding: 7px 17px; } cbes bd a { color: var(--aa); font-weight: 400; } cbes bd span { font-size: 0.79em; display: block; color: var(--c); } cbes bd hr { width: 89px; margin-top: 26px; margin-bottom: 15px; } @media(max-width:999px){ cbes bl { padding: unset; margin-top: 11px; margin-bottom: 33px; } cbes bd p {font-size: 0.77em; } cbes bd hr { margin-top: 18px; width: 333px; display: block; } } /*component:-BusinessBill*/ cblg { background: var(--bc); display: block; padding: 14px; border-radius: 33px; max-width: 844px; margin: 21px auto; position: relative; } cblg>bg { border-radius: 23px; background: var(--b); margin: 11px; } cblg>bl { display: grid ; position: relative; height: 445px; } cblg bl h4 { font-size: 19px; } cblg bl h4 a { color: var(--green); font-size: 22px; font-weight: 500; } cblg span { display: flex; justify-content: center; align-items: center; } cblg hd dv { display: flex; justify-content: center; padding: 22px 12px; } cblg bd d { font-size: 0.88em; font-weight: 500; } cblg bd b { font-size: 0.99em; font-weight: 400; color: var(--cg); } cblg bd i { width: 30px; height: 30px; } cblg bd div { display: flex; align-items: center; gap: 11px; margin: 22px; } cblg hd svg { fill: var(--green); } cblg hd i { width: 307px; height: 7px; display: block; } cblg>bl bd dv i { width: 511px; height: 371px; position: absolute; right: -3px; bottom: -3px; } cblg>bl bd { display: flex; border-top: solid 1px var(--b-t); } cblg bd mg { width: max-content; display: block; margin-top: 7px; padding-left: 20px; } @media(max-width:999px){ cblg hd dv { padding: 5px 5px; display: flex; justify-content: space-around; } cblg bd div { display: flex; align-items: center; gap: 5px; margin: 22px 9px; } cblg bd d { font-size: 0.77em; font-weight: 500; } cblg bd b { font-size: 0.99em; font-weight: 400; color: var(--cg); } cblg bl h4 { font-size: 0.77em; } cblg>bl bd { border-top: solid 1px var(--b-t); display: block; } cblg>bl bd dv i { display: none; } cblg bd mg { padding: unset; } } /*component :-InvoiceUpgrade*/ ceud>bl { display: block; padding: 11px; background: var(--b); } ceud hd h4 { font-size: 1.16em; font-weight: 500; } ceud hd div { display: flex; justify-content: center; } ceud>bl>bd { display: grid; grid-template-columns: auto auto auto; text-align: center; } @media(max-width:999px){ ceud>bl>bd { grid-template-columns: unset; } } apfo hd div i { width: 11px; display: block; height: 11px; } apfo hd b { display: flex; gap: 7px; margin-top: 17px; align-items: center; } apfo bd div sl { display: flex; align-items: center; background: unset; height: fit-content; overflow: unset; } apfo>bl>hd div { display: flex; align-items: center; justify-content: space-between; } apfo>bl hd b i { width: 33px; height: 27px; transform: rotate( 270deg); display: block; } apfo>bl bd sl i { height: 16px; width: 20px; display: block; position: absolute; transform: rotate( 70deg); } apfo>bl bd div input { outline: 0; display: block; color: var(--c); height: 32px; font-weight: 200; box-shadow: 0px 0px 2px 0px; border-radius: 2px; width: 100%; padding: 0 19px; margin: 1px; } apfo>bl ft div { display: block; align-items: center; } apfo>bl ft div dv { display: flex; align-items: center; gap: 10px; } apfo bd sl input:focus { box-shadow: 0px 0px 0px 2px; border-radius: 2px; } apfo>bl ft span i { height: 28px; width: 28px; display: block; transform: rotate( 269deg); } apfo>bl ft span { display: flex; align-items: center; gap: 7px; } apfo>bl bd div i svg { fill: var(--aa); } apfo>bl>bd { display: block; margin-top: 22px; } apfo>bl ft div { display: block; align-items: center; position: relative; bottom: 21px; } apfo>bl ft dv input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); font-weight: bold; padding: 0 12px; width: 18px; height: 25px; } apfo>bl hd b t { font-weight: 500; font-size: 14px; } apfo>bl hd b i svg { fill: var(--c0); } apfo>bl bd div { display: block; position: relative; bottom: 6px; } apfo>bl ft dv t { font-size: 14px; font-weight: 300; } apfo>bl input:focus { border: solid 0px var(--bc); } apfo>bl ft span i svg { fill: var(--c0); } apfo>bl ft span t { font-size: 14px; } /*component:-AllInvoice*/ canv>bl>bd { display: block; padding: 13px 16px 2px; background: var(--b1); } canv bd t i { height: 14px; width: 14px; } canv>bl>bd:hover { background: var(--bc); } canv bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } canv bd name { display: flex; align-items: center; gap: 4px; } canv bd rs { position: absolute; right: 11px; font-size: 0.99em; font-weight: 500; } canv bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } canv bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } canv bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } canv bd t { margin: 8px 0px; font-size: 0.8em; display: flex ; align-items: center; gap: 11px; color: var(--green); } canv>bl>bd c { color: var(--green); } canv>bl>bd i { width: 13px; } canv>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } canv>bl>bd b { font-size: 0.77em; font-weight: 400; color: var(--c2); } canv>bl>bd { display: block;background: var(--b1); } case bd div span { color: var(--a1); font-size: 0.77em; margin: 3px 3px 1px 0px; display: flex ; align-items: center; } canv>bl>bd c { width: 0; height: 0; border: solid 2px; border-radius: 11px; color: var(--c0); } case>bl { display: block; border: 1px solid var(--bc); } case>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} case hd h4 svg { fill: var(--a); } case hd dv i { height: 22px; width: 22px; position: unset; } case hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } case hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } case hd dv i svg:nth-child(1) { fill: var(--b); } case hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } case hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } case hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } case hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } /*component :-AllItemList*/ alte hd h2 { font-size: 15px; min-width: fit-content; font-weight: 500; } alte hd btn { display: flex; align-items: center; padding: 8px; } alte hd i { width: 18px; height: 18px; } alte hd btn { display: flex; align-items: center; padding: 5px 11px; border-radius: 6px; max-width: fit-content; } alte hd btn:hover { background: var(--b1); } alte hd btns btn { background: var(--a); padding: 2px; } alte hd btns box { background: var(--bc); display: block; width: fit-content; border: solid 1px var(--b-t); border-radius: 4px; padding: 3px; } alte hd svg { fill: var(--b-t77); } alte hd box svg { fill: var(--c); } alte hd btns { display: flex; align-items: center; gap: 11px; } alte>bl>hd { display: flex; align-items: center; border-bottom: solid 1px var(--b-t); margin-bottom: 11px; justify-content: space-between; padding: 5px 7px; } alte hd box i { width: 21px; height: 19px; } alte bl>hd>btn svg { fill: var(--aa); } mapo>bl { display: block; border: 1px solid var(--bc); } mapo>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} mapo hd h4 svg { fill: var(--a); } mapo hd dv i { height: 22px; width: 22px; position: unset; } mapo hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } mapo hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } mapo>bl>bd { display: block; padding: 13px 16px 2px; background: var(--b1); } mapo bd t i { height: 14px; width: 14px; } mapo>bl>bd:hover { background: var(--bc); } mapo bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } mapo hd dv i svg:nth-child(1) { fill: var(--b); } mapo hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } mapo bd rs { position: absolute; right: 19px; font-size: 0.88em; font-weight: 500; } mapo bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } mapo bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } mapo bd t { margin: 8px 0px; font-size: 0.8em; display: flex; align-items: center; gap: 11px; color: var(--a2); } mapo hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } mapo hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } mapo hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } mapo>bl>bd c { color: var(--green); } mapo>bl>bd i { width: 13px; } mapo>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } /* component:-All_Customers*/ .start cals { left: 74px; } cals bl { position: absolute; left: 222px; z-index: 999; background: var(--b); top: -100%; transition: 99ms; } cals bd { margin: 11px; padding: 11px; width: max-content; box-shadow: var(--bss); border: solid 1px var(--b-t); } cals bd li { list-style: none; } cals bd li { list-style: none; display: flex; align-items: center; gap: 19px; justify-content: space-between; padding: 2px 11px; width: auto; } cals bd i { height: 15px; width: 15px; } cals bd t { font-size: 13px; line-height: 35px; } cals bd div { display: block; border-bottom: solid 1px var(--b-t); scrollbar-width: thin; scrollbar-color: var(--c0) var(--b); overflow-y: scroll; height: 348px; } cals bd dv { display: flex; align-items: center; gap: 17px; } cals bd dv { display: flex; align-items: center; gap: 17px; margin-top: 6px; margin-bottom: -6px; } cals bd li:hover { background: var(--a); border-radius: 9px;color:var(--b); } cals bd dv svg { background: var(--a); border-radius: 12px; display: block; fill: var(--b-t95); } .customers cals bl { top: 44px; } /*Announcements*/ .Announcements announcements { right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible; } announcements { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; overflow: hidden; visibility: hidden; } amto hd d>i { display: block; background: var(--bc); padding: 11px; width: 10px; height: 10px; position: absolute; top: 0px; left: 0; border-radius: 0; } amto { display: block; height: 100%; } .Announcements amto { position: relative; z-index: 999; top: 0px; max-width: 400px; margin-left: auto; } amto bl { border: solid 1px var(--bc); position: relative; padding: 10px; display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available; } amto hd i { height: 17px; width: 17px; } amto hd h4 { display: flex; align-items: center; justify-content: space-between; } amto bd i { height: 70%; width: 70px; border: 2px solid var(--b1); } amto bd { display: flex; gap: 12px; padding: 10px; border-bottom: 1px solid var(--bc); } amto bd b { font-size: 0.88em; font-weight: 500; } amto bd p { margin-top: 5px; line-height: 19px; color: var(--c0); } amto bd:hover { background: var(--b1); } amto bd span { opacity: 0; } amto hd btn.btn.t { position: relative; } amto bd span:hover { opacity: 1; color: var(--a); } amto hd { display: block; padding: 30px 16px; border-bottom: 1px solid var(--bc); } aplo>bl bd div { display: flex; gap: 19%; } /* Component Azure_PipelinesTeams */ apts>bl bd tr { background: var(--b); } apts>bl bd i { height: 42px; width: 31px; display: block; } apts>bl bd tr:nth-child(1){ background: var(--b);display:flex;} apts>bl bd tr:nth-child(1) { display: grid; grid-template-columns: 48% 16% 16% 20%; align-items: center; background: var(--b-t44); height: 45px; } apts>bl bd table td { padding: .6rem .5rem; overflow-wrap: break-word; text-align: -webkit-match-parent; height: 26px; } apts>bl bd { display: grid; margin: 11px; padding: 11px; } apts>bl bd tr { display: grid; grid-template-columns: 5% 43% 16% 16% 20%; align-items: center; margin-bottom: 9px; box-shadow: var(--bss); background: var(--b-t44); } apts>bl bd table thnth-child(1) { font-size: 0.77em; padding: 9.7px; height: 30px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 400; } apts>bl bd table td { padding: 9.7px; overflow-wrap: break-word; text-align: -webkit-match-parent; height: 30px; font-weight: 400; } apts>bl bd tbody { padding: 12px; display: grid; margin: auto; max-width: 93%; margin-top: 11px; border-bottom: solid 1px var(--bor); } @media(max-width:999px){ apts>bl bd tr:nth-child(1) { background: var(--b); grid-template-columns: 22% 22% 13% 20%; align-items: center; white-space: nowrap; overflow-x: scroll; width: 100%; gap: 5px; display: block; } apts>bl bd tbody { overflow-x: scroll; display: grid; max-width: unset; } apts>bl bd { display: block; margin: auto; padding: 0px; width: 100%; } apts>bl bd table td { font-size: 13px; } apts>bl bd tr { background: var(--b); grid-template-columns: 22% 22% 13% 20%; align-items: center; white-space: nowrap; overflow-x: scroll; width: 100%; gap: 5px; display: block; } } /* component :-Benefit*/ cbft bl { display: block; box-shadow: var(--bs-b);height: 92%; } cbft bd div { display: flex; align-items: center; gap: 26%;margin: 11px; } cbft bd span { color: var(--aa); font-weight: 300; font-size:0.84em; } cbft bd h2 { font-weight: 400; font-size: 18px; } cbft bd p { font-size: 14px; } cbft bd span { text-decoration: underline; } /*Billing_Account*/ blnt bl { display: block; padding: 5px; border-bottom: solid 1px var(--bor); margin: 11px 0; } blnt hd h2 { font-size: 19px; } blnt hd p { font-size:0.88em; color: var(--c0); } blnt f a{ font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; } blnt hd f i { width: 12px; height: 12px; } blnt bl hd f { display: flex; align-items: center; } blnt bd a i { width: 12px; height: 12px; } blnt bd d a{ font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline;display: flex ; align-items: center; } blnt bd d { display: flex; gap: 10px; font-weight: 500; } blnt bl bd { display: flex; margin-top: 20px; flex-direction: column; gap: 16px; } blnt bd d:nth-child(1) { display: flex; gap: 77px; font-weight: 500; } blnt ft btn { background: var(--aa); padding: 9px; margin-top: 10px; display: flex; width: 162px; font-size: 0.77em; justify-content: center; color: var(--b); font-weight: 300; } blnt d num { font-weight: 400; font-size: 0.88em; } @media(max-width:999px){ blnt bd d:nth-child(1) { gap: 20px;} blnt bd d{font-size: 13px; } blnt bd d span { font-size: 13px; } } /* Billing_Profile */ bnpo hd b { border: solid 1px; height: 23px; } bnpo hd h3 { font-weight: 400; font-size: x-large; } bnpo bl hd { display: flex; align-items: center; gap: 3px; } bnpo hd span { font-size: larger; } bnpo bd p { display: flex; gap: 5px; align-items: center; margin-block-start: 0; margin-block-end: 0; font-size: 0.77em; } bnpo d cc { background:var(--cbg); display: flex; gap: 5px; padding: 3px; align-items: center; padding: 6px; justify-content: space-between; } bnpo p a i { width: 12px; height: 12px; } bnpo d btn { align-items: center; font-size: 13px; background: var(--bg); border-bottom: solid 2px var(--a); width: fit-content; padding: 7px; } bnpo p a { font-weight: 400; font-size: 13px; color: var(--a); text-decoration: underline; display: flex; margin: 7px 0; align-items: center; gap: 3px; } bnpo bl bd d { display: grid; gap: 8px; } bnpo bl bd { display: block; margin-top: 8px; } bnpo cc f i { height: 19px; width: 19px; } bnpo bl { display: block; margin: 10px; } bnpo p i { width: 12px; height: 12px; border: solid 1px; } @media(max-width:999px){ bnpo d cc { display: block; } bnpo bd p { display: block; } } /* component:Business_Profiles_Hero*/ cbph hd b { border: solid 1px; margin: 4px; } cbph bl { display: block; padding: 11px; } cbph hd h3 { font-weight: 400; font-size: x-large; } cbph bd p:nthichild(1){ background: var(--bc); font-weight: 400; font-size: 13px; } cbph bd p { font-weight: 400; font-size: 13px; display: flex; align-items: center; } cbph bl bd { display: block; padding: 11px 0; } cbph bd p i{ width: 13px; } cbph bd p:nth-child(1) { font-weight: 400; font-size: 11px; margin-block-start: 0; margin-block-end: 0; display: flex; align-items: center; background: var(--bc); padding: 8px; } cbph bd a { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; font-size: 12px; display: flex; align-items: center; gap: 5px;} cbph ft p a:nth-child(2) { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; } @media(max-width:999px){ cbph ft i { width: 157px; } cbph bd p:nthichild(1){display: block } cbph bd p {display: block} } /*Choose_Invoice*/ coie bl { display: grid; grid-template-columns:31% auto; box-shadow: var(--bs-b); padding: 22px; gap: 11px; margin: 11px; } coie hd>h4 { font-size: 1.77em; font-weight: 300; } coie h4>a { margin-top: 6px; margin-bottom: 6px; font-weight: 300; background: var(--lgaa); background-clip: text; color: transparent; max-width: max-content; } coie hd>div { border-top: solid 1px var(--bc); padding: 22px 0; border-bottom: solid 1px var(--bc); display: grid; margin-top: 11px; gap: 32px; grid-template-columns: max-content auto; } coie hd>div dv>t { font-size: 1.44em; } coie hd>div dv c { display: block; font-size: 0.77em; } coie hd>btn { display: flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 4px; padding: 15px 22px; width: fit-content; margin: 55px 0px; } coie bd cm>list { flex: auto; animation: slidleft 13s linear infinite; padding: 35px 0; display: grid; grid-auto-flow: column; margin: 11px; justify-content: center; height: -webkit-fill-available; } coie bl bd { overflow: hidden; display: block; background: var(--bc); padding: 22px; border-radius: 11px; } coie hd>btn:hover { background: var(--c); color: var(--b); transition: 999ms; } coie bl>bd i { width: 265px; height: 100%; margin: 0 15px; } coie div>dv:nth-child(1) { border-right: solid 1px var(--bc); padding-right: 25px; } @keyframes slidleft{ 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @media(max-width:999px){ coie bl { display: block; margin: unset; padding: 17px; } coie bl bd { padding: 0; display: grid; grid-template-columns: 100%; } coie bd cm{ display: grid; overflow: hidden; } coie hd>div { width: unset; } } /*component-: ContactUpdate*/ cote>bl>bd { display: grid ; } cote>bl bd>dv { display: grid ; padding: 11px 22px; position: relative; margin-bottom: 10px; border: 1px solid var(--bc); background-color: var(--b); border-radius: 6px; } cote>bl { display: grid ; grid-template-columns: max-content auto 0; padding: 0 11px; margin: 0 11px; } cote>bl bd span:nth-child(1) { font-size: 0.77em; margin-bottom: 11px; } cote>bl bd span:nth-child(2) { font-size: 0.74em; color: var(--cg); } cote>bl>bd name { font-size: 0.77em; font-weight: 400; color: var(--cg); margin-top: 5px; } cote>bl hd t { font-size: 0.7em; width: min-content; } cote>bl hd>d { display: flex ; flex-direction: column; padding-top: 22px; } cote>bl hd svg { fill: var(--a); } cote>bl hd>i { height: 15px; width: 15px; padding: 7px; border: 1px solid var(--bc); margin: 5px; border-radius: 55%; background: var(--bc); margin-top: 17px; } cote>bl hd { display: flex ; margin-right: 20px; position: relative; } cote>bl hd:before { content: ""; position: absolute; right: 20px; width: 1px; background: var(--a); height: 100%; } cote>bl time { font-size: 0.66em; line-height: 2; } @media(max-width:999px){ cote>bl bd>dv {width: auto;} cote>bl { margin: 0; padding: 0; } } /*component :-ContactUpdates*/ @media(max-width:999px){ ctus { padding: 11px; display: block; margin: 11px; } }ccut hd div i { width: 11px; display: block; height: 11px; } ccut hd b { display: flex; gap: 7px; margin-top: 17px; align-items: center; } ccut bd div sl { display: flex; align-items: center; background: unset; height: fit-content; overflow: unset; } ccut>bl>hd div { display: flex; align-items: center; justify-content: space-between; } ccut>bl hd b i { width: 33px; height: 27px; transform: rotate( 270deg); display: block; } ccut>bl bd sl i { height: 16px; width: 20px; display: block; position: absolute; transform: rotate( 70deg); } ccut>bl bd div input { outline: 0; display: block; color: var(--c); height: 32px; font-weight: 200; box-shadow: 0px 0px 2px 0px; border-radius: 2px; width: 100%; padding: 0 19px; margin: 1px; } ccut>bl ft div { display: block; align-items: center; } ccut>bl ft div dv { display: flex; align-items: center; gap: 10px; } ccut bd sl input:focus { box-shadow: 0px 0px 0px 2px; border-radius: 2px; } ccut>bl ft span i { height: 28px; width: 28px; display: block; transform: rotate( 269deg); } ccut>bl ft span { display: flex; align-items: center; gap: 7px; } ccut>bl bd div i svg { fill: var(--aa); } ccut>bl bd { display: block; margin-top: 22px; } ccut>bl ft div { display: block; align-items: center; position: relative; bottom: 21px; } ccut>bl ft dv input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); font-weight: bold; padding: 0 12px; width: 18px; height: 25px; } ccut>bl hd b t { font-weight: 500; font-size: 14px; } ccut>bl hd b i svg { fill: var(--c0); } ccut>bl bd div { display: block; position: relative; bottom: 6px; } ccut>bl ft dv t { font-size: 14px; font-weight: 300; } ccut>bl input:focus { border: solid 0px var(--bc); } ccut>bl ft span i svg { fill: var(--c0); } ccut>bl ft span t { font-size: 14px; } /*component :-CreatExpense*/ cens>bl { padding: 11px; display: flex; justify-content: space-between; align-items: center; margin: 11px 0; } cens btns>btn>t { font-size: 12px; } cens hd h2 { font-size: 18px; font-weight: 600; white-space: nowrap; } cens bd btn i { width: 16px; position: relative; } cens hd btn { display: flex; align-items: center; } cens hd svg { fill: var(--aa); } cens bl bd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 3px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } cens bd btn { display: flex; align-items: center;padding: 7px 8px; width: max-content; border-radius: 6px; } cens bd btns { display: flex; align-items: center; gap: 11px; justify-content: center; } cens bd btns svg { fill: var(--b); } cens bd box { box-shadow: var(--bss); padding: 6px; align-items: center; background: var(--bc); position: relative; } cens bd box svg { fill: var(--br); height: 18px; width: 18px; } /*component:-Create_Customers*/ cras bl { padding: 16px 10px 16px 6px; } cras bd { padding: 93px 20px; justify-content: center; display: flex; } cras bd btn { padding: 13px 18px; background: var(--a); border-radius: 6px; color: var(--b); font-size: 13px; display: block; width: fit-content; position: relative; left: 20%; top: 11px; } cras bd h4 { font-size: 1.44em; font-weight: 400; } cras bd span { font-size: 0.8em; color: var(--a); display: block; position: relative; top: 41px; text-align: center; } cras bd p { color: var(--cg); font-size: 13px; text-align: center; } cras ft svg { display: block; fill: var(--b-t52); transform: rotate(359deg);} cras ft dv { display: flex; align-items: center; justify-content: center; gap: 11px; } cras ft i { width: 25px; height: 20px; } cras ft f { font-size: 13px; color: var(--cg); } cras ft d img { width: 100px; } /*Compoent :- Created_Invose */ pcis>bl { display: flex; width: 431px; } .Setp2 pcis, .Setp3 pcis { display: none; } pcis { display: none; } .Setp1 pcis { display: block; } @media(max-width:999px){ pcis>bl { max-width: 253px; display: flex; } } /*componet: Current_Status*/ csnt hd { box-shadow: var(--bs-b); width: 44%; } csnt bd { padding: 18px; box-shadow: var(--bs-b); width: 100%; } csnt bl { display: flex; } csnt hd t { padding: 11px; display: block;} csnt bd b { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 10px; margin: 12px 0; font-size: 0.77em; margin-left: 18px; border-radius: 3px; margin-right: 17px; } csnt hd b { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 10px; margin: 44px 0; font-size: 0.77em; border-radius: 3px; width: 78px; } csnt hd dv { display: flex; align-items: center; } /* component:-Current_Statuses*/ csts bl { padding: 11px; margin-bottom: -15px; } csts hd h2 { font-weight: 400; font-size: 21px; } @media(max-width:999px){ csts bl { display: block; } csnt bd { width: 100%; } csnt hd { box-shadow: var(--bs-b); width: 105%;} } /*component:-Custmers_Detail*/ cuds hd span { font-size: 13px; padding: 17px; } cuds hd i { width: 58px; height: 51px; } cuds hd d { display: flex; align-items: center; margin-top: -20px; } cuds hd c { font-size: 12px; font-weight: 600; } cuds hd gg { font-size: 13px; } cuds hd t { font-size: 14px; font-weight: 400; color: unset; display: flex; align-items: center; gap: 11px; } cuds hd f { color: var(--a); font-size: 11px; } cuds hd p { margin-left: 22px; line-height: 20px; color: unset; } cuds hd div { display: block; background: var(--b1); border: 2px solid var(--b); border-bottom-right-radius: 25px; border-bottom-left-radius: 25px; height: 152px; } cuds hd b { display: flex; justify-content: flex-end; } cuds hd b i { width: 19px; height: 17px; display: block; margin-right: 30px; } cuds bd i { width: 20px; height: 18px; } cuds bd svg { fill: var(--a); transform: rotate( 180deg); } cuds bd flex { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--b-t); padding: 11px; } cuds bd c { font-size: 12px; font-weight: 300; } cuds bd a { color: var(--a); font-weight: 300; } cuds bd d { padding: 11px; line-height: 0.33; } cuds bd p { font-size: 0.81em; } cuds bd mg { display: grid; grid-template-columns: auto auto; line-height: 31px;gap: 7px;} cuds bd t { font-size: 12px; color: var(--cbg); } cuds bd li { list-style: none; } cuds bd p { font-size: 0.81em; text-transform: uppercase; } cuds bd mg>ul { padding: 0 14px; } cuds bd mg i:nth-child(1) { background: var(--a); } cuds ft {display: block; padding: 22px; } cuds t>i { height: 18px; width: 18px; } cuds ft span { font-size: 13px; color: var(--cg); display: flex; justify-content: center; } cuds ft .review-card { display: flex; align-items: center; border: 1px solid var(--b-t52); background-color: var(--b-t50); padding: 15px; width: 233px; border-radius: 4px; margin-top: 33px; } cuds ft flex { display: flex; align-items: center; justify-content: space-between; padding: 0px 0px 2px; border-bottom: 1px solid var(--b-t); } cuds ft p { font-size: 0.81em; text-transform: uppercase; } cuds ft i { width: 52px; height: 24px; transform: rotate(180deg); } cuds ft svg { fill: var(--a); transform: rotate( 180deg); } cuds ft t { font-size: 12px; line-height: 19px; } cuds ft div { display: grid; background: var(--b-t50); margin: 11px 0; padding: 14px; border: solid 1px var(--green); margin-top: 55px; } cuds ft dv { display: flex; } cuds ft dv { display: flex; gap: 21px; } cuds ft grid>ul { padding: 0; margin: 9px 0; } cuds grid li>t { font-size: 13px; color: var(--cbg1); font-weight: 400; margin-top: 9px; display: block; } cuds ul:nth-child(2)>li:nth-child(1) b { word-break: break-all; width: 88px; display: block; } cuds ul:nth-child(2)>li>b { font-size: 14px; font-weight: 400; } cuds grid>ul:nth-child(1)>li:nth-child(2) { height: 11px; } cuds grid>ul:nth-child(2)>li:nth-child(2) { height: 11px; } cuds ft strong { display: flex ; justify-content: center; } cuds ft btn { display: flex; justify-content: center; font-size: 11px; align-items: center; background: var(--b1); padding: 8px 17px; border: solid 1px var(--b-t); border-radius: 5px; margin-top: 14px; font-weight: 400; } cuds bd mg>i:nth-child(1)>svg { fill: var(--b); } cuds bd mg i { border-radius: 11px; height: 20px; } cuds ft grid { display: grid; grid-template-columns: auto auto; align-items: center; } cuds ft li { list-style: none; margin: 11px 0; } cuds ft t { font-size: 12px; color: var(--cbg); } cuds ft b { font-size: 11px; font-weight: 400; } @media(max-width:999px){ cuds bd { width: auto; padding: 7px; margin: 0; } cuds ft div { margin-left: 0; } cuds>bl ul { padding: 11px; } cuds bd d { padding: 11px 0; } cuds bd flex { padding: 11px 0; } cuds bd mg>ul { padding: 0 0px; } cuds ft { padding: 8px; } cuds ft grid {justify-content: space-between; } cuds { display: block; padding: 11px; margin: 11px; } } /*CustomerChoice*/ /*CustomerDetails*/ ccds>bl>hd>i {height: 15px;width: 15px;opacity: 30%;position: absolute;top: 18px;display: block;left: 12px;} ccds>bl {visibility: hidden; } ccds hd>input { width: 318px; height: 34px; border-radius: 6px; font-weight: 500; padding: 0px 19px; margin: 4px; } ccds hd>input:focus { border: 1px solid var(--a); } ccds ft>i>svg { fill: var(--b); } ccds bl>ft>i { height: 13px; width: 13px; background: var(--a); } ccds bl>ft>t { font-size: 0.77em; color: var(--a); } ccds.Customer bl { display: block; visibility: visible; } ccds bl>ft { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--bc); } ccds.Customer { position: absolute; top: 14%; left: 16%; } ccds>bl { display: block; box-shadow: 0px 10px 10px var(--b); position: relative; background: var(--b); padding: 5px; } /*component:-CustomerDetailsHeader*/ csde hd { padding: 0 20px; margin-top: 20px; } csde hd h4 { font-size: 20px; font-weight: 400; } csde hd btn d { padding: 8px 7px; border: 1px solid var(--b-t); background: var(--b1); border-radius: 4px; font-size: 12px; } csde hd btn mg { border: solid 1px var(--b-t); padding: 7px 10px; background: var(--b1); border-radius: 4px; display: flex; align-items: center; } csde btn c { background: var(--a); color: var(--b); border-color: var( --a); font-size: 12px; } csde hd dv { display: flex; align-items: center; justify-content: space-between; } csde hd mc { display: flex; gap: 11px; } csde bd ul { display: flex; align-items: center; gap: 22px; list-style: none; border-bottom: solid 1px var(--b-t); padding: 5px 15px; overflow: scroll; margin: 0; margin-top: 16px; } csde bd a { font-size: 12px; } csde bd h4 { font-size: 13px; font-weight: 500; } csde hd i { width: 11px; height: 11px; } csde>bl>hd btn { padding: 7px; border-radius: 7px; color: var(--c); min-width: fit-content; font-size: 0.88em; font-weight: 400; border: solid 1px var(--bc); background: var(--bg); display: flex; align-items: center; justify-content: center; } csde>bl>hd btns { display: flex; gap: 11px; align-items: center; } csde>bl>hd btn:nth-child(3) { background: var(--a); color: var(--b); font-size: 0.77em; display: flex; align-items: center; } csde hd btn>a { font-size: 0.88em; font-weight: 400; } csde bd li:nth-child(1) { border-bottom: solid 3px var(--a); display: block; } csde bd ul>li { font-size: 0.77em; padding-bottom: 8px; } @media(max-width:999px){ csde hd dv { display: grid; align-items: center; gap: 13px; } } /* Component :- CustomerEdit*/ cmet hd ul { display: flex; align-items: center; gap: 22px; list-style: none; border-bottom: solid 1px var(--b-t); padding: 5px 15px; } cmet bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 122px 30% 30% 24%; gap: 8px; } cmet>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; } cmet>bl sl input{ border: solid 1px var(--bor); border-radius: 5px; height: fit-content; padding: 9px; width: -webkit-fill-available; } cmet>bl sl input:focus { box-shadow: inset 0 0 0 0px var(--aa); border-radius: 5px; } cmet>bl div>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; } cmet>bl bd div { display: flex; gap: 20px;} cmet>bl bd div dv { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--bor); padding: 4px 20px; width: 100%; justify-content: center; position: relative; border-radius: 5px; } cmet>bl bd div dv i { height: 21px; display: block; width: 21px; } cmet>bl bd div dv t { font-weight: 400; color: var(--cg); display: block; } cmet>bl input { position: absolute; opacity: 0; } cmet>bl bd spain t { font-size: 0.7em; color: var(--cg); } cmet>bl ft b { margin-top: 38px; display: block; color: var(--a); } cmet bd select:focus { border: solid 1px var(--bor); } cmet bd select { border: solid 1px var(--bor); padding: 8px; font-size: 0.7em; font-weight: 100; border-radius: 5px; width: auto; } cmet bd spain { display: flex; margin-left: 27px; gap: 10px; } cmetcmet>bl bd div spain dv i svg { fill: var(--br); border-left: dotted 1px var(--bor); } cmet bl bd svg { width: 23px; } cmet>bl bd div dv:hover { border: 1px dashed var(--aa); } cmet bd mg { display: flex; align-items: center; gap: 3px; margin-top: 33px; margin-bottom: 11px; } cmet bd mg c { font-size: 0.79em; color: var(--cg); } cmet bd mg p { font-size: 0.7em; } cmet bd select:hover { border: solid 1px var(--aa); } cmet>bl hd ul h4:after { content: ""; display: block; border-top-left-radius: 46px; border-top-right-radius: 50px; position: relative; top: 7px; border: solid 1px var(--a); height: 1px; background: var(--a); } cmet bd gg { border: solid 1px var(--a); padding: 4px 7px; background: var(--a); border-radius: 3px; display: flex; align-items: center; color: var(--b); font-size: 0.7em; gap: 3px; } cmet bd gg i { width: 11px; height: 9px; } cmet bd gg svg { fill: var(--b); transform: rotate( 45deg); } cmet bd d t { font-size: 0.7em; position: relative; left: 15%; top: 4px; } cmet>bl bd div spain dv i svg { fill: var(--cg); border-left: dotted 1px var(--bor); } cmet bd b { font-size: 0.77em; color: var(--a); font-weight: 400; } cmet ft dv { display: flex; gap: 12px; align-items: center; height: 52px; padding-left: 16px; } cmet ft btn:nth-child(2) { background: var(--bor); color: var(--a1); } cmet ft btn { background: var(--a); padding: 7px 10px; border-radius: 3px; color: var(--b); font-weight: 300; font-size: 0.88em; } cmet bd a { color: var(--a); font-size: 0.99em; font-weight: 400; } cmet ft { box-shadow: -3px -2px 1px 1px var(--bc); margin-top: 39px; display: block; height: 55px;margin-bottom: 22px;} cmet>bl sl input { border: solid 1px var(--aa); border-radius: 5px; font-size: 12px; font-weight: unset; } cmet>bl hd ul h4:after { content: ""; display: block; border-top-left-radius: 46px; border-top-right-radius: 50px; position: relative; top: 7px; border: solid 1px var(--aa); } cmet>bl div>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.77em; } cmet>bl hd ul h4 { font-size: 0.79em; font-weight: 500; } cmet bd { margin-top: 25px;padding:19px; } cmet>bl hd li t { font-size: 0.77em; } @media(max-width:999px){ cmet bd sl { display: grid;grid-template-columns: 126px 65% 30% 24%; } cmet hd { display: flex ; overflow: scroll; } cmet hd ul { min-width: max-content; } cmet>bl>bd { padding: 7px; } } /*component:-AllInvoice*/ caic>bl>bd { display: block; padding: 13px 16px 2px; background: var(--b1); } caic bd t i { height: 14px; width: 14px; } caic>bl>bd:hover { background: var(--bc); } caic bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } caic bd name { display: flex; align-items: center; gap: 4px; } caic bd rs { position: absolute; right: 11px; font-size: 0.99em; font-weight: 500; } caic bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } caic bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } caic bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } caic bd t { margin: 8px 0px; font-size: 0.8em; display: flex ; align-items: center; gap: 11px; color: var(--green); } caic>bl>bd c { color: var(--green); } caic>bl>bd i { width: 13px; } caic>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } caic>bl>bd b { font-size: 0.77em; font-weight: 400; color: var(--c2); } caic>bl>bd { display: block;background: var(--b1); } caic bd div span { color: var(--a1); font-size: 0.77em; margin: 3px 3px 1px 0px; display: flex ; align-items: center; } caic>bl>bd c { width: 0; height: 0; border: solid 2px; border-radius: 11px; color: var(--c0); } /*component :-CustomerHistorys*/ alte hd h2 { font-size: 15px; min-width: fit-content; font-weight: 500; } alte hd btn { display: flex; align-items: center; padding: 8px; } alte hd i { width: 18px; height: 18px; } alte hd btn { display: flex; align-items: center; padding: 5px 11px; border-radius: 6px; max-width: fit-content; } alte hd btn:hover { background: var(--b1); } alte hd btns btn { background: var(--a); padding: 2px; } alte hd btns box { background: var(--bc); display: block; width: fit-content; border: solid 1px var(--b-t); border-radius: 4px; padding: 3px; } alte hd svg { fill: var(--b-t77); } alte hd box svg { fill: var(--c); } alte hd btns { display: flex; align-items: center; gap: 11px; } alte>bl>hd { display: flex; align-items: center; border-bottom: solid 1px var(--b-t); margin-bottom: 11px; justify-content: space-between; padding: 5px 7px; } alte hd box i { width: 21px; height: 19px; } alte bl>hd>btn svg { fill: var(--aa); } /*component :- CustomerList*/ cult bd input { width: 13px; height: 13px; } cult bd span { display: block; font-size: 13px; line-height: 21px; } cult bd div { display: grid; grid-template-columns: max-content auto; } cult bd input { width: 13px; height: 13px; margin: 5px 5px; } cult bd span.custmer { font-weight: 500; } cult bd svg { fill: var(--bor); } cult bl:hover { background: var(--b1); } cult bl { padding: 5px 9px; border-bottom: solid 1px var(--b-t); } cult dv>a>t { font-size: 0.88em; font-weight: 400; } cult dv>d { display: flex; align-items: center; justify-content: space-between; margin: 6px 0; } cult dv>d>prc { font-size: 0.77em; color: var(--cbg1); } cult dv>d>i { width: 15px; height: 15px; } /* Componet:CustomerModule */ cums>bl hd div>i { height: 22px; width: 22px; background: var(--at); padding: 11px; display: flex; font-weight: 600; } cums>bl hd div dv>t { color: var(--cbg1); display: block; } cums>bl hd divs div { display: flex; gap: 13px; } cums>bl hd divs i { display: flex; height: 22px; width: 22px; } cums>bl hd divs { display: flex; align-items: center; justify-content: space-between; } cums { display: block; max-width: 390px; box-shadow: 0px 0px 2px 0px; padding: 11px; margin: 11px; border-radius: 5px; } cums>bl hd divs cc>i svg { fill: var(--a); display: block; } cums>bl hd divs cc>i { height: 22px; width: 15px; } cums>bl hd divs cc { display: flex; gap: 11px; } cums>bl hd mg ss { display: flex; align-items: center; gap: 11px; } cums>bl hd mg ss>i { height: 22px; width: 22px; display: block; } cums>bl hd mg { display: block; line-height: 2; margin-bottom: 13px; } cums>bl hd mg ss>i svg { fill: var(--cbg1); display: block; } cums>bl hd mg ss>t { color: var(--cbg1); display: block; } cums>bl bd div>b { border-bottom: solid 2px var(--a); display: block; } cums>bl bd div { display: flex; gap: 16px; border-bottom: solid 1px var(--aat); } cums>bl bd mg>i { height: 22px; width: 99%; display: flex; justify-content: center; } cums>bl bd mg { display: grid; justify-content: center; } cums>bl bd mg>t { color: var(--cbg1); display: block; } cums>bl bd mg>b { display: flex; justify-content: center; } cums>bl bd mg>i svg { fill: var(--y3); } cums>bl bd grid { display: grid; grid-template-columns: 50%auto; box-shadow: 0px 0px 1px 0px; padding: 11px 0px; border-radius: 3px; } cums>bl bd mg:nth-child(1) { display: grid; justify-content: center; border-right: solid 1px var(--at); } cums>bl bd dv>b { font-weight: 400; display: block; line-height: 3; } cums>bl bd dv { display: block; } cums>bl bd dv cc { display: grid; grid-template-columns: 50% 50%; align-items: center; } cums>bl bd dv cc>t { color: var(--cbg1); display: block; line-height: 2; font-size: 0.88em; } cums>bl bd dv cc>b { font-weight: 400; display: block; font-size: 0.88em; } cums>bl ft div dv>b { padding: 0 6px; background: var(--aat); border-radius: 6px; color: var(--b); } cums>bl ft div dv { display: flex; gap: 9px; } cums>bl ft div { display: flex; justify-content: space-between; padding: 11px 0px; box-shadow: 0px 0px 1px 0px; border-radius: 3px;margin-top: 11px; } cums>bl ft div i { height: 22px; width: 22px; display: flex; transform: rotate( 269deg); } cums>bl ft div dv>t { padding-left: 8px; display: block; } /*component :-Customer_Invoice*/ cmcr bl { padding: 12px; border-bottom: solid 1px var(--bt); margin: 11px 4px; display: block; } cmcr hd div { border-radius: .3rem; padding: 15px; border: solid 1px var(--b-t); border-left: solid 5px var(--b-t); } cmcr hd i { height: 36px; width: 26px; } cmcr hd h5 { font-size: 11px; } cmcr hd button.btn.primary { background: var(--a); padding: 5px 12px; color: var(--b); font-size: 10px; align-items: center; justify-content: center; display: flex; margin: 11px; border-radius: 4px; } cmcr hd button.btn { padding: 7px 9px; font-size: 10px; align-items: center; justify-content: center; display: flex; margin: 11px; border-radius: 3px; background: var(--b-t); border: solid 1px var(--c0); } cmcr hd dv { display: flex; gap: 11px; justify-content: space-between; } cmcr hd d { display: flex; align-items: center; text-align: center; margin-top: -18px; flex-wrap: wrap; } cmcr hd { padding: 19px; } cmcr hd span { font-size: 13px; color: var(--cg); } cmcr hd p { font-size: 12px; } cmcr hd f { font-size: 15px; } cmcr bd f { font-size: 13px; } cmcr bl { padding: 12px; } cmcr bd th { height: 11px; } cmcr tbody>tr>td:nth-child(2) { text-align: end; } cmcr thead>tr>th:nth-child(2) { text-align: end; } cmcr thead>tr>th:nth-child(3) { text-align: end; } cmcr tbody>tr>td:nth-child(3) { text-align: end; } cmcr bd thead>tr { background: var(--b1); border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); } cmcr bd th:nth-child(1), cmcr td:nth-child(1) { font-size: 11px; } cmcr bd th { font-size: 10px; color: var(--cg); }cmcr bd th { font-size: 10px; color: var(--cg); } cmcr bd a { font-size: 13px; font-weight: 400; color: var(--cbg1); } cmcr bd i { width: 400px; } cmcr bd span { font-size: 13px; display: flex; align-items: center; gap: 8px; margin-top: 11px; font-weight: 500; } cmcr bd text { font-size: 16px; color: var(--c); } cmcr bd i { width: 475px; opacity: 30%; } @media(max-width:999px){ cmcr bd i { width: 327px; } cmcr bl { margin: 11px; padding: 11px; } cmcr hd div { width: auto; } } /*component:-CustomerUpdate*/ csut bl bd { display: block; padding-left: 22px; } csut hd h2 { font-size: 21px; font-weight: 400; padding: 11px; border-bottom: solid 1px var(--b-t); } csut bd dv d { display: flex; align-items: center; gap: 5px; } csut bd dv { display: flex; align-items: center; gap: 53px; margin: 12px 0; } csut bd dv h4 { font-size: 0.77em; font-weight: 400; display: flex; align-items: center; color: var(--cbg1); } csut bd dv t { font-size: 13px; margin-top: 4px; } csut bd div { display: flex; margin-left: 17px; align-items: center; } csut bd .btn { color: var(--cr); } csut>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.77em; } csut bd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 29px; } csut>bl d cc input:hover { border: solid 1px var(--a); } csut bd cm { display: flex; align-items: center; } csut>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; } csut bd input:focus { border: solid 1px var(--bor); } csut bd svg { width: 13px; } csut bd t { font-size: 0.71em; color: var(--cg); display: flex; align-items: center; margin-top: 11px; } csut bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 150px 30% 30% 24%; gap: 8px; } csut>bl sl input:focus { border-radius: 8px; border: solid 0px var(--bc); } csut>bl bd d { display: flex; align-items: center; gap: 65px; } csut>bl bd d>label { white-space: nowrap; align-items: center; display: block; font-size: 0.77em; } csut>bl bd sl select { border: solid 1px var(--bor); border-radius: 5px; width: -webkit-fill-available; padding: 7px; display: block; margin: unset; max-width: 94%; margin-top: 10px; font-size: 0.73em; background: var(--bt); font-weight: 100; } csut>bl bd sl select:hover { border: solid 1px var(--a); } csut bd sl>input:hover { border: solid 1px var(--a); } csut>bl select:focus { border: solid 1px var(--bor); } csut>bl bd cc { display: flex; align-items: center; width: -webkit-fill-available; } csut>bl> bd d>cc input { outline: 0; display: block; margin: 11px; border: solid 1px var(--bor); font-size: 0.67em; height: 30px; border-radius: 6px; position: relative; padding-left: 24px; margin-left: 13px; width: 28%; } csut bd mg sl input:hover { border: solid 1px var(--a); } csut>bl bd i { width: 18px; height: 18px; } csut bd mg sl input { height: 28px; } csut bd mg sl { display: grid; align-items: center; background: unset; height: max-content; grid-template-columns: 157px 15% 15% 15%; gap: unset; } csut bd gg { display: grid; grid-template-columns: 448px; } csut>bl bd div svg { fill: var(--c0); } csut>bl bd div i { width: 15px; position: absolute; padding-left: 7px; height: 15px; display: block; } csut bd div input { position: relative; padding-left: 23px; border: solid 1px var(--bor); height: 29px; font-size: 0.7em; border-radius: 5px; } csut bd div { display: flex; align-items: center; margin-left: 0; } @media(max-width:999px){ csut bd gg { display: grid; grid-template-columns: 100%; } csut bd sl { grid-template-columns: unset; border-radius: unset; } csut bd mg sl { grid-template-columns: auto; display: grid; gap: 12px; } csut bl bd { display: block; padding: 11px; width: -webkit-fill-available; } csut>bl bd cc { display: flex ; align-items: center;} csut>bl> bd d>cc input { margin: 11px 0; padding-left: 17px; width: -webkit-fill-available; } csut bd mg sl input { height: 30px; } csut bd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 31px; width: -webkit-fill-available; } csut bd div input { width: -webkit-fill-available; } csut>bl bd d { display: block; } csut > bl bd i { height: 12px; width: 19px; } csut>bl bd sl select { max-width: 100%; } } /* Component : Item_ActionUpdate */ csan>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} csan>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } csan>bl hd>btns { display: flex; gap: 11px; } csan>bl btns>btn.this { background: var(--aa); color: var(--b); } csan>bl bd>aa { font-size: 0.77em; color: var(--a); } @media(max-width:999px){ csan bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px; position: relative; bottom: 34px; display: grid; gap: 14px; } } /* Component : Customer_ActionUpdate */ cuat>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} cuat>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } cuat>bl hd>btns { display: flex; gap: 11px; } cuat>bl btns>btn.this { background: var(--aa); color: var(--b); } cuat>bl bd>aa { font-size: 0.77em; color: var(--a); } @media(max-width:999px){ cuat bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px; position: relative; bottom: 34px; display: grid; gap: 14px; } } /* Component:- CustomerEdits*/ ccde hd ul { display: flex; align-items: center; gap: 22px; list-style: none; border-bottom: solid 1px var(--b-t); padding: 5px 15px; } ccde bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 124px 270px; gap: 8px; } ccde>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; opacity: unset; } ccde>bl sl input{ border: solid 1px var(--bor); border-radius: 5px; height: fit-content; padding: 9px; width: -webkit-fill-available; } ccde>bl sl input:focus { box-shadow: inset 0 0 0 0px var(--aa); border-radius: 5px; } ccde>bl div>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; opacity: unset; } ccde>bl bd div { display: flex; gap: 20px;} ccde>bl bd div dv { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--bor); padding: 4px 4px; width: 100%; justify-content: center; position: relative; border-radius: 5px; } ccde>bl bd div dv i { height: 14px; display: block; width: 14px; } ccde>bl bd div dv t { font-weight: 400; color: var(--cg); display: block; } ccde>bl input { position: absolute; inset: 0; width: -webkit-fill-available; height: auto; opacity: 0; } ccde>bl bd spain t { font-size: 0.7em; color: var(--cg); } ccde>bl ft b { margin-top: 38px; display: block; color: var(--a); } ccde bd select:focus { border: solid 1px var(--bor); } ccde bd select { border: solid 1px var(--bor); padding: 5px; font-size: 0.7em; font-weight: 100; border-radius: 5px; width: auto; } ccde bd spain { display: flex; gap: 10px; margin-left: 40px; } ccde>bl bd div dv:hover { border: 1px dashed var(--aa); } ccde bd mg { display: flex; align-items: center; gap: 3px; margin-top: 33px; margin-bottom: 11px; } ccde bd mg c { font-size: 0.79em; color: var(--cg); } ccde bd mg p { font-size: 0.7em; } ccde bd select:hover { border: solid 1px var(--aa); } ccde bd gg { border: solid 1px var(--a); padding: 4px 7px; background: var(--a); border-radius: 3px; display: flex; align-items: center; color: var(--b); font-size: 0.7em; gap: 3px; } ccde div dv i:nth-child(4) { border-left: 1px dashed var(--bor); border-radius: 0; } ccde bd gg i { width: 11px; height: 9px; } ccde bd gg svg { fill: var(--b); transform: rotate( 45deg); } ccde bd sl t { font-size: 0.6em; position: relative; margin-left: 22px; margin-top: 3px; } ccde bd div span { font-size: 0.7em; position: relative; color: var(--bor); } ccde>bl bd div spain dv i svg{ fill: var(--cbg1); border-left: unset; } ccde bd b { font-size: 0.77em; color: var(--a); font-weight: 400; margin-top: 22px; display: block; } ccde>bl bd { padding-left: 22px; } ccde ft dv { display: flex; gap: 5px; align-items: center; box-shadow: var(--bs-b); padding: 11px; } ccde ft btns { background: var(--b-t); display: block; padding: 7px 10px; border-radius: 4px; font-size: 0.77em; font-weight: 400; border: solid 1px var(--bor); } ccde hd>ul>li:nth-child(1) t { border-bottom: solid 2px var(--a); padding: 0 9px; padding-bottom: 5px; } ccde ft btn { background: var(--a); padding: 6px; color: var(--b); font-weight: 500; font-size: 0.77em; border-radius: 4px; } ccde bd a { color: var(--a); font-size: 0.99em; font-weight: 400; } ccde>bl hd t { font-size: 0.76em; } ccde>bl h4 { font-size: 0.77em; } @media(max-width:999px){ ccde bd sl { display: grid; grid-template-columns: 124px 59% 30% 24%; } ccde hd { display: flex ; overflow: scroll; } ccde hd ul { min-width: max-content; } ccde bd div t { position: relative; left: 0; top: 12px; } ccde ft btn:nth-child(2) { background: var(--bor); color: var(--a1); } ccde bd select { width: -webkit-fill-available; min-width: 180px; } } /*component:-CustomerNew*/ cstw bl bd { display: block; padding-left: 22px;margin-top: 17px; } cstw hd h2 { font-size: 21px; font-weight: 400; padding: 11px; } cstw bd dv d { display: flex; align-items: center; gap: 5px; } cstw bd dv { display: grid; align-items: center; grid-template-columns: 154px auto; margin: 11px 0; } cstw bd dv h4 { font-size: 0.66em; display: flex; align-items: center; font-weight: 400; } cstw bd dv t { font-size: 13px; margin-top: 4px; } cstw bd div { display: flex ;align-items: center; width: 100%; } cstw bd .btn { color: var(--cr); } cstw>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.77em; } cstw bd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 29px; } cstw>bl d cc input:hover { border: solid 1px var(--a); } cstw bd cm { display: flex ; align-items: center; padding: 0 11px; } cstw>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.66em; font-weight: 400; opacity: unset; } cstw bd input:focus { border: solid 1px var(--bor); } cstw bd svg { width: 13px; } cstw bd t { font-size: 0.71em; color: var(--cg); display: flex; align-items: center; margin-top: 11px; } cstw bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 150px 28% 30% 24%; gap: 8px; } cstw>bl sl input:focus { border-radius: 8px; border: solid 0px var(--bc); } cstw>bl bd d { display: flex; align-items: center; gap: 65px; } cstw>bl bd d>label { white-space: nowrap; display: flex; align-items: center; opacity: unset; font-size: 0.66em; } cstw>bl bd sl select { border: solid 1px var(--bor); border-radius: 5px; width: -webkit-fill-available; padding: 7px; display: block; margin: unset; max-width: 94%; margin-top: 10px; font-size: 0.73em; background: var(--bt); font-weight: 100; } cstw>bl bd sl select:hover { border: solid 1px var(--a); } cstw bd sl>input:hover { border: solid 1px var(--a); } cstw>bl select:focus { border: solid 1px var(--bor); } cstw>bl bd cc { display: flex; align-items: center; width: -webkit-fill-available; } cstw>bl> bd d>cc input { outline: 0; display: block; margin: 4px; border: solid 1px var(--bor); font-size: 0.67em; height: 30px; border-radius: 6px; position: relative; padding-left: 29px; width: 26%; margin-left: 5px; } cstw bd mg sl input:hover { border: solid 1px var(--a); } cstw>bl bd i { width: 11px; margin: 0 3px; } cstw bd mg sl input { height: 28px; } cstw bd mg sl { display: grid; align-items: center; background: unset; height: max-content; grid-template-columns: 157px 13% 13% 13%; gap: unset; } cstw>bl bd div svg { fill: var(--c0); } cstw>bl bd div i { width: 15px; position: absolute; padding-left: 7px; height: 15px; display: block; } cstw bd div input { position: relative; padding-left: 28px; border: solid 1px var(--bor); height: 29px; font-size: 0.7em; border-radius: 5px; } cstw>bl hd t { font-size: 0.9em; font-weight: 400; } cstw hd i { height: 16px; width: 21px; } cstw hd svg { fill: var(--a); } cstw hd b a { color: var(--a); font-weight: 400; } cstw hd b { font-size: 0.75em; display: flex; padding: 11px; background: var(--b2); align-items: center; gap: 11px; } @media(max-width:999px){ cstw bd sl { grid-template-columns: unset; border-radius: unset; } cstw bd mg sl { grid-template-columns: auto; display: grid; gap: 12px; } cstw bl bd { display: block; width: -webkit-fill-available;padding-left: 7px; } cstw hd t { gap: 11px; } cstw>bl bd d { gap: 0; } cstw>bl bd cc { display: flex ; align-items: center; width: 100%; } cstw>bl bd d { display: block; align-items: center; width: 912px; } cstw bd div input { padding-left: 23px; } cstw bd dv h4 { min-width: fit-content; } cstw bd sl input { width: -webkit-fill-available; margin-right: 5px; } cstw bd div { margin-left: 0; } cstw>bl bd i { display: none; } cstw>bl bd sl select { width: -webkit-fill-available; margin-right: 5px; max-width: unset; } cstw>bl> bd d>cc input { outline: 0; display: block; margin: 3px; border: solid 1px var(--bor); font-size: 0.67em; height: 30px; border-radius: 6px; position: relative; padding-left: 29px; width: 32%; margin-left: 0; } } /* Component -:- Customer_DetailUpdate */ ccdu hd h4 { font-size: 21px; font-weight: 400; padding: 11px; border-bottom: solid 1px var(--b-t); } ccdu>bl>ft btns { display: flex; align-items: center; padding: 7px; box-shadow: -1px -3px 4px 3px var(--bc); position: sticky; } ccdu>bl>ft btns btn { border: solid 1px var(--aa); padding: 8px 11px; border-radius: 5px; color: var(--b); font-size: 0.88em; margin: 7px; background: var(--aa); } ccdu>bl>ft btns btn:nth-child(2) { background: var(--bc); border: solid 1px var(--bc); color: var(--c); } @media(max-width:999px){ } /* Component:- CustomerEdits*/ cset hd ul { display: flex; align-items: center; gap: 22px; list-style: none; border-bottom: solid 1px var(--b-t); padding: 5px 15px; } cset bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 124px 270px; gap: 8px; } cset>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; opacity: unset; } cset>bl sl input{ border: solid 1px var(--bor); border-radius: 5px; height: fit-content; padding: 9px; width: -webkit-fill-available; } cset>bl sl input:focus { box-shadow: inset 0 0 0 0px var(--aa); border-radius: 5px; } cset>bl div>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; opacity: unset; } cset>bl bd div { display: flex; gap: 20px;} cset>bl bd div dv { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--bor); padding: 4px 4px; width: 100%; justify-content: center; position: relative; border-radius: 5px; } cset>bl bd div dv i { height: 14px; display: block; width: 14px; } cset>bl bd div dv t { font-weight: 400; color: var(--cg); display: block; } cset>bl input { position: absolute; inset: 0; width: -webkit-fill-available; height: auto; opacity: 0; } cset>bl bd spain t { font-size: 0.7em; color: var(--cg); } cset>bl ft b { margin-top: 38px; display: block; color: var(--a); } cset bd select:focus { border: solid 1px var(--bor); } cset bd select { border: solid 1px var(--bor); padding: 5px; font-size: 0.7em; font-weight: 100; border-radius: 5px; width: auto; } cset bd spain { display: flex; gap: 10px; margin-left: 40px; } cset>bl bd div dv:hover { border: 1px dashed var(--aa); } cset bd mg { display: flex; align-items: center; gap: 3px; margin-top: 33px; margin-bottom: 11px; } cset bd mg c { font-size: 0.79em; color: var(--cg); } cset bd mg p { font-size: 0.7em; } cset bd select:hover { border: solid 1px var(--aa); } cset>bl hd ul h4:after { content: ""; display: block; border-top-left-radius: 46px; border-top-right-radius: 50px; position: relative; top: 7px; border: solid 1px var(--a); height: 1px; background: var(--a); } cset bd gg { border: solid 1px var(--a); padding: 4px 7px; background: var(--a); border-radius: 3px; display: flex; align-items: center; color: var(--b); font-size: 0.7em; gap: 3px; } cset div dv i:nth-child(4) { border-left: 1px dashed var(--bor); border-radius: 0; } cset bd gg i { width: 11px; height: 9px; } cset bd gg svg { fill: var(--b); transform: rotate( 45deg); } cset bd sl t { font-size: 0.6em; position: relative; margin-left: 22px; margin-top: 3px; } cset bd div span { font-size: 0.7em; position: relative; color: var(--bor); } cset>bl bd div spain dv i svg{ fill: var(--cbg1); border-left: unset; } cset bd b { font-size: 0.77em; color: var(--a); font-weight: 400; margin-top: 22px; display: block; } cset>bl bd { padding-left: 22px; } cset ft dv { display: flex; gap: 5px; align-items: center; box-shadow: var(--bs-b); padding: 11px; } cset bd a { color: var(--a); font-size: 0.99em; font-weight: 400; } cset>bl hd t { font-size: 0.76em; } cset>bl h4 { font-size: 0.77em; } cset>bl>ft btns btn:nth-child(2) { background: var(--bc); border: solid 1px var(--bc); color: var(--c); } cset>bl>ft btns btn { border: solid 1px var(--aa); padding: 8px 11px; border-radius: 5px; color: var(--b); font-size: 0.88em; margin: 7px; background: var(--aa); } cset>bl>ft btns { display: flex; align-items: center; padding: 7px; box-shadow: -1px -3px 4px 3px var(--bc); position: sticky; } @media(max-width:999px){ cset bd sl { display: grid; grid-template-columns: 124px 59% 30% 24%; } cset hd { display: flex ; overflow: scroll; } cset hd ul { min-width: max-content; } cset bd div t { position: relative; left: 0; top: 12px; } cset bd sl t { margin-left: 24px; margin-top: 5px; } cset bd mg { display: block; } cset ft btn:nth-child(2) { background: var(--bor); color: var(--a1); } } /*Customer_Notes*/ cutn >bl { display: flex; flex-direction: column; justify-content: space-between; height: -webkit-fill-available; } cutn btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } cutn hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } cutn btn>c>i { height: 13px; width: 13px; background: var(--a); } cutn c>i>svg { fill: var(--b); } cutn hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } cutn bl>hd { display: flex; align-items: center; } cutn hd>btn:nth-child(2)>c { border-radius: 6px; } cutn bd>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} cutn bd textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} cutn bl>bd { padding: 11px;padding-top: 0;} @media(max-width:999px){ cutn bd textarea { width: -webkit-fill-available; } cutn bl>bd { padding-top: 0; margin: 11px 0; } } /*component:-Customer_NotesUpdate*/ cunt >bl { display: flex; flex-direction: column; justify-content: space-between; height: -webkit-fill-available; } cunt btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } cunt hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } cunt btn>c>i { height: 13px; width: 13px; background: var(--a); } cunt c>i>svg { fill: var(--b); } cunt hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } cunt bl>hd { display: flex; align-items: center; } cunt hd>btn:nth-child(2)>c { border-radius: 6px; } cunt bd>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} cunt bd textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} cunt bl>bd { padding: 11px;padding-top: 0;} @media(max-width:999px){ cunt bd textarea { width: -webkit-fill-available; } cunt bl>bd { padding-top: 0; margin: 11px 0; } } /*component :-Customer_Pollacy*/ cupy bl { display: block; justify-content: center; text-align: center; } cupy hd hr { width: 849px; margin-bottom: 57px; } cupy bd i { width: 23px; height: 23px; vertical-align: text-bottom; } cupy bd dv { display: block; margin-top: -41px; } cupy hd h2 { font-size: 17px; font-weight: 400; margin-bottom: 23px; padding: 35px; } cupy bd span { font-size: 12px; } cupy bd dv d { display: flex; align-items: center; justify-content: center; gap: 6px; } cupy hd { max-width: 902px; border-top: 1px solid var(--bor); margin-left: auto; text-align: center; margin-right: auto; } /*component:-Customers*/ cumer bl { display: block; } cumer input { width: 13px; height: 13px; } cumer bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cumer hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cumer bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} cumer bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} cumer bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cumer bd span { font-size: 12px; display: flex; width: 99px; } cumer bd table td t { color: var(--br); font-size: 14px; } cumer bd table tr td:nth-child(5) {justify-content: center;} cumer bd table tr td:nth-child(6) {justify-content: end;} cumer bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} cumer bd table i { width: 26px; height: 19px; } cumer td t d i { width: 30px; height: 12px; } cumer bl hd table { background: var(--b1); } cumer bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} cumer bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } cumer bd tbody>tr>th { color: var(--br); } cumer bl hd table i { width: 26px; height: 19px; } cumer bl>hd dv { display: flex ; align-items: center; } cumer bd table th { height: unset; } cumer table>thead { background: var(--b-t); } cumer bd table tr>td:last-child { width: 0; padding: 0; } cumer bd table tr>th:first-child {padding: 7px;width: 20px;} cumer bd table th:nth-child(8) {text-align: end;} cumer>bl hd dvv i { height: 22px; width: 22px; display: flex; } cumer>bl hd div { display: flex; justify-content: space-between; padding: 11px; } cumer>bl hd div dvv { display: flex; gap: 11px; } cumer>bl hd dvv i svg { fill: var(--aa); display: flex; } cumer>bl hd dv btn:nth-child(1) { display: flex; align-items: center; gap: 6px; background: var(--a); padding: 5px 5px; color: var(--b); border-radius: 4px; position: relative; } cumer bl>hd dv box { box-shadow: var(--bss); padding: 6px; align-items: center; background: var(--bc); position: relative; height: auto; width: 100%; } cumer bl>hd dv box>i { height: 22px; display: block; } cumer bl>hd dv { display: flex; align-items: center; gap: 11px; } cumer>bl hd dv btn:nth-child(1) svg { fill: var(--b); display: block; } cumer>bl hd dv btn:nth-child(1) t { font-size: 0.88em; display: block; } cumer>bl hd dv btn>i { height: 22px; width: 22px; display: block; } cumer>bl bd div { display: flex; justify-content: center; } @media(max-width:999px){ cumer>bl hd table { min-width: max-content; overflow: scroll; } cumer>bl> hd table th { width: 137px; } cumer>bl { overflow: unset;} cumer bd table thead tr { display: flex; align-items: center; white-space: pre; overflow: scroll; /* width: -webkit-fill-available; */ max-width: 399px; gap: 7px; } cumer>bl hd table { min-width: max-content; overflow: scroll; } cumer>bl> hd table th { width: 137px; } } cumer bd tbody>tr>th:first-child { width: 154px; display: block; } cumer bl { display: block; } cumer input { width: 13px; height: 13px; } cumer bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cumer hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cumer bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } cumer bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} cumer bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cumer bd span { font-size: 12px; display: flex; width: 99px; } cumer bd tbody td t { color: var(--br); font-size: 14px; } cumer bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } cumer bd tbody i { width: 26px; height: 19px; } cumer td t d i { width: 30px; height: 12px; } cumer>bl>bd dv { display: flex ; align-items: center; } cumer bd table tr>td { font-size: 0.77em; } cumer bd table tr>th:nth-child(2) { width: 20px; } cumer bd table tr>th:nth-child(7) { text-align: end; } cumer bd table tr>td:nth-child(7) { text-align: end; } cumer bd table th:nth-child(8) { text-align: end; } cumer bd table tr>td:nth-child(8) { text-align: end; } /*component:-DeliveryUpdate*/ cduo form>div:nth-child(1){ background: var(--bg); padding: 22px;} cduo form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } cduo { display: grid; margin-bottom: 22px; } cduo form>div>sl>d c>i { height: 18px; width: 18px; } cduo div>sl>d c { display: flex; align-items: center; } cduo form> div lable { color: var(--cr); font-size: 0.88em; } cduo div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } cduo form>div>sl>d c>i:nth-child(2) { display: flex; align-items: center; background: var(--a); padding: 8px; border-radius: 0 0 0 0; } cduo form>div>sl>d c>i:nth-child(2) svg { fill: var(--b); } cduo div>sl>d t { opacity: 68%; font-size: 0.88em; } cduo form>div:nth-child(1) sl { width: auto; max-width: unset; } cduo form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } cduo sl>f input { cursor: pointer; position: relative; display: flex ; border-radius: 6px; border: 1px solid var(--c0); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: 321px; font-weight: 500; } cduo sl>f c { position: absolute; right: 0; } cduo c>btn>i { height: 15px; width: 15px; padding: 11px; } cduo c>btn>i>svg { fill: var(--a); } cduo form>div:nth-child(3) lable { color: var(--br); } cduo form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } cduo sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } cduo form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } cduo>bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } cduo>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} cduo>bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } cduo sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } cduo cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } cduo>bl hr { color: var(--bor); opacity: 9%; } cduo div>t { font-size: 0.88em; display: flex ; gap: 4px; padding: 14px 0; align-items: center; color: var(--cr); } cduo bl>bd>form>dv { display: block;} cduo form>div:nth-child(6) sl { display: grid; } cduo form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } cduo t>i { height: 12px; width: 12px; } cduo form>div:nth-child(7)>sl { display: grid; } cduo bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } cduo bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } cduo bd form btns i svg { fill: var(--b); display: block; } cdetc d>dv { display: grid; grid-template-columns: 50% 50%; padding: 11px; max-width: 1090px; } @media(max-width:1295px){ cduo>bl cm { grid-template-columns: auto; padding: 0 22px; } cduo>bl cm>t { text-align: unset; padding: 11px 0; } cduo sl>f { width: -webkit-fill-available; max-width: unset; } cduo form>div>sl { width: -webkit-fill-available; max-width: unset; } cduo form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } cduo>bl cm>sl>lable {padding:11px 0;} cduo>bl cm>sl>t{padding: 11px 0; } cduo>bl cm>sl>t { text-align: unset; } } cduo f>c>i { height: 18px; width: 39px; opacity: 77%; } @media(max-width:999px){ cduo{margin:0px;} cduo>bl cm { grid-template-columns: auto; padding: unset; } cduo form>div { grid-template-columns: auto; padding: 0px; } cduo form>div:nth-child(1) { padding: 7px; } cduo form>dv>cm>sl { grid-template-columns: auto; } cduo sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} cduo>bl>bd form { margin-left: 7px; } cduo c>btn>i { height: 15px; width: 15px; padding: 11px; bottom: 0; position: relative; right: 71px; } cduo f>c>i { height: 18px; width: 39px; opacity: 77%; position: relative; right: 70px; } } /*Delivery_ChallanHistories*/ caps>bl { display: block; border: 1px solid var(--bc); } caps>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} caps hd h4 svg { fill: var(--a); } caps hd dv i { height: 22px; width: 22px; position: unset; } caps hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } caps hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } caps hd dv i svg:nth-child(1) { fill: var(--b); } caps hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } caps hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } caps hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } caps hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } /*Delivery_ChallanHistory*/ cadc bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } cadc>bl>bd c { color: var(--green); } cadc>bl>bd i { width: 13px; } cadc>bl>bd dv { gap: 6px; display: flex ; align-items: center; margin-top: 11px; } cadc bd name { display: flex; align-items: center; gap: 4px; } cadc bd rs { position: absolute; right: 19px; font-size: 0.88em; font-weight: 500; } cadc bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } cadc bd div span { color: var(--a1); font-size: 0.88em; margin: 2px 1px 0px 0; } cadc bd div { display: flex; flex-direction: column; line-height: 16px; } cadc>bl>bd { display: block; padding:11px; background: var(--b1); } cadc bd t i { height: 14px; width: 14px; } cadc>bl>bd:hover { background: var(--bc); } cadc bd t { margin: 8px 0px; font-size: 0.68em; display: flex; align-items: center; gap: 1px; color: var(--cbg1); font-weight: 600; } /*Quote_TaxInvoice*/ cdcte { padding: 44px; display: block; background: var(--b); box-shadow: var(--bs-b); margin: 22px; position: relative; } cdcte>bl { border: solid 1px var(--bor); } cdcte>bl hd btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; } cdcte>bl>hd>div { position: absolute; top: -5px; left: -5px; overflow: hidden; width: 95px; height: 98px; } cdcte>bl>hd>div>span { text-align: center; color: #fff; top: 18px; left: -24px; width: 97px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: var(--green); justify-content: center; font-family: sans-serif; font-size: 0.77em; filter: grayscale(1); display: flex; } cdcte hd div>span:before { content: ""; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 14px; transform: rotate(-45deg); left: -3px; border-left: 2px solid transparent; color: #2e8fda; } cdcte hd div>span:after { content: ""; border-top: 5px solid transparent; border-left: 5px solid; border-left-color: inherit; border-right: 5px solid transparent; position: absolute; top: 20px; transform: rotate( 77deg); right: -1px; border-bottom: 3px solid transparent; color: #2e8fda; } cdcte hm>cm>cc { display: grid; padding: 2px; } cdcte >bl>ft { display: grid; justify-content: end; } cdcte hd>hm>btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; gap: 3px; padding: 0 6px; } cdcte hm>btn>i { height: 13px; } cdcte btn>i>svg { fill: var(--b); } cdcte:hover { background: var(--b); } cdcte:hover hd>hm{ display: block; } cdcte hm>cm { background: var(--b); border-radius: 6px; align-items: center; font-size: 0.77em; position: absolute; right: 0; box-shadow: var(--bs-b); top: 34px; height: fit-content; display: none; gap: 11px; } cdcte cm>cc>span:hover { background: var(--a); color: var(--b); } cdcte cm>cc>span { padding: 7px; border-radius: 6px; position: relative; } .Template qiot hm>cm { display: grid; } cdcte hd>hm{ display: none; } cdcte hm>cm>b { padding: 8px 11px; padding-bottom: unset; } cdcte cc>hr { width: 100%; border-style: groove; } @media(max-width:999px){ cdcte { margin: unset;padding:11px;} cdcte >bl>ft { grid-template-columns: auto; } } cdcte tbody>tr:hover { background: unset; } /*Delivery_ChallanInformation*/ cdcl hd>cc>h2 { font-size: 19px; font-weight: 500; } cdcl hd>cc { display: flex; justify-content: space-between; padding: 10px 14px; align-items: center; margin: 11px 0; } cdcl btns>btn>i { height: 15px; width: 19px; } cdcl cc>btns>btn { border: 1px solid var(--bor); display: grid; padding: 5px 5px; border-radius: 4px; align-items: center; justify-content: center; position: relative; background: var(--b1); } cdcl hd>cc>btns { display: flex; gap: 8px; align-items: center; justify-content: center; } cdcl c>i>svg { fill: var(--cr); border-left: solid 1px var(--bor); } cdcl bd>d{max-width: 793px;margin:auto;} cdcl cc>c>i { height: 19px; width: 19px; } cdcl d>ss>i { height: 15px; width: 15px; } cdcl d>ss { padding: 5px; display: flex; width: fit-content; font-size: 0.88em; margin: 6px; border-radius: 3px; align-items: center; gap: 5px; } cdcl hd>mg { display: flex; background: var(--b1); border-top: solid 1px var(--c0); border-bottom: solid 1px var(--c0); align-items: center; flex-wrap: wrap; gap: 11px; } cdcl d>ss:hover { background: var(--b); box-shadow: 0px 0px 0px 1px var(--bor); } cdcl mg>d::after { content: ''; height: 16px; width: 1px; background: var(--bor); display: block; position: absolute; top: 10px; bottom: 0; right: 0; left: -7px; } cdcl mg>d { position: relative; } cdcl mg>d:nth-child(1)::after { content: ''; background: unset; } cdcl d>hh>c { position: absolute; padding: 4px; z-index: 9999999; display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 6px; width: max-content; gap: 3px; } cdcl m>i>svg { fill: var(--b); } cdcl c>m>i { height: 14px; width: 14px; } .Send ctnf d>hh>c {display: grid; } cdcl hh>c>m { display: flex; align-items: center; background: var(--a); padding: 8px; gap: 9px; border-radius: 4px; } cdcl m>t{font-size: 0.88em;color:var(--b);} .PDF ctnf d>hh>c {display: grid; } @media(max-width:999px){ cdcl>bl>bd>d { padding: 7px; } cdcl { padding: 11px 0; display: block; } } /*Delivery_ChallanNew*/ cdla form>div:nth-child(1){ background: var(--bg); padding: 22px;} cdla form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } cdla { display: grid; margin-bottom: 22px; } cdla form>div>sl>d c>i { height: 18px; width: 18px; } cdla div>sl>d c { display: flex; align-items: center; } cdla form> div lable { color: var(--cr); font-size: 0.88em; } cdla div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } cdla form>div>sl>d c>i:nth-child(2) { display: flex; align-items: center; background: var(--a); padding: 8px; border-radius: 0 0 0 0; } cdla form>div>sl>d c>i:nth-child(2) svg { fill: var(--b); } cdla div>sl>d t { opacity: 68%; font-size: 0.88em; } cdla form>div:nth-child(1) sl { width: auto; max-width: unset; } cdla form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } cdla sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } cdla sl>f c { position: absolute; right: 0; } cdla c>btn>i { height: 15px; width: 15px; padding: 11px; } cdla c>btn>i>svg { fill: var(--a); } cdla form>div:nth-child(3) lable { color: var(--br); } cdla form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } cdla sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } cdla form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } cdla bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } cdla bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} cdla bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } cdla sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } cdla cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } cdla bl hr { color: var(--bor); opacity: 9%; } cdla div>t { font-size: 0.88em; display: flex; gap: 4px; padding: 14px 0; align-items: center; } cdla bl>bd>form>dv { display: block;} cdla form>div:nth-child(6) sl { display: grid; } cdla form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } cdla t>i { height: 12px; width: 12px; } cdla form>div:nth-child(7)>sl { display: grid; } cdla bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } cdla bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } cdla bd form btns i svg { fill: var(--b); display: block; } cdla d>dv { display: grid; grid-template-columns: 50% 50%; padding: 11px; max-width: 1090px; } @media(max-width:1295px){ cdla>bl cm { grid-template-columns: auto; padding: 0 22px; } cdla>bl cm>t { text-align: unset; padding: 11px 0; } cdla form>div { grid-template-columns: auto; } cdla form>dv>cm>sl { grid-template-columns: auto; } cdla sl>f { width: -webkit-fill-available; max-width: unset; } cdla bd>form { padding: 7px; } cdla form>div>sl { width: -webkit-fill-available; max-width: unset; } cdla form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } cdla>bl cm>sl>lable {padding:11px 0;} cdla>bl cm>sl>t{padding: 11px 0; } cdla>bl cm>sl>t { text-align: unset; } } cdla { display: block; } cdla>bl>hd { padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt); align-items: center; gap: 11px; justify-content: space-between; } cdla bl hd h2 { display: block; padding-right: 11px; font-weight: 400; } cdla>bl>hd>i { height: 11px; width: 11px; } cdla f>c>i { height: 18px; width: 18px; opacity: 77%; } @media(max-width:999px){ cdla{margin:0px;} cdla>bl cm { grid-template-columns: auto; padding: 0 22px; padding: 7px; } cdla form>div { grid-template-columns: auto; padding: 0px; } cdla d>dv { display: block; } cdla form>div:nth-child(1) { padding: 7px; } } cdla sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} /*Delivery_ChallanNote*/ cacn >bl { display: flex; flex-direction: column; justify-content: space-between; height: -webkit-fill-available; } cacn btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } cacn hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } cacn btn>c>i { height: 13px; width: 13px; background: var(--a); } cacn c>i>svg { fill: var(--b); } cacn hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } cacn bl>hd { display: flex; align-items: center; } cacn hd>btn:nth-child(2)>c { border-radius: 6px; } cacn bd>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} cacn bd textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} cacn bl>bd { padding: 11px;padding-top: 0;} @media(max-width:999px){ cacn bd textarea { width: -webkit-fill-available; } cacn bl>bd { margin: 10px 0; padding: 0; } } /*Delivery_ChallanSubTotal*/ dcst tbody>tr { padding: 0; display: flex; border: 0; justify-content: space-between; align-items: center; font-size: 0.88em; font-family: emoji; } dcst tbody>tr>td { height: fit-content; padding: 6px; text-align: right; font-size: 0.88em; } dcst table>tbody:nth-child(2) { border-top: solid 1px var(--bor); padding-top: 40px; display: flex; justify-content: center; font-weight: 500; color: var(--br); font-size: 0.88em; } dcst table>tbody{border-left: solid 1px var(--bor); display: table-caption;} dcst {display: block; } dcst td>label { font-size: 1.11em; }@media(max-width:999px){ dcst{ border-top: solid 1px var(--bor);padding: 11px 0; } dcst table>tbody { border: 0; } } /*component:-Delivery_ChallanTerms*/ cqct bl { padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: var(--bg); display: grid; grid-template-columns: max-content auto; } cqct dv>t { display: block; font-size: 0.88em; margin: 11px 0; } cqct c>textarea { padding: 11px; font-weight: 400; border: solid 1px var(--bc); border-radius: 11px; font-size: 12px; display: block; max-width: 728px; min-width: 728px; } cqct c>textarea:focus { border: solid 1px var(--a); border-radius: 7px; } cqct hd>dv { padding-right: 11px; display: block; } cqct bl>bd { border-left: solid 1px var(--bc);padding: 0 19px; } cqct bd>t { font-size: 0.8em; } cqct f>c>i { height: 22px; width: 20px; opacity: 77%; } cqct dv>f { border: dashed 1px var(--bor); width: fit-content; align-items: center; gap: 1px; font-size: 0.8em; border-radius: 5px; background: var(--b); margin: 2px 0; } cqct dv > f > i { font-size: 1rem; font-weight: 400; border: 0; line-height: 1.6; text-align: end; border-radius: 0px 8px 8px 0px; display: flex; align-items: center; justify-content: end; margin: 0 7px; height: 23px; width: 16px; border-left: dashed 1px var(--bor); } ccqctcd dv>f>c { display: flex; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px; } cqct bd>small { font-size: 0.66em; opacity: 77%; } @media(max-width:1255px){ cqct bl { display: grid; grid-template-columns: auto; gap: 11px; } cqct bl>bd { border: 0; padding: 0; } cqct c>textarea { min-width: -webkit-fill-available; } } cqct dv>t { display: block; font-size: 12px; margin: 4px; } /*Delivery_ChallanTotal*/ chct { display: block; padding: 11px; background: var(--bg); margin: 11px; border-radius: 11px; } chct bd>d { display: grid; grid-template-columns: auto auto; justify-content: space-between; font-size: 0.88em;align-items: center; } chct bd>d:nth-child(1) { font-weight: 500; } chct bd>d>t { padding: 10px; } chct d>cc>t { padding: 10px; } chct d>prc { padding: 10px; } chct f > prc { display: block; font-size: 1rem; font-weight: 400; line-height: 1.6; width: 75px; text-align: end; padding: 3px 11px; border: solid 1px var(--bor); border-radius: 8px 0px 0px 8px; } chct f>t { font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: end; border: solid 1px var(--bor); border-left: unset; border-radius: 0px 8px 8px 0px; padding: 0 10px; display: flex; align-items: center; justify-content: end; width: 12px; } chct div>prc { display: grid; margin-left: auto; } chct bd>div { display: grid; align-items: center; grid-template-columns: 166px auto auto; padding: 0 9px; font-size: 0.88em; margin: 11px 0; } chct h>sl { padding: 0; background: unset; display: flex; align-items: center; height: unset; margin: 0; gap: 9px; width: fit-content; } chct sl>input { height: 16px; width: 16px; } chct div>h { display: flex; align-items: center; gap: 11px; } chct f>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; box-sizing: border-box; } chct f>input:focus { border: solid 1px var(--a); } chct f>input:hover{border: solid 1px var(--a); } chct m>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; width: 111px; } chct cc>m>input { border: dashed 1px var(--bor); } chct m>input:hover { border: dashed 1px var(--a); } chct m>input:focus { border: solid 1px var(--a); box-shadow: 0px 0px 5px 1px var(--at); } chct bl>ft { padding: 11px; display: FLEX; align-items: center; justify-content: space-between; border-top: solid 1px var(--bc); } chct bl>ft>prc { font-weight: bold; } sbtl bl>bd { display: block; margin-bottom: 33px; } sbtl div:nth-child(3) cc>f { align-items: center; display: flex; position: relative; width: fit-content; } chct f>i { height: 18px; width: 18px; position: absolute; right: 3px; top: 8px; bottom: 0; opacity: 77%; } chct div:nth-child(3) prc { opacity: 77%; } @media(max-width:999px){ chct bd>div { grid-template-columns: 124px auto auto; } chct cc>m>input { width: 90px; } chct { margin: 0; } chct f>input { width: 110px; } } /*component:-Delivery_ChallanUpdate*/ cdetc { display: block; } cdetc>bl>hd{ padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt); align-items: center; gap: 11px; } cdetc bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; } cdetc hd d label { position: relative; display: flex; width: 37px; height: 15px; } cdetc hd d label input { opacity: 0; width: 0; height: 0; } cdetc hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } cdetc hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } cdetc hd d label input:checked + span { background-color: var(--aa); } cdetc hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } cdetc bl hd>h2 { font-weight: 400; font-size: 1.44em; } cdetc hd>i { display: flex; height: 24px; width: 24px; } cdetc hd>btn>t { font-size: 0.88em; } cdetc d>div { display: grid; grid-template-columns: auto auto; } cdetc>bl>bd>d { padding: 22px; } cdetc>bl>ft div btn { background: var(--bc); padding: 11px; border-radius: 9px; border: solid 1px var(--b-t); font-size: 0.77em; } cdetc>bl>bd{max-width: 1045px;} cdetc>bl>ft div btns { display: flex ; gap: 11px; align-items: center; } cdetc>bl>ft div { margin-top: 44px; display: flex ; align-items: center; justify-content: space-between; } cdetc>bl>ft b { font-size: 0.9em; } cdetc>bl>ft span { font-size: 0.9em; color: var(--a2); } cdetc>bl>ft c { font-size: 0.9em; color: var(--a); display: flex; align-items: center; gap: 8px; } @media(max-width:999px){ cdetc>bl>bd>d { padding: 7px; } cdetc bl hd>h2 { font-size: 20px; } } cdetc p>em>i { height: 11px; width: 11px; } cdetc ft>p>em { margin: 0 3px; display: inline-flex; gap: 3px; } cdetc ft>p>b { color: var(--cbg); } cdetc ft>p { padding: 22px; font-size: 0.77em; display: block; opacity: 77%; } @media(max-width:1255px){ cdetc d>div { grid-template-columns: auto; } cdetc>bl>ft div { display: grid; gap: 11px; padding: 11px; } } /*component:-Delivery_Challans*/ cdlc bl { display: block; margin: 13px 0; } cdlc hd h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; } cdlc hd i { height: 21px; width: 20px; } cdlc hd btn { display: flex; align-items: center; } cdlc hd svg { fill: var(--aa); } cdlc bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } cdlc hd btn { display: flex; align-items: center;padding: 7px 8px; width: max-content; border-radius: 6px; } cdlc hd div { display: flex; justify-content: space-between; align-items: center; padding: 0 0px 8px; } cdlc hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; margin: 0px 22px 0px 0px; } cdlc hd btns svg { fill: var(--b); } cdlc hd btns btn { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative;} cdlc hd btn svg { fill: var(--br); transform: rotate( 180deg); } cdlc btn>i { height: 16px; width: 16px; } cdlc input { width: 13px; height: 13px; } cdlc hd btns btn:nth-child(2) svg { fill: var(--c); } cdlc hd btn h2 svg { fill: var(--aa); transform: rotate( 3deg); } cdlc bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cdlc hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cdlc bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} cdlc bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} cdlc bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cdlc bd span { font-size: 12px; display: flex; width: 99px; } cdlc bd table td t { color: var(--br); font-size: 14px; } cdlc bd table tr td:nth-child(5) {justify-content: center;} cdlc bd table tr td:nth-child(6) {justify-content: end;} cdlc bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} cdlc bd table i { width: 26px; height: 19px; } cdlc td t d i { width: 30px; height: 12px; } cdlc bl hd table { background: var(--b1); } cdlc bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} cdlc bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } cdlc bd tbody>tr>th { color: var(--br); } cdlc bl hd table i { width: 26px; height: 19px; } cdlc bl>hd dv { display: flex ; align-items: center; } cdlc bd table th { height: unset; } cdlc table>thead { background: var(--b-t); } cdlc bl hd btns btn:nth-child(2) { display: flex; align-items: center; padding: 7px; font-size: 13px; font-weight: 400; position: relative; justify-content: center; width: 21px; box-shadow: none; background: var(--0); border: 1px solid var(--bc); } cdlc bd table tr>td:last-child { width: 0; padding: 0; text-align: center; } cdlc bd table tr>th:first-child {padding: 7px;width: 20px;} cdlc hd btns btn svg { fill: var(--b); } @media(max-width:999px){ cdlc>bl hd table { min-width: max-content; overflow: scroll; } cdlc>bl> hd table th { width: 137px; } } cdlc bd tbody>tr>th:first-child { width: 154px; display: block; } cdlc bl { display: block; } cdlc input { width: 13px; height: 13px; } cdlc bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cdlc hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cdlc bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } cdlc bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} cdlc bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cdlc bd span { font-size: 12px; display: flex; width: 99px; } cdlc bd tbody td t { color: var(--br); font-size: 14px; } cdlc bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } cdlc bd tbody i { width: 26px; height: 19px; } cdlc td t d i { width: 30px; height: 12px; } cdlc>bl>bd dv { display: flex ; align-items: center; } cdlc bd table tr>td { font-size: 0.77em;color: var(--br); font-weight: 500; } cdlc bd table tr>th:nth-child(2) { width: 20px; } cdlc>bl>bd { overflow: scroll; } /*Delivery_ChallansTerms*/ cvct bl { padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: var(--bg); display: grid; grid-template-columns: max-content auto; } cvct dv>t { display: block; font-size: 0.88em; margin: 11px 0; } cvct c>textarea { padding: 11px; font-weight: 400; border: solid 1px var(--bc); border-radius: 11px; font-size: 12px; display: block; max-width: 728px; min-width: 728px; } cvct c>textarea:focus { border: solid 1px var(--a); border-radius: 7px; } cvct hd>dv { padding-right: 11px; display: block; } cvct bl>bd { border-left: solid 1px var(--bc); padding: 0 19px; width: max-content; } cvct bd>t { font-size: 0.8em; } cvct f>c>i { height: 22px; width: 20px; opacity: 77%; } cvct dv>f { border: dashed 1px var(--bor); width: fit-content; align-items: center; gap: 1px; font-size: 0.8em; border-radius: 5px; background: var(--b); margin: 2px 0; } cvct dv > f > i { font-size: 1rem; font-weight: 400; border: 0; line-height: 1.6; text-align: end; border-radius: 0px 8px 8px 0px; display: flex; align-items: center; justify-content: end; margin: 0 7px; height: 23px; width: 16px; } cvct dv>f>c { display: flex; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px; } cvct bd>small { font-size: 0.66em; opacity: 77%; } @media(max-width:1255px){ cvct bl { display: grid; grid-template-columns: auto; gap: 11px; } cvct bl>bd { border: 0; padding: 0; } cvct c>textarea { min-width: -webkit-fill-available; } } cvct dv>t { display: block; font-size: 12px; margin: 4px; } /*Delivery_Column*/ cdcn dv>t { font-size: 0.66em; display: block; margin: 11px; font-family: emoji; margin-bottom: 0; } cdcn dv>b { font-size: 0.66em; display: block; font-family: emoji; margin: 4px 11px; font-style: italic; margin-bottom: 25px; } cdcn dv:nth-child(2)>t { margin-bottom: 15px; } cdcn dv:nth-child(3)>b { margin-bottom: 11px; } @media(max-width:999px){ cdcn dv:nth-child(2)>t { margin: 5px 11px; } cdcn dv>b { margin-bottom: 11px; } } /*Delivery_InvoiceDetail*/ cdol>bl { display: flex; align-items: baseline; justify-content: space-between; border-bottom: solid 1px var(--c0); } cdol hd { display: block; align-items: end; justify-content: space-between; } cdol hd tr td dv { display: grid; } cdol hd table td dv t { white-space: nowrap; caption-side: bottom; border-collapse: collapse; font-size: 8pt; color: var(--c1); line-height: 1.6; } cdol hd table div span { font-weight: bold; font-size: 12pt; border-collapse: collapse; font-family: auto; } cdol>bl>bd>dv { display: block; position: unset; overflow: unset; } cdol bd dv h4 { font-size: 22pt; font-family: auto; font-weight: 400; } cdol tbody>tr>td { padding-left: 1rem; align-items: center; height: unset; } @media(max-width:999px){ cdol bd dv h4 { font-size: 15pt; margin-right: 10px; } } /*Delivery_InvoiceMore*/ cdime { display: block; padding: 11px 19px; } cdime div>aa { color: var(--a); font-size: 0.88em; } cdime div>c {font-size: 0.88em; } cdime div>t { font-size: 0.88em; } cdime bl>hd { display: flex; justify-content: end; margin-bottom: 33px; } cdime d>c { font-size: 0.88em; color: var(--cbg1); margin: 25px 0px; display: block; } cdime bd>d>name { font-weight: 400; display: block; font-size: 0.88em; } cdime bd>d {display: grid;align-items: center;font-size: 0.88em;grid-template-columns: 155px auto;} cdime>bl bd d dvv { font-weight: 400; display: block; } cdime d>btn>i { height: 12px; width: 12px; margin: 0 2px; } cdime>bl bd d dvv t { font-weight: 400; } cdime>bl bd d dvv tt { color: var(--br); font-weight: 600; } cdime>bl bd dd>c { font-size: 0.88em; display: block; font-weight: 400; } cdime>bl bd d dvv { font-weight: 400; display: block; text-align: center; } cdime>bl bd dd { display: grid; grid-template-columns: 37% auto; justify-content: end; margin: 0; } cdime bd>d>btn {display: flex;align-items: center;} cdime d>btn>t { font-size: 0.88em; color: var(--cbg1); margin: 17px 0px; display: block; } /*Quote_ItemTable*/ cdei { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative;max-width: 1050px; } cdei bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} cdei>bl>hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } cdei hd>h4 { font-size: 0.88em; } cdei>bl>bd { display: block; } cdei bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } cdei bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } cdei bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } cdei bd>d>t:nth-child(1){ text-align: unset; } cdei bd>d>cc>input { border: unset; } cdei bd>d>cc { display: block; border-right: solid 1px var(--b-t); } cdei bd>d>cc>textarea:hover { box-shadow: 0px 0px 1px 1px var(--a); } cdei d>cc>textarea:focus { border: solid 1px var(--a); } cdei d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } cdei d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } cdei bd>d:nth-child(2)>t { padding: 0; } cdei bd>d>cc>textarea { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; } cdei bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } cdei bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } cdei bd>d:nth-child(2)>t { border-bottom: 0; } cdei bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } cdei bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } cdei bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } cdei bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -35px; } cdei bd>d c>i { height: 13px; width: 13px; } cdei bd>d c>i:nth-child(2) { height: 16px; width: 16px; } cdei bd>d c>i:nth-child(2) svg { fill: var(--cr); } cdei bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } cdei ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } cdei ft>div i { height: 16px; width: 16px; } cdei div>cc>input { border: solid 1px var(--a); height: 33px; } cdei div>cc>input:focus { border: solid 1px var(--a); } cdei c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } cdei div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } cdei div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } cdei div>span:focus { background: var(--a); color: var(--b); } cdei ft>div { display: none; } .Header cqit ft>div { display: grid; } cdei div>span:hover { background: var(--a); color: var(--b); } @media(max-width:999px){ cdei { display: grid;overflow: scroll; } cdei bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } } /*component:-Delivery_ItemUpdate*/ cdmu { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative; margin-left: 26px; } cdmu bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} cdmu hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } cdmu hd>h4 { font-size: 0.88em; } cdmu bd { display: block; } cdmu bd textarea { border: solid 1px var(--b-t); font-size: 12px; padding: 8px; border-radius: 8px; width: 391px; min-height: 55px; max-height: 188px; resize: vertical; } cdmu bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } cdmu bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } cdmu bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } cdmu bd>d>t:nth-child(1){ text-align: unset; } cdmu bd>d>cc>input { border: unset; } cdmu bd>d>cc { display: block; border-right: solid 1px var(--b-t); padding: 11px; } cdmu bd>d>cc>input:hover { box-shadow: 0px 0px 1px 1px var(--a); } cdmu d>cc>input:focus { border:unset; } cdmu d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } cdmu d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } cdmu bd>d:nth-child(2)>t { padding: 0; } cdmu bd>d>cc>input { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; font-weight: 200; } cdmu bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } cdmu bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } cdmu bd>d:nth-child(2)>t { border-bottom: 0; } cdmu bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } cdmu bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } cdmu d>t>p:nth-child(2) { color: var(--a); } cdmu bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } cdmu bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -35px; } cdmu bd>d c>i { height: 13px; width: 13px; } cdmu bd>d c>i:nth-child(2) { height: 16px; width: 16px; } cdmu bd>d c>i:nth-child(2) svg { fill: var(--cr); } cdmu bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } cdmu ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } cdmu ft>div i { height: 16px; width: 16px; } cdmu div>cc>input { border: solid 1px var(--a); height: 33px; } cdmu div>cc>input:focus { border: solid 1px var(--a); } cdmu c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } cdmu div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } cdmu div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } cdmu ft>div { display: none; } .Header cqit ft>div { display: grid; } cdmu div>span:hover { background: var(--a); color: var(--b); } cdmu>bl>bd c svg { fill: var(--cr); } @media(max-width:999px){ cdmu { display: grid;overflow: scroll;margin:unset; } cdmu bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } cdmu bd { display: block; overflow: auto; } cdmu bd>d { display: grid ; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; width: -webkit-fill-available; min-width: 555px; } cdmu bd>d>t { display: flex ; border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; justify-content: space-between; } cdmu bd textarea { border: solid 1px var(--b-t); font-size: 10px; padding: 8px; border-radius: 8px; width: -webkit-fill-available; min-height: 55px; max-height: 188px; resize: vertical; max-width: 333px; } cdmu d>t>p { padding: 2px; border-radius: 5px; transition: 99ms; } } /*comonent:-Delivery_SubTotalUpdate*/ cdsu { display: block; padding: 11px; background: var(--bg); margin: 11px; border-radius: 11px; } cdsu bd>d { display: grid; grid-template-columns: auto auto; justify-content: space-between; font-size: 0.88em;align-items: center; } cdsu bd>d:nth-child(1) { font-weight: 500; } cdsu bd>d>t { padding: 10px; } cdsu d>cc>t { padding: 10px; } cdsu d>prc { padding: 10px; } cdsu f > prc { display: block; font-size: 1rem; font-weight: 400; line-height: 1.6; width: 75px; text-align: end; padding: 3px 11px; border: solid 1px var(--bor); border-radius: 8px 0px 0px 8px; } cdsu f>t { font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: end; border: solid 1px var(--bor); border-left: unset; border-radius: 0px 8px 8px 0px; padding: 0 10px; display: flex; align-items: center; justify-content: end; width: 12px; } cdsu div>prc { display: grid; margin-left: auto; } cdsu bd>div { display: grid; align-items: center; grid-template-columns: 166px auto auto; padding: 0 9px; font-size: 0.88em; margin: 11px 0; } cdsu h>sl { padding: 0; background: unset; display: flex; align-items: center; height: unset; margin: 0; gap: 9px; width: fit-content; } cdsu sl>input { height: 16px; width: 16px; } cdsu div>h { display: flex; align-items: center; gap: 11px; } cdsu f>input { display: flex; border: solid 1px var(--bor); height: 33px; width: fit-content; font-weight: 500; transition: 333ms; } cdsu f>input:focus { border: solid 1px var(--a); } cdsu f>input:hover{border: solid 1px var(--a); } cdsu h>sl input:focus { box-shadow: none; } cdsu m>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; width: 111px; } cdsu cc>m>input { border: dashed 1px var(--bor); } cdsu m>input:hover { border: dashed 1px var(--a); } cdsu m>input:focus { border: solid 1px var(--a); box-shadow: 0px 0px 5px 1px var(--at); } cdsu bl>ft { padding: 11px; display: FLEX; align-items: center; justify-content: space-between; border-top: solid 1px var(--bc); } cdsu bl>ft>prc { font-weight: bold; } cdsu bl>bd { display: block; margin-bottom: 33px; } cdsu div:nth-child(3) cc>f { align-items: center; display: flex; position: relative; width: fit-content; } cdsu f>i { height: 18px; width: 18px; position: absolute; right: 3px; top: 8px; bottom: 0; opacity: 77%; } cdsu div:nth-child(3) prc { opacity: 77%; } @media(max-width:999px){ cdsu bd>div { grid-template-columns: 124px auto auto; } cdsu cc>m>input { width: 90px; } cdsu { margin: 0; } cdsu f>input { width: 110px; }} /* component :-Detail*/ cdet bl { display: block; box-shadow: var(--bs-b); } cdet hd i { width: 109px; } cdet hd b { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 11px; border-radius: 3px; width: 43%; } cdet hd d { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 11px; border-radius: 3px; width: 74px;} cdet hd div { display: flex; gap: 51px; margin-top: 0; margin-left: 28px; } cdet hd mg { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 30px; border-radius: 3px; width: 66%; margin-top: 37px; margin-left: 29px; } cdet hd hr { margin: 11px; width: 75%; margin-left: 32px; } cdet bd d { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 11px; border-radius: 3px; width: 74px;margin-left: 29px } cdet bd dv { display: flex; justify-content: space-between; } cdes bd a { position: relative; right: 18%; font-size: 0.88em; font-weight: 400; color: var(--aa); } cdet bd span { display: flex; gap: 11px; font-size: 12px; color: var(--aa); align-items: center; } cdet bd i { width: 33px; } cdet bd mg { display: flex; align-items: center; } @media(max-width:999px){ cdet bd span { min-width: fit-content; display: block; } cdet hd mg { display: block; background: linear-gradient(45deg, #dcdbdb, #dcdbdb); padding: 30px; border-radius: 3px; width: 66%; margin-top: 37px; } } /*component :-Details*/ cdes bl { padding: 11px; } cdes hd h2 { font-size: 01.44em; font-weight: 400; } cdes bd d { display: grid; grid-template-columns: auto auto auto;gap: 24px; } @media(max-width:999px){ cdes bl { margin-top: 14px;padding: 17px; } cdes bd d { display: block; } }cdae { display: flex; } cdae bl { display: flex; } cdae hd div i { display: flex; height: 80px; width: fit-content; border-radius: 10px; } cdae bd div { padding-top: 5px ; padding-bottom: 5px ; margin-left: 20px } cdae bd t { font-weight: 500; font-size: 14px; color: var(--c0); } cdae bd div p { font-size: 12px; } cdae bd dv { margin-left: 20px; display: flex; } cdae bd dv i { height: 15px; width: fit-content; margin-right: 2.5px; margin-left: 2.5px; } cdae bd dv i svg#Layer_1 { fill: var(--c0); } cdae bd dv i svg#Layer_1:hover { fill: var(--aa); } cdae>bl>bd>dv { display: flex; } /*Earnings*/ cise { display: block; padding: 11px; } cise ft t { font-size: 0.88rem; white-space: nowrap; } cise hd { display: flex; gap: 4px; align-items: center; justify-content: space-between;} cise hd h2 { display: block; border-right: 1px solid; padding-right: 4px; font-size: 1.44em; font-weight: 400; } cise hd div i { height: 18px; width: 18px; } cise hd div { display: flex; gap: 7px; align-items: center; justify-content: center; } cise bd aa { color: var(--aa); display: inline-flex; gap: 4px; align-items: center; text-decoration: underline; font-weight: 500; } cise bd p { font-size: 0.77rem; line-height: 16px; } cise ft i { height: 22px; width: 22px; } cise hd dv svg { fill: var(--b); height: 16px; width: 16px; } cise ft btn { display: flex; gap: 3px; align-items: center; border: 3px solid var(--bor); padding: 5px; width: 16%; border-radius: 3px; } cise hd dv { display: flex; background: var(--aa); padding: 4px; color: var(--b); font-size: 0.77rem;} cise hd i { height: 22px; width: 22px; } cise hd span { display: flex; gap: 2px; align-items: center; justify-content: center;font-size: 0.88em; } cise hd flex { display: flex; gap: 8px; } cise bd i { height: 15px; width: 14px; } cise div i svg { fill: var(--aa); } cise aa i svg { fill: var(--aa); } cise ft i svg { fill: var(--aa); } cise div t { font-size: 20px; } @media(max-width: 999px){ cise hd span { display: flex; gap: 2px; align-items: center; justify-content: center; white-space: nowrap; } cise hd dv { display: none; } cise ft btn { width: unset; } cise{padding:0px; padding-top: 11px ;} } /*Earnings_Distribution*/ cesd { display: grid; box-shadow: var(--bs-b); border-radius: 7px; margin: 0; background: var(--b); } cesd bd mg { display: flex; gap: 10px; padding: 9px 0px 0px 13px; } cesd hd h4 { font-size: 0.99rem; font-weight: 400; } cesd hd { display: block; padding: 7px 17px; border-bottom: solid 1px var(--bor); } cesd bd mg b { font-weight: 400; font-size: 0.77rem; padding-bottom: 8px; } cesd bd mg b:nth-child(1){ border-bottom: 2px solid var(--aa); } cesd bl>bd { padding: 8px 13px 13px 11px; } cesd bd div i { height: 100px; padding: 4px; } cesd hd t { font-size: 0.77rem; font-weight: 400; } cesd bd div { display: flex; flex-direction: column; align-items: center; } cesd bd p { font-weight: 400; font-size: 0.77rem; margin-bottom: 3px; } @media (max-width: 999px){ cesd { margin:0px; } } /*Earnings_Payment*/ cmte { display: block; border-radius: 7px; background: var(--b); box-shadow: var(--bs-b);border-radius: 7px; } cmte hd h2 { font-size: 0.88em; font-weight: 400; } cmte hd { display: block; padding: 7px 17px; border-bottom: solid 1px var(--bor); } cmte hd span { font-size: 0.88rem; } cmte bd i { height: 100px; } cmte bd { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; } cmte bd p { font-weight: 400; font-size: 0.88rem; text-align: center; padding: 6px; margin-bottom: 0; } @media(max-width:999px){ cmte>bl>hd>h2 { font-size:0.88em; font-weight: 400; } } /*component:Earnings_Reports*/ cers bl { padding: 11px; margin: 11px; } cers hd h2 { font-size: 23px; font-weight: 500; } ers bl { padding: 27px 17px 32px 24px; } cers b { border: solid 1px var(--br); padding: 1px 0px 1px 0px; margin-left: 4px; margin-right: 5px; } cers hd div { display: flex; } cers hd p { font-size: 13px; color: var(--c0); } cers hd spa { color: var(--aa); font-size: 13px; display: block; margin-top: -7px; } cers hd h4 { font-size: 21px; font-weight: 400; } cers hd spa { text-decoration: underline; } cers dv span { font-size: 30px; font-weight: 300; text-decoration: none; color: var(--aa); } cers select { width: 158px; } cers bd hr { margin-top: 8%; } cers bd { display: flex; } cers bd div { display: flex;gap:9px;} cers bd c { margin-top: 13px; } cers mg { display: flex; align-items: center; gap: 10px; } cers bd f { margin-top: 11px; } cers dv { display: flex; align-items: center; padding: 0px 7px; background-color: var(--bc); font-size: 14px; margin-top: 16px; width:170px; } cers bd i { width: 20px; margin-top: 11px; } cers ft mg { display: flex; align-items: center; justify-content: space-between;margin-top: 14px;} cers ft a { font-size: 15px; font-weight: 400; min-width: fit-content; gap: 11px; display: flex; } @media(max-width:999px){ cers bd { margin-bottom: 10px; margin-top: 10px} cers ft mg { overflow: scroll; } cers dv span { margin-left: 0px; } cers mg { grid-template-columns: auto auto auto;display: grid;} crcd bd span { display: flex; margin-left: 11px; } cers select { width: 143px; margin-left: 5px; } } /*Expanded_Benefit*/ ppbo { display: block; box-shadow: 0px 0px 4px 0px var(--bor); max-width: 222px; padding: 11px; margin: 11px 0; } ppbo d input[type="radio"] { height: 16px; width: 16px; margin: 0; margin-bottom: 4px; } ppbo bl>hd d { display: flex; align-items: center; gap: 6px; } ppbo bd cc { display: block; font-weight: 400; font-size:0.77em; margin: 11px 0;} ppbo bd f cm { display: block; font-size: 0.77em; } ppbo bd f i { height: 17px; width: 17px; } ppbo bd f { display: flex; align-items: center; margin: 11px 0; } ppbo hd p {font-size: 0.66em;font-weight: 400;} /*Expanded_Benefits*/ ppbs { display: block; border-radius: 5px; background: var(--b); max-width: 374px; position: absolute; right: 0; transition: 333ms; top: 0; box-shadow: -4px 0px 7px var(--bc); padding: 11px; bottom: 41px; } ppbs bl>hd h3 { font-weight: 400; font-size: 0.9em; } ppbs>bl { display: grid; grid-template-rows: max-content auto max-content; height: -webkit-fill-available; } ppbs hd i { height: 18px; width: 18px; } ppbs bl>hd dv { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } ppbs hd div { background: var(--y2); display: grid; align-items: center; grid-template-columns: 23px auto 23px; } ppbs hd div i { height: 18px; width: 18px; } ppbs hd div i:nth-child(1) { height: 13px; width: 13px; border-radius: 50%; border: solid 1px; margin-left: 5px; } ppbs hd div p { font-size: 10px; } ppbs cc h3 { font-weight: 400; font-size: 16px; margin-top: 11px; } ppbs ul li { list-style: auto; font-weight: 400; font-size: 0.77em; } ppbs bd cc ul { padding: 0 15px; display: grid; gap: 8px; } ppbs ft d input { height: 23px; width: 23px; accent-color: var(--aa); } ppbs ft d { display: flex; align-items: center; } ppbs ft d input { height: 27px; width: 27px; margin-bottom: 33px; accent-color: var(--aa); } ppbs ft btn { background: var(--aa); display: flex; align-items: center; justify-content: center; color: var(--b); font-size: 13px; padding: 7px; width: 205px; } ppbs ft>d p { margin: 0; font-size: 0.77em; } benefit { border-radius: 4px; position: absolute; inset: 0; top: 44px; opacity: 0; z-index: 999999999999999999; visibility: hidden; transition: 122ms; height: 100%; right: 0; overflow: hidden; backdrop-filter: blur(5px); } .benefit benefit { visibility: visible; opacity: 1; } .benefit ppbs { top: 0; } /* Comonent:Expense */ ceps>bl h2 { display: flex; justify-content: center; padding: 11px; font-weight: 400; font-size: 17px; } /* Component:ExpenseDetails */ ceup>bl hd dv i:nth-child(1) { height: 18px; width: 15px; display: block; box-shadow: 0px 0px 2px 0px; padding: 9px; border-radius: 5px; background: var(--b-t); } ceup>bl hd dv i:nth-child(2) { height: 19px; width: 19px; display: flex; box-shadow: 0px 0px 2px 0px; padding: 9px; border-radius: 5px; background: var(--b-t); } ceup>bl hd div dv { display: flex; gap: 12px; align-items: center; } ceup>bl hd div { display: flex ; justify-content: space-between; align-items: center; padding: 15px; padding-top: 0; } ceup>bl hd div h2 { font-weight: 500; font-size: 22px; display: block; } ceup>bl bd div t { display: block; margin-bottom: 5px; color: var(--cg); } ceup>bl bd div { display: block; } ceup>bl bd div cc { display: block; margin-bottom: 5px; } ceup>bl bd div b { font-weight: 400;color: var(--cg); } ceup>bl bd div cc amount { color: var(--cr); font-size: 26px; } ceup>bl bd div cc date { color: var(--cg); } ceup>bl bd div { display: block; padding: 11px; } ceup>bl bd btn { padding: 5px 22px; background: var(--b-t52); margin: 8px; border-radius: 3px; } ceup>bl bd dv color { display: block; color: var(--cg); line-height: 2; } ceup>bl bd dv priace { display: block; } ceup>bl bd dv { display: block; margin: 11px; margin-top: 7%; } ceup>bl bd number { margin-top: 14px; display: block; } ceup>bl>hd>mg { display: flex; align-items: center; border-bottom: 1px solid var(--bor); border-top: 1px solid var(--bor); background: var(--b-t); width: -webkit-fill-available; max-width: 105vh; } ceup>bl>hd>mg>d { display: flex; align-items: center; border: 1px solid var(--bc); padding: 5px 11px 6px; border-right: solid 1px var(--bor); position: relative; } ceup>bl>hd>mg>d>i { height: 17px; width: 22px; } ceup>bl>bd { display: grid ; grid-template-columns: auto auto; padding: 11px; } ceup { display: block; } @media(max-width:999px){ ceup>bl>hd>mg { margin-top: 15px; display: none; } ceup>bl>bd { display: grid; grid-template-columns: 45% 57%; } ceup>bl bd btn { padding: 10px 22px; background: var(--b-t52); margin: 8px; border-radius: 3px; display: flex; font-size: 0.77em; text-align: center; white-space: nowrap; } ceup>bl bd div cc price { color: var(--cr); font-size: 24px; } ceup>bl bd dv { display: flex; margin: 11px; margin-top: 7%; align-items: center; gap: 11px; } ceup>bl bd number { margin-top: 0; display: block; } ceus>bl bd { display: flex; justify-content: center; padding: 4px; margin: 11px; max-width: 153px; } ceus>bl hd dv b { display: block; font-weight: 400; font-size: 14px; text-align: center; } ceus>bl hd dv t { font-size: 0.67em; color: var(--c0); opacity: 77; display: block; text-align: center; } ceus { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bor); background-color: var(--b); border-radius: 10px; padding: 11px; margin: 11px; max-width: 190px; } } /*component :-ExpenseHistories*/ cehs hd h2 { font-size: 18px; min-width: fit-content; font-weight: 500; } cehs hd btn { display: flex; align-items: center; padding: 8px; } cehs hd i { width: 23px; height: 23px; } cehs hd btn { display: flex; align-items: center; padding: 5px 11px; border-radius: 6px; max-width: fit-content; } cehs hd btn:hover { background: var(--b1); } cehs hd btns btn { background: var(--a); padding: 2px; } cehs hd btns box { background: var(--bc); display: block; width: fit-content; border: solid 1px var(--b-t); border-radius: 4px; padding: 3px; } cehs hd svg { fill: var(--b-t77); } cehs hd box svg { fill: var(--c); } cehs hd btns { display: flex; align-items: center; gap: 11px; } cehs>bl>hd { display: flex; align-items: center; border-bottom: solid 1px var(--b-t); margin-bottom: 11px; justify-content: space-between; padding: 5px 7px; } cehs hd box i { width: 21px; height: 19px; } cehs bl>hd>btn svg { fill: var(--aa); } /*component:ExpenseHistory*/ cahs>bl>bd input { width: 14px; height: 14px; } cahs>bl>bd name { display: flex; align-items: center; justify-content: space-between; } cahs>bl>bd dv { display: flex; align-items: center; gap: 4px; } cahs>bl>bd span { font-size: 0.77em; } cahs>bl>bd rs { font-weight: 400; font-size: 0.88em; } cahs>bl>bd cc { font-size: 0.87em; } cahs>bl>bd { background: var(--b1); padding: 17px 19px; margin-top: -11px; } /*component:-ExpenseNew*/ cepns bl bd { display: block; padding: 0; } cepns hd h2 { font-size: 21px; font-weight: 400; padding: 11px; border-bottom: solid 1px var(--b-t); } cepns hd dv d { display: flex; align-items: center; gap: 5px; } cepns hd dv { display: flex; align-items: center; gap: 53px; } cepns hd dv h4 { font-size: 13px; font-weight: 400; display: flex; align-items: center; } cepns hd dv t { font-size: 13px; margin-top: 4px; } cepns hd div { display: flex; margin-left: 17px; align-items: center; } cepns hd .btn { color: var(--cr); } cepns>hd sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.77em; } cepns hd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; max-width: 437px; } cepns>bl d cc input:hover { border: solid 1px var(--a); } cepns hd cm { display: flex; align-items: center; } cepns>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; color: var(--cr); } cepns hd input:focus { border: solid 1px var(--bor); } cepns bd svg { width: 13px; } cepns hd t { font-size: 0.71em; color: var(--cg); display: flex; align-items: center; margin-top: 11px; } cepns hd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 145px 53%; gap: 8px; } cepns>bl sl input:focus { border-radius: 8px; border: solid 0px var(--bc); } cepns>bl hd d { display: flex; align-items: center; gap: 65px; } cepns>bl hd d>label { white-space: nowrap; align-items: center; display: block; font-size: 0.77em; } cepns>bl hd sl select { border: solid 1px var(--bor); border-radius: 5px; width: -webkit-fill-available; padding: 7px; display: block; margin: unset; max-width: 457px; margin-top: 10px; font-size: 0.73em; background: var(--bt); font-weight: 100; } cepns>bl hd sl select:hover { border: solid 1px var(--a); } cepns hd sl>input:hover { border: solid 1px var(--a); } cepns>bl select:focus { border: solid 1px var(--bor); } cepns>bl hd cc { display: flex; align-items: center; width: -webkit-fill-available; } cepns>bl> hd d>cc input { outline: 0; display: block; margin: 11px; border: solid 1px var(--bor); font-size: 0.67em; height: 30px; border-radius: 6px; position: relative; padding-left: 24px; max-width: 228px; margin-left: 13px; } cepns hd mg sl input:hover { border: solid 1px var(--a); } cepns>bl bd i { width: 18px; height: 18px; } cepns hd mg sl input { height: 28px; } cepns hd mg sl { display: grid; align-items: center; background: unset; height: max-content; grid-template-columns: 157px 13% 13% 13%; gap: unset; } cepns hd gg { display: grid; grid-template-columns: 448px; } cepns>bl bd div svg { fill: var(--c0); } cepns>bl bd div i { width: 15px; position: absolute; padding-left: 7px; height: 15px; display: block; } cepns hd div input { position: relative; padding-left: 28px; border: solid 1px var(--bor); height: 29px; font-size: 0.7em; border-radius: 5px; } cepns bd div { display: flex; align-items: center; margin-left: 0; } cepns hd sl>input:after { position: absolute; width: 22px; height: 22px; right: 0; top: 0; } cepns hd sl>input:focus { border: solid 1px var(--aa); border-radius: 5px; box-shadow: 0 0 6px 0px var(--a); }crep hd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; } cepns>bl bd input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: auto; max-width: 454px; } cepns bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 145px 53%; gap: 8px; } cepns bd sl>textarea { display: block; max-width: 446px; min-height: 44px; border-radius: 7px; padding: 11px; } cepns bd sl b { font-weight: 400; display: block; font-size: 0.77em; } cepns>bl hd { margin-bottom: 50px; display: block; background: var(--b1); padding: 11px; } cepns hr { max-width: 994px; display: block; border: solid 1px var(--b1); } cepns form>div:nth-child(1) { background: var(--b); padding: 0px; } cepns form> div lable { color: var(--cr); font-size: 0.88em; } cepns form>div>sl>d c>i { height: 18px; width: 18px; fill: var(--b); display: block; } cepns div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } cepns form>div { display: grid; grid-template-columns: 102px auto; padding: 6px 22px; align-items: center; } cepns>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} cepns div c { display: flex; padding: 11px; background: var(--a); } cepns form>div sl { align-items: center; display: flex; background: var(--b); } cepns form>div b { font-weight: 400; font-size: 0.77em; } cepns { padding: 11px; margin: 0px; display: block; } @media(max-width:999px){ cepns hd gg { display: grid; grid-template-columns: 100%; } cepns hd sl { grid-template-columns: unset; border-radius: unset; } cepns hd mg sl { grid-template-columns: auto; display: grid; gap: 12px; } cepns>bl bd input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: auto; max-width: 471px; min-width: -webkit-fill-available; } cepns form>div { display: block; } cepns hd sl>input { width: -webkit-fill-available; max-width: none; } cepns { display: block; } cepns>bl hd sl select { width: -webkit-fill-available; display: block; max-width: none; } cepns bd sl>textarea { width: -webkit-fill-available; display: block; max-width: none; } cepns bd sl { display: block; align-items: center; background: unset; height: auto; grid-template-columns: 145px 28% 30% 24%; gap: 8px; border-radius: unset; } cepns hd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: -webkit-fill-available; max-width: 328px; } ceus { width: max-content; min-height: 177px; height: -webkit-fill-available; max-height: 343px; max-width: fit-content; min-width: -webkit-fill-available; } } /*ExpenseOverview*/ cspw bl { position: relative; display: block; border: solid 1px var(--bc); margin: 11px; border-radius: 11px; background: var(--b); } cspw bl hd { display: flex; padding: 11px; background: var(--bg); border-bottom: solid 1px var(--bc); justify-content: space-between; align-items: center; } cspw hd>d i { height: 14px; width: 14px; } cspw hd>cc { font-size: 0.88em;color:var(--b); } cspw hd>d i svg { fill: var(--br);} cspw hd>div { background: var(--b); display: grid; padding: 4px; box-shadow: var(--bs-bp); gap: 7px; position: absolute; border-radius: 7px; right: 13px; top: 36px; z-index: 999999; transition: 999ms; width: 200px; } cspw hd>div f:nth-child(1){ background: var(--aa); } cspw hd>div f { display: flex; align-items: center; padding: 9px; border-radius: 4px; gap: 11px; padding-right: 55px; font-size: 13px; } cspw div f i { height: 14px; width: 14px; } cspw hd>div.add { display: grid; } cspw hd>div{ display: none; } cspw bl hd>d { display: flex; align-items: center; gap: 4px; font-size: 0.77em; } cspw hd>div f:hover { background: var(--aa);color: var(--b); } cspw div f>cc.this { color: var(--b); } cspw h>i { border-radius: 0; height: 268px; opacity: 81%; } cspw dv>h2 { display: flex; justify-content: end; font-weight: 400; font-size: 19px;} cspw hd>h4 { font-size: 18px; font-weight: 400; position: relative; } cspw ft dv p{ display: block; font-size: 0.88em; color: var(--aa); font-weight: 300; margin: 0; } cspw bd div dv cm{ display: block; font-size: 0.88em;font-weight: 300;} cspw bd div dv cm { display: flex; font-size: 0.77em; font-weight: 300; justify-content: end; } cspw bd div dv ss { display: flex; color: var(--aa); font-weight: 400; margin: 0; justify-content: end; font-size: 13px; margin-bottom: 3px;} cspw bl bd { display: grid; align-items: center; gap: 11px; grid-template-columns: 81% auto; } cspw bd h line.line { height: 217px; display: block; background: var(--a); width: 11px; border-radius: 2px; position: absolute; left: 47%; top: 26px; } cspw bd>div { border-left: solid 1px var(--bc); padding: 22px; justify-content: end; display: grid; gap: 22px; } @media(min-width:999px){ cspw h>i svg { opacity: 41%; } cspw svg line { opacity: 0.2; } cspw svg path { opacity: 0.2; }} cspw ft>p { font-size: 13px; opacity: 77%; } cspw bl>ft { padding: 20px; display: block; color: var(--cg); } cspw bd>h { opacity: 57%; } @media(max-width:999px){ cspw bd>h { width: unset; height: unset; } cspw bl bd { grid-template-columns: auto; } cspw bl{margin: 11px 0;} cspw dv>h2 { justify-content: unset; } cspw dv>p { justify-content: unset; } cspw bd>div { display: flex; justify-content: unset; padding: 0 22px; } cspw bd div dv cm { justify-content: unset; } cspw h>i { border-radius: 0; height: 145px; }} /* Component:ExpensePopular */ esso>bl hd dv cc { display: block; } esso>bl hd dv cc t { display: block; font-size: 0.88em; } esso>bl input[type="checkbox"] { height: 19px; width: 19px; display: block; } esso>bl hd dv cc date { font-size: 0.77em; display: block; } esso>bl hd div dv { display: flex; align-items: center; gap: 11px; } esso hd div praize { font-size: 0.88em; display: block; } esso hd div { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; } esso>bl>hd>div:hover { background: var(--att); display: flex; } /*Top_Expenses*/ oeps { position: relative; display: block; border: solid 1px var(--bc); margin: 11px; background: var(--b); height: 0; min-height: min-content; border-radius: unset; } oeps bl hd { display: flex; padding: 11px; background: var(--b); border-bottom: solid 1px var(--bc); justify-content: space-between; align-items: center; } oeps bd>a { color: var(--cg); font-weight: 400; font-size: 0.88em; } oeps bl bd { display: grid; padding: 11px; text-align: center; padding-top: 46px; } oeps bl hd>d { display: flex; align-items: center; gap: 4px; font-size: 0.77em; } oeps hd>d i { height: 14px; width: 14px; } oeps hd>div f:nth-child(1) { background: var(--aa); } oeps div f:nth-child(1) cc { color: var(--b); } oeps hd>div f { display: flex; align-items: center; padding: 11px; border-radius: 7px; gap: 11px; padding-right: 55px; font-size: 0.77em; } oeps hd>div { background: var(--b); display: none; padding: 4px; box-shadow: var(--bs-bp); gap: 7px; position: absolute; border-radius: 7px; right: 13px; top: 36px; z-index: 999999; transition: 999ms; width: 200px; } oeps hd>div.Expenses { display: grid; } oeps bl hd i { height: 16px; width: 16px; } oeps bl hd ss { display: flex; align-items: center; } oeps bd dv { display: flex; overflow: hidden; border-radius: 20px; height: 18px; } oeps dv d { flex: 1; } oeps dv d { padding: 0 41px; } oeps dv d:nth-child(1) { background: var(--b-t52); } oeps dv d:nth-child(2) { background: var(--at); } oeps dv d:nth-child(3) { background: var(--y2); } oeps dv d:nth-child(4) { background: var(--b-t); } oeps dv d:nth-child(5) { background:var(--b-t52); } oeps dv d:nth-child(6) { background: var(--y2); } oeps bl bd btn { color: var(--b); display: flex; align-items: center; padding: 7px; justify-content: center; background: var(--br);margin: auto; border-radius: 22px; font-size: 0.88em; } oeps bl bd btn i svg{fill:var(--b); } oeps bl bd btn i { height: 18px; width: 18px; } oeps ss>h4 { font-size: 18px; font-weight: 400; position: relative; } oeps>bl>bd dv { justify-content: center; align-items: center; background: var(--b1); padding: 22px; flex-direction: column; gap: 8px; } oeps>bl>bd span { font-size: 17px; color: var(--y3); } oeps>bl>bd h4 { font-size: 21px; } oeps>bl>bd d { display: block; background: var(--a); padding: 8px; border-radius: 11px; margin-top: 33px; } oeps>bl>bd dvv { display: flex ; justify-content: space-between; align-items: center; } oeps>bl>bd f { display: flex ; flex-direction: column; } oeps>bl>bd span:nth-child(2) { color: var(--a2); font-size: 0.94em; } oeps>bl>bd dvv { display: flex ; justify-content: space-between; align-items: center; margin-top: 17px; } oeps>bl>bd b { font-size: 19px; } oeps>bl>bd b { font-size: 19px; font-weight: 500; } @media(max-width:999px){ oeps bl bd btn { width: 45%; } oeps { margin: unset; min-height: 296px; } oeps bl bd { padding-top: 59px; } } oeps hd i svg { fill: var(--aa); } oeps bd>p { font-size: 13px; } /*component:-ExpenseUpdate*/ crep bl bd { display: block; padding: 0; } crep hd h2 { font-size: 21px; font-weight: 400; padding: 11px; border-bottom: solid 1px var(--b-t); } crep hd dv d { display: flex; align-items: center; gap: 5px; } crep hd dv { display: flex; align-items: center; gap: 53px; } crep hd dv h4 { font-size: 13px; font-weight: 400; display: flex; align-items: center; } crep hd dv t { font-size: 13px; margin-top: 4px; } crep hd div { display: flex; margin-left: 17px; align-items: center; } crep hd .btn { color: var(--cr); } crep>hd sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.77em; } crep hd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: -webkit-fill-available; max-width: 277px; } crep>bl d cc input:hover { border: solid 1px var(--a); } crep hd cm { display: flex; align-items: center; } crep>bl sl>label { display: grid; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; color: var(--cr); } crep hd input:focus { border: solid 1px var(--bor); } crep bd svg { width: 13px; } crep hd t { font-size: 0.71em; color: var(--cg); display: flex; align-items: center; margin-top: 11px; } crep hd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 145px 28% 30% 24%; gap: 8px; } crep>bl sl input:focus { border-radius: 8px; border: solid 0px var(--bc); } crep>bl hd d { display: flex; align-items: center; gap: 65px; } crep>bl hd d>label { white-space: nowrap; align-items: center; display: block; font-size: 0.77em; } crep>bl hd sl select { border: solid 1px var(--bor); border-radius: 5px; width: -webkit-fill-available; padding: 7px; display: block; margin: unset; max-width: 295px; margin-top: 10px; font-size: 0.73em; background: var(--bt); font-weight: 100; } crep>bl hd sl select:hover { border: solid 1px var(--a); } crep hd sl>input:hover { border: solid 1px var(--a); } crep>bl select:focus { border: solid 1px var(--bor); } crep>bl hd cc { display: flex; align-items: center; width: -webkit-fill-available; } crep>bl> hd d>cc input { outline: 0; display: block; margin: 11px; border: solid 1px var(--bor); font-size: 0.67em; height: 30px; border-radius: 6px; position: relative; padding-left: 24px; max-width: 228px; margin-left: 13px; } crep hd mg sl input:hover { border: solid 1px var(--a); } crep>bl bd i { width: 18px; height: 18px; } crep hd mg sl input { height: 28px; } crep hd mg sl { display: grid; align-items: center; background: unset; height: max-content; grid-template-columns: 157px 13% 13% 13%; gap: unset; } crep hd gg { display: grid; grid-template-columns: 448px; } crep>bl bd div svg { fill: var(--c0); } crep>bl bd div i { width: 15px; position: absolute; padding-left: 7px; height: 15px; display: block; } crep hd div input { position: relative; padding-left: 28px; border: solid 1px var(--bor); height: 29px; font-size: 0.7em; border-radius: 5px; } crep bd div { display: flex; align-items: center; margin-left: 0; } crep hd sl>input:after { position: absolute; width: 22px; height: 22px; right: 0; top: 0; } crep hd sl>input:focus { border: solid 1px var(--aa); border-radius: 5px; box-shadow: 0 0 6px 0px var(--a); }crep hd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; } crep>bl bd input[type="text"] { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: auto; max-width: 277px; } crep bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 145px 28% 30% 24%; gap: 8px; } crep bd sl>textarea { min-width: 269px; min-height: 58px; } crep bd sl b { font-weight: 400; display: block; font-size: 0.77em; } crep>bl hd { margin-bottom: 50px; display: block; background: var(--b1); padding: 11px; } crep hr { max-width: 994px; display: block; border: solid 1px var(--b1); } crep form>div:nth-child(1) { background: var(--b); padding: 0px; } crep form> div lable { color: var(--cr); font-size: 0.88em; } crep form>div>sl>d c>i { height: 18px; width: 18px; fill: var(--b); display: block; } crep div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } crep form>div { display: grid; grid-template-columns: 102px auto; padding: 6px 22px; align-items: center; } crep>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} crep div c { display: flex; padding: 11px; background: var(--a); } crep form>div sl { align-items: center; display: flex; background: var(--b); } crep form>div b { font-weight: 400; font-size: 0.77em; } crep hd sl>input:after { content: ''; width: 16px; height: 15px; position: absolute; background: var(--b); top: 8px; left: 91%; bottom: 0; right: 0; } crep { padding: 0; margin: 0px; } @media(max-width:999px){ crep hd gg { display: grid; grid-template-columns: 100%; } crep hd sl { grid-template-columns: unset; border-radius: unset; } crep hd mg sl { grid-template-columns: auto; display: grid; gap: 12px; } crep>bl bd input[type="text"] { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; padding: 8px; height: auto; position: relative; width: -webkit-fill-available; max-width: none; } crep form>div { display: block; } crep hd sl>input { width: -webkit-fill-available; max-width: none; } crep { display: block; } crep>bl hd sl select { width: -webkit-fill-available; display: block; max-width: none; } crep bd sl>textarea { width: -webkit-fill-available; display: block; max-width: none; } crep bd sl { display: block; align-items: center; background: unset; height: auto; grid-template-columns: 145px 28% 30% 24%; gap: 8px; border-radius: unset; } crep bd sl>textarea { min-height: 58px; border: solid 1px var(--bor); border-radius: 7px; } } /* Coponent:Expenses_FileUpdate */ ceft { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bor); background-color: var(--b); width: 217px; border-radius: 10px; padding: 11px; margin: 11px; position: absolute; right: 15%; top: 11%; height: -webkit-fill-available; } ceft>bl hd dv b { display: block; font-weight: 400; font-size: 14px; } n ceft>bl hd dv { display: grid; justify-content: center; } ceft>bl hd div { display: flex; justify-content: center; } ceft>bl hd div i { height: 61px; display: flex; justify-content: center; width: 48px; } ceft:hover { border: 2px dotted var(--a); } ceft>bl bd>bg { border: dashed 1px var(--bor); width: fit-content; align-items: center; display: flex; padding: 0; margin: 0; justify-content: center; position: relative;} ceft>bl bd bg dv { display: flex ; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px;} ceft>bl bd bg>dv>i { height: 22px; width: 20px; opacity: 77%; } ceft bd > bg > i { display: flex; align-items: center; justify-content: end; height: 22px; width: 22px; font-weight: 400; } ceft>bl bd bg dv t { display: flex; white-space: nowrap; font-size: 0.77em; } ceft>bl bd { display: flex; justify-content: center; padding: 11px; margin: 11px; } ceft>bl hd dv t { font-size: 0.77em; color: var(--c0); opacity: 77; display: block; } ceft>bl input[type="file"] { position: absolute; inset: 0; width: -webkit-fill-available; opacity: 0; } ceft>bl hd dv { display: grid; justify-content: center; } @media(max-width:999px){ ceft {display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bor); background-color: var(--b); width: 254px; border-radius: 10px; padding: 11px; margin: 11px; position: unset;} } /* Coponent:Expenses_UploadFile */ @media(min-width:999px){ ceus { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bor); background-color: var(--b); border-radius: 10px; padding: 11px; margin: 11px; } } ceus>bl hd dv b { display: block; font-weight: 400; font-size: 14px; } n ceus>bl hd dv { display: grid; justify-content: center; } ceus>bl hd div { display: flex; justify-content: center; } ceus>bl hd div i { height: 61px; display: flex; justify-content: center; width: 48px; } ceus:hover { border: 2px dotted var(--a); } ceus>bl bd>bg { border: dashed 1px var(--bor); width: fit-content; align-items: center; display: flex; padding: 0; margin: 0; justify-content: center; position: relative;} ceus>bl bd bg dv { display: flex ; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px;} ceus>bl bd bg>dv>i { height: 22px; width: 20px; opacity: 77%; } ceus bd > bg > i { display: flex; align-items: center; justify-content: end; height: 22px; width: 22px; font-weight: 400; } ceus>bl bd bg dv t { display: flex; white-space: nowrap; font-size: 0.77em; } ceus>bl bd { display: flex; justify-content: center; padding: 11px; margin: 11px; } ceus>bl hd dv t { font-size: 0.77em; color: var(--c0); opacity: 77; display: block; } ceus>bl input[type="file"] { position: absolute; inset: 0; width: -webkit-fill-available; opacity: 0; } ceus>bl hd dv { display: grid; justify-content: center; } ceus { align-items: center; justify-content: center; background-color: var(--b); border-radius: 10px; margin: 11px; width: max-content; min-height: 177px; display: flex; height: -webkit-fill-available; max-height: 343px; } @media(max-width:999px){ ceus { display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bor); background-color: var(--b); border-radius: 10px; padding: 11px; margin: 11px; } } > /*component:-Expensess*/ esso bl { display: block; } esso>bl input[type="checkbox"]{ width: 13px; height: 13px; } esso bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } esso hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } esso bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} esso bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} esso bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} esso bd span { font-size: 12px; display: flex; width: 99px; } esso bd table td t { color: var(--br); font-size: 14px; } esso bd table tr td:nth-child(5) {justify-content: center;} esso bd table tr td:nth-child(6) {justify-content: end;} esso bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} esso bd table i { width: 26px; height: 19px; } esso td t d i { width: 30px; height: 12px; } esso bl hd table { background: var(--b1); } esso bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} esso bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } esso bd tbody>tr>th { color: var(--br); } esso bl hd table i { width: 26px; height: 19px; } esso bl>hd dv { display: flex ; align-items: center; } esso bd table th { height: unset; } esso table>thead { background: var(--b-t); } esso bd table tr>td:last-child { width: 0; padding: 0; } esso bd table tr>th:first-child {padding: 7px;width: 20px;} esso bd table th:nth-child(8) {text-align: end;} esso hd div { display: flex; justify-content: space-between; align-items: center; padding: 11px; margin-top: 31px; } esso hd div btn { display: flex; align-items: center; } esso hd div btns { display: flex; align-items: center; gap: 11px;} esso hd div btns btn { display: flex; align-items: center; background: var(--aa); border-radius: 3px; padding: 7px 11px; color: var(--b); font-size: 0.88em; position: relative; } esso hd div btns btn i svg { fill: var(--b); width: 19px; height: 19px; } esso hd div btn i svg { fill: var(--aa); } esso hd box { box-shadow: var(--bss); padding: 6px; align-items: center; background: var(--bc); position: relative; } esso hd box i { width: 20px; height: 20px; } esso hd div btn h2 { font-size: 0.88em; white-space: nowrap; } @media(max-width:999px){ esso>bl bd table { overflow: scroll; display: block; } esso>bl> hd table th { width: 137px; } } esso bd tbody>tr>th:first-child { width: 154px; display: block; } esso bl { display: block; } esso input { width: 13px; height: 13px; } esso bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } esso hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } esso bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } esso bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} esso bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} esso bd span { font-size: 12px; display: flex; width: 99px; } esso bd tbody td t { color: var(--br); font-size: 14px; } esso bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } esso bd tbody i { width: 26px; height: 19px; } esso td i { width: 30px; height: 12px; } esso>bl>bd dv { display: flex ; align-items: center; } esso bd table tr>td { font-size: 0.77em; } esso bd table tr>th:nth-child(2) { width: 20px; } esso bd table th:nth-child(8) { text-align: end; } esso bd table tr>td:nth-child(8) { text-align: end; } esso tr>td:nth-child(4)>a { color: var(--a); font-weight: 500; display: block; } cflo hd div i { width: 11px; display: block; height: 11px; } cflo hd b { display: flex; gap: 7px; margin-top: 17px; align-items: center; } cflo bd div sl { display: flex; align-items: center; background: unset; height: fit-content; overflow: unset; } cfls>bl>hd div { display: flex; align-items: center; justify-content: space-between; } cflo>bl hd b i { width: 33px; height: 27px; transform: rotate( 270deg); display: block; } cflo>bl bd sl i { height: 16px; width: 20px; display: block; position: absolute; transform: rotate( 70deg); } cflo>bl bd div input { outline: 0; display: block; color: var(--c); height: 32px; font-weight: 200; box-shadow: 0px 0px 2px 0px; border-radius: 2px; width: 100%; padding: 0 19px; margin: 1px; } cflo>bl ft div { display: block; align-items: center; } cflo>bl ft div dv { display: flex; align-items: center; gap: 10px; } cflo bd sl input:focus { box-shadow: 0px 0px 0px 2px; border-radius: 2px; } cflo>bl ft span i { height: 28px; width: 28px; display: block; transform: rotate( 269deg); } cflo>bl ft span { display: flex; align-items: center; gap: 7px; } cflo>bl bd div i svg { fill: var(--aa); } cflo>bl>bd { display: block; margin-top: 22px; } cflo>bl ft div { display: block; align-items: center; position: relative; bottom: 21px; } cflo>bl ft dv input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); font-weight: bold; padding: 0 12px; width: 18px; height: 25px; } cflo>bl hd b t { font-weight: 500; font-size: 14px; } cflo>bl hd b i svg { fill: var(--c0); } cflo>bl bd div { display: block; position: relative; bottom: 6px; } cflo>bl ft dv t { font-size: 14px; font-weight: 300; } cflo>bl input:focus { border: solid 0px var(--bc); } cflo>bl ft span i svg { fill: var(--c0); } cflo>bl ft span t { font-size: 14px; } cflo mg { display: block; height: 0px; overflow: hidden; transition: 333ms; } cflo mg.Amazon { height: 100%; } cfls hd div i { height: 22px; width: 21%; display: block; } cfls>bl { display: grid; max-width: -webkit-fill-available; padding: 11px; box-shadow: 0px 0px 5px 1px var(--aat); height: -webkit-fill-available; background: var(--b); width: 222px; margin-left: auto; } cfls ft btns btn:nth-child(1) { padding: 6px; box-shadow: 0px 0px 2px 0px; display: flex; width: 30%; justify-content: center; background: var(--a); color: var(--b); } cfls ft btns { display: flex; gap: 5px; align-items: center; font-size: 13px; margin-top: 13px; } cfls>bl ft btns btn { box-shadow: 0px 0px 2px 0px; padding: 5px; width: 22%; display: flex; justify-content: center; } cfls>bl>bd { display: grid; overflow: scroll; } @media(max-width:999px){ cfls>bl { width: 79%; max-width: 999px; padding: 11px; } } filter { border-radius: 4px; position: absolute; right: 0; top: 44px; opacity: 0; width: 333px; z-index: 99999; /* visibility: hidden; */ transition: 333ms; transform: scale(0); height: calc(-44px + 100vh); } .filter filter { visibility: visible; opacity: 1; transform: scale(1); backdrop-filter: blur(9px); width: 100%; } cftr>bl>hd>dv i { width: 56px; height: 45px; } cftr>bl>hd dv { display: flex ; justify-content: center; } cftr>bl>hd h4 { font-size: 17px; } cftr>bl>hd { width: max-content; padding: 11px; } cftr>bl>hd b { text-align: center; display: block; font-size: 17px; } cftr>bl>hd p { display: block; color: var(--a2); text-align: center; } cftr>bl>hd a { color: var(--a); font-weight: 400; margin-left: 11px; } cftr>bl>hd d i { width: 19px; } cftr>bl>hd dot { background: var(--aat); width: 8px; height: 8px; display: flex ; border-radius: 11px; justify-content: center; } cftr>bl>hd dots { display: flex ; align-items: center; gap: 4px; justify-content: center; } cftr>bl>hd dot:nth-child(1) { background: var(--a); width: 15px; height: 6px; } cftr>bl { display: grid ; padding: 11px; grid-template-columns: auto auto; background: var(--b); margin-bottom: 11px; border-top: 1px dashed var(--bc); } cftr>bl>bd { display: grid ; grid-template-columns: auto auto auto; } cftr>bl>bd t { font-size: 0.96em; color: var(--a2); } cftr>bl li { list-style: none; line-height: 46px; } cftr>bl>bd { display: grid ; grid-template-columns: auto auto auto; border-bottom: solid 1px var(--b-t); } cftr>bl>bd h4 { font-size: 15px; font-weight: 500; } cftr>bl>hd c { font-size: 0.7em; } cftr>bl>hd mg { display: flex ; justify-content: center; } cftr>bl>hd svg { fill: var(--a); } @media(max-width:999px){ cftr>bl>hd { width: auto; padding: 0; } cftr>bl { display: block; } cftr>bl>bd ul { padding: 8px; } cftr>bl>bd { display: grid ; grid-template-columns: auto auto; } }/* component :-Forgot_User */ /*Home_QuickAction*/ chmu dv>i { display: flex; align-items: center; justify-content: center; border-radius: 50%; background:var(--b1); height: 24px; width: 24px; padding: 18px; } chmu { display: none; background: var(--b); padding: 22px; border-radius: 11px; margin: 11px 0; border: solid 1px var(--b-t);align-items: center; justify-content: center; } chmu bl bd { display: flex; align-items: center; gap: 22px; } chmu bl>bd dv { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; position: relative; } chmu bl>bd dv t { font-size: 14px; font-weight: 500; } @media(max-width:999px){ chmu{display:grid;} } chmu dv:nth-child(2)>i { background: var(--b-t50); } chmu dv:nth-child(3)>i { background: var(--b-t); } chmu dv:nth-child(4)>i { background: var(--y2); } ciso>bl bd i { height: 38px; } /*component :-Infrastructur*/ clur>bl bd div i { height: 33px; display: block; } /* component:- Infrastructures*/ clne bd d { display: flex; gap: 41px; } @media(max-width:999px){ clne >bl>bd> d { display: block; } } /*component:Insights_Overview*/ cnow bl { padding: 11px; } cnow hd h2 { font-size: 25px; font-weight: 500; } cnow hd h4 { font-size: 23px; font-weight: 400; } cnow hd b { border: solid 1px var(--br); margin-left: 7px; margin-right: 7px; } cnow hd div { display: flex; margin-top: 29px; margin-left: 16px; } cnow bd div { background: var(--b1); border-radius: 5px; } cnow bd { padding-top: 11px; } cnow bd i { height: 129px; } cnow ft h3 { font-size: 14px; margin-top: 14px; margin-bottom: 6px; } cnow ft span { font-size: 13px; color: var(--br); } cnow ft p { color: var(--aa); margin-top: 2px; } cnow ft p { text-decoration: underline; } cnow { display: block; } /*Installed_Extensions*/ Installed_Extensions { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 333ms; height: 100%; right: -100%; overflow: hidden; visibility: hidden; top: 44px; } .Installed_Extensions Installed_Extensions { position: absolute; right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible; } mieo bd btn svg { fill: var(--a); } mieo bl { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available; padding: 11px; } mieo hd i { height: 17px; width: 17px; } mieo hd h4 { display: flex; align-items: center; justify-content: space-between; } mieo bd i { height: 70%; width: 70px; border: 2px solid var(--b1); } mieo bd b { font-size: 0.99em; font-weight: 500; } mieo bd { display: flex; gap: 12px; padding: 10px; flex-direction: column; } mieo bd p { margin-top: 5px; line-height: 19px; color: var(--c0); } mieo bd btn { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 10px; border-radius: 6px; font-size: 0.77em; color: var(--a); transition: 99ms; height: 10px; } mieo bd btn:hover {background: var(--a); color: var(--b);} mieo bd span { opacity: 0; } mieo bd btn i { height: 11px; width: 11px;} mieo bd span:hover { opacity: 1; color: var(--a); } mieo hd { display: block; padding: 19px 0; border-bottom: 1px solid var(--bc); } mieo btn.btn.t { position: relative; } .Instant_Help instant_help { right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible; } instant_help { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; overflow: hidden; visibility: hidden;} mipo { height: 100%; display: block; } mipo>bl { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: 100%; } mipo hd from svg { fill: var(--cr); } mipo bd h2 { font-size: 0.99em; font-weight: 500; display: flex; align-items: center; gap: 3px; border-bottom: 1px solid var(--bc); padding: 7px 11px; width: -webkit-fill-available; } mipo bd h2 i { height: 23px; width: 23px; transform: none; } mipo bd ul { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--b1); padding: 11px 17px; transition: 210ms; font-size: 13px; margin: 0; } mipo bd ul p { color: var(--c); font-size: 0.88em; } mipo bd ul:hover { background: var(--bc);} mipo bd i { height: 22px; width: 22px; transform: rotate( 270deg); } mipo bd h4 { font-size: 0.99em; font-weight: 400; padding: 14px 16px; border-bottom: 1px solid var(--bc); } mipo hd h4 { display: flex; align-items: center; font-size: 0.99em; font-weight: 400; } mipo hd from input { border: 1px solid var(--bor); border-radius: 7px; height: 34px; color: var(--c); } mipo hd i { height: 22px; width: 22px; } mipo>bl>hd { display: flex; border-bottom: 1px solid var(--bor); padding: 10px 7px; align-items: center; justify-content: space-between; } mipo hd from { display: flex; align-items: center; gap: 10px; } mipo ft>h2 { height: 0.77em; font-weight: 400; } mipo btn.btn.t { position: relative; } mipo bd li { list-style: none; line-height: 18px; } mipo ft i { height: 22px; width: 22px; } mipo ft svg { fill: var(--a); } mipo ft span { display: flex; align-items: center; margin: 20px; color: var(--a); font-weight: 500; } mipo bd .div { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--b1); padding: 11px 17px; transition: 210ms; font-size: 13px; margin: 0; } mipo bd div { display: none; } mipo bd .div:hover { background: var(--bc);} mipo ft cc svg { fill: var(--c); } mipo ft cc i { height: 20px; width: 20px; } mipo ft cc h2 { font-weight: 400; font-size: 1.00em; } mipo ft cc { display: flex; gap: 5px; align-items: center; position: absolute; bottom: 5%; padding: 11px; box-shadow: 0px 0px 4px -1px; width: 100%; height: 3%; } mipo ft cc btn { display: flex; border: 1px solid var(--b-t); padding: 11px; border-radius: 6px; position: absolute; left: 20%; } /* Component : Invoic_ActionNew */ ciaw>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} ciaw>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } ciaw>bl hd>btns { display: flex; gap: 11px; } ciaw>bl btns>btn.this { background: var(--aa); color: var(--b); } ciaw>bl bd>aa { font-size: 0.77em; color: var(--a); } ciaw bl { display: grid; gap: 14px; } /* component:-Invoice */ .Background cibk bl>bd { display: block; } cibk bl>bd { padding: 11px; display: none;} /*component:-InvoiceBackground*/ cibk { background: var(--b); height: fit-content; margin: 11px 0; border-top: solid 1px var(--bc); border-bottom: solid 1px var(--bc); display: block; padding: 11px; } cibk>bl hd div { display: flex ; align-items: center; justify-content: space-between; } cibk>bl hd div i { width: 21px; } cibk>bl hd h4 { font-size: 15px; font-weight: 500;} cibk>bl bd h4 { font-size: 14px; font-weight: 500; border-top: solid 1px var(--b-t); margin-top: -3px; padding: 7px; } cibk>bl bd i { width: 23px; height: 29px; } cibk>bl bd d { display: flex ; justify-content: center;margin-top: 11px; } cibk>bl bd a { color: var(--a); font-size: 0.9em; font-weight: 400;} cibk>bl bd c { padding: 0px 29px; margin: auto -16px; } cibk>bl bd span { font-size: 0.77em; } cibk>bl bd mg { border: dotted 2px var(--a);display: block;border-radius: 6px; text-align: center; border-color: var(--at); } cibk>bl bd b { font-weight: 400; margin-bottom: 0; display: block; } cibk>bl bd btn { background-color: var(--b2); border-radius: 53%; padding: 12px 15px; margin-right: 0; margin-top: 13px; } cibk>bl bd sl { display: block; align-items: center; background: unset; height: auto; overflow: unset; } cibk>bl bd label.btn { display: flex ; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; } cibk>bl bd sl input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 29px; margin-top: 8px; } cibk>bl bd div h4 { font-weight: 400; font-size: 0.77em;} /*InvoiceBill*/ cods { display: block; } cods tbody>tr>th { background: var(--b1); height: 9px; border-bottom: solid 1px var(--bor); padding: 5px; font-family: emoji; font-size: 0.66em; } cods td>name { font-size: 0.88em; color: var(--a); font-family: emoji; } cods tbody tr>td { padding: 0; padding-bottom: 6px; } cods tbody>tr:nth-child(2) { border-bottom: solid 1px var(--bor); } cods tr>td>t { color: var(--br); font-size: 0.77em; font-family: emoji; display: block; padding: 4px;padding-top: 11px; } cods tr>td>t:nth-child(2) { font-size: 0.88em; padding-top: unset;} /*InvoiceDate*/ qode { border-bottom: solid 1px var(--bor); display: grid; grid-template-columns: 50% 50%; } qode tbody>tr>td { font-size: 0.66em; font-family: auto; padding: 0; height: unset; font-weight: 700; } qode tbody { display: grid; padding: 11px; gap: 8px; border-right: solid 1px var(--bor); } qode tbody>tr { display: grid; grid-template-columns: 155px auto; } qode tbody>tr:hover { background: unset; } @media(max-width:999px){ qode tbody>tr {grid-template-columns: 111px auto; } } /*InvoiceDescription*/ cqdo thead>tr>th { height: 11px; border: solid 1px var(--bor); padding: 4px;text-align: end; } cqdo thead>tr:nth-child(1) { background: var(--b-t); } cqdo tr>td { height: 11px; border: solid 1px var(--bor); padding: 4px; font-size: 0.77em; font-family: emoji; text-align: end;font-weight: 500; } cqdo thead>tr>th:nth-child(1) { text-align: unset; } cqdo thead>tr>th:nth-child(2) { text-align: unset; } cqdo tbody >tr:hover { background: unset; } cqdo tbody >tr>td:nth-child(5) { border-right: 0; } cqdo thead >tr>th:nth-child(1) { border-left: 0; } cqdo thead >tr>th:nth-child(5) { border-right: 0; } cqdo tbody>tr>td:nth-child(2) { text-align: unset; } /*InvoiceDescription*/ cvdu thead>tr>th { height: 11px; padding: 4px;text-align: end; } cvdu thead>tr:nth-child(1) { background: var(--a1); color: var(--b); } cvdu tr>td { height: 11px; padding: 4px; font-size: 0.77em; font-family: emoji; font-weight: 500; } table tr { background: unset; border-bottom: solid 1px var(--c0); } cvdu thead >tr b { font-weight: 400; display: block; } cvdu thead>tr>th:nth-child(1) { text-align: unset; } cvdu thead>tr>th:nth-child(2) { text-align: unset; } cvdu tbody >tr:hover { background: unset; } cvdu tbody >tr>td:nth-child(5) { border-right: 0; } cvdu thead >tr>th:nth-child(1) { border-left: 0; } cvdu thead >tr>th:nth-child(5) { border-right: 0; } cvdu tbody>tr>td:nth-child(2) { text-align: unset; } @media(max-width:999px){ cvdu table { font-size: small; border-collapse: collapse; letter-spacing: unset; } } /*InvoiceDetail*/ cude>bl{ display: flex; align-items: end; justify-content: space-between; height: fit-content;border-bottom: solid 1px var(--bor); } cude hd table { width: fit-content; display: flex; } cude hd tr td dv { display: grid; } cude hd table td dv t { white-space: nowrap; caption-side: bottom; border-collapse: collapse; font-family: Ubuntu, 'WebFont-Ubuntu'; font-size: 8pt; color: var(--c1); line-height: 1.6; } cude hd table div span { font-weight: bold; font-size: 12pt; border-collapse: collapse; font-family: auto; } cude>bl>bd>dv { display: block; position: unset; overflow: unset; } cude bd dv h4 { font-size: 22pt; font-family: auto; font-weight: 400; } cude tbody>tr>td{ padding-left: 1rem; display: block; align-items: center; height: unset; } @media(max-width:999px){ cude hd dv h4 { font-size: 22px; } } /*InvoiceDetails*/ qiot { padding: 44px; display: block; background: var(--b); box-shadow: var(--bs-b); margin: 22px; position: relative; } qiot>bl { border: solid 1px var(--bor); } qiot>bl hd btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; } qiot>bl>hd>div { position: absolute; top: -5px; left: -5px; overflow: hidden; width: 95px; height: 98px; } qiot>bl>hd>div>span { text-align: center; color: #fff; top: 18px; left: -24px; width: 97px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: var(--green); justify-content: center; font-family: sans-serif; font-size: 0.77em; filter: grayscale(1); display: flex; } qiot hd div>span:before { content: ""; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 14px; transform: rotate(-45deg); left: -3px; border-left: 2px solid transparent; color: #2e8fda; } qiot hd div>span:after { content: ""; border-top: 5px solid transparent; border-left: 5px solid; border-left-color: inherit; border-right: 5px solid transparent; position: absolute; top: 20px; transform: rotate( 77deg); right: -1px; border-bottom: 3px solid transparent; color: #2e8fda; } qiot hm>cm>cc { display: grid; padding: 2px; } qiot >bl>ft { display: grid; grid-template-columns: 60% auto; } qiot hd>hm>btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; gap: 3px; padding: 0 6px; } qiot hm>btn>i { height: 13px; } qiot btn>i>svg { fill: var(--b); } qiot:hover { background: var(--b); } qiot:hover hd>hm{ display: block; } qiot hm>cm { background: var(--b); border-radius: 6px; align-items: center; font-size: 0.77em; position: absolute; right: 0; box-shadow: var(--bs-b); top: 34px; height: fit-content; display: none; gap: 11px; } qiot cm>cc>span:hover { background: var(--a); color: var(--b); } qiot cm>cc>span { padding: 7px; border-radius: 6px; position: relative; } .Template qiot hm>cm { display: grid; } qiot hd>hm{ display: none; } qiot hm>cm>b { padding: 8px 11px; padding-bottom: unset; } qiot cc>hr { width: 100%; border-style: groove; } @media(max-width:999px){ qiot { margin: unset;padding:11px;} qiot >bl>ft { grid-template-columns: auto; } } qiot tbody>tr:hover { background: unset; } /*InvoiceFont*/ cief { background: var(--b); margin: 11px 0; border-top: solid 1px var(--bc); border-bottom: solid 1px var(--bc); display: block; } cief bl>hd>div { display: flex; align-items: center; justify-content: space-between; border-bottom: solid 1px var(--bc); padding: 11px; } cief hd>div>i { width: 20px; } .Font cief bl>bd { display: block; } cief bl>bd { padding: 11px; display: none; } cief form>sl { display: block; align-items: center; background: unset; height: auto; overflow: unset; } cief sl>c>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: max-content; margin-top: 8px; border-radius: 6px 0px 0px 6px; PADDING:7PX 0PX; padding-left: 9px; } cief sl>p { font-size: 0.77em; margin: 4px 0; } cief { background: var(--b); height: fit-content; margin: 11px 0; border-top: solid 1px var(--bc); border-bottom: solid 1px var(--bc); } cief sl>c { display: flex; } cief sl>c>d>input[type="color"] { height: 38px; width: 38px; margin-top: 4px; PADDING: 0;} cief sl>c>d>input:focus { box-shadow: unset; border: unset; } cief form>div>sl { display: block; align-items: center; background: unset; height: auto; overflow: unset;transition: 99ms; } cief form>div { display: flex; gap: 11px; } cief sl input:focus { box-shadow: unset; border: solid 1px var(--a); border-radius: 5px 0px 0px 5px; } cief sl>c>d { display: block; margin: 0; padding: 0; position: absolute; right: 0; } cief c>btn { display: flex; background: var(--bc); margin: 8px 0; align-items: center; justify-content: center; font-size: 14px; border-radius: 0px 5px 5px 2px; border: solid 1px var(--bor); border-left: 0; padding: 5px 7px; } cief form>sl:NTH-CHILD(1) input { WIDTH: -webkit-fill-available; } cief sl>lable { font-size: 0.74em; } /* component:InvoiceHistories*/ cihr>bl { display: block; border: 1px solid var(--bc); } cihr>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} cihr hd h4 svg { fill: var(--a); } cihr hd dv i { height: 22px; width: 22px; position: unset; } cihr hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } cihr hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } cihr hd dv i svg:nth-child(1) { fill: var(--b); } cihr hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } cihr hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } cihr hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } cihr hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } /*component:-InvoiceHistory*/ cicy>bl>bd { display: block; padding: 13px 16px 2px; background: var(--b1); } cicy bd t i { height: 14px; width: 14px; } cicy>bl>bd:hover { background: var(--bc); } cicy bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } cicy bd name { display: flex; align-items: center; gap: 4px; } cicy bd rs { position: absolute; right: 11px; font-size: 0.99em; font-weight: 500; } cicy bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } cicy bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } cicy bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } cicy bd t { margin: 8px 0px; font-size: 0.8em; display: flex ; align-items: center; gap: 11px; color: var(--green); } cicy>bl>bd c { color: var(--green); } cicy>bl>bd i { width: 13px; } cicy>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } cicy>bl>bd b { font-size: 0.77em; font-weight: 400; color: var(--c2); } cicy>bl>bd { display: block;background: var(--b1); } cicy bd div span { color: var(--a1); font-size: 0.77em; margin: 3px 3px 1px 0px; display: flex ; align-items: center; } cicy>bl>bd c { width: 0; height: 0; border: solid 2px; border-radius: 11px; color: var(--c0); } /*QuoteInformation*/ cifs hd>cc>h2 { font-size: 19px; font-weight: 500; } cifs hd>cc { display: flex; justify-content: space-between; padding: 10px 14px; align-items: center; margin: 11px 0; } cifs btns>btn>i { height: 15px; width: 19px; } cifs cc>btns>btn { border: 1px solid var(--bor); display: grid; padding: 5px 5px; border-radius: 4px; align-items: center; justify-content: center; position: relative; background: var(--b1); } cifs hd>cc>btns { display: flex; gap: 8px; align-items: center; justify-content: center; } cifs c>i>svg { fill: var(--cr); border-left: solid 1px var(--bor); } cifs bd>d{max-width: 793px;margin:auto;} cifs cc>c>i { height: 19px; width: 19px; } cifs d>ss>i { height: 15px; width: 15px; } cifs d>ss { padding: 5px; display: flex; width: fit-content; font-size: 0.88em; margin: 6px; border-radius: 3px; align-items: center; gap: 5px; } cifs hd>mg { display: flex; background: var(--b1); border-top: solid 1px var(--c0); border-bottom: solid 1px var(--c0); align-items: center; flex-wrap: wrap; gap: 11px; } cifs d>ss:hover { background: var(--b); box-shadow: 0px 0px 0px 1px var(--bor); } cifs mg>d::after { content: ''; height: 16px; width: 1px; background: var(--bor); display: block; position: absolute; top: 10px; bottom: 0; right: 0; left: -7px; } cifs mg>d { position: relative; } cifs mg>d:nth-child(1)::after { content: ''; background: unset; } cifs d>hh>c { position: absolute; padding: 4px; z-index: 9999999; display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 6px; width: max-content; gap: 3px; } cifs m>i>svg { fill: var(--b); } cifs c>m>i { height: 14px; width: 14px; } .Send ctnf d>hh>c {display: grid; } cifs hh>c>m { display: flex; align-items: center; background: var(--a); padding: 8px; gap: 9px; border-radius: 4px; } cifs m>t{font-size: 0.88em;color:var(--b);} .PDF ctnf d>hh>c {display: grid; } @media(max-width:999px){ cifs>bl>bd>d { padding: 7px; } cifs { padding: 11px 0; display: block; } cifs hd>cc { display: flex ; justify-content: space-between; padding: 10px 14px; align-items: center; margin: 11px 0; max-height: 333px; } } cvim bl>hd { display: flex ; justify-content: center; margin-bottom: 33px; } /*More_Information*/ cmin { display: block; padding: 11px 19px; } cmin div>aa { color: var(--a); font-size: 0.88em; } cmin div>c {font-size: 0.88em; } cmin div>t { font-size: 0.88em; } cmin bl>hd { display: flex; justify-content: end; margin-bottom: 33px; } cmin d>c { font-size: 0.88em; color: var(--cbg1); margin: 25px 0px; display: block; } cmin bd>d>name { font-weight: 400; display: block; font-size: 0.88em; } cmin bd>d {display: grid;align-items: center;font-size: 0.88em;grid-template-columns: 155px auto;} cmin>bl bd d dvv { font-weight: 400; display: block; } cmin d>btn>i { height: 12px; width: 12px; margin: 0 2px; } cmin>bl bd d dvv t { font-weight: 400; } cmin>bl bd d dvv tt { color: var(--br); font-weight: 600; } cmin>bl bd dd>c { font-size: 0.88em; display: block; font-weight: 400; } cmin>bl bd d dvv { font-weight: 400; display: block; text-align: center; } cmin>bl bd dd { display: grid; grid-template-columns: 37% auto; justify-content: end; margin: 0; } cmin bd>d>btn {display: flex;align-items: center;} cmin d>btn>t { font-size: 0.88em; color: var(--cbg1); margin: 17px 0px; display: block; } @media(max-width:999px){ cmin bl>hd { display: flex ; justify-content: center; margin-bottom: 33px; }} /*InvoiceMore*/ cvvm dv>t { font-size: 0.66em; display: block; margin: 11px; font-family: emoji; margin-bottom: 0; } cvvm dv>b { font-size: 0.66em; display: block; font-family: emoji; margin: 4px 11px; font-style: italic; margin-bottom: 25px; } cvvm dv:nth-child(2)>t { margin-bottom: 15px; } cvvm dv:nth-child(3)>b { margin-bottom: 11px; } @media(max-width:999px){ cvvm dv:nth-child(2)>t { margin: 5px 11px; } cvvm dv>b { margin-bottom: 11px; } } /*InvoiceNew*/ civn form>div:nth-child(1){ background: var(--bg); padding: 22px;} civn form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } civn { display: grid; margin-bottom: 22px; } civn form>div>sl>d c>i { height: 18px; width: 18px; } civn div>sl>d c { display: flex; align-items: center; } civn form> div lable { color: var(--cr); font-size: 0.88em; } civn div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } civn form>div>sl>d c>i:nth-child(2) { display: flex; align-items: center; background: var(--a); padding: 8px; border-radius: 0 0 0 0; } civn form>div>sl>d c>i:nth-child(2) svg { fill: var(--b); } civn div>sl>d t { opacity: 68%; font-size: 0.88em; } civn form>div:nth-child(1) sl { width: auto; max-width: unset; } civn form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } civn sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } civn sl>f c { position: absolute; right: 0; } civn c>btn>i { height: 15px; width: 15px; padding: 11px; } civn c>btn>i>svg { fill: var(--a); } civn form>div:nth-child(3) lable { color: var(--br); } civn form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } civn sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } civn form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } civn>bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } civn>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} civn>bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } civn sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } civn cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } civn form>dv>cm>sl:nth-child(3) { grid-template-columns: 166px max-content; } civn>bl hr { color: var(--bor); opacity: 9%; } civn div>t { font-size: 0.88em; display: flex; gap: 4px; padding: 14px 0; align-items: center; } civn bl>bd>form>dv { display: block; max-width: max-content; } civn form>div:nth-child(6) sl>f input { background: var(--bt); } civnn form>div:nth-child(6) sl { display: grid; } civn form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } civnn t>i { height: 12px; width: 12px; } civn form>div:nth-child(7)>sl { display: grid; } civn bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } civn bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } civn bd form btns i svg { fill: var(--b); display: block; } @media(max-width:1295px){ civn>bl cm { grid-template-columns: auto; padding: 0 22px; } civn>bl cm>t { text-align: unset; padding: 11px 0; } civn form>div { grid-template-columns: auto; } civn form>dv>cm>sl { grid-template-columns: auto; } civn sl>f { width: -webkit-fill-available; max-width: unset; } civn form>div>sl { width: -webkit-fill-available; max-width: unset; } civn form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } civn>bl cm>sl>lable {padding:11px 0;} civn>bl cm>sl>t{padding: 11px 0; } civn>bl cm>sl>t { text-align: unset; } } civn f>c>i { height: 18px; width: 18px; opacity: 77%; } @media(max-width:999px){ civn{margin:0px;} civn bl>bd>form>dv { max-width: unset; } civn form>dv>cm>sl:nth-child(3) { display: block; } civn>bl cm { grid-template-columns: auto; padding: 0 22px; padding: 7px; } civn form>div { grid-template-columns: auto; padding: 7px; } civn form>div:nth-child(1) { padding: 7px; } civn sl>f input{padding: 10px 0;} } quon sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} /*component: InvoiceProperties*/ cnps bl>hd>div { display: flex; align-items: center; justify-content: space-between; border-bottom: solid 1px var(--bc); padding: 11px; } cnps hd>div>i{ width: 20px; } cnps bd>dv {padding: 11px;display: block;} cnps dv>sl { display: block; align-items: center; background: unset; height: auto; overflow: unset; } cnps dv>sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 29px; margin-top: 8px; } .Name cnps bl>bd { display: block; } cnps bl>bd{display: none;} cnps sl input:focus { border-radius: 5px; box-shadow: inset 0 0 0 1px var(--aa); } cnps bd label.btn { display: flex ; align-items: center; position: unset; font-size: 0.7em; font-weight: 400; color: var(--cr); } cnps label.btn:after { content: '*'; top: 0; position: relative; } cnps dv>cc>cm { font-size: 0.77em; } cnps>bl bd d { display: flex ; align-items: center; gap: 11px; } cnps cc>d>mg{ display: flex; align-items: center; gap: 3px; font-size: 0.77em; } cnps bd>d>input { width: 14px; height: 14px; margin: 0; } cnps bd>dv>t { font-size: 0.77em; margin: 0 11px; } cnps bd>dv>m { display: flex; padding: 0 11px; gap: 11px; margin-top: 11px; font-size: 0.77em; } cnps dv>m>c { display: grid; } cnps m>c>btn { border: solid 1px var(--bor); padding: 7px; margin: 11px 0; width: 55px; text-align: end; border-radius: 5px; } cnps bd>dv:nth-child(2) { padding: 0; } cnps { background: var(--b); margin: 11px 0; border-top: solid 1px var(--bc); border-bottom: solid 1px var(--bc); display: block; } /*InvoiceTax*/ cict { padding: 44px; display: block; background: var(--b); box-shadow: var(--bs-b); margin: 22px; position: relative; } cict>bl { border: solid 1px var(--bor); } cict>bl hd btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; } cict>bl>hd>div { position: absolute; top: -5px; left: -5px; overflow: hidden; width: 95px; height: 98px; } cict>bl>hd>div>span { text-align: center; color: #fff; top: 18px; left: -24px; width: 97px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: var(--green); justify-content: center; font-family: sans-serif; font-size: 0.77em; filter: grayscale(1); display: flex; } cict hd div>span:before { content: ""; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 14px; transform: rotate(-45deg); left: -3px; border-left: 2px solid transparent; color: #2e8fda; } cict hd div>span:after { content: ""; border-top: 5px solid transparent; border-left: 5px solid; border-left-color: inherit; border-right: 5px solid transparent; position: absolute; top: 20px; transform: rotate( 77deg); right: -1px; border-bottom: 3px solid transparent; color: #2e8fda; } cict hm>cm>cc { display: grid; padding: 2px; } cict >bl>ft { display: grid; grid-template-columns: 60% auto; } cict hd>hm>btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; gap: 3px; padding: 0 6px; } cict hm>btn>i { height: 13px; } cict btn>i>svg { fill: var(--b); } cict:hover { background: var(--b); } cict:hover hd>hm{ display: block; } cict hm>cm { background: var(--b); border-radius: 6px; align-items: center; font-size: 0.77em; position: absolute; right: 0; box-shadow: var(--bs-b); top: 34px; height: fit-content; display: none; gap: 11px; } cict cm>cc>span:hover { background: var(--a); color: var(--b); } cict cm>cc>span { padding: 7px; border-radius: 6px; position: relative; } .Template qiot hm>cm { display: grid; } cict hd>hm{ display: none; } cict hm>cm>b { padding: 8px 11px; padding-bottom: unset; } cict cc>hr { width: 100%; border-style: groove; } @media(max-width:999px){ cict { margin: unset;padding:11px;} cict >bl>ft { grid-template-columns: auto; } } cict>bl>hd>div>span { text-align: center; color: #fff; top: 18px; left: -30px; width: 97px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: var(--green); justify-content: center; font-family: sans-serif; font-size: 0.77em; filter: grayscale(1); display: flex ; } cict tbody>tr:hover { background: unset; } /*InvoiceUpadate */ ciuo { display: block; } ciuo>bl>hd{ padding: 11px; display: flex; background: var(--b); border: solid 1px var(--bt);justify-content: space-between; gap: 11px; } ciuo hd div { display: flex; align-items: center; gap: 11px; } ciuo hd dv { display: flex; align-items: center; position: relative; padding: 8px; } ciuo bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; font-weight: 400; } ciuo hd dv { display: flex; align-items: center; } ciuo hd dv i { height: 14px; margin-right: 5px; width: 14px; } ciuo hd d label { position: relative; display: flex; width: 37px; height: 15px; } ciuo hd d label input { opacity: 0; width: 0; height: 0; } ciuo hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } ciuo bl hd t { font-size: 0.88em; } ciuo hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } ciuo hd d label input:checked + span { background-color: var(--aa); } ciuo hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } ciuo bl hd>h2 { font-weight: 400; font-size: 1.44em; } ciuo hd>i { display: flex; height: 24px; width: 24px; } ciuo hd>btn>t { font-size: 0.88em; } ciuo hd dv i svg.icon.icon-sm.me-1.align-text-top.fill-grey { fill: var(--c0); } ciuo hd dv span { font-size: 12px; font-weight: 500; } ciuo hd dv:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 1px; border-radius: 6px; background: var(--lgb); -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-origin: content-box, padding-box; -webkit-mask-clip: content-box, padding-box; -webkit-mask-composite: destination-out; } ciuo>bl>hd>d>i { display: flex; height: 14px; width: 14px; white-space: nowrap; margin-left: 12px; } ciuo hd d { display: flex; align-items: center; gap: 11px;} ciuo hd d t { display: flex; border: solid 1px var(--c0); height: 30px; } @media(max-width:999px){ ciuo>bl>hd{ padding: 22px; display: grid; background: var(--b); border: solid 1px var(--bt);justify-content: space-between; gap: 11px; } ciuo bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; font-size:18px;} } /*component:-InvoiceUpgrade*/ cide hd i { width: 22px; height: 22px; } cide bd h4 { font-size: 0.99em; font-weight: 500; } cide>bl>hd { display: flex; justify-content: center; } cide hd btn { width: 44px; height: 44px; background: var(--b-t52); border-radius: 22px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } cide bd p { color: var(--cg); font-size: 0.81em; line-height: 20px; } cide { border-right: solid 1px var(--b-t); border-bottom: solid 1px var(--b-t); } cide>bl { padding: 31px; padding-top: 30px; padding-bottom: 30px; } cide:nth-child(3), cide:nth-child(6) { border-right: 0; } cide>bl svg { fill: var(--green); } @media(max-width:999px){ } /*InvoiceWords*/ cuwo dv>t { font-size: 0.66em; display: block; margin: 11px; font-family: emoji; margin-bottom: 0; } cuwo dv>b { font-size: 0.66em; display: block; font-family: emoji; margin: 4px 11px; font-style: italic; margin-bottom: 25px; } cuwo dv:nth-child(2)>t { margin-bottom: 15px; } cuwo dv:nth-child(3)>b { margin-bottom: 11px; } @media(max-width:999px){ cuwo dv:nth-child(2)>t { margin: 5px 11px; } cuwo dv>b { margin-bottom: 11px; } }ciao { display: block;} ciao hd table tr td dv { display: flex; justify-content: space-between; font-weight: 400; font-family: Ubuntu, 'WebFont-Ubuntu'; font-size: 8pt; } ciao hd table tbody tr th { background: #f2f3f4; height: 9px; border-top: solid 1px; border-bottom: solid 1px; } ciao hd table tbody tr th:nth-child(1) { border-right: solid 1px; } ciao hd table tr td { border-bottom: solid 1px; white-space: pre-wrap; line-height: 7px; font-family: Ubuntu, 'WebFont-Ubuntu'; font-size: 8pt; } ciao hd table tr td { border-bottom: solid 1px; white-space: pre-wrap; line-height: 7px; font-family: Ubuntu, 'WebFont-Ubuntu'; font-size: 8pt; } ciao hd table tr td:nth-child(1) { border-right: solid 1px; } /*Invoice_AddressUpdate*/ ciute { display: block; } ciute tbody>tr>th { background: var(--b1); height: 9px; padding: 5px; font-family: emoji; font-size: 0.66em; } ciute td>name { font-size: 0.88em; color: var(--a); font-family: emoji; } ciute tbody tr>td { padding: 0; padding-bottom: 6px; } ciute tr>td>t { color: var(--br); font-size: 0.77em; font-family: emoji; display: block; padding: 4px;padding-top: 11px; } ciute tr>td>t:nth-child(2) { font-size: 0.88em; padding-top: unset;} /*Invoice_Apps*/ cias { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available; } .Invoice_Apps invoice_apps { right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible;} invoice_apps { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; overflow: hidden; visibility: hidden;} cias bd h2 { display: flex; font-size: 0.88em; font-weight: 400; color: var(--bor); margin-top: 15px; position: sticky; top: -1px; background: var(--b); z-index: 999; padding: 10px 0; } cias bd b { font-weight: 500; font-size: 0.99em; display: flex; position: sticky; top: 4px; z-index: 999999; background: var(--b); padding: 10px 0px; } cias bd b i { height: 22px; width: 22px; } cias bd b i svg { fill: var(--a); } cias hd i { height: 16px; width: 16px; } cias>bl>bd { display: block; overflow-y: scroll; max-height: calc(100vh - 11vh); } cias hd dv { display: flex; gap: 3px; align-items: center; justify-content: center; } cias hd h4 { display: flex; align-items: center; justify-content: space-between; font-size: 0.99em; font-weight: 400; } cias>bl>hd { display: block; border-bottom: 1px solid var(--b1); padding: 0 3px 15px; } cias>bl { display: block; border: solid 1px var(--bc); margin: 0px 0; position: relative; background: var(--b); padding: 7px 13px; } /*Invoice_Busines*/ cibo>bl>bd { display: grid; grid-template-columns: auto auto auto auto; gap: 2px; padding: 10px 0; } cibo bd div i { height: 29px; width: 50px; } cibo bd div:hover { background: var(--b1); transform: scale(1.1); } cibo bd span { font-size: 0.88em; font-weight: 400; } cibo bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_Collaboration*/ cire>bl>bd { display: grid; grid-template-columns: auto auto auto auto; gap: 12px; padding: 10px 0; } cire bd div i { height: 30px; width: 30px; } cire bd div:hover { background: var(--b1); transform: scale(1.1); } cire bd span { font-size: 0.88em; font-weight: 400; } cire bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_Description*/ cidn tr>td { height: 11px; border: solid 1px var(--bor); padding: 4px; } cidn thead>tr:nth-child(1) { background: var(--b-t); } cidn tr>td { height: 11px; border: solid 1px var(--bor); padding: 4px; font-size: 0.77em; font-family: emoji; } cidn tbody >tr>td { padding: 10px; padding-top: 6px; text-align: end; border-left: unset;border-bottom: unset; } cidn tbody >tr>td:nth-child(1) { text-align: unset; } cidn tbody >tr>td:nth-child(2) { text-align: unset; } cidn tbody >tr:hover { background: unset; } cidn tr>td:Nth-child(1) { width: 11px; } cidn tbody >tr>td:nth-child(5) { border-right: 0; } cidn thead >tr>td:nth-child(1) { border-left: 0; } cidn thead >tr>td:nth-child(5) { border-right: 0; } /*QuoteNew*/ cidu form>div:nth-child(1){ background: var(--bg); padding: 22px;} cidu form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } cidu { display: grid; margin-bottom: 22px; } cidu form> div lable { color: var(--cr); font-size: 0.88em; } cidu div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } cidu div>sl>d t { opacity: 68%; font-size: 0.88em; } cidu form>div:nth-child(1) sl { width: 590px; max-width: unset; } cidu form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } cidu sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; max-width: 376px; }cidu sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; max-width: 376px; } cidu c>btn>i { height: 15px; width: 15px; padding: 11px; } cidu c>btn>i>svg { fill: var(--a); } cidu form>div>sl>c { display: flex; align-items: center; width: 37px; background: var(--a); border-top-right-radius: 8px; border-bottom-right-radius: 8px; justify-content: center; } cidu form>div>sl>c>i:nth-child(2) { height: 15px; width: 15px; } cidu form>div>sl>c>i:nth-child(2) svg { fill: var(--b); } cidu form>div:nth-child(3) lable { color: var(--br); } cidu form>div>sl>c>i:nth-child(1) { position: absolute; width: 21px; height: 21px; right: 45px; filter: contrast(0.5); } cidu form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } cidu sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } cidu form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } cidu>bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } cidu>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} cidu>bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } cidu sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } cidu cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } cidu bd div>sl>input:focus { border-radius: 5px; box-shadow: 0px 0px 2px 2px var(--a); border: 1px solid var(--a); } cidu bd div>sl>input { border: 1px solid var(--bc); width: 525px; height: 35px; border-radius: 6px; } cidu>bl hr { color: var(--bor); opacity: 9%; } cidu div>t { font-size: 0.88em; display: flex; gap: 4px; padding: 14px 0; align-items: center; } cidu bl>bd>form>dv { display: block;} cidu form>div:nth-child(6) sl>f input { background: var(--bt); } cidu form>div:nth-child(6) sl { display: grid; } cidu form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } cidu t>i { height: 12px; width: 12px; } cidu form>div:nth-child(7)>sl { display: grid; } cidu bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } cidu bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } cidu bd form btns i svg { fill: var(--b); display: block; } @media(max-width:1295px){ cidu>bl cm { grid-template-columns: auto; padding: 0 22px; } cidu>bl cm>t { text-align: unset; padding: 11px 0; } cidu form>div { grid-template-columns: auto; } cidu form>dv>cm>sl { grid-template-columns: auto; } cidu sl>f { width: -webkit-fill-available; max-width: unset; } cidu form>div>sl { width: -webkit-fill-available; max-width: unset; } cidu form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } cidu>bl cm>sl>lable {padding:11px 0;} cidu>bl cm>sl>t{padding: 11px 0; } cidu>bl cm>sl>t { text-align: unset; } } cidu f>c>i { height: 18px; width: 18px; opacity: 77%; } @media(max-width:999px){ cidu{margin:0px;} cidu>bl cm { grid-template-columns: auto; padding: 0 22px; padding: 7px; } cidu form>div { grid-template-columns: auto; padding: 0px; } cidu form>div:nth-child(1) { padding: 7px; } } cidu sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} /*Invoice_Finance*/ mifo bd i { width: 50px; height: 50px; } mifo>bl>bd { display: flex; gap: 6px; align-items: center; padding: 8px 7px; border: 1px solid var(--bc); border-radius: 10px; background: var(--b1); margin: 13px 0; } mifo bd span { font-size: 0.99em; font-weight: 400; } mifo>bl>hd>h4 { opacity: 37%; font-size: 0.77em; } mifo bd div p { font-size: 12px; margin: 0 0px 7px 0px; color: var(--c0); position: relative; bottom: 8px; } mifo bd div { display: flex; flex-direction: column; line-height: 2; }cife hd h2 { font-weight: 400; font-size: 1.3rem; text-align: center; margin-bottom: 10px; display: block; padding-top: 16px; } cife hd i { margin-top: 25px; } cife bd f i { height: 25px; width: 25px; display: flex; justify-content: center; } cife bd div span { font-size: 16px; font-weight: 400; margin-top: 10px; display: block; margin-bottom: 10px; line-height: 1.1; } cife bd f { display: flex; align-items: center; justify-content: center; } cife bd div {text-align: center; } cife bd div a { font-size: 13px; color: var(--aa); } cife bd d f i svg#Layer_1 { fill: #35b535; } cife bd { display: flex; align-items: center; justify-content: center; gap: 10%; padding-bottom: 146px; } /* Comonent:Invoice_Dashboard */ cidc { display: none; } .Setp3 cidc { display: block; } @media(max-width:999px){ cidc>bl>bd i { max-width: 361px; } } /*Invoice_Help*/ miho>bl>bd { display: grid; grid-template-columns: auto auto auto auto; gap: 12px; padding: 10px 0; } miho bd div i { height: 29px; width: 50px; } miho bd div:hover { background: var(--b1); transform: scale(1.1); } miho bd span { font-size: 0.88em; font-weight: 400; } miho bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_Marketing*/ cimo>bl>bd { display: grid; grid-template-columns: auto auto auto auto; gap: 12px; padding: 10px 0; } cimo bd div i { height: 29px; width: 50px; } cimo bd div:hover { background: var(--b1); transform: scale(1.1); } cimo bd span { font-size: 0.88em; font-weight: 400; } cimo bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_NoteNew*/ csnf >bl { display: grid; justify-content: space-between; height: -webkit-fill-available; grid-template-columns: 50% 50%; padding: 13px; } csnf btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } csnf hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } csnf btn>c>i { height: 14px; width: 14px; background: var(--aa); } csnf c>i>svg { fill: var(--b); } csnf hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } csnf bl>hd { display: flex; align-items: center; } csnf hd>btn:nth-child(2)>c { border-radius: 6px; } csnf ft>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} csnf ft textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} csnf ft dv p { font-size: 0.77em; margin: 0 4px; color: var(--cbg1); } csnf bl>bd { padding: 11px;padding-top: 0;} csnf ft dv btn c { display: flex; gap: 7px; align-items: center; } csnf ft dv btn { display: flex; margin-top: 15px; background: var(--b1); border-radius: 6px; width: fit-content; padding: 9px; font-size: 15px; } csnf bd div f { display: flex; justify-content: space-between; border-bottom: solid 1px var(--bc); padding: 8px; } csnf bd div d { display: flex; align-items: center; justify-content: end; } csnf bd div d i svg { fill: var(--aa); margin-top: 6px; } csnf bd div f span { color: var(--cbg1); font-weight: 500; } csnf>bl>bd>div>d>span { font-size: 14px; color: var(--aa); display: flex; justify-content: end; padding-top: 3px; } csnf bd div d i { width: 25px; height: 25px; } @media(max-width:999px){ csnf ft textarea { width: -webkit-fill-available; } csnf bl>ft { padding-top: 0; margin: 11px 0; } csnf >bl { display: block; height: -webkit-fill-available; } } /*Customer_Notes1*/ cinu >bl { display: grid; justify-content: space-between; height: -webkit-fill-available; grid-template-columns: 50% 50%; padding: 11px; margin: 9px; } cinu btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } cinu hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } cinu btn>c>i { height: 13px; width: 13px; background: var(--a); } cinu c>i>svg { fill: var(--b); } cinu hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } cinu bl>hd { display: flex; align-items: center; } cinu hd>btn:nth-child(2)>c { border-radius: 6px; } cinu ft>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} cinu ft textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} cinu ft dv p { font-size: 12px; line-height: 1.3; font-weight: 300; color: var(--c0); } cinu bl>bd { padding: 11px;padding-top: 0;} cinu ft dv btn c { display: flex; gap: 7px;} cinu bd div d { display: flex; align-items: center; justify-content: end; } cinu bd div d i svg { fill: var(--aa); margin-top: 6px; } cinu bd div f span { color: var(--cbg1); font-weight: 400; } cinu>bl>bd>div>d>span { font-size: 14px; color: var(--aa); font-weight: 500; display: flex; justify-content: end; padding-top: 10px; } cinu bd div d i { height: 30px; width: fit-content; } cinu bd div f { display: flex; justify-content: space-between; border-bottom: solid 2px var(--bc); padding: 8px; } cinu ft dv btn { display: flex; margin-top: 15px; background: var(--b1); border-radius: 6px; width: fit-content; padding: 9px; font-size: 12px; } @media(max-width:999px){ cinu ft textarea { width: -webkit-fill-available; } cinu bl>ft { padding-top: 0; margin: 11px 0; } cinu >bl { display: block; height: -webkit-fill-available; } } /* Component:invoice_payment */ cipn bd i svg { background: var(--a); } cipn { display: none; } .Setp2 cipn { display: block; } @media(max-width:999px){ cipn>bl>bd dv { display: flex ; justify-content: center; } cipn i { width: 360px; } } /*Invoice_Resources*/ miro>bl>bd { display: grid; grid-template-columns: auto auto 50%; gap: 2px; padding: 10px 0; } miro bd div i { height: 29px; width: 50px; } miro bd div:hover { background: var(--b1); transform: scale(1.1); } miro bd span { font-size: 0.88em; font-weight: 400; } miro bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_Sales*/ miso>bl>bd { display: grid; grid-template-columns: auto auto auto auto; gap: 12px; padding: 10px 0; } miso bd div i { height: 29px; width: 50px; } miso bd div:hover { background: var(--b1); transform: scale(1.1); } miso bd span { font-size: 0.88em; font-weight: 400; } miso bd div { display: flex; flex-direction: column; line-height: 30px; align-items: center; justify-content: center; padding: 11px; border-radius: 9px; transition: 210ms; } /*Invoice_Start*/ cism bl hd i { height: 33px; width: 33px; } cism>bl>hd { background: var(--c1); padding: 11px; display: flex; align-items: center;position:relative; } cism bl { display: block; box-shadow: 0px 0px 1px 0px; position: relative; background: var(--c2); color: var(--b); height: 100%; } cism bd div { display: block; line-height: 2;} cism bd span { display: flex; align-items: center; gap: 7px; position: relative; transition: background-color .3s ease; margin: 11px; padding-left: 17px; border-radius: 7px; height: 30px;} cism bd i:nth-child(2){ width: 14px ; filter: invert(1); } cism bd img { max-width: 100%; max-height: 100%; } cism bd t { display: flex; align-items: center; padding-left: 18px; } cism bd t i { transform: rotate(87deg); } cism bd a { color: var(--b); text-decoration: unset; font-weight: normal; } cism bd i:nth-child(4) { height: 16px; width: 16px; transition: background-color .3s ease; } cism bd b { font-weight: 400; font-size: 0.88em; line-height: 1; display: block; padding: 6px; } cism bd span:active { background: var(--c0); } cism>bl>bd { display: block; overflow: auto; max-height: 96vh; } cism bd span:focus { background: var(--a); } cism>bl>bd dv { display: block; padding: 11px; border: solid 1px var(--cg); margin: 11px; border-radius: 7px; background: var(--cbg); position: relative; } cism bd>dv f i { height: 16px; width: 16px; filter: invert(1); } cism bd>dv cc t { font-size: 0.88em; padding: 0; position: relative; } cism>bl>bd cm f { display: flex; gap: 5px; } cism bd cc i { height: 18px; width: 18px; } cism bd cm>h { font-weight: 400; font-size: 15px; display: block; background: var(--cg); border-radius: 11px; height: 4px; overflow: hidden; margin-top: 11px; } cism d>cc { display: flex; align-items: center; justify-content: space-between; } cism bd span:hover { background: var(--a1); } cism bd div>p { margin-block-end: 0; color: var(--c0); margin: 0 14px; } cism bl>ft { padding: 11px; background: var(--cg); position: absolute; bottom: 0; display: flex; justify-content: center; right: 0; border-top-left-radius: 7px; } cism ft i{ height: 20px; width: 20px; } cism bd span.this { background: var(--a); } cism ft>i svg { fill: var(--b); } @media(min-width:999px){ .start cism bd span { display: grid; padding: 4px; justify-content: center; gap: 0; } .start cism bd i {margin: auto; width: 24px;} .start cism bd b { font-size: 0.77em; } .start cism>bl>bd dv { margin: 2px; } .start cism d>cc { display: block; } .start cism bd>dv cc t { font-size: 0.77em; } .start cism>bl>bd cm f { display: block; } .start cism bd>dv i { display: none; } .start cism hd h4{display:none;} .start cism dv cm i { display: block; margin: auto; } .start cism bd span { padding: 0; justify-content: center; gap: 0; margin: 11px auto; width: 44px; height: 44px; padding: 6px; align-items: center; flex-direction: column; } .start cism bd b { font-size: 10px; width: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } .start cism bl>ft{ width: 68%; transform: rotate( 180deg); border-radius: unset; } .start cism bd>dv cc t { font-size: 12px; } .start cism bd { display: grid; height: calc(-100px + 100vh); scroll-behavior: smooth; overflow: scroll; } .start cism bd i:nth-child(4) { display: none; }} cism bd i:nth-child(4):hover { background: var(--a); } cism bd i:nth-child(4) { background: var(--a1); padding: 5px; border-radius: 0px 6px 6px 0px; position: absolute; right: 0; opacity: 0; height: 20px; } cism bd span:hover i:nth-child(4) { opacity: 1; } cism bd cm lin { display: block; background: var(--b-t52); height: 100%; } cism span>a { width: calc(-28px + 100%); } cism bd span:hover i:nth-child(4) { background: var(--a2); } cism bd i:nth-child(4) svg:hover { fill: var(--b1); } cism bd i:nth-child(4)>svg { fill: var(--b); } @media(max-width:999px){ cism bl { width: 77%; } cism bd span { padding: 3px 11px; } cism bd i{height:22px; width:22px;} cism bd i:nth-child(4) { padding: 7px; } } @media(max-width:999px){ cism>bl>bd { display: block; overflow: auto; max-height: 96vh; } cism bd div { display: block; line-height: 2; padding-bottom: 22px; }} /*Invoice_SubTotal*/ ciau tbody>tr { padding: 0; display: flex; border: 0; justify-content: space-between; align-items: center; font-size: 0.88em; font-family: emoji; } ciau tbody>tr>td { height: fit-content; padding: 6px; text-align: right; font-size: 0.88em; } ciau table>tbody:nth-child(2) { border-top: solid 1px var(--bor); padding-top: 40px; display: flex; justify-content: center; font-weight: 500; color: var(--br); font-size: 0.88em; } ciau table>tbody{border-left: solid 1px var(--bor); display: table-caption;} ciau {display: block; } ciau td>label { font-size: 1.11em; }@media(max-width:999px){ ciau{ border-top: solid 1px var(--bor);padding: 11px 0; } ciau table>tbody { border: 0; } } /*Quote_ItemTable*/ citu { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative; } citu bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} citu hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } citu hd>h4 { font-size: 0.88em; } citu bd { display: block; } citu bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } citu bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } citu>bl { display: block; padding: 11px; margin: 11px; max-width: 1153px; } citu bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } citu bd>d>t:nth-child(1){ text-align: unset; } citu bd>d>cc>input { border: unset; } citu bd>d>cc { display: block; border-right: solid 1px var(--b-t); } citu bd>d>cc>textarea:hover { box-shadow: 0px 0px 1px 1px var(--a); } citu d>cc>textarea:focus { border: solid 1px var(--a); } citu d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } citu d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } citu bd>d:nth-child(2)>t { padding: 0; } citu bd>d>cc>textarea { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; } citu bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } citu bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } citu bd>d:nth-child(2)>t { border-bottom: 0; } citu bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } citu bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } citu bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } citu bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -22px; } citu bd>d c>i { height: 13px; width: 13px; } citu bd>d c>i:nth-child(2) { height: 16px; width: 16px; } citu bd>d c>i:nth-child(2) svg { fill: var(--cr); } citu bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } citu ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } citu ft>div i { height: 16px; width: 16px; } citu div>cc>input { border: solid 1px var(--a); height: 33px; } citu div>cc>input:focus { border: solid 1px var(--a); } citu c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } citu div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } citu div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } citu div>span:focus { background: var(--a); color: var(--b); } citu ft>div { display: none; } .Header cqit ft>div { display: grid; } citu div>span:hover { background: var(--a); color: var(--b); } @media(max-width:999px){ citu { display: grid;overflow: scroll; } citu bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } } /*InvoiceUpdate*/ cqute { justify-content: end; display: flex; } cqute tbody>tr>td { font-size: 0.66em; font-family: auto; padding: 0; height: unset; font-weight: 700; } cqute tbody { display: grid; padding: 11px; gap: 8px; border-right: solid 1px var(--bor); } cqute tbody>tr { display: grid; grid-template-columns: 155px auto; } cqute tbody>tr:hover { background: unset; } @media(max-width:999px){ cqute tbody>tr {grid-template-columns: 111px auto; } } /*component:-Customers*/ cinw bl { display: block; margin: 13px 0; } cinw hd h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; } cinw hd i { height: 21px; width: 20px; } cinw hd btn { display: flex; align-items: center; } cinw hd svg { fill: var(--aa); } cinw bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } cinw hd btn { display: flex; align-items: center;padding: 7px 8px; width: max-content; border-radius: 6px; } cinw hd div { display: flex; justify-content: space-between; align-items: center; padding: 0 0px 8px; } cinw hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; margin: 0px 22px 0px 0px; } cinw hd btns svg { fill: var(--b); } cinw hd box { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative;} cinw hd box svg { fill: var(--br); transform: rotate( 180deg); } cinw btn>i { height: 16px; width: 16px; } cinw bl { display: block; } cinw input { width: 13px; height: 13px; } cinw bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cinw hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cinw bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} cinw bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} cinw bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cinw bd span { font-size: 12px; display: flex; width: 99px; } cinw bd table td t { color: var(--br); font-size: 14px; } cinw bd table tr td:nth-child(5) {justify-content: center;} cinw bd table tr td:nth-child(6) {justify-content: end;} cinw bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} cinw bd table i { width: 26px; height: 19px; } cinw td t d i { width: 30px; height: 12px; } cinw bl hd table { background: var(--b1); } cinw bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} cinw bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } cinw bd tbody>tr>th { color: var(--br); } cinw bl hd table i { width: 26px; height: 19px; } cinw bl>hd dv { display: flex ; align-items: center; } cinw bd table th { height: unset; } cinw table>thead { background: var(--b-t); } cinw bd table tr>td:last-child { width: 0; padding-right: 10px; text-align: end; } cinw bd table tr>th:first-child {padding: 7px;width: 20px;} @media(max-width:999px){ cinw>bl hd table { min-width: max-content; overflow: scroll; } cinw>bl> hd table th { width: 137px; } cinw bd table thead tr { border: solid 1px var(--b-t); padding: 0px; overflow: scroll; display: flex; max-width: 415px; } } cinw>bl>bd div { display: flex; justify-content: center; } cinw bd tbody>tr>th:first-child { width: 154px; display: block; } cinw bl { display: block; } cinw input { width: 13px; height: 13px; } cinw bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cinw hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cinw bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } cinw bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} cinw bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cinw bd span { font-size: 12px; display: flex; width: 99px; } cinw bd tbody td t { color: var(--br); font-size: 14px; } cinw bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } cinw bd tbody i { width: 26px; height: 19px; } cinw td t d i { width: 30px; height: 12px; } cinw>bl>bd dv { display: flex ; align-items: center; } cinw bd table tr>td { font-size: 0.77em; } cinw bd table tr>th:nth-child(2) { width: 20px; } cinw bd table tr>td:nth-child(4) { color: var(--a); font-weight: 500; } cinw bd table th:nth-child(10) { text-align: end; } /*component :-Items*/ mino bl { display: block; margin: 13px 0; } mino hd h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; } mino hd i { height: 21px; width: 20px; } mino hd btn { display: flex; align-items: center; } mino hd svg { fill: var(--aa); } mino bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } mino hd btn { display: flex; align-items: center;padding: 7px 8px; width: max-content; border-radius: 6px; } mino hd div { display: flex; justify-content: space-between; align-items: center; padding: 0 0px 8px; } mino hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; margin: 0px 22px 0px 0px; } mino hd btns svg { fill: var(--b); } mino hd box { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative;} mino hd box svg { fill: var(--br); transform: rotate( 180deg); } mino btn>i { height: 16px; width: 16px; } mino bl { display: block; } mino bd table th:nth-child(5) { text-align: end; } mino input { width: 13px; height: 13px; } mino bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } mino hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } mino bd table th { font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 333px; } mino bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} mino bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} mino bd span { font-size: 12px; display: flex; width: 99px; } mino bd table td t { color: var(--br); font-size: 14px; } mino bd table tr td:nth-child(5) { text-align: end; } mino bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} mino bd table i { width: 26px; height: 19px; } mino td t d i { width: 30px; height: 12px; } mino bl hd table { background: var(--b1); } mino bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} mino bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } mino bd tbody>tr>th { color: var(--br); } mino bl hd table i { width: 26px; height: 19px; } mino bl>hd dv { display: flex ; align-items: center; } mino bd table th { height: unset; } mino table>thead { background: var(--b-t); } mino bd table tr>td:last-child { width: 0; padding-left: 14px; } mino bd table tr>th:first-child {padding: 7px;width: 20px;} mino bd table th:nth-child(8) {text-align: end;} @media(max-width:999px){ mino mer>bl hd table { min-width: max-content; overflow: scroll; } mino mer>bl { overflow: scroll; } mino mer>bl> hd table th { width: 137px; } } mino bd table tr td:nth-child(3) { color: var(--a); font-weight: 500; } mino bd tbody>tr>th:first-child { width: 154px; display: block; } mino bl { display: block; } mino input { width: 13px; height: 13px; } mino bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } mino hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } mino bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } mino bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} mino bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} mino bd span { font-size: 12px; display: flex; width: 99px; } mino bd tbody td t { color: var(--br); font-size: 14px; } mino bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } mino bd tbody i { width: 26px; height: 19px; } mino td t d i { width: 30px; height: 12px; } mino >bl>bd dv { display: flex ; align-items: center; } mino bd table tr>td { font-size: 0.88em; } mino bd table tr>th:nth-child(2) { width: 20px; } mino bd table tr>th:nth-child(7) { text-align: end; } mino bd table tr>td:nth-child(7) { text-align: end; } mino bd table th:nth-child(8) { text-align: end; } mino bd table tr>td:nth-child(8) { text-align: end; } /*InvoicesNew*/ cies>bl>hd{ padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt);justify-content: space-between; gap: 11px; } cies hd div { display: flex; align-items: center; gap: 11px; } cies hd dv { display: flex; align-items: center; position: relative; padding: 8px; } cies bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; font-size: 0.88em; font-weight: 400; } cies hd dv { display: flex; align-items: center; } cies hd dv i { height: 14px; margin-right: 5px; width: 14px; } cies hd d label { position: relative; display: flex; width: 37px; height: 15px; } cies hd d label input { opacity: 0; width: 0; height: 0; } cies hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } cies hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } cies hd d label input:checked + span { background-color: var(--aa); } cies hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } cies bl hd>h2 { font-weight: 400; font-size: 1.44em; } cies hd>i { display: flex; height: 24px; width: 24px; } cies hd>btn>t { font-size: 0.88em; } cies hd dv i svg.icon.icon-sm.me-1.align-text-top.fill-grey { fill: var(--c0); } cies hd dv span { font-size: 12px; font-weight: 500; } cies hd dv:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 1px; border-radius: 6px; background: var(--lgb); -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000); -webkit-mask-origin: content-box, padding-box; -webkit-mask-clip: content-box, padding-box; -webkit-mask-composite: destination-out; } cies>bl>hd>d>i { display: flex; height: 14px; width: 14px; white-space: nowrap; margin-left: 12px; } cies hd d { display: flex; align-items: center; gap: 11px;} cies hd d t { display: flex; border: solid 1px var(--c0); height: 30px; } cies bd>d {max-width: 1100px; } @media(max-width:999px){ cies>bl>hd { padding: 22px; display: grid ; background: var(--b); border: solid 1px var(--bt); justify-content: center; gap: 11px; margin-bottom: 12px; } cies bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; font-size:14px;} } /* component : Invoicetheme */ sinw>bl bd d { display: flex; align-items: center; justify-content: space-between; margin: 3px; border: 1px solid var(--bc); border-radius: 7px; padding: 16px; box-shadow: var(--bt-bx); } sinw>bl bd dv i { height: 17px; width: 17px; display: block; } sinw>bl bd dv t { display: flex; font-weight: 400; font-size: 0.77em; white-space: nowrap; padding: 8px 10px; } sinw>bl bd d dv { display: flex; align-items: center; } sinw { display: flex; padding: 11px; margin: 11px; border-radius: 5px; background: var(--b); width: max-content; } sinw>bl btn { color: var(--a); font-size: 0.88em; font-weight: 400; } .Setp1 sinw>bl bd d:nth-child(1) { display: none; } @media(max-width:999px){ sinw>bl { margin: 11px; margin-bottom: 0; } sinw { display: flex; padding: 11px; margin: 11px; box-shadow: 0px 0px 3px 0px var(--bor); border-radius: 5px; background: var(--b); width: max; 358px;} } /* component:-Invoicing*/ cing bl { max-width: 888px; margin: auto; } cing hd a { font-weight: 300; background: linear-gradient(270deg, #a47fd2, #79afee, #1e80f3); background-clip: text; color: transparent; max-width: max-content; } cing hd h1 { font-weight: 300; }/*component:-AllItem*/ catm>bl { display: grid ; grid-template-columns: 33px auto max-content; align-items: center; padding: 11px; background: var(--aat); border-top: 1px solid var(--bor); position: relative; } catm>bl>hd input { width: 13px; height: 13px; } catm>bl>bd div { display: flex ; align-items: center; justify-content: space-between; padding: 7px 10px; background: var(--b1); border-bottom: solid 1px var(--b-t); border-top: solid 1px var(--b-t); height: 28px; } catm>bl>ft prc { font-size: 0.88em; font-weight: 500; } catm>bl>bd name { font-size: 0.79em; color: var(--c); } catm>bl { display: grid; grid-template-columns: 33px auto max-content; align-items: center; padding: 11px; background: var(--b1); border-top: 1px solid var(--bor); position: relative; } /*ItemDetail*/ ming>bl { display: block; position: relative; } ming hd>div { font-size: 1.44em; font-weight: 400; display: flex; justify-content: space-between; } ming hd btns { display: flex; align-items: center; justify-content: center; } ming hd btns>btn>i { height: 18px; width: 22px; } ming hd btns>btn { position: relative; background: var(--bg); padding: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.55em; border: 1px solid var(--bc); border-radius: 6px; margin: 9px; } ming bl>hd { padding: 18px 22px 0px; border-bottom: 1px solid var(--bor); } ming hd>mg { display: flex; gap: 11px; align-items: center; } ming hd btns>btn:nth-child(2):after { display: block; margin-left: 5px; content: ""; border-top: .3em solid; border-right: .3em solid var(--0); border-left: .3em solid var(--0); } ming hd mg>t:nth-child(1) { font-size: 0.88em; font-weight: 500; } ming hd mg>t { font-size: 0.82em; padding-bottom: 10px; color: var(--a2); } ming hd mg>t:focus { border-bottom: 2px solid var(--a);color: var(--c); font-weight: 500;} @media(min-width:999px){ ming ft>ul>li { list-style: none; font-size: 0.88em; display: flex; align-items: center; max-width: 200px; justify-content: space-between; } ming bd ul>li { font-size: 0.88em; list-style: none; display: flex; max-width: 200px; justify-content: space-between;}} ming bd>ul { padding: 2px 29px; display: block; line-height: 2; } ming ft>h2 { font-size: 0.88em; font-weight: 400; margin: 33px 0 0px 27px; } ming ft>ul { padding-left: 29px; display: block; line-height: 2; } ming bd ul>li>t { color: var(--cbg1); } ming ft ul>li>t { color: var(--cbg1); } @media(max-width:999px){ ming ft>ul>li { list-style: none; font-size: 0.88em; display: flex; align-items: center; justify-content: space-between; } ming ft>ul { padding: 2px 29px; display: block; line-height: 2; } ming bd ul>li { font-size: 0.88em; list-style: none; display: flex; justify-content: space-between; } } /* Component:ItemFilters */ imfs>bl input[type="checkbox"] { height: 22px; width: 22px; display: flex; } imfs>bl hd name { display: flex; align-items: center; gap: 7px; } imfs>bl hd { display: flex; align-items: center; justify-content: space-between; } imfs>bl hd div { display: flex; align-items: center; justify-content: space-between; width: 100%; } imfs>bl hd name t { font-weight: 400; display: block; } imfs { padding: 11px; display: block; } /*component :-AllItems*/ calr hd h2 { font-size: 15px; min-width: fit-content; font-weight: 500; } calr hd btn { display: flex; align-items: center; padding: 8px; } calr hd i { width: 18px; height: 18px; } calr hd btn { display: flex; align-items: center; padding: 5px 11px; border-radius: 6px; max-width: fit-content; } calr hd btns btn { background: var(--a); padding: 7px; } calr hd btns box { background: var(--bc); display: block; width: fit-content; border: solid 1px var(--b-t); border-radius: 4px; padding: 5px; } calr hd svg { fill: var(--b-t77); } calr hd box svg { fill: var(--c); } calr hd btns { display: flex; align-items: center; gap: 11px; } calr>bl>hd { display: flex; align-items: center; margin-bottom: 11px; justify-content: space-between; padding: 5px 7px; } calr hd box i { width: 21px; height: 19px; } calr bl>hd>btn svg { fill: var(--aa); } calr>bl>bd d input { width: 15px; height: 15px; } /*component:-ItemHistory*/ cihi>bl { display: grid ; grid-template-columns: 33px auto max-content; background: var(--b1); padding: 11px; border-top: 1px solid var(--bor); position: relative; font-size: 0.88em; align-items: center; } cihi bd t i { height: 14px; width: 14px; } cihi>bl:hover { background: var(--bc); } cihi bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } cihi bd name { display: flex; align-items: center; gap: 4px; } cihi bd rs { position: absolute; right: 11px; font-size: 0.99em; font-weight: 500; } cihi bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } cihi bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } cihi bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } cihi bd t { margin: 8px 0px; font-size: 0.8em; display: flex ; align-items: center; gap: 11px; color: var(--green); } cihi>bl>bd c { color: var(--green); } cihi>bl>bd i { width: 13px; } cihi>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } cihi>bl>bd b { font-size: 0.77em; font-weight: 400; color: var(--c2); } cihi bd div span { color: var(--a1); font-size: 0.77em; margin: 3px 3px 1px 0px; display: flex ; align-items: center; } cihi>bl>bd c { width: 0; height: 0; border: solid 2px; border-radius: 11px; color: var(--c0); } /*ItemNew*/ cnmo>bl>hd { display: flex; align-items: center; padding: 22px; background: var(--b); border: solid 1px var(--bt); } cnmo bd from input { height: 15px; width: 15px; margin: 0px 2px 0 15px; } cnmo bl>bd { display: flex; background: var(--b1); padding: 22px; flex-direction: column; } cnmo bd from label { display: flex; align-items: center; justify-content: center; } cnmo hd h4 { font-size: 1.3em; font-weight: 400; } cnmo bd>div { display: flex; flex-direction: column; gap: 11px; } cnmo bd t i { height: 12px; width: 12px; } cnmo>bl sl>input { width: -webkit-fill-available; } cnmo bd dv f { display: flex; gap: 59px; align-items: center; } cnmo bd f span { color: var(--cr); font-size: 0.88em; } cnmo ft dv>t { font-size: 0.77em; color: var(--cr); border-bottom: dashed 1px var(--bor); width: max-content; line-height: 1.77; } cnmo bl>ft { display: block; padding: 18px 22px; } cnmo bd input:hover { border: 1px solid var(--a); } cnmo bd from { display: flex; align-items: center; gap: 42px; margin-bottom: 15px; } cnmo bd t { font-size: 0.88em; display: flex; gap: 4px; } cnmo bd dv:nth-child(2) { position: relative; top: 18px; } cnmo>bl sl>input:focus { border: none; } cnmo ft dv>input:focus { border: solid 1px var(--bc); } cnmo bd from>select:hover { border: 1px solid var(--a); } cnmo ft dv>div { background: var(--bc); padding: 11px; border-radius: 7px; position: relative; left: 40px; z-index: 999; border-right: 1px solid var(--bc); } cnmo ft>dv { display: grid ; grid-template-columns: 88px auto; padding: 11px 0; } cnmo ft dv>span { font-size: 0.77em; } cnmo sl>f { display: flex; align-items: center; width: 91.666667%; } cnmo ft sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } cnmo ft dv>input:hover { border: 1px solid var(--a); } cnmo bd input { display: block; max-width: 400px; border: 1px solid var(--b-t); height: 34px; border-radius: 6px; transition: 999ms; } cnmo bd from>select { background: var(--b); border: 1px solid var(--b-t); font-size: 0.88em; transition: 999ms; margin: 0px 19px; border-radius: 5px; font-weight: 400; padding: 11px; max-width: 429px; } cnmo>bl sl { display: block; position: relative; border: 1px solid var(--bt); border-radius: 7px; } cnmo>bl sl>div { display: flex ; background: var(--bt); position: absolute; left: 1px; bottom: 1px; top: 1px; padding: 0 11px; align-items: center; font-size: 0.88em; border-radius: 5px; } cnmo ft textarea { border: 1px solid var(--bt); position: relative; border-radius: 7px; padding: 7px; max-width: 320px; width: -webkit-fill-available; } @media(max-width:999px){ cnmo bd dv f { display: flex; gap: 47px; align-items: center; } cnmo bl>ft { display: block; padding: 18px 18px; } } miwo>bl { display: block; border: 1px solid var(--bc); } miwo>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} miwo hd h4 svg { fill: var(--a); } miwo hd dv i { height: 22px; width: 22px; position: unset; } miwo hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative;} miwo hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } miwo>bl>bd { display: block; padding: 11px; background: var(--b1); } miwo bd t i { height: 14px; width: 14px; } miwo>bl>bd:hover { background: var(--bc); } miwo bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } miwo hd dv i svg:nth-child(1) { fill: var(--b); } miwo hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc);position: relative;} miwo bd name { display: flex; align-items: center; gap: 4px; } miwo bd rs { position: absolute; right: 19px; font-size: 0.88em; font-weight: 400; } miwo bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 400; gap: 6px; } miwo bd div span { color: var(--bor); font-size: 0.88em; margin: 9px 1px 0px 0; } miwo bd div { display: flex; flex-direction: column; line-height: 16px; } miwo bd t { margin: 8px 0px; font-size: 0.88em; display: flex; align-items: center; gap: 1px; } miwo hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } miwo hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 40%; top: 17px; } miwo hd h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; margin: 0 20px 0 0; height: 30px; display: flex; align-items: center; width: 126px; padding-left: 8px; border-radius: 5px; transition: 333ms; } miwo hd h4:hover { background: var(--b1); } /*ItemUpdate*/ cumo>bl>hd { display: flex; align-items: center; padding: 22px; background: var(--b); border: solid 1px var(--bt); } cumo bd from input { height: 15px; width: 15px; margin: 0px 2px 0 22px; } cumo bl>bd { display: flex; background: var(--b1); padding: 22px; flex-direction: column; } cumo bd from label { display: flex; align-items: center; justify-content: center; } cumo hd h4 { font-size: 1.3em; font-weight: 400; } cumo bd>div { display: flex; flex-direction: column; gap: 11px; } cumo bd t i { height: 12px; width: 12px; } cumo bd dv f { display: flex; gap: 59px; align-items: center; } cumo bd f span { color: var(--cr); font-size: 0.88em; } cumo ft dv>t { font-size: 0.77em; color: var(--cr); border-bottom: dotted 2px var(--bor); } cumo bl>ft { display: block; padding: 18px 22px; } cumo bd input[type="text"]:hover { border: 1px solid var(--a); } cumo bd from { display: flex; align-items: center; gap: 42px; margin-bottom: 15px; } cumo bd t { font-size: 0.88em; display: flex; gap: 4px; align-items: center; } cumo bd dv:nth-child(2) { position: relative; top: 18px; } cumo ft dv>input:focus { border: solid 1px var(--bc); } cumo bd from>select:hover { border: 1px solid var(--a); } cumo ft dv>input { border: 1px solid var(--bc); position: relative; display: flex; border-radius: 6px; height: 32px; transition: 999ms; margin-left: -6px;} @media(min-width:999px){ cumo ft textarea { border: 1px solid var(--bc); border-radius: 8px; position: relative; width: 289px; height: 48px; } cumo bd from>select { background: var(--b); width: 296px; border: 1px solid var(--bc); font-size: 12px; transition: 999ms; margin: 0px 22px; border-radius: 5px; height: 34px; font-weight: 400; } cumo ft dv>input { border: 1px solid var(--bc); position: relative; width: 263px; display: flex; border-radius: 6px; height: 32px; transition: 999ms; } cumo ft dv>div { background: var(--bc); border-top-left-radius: 6px; padding: 6px; border-bottom-left-radius: 6px; position: relative; left: 33px; z-index: 999; border-right: 1px solid var(--bor); } cumo ft>dv { display: flex; align-items: center;} cumo ft>dv:nth-child(2) { display: grid ; grid-template-columns: 107px auto; margin: 11px 0; } cumo ft dv>span { font-size: 0.77em; } cumo sl>f { display: flex; align-items: center; width: 91.666667%; } cumo ft sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } cumo ft dv>input:hover { border: 1px solid var(--a); } cumo bd input[type="text"] { display: block; max-width: 270px; border: 1px solid var(--b-t); height: 34px; border-radius: 6px; transition: 999ms;}} @media(max-width:999px){ cumo bd dv f { display: flex; gap: 47px; align-items: center; } cumo bl>ft { display: block; padding: 18px 18px; } cumo ft textarea { border: solid 1px var(--b-t); font-size: 12px; padding: 8px; border-radius: 8px; max-width: 310px; min-width: 276px; } cumo bd from>select { background: var(--b); height: 40px; border: 1px solid var(--bc); font-size: 12px; color: var(--bor); border-radius: 7px; transition: 999ms; margin: 0px 0px 0px 8px; } cumo ft dv>input { border: 1px solid var(--bc); position: relative; display: flex; border-radius: 6px; height: 32px; transition: 999ms; } cumo ft>dv:nth-child(2) { display: grid ; grid-template-columns: 90px auto; margin: 11px 0; } } /* Component : Item_ActionNew */ citn>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} citn>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } citn>bl hd>btns { display: flex; gap: 11px; } citn>bl btns>btn.this { background: var(--aa); color: var(--b); } citn>bl bd>aa { font-size: 0.77em; color: var(--a); } citn bl { display: grid; gap: 14px; } /* Component : Item_ActionUpdate */ ctau>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} ctau>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } ctau>bl hd>btns { display: flex; gap: 11px; } ctau>bl btns>btn.this { background: var(--aa); color: var(--b); } ctau>bl bd>aa { font-size: 0.77em; color: var(--a); } @media(max-width:999px){ ctau bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px; position: relative; bottom: 34px; display: grid; gap: 14px; } } /*Item_BulkNew*/ cqbi bl { display: flex; flex-direction: column; height:-webkit-fill-available } .Bulk Bulk { right: 0; backdrop-filter: brightness(0.5); background: var(--bor); opacity: 1; visibility: visible; top: 0; } Bulk { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 333ms; height: 100%; overflow: hidden; visibility: hidden; top: -100%; } cqbi { display: block; background: var(--b); box-shadow: var(--bs-b); height: calc(-315px + 100vh); width: 99vh; margin: auto; position: relative; border-radius: 0px 0px 8px 8px; } cqbi hd>div { display: flex; align-items: center; justify-content: space-between; } cqbi div>i { height: 18px; width: 18px; } cqbi div>i svg { fill: var(--cr); } cqbi bl>hd { display: block; padding: 11px; border-bottom: solid 1px var(--bc); background: var(--b1); border-radius: 11px 11px 0px 0px; } cqbi bl>bd:after { content: ''; height: 100%; width: 0.5px; position: absolute; left: 50%; background: var(--bc); bottom: 0; } cqbi bl>ft { width: 50%; display: block; margin-left: auto; border-left: solid 1px var(--bc); } cqbi dv>sl { display: block; width: -webkit-fill-available; font-size: 14px; transition: 44ms; font-weight: 300; background: unset; height: unset; border: unset; margin: 0; padding: 11px; background: var(--green1); border-radius: 0px 0px 11px 11px; } cqbi dv>sl>input { display: block; width: -webkit-fill-available; font-size: 14px; transition: 44ms; font-weight: 300; border: solid 1px var(--a); height: 33px; margin-top: 6px; } cqbi sl>input:focus { box-shadow: unset; border: solid 1px var(--a); } cqbi dv>p { margin: auto; justify-content: center; display: flex; padding: 11px; color: var(--cg); font-weight: 500; padding-top: 100px; text-align: center; } cqbi bl>bd { display: grid; grid-template-columns: 50% 50%;height: -webkit-fill-available; } cqbi dv>cc { border-bottom: solid 1px var(--bc); height: fit-content; padding: 10px; padding-top: 0; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; } cqbi bd>dv:nth-child(2) { display: block; padding: 11px; } cqbi d>h4 { font-size: 22px; font-weight: 400; } cqbi dv>cc>d { display: grid; grid-template-columns: auto auto; gap: 11px; align-items: center; } cqbi d>btn { width: 14px; border-radius: 16px; padding: 3px 13px; margin-left: 4px; letter-spacing: 1.4px; border: 1px solid var(--bor); background-color: var(--b); color: var(--br); justify-content: center; display: grid; font-size: 0.88em; } cqbi d>t { font-size: 0.77em; opacity: 77%; } cqbi btns>btn { background: var(--a); padding: 6px; border-radius: 3px; color: var(--b); justify-content: center; display: grid; font-size: 0.88em; align-items: center; } cqbi ft>btns { display: grid; grid-template-columns: 90px 90px; gap: 11px; border-top: solid 1px var(--bc); padding: 11px; } cqbi btns>btn:nth-child(2) { background: var(--bc); color: var( --br); border: solid 1px var(--bor); width: fit-content; padding: 0 11px; } /*component :-Items*/ mimo bl { display: block; margin: 13px 0; } mimo hd h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; } mimo hd i { height: 21px; width: 20px; } mimo hd btn { display: flex; align-items: center; } mimo hd svg { fill: var(--aa); } mimo bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } mimo hd btn { display: flex; align-items: center;padding: 7px 8px; width: max-content; border-radius: 6px; } mimo hd div { display: flex; justify-content: space-between; align-items: center; padding: 0 0px 8px; } mimo hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; margin: 0px 22px 0px 0px; } mimo hd btns svg { fill: var(--b); } mimo hd box { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative;} mimo hd box svg { fill: var(--br); transform: rotate( 180deg); } mimo btn>i { height: 16px; width: 16px; } mimo bd table th:nth-child(5) { text-align: end; } mimo input { width: 13px; height: 13px; } mimo bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } mimo hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } mimo bd table th { font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 333px; } mimo bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} mimo bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} mimo bd span { font-size: 12px; display: flex; width: 99px; } mimo bd table td t { color: var(--br); font-size: 14px; } mimo bd table tr td:nth-child(5) { text-align: end; } mimo bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} mimo bd table i { width: 26px; height: 19px; } mimo td t d i { width: 30px; height: 12px; } mimo bl hd table { background: var(--b1); } mimo bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} mimo bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } mimo bd tbody>tr>th { color: var(--br); } mimo bl hd table i { width: 26px; height: 19px; } mimo bl>hd dv { display: flex ; align-items: center; } mimo bd table th { height: unset; white-space: nowrap; } mimo table>thead { background: var(--b-t); } mimo bd table tr>td:last-child { width: 0; padding-left: 14px; } mimo bd table tr>th:first-child {padding: 7px;width: 20px;} mimo bd table th:nth-child(8) {text-align: end;} @media(max-width:999px){ mimo>bl bd table { overflow: scroll; display: block; } mimo mer>bl { overflow: scroll; } mimo mer>bl> hd table th { width: 137px; } } mimo bd table tr td:nth-child(3) { color: var(--a); font-weight: 500; } mimo bd tbody>tr>th:first-child { width: 154px; display: block; } mimo bl { display: block; } mimo input { width: 13px; height: 13px; } mimo bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } mimo hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } mimo bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } mimo bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} mimo bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} mimo bd span { font-size: 12px; display: flex; width: 99px; } mimo bd tbody td t { color: var(--br); font-size: 14px; } mimo bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } mimo bd tbody i { width: 26px; height: 19px; } mimo td t d i { width: 30px; height: 12px; } mimo >bl>bd dv { display: flex ; align-items: center; } mimo bd table tr>td { font-size: 0.88em; } mimo bd table tr>th:nth-child(2) { width: 20px; } mimo bd table tr>th:nth-child(7) { text-align: end; } mimo bd table tr>td:nth-child(7) { text-align: end; } mimo bd table th:nth-child(8) { text-align: end; } mimo bd table tr>td:nth-child(8) { text-align: end; } /*Life_Cycle*/ clcy { margin-top: 85px; display: block; padding: 22px; } clcy bd>i { width: 664px; margin: 11px; margin: 11px auto; } clcy hd>h4 { display: flex; align-items: center; justify-content: center; margin: 11px; margin-bottom: 22px; font-size: 22px; font-weight: 400; } @media(max-width:999px){ clcy { margin-top: unset; } clcy bd>i{width: 387px;} } /*Locations_Hero*/ clho hd h4 { font-size: 17px; } clho bd i { height: 17px; width: 17px; } clho hd span:nth-child(2) { opacity: 50%; } clho bd td span i { height: 15px; width: 15px; margin-right: 4px; } clho bd td span { color: var(--c); font-size: 14px; font-weight: 500; display: flex; } clho { display: block; padding: 11px; } @media(min-width:999px){} clho bd aa { display: flex; color: var(--a); font-size: 15px; margin-top: 4px; } clho bd p { line-height: 20px; font-size: 15px; } @media(max-width:999px){ clho hd h4 { font-size: 17px; display: flex; align-items: center; gap: 2px; } clho hd i { height: 16px; width: 16px; } clho bd p { line-height: 17px; font-size: 14px; margin-top: 5px; } }/* cmsg { display: block; max-width: 374px; position: absolute; right: 0; transition: 333ms; top: -100%; box-shadow: -4px 0px 7px var(--bc); padding: 11px; box-shadow: var(--bs-b); background: var(--b); border-radius: 12px; width: 310px; margin: 5px; } cmsg hd h2 { font-size: 25px; } cmsg hd p { color: var(--c0); margin-top: 7px; font-size: 0.77em; } cmsg bd tr { display: flex; align-items: center; gap: 11px; border-top: solid 1px var(--bc); gap: 0; border-bottom: 0; } cmsg bd p {margin: 0; font-size: 11px; color: var(--c0);} cmsg bd table i { width: 44px; height: 44px; } cmsg bd table h5 { font-weight: 500; font-size: 13px; } cmsg bd table {display: block; } cmsg bd input { width: 43px; height: 23px;appearance: none; border-radius: 20px; position: relative; outline: none; cursor: pointer; transition: background 0.3s ease; background: var(--b-t22); } cmsg bd input::before { content: ""; position: absolute; width: 18px; height: 18px; background: var(--b); border-radius: 50%; top: 2px; left: 1px; transform: translate3d(3%, 0, 0); transition: transform 0.3s cubic-bezier(0.85, 0.05, 0.18, 1.35); } cmsg bd input:checked::before { transform: translateX(20px); } cmsg bd input:checked{ background: var(--aa); } cmsg table td { height: unset; } cmsg table td:nth-child(1) { padding: 0px; } @media(max-width:999px){ cmsg table td { padding: 8px; } cmsg { max-width: 100%; width: -webkit-fill-available; border-radius:0px; } } .Setting Setting { visibility: visible; opacity: 1; } Setting { border-radius: 4px; position: absolute; inset: 0; top: 44px; opacity: 0; z-index: 999999999999999999; visibility: hidden; transition: 122ms; height: 100%; right: 0; overflow: hidden; backdrop-filter: blur(5px); } .Setting cmsg { top: 0; } */ /*component:Managed_Account*/ cmvo cc cm { display: flex; align-items: center; gap: 4px; justify-content: center; background: var(--cg); color: var(--b); margin: 11px auto; border-radius: 24px; font-size: 16px; width: 121px; height: 100%;height: 40px;} cmvo bl hd { display: block; background: var(--bc); padding: 11px; border-radius: 11px; margin-bottom: 11px;} cmvo d dp i { width: 62px; display: flex; height: 62px; margin: auto; margin-bottom: 13px; } cmvo div d { display: block; text-align: center; } cmvo cc span { display: block; font-size: 13px; color: var(--c0); font-weight: 400; } cmvo div f i { height: 18px; width: 18px; margin: 6px; } cmvo div f { display: flex; justify-content: end; } cmvo cc cm i { height: 11px; width: 11px; background: var(--cg); padding: 1px; } cmvo cm i svg { fill: var(--b); } cmvo bd cv i { height: 18px; width: 18px; margin: 6px; } cmvo bd cv { display: flex; align-items: center; } cmvo cv flex { display: flex; align-items: center; } cmvo bd cv p { margin-block-start: 0; margin-block-end: 0; font-size: 0.77em; } cmvo d dp img { border-radius: 38px; } cmvo { display: block; max-width: 299px; position: absolute; right: 0; transition: 333ms; top: -100%; box-shadow:var(--bs-b); padding: 6px; background: var(--b); border-radius: 11px; width: 310px; margin: 11px; } .profile profile { right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible;} profile { backdrop-filter: blur(5px); border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 333ms; height: 100%; right: -100%; overflow: hidden; visibility: hidden; top: 44px; } .profile cmvo { top: 0; } @media(max-width:999px){ cmvo { width: -webkit-fill-available; max-width: -webkit-fill-available; margin: 0; border-radius: 0; height: 100%; } } cmvo bd dv:nth-child(3) { border: 0; } cmvo bd dv { border-bottom: solid 1px var( --y2); display: block; padding: 11px; } cmvo dv b { display: flex; margin: 0 11px; margin-bottom: 11px; }cmbe { padding-top: 15px; padding-bottom: 15px; padding-right: 10px; padding-left: 10px; display: block; background: url('/-Brand/Invoice/asset/BG.png'); line-height: 1.8;} cmbe hd { display: flex; } cmbe hd i { display: flex; height: 30px; width: fit-content; } cmbe bd div { line-height: 1.4; font-weight: 500; font-size: 14px; } cmbe bd div t { color: var(--green); } cmbe bd dv p { font-size: 12px; margin: unset; position: relative; top: 6px; } cmbe bd dv a { color : var(--aa) } crce path.darkblue { fill: #516889; } /* Component: Marketplac_Hero */ cmhr { display: grid; padding: 11px; margin: auto; } cmhr>bl bd div { display: flex; gap: 18px; } cmhr>bl bd div t:nth-child(1) { display: block; border-bottom: solid 2px var(--aa); } cmhr>bl bd div t:nth-child(2) { display: block; font-weight: 300; color: var(--br); } cmhr>bl bd div t:nth-child(3) { display: block; font-weight: 300; color: var(--br); } cmhr>bl bd div { display: flex; gap: 18px; margin-bottom: 36px; padding-left: 17px; } cmhr>bl ft div b { font-weight: 400; font-size: 14px; } cmhr>bl hd h2:nth-child(1) { font-size: 1.88em; font-weight: 400; color: var(--c); } cmhr>bl ft div a { color: var(--a); text-decoration: unset; font-weight: 400; font-size: 14px; } cmhr>bl hd { display: flex; gap: 11px; margin-bottom: 36px; padding-left: 20px; align-items: center; } cmhr>bl ft div { display: block; padding: 11px; margin: auto; margin-bottom: 15px; } cmhr>bl hd h4 { font-size: 1.77em; display: block; font-weight: 300; } cmhr>bl ft dv { display: flex; align-items: center; gap: 7px; } cmhr>bl ft dv i { height: 12px; width: 12px; display: flex; } @media(max-width:999px){ cmhr>bl ft div b { font-weight: 400; font-size: 16px; display: block; padding: 0 22px; } cmhr>bl ft div a { color: var(--a); text-decoration: unset; font-weight: 400; font-size: 17px; padding: 0 21px; display: block; } cmhr>bl bd div { display: flex; gap: 18px; margin-bottom: 36px; padding: 0 24px; } cmhr>bl hd { display: flex; gap: 11px; margin-bottom: 36px; justify-content: center; white-space: nowrap; font-size: 0.77em; } cmhr>bl ft div { display: grid; margin: auto; max-width: 333px; } } /* component:Marketplace_Smenu */ bmse { display: grid; position: relative; padding: 0 7px; height: 33px; align-items: center; } bmse hd span { font-size: 11px; color: var(--c); display: block; margin: 4px; font-weight: 400; } bmse.this:after { content: ''; position: absolute; left: 4px; height: 84%; margin: auto; width: 3px; background: var(--a); } bmse.this { background: var(--bc); } @media(max-width:999px){bmse { display: none; } } /*Member_status*/ cbet hd i { height: 62px; display: block; } cbet bd b { display: block; font-size: 23px; font-weight: 400; } cbet>bl { display: grid; grid-template-columns: 55px auto 44px; border-radius: 4px; padding: 7px 11px; align-items: center; background: var(--b); margin: 7px 0; border: solid 1px var(--bor); max-width: 444px; } cbet>bl hd>i { height: 44px; width: 44px; border-radius: 55%; overflow: hidden; background: rgb(255 184 180 / 64%); } cbet bd span { display: block; font-size: 16px; } cbet>bl p { font-size: 12px; margin: 3px 0; font-weight: 500; } cbet>bl name { margin: 0; font-size: 0.66em; opacity: .77; } cbet>bl ft>btn { display: flex; align-items: center; justify-content: center; height: 33px; width: 33px; border-radius: 55%; justify-self: end; transition: 95ms; } /*Membership_Offers*/ mbos hd b { border: solid 1px; margin: 4px; } mbos bl { display: block; padding: 11px; } mbos hd h3 { font-weight: 400; font-size: x-large; } mbos bd p:nthichild(1){ background: var(--bc); font-weight: 400; font-size: 13px; } mbos bd p { font-weight: 400; font-size: 13px; display: flex; align-items: center; } mbos bl bd { display: block; padding: 11px 0; } mbos bd p i{ width: 13px; } mbos bd p:nth-child(1) { font-weight: 400; font-size: 11px; margin-block-start: 0; margin-block-end: 0; display: flex; align-items: center; background:var(--cbg); padding: 8px; } mbos bd a { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; font-size: 12px; display: flex; align-items: center; gap: 5px;} @media(max-width:999px){ mbos ft i { width: 157px; } mbos bd p:nth-child(1) { display: block; } } /* component:Membership_Status*/ cssu { display: block; padding: 6px; background: var(--b); } cssu div h3 { font-weight: 400; font-size: 16px; position: relative; } cssu bd d { display: block; background: linear-gradient(328deg, #9f9c9c2b, #8a82825e); padding: 8px; border-radius: 3px; margin: 16px 0; font-size: 0.77em; position: relative; } cssu bd>div { display: grid; align-items: center; } cssu bd d:after { content: ''; position: absolute; bottom: -13px; height: 1px; left: -5px; right: -7px; background: var(--b1); } cssu bd h3:after { content: ''; position: absolute; height: 1px; left: -5px; right: -7px; background: var(--b1); top: 23px; } @media(max-width:999px){ cssu { flex: none; margin: 11px; width: 255px; } }cpel hd h3 { font-weight: 400; font-size: 16px; margin-bottom: 21px; } cpel bd>d { display: grid; gap: 22px; grid-template-columns: max-content max-content; } cpel>bl { display: block; padding: 11px; } cpel d>div { display: grid; grid-template-columns:300px 186px 300px 300px; box-shadow: var(--bs-b); border-radius: 4px; background: var(--b); padding: 11px;overflow: scroll; } @media(max-width:999px){ cpel>bl { padding: 11px 0; } cpel bd>d { grid-template-columns: auto; } cpel d > div { display: flex; overflow: scroll; }} @media(max-width:1400px){ cpel bd>d { grid-template-columns: auto; }} /* component: Membership_WorkPlace*/ cbop bl bd { display: block; } cbop hd b { border: solid 1px; margin: 4px; } cbop bl { display: block; padding: 11px; } cbop hd h3 { font-weight: 400; font-size: x-large;margin-bottom: 27px; } cbop bd p { font-weight: 400; font-size: 0.88em; } cbop bl ft { background: var(--y2); display: flex; gap: 5px; padding: 11px; } cbop ft i { width: 33px; } cbop ft p { font-weight: 400; font-size: 0.77em; margin-block-start: 0; margin-block-end: 0; } cbop bd p a { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; } cbop ft p a { margin: 0 2px; } cbop bd p a:nth-child(2) { align-items: center; gap: 6px; } cbop p a i { display: inline-flex; height: 15px; width: 15px; } cbop ft p a:nth-child(2) { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; } @media(max-width:999px){ cbop ft i { width: 157px; } cbop>bl { padding: 0; } } /*Menubar*/ cmue>bl { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } cmue bd>i:focus { border: solid 1px var(--a); border-radius: 4px; } cmue bd>i { height: 18px; width: 18px; margin: 11px auto; padding: 5px; opacity: 58%; } cmue bd nt i { height: 22px; width: 22px; margin: 11px auto; opacity: 22%; padding: 2px; } cmue nt>t { text-align: center; position: absolute; padding: inherit; border-radius: 6px; font-size: 11px; top: 40px; bottom: 0px; align-items: center; justify-content: center; width: 18px; background: var(--a); color: var(--b); display: flex; height: 16px; right: 0; left: 27px; } cmue bd>nt { display: block; position: relative; padding: 0 13px;} cmue bl>ft>btn { position: absolute; bottom: 0; width: 41px; height: 41px; margin: 5px; display: flex; border-radius: 50px; background: var(--b-t); align-items: center; justify-content: center; box-shadow: 0px 0px 2px 0px var(--aa); } cmue bl>ft>btn>i { transform: rotate( 271deg); } cmue bd>i:nth-child(1) { opacity: unset; } cmue bd>i:nth-child(4) { opacity: unset; } @media(max-width: 999px) { cmue bd { display: flex; align-items: center; justify-content: space-between;padding: 0 13px; } cmue bl>ft { display: none; } cmue bd>i { opacity: unset; margin: 11px; } cmue nt>t { left: 29%;; top: 4px; } cmue bd>i { height: 23px; width: 25px; } } cmue btn i.jtc { height: 19px; width: 19px; margin: 11px auto; padding: 2px; } cmue btn hv:nth-child(2) { display: none; } .menubar cmue bl>ft>.btn { position: absolute; right: -11px; margin: 0; border-radius: 14px; height: 33px; bottom: 7px; padding-right: 8px; background: var(--cg); box-shadow: unset; transition: 99ms; width: 39px; } .menubar cmue bl>ft>.btn i { transform: rotate(90deg); } .menubar cmue bl>ft>.btn i svg { fill: var(--b); } .menubar cmue btn hv:nth-child(1) { display: none; } .menubar cmue btn hv:nth-child(2){display:block;} .menubar cmue bl>ft>.btn:hover { width: 48px; } /* component:Nav*/ cnav bl hd from:hover { border: 1px solid var(--a); border-radius: 5px; width: 340px; } cnav hd bt { display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--bor); height: 24px; position: absolute; left: 0; gap: 2px;} cnav>bl { display: flex; padding: 3px 2px 0px 0px; justify-content: space-between; margin: 0 22px; } cnav bl ft name { display: flex; font-size: 0.77em; font-weight: 400; justify-content: center; align-items: center; } cnav bl hd i { height: 16px; width: 16px; } cnav bl hd { display: flex; align-items: center; justify-content: center; gap: 8px;} cnav bl hd from>input { display: block; background: var(--b-t); font-weight: 400; font-size: 0.88em; padding-left: 33px; height: 33px; min-width: 204px; border-radius: 6px; box-shadow: 0px 0px 1px 0px var(--bor); } cnav bl ft { display: flex; align-items: center; gap: 10px; justify-content: center; } cnav bl ft div { display: flex; align-items: center; justify-content: center; gap: 10px;} cnav bl ft btn i svg { fill: var(--b); } cnav bl hd from { display: flex; align-items: center; position: relative; width: 311px; transition: 333ms; border: 1px solid var(--bc); border-radius: 5px;} cnav bl ft btn i.i { height: 28px; width: 28px; } cnav bl ft btn i { height: 16px; width: 16px; } cnav bl hd from input:focus { border: 0px; } cnav bl ft name i { height: 19px; width: 19px; } cnav ft bt i svg { fill: var(--b); } cnav ft btn img { border-radius: 50%; } cnav bl hd from i:nth-child(2) svg { fill: var(--a); } @media(min-width: 999px){ cnav btn.btn.b { position: relative; } cnav bl hd dv i:nth-child(1) { display: none; } cnav ft bt { display: flex; align-items: center; justify-content: center; background: var(--a); border-radius: 4px; padding: 6px; } cnav bl hd i.jtc.bg { display: none; } cnav hd dv { display: flex; gap: 10px; align-items: center; } cnav bl hd from i:nth-child(1) {height: 15px;width: 15px;position: relative;right: -3px;} cnav bl hd from i:nth-child(2) { height: 15px; width: 15px;} cnav bl ft div btn { display: flex; align-items: center; justify-content: center; padding: 5px; background: none; } cnav bl ft div i svg { fill: var(--c); } } @media(max-width: 999px){ cnav>bl { display: flex; padding: 3px 2px 0px 0px; justify-content: space-between; margin: 0 0px; } cnav { display: block; margin: 0 11px; } cnav bl hd i:nth-child(1) { display: flex; } cnav hd svg:nth-child(2) { display: none; } cnav ft bt i { display: none; } cnav bl ft div btn { background: var(--b); border-radius: 50%; border: 1px solid var(--a); padding: 4px; } cnav bl hd i:nth-child(2) { display: none; } cnav ft name svg { display: none; } cnav bl ft div i { height: 16px; width: 16px; border-radius: 50%; } cnav bl ft { display: flex; align-items: center; gap: 10px; justify-content: space-between; width: 100%; } cnav bl hd { display: flex; } cnav bl hd i { height: 26px; width: 22px; margin-right: 7px; } cnav bl hd from { display: none; } cnav bl ft div btn i svg { fill: var(---c); } cnav ft img { display: none; } cnav bl ft div i:nth-child(4) { display: none; } cnav bl ft div i:nth-child(3) { display: none; } cnav bl ft div btn:nth-child(3) { display: none; } cnav bl ft div btn:nth-child(4) { display: none; } } /*component: New_Item*/ cnim>bl bd { padding: 28px 20px 10px; background: var(--b1); border-bottom: solid 1px var(--b-t); border-top: solid 1px var(--b-t); margin-left: 0; display: grid ; grid-template-columns: 530px 218px; } cnim>bl bd div d { display: flex ; align-items: center; } cnim>bl bd div d cm { display: flex ; align-items: center; } cnim>bl bd div dv { display: flex ; align-items: center; gap: 28%; } cnim>bl bd sl { display: grid ; align-items: center; background: unset; height: auto; grid-template-columns: 166px auto; margin-bottom: 26px; border-radius: unset; } cnim bd label.btn { position: unset; display: flex ; align-items: center; font-size: 0.7em; font-weight: 400; color: var(--cr); gap: 4px; } cnim bd sl i { width: 20px; } cnim>bl bd h4 { font-size: 0.7em; font-weight: 400; } cnim>bl bd t { font-size: 0.73em; color: var(--br); } cnim>bl sl input { font-size: 0.7em; width: calc(100% - 44px); margin: 0; border: solid 1px var(--bor); height: 31px; border-radius: 7px; background: var(--b); } cnim>bl ft div { padding-left: 18px; margin-top: 12px; } cnim>bl sl input:hover { border: solid 1px var(--a); } cnim>bl bd label { position: unset; } cnim>bl ft gg { display: flex ; align-items: center; gap: 29px; } cnim>bl ft d { background: var(--b1); border-top-left-radius: 5px; padding: 7px; border-bottom-left-radius: 5px; position: relative; left: 71px; z-index: 999; border-right: 1px solid var(--bor); } cnim>bl ft input { border: 1px solid var(--c0); position: relative; width: 223px; display: flex ; border-radius: 6px; height: 33px; } cnim>bl ft c { color: var(--cr); font-size: 0.77em; border-bottom: dotted 2px var(--bor); } cnim>bl ft dv { display: flex ; align-items: center; gap: 100px; margin-top: 11px; } cnim>bl ft dv>span { font-size: 0.77em; } cnim>bl ft sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex ; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 321px; } cnim>bl ft dv textarea { min-width: 218px; max-width: 241px; border-radius: 7px; } cnim>bl textarea:hover { border: solid 1px var(--a); } cnim>bl bd dd { border: 1px dashed var(--bor); border-radius: 11px; align-items: center; justify-content: center; color: var(--bor); background: var(--b); padding: 22px; display: flex ; flex-direction: column; margin: 0; min-height: 144px; } cnim>bl bd a { font-size: 0.77em; font-weight: 400; color: var(--a); } cnim>bl bd i { width: 31px; } cnim>bl bd dd:hover { border: 1px dashed var(--a); } cnim>bl bd svg { fill: var(--bor); } cnim>bl bd p { font-size: 0.77em; color: var(--a2); } cnim>bl bd span i { width: 12px; } cnim>bl bd span svg { fill: var(--a1); } cnim>bl hd h2 { font-size: 21px; font-weight: 400; padding: 11px; } cnof>bl hd btns i { height: 13px; display: block; width: 14px; } cnof>bl hd div btns { display: flex; align-items: center; gap: 9px; } cnof>bl hd dv input { outline: 0; display: block; max-width: 100%; color: var(--c); height: 30px; font-weight: bold; width: 71%; border-radius: 2px; box-shadow: 0px 0px 3px 0px var(--bor); padding: 0 22px; } cnof>bl hd dv input:focus { border: solid 0px var(--bc); } cnof>bl hd dv input:focus { box-shadow: 0px 0px 0px 2px; border-radius: 2px; } cnof>bl hd dv i { height: 20px; width: 22px; display: block; } cnof>bl hd div dv { display: flex; align-items: center; gap: 11px; } cnof>bl hd dv i:nth-child(3) { height: 20px; width: 22px; display: block; transform: rotate( 272deg); } cnof>bl hd>div { display: grid; justify-content: space-between; grid-template-columns: max-content auto; align-items: center; } cnof hd dv sl { display: flex; align-items: center; background: unset; height: fit-content; overflow: unset; margin-bottom: 0; } cnof>bl hd sl i { position: absolute; transform: rotate( 81deg); } cnof>bl hd sl i svg { fill: var(--a); } cnof>bl hd dv i svg { fill: var(--a); } cnof>bl hd span input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); height: 14px; font-weight: bold; padding: 0 12px; } cnof>bl hd span b { font-weight: 500; font-size: 14px; white-space: nowrap; } cnof>bl hd btns btn:nth-child(4) { color: var(--bor); } cnof>bl hd btns btn:nth-child(6) { color: var(--bor); } cnof>bl hd btns btn:nth-child(8) { color: var(--bor); } cnof>bl hd btns i svg { fill: var(--bor); } cnof>bl bd div t { display: grid; justify-content: center; margin-top: 11px; font-size: 0.77em; } cnof>bl hd btns btn:nth-child(10) { color: var(--bor); } cnof>bl bd div { display: grid; justify-content: center; margin-bottom: 55px; font-family: initial; } cnof>bl hd span { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; gap: 14%; } cnof { display: grid; padding: 12px; margin: auto; } cnof>bl hd btns i svg:nth-child(1) { fill: var(--aa); } @media(max-width:999px){ cnof>bl hd div btns { display: flex; align-items: center; gap: 9px; padding: 0 18px; overflow-y: scroll; max-width: 267px; margin: unset; margin-bottom: 13px; } cnof>bl hd btns btn { white-space: nowrap; } cnof>bl hd span b { font-weight: 500; font-size: 14px; width: -webkit-fill-available; white-space: nowrap; } cnof>bl bd { display: flex; align-items: center; justify-content: start; } cnof { display: grid; margin: auto; max-width: 333px; padding: 12px; box-shadow: 0px 0px 2px 0px var(--bor); } cnof>bl hd span { display: grid; align-items: center; gap: 9px; overflow-y: scroll; max-width: 267px; margin-bottom: 5px; padding: 11px; } cnof>bl hd>div { display: block; } cnof>bl hd div dv { display: flex; margin-bottom: 12px; } }cnoo {display: block;margin: 11px auto;} cnoo hd p { display: flex; justify-content: center; } cnoo hd span { display: flex; justify-content: center; } cnoo hd span i { width: fit-content; } cnoo hd span i svg { fill: var(--aa); } cnoo bd { margin: 0 22px; display: grid; height: 333px; } cnoo ft b { margin: 0 22px; } @media(max-width:999px){ cnoo hd p { font-size: 14px; padding: 11px; } } /*No*/ cnpe>bl { display: block; background: var(--b-t95); padding: 80px; border: 1px solid var(--bc); } cnpe>bl>hd { display: flex; flex-direction: column; align-items: center; justify-content: center; } cnpe>bl>hd>h4 { font-size: 1.66em; font-weight: 400; } cnpe>bl>bd>span { margin-top: 12px; color: var(--a); font-size: 0.77em; } cnpe>bl>hd>p { font-size: 0.88em; color: var(--c0); font-weight: 400; } cnpe>bl>bd { display: flex; align-items: center; justify-content: center; flex-direction: column; } cnpe>bl>bd>btn { display: flex ; align-items: center; justify-content: center; background: var(--aa); padding: 13px; border-radius: 6px; color: var(--b); font-size: 0.77em; position: relative; } @media(max-width:999px){ cnpe>bl { display: block; background: var(--b-t95); padding: 34px; border: 1px solid var(--bc); } cnpe>bl>hd>p { text-align: center; } } /*NoData*/ nodt thead>tr { border: 0; } nodt>bl>bd div { display: flex ; justify-content: center; align-items: center; } nodt>bl>bd div p { font-size: 15px; color: var(--a2); } /*No_Notifications*/ cnnc { display: block; padding: 11px; } cnnc>bl { display: flex; flex-direction: column; text-align: center; } cnnc bl hd { display: flex; justify-content: center; margin-bottom: 13px; } cnnc>bl bd>p { font-size: 0.77em; margin: 4px; margin-bottom: 11px; } cnnc hd i { height: 19px; background: var(--cg); padding: 12px; width: 24px; } /*No_Webiners*/ nowb bl>hd>i { height: 150px; width: 150px; } nowb bl>hd { display: flex; justify-content: center; } nowb { display: block; padding: 22px;} nowb bl>bd>p { text-align: center; margin: 0px; font-size: 0.99em; opacity: 65%; } nowb ft>btn { display: flex; align-items: center; background: var(--b1); padding: 12px; justify-content: center; color: var(--a); width: 42%; margin: 11px auto; font-size: 0.88em;border-radius: 4px;transition: 333ms; } nowb ft>btn i { height: 12PX; width: 12PX; margin: 0 5px; } nowb ft>btn i svg { fill: var(--aa); } nowb ft>btn:hover { background: var(--a); color: var(--b); } nowb ft>btn:hover i svg { fill: var(--b); } /*Notebook*/ czno bl>hd>i { height: 65px; width: 65px; margin-bottom: 11px; } czno bl>hd { display: flex; justify-content: center; } czno { display: block; padding: 22px;} czno bl>bd>p { text-align: center; margin: 0px; font-size: 15px; font-weight: 400; } czno ft>btn { display: flex; align-items: center; background: var(--a); padding: 10px; justify-content: center; color: var(--a); width: fit-content; margin: 11px auto; font-size: 0.77em; color: var(--b); border-radius: 3px; width: 14%; } czno ft>btn i { height: 12PX; width: 12PX; margin: 0 5px; } czno ft>btn i svg { fill: var(--aa); } /*Notebooks*/ .Notebook Notebooks { right: 0; backdrop-filter: blur(2px); background: var(--bor); opacity: 1; visibility: visible; } Notebooks { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; overflow: hidden; visibility: hidden; } czon>bl { display: block; box-shadow: var(--bs-b); position: absolute; right: 0; width: 100%; max-width: 400px; background: var(--b); height: 100%; } czon hd f { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; margin-left: 10px; } czon hd f i { height: 22px; width: 22px; } czon hd f i svg { fill: var(--cr); } czon hd d>i { display: block; background: var(--bc); padding: 11px; width: 10px; height: 10px; position: absolute; top: 0px; left: 0; border-radius: 0; } czon>bl>hd { padding: 22px; display: block; border-bottom: solid 1px var(--bc); } czon f>h3 { font-weight: 400; } czon btn.btn.t { position: relative; } /*Notification*/ .Notifications notification { right: 0; backdrop-filter: blur(0px); background: var(--bor); opacity: 1; visibility: visible; } notification { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 333ms; height: 100%; right: -100%; overflow: hidden; visibility: hidden; top: 44px;} cnfo hd i { height: 62px; display: block; } cnfo bd b { display: block; font-size: 23px; font-weight: 400; } cnfo>bl { display: grid; grid-template-columns: 55px auto 44px; border-radius: 11px; padding: 7px 11px; align-items: center; background: var(--bc); border: 0.22px solid var(--aat); margin: 7px 0; } cnfo>bl hd>i { height: 44px; width: 44px; border-radius: 55%; overflow: hidden; background: rgb(255 184 180 / 64%); } cnfo bd span { display: block; font-size: 16px; } cnfo>bl name { font-size: 0.88em; line-height: 1.55; } cnfo>bl p { margin: 0; font-size: 0.66em; opacity: .77; } cnfo>bl ft>btn { display: flex; align-items: center; justify-content: center; height: 33px; width: 33px; border-radius: 55%; justify-self: end; transition: 95ms; } /*Notifications*/ mnto { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available; } mnto hd dv { display: flex; gap: 4px; align-items: center; justify-content: center; } mnto hd i { height: 15px; width: 15px; } mnto hd mg {display: flex;gap: 3px;align-items: center;} mnto hd span { font-size: 0.77em; } mnto hr { margin: 0; border: 1px solid var(--bor); height: 13px; } mnto hd { padding: 12px; background: var(--b1); border-bottom: 1px solid var(--bor); line-height: 2; } mnto hd span:nth-child(1) {padding-right: 6px; display: flex; } mnto hd span:focus { border-bottom: 2px solid var(--a); } mnto bd i { height: 170px; } mnto bd { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; margin: 0 17px; } mnto bd p { font-size: 0.99em; font-weight: 400; display: flex; align-items: center; justify-content: center; flex-direction: column; } mnto hd h4 { display: flex; align-items: center; justify-content: space-between; } mnto bd b { font-weight: 400; } mnto dv i.jtc svg { fill: var(--cr); } /*Organization*/ coro hd i { height: 62px; display: block; } coro bd b { display: block; font-size: 23px; font-weight: 400; } coro>bl { display: grid; grid-template-columns: 55px auto 44px; padding: 11px 19px; align-items: center; background: var(--bg); border-top: solid 1px var(--bc); border-bottom: solid 1px var(--bc); padding-right: unset; } coro>bl hd>i { height: 15px; width: 15px; border: solid 1px var(--bc); padding: 16px; background: var(--b); border-radius: 11px; border: solid 1px var(--bor); } coro bd span { display: block; font-size: 16px; } coro>bl name { font-size: 0.88em; line-height: 1.55; } coro>bl p { margin: 0; font-size: 0.77em; opacity: .77; } coro>bl ft>btn { display: flex; align-items: center; justify-content: center; height: 33px; width: 33px; border-radius: 55%; justify-self: end; transition: 95ms; } coro>bl hd>i svg { fill: var(--aa); } coro ft>i { height: 22px; width: 22px; background: var(--a); border-radius: 50px; } coro ft>i svg { height: 16px; width: 16px; fill: var(--b); } /*Organizations*/ .Organizations Organizations { right: 0; backdrop-filter: blur(2px); background: var(--bor); opacity: 1; visibility: visible; } Organizations { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; visibility: hidden; } cort>bl { display: block; background: var(--b); max-width: 400px; right: 0; position: absolute; box-shadow: var(--bss), -1px 0px 3px var(--c0); height: -webkit-fill-available; width: -webkit-fill-available; backdrop-filter: drop-shadow(0 0 7px 3px var(--bc)); } cort>bl>hd { padding: 22px; display: flex; align-items: center; justify-content: space-between; background: var(--b-t); border-bottom: solid 1px var(--bor); } cort>bl>hd dv { display: flex; align-items: center; gap: 9px; } cort dv f>i { height: 16px; width: 18px; } cort dv>f { display: flex; align-items: center; gap: 3px; border-right: solid 1px var(--bor); padding-right: 6px; } cort dv>f t { font-size: 0.88em; color: var(--aa); } cort dv f>i svg{fill:var(--aa);} cort dv>i { height: 22px; width: 22px; } cort dv>i svg { fill: var(--cr); } cort bd>h3 { padding: 11px 20px; display: block; font-size: 17px; font-weight: 500; } cort hd>h3 { display: block; font-weight: 500; } cort>bl:before { content: ""; position: absolute; border-style: solid; border-width: 11px 11px 0; border-color: var(--c0) transparent; display: block; width: 0; z-index: 1; top: -12px; left: 27%; transform: rotate(-180deg); } cort>bl:after { content: ""; position: absolute; border-style: solid; border-width: 11px 11px 0; border-color: var(--b-t) transparent; display: block; width: 0; z-index: 1; top: -11px; left: 27%; transform: rotate(-180deg); } @media(max-width:999px){ }cops>bl> hd { padding: 22px; font-size: 12px; border-bottom: solid 2px var(--c0); margin: 15px; } @media(max-width: 999px){ cops bd flex { display: block; } } cppv { display: block; box-shadow: var(--bss); width: fit-content; padding: 11px; border-radius: 6px; margin: 11px; background: var(--b); } cppv hd div { display: flex; padding-bottom: 22px; align-items: center; } cppv hd div dv { display: flex; } cppv hd div i { display: flex; height: 34px; width: fit-content; padding-right: 11px; } cppv hd div span { font-style: normal; font-size: 12px; display: flex; align-items: center; } cppv hd div p i { display: flex; height: 20px; gap: 5px; } cppv hd p svg path { fill: none; } cppv hd div p l { font-size: 11px; } cppv bd { display: block; } cppv bd div d { display: flex; } cppv bd dv { display: flex; padding-top: 22px; } cppv bd dv u { display: block; color: var(--aa); font-size: 13px; line-height: 1.5; width: 100px; } cppv bd dv i { display: flex; height: 13px; width: fit-content; position: absolute; left: 88px; bottom: 150.92px; } cppv bd dv i svg { fill: var(--aa); } cppv bd div span { display: block; font-size: 11px; color: var(--c0); padding-top: 11px; } @media(max-width: 999px){ cppv { display: block; margin: 11px auto; } } /* Component Overview */ covw>bl hd btns i { height: 13px; display: block; width: 14px; } covw>bl hd div btns { display: flex; align-items: center; gap: 9px; } covw>bl hd dv input { outline: 0; display: block; max-width: 100%; background: var(--b); color: var(--c); height: 30px; font-weight: bold; width: 61%; border-radius: 2px; box-shadow: 0px 0px 2px 0px var(--bor); padding: 0 26px; } covw>bl hd dv input:focus { border: solid 0px var(--bc); } covw>bl hd dv input:focus { box-shadow: 0px 0px 0px 2px; border-radius: 2px; } covw>bl hd div dv { display: flex; align-items: center; gap: 15px; } covw>bl hd dv i:nth-child(3) { height: 20px; width: 30px; display: block; transform: rotate( 357deg); } covw hd dv sl { display: flex; align-items: center; background: unset; height: fit-content; overflow: unset; margin-bottom: 0; } covw>bl hd sl i { position: absolute; transform: rotate( 81deg); } covw>bl hd sl i svg { fill: var(--a); } covw>bl hd dv i svg { fill: var(--a); } covw>bl hd span { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; justify-content: space-between; padding: 8px; margin: 11px; width: -webkit-fill-available; grid-column-start: 1; grid-column-end: 3; align-items: center; } covw>bl hd span input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); color: var(--c); height: 14px; font-weight: bold; padding: 0 12px; } covw>bl hd span b { font-weight: 500; font-size: 14px; } covw>bl hd btns btn:nth-child(4) { color: var(--aa); } covw>bl hd btns btn:nth-child(6) { color: var(--aa); } covw>bl hd btns btn:nth-child(8) { color: var(--aa); } covw>bl hd btns i svg { fill: var(--bor); } covw>bl bd div { display: grid; justify-content: center; } covw>bl bd div t { display: grid; justify-content: center; margin-top: 11px; } covw>bl hd btns btn:nth-child(10) { color: var(--aa); } covw>bl hd dv t { white-space: nowrap; } covw>bl hd btns h4 { font-size: 1.88em; } covw>bl hd dv i { height: 20px; width: 33px; display: block; } covw>bl hd>div { display: grid; justify-content: space-between; grid-template-columns: max-content auto; align-items: center; padding: 11px; margin: auto; max-width: 88%; background: var(--bc); border: solid 1px var(--bor); } covw>bl hd btns btn { font-weight: 500; font-size: 0.99em; } @media(max-width:999px){ covw>bl hd div btns { display: flex; align-items: center; gap: 9px; font-size: 0.77em; margin-bottom: 14px; } covw>bl hd>div { display: block; } } /*Partne_Account*/ cnto thead { display: block; } cnto bd td btn { display: flex; padding: 7px; align-items: center; justify-content: center; color: var(--c); background: var(--bc); } cnto tbody { display: block; } cnto { padding: 10px; display: block; } cnto hd input { padding: 2px 5px 0px 25px; border-radius: 3px; border: 2px solid var(--bor); height: 30px; } cnto hd i { height: 20px; width: 20px; } cnto hd span { display: flex; align-items: center;} cnto hd from { display: flex; } cnto td { display: table-cell; vertical-align: inherit; unicode-bidi: isolate; } cnto hd from i { height: 19px; width: 19px; position: relative; top: 8px; left: 25px; } @media(min-width:999px){ cnto td span { display: flex; gap: 11px; color: var(--c); font-size: 13px; } cnto thead tr { height: 40px; display: flex; background: var(--b-t); justify-content: space-between; } cnto hd { display: flex; align-items: center; justify-content: space-between; } cnto tr { background: var(--b-t); display: flex; align-items: center; justify-content: space-between; padding: 6px; } cnto bd table {font-size: 14px; color: var(--b); background: var(--b33); padding-top: 8px; display: block; } cnto th { text-align: left; padding: 8px 12px; box-shadow: unset; color: var(--c); }} cnto tr td { padding: 10px; height: 16px; text-align: justify; color: var(--a); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 2px; } cnto bd input { height: 18px; width: 18px; display: block; } cnto bd number { display: flex; align-items: center; justify-content: center; gap: 11px; } @media(max-width:999px){ cnto th { color: var(--c); padding: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; } cnto bd number { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 11px; } cnto tr { background: var(--b-t); display: flex; align-items: center; justify-content:space-between; } cnto bd table { border-collapse: collapse; font-size: 14px; color: var(--b); background: var(--b33); } cnto hd input { display: none; } cnto hd span { display: flex; align-items: center; font-size: 13px; } cnto hd from i { display: none; } cnto hd i { height: 20px; width: 20px; } cnto td span:nth-child(3) { padding-left: 5px; } cnto bd tr td:nth-child(1) { padding-left: 0; } cnto td span { font-size: 11px; display: flex; gap: 4px; align-items: center; } cnto tr td { padding: 8px 1px 10px 5px; height: 16px; text-align: justify; background: var(--b-t95); color: var(--a); font-weight: 500; } cnto hd { display: flex; align-items: center; justify-content: space-between; } cnto thead tr { height: 40px; display: flex; background: var(--b-t); justify-content: space-around; } cnto bd td btn { display: none; }} /*Partner_Benefit*/ pbfo { display: block; box-shadow: 0px 0px 5px 0px var(--bor); border-radius: 4px; padding: 11px; background: var(--b); } pbfo hd i { height: 66px; width: 66px; display: block; } pbfo hd p { margin: 0; font-size: 0.66em; color: var(--c0); } pbfo hd i img { height: 122px; width: 122px; object-fit: cover; } pbfo bd a { font-weight: 400; margin: 0 2px; color: var(--a); text-decoration: underline; font-size: 11px;} pbfo bd f i { height: 14px; width: 14px; } pbfo bl bd { display: block; margin-top: 40px; } pbfo bd btn { background: var(--aa); display: flex; align-items: center; justify-content: center; color: var(--b); font-size: 13px; width: 67px; padding: 7px; margin-top: 13px; } pbfo bl ft { font-weight: 400; font-size: 11px; margin-block-start: 0; margin-block-end: 0; display: flex; align-items: center; background: var(--cbg); padding: 0px 11px; margin: 11px 0; justify-content: space-between; } pbfo ft i:nth-child(1) { height: 11px; width: 11px; border-radius: 50%; border: solid 1px; } pbfo ft i { height: 18px; width: 18px; } pbfo ft b { display: flex; align-items: center; gap: 2px; } /*Partner_Benefits*/ pbfs btns btn:nth-child(1) { padding: 6px 10px; align-items: center; font-size: 13px; background: var(--bg); border-bottom: solid 2px var(--a); } pbfs btns btn { padding: 6px 10px; align-items: center; font-size: 13px; background: var(--bg); } pbfs bd d { display: grid; grid-template-columns: auto auto; gap: 13px; padding: 27px 0; } @media(max-width:666px){ pbfs bd d { grid-template-columns: auto; } }cppoe { display: block; box-shadow: var(--bss); width: fit-content; padding: 11px; border-radius: 6px; background: var(--b); } cppoe hd div { display: flex; padding-bottom: 22px; align-items: center; } cppoe hd div i { display: flex; height: 85px; width: fit-content;} cppoe hd div span { font-style: normal; } cppoe hd div p i { display: flex; height: 20px; gap: 5px; } cppoe hd div p i svg { fill: var(--cg); } cppoe hd div p l { font-size: 11px; } cppoe bd { display: block; } cppoe bd div d { display: flex; } cppoe bd dv { display: block; } cppoe bd dv u { display: block; color: var(--aa); font-size: 13px; line-height: 1.5; } cppoe bd dv { display: block; padding-left: 22px; padding-bottom: 16px; } cppoe bd dv div { display: flex; } cppoe bd div i { display: flex; height: 15px; width: fit-content; position: relative; top: 6px; left: 2px; } cppoe bd d span { font-size: 11px; color: var(--c0); display: block; padding-left: 20px; margin-top: 6px; padding-bottom: 11px; } cppoe bd f { display: flex; width: fit-content; gap: 6px; padding-left: 22px; } cppoe bd f i { display: flex; height: 14px; width: fit-content; } cppoe bd f span { font-size: 11px; color: var(--c0); } cppoe ft div { display: flex; gap: 8px; padding-top: 66px; width: fit-content; padding-left: 20px; } cppoe ft div i { display: flex; height: 21px; width: fit-content;} cppoe ft div i svg { fill: var(--aa); } @media(max-width: 999px){ cppoe hd div p { display: block; font-size: 0.8rem; } cppoe { display: block; margin: 11px auto; } }cppos bd flex { display: flex; gap: 12px; padding-left: 22px; } @media(max-width: 999px){ cppos bd flex { display: grid; padding-left: unset; } } /* component/:Partner_Service*/ ceoo hd i { height: 44px; width: 44px; } ceoo>bl { box-shadow: var(--bs-b); border-radius: 4px; background: var(--b-t); line-height: 26px; padding: 17px; } ceoo bl hd { display: flex; align-items: center; gap: 6px; } ceoo bd p { font-weight: 400; font-size: 0.77em; } ceoo ft a { font-weight: 400; font-size: 14px; color: var(--a); text-decoration: underline; } ceoo ft i { height: 15px; display: block; width: 15px; margin: 0px 1px; } ceoo bl ft { display: flex; align-items: center; }ceoo bl ft { display: flex; } /*component:Partner_Services*/ ceos hd h3 { margin-bottom: 26px; margin-top: 14px; font-weight: 400; font-size: 17px; } ceos>bl { display: block; padding: 12px; } ceos btns btn:nth-child(1) {background: unset; padding: 6px 2px; align-items: center; font-size:15px; background: var(--bg); border-bottom: solid 2px var(--a); } ceos btns btn{padding: 6px 10px; align-items: center; font-size: 15px;background: unset;} ceos hd p { font-weight: 400; font-size:0.88em; margin: 14px 0;line-height: 19px; } ceos bd d { display: grid; gap: 22px; } @media(max-width:999px){ ceos>bl { padding: 0; } } ceos hd a { margin: 0 2px; } /*PaymentHistories*/ mapo>bl { display: block; border: 1px solid var(--bc); } mapo>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} mapo hd h4 svg { fill: var(--a); } mapo hd dv i { height: 22px; width: 22px; position: unset; } mapo hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } mapo hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } mapo hd dv i svg:nth-child(1) { fill: var(--b); } mapo hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } mapo hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } mapo hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } mapo hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } /*PaymentHistory*/ clpo>bl>bd { display: block; padding: 0; background: var(--b1); } clpo bd t i { height: 14px; width: 14px; } clpo>bl>bd:hover { background: var(--bc); } clpo bd input { height: 15px; width: 15px; border: 1px solid var(--bc); } clpo bd rs { position: absolute; right: 19px; font-size: 0.88em; font-weight: 500; } clpo bd name { display: flex; align-items: center; font-size: 0.88em; font-weight: 500; gap: 6px; } clpo bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } clpo bd div { display: flex; flex-direction: column; line-height: 16px; margin-left: 26px; } clpo bd t { margin: 8px 0px; font-size: 0.8em; display: flex; align-items: center; gap: 11px; color: var(--a2); } clpo>bl>bd c { color: var(--green); } clpo>bl>bd i { width: 13px; } clpo>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } /*PaymentInformation*/ cpfn hd>cc>h2 { font-size: 19px; font-weight: 500; } cpfn hd>cc { display: flex; justify-content: space-between; padding: 10px 14px; align-items: center; margin: 11px 0; } cpfn btns>btn>i { height: 15px; width: 19px; } cpfn cc>btns>btn { border: 1px solid var(--bor); display: grid; padding: 5px 5px; border-radius: 4px; align-items: center; justify-content: center; position: relative; background: var(--b1); } cpfn hd>cc>btns { display: flex; gap: 8px; align-items: center; justify-content: center; } cpfn c>i>svg { fill: var(--cr); border-left: solid 1px var(--bor); } cpfn bd>d{max-width: 793px;margin:auto;} cpfn cc>c>i { height: 19px; width: 19px; } cpfn d>ss>i { height: 15px; width: 15px; } cpfn d>ss { padding: 5px; display: flex; width: fit-content; font-size: 0.88em; margin: 6px; border-radius: 3px; align-items: center; gap: 5px; } cpfn hd>mg { display: flex; background: var(--b1); border-top: solid 1px var(--c0); border-bottom: solid 1px var(--c0); align-items: center; flex-wrap: wrap; gap: 11px; } cpfn d>ss:hover { background: var(--b); box-shadow: 0px 0px 0px 1px var(--bor); } cpfn mg>d::after { content: ''; height: 16px; width: 1px; background: var(--bor); display: block; position: absolute; top: 10px; bottom: 0; right: 0; left: -7px; } cpfn mg>d { position: relative; } cpfn mg>d:nth-child(1)::after { content: ''; background: unset; } cpfn d>hh>c { position: absolute; padding: 4px; z-index: 9999999; display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 6px; width: max-content; gap: 3px; } cpfn m>i>svg { fill: var(--b); } cpfn c>m>i { height: 14px; width: 14px; } .Send ctnf d>hh>c {display: grid; } cpfn hh>c>m { display: flex; align-items: center; background: var(--a); padding: 8px; gap: 9px; border-radius: 4px; } cpfn m>t{font-size: 0.88em;color:var(--b);} .PDF ctnf d>hh>c {display: grid; } @media(max-width:999px){ cpfn>bl>bd>d { padding: 7px; } cpfn { padding: 11px 0; display: block; } } /*PaymentNew*/ ctwe { display: block; } ctwe bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; } ctwe hd d label { position: relative; display: flex; width: 37px; height: 15px; } ctwe hd d label input { opacity: 0; width: 0; height: 0; } ctwe hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } ctwe hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } ctwe hd d label input:checked + span { background-color: var(--aa); } ctwe hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } ctweq bl hd>h2 { font-weight: 400; font-size: 1.44em; } ctwe hd>i { display: flex; height: 24px; width: 24px; } ctwe hd>btn>t { font-size: 0.88em; } ctwe d>div { display: grid; grid-template-columns: auto auto; } ctwe>bl>bd>d { padding: 22px; } ctwe>bl>bd{max-width: 898px;} ctwe p>em>i { height: 11px; width: 11px; } ctwe ft>p>em { margin: 0 3px; display: inline-flex; gap: 3px; } ctwe ft>p>b { color: var(--cbg); } ctwe ft>p { padding: 22px; font-size: 0.77em; display: block; opacity: 77%;} @media(max-width:999px){ ctwe>bl>bd>d { padding: 7px; } ctwe bl hd>h2 { font-size: 20px; } } @media(max-width:1255px){ ctwe d>div { grid-template-columns: auto; } } /*PaymentUpdate*/ mpuo { position: relative; justify-content: center; display: block ; } mpuo>bl>hd { display: flex; flex-direction: column; line-height: 2; padding: 28px 28px; border-bottom: 1px solid var(--bc); margin: 0 0 20px; } mpuo hd name {font-size: 0.99em; } mpuo span { color: var(--bor); font-size: 0.87em; font-weight: 400; display: flex; white-space: nowrap; } mpuo bd div b { display: block; position: relative; left: 50%; } mpuo>bl>ft table tr { background: unset; border-bottom: unset; border-top: unset; } mpuo>bl>ft table th { font-size: .76615625rem; padding: .6rem .5rem; height: 15px; overflow-wrap: break-word; text-align: -webkit-match-parent; background: var(--bt); border-radius: 1px; } @media(min-width:999px){ mpuo>bl { box-shadow: 0px 0px 6px var(--bor); display: block; padding: 10px; margin: 17px; font-family: Ubuntu, 'WebFont-Ubuntu'; position: relative; width: 900px; } mpuo bd div dv b { border-bottom: 1px solid var(--bor); color: var(--c); width: 50%; position: absolute; left: 22%; }} mpuo bd dv { display: flex; align-items: center; line-height: 2; } mpuo bd dv ccc { display: flex; padding: 16px 15px; position: absolute; right: 10%; background: var(--green); flex-direction: column; align-items: center;} mpuo bd dv ccc span { color: var(--b); } mpuo bl>ft { padding: 30px 0; display: block; } mpuo ft div span { display: flex; color: var(--c); opacity: 80%; justify-content: space-between; } mpuo ft div t { border-bottom: 1px solid; padding-bottom: 30px; } mpuo ft div>name { color: var(--a); font-size: 0.99em; } mpuo ft>div { border-bottom: 1px solid var(--bor); padding-bottom: 70px; display: block; } mpuo ft>dv { padding: 22px 22px; display: block; line-height: 2; border-bottom: 1px solid var(--bor); } mpuo ft dv>t { color: var(--bor); } mpuo ft dv>span { color: var(--c); } mpuo hd>div { position: absolute; top: -5px; left: -5px; overflow: hidden; width: 96px; height: 94px; } mpuo hd div>span { text-align: center; color: #fff; top: 14px; left: -30px; width: 135px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: #1fcd6d; border-color: #18a155; justify-content: center; font-family: sans-serif; font-size: 0.77em; } mpuo hd div>span:before { content: ""; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 24px; transform: rotate(-45deg); left: -3px; border-left: 2px solid transparent; color: #2e8fda; } mpuo hd div>span:after { content: ""; border-top: 5px solid transparent; border-left: 5px solid; border-left-color: inherit; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 30px; transform: rotate( 77deg); right: 11px; border-bottom: 3px solid transparent; color: #2e8fda; } @media(max-width:999px){ mpuo bd>div>b { display: block; position: relative; left: 20%; } mpuo bd div span b { position: absolute; display: block; color: var(--c); font-size: 11px; } mpuo>bl { box-shadow: 0px 0px 6px var(--bor); display: block; padding: 17px; font-family: Ubuntu, 'WebFont-Ubuntu'; margin: 12px 0; } mpuo bd dv ccc { display: none; } mpuo bd dv span { display: flex; justify-content: space-between; align-items: center; font-size: 11px; } }/*component:-Payment_DetailUpdate*/ cpde>bl>bd p { font-size: 0.84em; font-weight: 400; margin: 0; } cpde>bl>bd span { font-size: 0.77em; font-weight: 400; } cpde>bl>bd div { display: grid; background: var(--b1); padding: 11px; border-radius: 11px; width: -webkit-fill-available; margin-left: auto; max-width: 377px; margin: 22px 7px 22px auto; justify-content: end; } cpde>bl>bd b { display: flex; align-items: center; margin-bottom: 12px; gap: 4pc; justify-content: space-between; } cpde>bl>bd d { display: grid ; align-items: center; gap: 11px; margin-bottom: 32px; } cpde>bl>bd d textarea:hover { border: solid 1px var(--aa); } cpde>bl>bd d textarea { border-radius: 11px; height: -webkit-fill-available; min-height: 125px; border: solid 1px var(--bor); padding: 11px; min-width: 1105px; max-width: 1105px; } cpde>bl>bd d textarea:focus { color: var(--c); background-color: var(--b); border-color: var(--aa); outline: 0; } cpde>bl>bd dvv dc p { font-size: 0.77em; color: var(--a1); padding-bottom: 0; } cpde>bl>bd i { width: 19px; } cpde>bl>bd dvv btn { display: flex ; align-items: center; } cpde>bl>bd cc { font-size: 0.77em; } cpde>bl>bd dvv btn { display: flex ; align-items: center; border: dotted 2px var(--bc); width: 109px; padding: 7px; border-radius: 6px; } cpde>bl>bd dvv btn:hover { border: dotted 2px var(--a); } cpde>bl>bd dc { display: flex ; align-items: center; gap: 4px; } cpde>bl>bd input { width: 12px; height: 20px; } cpde>bl>bd dvv p { font-size: 0.77em; color: var(--a1); padding-bottom: 22px; } cpde>bl>ft dv { display: flex ; align-items: center; border-top: solid 1px var(--b-t); padding: 12px 8px 27px 4px; } cpde>bl>ft cc { font-size: 0.85em; color: var(--a2); font-weight: 500; } cpde>bl>ft p { font-size: 0.77em; color: var(--a2); display: flex ; align-items: center; } cpde>bl>ft i { width: 14px; } cpde>bl>bd dvv btn.this { display: flex ; align-items: center; border: solid 1px var(--bc); width: 26px; padding: 7px; border-radius: 6px; background: var(--a); color: var(--b); } cpde>bl>bd dvv btns { display: flex; align-items: center; gap: 11px; } cpde>bl>bd dvv btn.this i svg { fill: var(--b); } cpde>bl>bd dvv btn.this i { width: 14px; height: 14px; transform: rotate(45deg); } @media(max-width:999px){ cpde>bl>bd d textarea { border-radius: 11px; height: -webkit-fill-available; min-height: 125px; border: solid 1px var(--bor); padding: 11px; min-width: 367px; max-width: 347px; } cpde>bl>bd d t { text-align: center; } cpde>bl>bd d textarea { display: block; min-width: auto; } cpde>bl>ft p { min-width: max-content; } cpde>bl>ft cc { font-size: 0.85em; color: var(--a2); font-weight: 500; min-width: fit-content; } cpde>bl>ft dv { display: flex ; align-items: center; border-top: solid 1px var(--b-t); overflow: scroll; } } /* Copmonent -:- Payment_InfoUpdate */ cpiu>bl>bd sl { display: grid; align-items: center; border: unset; height: auto; border-radius: 0; background: unset; grid-template-columns: 215px auto; font-size: 0.88em; margin-bottom: 22px; } cpiu>bl>bd sl d input { display: block; margin: 0; height: 30px; width: auto; padding: 0; font-weight: 500; padding-left: 3px; border: 0; } cpiu>bl>bd sl d { display: grid; border: solid 1px var(--bor); border-radius: 7px; width: -webkit-fill-available; grid-template-columns: 41px auto; max-width: 440px; } cpiu>bl>bd sl input { display: block; margin: 0; height: 37px; padding: 0; font-weight: 500; padding-left: 3px; border: solid 1px var(--bor); border-radius: 7px; width: -webkit-fill-available; max-width: 436px; } cpiu>bl>hd { margin-bottom: 22px; } cpiu>bl>hd d { display: grid; align-items: center; grid-template-columns: 215px auto; margin-bottom: 22px;} cpiu>bl>hd d t { font-size: 0.88em; color: var(--red); } cpiu>bl>hd d dv { display: flex; border: solid 1px var(--bor); padding: 8px; border-radius: 7px; width: -webkit-fill-available; max-width: 424px; } cpiu>bl>hd d dv t { color: var(--c); } cpiu>bl>bd sl d t { background: var(--bc); border-right: solid 1px var(--bor); padding-left: 3px; align-items: center; display: flex; border-radius: 8px 0px 0px 8px; } cpiu>bl>bd sl:nth-child(4) lable { color: var(--red); } cpiu>bl>bd sl:nth-child(3) lable { color: var(--red); } cpiu>bl>bd d1 { display: grid; align-items: center; grid-template-columns: 215px auto; margin-bottom: 22px; } cpiu>bl>bd d1 div { display: flex; align-items: center; gap: 11px; } cpiu>bl>bd d1 div dv { display: flex; align-items: center; font-size: 0.88em; gap: 4px; } cpiu>bl>bd d1 div dv input { width: 17px; height: 17px; margin: 0; } @media(max-width:999px){ cpiu>bl>hd d { display: grid ; align-items: center; grid-template-columns: auto; margin-bottom: 22px; } cpiu>bl>bd sl { grid-template-columns: auto; } cpiu>bl>bd d1 { display: grid; align-items: center; grid-template-columns: 121px auto; margin-bottom: 22px; overflow: scroll; } cpiu>bl>bd d1 div dv { display: flex ; align-items: center; font-size: 0.88em; gap: 4px; min-width: fit-content; } } /*Payment_InvoiceUpdate*/ mpus>bl>hd { border-bottom: 1px solid var(--bor); display: flex; justify-content: space-between; padding: 10px 14px; } mpus hd btn i { height: 15px; width: 19px; } mpus hd btns>btn { border: 1px solid var(--bor); display: grid; padding: 8px 6px; border-radius: 4px; align-items: center; justify-content: center; position: relative; } mpus hd btns>btn.close { border-left: 1px solid var(--bor); border-right: none; border-bottom: none; border-top: none; border-radius: 0; } mpus>bl>hd>btns { display: flex; gap: 8px; align-items: center; justify-content: center; } mpus hd btn.close i svg { fill: var(--cr); } mpus ft d t { color: var(--a); }mpus bd mg span { font-size: 0.77em; } mpus>bl>bd>mg>d>i { height: 17px; width: 17px; } mpus>bl>bd>mg>d { display: flex; align-items: center; border: 1px solid var(--bc); padding: 11px 11px 12px; gap: 5px; } mpus>bl>bd>mg { display: flex; align-items: center; border-bottom: 1px solid var(--bc);} mpus>bl>ft { padding: 22px; display: block; } mpus>bl>ft>aa { font-size: 0.88em; display: flex; gap: 4px; justify-content: space-between; max-width: 200px; } @media(min-width:999px){ mpus ft>aa>i { height: 18px; width: 18px; filter: grayscale(1); position: absolute; left: 14%; } mpus>bl>ft>span { display: block; padding-top: 38px; font-size: 0.99em; } mpus ft d { font-size: 0.88em; display: flex; border-bottom: 1px solid var(--bor); padding-bottom: 25px; } } @media(max-width:999px){ mpus>bl>bd>mg { display: flex; align-items: center; border-bottom: 1px solid var(--bc); overflow-x: scroll; } mpus>bl>bd>mg>d { display: flex; align-items: center; border: 1px solid var(--bc); gap: 7px; } mpus ft>aa>i { height: 18px; width: 18px; filter: grayscale(1); position: absolute; left: 42%; } } /*Payment_ReceiptInfo*/ cpyr { display: block; padding: 11px 19px; } cpyr div>aa { color: var(--a); font-size: 0.88em; } cpyr div>c {font-size: 0.88em; } cpyr div>t { font-size: 0.88em; } cpyr bl>hd { display: flex; justify-content: end; margin-bottom: 33px; } cpyr d>c { font-size: 0.88em; color: var(--cbg1); margin: 25px 0px; display: block; } cpyr bd>d>name { font-weight: 400; display: block; font-size: 0.88em; } cpyr bd>d {display: grid;align-items: center;font-size: 0.88em;grid-template-columns: 155px auto;} cpyr>bl bd d dvv { font-weight: 400; display: block; } cpyr d>btn>i { height: 12px; width: 12px; margin: 0 2px; } cpyr>bl bd d dvv t { font-weight: 400; } cpyr>bl bd d dvv tt { color: var(--br); font-weight: 600; } cpyr>bl bd dd>c { font-size: 0.88em; display: block; font-weight: 400; } cpyr>bl bd d dvv { font-weight: 400; display: block; text-align: center; } cpyr>bl bd dd { display: grid; grid-template-columns: 37% auto; justify-content: end; margin: 0; } cpyr bd>d>btn {display: flex;align-items: center;} cpyr d>btn>t { font-size: 0.88em; color: var(--cbg1); margin: 17px 0px; display: block; } /*Payment_Status*/ @media(min-width:999px){ cpto { display: grid; border-radius: 7px; background: var(--b); box-shadow: var(--bs-b); height: fit-content; }} cpto bd { display: block; padding: 10px; border-bottom: solid 1px var(--bor); } cpto hd h2 { font-size: 0.88em; font-weight: 400; } cpto hd span { font-size: 0.88rem; } cpto bl>hd { display: block; padding: 7px 17px; border-bottom: solid 1px var(--bor); } cpto bd b { font-size: 1.88rem; display: flex; font-weight: 500; } cpto bd p { font-weight: 400; font-size: 0.88rem; padding-bottom: 12px; } cpto ft i { height: 30px; width: 30px; } cpto ft svg { height: 18px; } cpto bd span { font-size: 0.88rem; font-weight: 400; } cpto bl>ft { display: flex; padding: 9px; } cpto ft span { display: flex; align-items: center; font-size: 0.77rem; font-weight: 400; } @media(max-width:999px){ cpto { display: block; border-radius: 7px; padding: 10px; margin: 11px 0; background: var(--b); box-shadow: var(--bs-b); } cpto bl>ft { display: flex; } cpto{margin:22px 0px;} }/*component:-Payment_Update*/ cput>bl>bd div { display: flex ; justify-content: space-between; align-items: center; background: var(--b1); padding: 15px; } cput>bl>bd i { width: 14px; } cput>bl>bd dv { display: flex ; align-items: center; gap: 11px; } cput>bl>bd cc { font-size: 0.95em; color: var(--a2); } cput>bl>bd t { font-size: 0.82em; color: var(--a); } cput>bl>bd cm { font-size: 0.79em; color: var(--cg); } cput>bl>bd th { font-weight: 400; color: var(--cbg1); font-size: 0.9em; } cput>bl>bd td t { color: var(--c2); font-size: 0.94em; } cput>bl>bd td t:nth-child(2) { font-size: 0.77em; } cput>bl>bd span cc { font-size: 0.77em; } cput>bl>bd input { width: 121px; height: 32px; color: var(--c2); font-weight: 100; } cput>bl>bd input:hover { border: solid 1px var(--a); } cput>bl>bd table th { padding: .6rem .5rem; height: 13px; overflow-wrap: break-word; text-align: -webkit-match-parent; border-top: solid 1px var(--b-t); } cput>bl>bd b { display: flex ; justify-content: space-between; align-items: center; margin-top: 11px; } cput>bl>bd b dv { font-size: 0.67em; font-weight: 300; color: var(--a2); } cput>bl>bd span { font-size: 0.79em; font-weight: 400; } cput>bl>bd d { display: flex ; gap: 43px; } @media(max-width: 999px){ cput table { display: block; overflow: scroll; } } /*component:-Received_Payments*/ @media(min-width: 999px){ mrps bd tr td:nth-child(6) { position: relative; left: 0px; }} mrps bl { display: block; } mrps bd tr td:nth-child(9) { position: relative; right: 9%; } mrps input { width: 13px; height: 13px; } mrps bd th:nth-child(1), mrps hd td:nth-child(1) { padding-left: 1rem; display: flex; font-size: 12px; font-weight: 400;align-items: center;} mrps bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } mrps bd thead { background: var(--bc); } mrps bd tr td:nth-child(5) { position: relative; left: 45px; } mrps tr td:nth-child(3) { position: relative; right: 6%; } mrps bd name { font-weight: 400; display: flex; color: var(--c); } mrps bd table th { font-size: 12px; padding: .6rem .5rem; height: 18px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); } mrps bd table tr { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); } mrps bd span { font-size: 12px; } mrps bd table td t { color: var(--br); font-size: 14px; } mrps bd table thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } mrps bd table i { width: 26px; height: 19px; } mrps td t d i { width: 30px; height: 12px; } mrps tr td:nth-child(2) { position: relative; right: 7%; } mrps bd d { display: block; } mrps bl { display: block; margin-top: 13px; } mrps tr td:nth-child(4) { position: relative; right: 3%; } mrps bd table tr { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); position: relative; } mrps>bl bd>d { display: block; overflow: auto; } @media(max-width: 999px){ mrps tbody { display: block; width: -webkit-fill-available; } mrps bd table tbody tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; max-width: 764px;} mrps bd tr td:nth-child(5) { position: relative; left: 16px; } mrps bd table th { min-width: max-content; } mrps bd table tr { max-width: fit-content; } mrps bd span { font-size: 12px; }} mrps hd div { display: flex; justify-content: space-between; align-items: center; padding: 0 0px 8px; } mrps hd btn { display: flex; align-items: center; padding: 7px 8px; width: max-content; border-radius: 6px; } mrps hd h2 { font-size: 16px; font-weight: 600; display: flex; align-items: center; } mrps hd i { height: 21px; width: 20px; } mrps hd svg { fill: var(--aa); } mrps hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; margin: 0px 22px 0px 0px; } mrps bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } mrps hd box { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative; } mrps btn>i { height: 16px; width: 16px; } mrps hd btns svg { fill: var(--b); } mrps hd box svg { fill: var(--br); transform: rotate( 180deg); } /*PaymentNew*/ csns { display: block; } csns>bl>hd{ padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt); align-items: center; gap: 11px; } csns bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; } csns hd d label { position: relative; display: flex; width: 37px; height: 15px; } csns hd d label input { opacity: 0; width: 0; height: 0; } csns hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } csns hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } csns hd d label input:checked + span { background-color: var(--aa); } csns hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } csns bl hd>h2 { font-weight: 400; font-size: 1.44em; } csns hd>i { display: flex; height: 24px; width: 24px; } csns hd>btn>t { font-size: 0.88em; } csns d>div { display: grid; grid-template-columns: auto auto; } csns>bl>bd>d { padding: 22px; } csns>bl>bd{max-width: 898px;} @media(max-width:999px){ csns>bl>bd>d { padding: 7px; width: -webkit-fill-available; } csns bl hd>h2 { font-size: 20px; } csns>bl cm { grid-template-columns: auto; padding: unset; } } csns p>em>i { height: 11px; width: 11px; } csns ft>p>em { margin: 0 3px; display: inline-flex; gap: 3px; } csns ft>p>b { color: var(--cbg); } csns ft>p { padding: 22px; font-size: 0.77em; display: block; opacity: 77%; } @media(max-width:1255px){ csns d>div { grid-template-columns: auto; } } /*Pick_Account*/ cuap hd i { height: 37px; width: 37px; } cuap bl hd { display: flex; align-items: center; padding: 11px 26px; } cuap hd t { font-weight: 500; font-size: 1.33em; color: var(--c0); } cuap { display: block; background: var(--b); box-shadow: 0px 0px 3px -1px; border-radius: 5px; max-width: 333px; padding: 22px 0; } cuap bd h3 { font-size: 1.4em; padding-left: 31px; } cuap bl>bd div { border: dotted 1px; padding: 5px; display: flex; align-items: center; gap: 11px; padding-left: 25px; background: var(--bc); margin: 11px 0;} cuap bd d name { font-weight: 400; font-size: 19px; } cuap div i { height: 42px; width: 42px; } cuap dv i { height: 42px; width: 42px; } cuap d p { font-weight: 500; font-size: 12px; color: var(--c0); margin: 4px 0; } cuap bl>bd dv { padding: 5px; display: flex; align-items: center; gap: 11px; padding-left: 25px; } cuap div i img { border-radius: 22px; } @media(max-width:999px){ cuap { max-width: unset; } } pars { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available; } pars>bl { display: block; background: var(--b); max-width: 400px; box-shadow: var(--bss), -1px 0px 3px var(--c0); height: -webkit-fill-available; width: -webkit-fill-available; backdrop-filter: drop-shadow(0 0 7px 3px var(--bc)); padding: 11px; } pars>bl>bd { display: block; overflow: auto; max-height: 80vh; padding-bottom: 44px; } pars bd dv { display: grid; gap: 14px; }cssg { display: block; border-top: solid 1px var(--c0); } cssg hd h2 { font-size: 16px; padding: 11px; font-weight: 500; line-height: 1.6; } cssg bd div { display: flex; padding: 12px 0; cursor: pointer; padding-right: 20px; padding-left: 20px; align-items: center; border-radius: 8px; } cssg bd div i { height: 13px; width: fit-content; } cssg bd div i svg#Layer_2 { fill: #838195; } cssg bd div span { font-size: 14px; margin-left: 10px; } cssg bd div btn i { height: 8px; width: 8px; margin: 4px; } cssg bd div i svg.icon.icon-xxs.fill-dropdown-blue.ms-1.arrow-svg { fill: var(--aa); } dpbo { display: block; border-top: solid 1px var(--c0); } dpbo hd btns { display: grid; grid-template-columns: auto auto auto; margin-top: 15px; margin-bottom: 15px; margin-right: 10px; margin-left: 10px; flex-wrap: wrap; } dpbo hd btns btn { display: block; height: fit-content; width: fit-content; border-radius: 6px; padding: 11px; } dpbo hd btns btn:hover { background: var(--b-t); } dpbo hd btn i { display: flex; height: 40px; width: 79px; box-sizing: border-box; justify-content: center; } dpbo btn .green { fill: #8e9bb5; } dpbo btn .darkblue { fill: #516889; } dpbo btn .blue { fill: #dae1ea; } dpbo btn:hover .blue { fill: #1b6de0; transition: .2s; } dpbo btn:hover .green { fill: #26db91; transition: .2s; } dpbo btn:hover .darkblue { fill: #183c6f; transition: .2s; } dpbo btn:hover .rect { visibility: visible; transition: .2s; } dpbo hd btns b { word-wrap: break-word; margin-top: 5px; font-weight: 500; display: block; width: 82px; font-size: 0.8rem; text-align: center; } /*component:-Profile_Detail*/ dpro hd { display: flex; align-items: center; } dpro hd div i { display: flex; height: 40px; overflow: hidden; margin: 8px;width: fit-content; } dpro hd div i img { border-radius: 5px; } dpro hd dv { display: grid; } dpro hd dv span { display: flex; margin-top: 9px; font-size: 14px; font-weight: 400; } dpro hd dv t { font-size: 13px; color: var(--bs-br); } dpro bd { display: flex; font-size: small; } dpro bd div span { padding-bottom: 10px; padding-left: 15px; } dpro ft dv i { display: flex; height: 16px; width: 21px; } dpro ft { display: flex; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; border-top: solid 1px var(--b-t); margin: 18px; } dpro ft div span { font-size: 12px; color: var(--aa); } dpro ft dv { display: flex; } dpro ft dv i svg path { fill: var(--cr); } dpro ft dv span { font-size: 12px; color: var(--cr); } /* Component:Projuct */ pros>bl hd div { display: flex; gap: 19px; padding: 11px; margin-bottom: 13px; } pros>bl hd div>dv { align-items: center; display: block; } pros>bl hd cc h4 { font-size: 0.99em; font-weight: 400; color: var(--aa); } pros>bl hd cc h4:hover { color: var(--a1); } pros>bl hd div>dv>t { font-size: 0.77em; color: var(--cg1); } pros>bl hd div>i { height: 22px; width: 22px; display: flex; } pros>bl hd cc { display: flex; gap: 12px; max-width: 333px; padding: 11px; } pros>bl hd cc>i { height: 18px; width: 18px; } pros>bl hd hr { display: block; margin: 11px; } pros>bl bd div>d>t { display: block; color: var(--cbg1); font-size: 0.88em; } pros>bl bd div>d { display: block; align-items: center; padding: 11px; } pros>bl bd div>d>b { font-weight: 400; font-size: 0.88em; display: block; } pros>bl bd div { display: grid ; align-items: center; justify-content: center; line-height: 27px; } pros>bl bd div>d>cc>a { font-weight: 400; font-size: 0.88em; display: block; color: var(--aa); } pros>bl bd div>d>cc>a:hover { color: var(--cbg1); } pros { display: block; border-right: solid 1px var(--bc); padding: 0px 6px 0px 0px; } pros>bl bd div>d>cc>b { font-weight: 400; font-size: 0.88em; display: block; } pros>bl bd div cc { display: flex; gap: 7px; } pros>bl bd div>d>priace { font-size: 0.88em; display: flex; font-weight: 400; } pros>bl hd div>dv>h4 { font-size: 1.4em; display: flex; font-weight: 300; } pros>bl {background: var(--bg); margin-left: 11px; } pros>bl>bd f { font-size: 0.94em; color: var(--cbg1); } pros>bl>bd c { font-size: 0.8em; color: var(--green); } /* Component : ProjectTasks */ ptks hd div dv i svg { fill: var(--a); display: flex; } ptks hd div dv i { height: 22px; width: 22px; display: block; } ptks hd div dv { display: flex; } ptks hd div { display: flex; justify-content: space-between; padding: 11px; } ptks hd div dv t { display: block; color: var(--a); } ptks>bl { display: block; margin-top: 11px; } ptks>bl bd div h4 { font-weight: 400; display: flex; justify-content: center; } ptks>bl bd div { padding: 22px; margin: 22px; display: block; } @media(max-width:999px){ ptks>bl bd div { padding: 22px; margin: 22px; display: block; margin-bottom: 44px; } } /* Component:ProjectTime */ cpjt>bl hd div { display: flex; justify-content: space-between; align-items: center; padding: 11px; gap: 12px; } cpjt>bl hd div btns { display: flex; align-items: center; gap: 11px; } cpjt>bl hd div>dv { display: grid ; white-space: normal; grid-template-columns: 33px auto; align-items: center; } cpjt>bl hd div btns>btn:after:nth-child(5) { content: ''; border-style: solid; border-width: 6px; border-color: transparent; border-top-width: 0; border-bottom: 9px solid var(--br); width: 1px; height: 0px; font-size: 0; line-height: 0; position: absolute; top: 8px; transform: rotate( 182deg); z-index: 999999999999; left: 52px; } cpjt>bl hd div btn>btn:nth-child(3) { padding: 3px 15px; white-space: nowrap; background: var(--b-t95); display: flex; box-shadow: 0px 0px 2px 0px; position: relative; font-weight: 400; } cpjt>bl hd div>dv back { transform: rotate(89deg); padding: 0px 0px; white-space: nowrap; display: flex ; border-radius: 1px; height: 33px; width: 33px; margin: auto; align-items: center; justify-content: center; } cpjt>bl hd div dv h4 { font-weight: 400; font-size: 22px; } cpjt>bl hd div btns>btn i:nth-child(6) { padding: 3px 11px; white-space: nowrap; background: var(--b-t95); display: flex; box-shadow: 0px 0px 2px 0px; border-radius: 1px; height: 22px; } cpjt>bl hd div btns>btn i { padding: 3px 11px; white-space: nowrap; background: var(--b-t95); display: flex;border-radius: 1px; height: 18px; } cpjt>bl hd div btns>btn:nth-child(2) { background: var(--aa); color: var(--b); } cpjt>bl bd div { display: flex; border-top: solid 1px var(--aat); border-bottom: solid 1px var(--aat); padding: 11px; padding-bottom: 0; } cpjt>bl bd div dv { display: flex; gap: 18px; align-items: center; } cpjt>bl bd div dv t:nth-child(1) { display: flex; border-bottom: solid 2px var(--aa); padding: 11px 0; } cpjt>bl hd div btns>btn { padding: 5px 11px; white-space: nowrap; background: var(--b-t95); display: flex ; border: 1px solid var(--bor); border-radius: 5px; position: relative; font-size: 0.88em; }cpoe hd { display: block; margin: 16px; } cpoe hd dv { display: flex; } cpoe hd span { font-size: x-large; width: fit-content; display:flex;} cpoe hd div p { line-height: 2; } cpoe hd div p a { font-weight: 300; color: var(--aa); } cpoe hd div p a i { display: flex; height: 12px; position: absolute; top: 10vh; right: 12vw; } cpoe bd { display: grid; grid-template-columns: max-content auto; justify-content: space-between; } cpoe bd dv { width: fit-content; display: flex; } cpoe bd dv i { display: block; height: 21px; padding: 10px; width: fit-content; } cpoe bd dv i svg { fill: var(--a); } cpoe bd dv span { display: flex; align-items: center; font-size: 12px; } cpoe bd dv d i svg { fill: var(--br); } cpoe bd f { display: grid; align-items: center; grid-template-columns: auto auto auto; gap: 11px; } cpoe bd d { font-size: 12px; display: flex; align-items: center; } cpoe bd d i { display: flex; height: 19px; width: fit-content;} cpoe bd d b { display: flex; } cpoe bd f form input { display: block; border-radius: 5px; background: var(--bs-br); font-weight: 300; height: 29px; margin: 0; padding: 0px 26px; } cpoe bd f form i { display: flex; height: 16px; position: absolute; top: 12px; transform: rotate(79deg); width: fit-content; } cpoe ft { display: flex; border-bottom: solid 1px; border-top: solid 1px; box-shadow: 0px 4px 2px rgba(36, 39, 44, .1); justify-content: space-between; padding: 8px; margin: 11px; } cpoe ft span { font-size: 17px; font-weight: 400; } @media(max-width: 999px){ cpoe ft span { font-size: 13px; } cpoe bd { display: grid; grid-template-columns: unset; gap: 11px; } cpoe bd f { display: grid; gap: 22px; padding-left: 16px;} } /* component Quick_Link*/ cqlkcqlk bl { display: block; border-radius: 4px; box-shadow: 0px 0px 3px 0px var(--bor); padding: 8px; background: var(--b-t); } cqlk bd a { font-weight: 400; font-size: 13px; color: var(--a); text-decoration: underline; display: flex; margin: 16px 0; align-items: center; gap: 3px; } cqlk bd i { width: 12px; height: 12px; } cqlk bd { margin-left: 15%; line-height: 19px; } cqlk bl { padding: 23px; box-shadow: var(--bs-b);height: 83% ; } @media(max-width:999px){ cqlk bl bd{ display: flex; flex-wrap: wrap; column-gap: 11px; } } /* component Quick_Links*/ cqlo bl { display: block; border-radius: 4px; box-shadow:var(--bs-b); padding: 13px; background: var(--b-t); } cqlo bd a { font-weight: 400; font-size: 13px; color: var(--a); text-decoration: underline; display: flex; margin: 7px 0; align-items: center; gap: 3px; } cqlo bd i { width: 12px; height: 12px; } @media(max-width:999px){ cqlo bl bd{ display: flex; flex-wrap: wrap; column-gap: 11px; } } /* component Quick_Start*/ cqso bl { display: flex; align-items: center; box-shadow:var(--bss); border-radius: 3px; padding: 14px; background: var(--b); gap: 15px; } cqso bl>bd{ display: flex; align-items: end; } cqso hd i { height: auto; width: 49px; } cqso bd i { height: fit-content; width: 17px; position: absolute; right: -20px; bottom: 0px; } cqso bd p:nth-child(1) { margin: 0; font-size: 0.88em; margin-inline-start: 0; margin-block-end: 0; display: flex; align-items: end; position: relative; width: fit-content; } cqso bd i svg { fill: var(--aa); } cqso bd p:nth-child(2) { display: flex; align-items: center; margin-block-start: 0;font-weight: 500; gap: 2px; } cqso hd i svg { fill: var(--aa); } \ /* component: Quick_Starts*/ cqss>bl { display: block; padding:11px; } cqss bd>d { display: grid; grid-template-columns: auto auto auto auto; gap: 22px; margin: 11px 0; } cqss>bl>bd { display: block; margin: 22px 0; } cqss hd h3 { font-weight: 400; } @media(max-width:999px){ cqss bd>d {padding: 5px; gap: 11px; grid-template-columns: auto auto; padding: unset;} cqss > bl { padding: unset; } } @media(max-width:666px){ cqss bd>d { grid-template-columns: auto; } } /* component:QuoteHistories*/ cqts>bl { display: block; border: 1px solid var(--bc); } cqts>bl>hd { display: flex; padding: 10px; border-bottom: 1px solid var(--bc); align-items: center; justify-content: space-between;} cqts hd h4 svg { fill: var(--a); } cqts hd dv i { height: 22px; width: 22px; position: unset; } cqts hd dv>btn:nth-child(1) { display: flex; align-items: center; justify-content: center; background: var(--a); padding: 3px; border-radius: 5px; position: relative; } cqts hd dv { display: flex; gap: 9px; align-items: center; justify-content: center; } cqts hd dv i svg:nth-child(1) { fill: var(--b); } cqts hd dv>btn:nth-child(2) { display: flex; align-items: center; justify-content: center; background: var(--b1); padding: 3px; border-radius: 5px; border: 1px solid var(--bc); position: relative; } cqts hd dv i.more svg { fill: var(--c); transform: rotate( 91deg); } cqts hd h4 i { height: 22px; width: 22px; position: absolute; bottom: 12px; left: 47%; top: 17px; } cqts hd h4 { width: 124px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; display: block; } /*component:-QuoteHistory*/ cqto>bl { display: grid ; grid-template-columns: 33px auto; background: var(--b1); position: relative; padding: 11px; border-top: var(--bor) 1px solid; } cqto bd t i { height: 14px; width: 14px; } cqto hd input { height: 15px; width: 15px; border: 1px solid var(--bc); } cqto hd name { display: flex; align-items: center; gap: 4px; } cqto hd rs { position: absolute; right: 11px; font-size: 0.99em; font-weight: 500; } cqto>bl name { font-size: 0.88em; font-weight: 400; } cqto bd div span { color: var(--a1); font-size: 0.77em; margin: 2px 1px 0px 0; } cqto bd div { display: flex ; flex-direction: column; } cqto bd t { margin: 8px 0px; font-size: 0.8em; display: flex ; align-items: center; gap: 11px; color: var(--green); } cqto>bl>bd c { color: var(--green); } cqto>bl>bd i { width: 13px; } cqto>bl>bd dv { gap: 6px; display: flex; align-items: center; margin-top: 6px; } cqto>bl>bd b { font-size: 0.77em; font-weight: 400; color: var(--c2); } cqto>bl>bd { display: block;background: var(--b1); } cqto bd div span { color: var(--a1); font-size: 0.77em; margin: 3px 3px 1px 0px; display: flex ; align-items: center; } cqto>bl>bd c { width: 0; height: 0; border: solid 2px; border-radius: 11px; color: var(--c0); } /*QuoteInformation*/ ctnf hd>cc>h2 { font-size: 19px; font-weight: 500; } ctnf hd>cc { display: flex; justify-content: space-between; padding: 10px 14px; align-items: center; margin: 11px 0; } ctnf btns>btn>i { height: 15px; width: 19px; } ctnf cc>btns>btn { border: 1px solid var(--bor); display: grid; padding: 5px 5px; border-radius: 4px; align-items: center; justify-content: center; position: relative; background: var(--b1); } ctnf hd>cc>btns { display: flex; gap: 8px; align-items: center; justify-content: center; } ctnf c>i>svg { fill: var(--cr); border-left: solid 1px var(--bor); } ctnf bd>d{max-width: 793px;margin:auto;} ctnf cc>c>i { height: 19px; width: 19px; } ctnf d>ss>i { height: 15px; width: 15px; } ctnf d>ss { padding: 5px; display: flex; width: fit-content; font-size: 0.88em; margin: 6px; border-radius: 3px; align-items: center; gap: 5px; } ctnf hd>mg { display: flex; background: var(--b1); border-top: solid 1px var(--c0); border-bottom: solid 1px var(--c0); align-items: center; flex-wrap: wrap; gap: 11px; } ctnf d>ss:hover { background: var(--b); box-shadow: 0px 0px 0px 1px var(--bor); } ctnf mg>d::after { content: ''; height: 16px; width: 1px; background: var(--bor); display: block; position: absolute; top: 10px; bottom: 0; right: 0; left: -7px; } ctnf mg>d { position: relative; } ctnf mg>d:nth-child(1)::after { content: ''; background: unset; } ctnf d>hh>c { position: absolute; padding: 4px; z-index: 9999999; display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 6px; width: max-content; gap: 3px; } ctnf m>i>svg { fill: var(--b); } ctnf c>m>i { height: 14px; width: 14px; } .Send ctnf d>hh>c {display: grid; } ctnf hh>c>m { display: flex; align-items: center; background: var(--a); padding: 8px; gap: 9px; border-radius: 4px; } ctnf m>t{font-size: 0.88em;color:var(--b);} .PDF ctnf d>hh>c {display: grid; } @media(max-width:999px){ ctnf>bl>bd>d { padding: 7px; } ctnf { padding: 11px 0; display: block; } } /*QuoteInvoice*/ qinc { padding: 44px; display: block; background: var(--b); box-shadow: var(--bs-b); margin: 22px; position: relative; } qinc>bl { border: solid 1px var(--bor); } qinc>bl hd btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; } qinc>bl>hd>div { position: absolute; top: -5px; left: -5px; overflow: hidden; width: 95px; height: 98px; } qinc>bl>hd>div>span { text-align: center; color: #fff; top: 18px; left: -24px; width: 97px; padding: 3px; position: relative; transform: rotate(-45deg); background-color: var(--green); justify-content: center; font-family: sans-serif; font-size: 0.77em; filter: grayscale(1); display: flex; } qinct hd div>span:before { content: ""; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid; border-bottom-color: inherit; position: absolute; top: 14px; transform: rotate(-45deg); left: -3px; border-left: 2px solid transparent; color: #2e8fda; } qinc hd div>span:after { content: ""; border-top: 5px solid transparent; border-left: 5px solid; border-left-color: inherit; border-right: 5px solid transparent; position: absolute; top: 20px; transform: rotate( 77deg); right: -1px; border-bottom: 3px solid transparent; color: #2e8fda; } qinc hm>cm>cc { display: grid; padding: 2px; } qinc >bl>ft { display: grid; grid-template-columns: 60% auto; } qinc hd>hm>btn { background: var(--a); border: solid 1px var(--a); display: flex; height: 29px; border-radius: 0px 0px 0px 0px; align-items: center; color: var(--b); font-size: 0.77em; position: absolute; top: 0; right: 0; gap: 3px; padding: 0 6px; } qinc hm>btn>i { height: 13px; } qinc btn>i>svg { fill: var(--b); } qinc:hover { background: var(--b); } qinc:hover hd>hm{ display: block; } qinc hm>cm { background: var(--b); border-radius: 6px; align-items: center; font-size: 0.77em; position: absolute; right: 0; box-shadow: var(--bs-b); top: 34px; height: fit-content; display: none; gap: 11px; } qinc cm>cc>span:hover { background: var(--a); color: var(--b); } qinc cm>cc>span { padding: 7px; border-radius: 6px; position: relative; } qincplate qiot hm>cm { display: grid; } qinc hd>hm{ display: none; } qinc hm>cm>b { padding: 8px 11px; padding-bottom: unset; } qinc cc>hr { width: 100%; border-style: groove; } @media(max-width:999px){ qinc { margin: unset;padding:11px;} qiot >bl>ft { grid-template-columns: auto; } } qinc tbody>tr:hover { background: unset; } /*QuoteNew*/ cneq { display: block; } cneq>bl>hd{ padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt); align-items: center; gap: 11px; } cneq bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; } cneq hd d label { position: relative; display: flex; width: 37px; height: 15px; } cneq hd d label input { opacity: 0; width: 0; height: 0; } cneq hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } cneq hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } cneq hd d label input:checked + span { background-color: var(--aa); } cneq hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } cneq bl hd>h2 { font-weight: 400; font-size: 1.44em; } cneq hd>i { display: flex; height: 24px; width: 24px; } cneq hd>btn>t { font-size: 0.88em; } cneq d>div { display: grid; grid-template-columns: auto auto; } cneq>bl>bd>d { padding: 22px; } cneq>bl>bd{max-width: 898px;} @media(max-width:999px){ cneq>bl>bd>d { padding: 11px; width: -webkit-fill-available; } cneq bl hd>h2 { font-size: 20px; } quon>bl cm { grid-template-columns: auto; padding: unset; } } cneq p>em>i { height: 11px; width: 11px; } cneq ft>p>em { margin: 0 3px; display: inline-flex; gap: 3px; } cneq ft>p>b { color: var(--cbg); } cneq ft>p { padding: 22px; font-size: 0.77em; display: block; opacity: 77%; } @media(max-width:1255px){ cneq d>div { grid-template-columns: auto; } } /*QuoteNew*/ qopu { display: block; } qopu>bl>hd{ padding: 22px; display: flex; background: var(--b); border: solid 1px var(--bt); align-items: center; gap: 11px; } qopu bl hd h2 { border-right: solid 1px var(--bor); display: block; padding-right: 11px; } qopu hd d label { position: relative; display: flex; width: 37px; height: 15px; } qopu hd d label input { opacity: 0; width: 0; height: 0; } qopu hd d label span { position: absolute; cursor: pointer; top: 0; left: 2px; right: 0; bottom: 0; background-color: #ccc; border-radius: 25px; transition: 0.3s; } qopu hd d label span::before { content: ""; position: absolute; height: 11px; width: 10px; left: 3px; bottom: 2px; background-color: white; border-radius: 50%; transition: 0.3s; } qopu hd d label input:checked + span { background-color: var(--aa); } qopu hd d label input:checked + span::before { transform: translateX(25px);left: -2px; } qopu bl hd>h2 { font-weight: 400; font-size: 1.44em; } qopu hd>i { display: flex; height: 24px; width: 24px; } qopu hd>btn>t { font-size: 0.88em; } qopu d>div { display: grid; grid-template-columns: 50% 50%; } qopu>bl>bd>d { padding: 22px; } qopu>bl>bd{max-width: 984px;} @media(max-width:999px){ qopu>bl>bd>d { padding: 7px; } qopu bl hd>h2 { font-size: 20px; } } qopu p>em>i { height: 11px; width: 11px; } qopu ft>p>em { margin: 0 3px; display: inline-flex; gap: 3px; } qopu ft>p>b { color: var(--cbg); } qopu ft>p { padding: 22px; font-size: 0.77em; display: block; opacity: 77%; } @media(max-width:1255px){ qopu d>div { grid-template-columns: auto; } } /* Component : Item_ActionNew */ citn>bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;} citn>bl btns>btn { display: flex ; align-items: center; padding: 7px 22px; justify-content: center; font-size: 0.88em; border-radius: 5px; border: 1px solid var(--bc); } citn>bl hd>btns { display: flex; gap: 11px; } citn>bl btns>btn.this { background: var(--aa); color: var(--b); } citn>bl bd>aa { font-size: 0.77em; color: var(--a); } citn bl { display: grid; gap: 14px; } /*Quote_AmountUpdate*/ qamu { display: block; padding: 11px; background: var(--bg); margin: 11px; border-radius: 11px; } qamu bd>d { display: grid; grid-template-columns: auto auto; justify-content: space-between; font-size: 0.88em;align-items: center; } qamu bd>d:nth-child(1) { font-weight: 500; } qamu bd>d>t { padding: 10px; } qamu d>cc>t { padding: 10px; } qamu d>prc { padding: 10px; } qamu f > prc { display: block; font-size: 1rem; font-weight: 400; line-height: 1.6; width: 75px; text-align: end; padding: 3px 11px; border: solid 1px var(--bor); border-radius: 8px 0px 0px 8px; } qamu f>t { font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: end; border: solid 1px var(--bor); border-left: unset; border-radius: 0px 8px 8px 0px; padding: 0 10px; display: flex; align-items: center; justify-content: end; width: 12px; } qamu div>prc { display: grid; margin-left: auto; } qamu bd>div { display: grid; align-items: center; grid-template-columns: 166px auto auto; font-size: 0.88em; padding: 0px 9px; margin: 11px 0px; } qamu h>sl { padding: 0; background: unset; display: flex; align-items: center; height: unset; margin: 0; gap: 9px; width: fit-content; } qamu sl>input { height: 16px; width: 16px; } qamu div>h { display: flex; align-items: center; gap: 11px; } qamu f>input { display: flex; border: solid 1px var(--bor); height: 33px; width: fit-content; font-weight: 500; transition: 333ms; } qamu f>input:focus { border: solid 1px var(--a); } qamu f>input:hover{border: solid 1px var(--a); } qamu m>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; width: 111px; } qamu cc>m>input { border: dashed 1px var(--bor); } qamu m>input:hover { border: dashed 1px var(--a); } qamu m>input:focus { border: solid 1px var(--a); box-shadow: 0px 0px 5px 1px var(--at); } qamu bl>ft { padding: 11px; display: FLEX; align-items: center; justify-content: space-between; border-top: solid 1px var(--bc); } qamu bl>ft>prc { font-weight: bold; } qamu bl>bd { display: block; margin-bottom: 33px; } qamu div:nth-child(3) cc>f { align-items: center; display: flex; position: relative; width: fit-content; } qamu f>i { height: 18px; width: 18px; position: absolute; right: 3px; top: 8px; bottom: 0; opacity: 77%; } qamu div:nth-child(3) prc { opacity: 77%; } @media(max-width:999px){ qamu bd>div { grid-template-columns: 124px auto auto; } qamu cc>m>input { width: 90px; } qamu {margin: 3px;} qamu f>input { width: 110px; } } /*Quote_DetailNew*/ quon form>div:nth-child(1){ background: var(--bg); padding: 22px;} quon form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } quon { display: grid; margin-bottom: 22px; } quon form>div>sl>d c>i { height: 18px; width: 18px; } quon div>sl>d c { display: flex; align-items: center; } quon form> div lable { color: var(--cr); font-size: 0.88em; } quon div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } quon form>div>sl>d c>i:nth-child(2) { display: flex; align-items: center; background: var(--a); padding: 8px; border-radius: 0 0 0 0; } quon form>div>sl>d c>i:nth-child(2) svg { fill: var(--b); } quon div>sl>d t { opacity: 68%; font-size: 0.88em; } quon form>div:nth-child(1) sl { width: auto; max-width: unset; } quon form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } quon sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } quon sl>f c { position: absolute; right: 0; } quon c>btn>i { height: 15px; width: 15px; padding: 11px; } quon c>btn>i>svg { fill: var(--a); } quon form>div:nth-child(3) lable { color: var(--br); } quon form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } quon sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } quon form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } quon>bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } quon>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} quon>bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } quon sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } quon cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } quon>bl hr { color: var(--bor); opacity: 9%; } quon div>t { font-size: 0.88em; display: flex; gap: 4px; padding: 14px 0; align-items: center; } quon bl>bd>form>dv { display: block;} quon form>div:nth-child(6) sl>f input { background: var(--bt); } quon form>div:nth-child(6) sl { display: grid; } quon form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } quon t>i { height: 12px; width: 12px; } quon form>div:nth-child(7)>sl { display: grid; } quon bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } quon bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } quon bd form btns i svg { fill: var(--b); display: block; } @media(max-width:1295px){ quon>bl cm { grid-template-columns: auto; padding: 0 22px; } quon>bl cm>t { text-align: unset; padding: 11px 0; } quon form>div { grid-template-columns: auto; } quon form>dv>cm>sl { grid-template-columns: auto; } quon sl>f { width: -webkit-fill-available; max-width: unset; } quon form>div>sl { width: -webkit-fill-available; max-width: unset; } quon form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } quon>bl cm>sl>lable {padding:11px 0;} quon>bl cm>sl>t{padding: 11px 0; } quon>bl cm>sl>t { text-align: unset; } } quon f>c>i { height: 18px; width: 18px; opacity: 77%; } @media(max-width:999px){ quon{margin:0px;} quon>bl cm { grid-template-columns: auto; padding: unset; } quon form>div { grid-template-columns: auto; padding: 0px; } quon form>div:nth-child(1) { padding: 7px; } quon form>div:nth-child(1) sl { width: auto; max-width: unset; margin-left: -6px; } } quon sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} /*Quote_DetailNew*/ qdue form>div:nth-child(1){ background: var(--bg); padding: 22px;} qdue form>div>sl { cursor: pointer; padding: unset; position: relative; overflow: unset; display: flex; border-radius: unset; border: unset; width: unset; align-items: unset; justify-content: unset; margin: 0; background: unset; height: unset; max-width: 333px; } qdue { display: grid; margin-bottom: 22px; } qdue form>div>sl>d c>i { height: 18px; width: 18px; } qdue div>sl>d c { display: flex; align-items: center; } qdue form> div lable { color: var(--cr); font-size: 0.88em; } qdue div:nth-child(1)>sl>d { cursor: pointer; position: relative; overflow: hidden; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; max-width: 555px; width: -webkit-fill-available; } qdue form>div>sl>d c>i:nth-child(2) { display: flex; align-items: center; background: var(--a); padding: 8px; border-radius: 0 0 0 0; } qdue form>div>sl>d c>i:nth-child(2) svg { fill: var(--b); } qdue div>sl>d t { opacity: 68%; font-size: 0.88em; } qdue form>div:nth-child(1) sl { width: auto; max-width: unset; } qdue form>div:nth-child(2) sl>d { display: flex; align-items: center; border: solid 1px var(--bor); border-radius: 6px; max-width: 333px; width: -webkit-fill-available; } qdue sl>f input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--b-t); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } qdue sl>f c { position: absolute; right: 0; } qdue c>btn>i { height: 15px; width: 15px; padding: 11px; } qdue c>btn>i>svg { fill: var(--a); } qdue form>div:nth-child(3) lable { color: var(--br); } qdue form>div { display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; } qdue sl>f input:focus { box-shadow: unset; border-radius: 5px; border: solid 1px var(--a); } qdue form>dv>cm>sl { max-width: unset; background: unset; height: unset; overflow: unset; margin: 0; display: grid; grid-template-columns: 166px auto; padding: 6px 22px; align-items: center; padding: 0; } qdue>bl cm { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 22px; } qdue>bl cm>sl>t { text-align: center; display: block; padding: 11px 33px; font-size: 0.88em;} qdue>bl cm>sl>lable { display: block;color: var(--cr); font-size: 0.88em; } qdue sl>f { display: flex ; align-items: center; width: -webkit-fill-available; } qdue cm input { cursor: pointer; position: relative; display: flex; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding: 8px; width: -webkit-fill-available; font-weight: 500; } qdue>bl hr { color: var(--bor); opacity: 9%; } qdue div>t { font-size: 0.88em; display: flex; gap: 4px; padding: 14px 0; align-items: center; } qdue bl>bd>form>dv { display: block;} qdue form>div:nth-child(6) sl>f input { background: var(--bt); } qdue form>div:nth-child(6) sl { display: grid; } qdue form>div:nth-child(7) sl>p { font-size: 12px; margin: 4px 0; font-weight: 400; color: var(--cg); } qdue t>i { height: 12px; width: 12px; } qdue form>div:nth-child(7)>sl { display: grid; } qdue bd form btns i { display: flex; height: 22px; width: 22px; transform: rotate( 271deg); } qdue bd form btns { display: flex; align-items: center; padding: 8px 4px; background: var(--a1); color: var(--b); width: max-content; border-radius: 5px; position: absolute; right: 0; top: 15%; } qdue bd form btns i svg { fill: var(--b); display: block; } @media(max-width:1295px){ qdue>bl cm { grid-template-columns: auto; padding: 0 22px; } qdue>bl cm>t { text-align: unset; padding: 11px 0; } qdue form>div { grid-template-columns: auto; } qdue form>dv>cm>sl { grid-template-columns: auto; } qdue sl>f { width: -webkit-fill-available; max-width: unset; } qdue form>div>sl { width: -webkit-fill-available; max-width: unset; } qdue form> div lable { color: var(--cr); font-size: 0.88em; padding: 11px 0; } qdue>bl cm>sl>lable {padding:11px 0;} qdue>bl cm>sl>t{padding: 11px 0; } qdue>bl cm>sl>t { text-align: unset; } } qdue f>c>i { height: 18px; width: 18px; opacity: 77%; } @media(max-width:999px){ qdue{margin:0px;} qdue>bl cm { grid-template-columns: auto; padding: 0 22px; padding: 0; } qdue form>div { grid-template-columns: auto; padding: 0px; } qdue form>div:nth-child(1) { padding: 7px; } } qdue sl>f>textarea {border: solid 1px var(--b-t);min-width: -webkit-fill-available;height: 35px;font-size: 12px;padding: 8px;border-radius: 8px;} /*Quote_InvoiceBill*/ cqase { display: block; } cqase tbody>tr>th { background: var(--b1); height: 9px; border-bottom: solid 1px var(--bor); padding: 5px; font-family: emoji; font-size: 0.66em; } cqase td>name { font-size: 0.88em; color: var(--a); font-family: emoji; } cqase tbody tr>td { padding: 0; padding-bottom: 6px; } cqase tbody>tr:nth-child(2) { border-bottom: solid 1px var(--bor); } cqase tr>td>t { color: var(--br); font-size: 0.77em; font-family: emoji; display: block; padding: 4px;padding-top: 11px; } cqase tr>td>t:nth-child(2) { font-size: 0.88em; padding-top: unset;} /*Quote_InvoiceDate*/ cides { border-bottom: solid 1px var(--bor); display: grid; grid-template-columns: 50% 50%; } cides tbody>tr>td { font-size: 0.66em; font-family: auto; padding: 0; height: unset; font-weight: 700; } cides tbody { display: grid; padding: 11px; gap: 8px; border-right: solid 1px var(--bor); } cides tbody>tr { display: grid; grid-template-columns: 155px auto; } cides tbody>tr:hover { background: unset; } @media(max-width:999px){ cides tbody>tr {grid-template-columns: 111px auto; } } /*Quote_InvoiceDescription*/ cqdn thead>tr>th { height: 11px; border: solid 1px var(--bor); padding: 4px;text-align: end; } cqdn thead>tr:nth-child(1) { background: var(--b-t); } cqdn tr>td { height: 11px; border: solid 1px var(--bor); padding: 4px; font-size: 0.77em; font-family: emoji; text-align: end;font-weight: 500; } cqdn thead>tr>th:nth-child(1) { text-align: unset; } cqdn thead>tr>th:nth-child(2) { text-align: unset; } cqdn tbody >tr:hover { background: unset; } cqdn tbody >tr>td:nth-child(5) { border-right: 0; } cqdn thead >tr>th:nth-child(1) { border-left: 0; } cqdn thead >tr>th:nth-child(5) { border-right: 0; } cqdn tbody>tr>td:nth-child(2) { text-align: unset; } /*Quote_InvoiceDetail*/ cude>bl{ display: flex; align-items: end; justify-content: space-between; height: fit-content;border-bottom: solid 1px var(--bor); } cude hd table { width: fit-content; display: flex; } cude hd tr td dv { display: grid; } cude hd table td dv t { white-space: nowrap; caption-side: bottom; border-collapse: collapse; font-family: Ubuntu, 'WebFont-Ubuntu'; font-size: 8pt; color: var(--c1); line-height: 1.6; } cude hd table div span { font-weight: bold; font-size: 12pt; border-collapse: collapse; font-family: auto; } cude>bl>bd>dv { display: block; position: unset; overflow: unset; } cude bd dv h4 { font-size: 22pt; font-family: auto; font-weight: 400; } cude tbody>tr>td{ padding-left: 1rem; display: block; align-items: center; height: unset; } @media(max-width:999px){ cude hd dv h4 { font-size: 22px; } } /*Quote_InvoiceInformation*/ cvim { display: block; padding: 11px 19px; } cvim div>aa { color: var(--a); font-size: 0.88em; } cvim div>c {font-size: 0.88em; } cvim div>t { font-size: 0.88em; } cvim bl>hd { display: flex; justify-content: end; margin-bottom: 33px; } cvim d>c { font-size: 0.88em; color: var(--cbg1); margin: 25px 0px; display: block; } cvim bd>d>name { font-weight: 400; } cvim bd>d { display: grid; grid-template-columns: 188px auto; align-items: center; font-size: 0.88em; } cvim d>btn>t { font-size: 0.88em; color: var(--cbg1); margin: 25px 0px; display: block; } cvim bd>d>btn { display: flex; align-items: center; position: relative; } cvim d>btn>i { height: 12px; width: 12px; margin: 0 2px; } cvim>bl bd dd { display: grid; grid-template-columns: auto 78%; } /*Quote_InvoiceMore*/ cqime dv>t { font-size: 0.66em; display: block; margin: 11px; font-family: emoji; margin-bottom: 0; } cqime dv>b { font-size: 0.66em; display: block; font-family: emoji; margin: 4px 11px; font-style: italic; margin-bottom: 25px; } cqime dv:nth-child(2)>t { margin-bottom: 15px; } cqime dv:nth-child(3)>b { margin-bottom: 11px; } @media(max-width:999px){ cqime dv:nth-child(2)>t { margin: 5px 11px; } cqime dv>b { margin-bottom: 11px; } } /*Quote_InvoiceSubtotal*/ cqat tbody>tr { padding: 0; display: flex; border: 0; justify-content: space-between; align-items: center; font-size: 0.88em; font-family: emoji; } cqat tbody>tr>td { height: fit-content; padding: 6px; text-align: right; font-size: 0.88em; } cqat table>tbody:nth-child(2) { border-top: solid 1px var(--bor); padding-top: 40px; display: flex; justify-content: center; font-weight: 500; color: var(--br); font-size: 0.88em; } cqat table>tbody{border-left: solid 1px var(--bor); display: table-caption;} cqat {display: block; } cqat td>label { font-size: 1.11em; }@media(max-width:999px){ ccqat { border-top: solid 1px var(--bor);padding: 11px 0; display: block; margin-left: -11px; } cqat table>tbody { border: 0; } } /*Quote_ItemTable*/ cqit { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative; } cqit bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} cqit hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } cqit hd>h4 { font-size: 0.88em; } cqit bd { display: block; } cqit bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } cqit bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } cqit bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } cqit bd>d>t:nth-child(1){ text-align: unset; } cqit bd>d>cc>input { border: unset; } cqit bd>d>cc { display: block; border-right: solid 1px var(--b-t); } cqit bd>d>cc>textarea:hover { box-shadow: 0px 0px 1px 1px var(--a); } cqit d>cc>textarea:focus { border: solid 1px var(--a); } cqit d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } cqit d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } cqit bd>d:nth-child(2)>t { padding: 0; } cqit bd>d>cc>textarea { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; } cqit bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } cqit bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } cqit bd>d:nth-child(2)>t { border-bottom: 0; } cqit bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } cqit bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } cqit bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } cqit bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -35px; } cqit bd>d c>i { height: 13px; width: 13px; } cqit bd>d c>i:nth-child(2) { height: 16px; width: 16px; } cqit bd>d c>i:nth-child(2) svg { fill: var(--cr); } cqit bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } cqit ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } cqit ft>div i { height: 16px; width: 16px; } cqit div>cc>input { border: solid 1px var(--a); height: 33px; } cqit div>cc>input:focus { border: solid 1px var(--a); } cqit c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } cqit div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } cqit div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } cqit div>span:focus { background: var(--a); color: var(--b); } cqit ft>div { display: none; } .Header cqit ft>div { display: grid; } cqit div>span:hover { background: var(--a); color: var(--b); } @media(max-width:999px){ cqit { display: grid; border: unset; overflow: hidden; } cqit>bl { margin: 5px; } } cqit bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } cqit bd { display: block; max-width: -webkit-fill-available; overflow: auto; } } /*component:-Quote_ItemUpdate*/ cqite { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative; margin: 0 16px; margin-right: 0; } cqite bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} cqite hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } cqite hd>h4 { font-size: 0.88em; } cqite bd { display: block; } cqite bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } cqite bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } cqite bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } cqite bd>d>t:nth-child(1){ text-align: unset; } cqite bd>d>cc>input { border: unset; } cqite bd>d>cc { display: block; border-right: solid 1px var(--b-t); } cqite bd>d>cc>input:hover { box-shadow: 0px 0px 1px 1px var(--a); } cqite d>cc>input:focus { border:unset; } cqite d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } cqite d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } cqite bd>d:nth-child(2)>t { padding: 0; } cqite bd>d>cc>input { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; font-weight: 200; } cqite bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } cqite bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } cqite bd>d:nth-child(2)>t { border-bottom: 0; } cqite bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } cqite bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } cqite d>t>p:nth-child(2) { color: var(--a); } cqite bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } cqite bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -35px; } cqite bd>d c>i { height: 13px; width: 13px; } cqite bd>d c>i:nth-child(2) { height: 16px; width: 16px; } cqite bd>d c>i:nth-child(2) svg { fill: var(--cr); } cqite bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } cqite ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } cqite ft>div i { height: 16px; width: 16px; } cqite div>cc>input { border: solid 1px var(--a); height: 33px; } cqite div>cc>input:focus { border: solid 1px var(--a); } cqite c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } cqite div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } cqite div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } cqite ft>div { display: none; } .Header cqit ft>div { display: grid; } cqite div>span:hover { background: var(--a); color: var(--b); } cqite>bl>bd c svg { fill: var(--cr); } @media(max-width:999px){ cqite { display: grid;overflow: scroll; } cqit bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } } /*Customer_Notes*/ qenu >bl { display: flex; flex-direction: column; justify-content: space-between; height: -webkit-fill-available; } qenu btn>i { height: 15px; width: 15px; padding: 9px; background: var(--b-t); display: block; margin: 0 1px; border-radius: 0px 6px 6px 0px; } qenu hd>btn { padding: 8px; display: flex; align-items: center; border-radius: 6px; } qenu btn>c>i { height: 13px; width: 13px; background: var(--a); } qenu c>i>svg { fill: var(--b); } qenu hd btn c {display:flex; background: var(--b-t); padding: 9px; border-radius: 6px 0px 0px 6px; font-size: 0.77em; align-items: center; gap: 4px; } qenu bl>hd { display: flex; align-items: center; } qenu hd>btn:nth-child(2)>c { border-radius: 6px; } qenu bd>lable { font-size: 0.88em; display: block; margin: 11px 0;margin-top: 0;} qenu bd textarea {border: solid 1px var(--b-t);font-size: 12px;padding: 8px;border-radius: 8px;width: 411px; min-height: 55px; max-height: 188px; resize: vertical;} qenu bl>bd { padding: 11px;padding-top: 0;} @media(max-width:999px){ qenu bd textarea { width: -webkit-fill-available; } qenu bl>bd { padding-top: 0; margin: 11px 0; } } /*Quote_SubTotal*/ sbtl { display: block; padding: 11px; background: var(--bg); margin: 11px; border-radius: 11px; } sbtl bd>d { display: grid; grid-template-columns: auto auto; justify-content: space-between; font-size: 0.88em;align-items: center; } sbtl bd>d:nth-child(1) { font-weight: 500; } sbtl bd>d>t { padding: 10px; } sbtl d>cc>t { padding: 10px; } sbtl d>prc { padding: 10px; } sbtl f > prc { display: block; font-size: 1rem; font-weight: 400; line-height: 1.6; width: 75px; text-align: end; padding: 3px 11px; border: solid 1px var(--bor); border-radius: 8px 0px 0px 8px; } sbtl f>t { font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: end; border: solid 1px var(--bor); border-left: unset; border-radius: 0px 8px 8px 0px; padding: 0 10px; display: flex; align-items: center; justify-content: end; width: 12px; } sbtl div>prc { display: grid; margin-left: auto; } sbtl bd>div { display: grid; align-items: center; grid-template-columns: 166px auto auto; padding: 0 9px; font-size: 0.88em; margin: 11px 0; } sbtl h>sl { padding: 0; background: unset; display: flex; align-items: center; height: unset; margin: 0; gap: 9px; width: fit-content; } sbtl sl>input { height: 16px; width: 16px; } sbtl div>h { display: flex; align-items: center; gap: 11px; } sbtl f>input { display: flex; border: solid 1px var(--bor); height: 33px; width: fit-content; font-weight: 500; transition: 333ms; } sbtl f>input:focus { border: solid 1px var(--a); } sbtl f>input:hover{border: solid 1px var(--a); } sbtl m>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; width: 111px; } sbtl cc>m>input { border: dashed 1px var(--bor); } sbtl m>input:hover { border: dashed 1px var(--a); } sbtl m>input:focus { border: solid 1px var(--a); box-shadow: 0px 0px 5px 1px var(--at); } sbtl bl>ft { padding: 11px; display: FLEX; align-items: center; justify-content: space-between; border-top: solid 1px var(--bc); } sbtl bl>ft>prc { font-weight: bold; } sbtl bl>bd { display: block; margin-bottom: 33px; } sbtl div:nth-child(3) cc>f { align-items: center; display: flex; position: relative; width: fit-content; } sbtl f>i { height: 18px; width: 18px; position: absolute; right: 3px; top: 8px; bottom: 0; opacity: 77%; } sbtl div:nth-child(3) prc { opacity: 77%; } @media(max-width:999px){ sbtl bd>div { grid-template-columns: 124px auto auto; } sbtl cc>m>input { width: 90px; } sbtl { margin: 0; } sbtl f>input { width: 110px; } } /*comonent:-Quote_SubTotalUpdate*/ cqtl { display: block; padding: 11px; background: var(--bg); margin: 11px; border-radius: 11px; } cqtl bd>d { display: grid; grid-template-columns: auto auto; justify-content: space-between; font-size: 0.88em;align-items: center; } cqtl bd>d:nth-child(1) { font-weight: 500; } cqtl bd>d>t { padding: 10px; } cqtl d>cc>t { padding: 10px; } cqtl d>prc { padding: 10px; } cqtl f > prc { display: block; font-size: 1rem; font-weight: 400; line-height: 1.6; width: 75px; text-align: end; padding: 3px 11px; border: solid 1px var(--bor); border-radius: 8px 0px 0px 8px; } cqtl f>t { font-size: 1rem; font-weight: 400; line-height: 1.6; text-align: end; border: solid 1px var(--bor); border-left: unset; border-radius: 0px 8px 8px 0px; padding: 0 10px; display: flex; align-items: center; justify-content: end; width: 12px; } cqtl div>prc { display: grid; margin-left: auto; } cqtl bd>div { display: grid; align-items: center; grid-template-columns: 166px auto auto; padding: 0 9px; font-size: 0.88em; margin: 11px 0; } cqtl h>sl { padding: 0; background: unset; display: flex; align-items: center; height: unset; margin: 0; gap: 9px; width: fit-content; } cqtl sl>input { height: 16px; width: 16px; } cqtl div>h { display: flex; align-items: center; gap: 11px; } cqtl f>input { display: flex; border: solid 1px var(--bor); height: 33px; width: fit-content; font-weight: 500; transition: 333ms; } cqtl f>input:focus { border: solid 1px var(--a); } cqtl f>input:hover{border: solid 1px var(--a); } cqtl m>input { display: flex; border: solid 1px var(--bor); height: 33px; font-weight: 500; transition: 333ms; width: 111px; } cqtl cc>m>input { border: dashed 1px var(--bor); } cqtl m>input:hover { border: dashed 1px var(--a); } cqtl m>input:focus { border: solid 1px var(--a); box-shadow: 0px 0px 5px 1px var(--at); } cqtl bl>ft { padding: 11px; display: FLEX; align-items: center; justify-content: space-between; border-top: solid 1px var(--bc); } cqtl bl>ft>prc { font-weight: bold; } cqtl bl>bd { display: block; margin-bottom: 33px; } cqtl div:nth-child(3) cc>f { align-items: center; display: flex; position: relative; width: fit-content; } cqtl f>i { height: 18px; width: 18px; position: absolute; right: 3px; top: 8px; bottom: 0; opacity: 77%; } cqtl div:nth-child(3) prc { opacity: 77%; } @media(max-width:999px){ cqtl bd>div { grid-template-columns: 124px auto auto; } cqtl cc>m>input { width: 90px; } cqtl { margin: 0; } cqtl f>input { width: 110px; }} /*Quote_TermUpdate*/ cedu bl { padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: var(--bg); display: grid; grid-template-columns: max-content auto; } cedu dv>t { display: block; font-size: 0.88em; margin: 11px 0; } cedu c>textarea { padding: 11px; font-weight: 400; border: solid 1px var(--bc); border-radius: 11px; font-size: 12px; display: block; max-width: 728px; min-width: 728px; } cedu c>textarea:focus { border: solid 1px var(--a); border-radius: 7px; } cedu hd>dv { padding-right: 11px; display: block; } cedu bl>bd { border-left: solid 1px var(--bc); padding: 0 19px; width: max-content; } cedu bd>t { font-size: 0.8em; } cedu f>c>i { height: 22px; width: 20px; opacity: 77%; } cedu dv>f { border: dashed 1px var(--bor); width: fit-content; align-items: center; gap: 1px; font-size: 0.8em; border-radius: 5px; background: var(--b); margin: 2px 0; } cedu dv > f > i { font-size: 1rem; font-weight: 400; border: 0; line-height: 1.6; text-align: end; border-radius: 0px 8px 8px 0px; display: flex; align-items: center; justify-content: end; margin: 0 7px; height: 23px; width: 16px; } cedu dv>f>c { display: flex; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px; } cedu bd>small { font-size: 0.66em; opacity: 77%; } @media(max-width:1255px){ cedu bl { display: grid ; grid-template-columns: auto; gap: 11px; margin: 11px; border-radius: 8px; } cedu bl>bd { border: 0; padding: 0; } cedu c>textarea { min-width: -webkit-fill-available; } } cedu dv>t { display: block; font-size: 12px; margin: 4px; } /*Quote_UpdateItem*/ qopt { display: block; border-top: solid 1px var(--b-t); border-radius: 11px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0; position: relative; } qopt bd>d:nth-child(2){border-bottom: solid 1px var(--b-t);} qopt hd { display: flex; background: var(--bg); padding: 11px; border-radius: 11px 11px 0 0; border-bottom: solid 1px var(--b-t); } qopt hd>h4 { font-size: 0.88em; } qopt bd { display: block; } qopt bd>d { display: grid; grid-template-columns: 50% 20% 17% 13%; position: relative; margin-left: 17px; } qopt bd>d>t { display: block; padding: 7px; border-bottom: solid 1px var(--bc); border-right: solid 1px var(--bc); text-align: end; font-size: 0.77em; } qopt bd>d:nth-child(1)>t:nth-child(4) { border-right: 0; } qopt bd>d>t:nth-child(1){ text-align: unset; } qopt bd>d>cc>input { border: unset; } qopt bd>d>cc { display: block; border-right: solid 1px var(--b-t); } qopt bd>d>cc>textarea:hover { box-shadow: 0px 0px 1px 1px var(--a); } qopt d>cc>textarea:focus { border: solid 1px var(--a); } qopt d>t>p:hover { box-shadow: 0px 0px 1px 1px var(--a); } qopt d>t>p{margin: 0; padding: 9px;border-radius: 5px;transition:99ms; } qopt bd>d:nth-child(2)>t { padding: 0; } qopt bd>d>cc>textarea { border-radius: 9px; padding: 11px; font-size: 12px; border: 0; margin-bottom: 11px; height: 44px; max-width: 532px; width: -webkit-fill-available; } qopt bd>d:nth-child(2)>t:nth-child(4) { padding: 0; } qopt bd>d>t:nth-child(5) { border-right: 0; padding: 9px; } qopt bd>d:nth-child(2)>t { border-bottom: 0; } qopt bd>d>t:nth-child(3)>i { display: flex; height: 13px; width: 13px; } qopt bd>d:nth-child(1)>t:nth-child(3) { display: flex; align-items: center; justify-content: end; gap: 5px; } qopt bd>d>i { display: block; position: absolute; height: 16px; width: 16px; right: 0; left: -34px; margin-top: 4px; opacity: 18%; } qopt bd>d c { display: flex; align-items: center; position: absolute; top: 12px; right: -35px; } qopt bd>d c>i { height: 13px; width: 13px; } qopt bd>d c>i:nth-child(2) { height: 16px; width: 16px; } qopt bd>d c>i:nth-child(2) svg { fill: var(--cr); } qopt bd>d c>i:nth-child(1) { transform: rotate(90deg); opacity: 77%; } qopt ft>div { display: grid; align-items: center; gap: 11px; margin-top: 11px; grid-template-columns: 12px auto; } qopt ft>div i { height: 16px; width: 16px; } qopt div>cc>input { border: solid 1px var(--a); height: 33px; } qopt div>cc>input:focus { border: solid 1px var(--a); } qopt c>div { display: none; background: var(--b); box-shadow: var(--bs-b); border-radius: 11px; padding: 5px; gap: 4px; width: max-content; position: absolute; right: 14px; top: 100%; margin-top: 7px; z-index: 999; } qopt div>span { display: block; line-height: 1.44em; padding: 8px; font-size: 0.88em; border-radius: 7px; } qopt div>span.this { background: var(--a); color: var(--b); } .Insert cqit c>div { display: grid; } qopt div>span:focus { background: var(--a); color: var(--b); } qopt ft>div { display: none; } .Header cqit ft>div { display: grid; } qopt div>span:hover { background: var(--a); color: var(--b); } @media(max-width:999px){ qopt { display: grid; width: 60px; } qopt bd>d>i { display: block; height: 16px; width: 16px; margin-top: 8px; position: absolute; left: -18px; right: 0; opacity: 18%; } qopt>bl { min-width: 299px; } } /*component:-Quotes*/ qots bl { display: block; } qots input { width: 13px; height: 13px; } qots bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } qots hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } qots bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} qots bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} qots bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} qots bd span { font-size: 12px; display: flex; width: 99px; } qots bd table td t { color: var(--br); font-size: 14px; } qots bd table tr td:nth-child(5) {justify-content: center;} qots bd table tr td:nth-child(6) {justify-content: end;} qots bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} qots bd table i { width: 26px; height: 19px; } qots td t d i { width: 30px; height: 12px; } qots>bl hd table { background: var(--b1); } qots>bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} qots>bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } qots bd tbody>tr>th { color: var(--br); } qots>bl hd table i { width: 26px; height: 19px; } qots>bl>hd dv { display: flex ; align-items: center; } qots bd table th { height: unset; } qots table>thead { background: var(--b-t); } qots bd table tr>td:last-child { width: 0; padding: 0; } qots bd table tr>th:first-child {padding: 7px;width: 20px;} qots bd table th:nth-child(8) {text-align: end;} @media(max-width:999px){ qots bd table { display: block; overflow: scroll; } qots>bl> hd table th { width: 137px; } } qots hd div { display: flex; justify-content: space-between; align-items: center; padding: 6px 11px 11px; } qots hd h2 { font-size: 18px; font-weight: 600; display: flex; align-items: center; } qots hd i { height: 21px; width: 20px; } qots hd svg { fill: var(--aa); } qots hd btns { display: flex; align-items: center; gap: 11px; justify-content: center; } qots bl hd btns btn { display: flex; align-items: center; background: var(--a); padding: 7px; border-radius: 4px 6px; color: var(--b); font-size: 13px; font-weight: 400; position: relative; width: 50px; justify-content: center; } qots>bl>hd btn>i { height: 16px; width: 16px; } qots hd btns svg { fill: var(--b); } qots hd box { box-shadow: var(--bss); padding: 6px 6px; align-items: center; background: var(--bc); position: relative; } qots hd box svg { fill: var(--br); transform: rotate( 180deg); } qots bd tbody>tr>th:first-child { width: 154px; display: block; } qots bl { display: block; } qots input { width: 13px; height: 13px; } qots bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } qots hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } qots bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } qots bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} qots bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} qots bd span { font-size: 12px; display: flex; width: 99px; } qots bd tbody td t { color: var(--br); font-size: 14px; } qots bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } qots bd tbody i { width: 26px; height: 19px; } qots td t d i { width: 30px; height: 12px; } qots>bl>bd dv { display: flex ; align-items: center; } qots bd table tr>td { font-size: 0.77em; } qots bd table tr>th:nth-child(2) { width: 20px; } /*ReceivableOverview*/ ctrp bl { display: block; border: solid 1px var(--bc); margin: 11px; border-radius: 11px; position:relative; background: var(--b);} ctrp bl hd>d { display: flex; align-items: center; gap: 4px; } ctrp bl bd {padding: 11px 22px;} ctrp bd>d { display: block; background: var(--a); padding: 7px; border-radius: 3px; margin: 5px 0; font-size: 0.77em; position: relative; } ctrp ft dv p{ display: block; font-size: 0.88em; color: var(--aa); font-weight: 300; margin: 0; } ctrp bl ft { padding: 11px 22px; border-top: solid 1px var(--bc); align-items: center; display: grid; grid-template-columns: auto auto auto auto auto; } ctrp ft dv cm{ display: block; font-size: 0.88em;font-weight: 300;} ctrp dv h2 { font-weight: 400; } ctrp ft>dv:nth-child(1) { border-right: solid 1px var(--bc); margin: 0; margin-right: 19px; } ctrp ft dv cm { display: block; font-size: 0.77em; font-weight: 300; } ctrp bl hd h4 { font-weight: 400; font-size: 18px; position: relative; } ctrp ft dv ss{ display: block; font-size: 0.88em; color: var(--cr); font-weight: 300; margin: 0; } ctrp d>t { font-size: 13px; } ctrp div f cc { font-size: 0.77em; } @media(max-width:999px){ ctrp bl ft { display: flex; padding: 11px; gap: 22px; flex-wrap: wrap; text-align: center; align-items: flex-start; } ctrp bl hd { display: block; } ctrp bl{margin: unset;} } ctrp bl hd { display: flex; padding: 11px; background: var(--bg); border-bottom: solid 1px var(--bc); justify-content: space-between; align-items: center; } ctrp hd>d i { height: 13px; width: 13px; border-radius: 16px; background: var(--a); } ctrp bd>cc { font-size: 0.66em; opacity: 77%; } ctrp hd>d i svg { fill: var(--b);} ctrp hd>div { background: var(--b); display: grid; padding: 7px; box-shadow: var(--bss); gap: 7px; position: absolute; border-radius: 7px; width: 233px; right: 0; top: 21%; z-index: 999999; transition: 999ms; } ctrp hd>div f { display: flex; align-items: center; padding: 11px; border-radius: 7px; gap: 11px; padding-right: 55px; } ctrp div f i { height: 14px; width: 14px; border-radius: 16px; background: var(--b); } ctrp hd>div.Device { display: grid; opacity: 1; padding: 4px; height: fit-content; } ctrp hd>div{ display: none; } ctrp bl ft { display: grid ; padding: 11px; gap: 22px; flex-wrap: wrap; text-align: center; align-items: center; grid-template-columns: auto auto auto auto; } ctrp hd>div f:hover { background: var(--aa); color: var(--b); } ctrp hd>div f:nth-child(1) { background: var(--aa); } ctrp hd>div f:nth-child(1) cc {color:var(--b);} /*Reports_Center*/ crtp>bl hd div { display: flex; gap: 4px; font-size: 16px; } crtp>bl hd div i { height: 19px; width: 24px; display: block; } crtp>bl bd div i { height: 16px; width: 16px; display: flex; } crtp>bl bd div t { color: var(--aa); font-weight: 400; font-size: 0.77em; } crtp>bl hd { display: flex; } crtp>bl bd div { border-bottom: 1px dashed var(--bor); padding-bottom: 5px; display: flex; align-items: center; margin-top: 11px; justify-content: space-between; min-width: max-content; } crtp>bl bd { display: grid; grid-template-columns: 277px auto; margin-bottom: 16px; justify-content: space-between; gap: 11px; } crtp>bl hd>span { display: flex; align-items: center; gap: 6px; } crtp>bl hd>span>i { height: 22px; width: 22px; display: block; } crtp>bl bd div i>svg { fill: var(--bor); } @media(max-width:999px){ crtp>bl bd { grid-template-columns: auto auto; } } /* Component :- Reports_Center */ crtps>bl>hd { display: grid; justify-content: center; padding: 11px; background: url(/-Brand/Invoice/asset/HomeBG.png); background-size: 311px; } crtps>bl hd h4 { line-height: 1; display: flex; justify-content: center; font-size: 1.55em; font-weight: 500; padding-top: 22px; } crtps>bl hd input { display: flex; justify-content: center; align-items: center; line-height: 1; width: 442px; padding: 0px 12px; box-shadow: 0px 0px 2px 0px; border-radius: 4px; padding-left: 33px; font-weight: 300; height: 34px; color: var(--bor); } crtps>bl hd>div { display: flex; margin-top: 11px; position: relative; } crtps>bl hd select { align-items: center; line-height: 1; max-width: none; box-shadow: 0px 0px 2px 0px; border-radius: 4px; display: block; width: 37%; padding: 5px 5px 5px 30px; } crtps>bl hd dv i { position: absolute; height: 22px; width: 22px; top: 11px; left: 11px; } crtps>bl hd dv { position: relative; } crtps>bl hd dv { position: relative; width: 60%;} crtps>bl bd i { height: 16px; width: 16px; display: flex; } crtps>bl bd dv>span { display: flex; align-items: center; gap: 6px; } crtp>bl bd div t { color: var(--aa); font-weight: 400; font-size: 0.77em; } crtps>bl bd dv>span i { height: 22px; width: 22px; display: block; } crtps>bl hd input { border: solid 0px var(--bc); } crtps>bl hd>div>i:nth-child(1) { height: 16px; width: 16px; position: absolute; left: 18%; bottom: 9px; } crtps>bl bd d { display: grid; box-shadow: var(--bs); padding: 35px; border: solid 1px var(--bc); border-radius: 11px; max-width: 777px; margin: 11px auto; position: relative; } crtps>bl hd input:hover { box-shadow: 0px 0px 0px 1px var(--aa);} crtps>bl hd>div>i:nth-child(1) { height: 16px; width: 16px; position: absolute; left: 9px; bottom: 9px; } crtps>bl hd input:focus { box-shadow: 0px 0px 0px 1px var(--aa); margin: 0px; border: 0; } crtps bd d div ul li { display: flex; line-height: 2.5; border-bottom: dashed 2px var(--bor); width: 263px; color: var( --aa); align-items: center; display: grid; grid-template-columns: 249px auto; font-size: 0.87em; white-space: nowrap; } crtps>bl>bd mg { display: flex ; align-items: center; gap: 0; } crtps>bl bd div>ul { display: grid; grid-template-columns: auto auto; gap: 11px; padding: 0; } crtps>bl bd d div { display: block; margin-bottom: 14px; } @media(max-width:999px){ crtps>bl hd>div>i:nth-child(1) { bottom: 9px; } crtps>bl hd input { width: auto; } } /*component:Reports_Created*/ crcd bd i { height: 117px; } crcd bd h2 { display: flex; align-items: center; justify-content: center; font-size: 17px; padding: 16px 0px 0px 0px; font-weight: 400; } crcd bd span { display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 17px; font-weight: 300; } crcd bd p { display: flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 12px; font-weight: 300; } crcd bd span { display: flex; margin-left: 11px; } @media(max-width:999px){ crcd bd span { padding-inline: 20px; } }crce bd div { width: 44%; margin: 7% 2.4% 0; padding: 4%; border-radius: 8px; background-color: #f9f9fb; } crce bd div i { height: 40px; width: 40px; } crce bd div path.green:hover { fill: #26db91; transition: .2s; } pars path.layer { fill: #dae1ea; } pars path.layer1 { fill: #516889; } pars path.green { fill: #8e9bb5; } crce bd dv t { word-wrap: break-word; font-size: 13px; text-align: left; margin-top: 15px; display: block; cursor: pointer; line-height: 1.5; font-weight: 500; color: var(--c0); } crce bd div dv i { height: 9px; width: fit-content; position: relative; bottom: 14px; left: 5.4vw; } crce bd div dv i svg.icon.icon-xxs.fill-dropdown-blue.ms-1.arrow-svg { fill: var(--aa); } crce bd{display:flex;} /*Sales_ReceiptOverview*/ slro bd>dv { display: flex; align-items: center; border-bottom: solid 1px var(--bc); justify-content: space-between; padding: 0 11px; } slro dv>t { font-weight: 400; color: var(--cg); font-size: 0.88em; } slro dv>f { justify-content: space-between; width: 49%; } slro dv>f p { color: var(--a); padding: 7px; } slro bd>dv:hover { background: var(--bg); } slro bd>dv cc { font-size: 13px} /*Sales_ReceiptOverviews*/ slrt>bl>hd { display: flex; padding: 11px; background: var(--bg); border-bottom: solid 1px var(--bc); align-items: center; gap: 6px; } slrt { display: block; border: solid 1px var(--bc); margin: 11px; border-radius: 11px; min-height: 455px; background: var(--b); } slrt bd>dv { display: flex; align-items: center; border-bottom: solid 1px var(--bc); justify-content: space-between; padding: 0 11px; } slrt>bl>bd>dv:nth-child(1) { background: var(--bg); justify-content: end; gap: 60px; padding: 15px; } slrt dv>t { font-weight: 400; color: var(--cg); font-size: 0.88em; } slrt dv>f { justify-content: space-between; width: 49%; } slrt dv>f p { color: var(--a); padding: 7px; } slrt bd>dv:hover { background: var(--bg); } slrt bd>dv cc { font-size: 13px ; } slrt hd>h4 { font-size: 18px; font-weight: 400; } @media(max-width:999px){ slrt{display:none;} } slrt hd>i { height: 11px; width: 11px; } /*SaveAs_Cancle*/ @media(min-width:999px){ csac bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px;}} csac hd>btn { display: flex; align-items: center; background: var(--a); padding: 9px; justify-content: center; font-size: 0.88em; color: var(--b); border-radius: 3px; } csac bl>hd { display: flex; gap: 11px; } csac hd>btn:nth-child(3) { background: var(--bc); color: var(--br); border: solid 1px var(--bor); } csac bd>t { font-size: 0.777em; } csac bd>c { font-size: 0.77em; opacity: 77%; } csac bd>aa { font-size: 0.77em; color: var(--a); } @media(max-width:999px){ csac bl { padding: 11px; display: flex; background: var(--b); box-shadow: var(--bs-b); align-items: center; justify-content: space-between; flex-wrap: wrap; height: 44px; position: relative; bottom: 34px; display: grid; gap: 14px; } }csrts>bl bd div t { display: block; margin-top: 12px; } csrts>bl bd div { display: block; } csrts>bl bd { display: block; box-shadow: 0px 0px 5px 0px var(--bor); padding: 1px 13px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--c0) var(--b); height: 268px; max-width: 532px; border-radius: 11px; } csrts>bl bd div t:hover { background: var(--a); border-radius: 6px; color: var(--b); } csrts>bl bd div t { display: block; margin-top: 12px; padding: 11px; } csrts { position: absolute; top: 100%; max-width: 470px; width: 100%; z-index: 99999999; background: var(--b); } csrts.reports { display: block; } csrts{ display: none; } srto>bl bd div>i { display: flex; height: 55px; width: 56px; background: var(--b-t); color: var(--br); border-radius: 55px; font-style: unset; } srto>bl bd span { display: grid; align-items: center; grid-template-columns: 19% 66%; margin-top: 11px; } srto>bl bd span>i { display: flex; height: 55px; width: 56px; background: var(--cbg); color: var(--b1); border-radius: 55px; } srto>bl bd ss>i { display: flex; width: 19px; color: var(--b1); border-radius: 55px; height: 19px; } srto>bl bd ss t { color: var(--b); margin-left: 3px; border-right: solid 1px var(--b); padding-right: 6px; } srto>bl bd ss c { color: var(--b); margin-left: 3px; padding-right: 6px; } srto>bl bd dv ss { display: flex; align-items: center; } srto>bl bd dv t { color: var(--b); } srto>bl bd dv strong { color: var(--b); font-weight: 400; } srto>bl bd div { display: grid; align-items: center; grid-template-columns: 17% auto; margin-top: 11px; background: var(--a); border-radius: 7px; padding: 11px; }ceal>bl { display: block; max-width: 390px; padding: 11px; margin: 11px; border-radius: 7px; background: var(--b); border: solid 1px var(--bor); } ceal>bl input { outline: 0; display: block; font-weight: 400; padding: 0px 26px; border: solid 2px var(--a); position: relative; border-radius: 2px; } ceal>bl input:focus { border: solid 1px var(--aa); } ceal>bl ft div i { height: 19px; width: 19px; display: flex; } ceal>bl ft div { display: flex; align-items: center; gap: 11px; margin-top: 6px; } ceal>bl ft div i path { fill: var(--a); } ceal>bl ft div t { color: var(--a); } ceal>bl hd { display: block; } ceal>bl hd sl { display: flex; align-items: center; background: var(--b); } ceal>bl hd sl i { height: 18px; right: 0; position: absolute; width: 28px; left: 0; } sl input:focus { box-shadow: inset 0 0 0 1px var(--aa); border-radius: 5px; } ceal>bl hd { display: block; } /*component: Select_Menu*/ cstu hd input { display: block; background: var(--b); font-weight: 400; font-size: 0.88em; height: 33px; width: 187px; } cstu hd input { border: solid 1px var(--a); } cstu bl { padding: 11px; margin: 11px; width: 214px; box-shadow: var(--bss); } cstu bd li { list-style: none; } cstu bd t { font-size: 13px; color: var(--c1); line-height: 27px; } cstu bd li:hover { background: var(--a); } cstu bd li { list-style: none; border-radius: 7px; margin-top: 9px; padding: 2px 13px; } cstu bd li:hover { background: var(--a); width: 172px; } cstu bd t:hover { color: var(--b); } cstu bd div { display: block; border-bottom: solid 1px var(--b-t); scrollbar-width: thin; scrollbar-color: var(--c0) var(--b); overflow: scroll; height: 236px; } cstu bd svg { fill: var(--b); display: block; } cstu bd i { width: 13px; background: var(--a); border-radius: 9px; } cstu bd dv { display: flex; align-items: center; gap: 11px; margin-top: 7px; } /*component:Service_Hero*/ cshc bl { padding: 11px; } cshc hd div { display: flex; gap: 7px; align-items: center; } cshc hd h2 { font-size: 28px; font-weight: 400; } cshc hd b { font-size: 20px; font-weight: 400; } cshc hd h3 { font-size: 26px; font-weight: 400; } cshc hd h4 { font-size: 23px; font-weight: 300; } cshc hd c { border: solid 1px; padding: 25px 0px 0px 0px; } cshc bd { padding-top: 23px; } cshc bd a { font-size: 16px; font-weight: 500; border-bottom: solid 3px var(--aa); padding: 5px; } cshc bd dv { display: flex; gap: 19px;align-items: center;} cshc bd p { font-weight: 400; font-size: 14px; } cshc bd mg { display: block; margin-top: 4%; } cshc ft i { width: 3%; transform: rotate( 292deg); } cshc ft { display: flex; align-items: center; gap: 6px;padding-top: 17px; } cshc ft a { font-size: 14px; font-weight: 400; } /*Settings*/ .Setting Setting { right: 0; backdrop-filter:blur(0px); background: var(--bor); opacity: 1; visibility: visible; } Setting { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 333ms; height: 100%; right: -100%; overflow: hidden; visibility: hidden; top: 44px; } cisg { display: block; max-width: 400px; margin-left: auto; background: var(--b); box-shadow: 0px 0px 5px 0px var(--bor); height: -webkit-fill-available;} cisg bl>hd dv { display: flex; animation: c; justify-content: space-between; } cisg hd dv i { height: 22px; width: 22px; } cisg bl hd { display: block; padding: 11px; background: var(--b1); border-bottom: solid 1px var(--bor); } cisg hd dv>i svg { fill: var(--cr); } cisg form>sl { display: flex; align-items: center; margin-bottom: unset; position: relative; height: unset; overflow: unset; background: unset; width: unset; } cisg form>sl input { display: block; border: solid 1px var(--bor); margin-top: 14px; width: -webkit-fill-available; font-size: 14px; padding: 0 35px; transition: 44ms; font-weight: 300; } cisg form>sl input:focus { border: solid 1px var(--a); border-radius: 8px; box-shadow: unset; opacity: 48%; } cisg form>sl input:hover { border: solid 1px var(--a); } cisg bl>hd sl i { height: 18px; width: 18px; position: absolute; bottom: 0; top: 25px; right: 0; left: 9px; opacity: 76%; } cisg bd span { display: flex; padding: 7px; align-items: center; gap: 7px; position: relative; transition: 99ms; margin: 11px; padding-left: 17px; border-radius: 7px; font-weight: 200; } cisg bd i { height: 16px; width: 16px; filter: invert(1); transition: 333ms; } cisg bd span.this { background: var(--a);color:var(--b); } cisg bd span:hover { background: var(--a); color:var(--b); } cisg bl bd { display: grid; height: calc(-168px + 100vh); overflow: scroll; scroll-behavior: smooth; padding: 11px; } @media(max-width:999px){ cisg { display: block; max-width: 348px; background: var(--b); margin-left: unset; } }ctms>bl hd div { display: flex; justify-content: space-between; align-items: center; } ctms>bl hd div dv { display: flex; gap: 12px; align-items: center; } ctms>bl hd div dv cc { display: flex; align-items: center; gap: 17px; background: var(--b-t); padding: 9px; border-radius: 7px; } ctms>bl hd dv i:nth-child(1) { height: 14px; width: 23px; display: block; box-shadow: 0px 0px 2px 0px; padding: 9px; border-radius: 5px; background: var(--b-t); } ctms>bl hd div dv i:nth-child(3) { height: 25px; width: 33px; display: block; padding: 11px; } ctms>bl hd div dv cc i:after { content: ''; border-style: solid; border-width: 5px; border-color: transparent; border-top-width: 0; border-bottom: 6px solid var(--c); width: 0px; height: 0; font-size: 0; line-height: 0; position: absolute; transform: rotate(180deg); z-index: 999999999999; bottom: -3px; right: -2px; } ctms>bl hd div h2 { font-weight: 400; display: block; } ctms>bl hd mg { display: flex; gap: 26px; border-bottom: 1px solid var(--bor); } ctms>bl hd mg>t:nth-child(1) { border-bottom: solid 4px var(--a); } ctms>bl hr { color: var(--bor); border: solid 1px var(--bor); display: block; } ctms>bl bd div { display: grid; grid-template-columns: 21% 16%; padding: 11px; } ctms>bl bd div>t { display: block; line-height: 2; color: var(--cbg1); } ctms>bl bd div>b { font-weight: 400; padding: 3px; } ctms>bl bd>t { padding: 11px; color: var(--a2); display: block; } ctms>bl bd dv { display: grid; grid-template-columns: 21% 16%; padding: 11px; } ctms>bl bd dv>t { line-height: 2; color: var(--cbg1); } ctms>bl bd dv>b { font-weight: 400; padding: 3px; }csin>bl hd div i { height: 37px; width: 37px; } csin>bl hd div { display: flex; align-items: center; gap: 11px; } csin>bl hd div t{ display: block; color: var(--c0); font-size: 1.33em;} csin>bl hd dv b { font-size: 1.66em; display: block; margin-top: 8px; font-weight: 500; } csin { display: block; background: var(--b); padding: 22PX; box-shadow: 0px 0px 3px -1px; border-radius: 6px; max-width: 289PX; } csin>bl hd dv input:focus { border: solid 0px var(--bc); border-bottom: solid 1px var(--aa); } csin>bl hd dv input { outline: 0; display: block; max-width: 100%; background: var(--b-t77); height: 40px; font-weight: bold; padding: 0 12px; border: 0; margin-top: 7px; border-bottom: solid 1px var(--aa); margin-bottom: 14px; border-radius: 0; }` csin>bl bd div { display: block; } csin>bl bd div a { color: var(--aa); text-decoration: unset; font-weight: 400; display: block; } csin>bl bd dv { display: flex; gap: 8px; margin-bottom: 11px; } csin>bl ft btns btn:nth-child(2) { background: var(--aa); display: flex; padding: 4px 39px; align-items: center; justify-content: center; color: var(--b); font-size: 20px; width: 1%; } csin>bl ft btns { display: flex; gap: 14px; align-items: center; justify-content: flex-end; margin-top: 25px; } csin>bl ft btns btn:hover { background: var(--bor); } csin>bl ft btns btn { background: var(--bor); display: flex; padding: 4px 39px; align-items: center; justify-content: center; font-size: 20px; width: 4%; } csin>bl ft btns btn:nth-child(2):hover { background: var(--a); } @media(max-width:999px){ csin { max-width: unset; } }@media screen and (min-width: 999px) { cstmo { position: relative; display: block; overflow: hidden; transition: 99ms; box-shadow: var(--bxs); border: var(--bs); background: var(--a); padding: 33px; border-radius: 22px; width: fit-content; margin: 7px; }} cstmo::before { content: ""; display: block; position: absolute; background-position: center; inset: 0; background: linear-gradient(45deg, #eceff147, #ffffff12); } cstmo hd i { height: 38px; width: 42px; } cstmo bl { z-index: 999; position: relative; display: grid; justify-content: center; font-family: system-ui; } cstmo hd { display: flex; align-items: center; justify-content: center; } cstmo:hover { transform: scale(1.04); } cstmo:active { transform: scale(.97); } cstmo bd h3 { font-size: 14px; color: var(--b); } @media screen and (max-width: 999px) { cstmo bd h3 { font-size: 10px; margin-left: 7px; } cstmo { position: relative; display: block; overflow: hidden; transition: 99ms; box-shadow: var(--bxs); border: var(--bs); background: var(--a); padding: 33px; border-radius: 22px; width: auto; margin: 7px; } } cstms flex { display: flex; flex-wrap: wrap; margin: 10px; margin-left: 0px; } @media(max-width:999px){ cstms flex { display: grid; grid-template-columns: auto auto; margin-left: 16px; } cstms hd i { height: 49px; } } /*Start_Menu*/ csnu bl { display: block; box-shadow: 0px 0px 1px 0px; width: 333px; position: relative; background: var(--c1); color: var(--b);height: calc(-41px + 100vh);} csnu bd div { display: block; line-height: 2;} csnu bd span { display: flex; padding: 10px; align-items: center; gap: 12px; position: relative;transition: 99ms;} csnu bd i { height: 30px; width: 30px; filter: invert(1); } csnu bd img { max-width: 100%; max-height: 100%; filter: opacity(0.5); } csnu bd t { display: flex; align-items: center; padding-left: 18px; } csnu bd t i { transform: rotate(87deg); } csnu bd a { color: var(--b); text-decoration: unset; font-weight: normal; } csnu bd i { height: 30px; width: 30px; filter: invert(1); transition: 333ms; } csnu bd b { font-weight: 400; font-size: 15px; line-height: 1; display: block; margin-top: 4px; } csnu bd span:active { background: var(--c0); } csnu>bl>bd { display: block; overflow: auto; max-height: 96vh; } @media(max-width:999px){ csnu>bl>bd { display: block; overflow: auto; max-height: 96vh; } csnu bd div { display: block; line-height: 2; padding-bottom: 22px; }}cspo { display: block; padding: 13px; } cspo bd d { display: grid; grid-template-columns: auto auto auto; gap: 22px; padding: 11px 0; } @media(min-width:999px){ cspo>bl>ft { display: grid; grid-template-columns: auto auto; gap: 22px; } } @media(max-width:999px){ cspo>bl>ft{ display: block; } cspo bd d { display: block;padding:0px; } cspo { padding: 0; } } cstc>bl bd dv i { height: 17px; width: 17px; display: block; } cstc>bl bd dv t { display: flex; font-weight: 400; font-size: 0.77em; } cstc>bl bd div dv { display: flex; gap: 11px; align-items: center; } cstc { display: flex; padding: 11px; margin: 11px; box-shadow: 0px 0px 3px 0px var(--bor); border-radius: 5px; background: var(--b); width: max-content; } cstc>bl bd div { display: flex; justify-content: space-between; align-items: center; gap: 51px; } cstc>bl bd div span { color: var(--a); display: flex; font-weight: 400; position: relative; } @media(max-width:999px){ cstc>bl { margin: 25px; display: block; width: auto; } }cstp>bl bd dv i { height: 17px; width: 17px; display: block; } cstp>bl bd dv t { display: flex; font-weight: 400; font-size: 0.77em; } cstp>bl bd div dv { display: flex; gap: 11px; align-items: center; } cstp { display: flex; padding: 11px; margin: 11px; box-shadow: 0px 0px 3px 0px var(--bor); border-radius: 5px; background: var(--b); width: max-content; } cstp>bl bd div { display: flex; justify-content: space-between; align-items: center; gap: 51px; } cstp>bl bd div span { color: var(--a); display: flex; font-weight: 400; position: relative; } @media(max-width:999px){ cstp>bl { margin: 25px; display: block; width: auto; } }sctp>bl bd dv i { height: 17px; width: 17px; display: block; } sctp>bl bd dv t { display: flex; font-weight: 400; font-size: 0.77em; } sctp>bl bd div dv { display: flex; gap: 11px; align-items: center; } sctp { display: flex; padding: 11px; margin: 11px; box-shadow: 0px 0px 3px 0px var(--bor); border-radius: 5px; background: var(--b); width: max-content; } sctp>bl bd div { display: flex; justify-content: space-between; align-items: center; gap: 51px; } sctp>bl bd div span { color: var(--a); display: flex; font-weight: 400; position: relative; } @media(max-width:999px){ sctp>bl { margin: 25px; display: block; width: auto; } } /*component:-StepBill*/ ctpb bd div h4 { font-weight: 600; font-size: 23px; } ctpb bd div { display: grid; text-align: center; margin-top: 65px; padding: 16px; padding-bottom: 0; } ctpb bd div t { color: var(--cg); font-size: 15px; padding-top: 10px; margin-top: 14px; } ctpb bd b btn { background: var(--a); padding: 9px; color: var(--b); font-size: 0.77em; border-radius: 5px; } ctpb bd b { display: flex; justify-content: center; align-items: center; margin-top: 21px; } ctpb bd b btn t { color: var(--b); font-weight: 300; } @media(max-width:999px){ ctpb bd div t { padding: 3px 24px; } } csys { display: grid; margin: 11px auto; } csys bd d { display: grid; grid-template-columns: auto auto; } @media(max-width: 999px){ csys bd d { display: block; } } /* component :Summary By paras */ csye { display: block; margin: 7px; } csye hd { display: grid; width: -webkit-fill-available; border: solid 1px var(--bc); border-bottom: 0; border-radius: 5px 5px 0 0; padding: 13px; box-shadow: var(--bss); background: var(--b); } csys hd d { display: flex; justify-content: space-between; } csye hd dv span { display: flex; font-size: 16px; font-weight: 500; } csye hd btns { display: flex; } csye hd btns i { display: flex; height: 19px; } csye hd btns i svg { fill: var(--aa); } csye hd div { align-items: center; padding: 4.4rem 0; margin: auto; } csye hd div f { display: flex; gap: 15px; position: relative; right: 16px; top: 4px; } csye hd div i { display: block; height: 84px; opacity: 0.50; } csye hd div span { display: flex; justify-content: center; } csye hd f i { display: flex; height: 26px; width: fit-content; position: relative; bottom: 3px; left: 16px; } csye hd f i svg { fill: var(--aa); } csye hd f u { white-space: nowrap; font-size: 13px; color: var(--aa); } csye bd { display: flex; width: fit-content; gap: 11px; padding: 11px;} csye bd i { display: flex; height: 20px; width: fit-content; } csye bd i svg { fill: var(--aa); } csho { margin: 11px auto; display: block; width: 100%; padding-top: 22px;} csho hd dv { display: flex; gap: 8px; } csho hd dv b { font-size: 22px; } csho hd dv span { font-size: 22px; } csho hd dv d { font-size: 11px; } csho bd { display: grid; margin: 11px; justify-content: space-between;} csho bd btns { display: flex; column-gap: 22px; row-gap: 7px; flex-wrap: wrap; justify-content: space-between; } csho bd btns btn { display: flex; align-items: center; min-width: max-content; } csho bd i { display: flex; height: auto; width: 19px; } csho bd i svg { fill: var(--aa); } csho bd div { display: flex; gap: 11px; } csho bd btns span { font-size: 13px; } csho bd div btn { display: flex; padding-top: 9px; } /* component:Support_Hero */ cppr>bl { display: block; padding: 11px; } cppr hd h3 { font-size: 1.44em; margin-bottom: 30px; font-family: sans-serif; font-weight: 500; } cppr hd b { border: solid 1px; margin: 4px; } cppr bd h3 { font-weight: 500; margin-bottom: 16px; } cppr>bl>bd { display: block; margin-top: 12px; } cppr bd d { display: grid; grid-template-columns: auto auto; gap: 11px; margin: 11px 0; } cppr hd t { font-weight: 400; font-size: 22px } @media(max-width:666px){ cppr bd d { grid-template-columns: auto; } cppr>bl { padding: 11px 7px; } } /* component:Support_Request*/ coqo { display: block; padding: 6px; background: var(--b); } coqo div h3 { font-weight: 500; font-size: 0.88em;position: relative; } coqo bd d { display: block; background: linear-gradient(328deg, #9f9c9c2b, #8a82825e); padding: 11px; border-radius: 3px; margin: 27px 0; font-size: 0.77em; position: relative; } coqo bd d:after { content: ''; position: absolute; bottom: -13px; height: 1px; left: -17px; right: -12px; background: var(--b1); } coqo bd h3:after { content: ''; position: absolute; bottom: -13px; height: 1px; left: -17px; right: -12px; background: var(--b1); } @media(max-width:999px){ coqo { display: block; flex: none;padding:unset; } } /* component:Support_Requests */ coqs btns btn:nth-child(1){ border-bottom: solid 2px var(--a);color:unset; } coqs btns btn { display: block; line-height: 30px; font-weight: 400; } coqs div btns { display: flex; gap: 22px; align-items: center; } coqs>bl>hd { display: block; margin-bottom: 11px; } coqs hd p { font-size: 0.88em; font-weight: 400; } coqs f i { height: 18px; width: 18px; } coqs hd f { display: flex; align-items: center; gap: 12px; } coqs f sl { height: 36px; background: unset; overflow: unset; margin: 0; display: flex; align-items: center; } coqs f sl input { font-size: 14px; margin: 0; border-radius: 3px; height: 28px; font-weight: 300; padding: 3px 28px; border: solid 1px var(--bor); opacity: 0.5; } coqs hd dv { display: flex; align-items: center; justify-content: space-between; } coqs sl input:focus { box-shadow: unset; border-radius: unset; border: solid 1px var(--bor); } coqs bd>d { display: grid; grid-template-columns: 270px 288px 270px 270px 270px 270px; } coqs>bl { display: grid; padding: 0 5px; } coqs>bl>bd { display: flex; overflow: scroll; } coqs sl i { height: 22px; width: 22px; position: absolute; margin: 2px 4px;opacity: 0.5; } coqs sl i svg { fill: var(--aa); } coqs f d { display: flex; align-items: center; gap: 6px; } @media(max-width:999px){ coqs hd dv { display: grid; justify-content: unset; } coqs hd p { font-size: 0.77em; } coqs bd>d { gap: 11px; } } ctid>bl>ft { display: grid; grid-template-columns: 60% auto; } ctid>bl {display: block; border: solid 1px var(--c0); } ctid { padding: 44px; display: block; background: var(--b); box-shadow: var(--bs-b); margin: 22px; position: relative; } @media(max-width:999px){ ctid {padding: 2px;margin: 11px 0;} ctid>bl>ft { grid-template-columns: auto; } }ctam hd h2 { display: flex; border-right: solid 1px; } ctam bd div { display: flex; gap: 10px; padding: 11px; } ctam hd { display: flex; align-items: center; gap: 9px; padding: 11px; } ctam hd h2 { display: flex; border-right: solid 3px; } ctam bd div i { height: 18px; display: block; width: 15px; } ctam bd div { display: flex; gap: 10px; } ctam hd div { display: flex; align-items: center; gap: 9px; } ctam ft span input { outline: 0; display: block; background: var(--b-t77); height: 34px; font-weight: bold; padding: 0 12px; border: solid 1px; } ctam ft div input { outline: 0; display: block; background: var(--b-t77); height: 34px; font-weight: bold; padding: 0 12px; border: solid 1px; } ctam ft div i { display: block; margin-top: 4px; } ctam ft dv { padding: 11px; display: flex; gap: 13px; } ctam ft span label { padding: 26px; } ctam ft div label { padding: 26px; } ctam bd div t { white-space: nowrap; } ctam { display: grid; margin: auto; width: 93%; } ctam>bl ft div select:focus { border: solid 0px var(--bc); } ctam>bl ft div select { border-radius: 2px; width: -webkit-fill-available; box-shadow: 0px 0px 3px 0px var(--bor); } ctam>bl hd div b { font-size: 1.77em; font-weight: 400; display: grid; } @media(max-width:999px){ ctam>bl hd { font-size: 0.66em; display: flex; } ctam bd div { display: flex; gap: 10px; overflow: scroll; max-width: 333px; } ctam ft dv { padding: 11px; display: flex; gap: 13px; } ctam { display: grid; margin: 11px; } } /* Component :- Templates_Setp1 */ ctss>bl hd div t { display: block; font-size: 0.77em; line-height: 19px; } ctss>bl hd div { display: block; padding: 22px; } ctss>bl hd b i { height: 100px; width: 80px; display: block; overflow: hidden; margin-top: 5px; } ctss>bl hd dv b { display: flex; padding: 0 15px; } ctss>bl hd ss span { font-weight: 400; font-size: 11px; padding: 9px; } ctss>bl hd ss i:focus { border: solid 1px var(--a); } ctss>bl hd ss.this i:after { content: ""; height: 15px; width: 15px; border-radius: 55%; display: block; top: 0; z-index: 99999; position: absolute; right: 0;} ctss>bl hd ss.this i { box-shadow: 0 0 0 2px var(--a); } ctss>bl hd ins cc { padding: 16px 0px 0px 16px; display: block; font-size: 0.77em; font-weight: 500; } ctss>bl hd ins i { height: 22px; width: 22px; display: flex; } ctss>bl hd ins dv { display: flex; align-items: center; justify-content: center; max-width: 350px; border-radius: 7px; height: 34px; margin: 16px; position: relative; border: 1px dashed var(--aat); } ctss bd span { background: var(--b1); display: flex; padding: 11px; border-radius: 7px; } ctss>bl hd ins dv t { color: var(--a); } ctss>bl hd ins dv svg { fill: var(--a); } ctss>bl input[type="file"] { position: absolute; inset: 0; width: -webkit-fill-available; opacity: 0; } ctss>bl bd div b { display: block; padding: 10px 0px 0px 18px; font-weight: 500; font-size: 0.77em; } ctss>bl bd dv t { display: block; font-size: 0.77em; color: var(--c0); } ctss>bl>bd>div>dv>ss>d { border: solid 1px var(--bor); height: 16px; width: 30px; margin: 10px; position: relative; border-radius: 6px; padding: 6px; align-items: center; justify-content: center; } ctss>bl bd div dv { display: block; align-items: center; } ctss>bl input[type="color"] { position: absolute; inset: 0; width: -webkit-available; opacity: 0; } ctss>bl bd div ss { display: flex; align-items: center; width: 300px; justify-content: space-between; } ctss>bl bd span a { color: var(--a); text-decoration: unset; font-weight: 400; font-size: 0.77em; } ctss>bl bd span i { height: 22px; transform: rotate( 275deg); width: 22px; display: flex; } ctss>bl ft btns btn { display: flex; background: var(--a); padding: 8px; margin: 22px; border-radius: 6px; color: var(--b); width: fit-content; font-size: 0.77em; } ctss>bl { max-width: 431px; border: solid 1px var(--aat); margin: 22px; padding: 11px; border-radius: 11px; position: relative; } ctss>bl bd dv i { height: 17px; width: 25px; } ctss.expend bl{ display: block; } ctss bd hr { color: var(--b1); display: flex; } ctss span t { font-size: 0.66em; } ctss bd mg { display: flex; align-items: center; position: relative; right: 13%; } ctss>bl bd span i svg { width: 15px; } ctss>bl:after { content: ''; border-style: solid; border-width: 9px; border-color: transparent; border-top-width: 0; border-bottom: 9px solid var(--at); width: 1px; height: 0px; font-size: 0; line-height: 0; position: absolute; top: 33px; transform: rotate(90deg); z-index: 999999999999; left: 99%; } ctss { display: block; height: auto; } .Setp1 ctss { height: auto; display : block;} .Setp2 ctss { display: none; } .Setp3 ctss { display: none; } .Setp2 d.setp1 { display: flex; } .Setp3 d.setp1 { display: flex; } sinw d.setp1 { display: none; } ctss>bl hd ss.this i { box-shadow: 0 0 0 2px var(--a); } @media(max-width :999px){ ctss>bl { margin: 0; max-width: unset; } ctss>bl hd dv b { display: flex; overflow-x: scroll; } ctss>bl bd dv i { position: absolute; width: 86%; height: 18px; display: block; } ctss>bl bd dv d { border: solid 2px var(--bor); height: 22px; width: 22px; margin: 1px; position: relative; } }6 /* Component :- Templates_Setp1 */ tssp input { width: 13px; display: flex; } tssp>bl hd d { display: flex; align-items: center; padding: 3px; } tssp>bl div t { display: block; padding: 4px; font-size: 0.88em; } tssp>bl ft btns btn { display: flex; background: var(--a); padding: 8px; margin: 22px; border-radius: 6px; color: var(--b); width: fit-content; font-size: 0.77em; } tssp>bl hd dv { display: flex; } tssp>bl { max-width: 431px; border: solid 1px var(--aat); margin: 22px; padding: 11px; border-radius: 11px; position: relative; } tssp>bl:after { content: ''; border-style: solid; border-width: 9px; border-color: transparent; border-top-width: 0; border-bottom: 9px solid var(--at); width: 0; height: 0; font-size: 0; line-height: 0; position: absolute; top: 51px; transform: rotate( 90deg); z-index: 9999999999999999999999; right: -15px; } tssp hd t { font-size: 0.77em; display: block; } tssp mg b { font-size: 0.77em; font-weight: 300; } tssp mg gg { font-size: 0.7em; background: var(--bt); padding: 0px 7px; border-radius: 4px; } tssp>bl>bd>div>t { display: block; padding: 4px; font-size: 0.77em; color: var(--cbg1); font-weight: 400; } tssp { display: block; height: 0px; transition: 999ms; overflow: hidden; } .Setp2 tssp { height: auto; } @media(max-width:999px){ tssp>bl hd dv { display: flex; gap: 29px; overflow-x: scroll; } tssp>bl { margin: 25px; display: block; width: auto; } tssp>bl hd d t { white-space: nowrap; font-size: 13px; } } /* Component :- Templates_Setp1 */ ctsp { width: -webkit-fill-available; max-width: 450px; display: flex; } ctsp input { width: 14px; display: flex; height: 16px; } ctsp>bl hd d { display: flex; align-items: center; } ctsp>bl div t { display: block; padding: 11px; font-size: 0.77em; } ctsp>bl ft btns btn { display: flex; background: var(--a); padding: 8px; margin: 22px; border-radius: 6px; color: var(--b); width: fit-content; font-size: 0.77em; } ctsp>bl hd dv { display: flex; gap: 29px; } ctsp>bl div btn { border-radius: 5px; font-size: 0.77em; display: flex; margin: 5px; height: 41px; width: 91%; align-items: center; justify-content: center; background: var(--bc); border: 1px solid var(--bor); gap: 5px; } ctsp>bl bd div dv { display: grid; padding: 8px 5px; margin: 3px; grid-template-columns: auto auto auto; } ctsp>bl hd hr { color: var(--bor); display: block; } ctsp>bl:after { content: ''; border-style: solid; border-width: 9px; border-color: transparent; border-top-width: 0; border-bottom: 9px solid var(--at); width: 0; font-size: 0; line-height: 0; right: -13px; position: absolute; top: 41px; transform: rotate( 90deg); z-index: 9999999999999; } ctsp>bl { margin: 11px; padding: 11px; border: solid 1px var(--at); max-width: 403px; border-radius: 6px; position: relative; } ctsp { display: block; height: 0px; transition: 999ms; overflow: hidden; } .Setp3 ctsp { height: auto; } ctsp>bl div btn storng { white-space: nowrap; font-size: 0.77em; } @media(max-width:999px){ ctsp>bl { max-width: 357px; margin: 25px; padding: 13px; } ctsp { width: -webkit-fill-available; max-width: 369px; display: flex; } ctsp>bl bd div dv { display: grid; gap: 11px; padding: 11px; margin: 3px; grid-template-columns: auto auto; } ctsp>bl div btn storng { white-space: nowrap; width: 72px; } } /*Terms_Conditions*/ ctcd bl { padding: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: var(--bg); display: grid; grid-template-columns: max-content auto; } ctcd dv>t { display: block; font-size: 0.88em; margin: 11px 0; } ctcd c>textarea { padding: 11px; font-weight: 400; border: solid 1px var(--bc); border-radius: 11px; font-size: 12px; display: block; max-width: 728px; min-width: 728px; } ctcd c>textarea:focus { border: solid 1px var(--a); border-radius: 7px; } ctcd hd>dv { padding-right: 11px; display: block; } ctcd bl>bd { border-left: solid 1px var(--bc); padding: 0 19px; width: max-content; } ctcd bd>t { font-size: 0.8em; } ctcd f>c>i { height: 22px; width: 20px; opacity: 77%; } ctcd dv>f { border: dashed 1px var(--bor); width: fit-content; align-items: center; gap: 1px; font-size: 0.8em; border-radius: 5px; background: var(--b); margin: 2px 0; } ctcd dv > f > i { font-size: 1rem; font-weight: 400; border: 0; line-height: 1.6; text-align: end; border-radius: 0px 8px 8px 0px; display: flex; align-items: center; justify-content: end; margin: 0 7px; height: 23px; width: 16px; } ctcd dv>f>c { display: flex; align-items: center; gap: 3px; border-right: dashed 1px var(--bor); padding: 4px 11px; } ctcd bd>small { font-size: 0.66em; opacity: 77%; } @media(max-width:1255px){ ctcd bl { display: grid ; grid-template-columns: auto; gap: 11px; border-radius: 11px; margin: 11px; } } ctcd bl>bd { border: 0; padding: 0; } ctcd c>textarea { min-width: -webkit-fill-available; } } ctcd dv>t { display: block; font-size: 12px; margin: 4px; } /*component: Time_DetailNew*/ catp>bl bd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 30px; } catp>bl bd label { display: grid ; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400;color: var(--cr); } catp>bl bd sl>input:hover { border: solid 1px var(--a); } catp>bl bd div { display: flex ; gap: 54px; } catp>bl bd lable {font-size: 0.77em; } catp>bl bd div d { cursor: pointer; position: relative; overflow: hidden; display: flex ; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; min-width: 374px; width: -webkit-fill-available; margin-bottom: 11px; } catp>bl bd t { opacity: 68%; font-size: 0.77em; } catp>bl bd c { display: flex ; align-items: center;font-size: 0.77em; } catp>bl bd div sl1 i { height: 17px; width: 17px; } catp>bl bd div sl1 i:nth-child(2) { display: flex ; align-items: center; background: var(--a); padding: 6px; border-radius: 0 0 0 0; } catp>bl bd gg { display: flex ; align-items: center; gap: 4px; } catp>bl>bd d:nth-child(2) { border-top-left-radius: 7px; padding: 4px; border-bottom-left-radius: 7px; position: relative; left: 49px; z-index: 999; border-right: solid 1px var(--c0); font-size: 0.77em; } catp>bl bd mg input { min-width: 333px; margin-left: -9px; height: 32px; border: solsd 1px var(--bor); } catp>bl bd textarea { min-width: 316px; border-radius: 6px; border: solid 1px var(--bor); margin: 0; min-height: 43px; padding: 6px; max-height: 102px; } catp>bl bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 133px 346px; gap: 4px; border-radius: 0; } catp>bl bd dv { display: flex ; align-items: center; gap: 75px; margin-top: 11px; } catp>bl bd span { font-size: 0.77em; } catp>bl bd textarea:hover { border: solid 1px var(--a); } catp>bl bd { background: var(--b1); display: block; padding: 15px 3px 17px 15px;} catp>bl hd h2 { font-size: 21px; font-weight: 500; padding: 11px; } catp>bl bd mg input:hover { border: solid 1px var(--a); } catp>bl bd cm { display: flex; align-items: center; gap: 19px; } catp>bl>bd cm input { position: relative; width: 291px; display: flex; border-radius: 6px; height: 31px; border: solid 1px var(--bor); padding: 0 33px; padding-right: 0; } @media(max-width:999px){ catp>bl bd sl { display: grid ; grid-template-columns: auto; border-radius: unset; } catp>bl bd div { display: block; } catp>bl bd div d { min-width: auto; width: 367px; } catp>bl bd dv { display: block; } catp>bl bd textarea { min-width: 369px; } catp>bl bd gg { display: block; } catp>bl bd mg input { min-width: 233px; margin-left: -9px; height: 32px; border: solid 1px var(--bor); } catp>bl>bd cm input { display: block; width: 346px; } catp>bl bd cm { display: block; } catp>bl>bd d:nth-child(2) { border-top-left-radius: 7px; padding: 6px; border-bottom-left-radius: 7px; position: relative; left: 8px; z-index: 999; border-right: solid 1px var(--c0); bottom: -33px; } } /*component: Time_DetailUpdate*/ ctdai>bl bd sl>input { background: var(--b); border: solid 1px var(--bor); font-size: 0.74em; font-weight: 100; border-radius: 5px; height: 30px; } ctdai>bl bd label { display: grid ; grid-template-columns: max-content 22px; align-items: center; position: unset; font-size: 0.7em; font-weight: 400;color: var(--cr); } ctdai>bl bd sl>input:hover { border: solid 1px var(--a); } ctdai>bl bd div { display: flex ; gap: 54px; } ctdai>bl bd lable {font-size: 0.77em; } ctdai>bl bd div d { cursor: pointer; position: relative; overflow: hidden; display: flex ; border-radius: 6px; border: 1px solid var(--bor); align-items: center; justify-content: space-between; margin: 0; background: var(--b); height: unset; padding-left: 11px; min-width: 374px; width: -webkit-fill-available; margin-bottom: 11px; } ctdai>bl bd t { opacity: 68%; font-size: 0.77em; } ctdai>bl bd c { display: flex ; align-items: center;font-size: 0.77em; } ctdai>bl bd div sl1 i { height: 17px; width: 17px; } ctdai>bl bd div sl1 i:nth-child(2) { display: flex ; align-items: center; background: var(--a); padding: 6px; border-radius: 0 0 0 0; } ctdai>bl bd gg { display: flex ; align-items: center; gap: 4px; } ctdai>bl>bd d:nth-child(2) { border-top-left-radius: 7px; padding: 4px; border-bottom-left-radius: 7px; position: relative; left: 37px; z-index: 999; border-right: solid 1px var(--c0); font-size: 0.77em; } ctdai>bl bd mg input { min-width: 333px; margin-left: -9px; height: 32px; border: solid 1px var(--bor); } ctdai>bl bd textarea { min-width: 316px; border-radius: 6px; border: solid 1px var(--bor); margin: 0; min-height: 43px; padding: 6px; max-height: 102px; } ctdai>bl bd sl { display: grid; align-items: center; background: unset; height: auto; grid-template-columns: 133px 346px; gap: 4px; border-radius: 0; } ctdai>bl bd dv { display: flex ; align-items: center; gap: 75px; margin-top: 11px; } ctdai>bl bd span { font-size: 0.77em; } ctdai>bl bd textarea:hover { border: solid 1px var(--a); } ctdai>bl bd { background: var(--b1); display: block; padding: 15px 3px 17px 15px;} ctdai>bl hd h2 { font-size: 21px; font-weight: 500; padding: 11px; } ctdai>bl bd mg input:hover { border: solid 1px var(--a); } ctdai>bl bd cm { display: flex; align-items: center; gap: 6px; } ctdai>bl>bd cm input { position: relative; width: 291px; display: flex; border-radius: 6px; height: 31px; border: solid 1px var(--bor); padding: 0 33px; padding-right: 0; } @media(max-width:999px){ ctdai>bl bd sl { display: grid ; grid-template-columns: auto; border-radius: unset; } ctdai>bl bd div { display: block; } ctdai>bl bd div d { min-width: auto; width: 355px; } ctdai>bl bd dv { display: block; } ctdai>bl bd textarea { min-width: 353px; } ctdai>bl bd gg { display: block; } ctdai>bl bd mg input { min-width: 233px; margin-left: -9px; height: 32px; border: solid 1px var(--bor); } ctdai>bl>bd cm input { display: block; width: 329px; } ctdai>bl bd cm { display: block; } ctdai>bl>bd d:nth-child(2) { border-top-left-radius: 7px; padding: 6px; border-bottom-left-radius: 7px; position: relative; left: 8px; z-index: 999; border-right: solid 1px var(--c0); bottom: -33px; } } /* Components:ProjectHours */ cphs>bl hd div cc>i { height: 27px; width: 22px; display: block; } cphs>bl hd div { display: flex; justify-content: space-between; } cphs>bl hd div cc>t { color: var(--a); display: block; font-size: 0.88em; } cphs>bl hd dv>t { font-size: 0.9em; display: block; } cphs>bl hd dv { display: flex; gap: 11px; } cphs>bl hd div cc { display: flex ; gap: 4px; align-items: center; } cphs>bl hd dv>a { color: var(--a); text-decoration: unset; font-weight: 400; font-size: 0.88em; } cphs>bl hd div dv { display: flex ; gap: 11px; font-size: 0.88em; font-weight: 400; } cphs>bl bd div i { display: block; } cphs>bl bd div i svg { opacity: 1; max-width: 87%; display: block; fill: var(--c); } cphs>bl ft di{border-left: solid 1px var(--bc); padding: 22px; justify-content: end; display: grid ; gap: 22px;} cphs>bl ft dv ss { display: flex; color: var(--c1); font-weight: 400; margin: 0; font-size: 13px; white-space: nowrap; } cphs>bl ft dv a { color: var(--a); text-decoration: unset; font-weight: bold; align-items: end; display: flex; } cphs>bl ft div dv { display: block; align-items: center; } cphs>bl ft div { display: grid; grid-template-columns: 27% 31% 26% 14%; width: -webkit-fill-available; max-width: 643px; margin-left: 11%; } cphs { padding: 12px; display: block; border: solid 1px var(--bc); border-left: none; } cphs>bl bd div { opacity: 25%; } cphs>bl bd text { color: var(--br); font-size: 10px; } cphs>bl hd sl { display: grid ; grid-template-columns: 33px auto; background: transparent; border: none; width: max-content; height: max-content; align-items: center; margin: 0 11px; } cphs>bl hd sl>select { border: none; width: max-content; margin: 0; color: var(--a); height: max-content; font-weight: 400; } cphs>bl hd sl>select:focus { border: none; } @media(max-width:999px){ cphs { display: block; border: solid 1px var(--bc); border-left: none; margin: 10px 8px; padding: 12px; max-width: 397px; border-radius: 11px; } } /*component: Time_ProjectNew*/ @media(max-width:999px){ ctpw>bl ft dv { display: flex; gap: 12px; align-items: center; height: 52px; padding-left: 16px;margin-bottom:50px;}} ctpw>bl>ft btn { background: var(--a); padding: 7px 10px; border-radius: 3px; color: var(--b); font-weight: 300; } ctpw>bl>ft btns { background: var(--b-t); display: block; padding: 7px 10px; border-radius: 4px; font-size: 0.77em; font-weight: 400; border: solid 1px var(--bor); } @media(max-width:999px){ ctpw>bl ft dv { display: flex; gap: 12px; align-items: center; height: 52px; padding-left: 16px; margin-bottom: 4px; }} /*component: Time_ProjectNew*/ ctpn>bl ft dv { display: flex; gap: 12px; align-items: center; height: 52px; padding-left: 16px;margin-bottom:50px; } ctpn>bl>ft btn { background: var(--a); padding: 7px 10px; border-radius: 3px; color: var(--b); font-weight: 300; } ctpn>bl>ft btns { background: var(--b-t); display: block; padding: 7px 10px; border-radius: 4px; font-size: 0.77em; font-weight: 400; border: solid 1px var(--bor); } /*Time_Selector*/ ctre { display: block; border-radius: 7px; padding: 10px; margin: 11px; background: var(--b); max-width: 221px; position: absolute; top: 53px; right: 34px; box-shadow: var(--bss); } ctre bd div { display: flex; line-height: 2; align-items: center; } ctre bd t { font-size: 15px; margin-top: 4px; margin-left: 3px; } ctre bl { display: block; padding: 9px; } ctre hd h4 { font-size: 17px; } ctre ft btns { display: flex; align-items: center; gap: 13px;} ctre ft btn:nth-child(1) { display: flex; align-items: center; background: var(--aa); padding: 9px; width: 30%; justify-content: center; font-size: 16px; color: var(--b); } ctre ft btn { display: flex; align-items: center; padding: 9px; width: 30%; justify-content: center; font-size: 16px; border: 1px solid var(--bor); } ctre bd input { height: 20px; width: 20px; display: block; } ctre.review { display: block; } ctre { display: none; } @media (max-width: 999px){ ctre { display: none; }} /* Component:ProjectTime */ cpjt>bl hd div { display: flex; justify-content: space-between; align-items: center; padding: 11px; gap: 12px; } cpjt>bl hd div btns { display: flex; align-items: center; gap: 11px; } cpjt>bl hd div>dv { display: grid ; white-space: normal; grid-template-columns: 33px auto; align-items: center; } cpjt>bl hd div btns>btn:after:nth-child(5) { content: ''; border-style: solid; border-width: 6px; border-color: transparent; border-top-width: 0; border-bottom: 9px solid var(--br); width: 1px; height: 0px; font-size: 0; line-height: 0; position: absolute; top: 8px; transform: rotate( 182deg); z-index: 999999999999; left: 52px; } cpjt>bl hd div btn>btn:nth-child(3) { padding: 3px 15px; white-space: nowrap; background: var(--b-t95); display: flex; box-shadow: 0px 0px 2px 0px; position: relative; font-weight: 400; } cpjt>bl hd div>dv back { transform: rotate(89deg); padding: 0px 0px; white-space: nowrap; display: flex ; border-radius: 1px; height: 33px; width: 33px; margin: auto; align-items: center; justify-content: center; } cpjt>bl hd div dv h4 { font-weight: 400; font-size: 0.99em; white-space: nowrap; } cpjt>bl hd div btns>btn i:nth-child(6) { padding: 3px 11px; white-space: nowrap; background: var(--b-t95); display: flex; box-shadow: 0px 0px 2px 0px; border-radius: 1px; height: 22px; } cpjt>bl hd div btns>btn:nth-child(2) { background: var(--aa); color: var(--b); } cpjt>bl bd div { display: flex; border-top: solid 1px var(--aat); border-bottom: solid 1px var(--aat); padding: 11px; padding-bottom: 0; } cpjt>bl bd div dv { display: flex; gap: 18px; align-items: center; } cpjt>bl bd div dv t:nth-child(1) { display: flex; border-bottom: solid 2px var(--aa); padding: 11px 0; } cpjt>bl hd div btns>btn i { width: 22px; height: 15px; } cpjt>bl hd div btns>btn:nth-child(2) { border: solid 1px var(--aa); } cpjt>bl hd div btns>btn:nth-child(4) { padding: 3px 0px; } cpjt>bl hd div btns>btn { padding: 6px 11px; white-space: nowrap; background: var(--b-t95); display: flex ; border: 1px solid var(--bor); border-radius: 5px; position: relative; font-size: 0.88em; } @media(max-width:999px){ cpjt>bl hd div btns { display: flex; align-items: center; gap: 11px; overflow-x: scroll; } cpjt>bl hd div btns>btn i { padding: 3px 11px; white-space: nowrap; background: var(--b-t95); display: flex; border-radius: 1px; height: 14px; width: 22px; } cpjt>bl hd div { display: block; justify-content: space-between; align-items: center; padding: 11px; gap: 12px; } } /*component:Time_SheetProfile*/ prct { position: relative; display: block; border: solid 1px var(--bc);margin:11px; border-radius: 11px; min-height: 422px; background: var(--b); } prct bl hd { display: block; padding: 11px; background: var(--bg); border-bottom: solid 1px var(--bc); justify-content: space-between; align-items: center; } prct bd>a { color: var(--a); font-weight: 400; font-size: 0.88em; } prct bl bd { display: block; align-items: center; justify-content: center; padding: 22px; padding-top: 70px; } prct hd>h4 { font-size: 18px; font-weight: 400; position: relative; } @media(max-width:999px){ prct { margin: 10px 8px; padding: 12px; max-width: 397px; min-height: 207px; } prct hd>h4 { display: none; } cpjt>bl bd div { display: flex; border-top: solid 1px var(--aat); border-bottom: solid 1px var(--aat); padding: 11px; padding-bottom: 0; max-width: 391px; } } /* Component:Users */ ctsk hd div b { font-weight: 400; display: block; } ctsk hd div dv t { display: block; color: var(--a); } ctsk hd div dv { display: flex; } ctsk hd div dv i { height: 22px; width: 22px; display: block; } ctsk hd div dv i svg { fill: var(--a); display: flex; } ctsk hd div { display: flex; justify-content: space-between; padding: 11px; } ctsk>bl table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); } ctsk>bl { display: block; margin-top: 11px; } ctsk>bl>bd>table th { height: 10px; overflow-wrap: break-word; text-align: -webkit-match-parent; background: var(--b1); font-size: 0.77em; color: var(--a2); font-weight: 500; } ctsk>bl>bd>table { font-size: .9062rem; border-collapse: collapse; letter-spacing: 0.5px; margin-left: 11px; margin-right: 11px; } ctsk>bl>bd small { color: var(--a1); font-size: 0.89em; } ctsk>bl>bd strong { font-weight: 400; font-size: 0.88em; } @media(max-width:999px){ ctsk>bl> bd { display: block; overflow: scroll; min-width: max-content; } ctsk>bl>bd strong { font-weight: 400; font-size: 0.88em; } ctsk>bl>bd table td { padding: .6rem .5rem; overflow-wrap: break-word; text-align: -webkit-match-parent; height: 46px; } } /*componet: Time_TaskNew*/ ctks>bl hd dv { border-top: solid 1px var(--b-t); margin-top: 20px; padding: 18px 18px 19px 14px; display: flex ; align-items: center; justify-content: space-between;width: 898px;} ctks>bl hd a { font-size: 0.77em; font-weight: 300; color: var(--a); display: flex ; align-items: center; gap: 6px; } ctks>bl hd i { width: 17px; height: 13px; } ctks>bl hd h4 { font-size: 0.9em; } ctks>bl bd table { letter-spacing: 0.5px; width: 905px; border-collapse: collapse; font-size: 14px; } ctks>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--b-t); } ctks>bl bd th:nth-child(1) { padding-left: 1rem; border-right: solid 1px var(--b2); } ctks>bl bd table th { font-size: 0.77em; height: 0px; text-align: -webkit-match-parent; border-left: solid 1px var(--b2); } ctks>bl bd table td { overflow-wrap: break-word; text-align: -webkit-match-parent; height: 25px; border-left: solid 1px var(--b2); } ctks>bl ft btns { background: var(--b1); border-radius: 6px; font-size: 0.77em; display: flex ; align-items: center; gap: 8px; width: 116px; padding: 9px; margin: 11px; } ctks>bl ft i { width: 12px; } ctks>bl ft div { display: flex ; align-items: center; font-size: 0.7em; border-bottom: solid 1px var(--b-t); border-top: solid 1px var(--b-t); padding: 14px 6px 11px 9px; } ctks>bl ft input { width: 14px; } ctks>bl bd table td:hover { box-shadow: 0px -1px -1px 1px var(--a); border: solid 1px var(--a);} ctks>bl bd table td input { display: block; width: -webkit-fill-available; max-width: 402px; } ctks>bl bd table td textarea { max-width: 407px; display: block; padding: 6px 10px; width: -webkit-fill-available; height: auto; border: unset; font-size: 0.98em; font-weight: 500; } ctks>bl bd table td textarea:focus { outline: 0; border-color: var(--b); } @media(max-width:999px){ ctks>bl bd{ display: block; overflow: scroll; } ctks>bl hd dv { display: grid; gap: 11px; } } /*componet: Time_TaskUpdate*/ tasu>bl hd dv { border-top: solid 1px var(--b-t); margin-top: 20px; padding: 18px 18px 19px 14px; display: flex ; align-items: center; justify-content: space-between;width: 898px;} tasu>bl hd a { font-size: 0.77em; font-weight: 300; color: var(--a); display: flex ; align-items: center; gap: 6px; } tasu>bl hd i { width: 17px; height: 13px; } tasu>bl hd h4 { font-size: 0.9em; } tasu>bl bd table { letter-spacing: 0.5px; width: 905px; border-collapse: collapse; font-size: 14px; } tasu>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--b-t); } tasu>bl bd th:nth-child(1) { padding-left: 1rem; border-right: solid 1px var(--b2); } tasu>bl bd table th { font-size: 0.77em; height: 0px; text-align: -webkit-match-parent; border-left: solid 1px var(--b2); } tasu>bl bd table td { overflow-wrap: break-word; text-align: -webkit-match-parent; height: 25px; border-left: solid 1px var(--b2); padding:5px;} tasu>bl ft btns { background: var(--b1); border-radius: 6px; font-size: 0.77em; display: flex ; align-items: center; gap: 8px; width: 116px; padding: 9px; margin: 11px; } tasu>bl ft i { width: 12px; } tasu>bl ft div { display: flex ; align-items: center; font-size: 0.7em; border-bottom: solid 1px var(--b-t); border-top: solid 1px var(--b-t); padding: 14px 6px 11px 9px; } tasu>bl ft input { width: 14px; } tasu>bl bd table td:hover { box-shadow: 0px -1px -1px 1px var(--a); border: solid 1px var(--a); } tasu>bl bd table td input { display: block; width: -webkit-fill-available; max-width: 402px; }tasu>bl bd table td textarea { max-width: 407px; display: block; padding: 6px 10px; width: -webkit-fill-available; height: auto; border: unset; font-size: 0.98em; font-weight: 500; } tasu>bl bd table td textarea:focus { outline: 0; border-color: var(--b); } /*component: Time_UserNew*/ cwts>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); } cwts>bl bd table { letter-spacing: 0.5px; width: 905px; border-collapse: collapse; font-size: 14px; } cwts>bl bd thead { border-bottom: 1px solid var(--br); } cwts>bl bd td { padding: 10px 15px; text-align: left; border-left: solid 1px var(--b2);;height:4px; } cwts>bl hd h4 { padding: 11px; font-size: 15px; font-weight: 400; } cwts>bl bd table th { font-size: 0.77em; padding: 7px; height: 5px; overflow-wrap: break-word; text-align: -webkit-match-parent; border-left: solid 1px var(--b-t); } cwts>bl bd th:nth-child(1) { padding-left: 1rem; border-right: solid 1px var(--b2); } cwts>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--b-t); } cwts>bl ft btns { background: var(--b1); border-radius: 6px; font-size: 0.77em; display: flex ; align-items: center; gap: 8px; width: 89px; padding: 9px; margin: 11px; } cwts>bl ft i { width: 13px; } cwts>bl bd td:hover { box-shadow: 0px 0px 0px 1px var(--aa); } @media(max-width:999px){ cwts>bl bd { display: block; overflow: scroll; } } /*component: Time_UserUpdate*/ cdup>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); } cdup>bl bd table { letter-spacing: 0.5px; width: 905px; border-collapse: collapse; font-size: 14px; } cdup>bl bd thead { border-bottom: 1px solid var(--br); } cdup>bl bd td { padding: 10px 15px; text-align: left; border-left: solid 1px var(--b2);;height:4px; } cdup>bl hd h4 { padding: 11px; font-size: 15px; font-weight: 400; } cdup>bl bd table th { font-size: 0.77em; padding: 7px; height: 5px; overflow-wrap: break-word; text-align: -webkit-match-parent; border-left: solid 1px var(--b-t); } cdup>bl bd th:nth-child(1) { padding-left: 1rem; border-right: solid 1px var(--b2); } cdup>bl bd table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--b-t); } cdup>bl ft btns { background: var(--b1); border-radius: 6px; font-size: 0.77em; display: flex ; align-items: center; gap: 8px; width: 89px; padding: 9px; margin: 11px; } cdup>bl ft i { width: 13px; } cdup>bl bd td:hover { box-shadow: 0px 0px 0px 1px var(--aa); } @media(max-width:999px){ cdup>bl bd table { letter-spacing: 0.5px; width: unset; border-collapse: collapse; font-size: 14px; } } /*component: Timesheets*/ cmts hd { padding: 0 20px; margin-top: 20px; } cmts hd h4 { font-size: 15px; font-weight: 400; } cmts hd dv { display: flex ; align-items: center; justify-content: space-between; margin-top: -21px; margin-bottom: 11px; } cmts hd i { width: 11px; height: 11px; } cmts>bl hd btn { display: flex ; align-items: center; gap: 3px; padding: 6px; border-radius: 4px; } cmts>bl hd svg { transform: rotate(93deg); fill: var(--a); } cmts>bl hd btn:hover { background: var(--b1); } cmts hd btns {display: flex;align-items: center;justify-content: center;gap: 11px;} cmts>bl div svg { transform: rotate(179deg); fill: var(--b); } cmts>bl btns>btn:nth-child(3) svg { fill: var(--c); } cmts>bl bd input { width: 13px; } cmts>bl bd d { display: flex ; align-items: center; } cmts>bl d { display: flex ; align-items: center; } cmts>bl hd btn.primary { display: flex; background: var(--a); color: var(--b); font-size: 0.77em; } cmts hd btn.primary i { transform: rotate(184deg); height: 8px; width: 11px; } cmts>bl hd btn.actions { display: flex; font-size: 0.77em; background: var(--bc); border: 1px solid var(--bc); } cmts hd btn.actions i { transform: rotate(180deg); height: 11px; width: 8px; } cmts>bl table tr { border-bottom: solid 1px var(--bc); background: unset; border-top: solid 1px var(--b2); } cmts>bl bd span.btn { color: var(--a); } cmts>bl bd table th { font-size: 0.77em; padding: .6rem .5rem; height: 14px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cbg1); } cmts>bl bd table td { font-size: 0.79em;} cmts>bl bd t { font-weight: 400; display: block; } cmts>bl bd thead { background: var(--b1); } cmts>bl bd table i { width: 20px; height: auto; } cmts>bl bd mg { display: flex ; align-items: center; gap: 5px; } cmts>bl bd mg svg { fill: var(--a2); } cmts>bl hd span { font-size: 15px; color: var(--cg); } cmts>bl bd mg i { width: 13px; } cmts bl { display: block; } cmts input { width: 13px; height: 13px; } cmts bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cmts hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cmts bd table th {font-size: 11px;padding: .6rem .5rem;height: 46px;overflow-wrap: break-word;text-align: -webkit-match-parent;font-weight: 500;color: var(--cg);width: -webkit-fill-available;} cmts bd table tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: unset;padding: 0;margin: 0;} cmts bd table tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cmts bd span { font-size: 12px; display: flex; width: 99px; } cmts bd table td t { color: var(--br); font-size: 14px; } cmts bd table tr td:nth-child(5) {justify-content: center;} cmts bd table tr td:nth-child(6) {justify-content: end;} cmts bd table thead tr {border: solid 1px var(--b-t);padding: 0px;} cmts bd table i { width: 26px; height: 19px; } cmts td t d i { width: 30px; height: 12px; } cmts bl hd table { background: var(--b1); } cmts bl th:nth-child(1), td:nth-child(1) {padding-left: 1rem;align-items: center;} cmts bl> hd table th { font-size: .76615625rem; padding: .6rem .5rem; height: 12px; overflow-wrap: break-word; text-align: -webkit-match-parent; color: var(--a2); } cmts bd tbody>tr>th { color: var(--br); } cmts bl hd table i { width: 26px; height: 19px; } cmts bl>hd dv { display: flex ; align-items: center; margin-top: 8px; } cmts bd table th { height: unset; } cmts table>thead { background: var(--b-t); } cmts bd table tr>th:first-child {padding: 7px;width: 20px;height: fit-content;} cmts bd table th:nth-child(8) {text-align: end;} cmts>bl hd btn.btn { display: flex; align-items: center; background: var(--bc); border: 1px solid var(--bc); width: 30px; font-size: 0.77em; justify-content: center; } cmts bd tbody>tr>th:first-child { width: 154px; display: block; } cmts bl { display: block; } cmts input { width: 13px; height: 13px; } cmts bd date { display: flex; align-items: center; justify-content: center; gap: 15px; } cmts hd name { font-weight: 400; display: flex; color: var(--c);width: 130px; } cmts bd tbody th { display: flex ; font-size: 11px; padding: .6rem .5rem; height: 46px; overflow-wrap: break-word; text-align: -webkit-match-parent; font-weight: 500; color: var(--cg); width: 137px; } cmts bd tbody tr td:nth-child(1) {display: flex;align-items: center;justify-content: center;width: 37px;} cmts bd tbody tr {align-items: center;border-bottom: 1px solid var(--bc);position: relative;} cmts bd span { font-size: 12px; display: flex; width: 99px; } cmts bd tbody td t { color: var(--br); font-size: 14px; } cmts bd tbody thead tr { border: solid 1px var(--b-t); padding: 0px; display: flex; align-items: center; justify-content: space-between; } cmts bd tbody i { width: 26px; height: 19px; } cmts td t d i { width: 30px; height: 12px; } cmts>bl>bd dv { display: flex ; align-items: center; } cmts bd table tr>td { font-size: 0.77em; } cmts bd table tr>th:nth-child(2) { width: 20px; } cmts bd table tr>th:nth-child(7) { text-align: end; } cmts bd table tr>td:nth-child(7) { text-align: end; } cmts bd table th:nth-child(8) { text-align: end; } cmts bd table tr>td:nth-child(8) { text-align: end; } @media(max-width:999px){ cmts>bl d { display: flex ; align-items: center; min-width: fit-content; } cmts bl>hd dv { display: flex ; align-items: center; margin-top: 8px; overflow: scroll; } } /*component:-Types_Contacts*/ ctys bl { border-top: 1px solid var(--b-t); padding: 22px 0 55px; background: var(--b1); display: block; justify-content: center; margin-top: 5%; } ctys bd box1 { display: block; border: 1px solid var(--at); border-radius: 6px; padding: 36px 27px; text-align: center; background: var(--b-t); z-index: 9; align-items: center; } ctys bd div { display: flex; gap: 87px; position: relative; padding-top: 100px; max-width: 444px; margin: auto; } ctys bd div:before { content: ''; position: absolute; width: 0; height: 33px; top: 36px; left: 50%; right: 0; border-right: dashed 1px var(--aat); } ctys bd div:after { content: ''; position: absolute; width: 77%; height: 88px; top: 68px; left: 42px; right: 0; border: dashed 1px var(--aat); border-bottom: 0; } ctys bd i { width: 87px; height: 58px; } ctys bd svg { fill: var(--aa); } ctys bd p { font-size: 11px; color: var(--cg); line-height: 17px; } ctys bd d i { width: 43px; height: 80px;} ctys ft box { display: flex; border: 1px solid var(--at); border-radius: 6px; padding: 36px 27px; text-align: center; position: relative; z-index: 9; align-items: center; justify-content: center; background: var(--b-t); } ctys bd c { color: var(--cg); font-size: 12px; } ctys bd s { border-bottom: dotted 2px; display: block; margin-top: 14px; color: var(--a); } ctys hd h4 { display: flex; align-items: center; justify-content: center; font-weight: 400; } /* Component:Users */ usrs hd div b { font-weight: 400; display: block; } usrs hd div dv t { display: block; color: var(--a); } usrs hd div dv { display: flex; } usrs hd div dv i { height: 22px; width: 22px; display: block; } usrs hd div dv i svg { fill: var(--a); display: flex; } usrs hd div { display: flex; justify-content: space-between; padding: 11px; } usrs>bl table tr { background: unset; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); } usrs>bl { display: block; margin-top: 11px; } usrs>bl>bd>table th { height: 10px; overflow-wrap: break-word; text-align: -webkit-match-parent; background: var(--b1); font-size: 0.77em; color: var(--a2); font-weight: 500; } usrs>bl>bd>table { font-size: .9062rem; border-collapse: collapse; letter-spacing: 0.5px; margin-left: 11px; margin-right: 11px; } usrs>bl>bd small { color: var(--a1); font-size: 0.89em; } usrs>bl>bd strong { font-size: 0.88em; font-weight: 400; } @media(max-width:999px){ usrs>bl> bd { display: block; overflow: scroll; min-width: max-content; } usrs>bl>bd strong { font-weight: 400; font-size: 0.88em; } usrs>bl>bd table td { padding: .6rem .5rem; overflow-wrap: break-word; text-align: -webkit-match-parent; height: 46px; } } cudo { display: block; margin-top: 26px; } cudo hd div img { display: block; width: 100px; } cudo hd dv t { display: flex; justify-content: center; } cudo bd div i { height: 23px; display: block; width: 10%; } cudo bd div { display: flex; margin-top: 9px; gap: 12px; width: 25%;} cudo bd div { display: flex; margin-top: 7px; gap: 12px; } cudo>bl hd div { box-shadow: 0px 0px 2px 0px var(--bor); padding: 11px; max-width: 93%; margin: auto; background: var(--bc); } @media(max-width:999px){ cudo>bl hd div { box-shadow: 0px 0px 2px 0px var(--bor); padding: 11px; margin: auto; max-width: 316px; } cudo hd dv t { display: flex; justify-content: center; } cudo { display: block; max-width: 336px; margin: auto; margin-top: 23px; } cudo bd div i { height: 20px; display: block; width: 19%; } } /*Webinars*/ .Webinars Webinars { right: 0; backdrop-filter: blur(2px); background: var(--bor); opacity: 1; visibility: visible; } Webinars { border-radius: 4px; position: absolute; inset: 0; z-index: 999999999999999999; transition: 444ms; top: 48px; height: 100%; right: -100%; overflow: hidden; visibility: hidden; } cwia>bl { display: block; box-shadow: var(--bs-b); position: absolute; right: 0; width: 100%; max-width: 400px; background: var(--b); height: 100%; } cwia hd f { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; margin-left: 10px; } cwia hd f i { height: 22px; width: 22px; } cwia hd f i svg { fill: var(--cr); } cwia hd d>i { display: block; background: var(--bc); padding: 11px; width: 10px; height: 10px; position: absolute; top: 0px; left: 0; border-radius: 0; } cwia>bl>hd { padding: 22px; display: block; border-bottom: solid 1px var(--bc); } cwia f>h3 { font-weight: 400; } cwia btn.btn.t { position: relative; } /*Welcome*/ cwcm bl { display: block; background: var(--b); border: solid 1px var(--bc); padding: 15px; background-image: url(/-Brand/Invoice/asset/HomeBG.png); padding-bottom: 0; } cwcm bl hd>i { height: 18px; width: 18px; border: solid 1px var(--bc); padding: 16px; background:var(--b); border-radius: 11px; } cwcm hd name { font-size: 18px; font-weight: 500; } cwcm bl hd { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; } cwcm btns>btn { display: block; font-weight: 400; padding: 15px 0 12px; } cwcm btns>btn:nth-child(1) { border-bottom: solid 2px var(--a); color: unset; } cwcm bd btns { display: flex; align-items: center; gap: 14px; } cwcm hd cc { font-size: 13px; } cwcm btns>btn:focus { border: unset; border-bottom: solid 2px var(--a); color: unset; } cwcm bl>bd { display: flex; align-items: center; justify-content: space-between; font-size: 0.77em; } cwcm f>i { height: 22px; width: 22px; } cwcm f>i { height: 15px; width: 15px; } cwcm bl>bd f { display: flex; align-items: center; gap: 4px; } cwcm f>i svg { fill: var(--a); } cwms>bl hd spain i { height: 55px; width: 87px; display: block; background: var(--aat); align-items: center; mask-image: linear-gradient(122deg, #00000012 9%, #0000001c), linear-gradient(34deg, #000000 0%, transparent); } cwms>bl hd div dv { display: block; } cwms>bl hd div dv b { display: block; font-size: 0.99em; } cwms>bl hd div spain { display: flex; align-items: center; gap: 11px; padding: 11px; } cwms>bl hd div span { display: flex; align-items: center; gap: 13px; } cwms>bl hd span i { height: 16px; display: block; width: 16px; } cwms>bl hd div { display: flex; align-items: center; justify-content: space-between; padding: 11px; } cwms>bl hd div span t { display: block; white-space: nowrap; font-weight: 400; } cwms>bl hd div span a { display: flex; align-items: center; gap: 5px; } cwms hd dv t { font-size: 0.7em; } @media(max-width :999px){ cwms>bl hd div { display: block; } cwms>bl hd div spain { display: block; } }cwno { display: flex; background: var(--bg); padding: 4px; border-radius: 6px; } cwno bl { display: flex; align-items: center; } cwno hd i { display: flex; height: 29px; margin-right: 5px; margin-left: 5px; } cwno bd { padding-top: 5px; padding-bottom: 5px; margin-left: 10px; } cwno bd div { display: flex; } cwno bd dv span { font-weight: 500; font-size: 14px; line-height: 1.8; } cwno div p { font-size: 12px; color: var(--c0); } cwno bd btn i { height: 8px; display: flex; margin-top: 15px; padding-left: 3px; } cwno bd div btn i svg.icon.icon-xxs.fill-dropdown-blue.ms-1.arrow-svg { display: flex; fill: var(--aa); } /*Works_Perfectly*/ cwyo>bl>hd { display: flex; flex-direction: column; } cwyo>bl { display: grid; padding: 17px 10px 14px 17px; margin: 11px; grid-template-columns: 27% 87%; border: 1px solid var(--bc); border-radius: 11px; } cwyo>bl>hd>p { font-size: 1.88em; margin: 0; font-weight: 300; line-height: 1; } cwyo>bl>hd>p>r { font-size: 0.88em; margin-top: 6px; margin-bottom: 6px; font-weight: 400; background: var(--lgaa); background-clip: text; color: var(--0); max-width: max-content; } cwyo hd div p { opacity: 71%; font-weight: 500; line-height: 18px; } cwyo hd btn { display: flex; align-items: center; justify-content: center; border: 1px solid; border-radius: 4px; padding: 13px; width: fit-content; } cwyo hd btn:hover { background: var(--c); color: var(--b); transition: 999ms; } @media(min-width:999px){ cwyo>bl>bd { background:var(--bc); display: block; padding: 11px; height: 24vw; width: 53%; border-radius: 12px; }} cwyo bd list { display: flex; margin: 11px; overflow: hidden; justify-content: center; width: 100%; align-items: center; } cwyo bd lst { display: flex; animation: slideshow 13s linear infinite; } cwyo bd d { display: flex; align-items: center; max-width: max-content; font-size: 0.88em; font-weight: 500; box-shadow: 0 2px 4px 0px var(--bc); padding: 11px 15px; background: var(--b); border-radius: 33px; margin: 7px; } @keyframes slideshow{ 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @media(max-width:999px){ cwyo>bl { display: none;} } /* component:Workspace*/ cwso { display: block; box-shadow:var(--bss); border-radius: 3px; background: var(--b); min-width: 218px; } cwso bl hd { display: block; padding: 8px; border-bottom: solid 1px var(--bor); } @media(max-width:999px){ cwso { width: unset; }} cwso bl hd h4 { font-weight: 400; padding: 0 11px; } cwso bd i { height: 99px; } cwso>bl>bd { display: flex ; padding: 11px; justify-content: center; }/* component: Workspace1*/ cwrp bd div { display: grid; grid-template-columns: auto auto auto 36%; margin-bottom: -14px; } cwpc bd span { font-size: 0.88em; font-weight: 400; color: var(--c0); } cwrp bd i { width: 34px; } cwpc bd mg { display: flex; padding: 7px; } @media(max-width:999px){ cshc hd h4 { font-size: 17px; } cwrp bd div { align-items: center; gap: 11px; margin-bottom: 12px; } cwpc bd span { min-width: max-content; } cwpc bd mg { display: flex; gap: 11px; } cwpc hd div { gap: 11px; overflow: scroll; } cwrp bd i { width: 17px; } cshc ft i { width: 29px; } cwpc hd a { font-size: 0.88em; font-weight: 400; color: var(--c0); display: contents;line-height: 22px; } cwpc hd span { min-width: max-content; } cwpc hd hr { width: 95%; margin-left: 3px; }} @media(max-width:1024){ } /* component:Workspaces */ cwss hd h2 { font-weight: 400; } cwss bd h3 { font-weight: 500; font-size: 1.11em;padding: 0 11px; } cwss bl d { display: grid; gap: 30px; grid-template-columns: auto auto auto auto auto auto; } cwss>bl>bd { display: grid; margin-top: 26px; grid-template-columns: auto; gap: 13px; } cwss bl d { overflow: scroll; padding:11px; } cwss>bl>hd { display: block; padding: 0 11px; } @media(max-width:666px){ cwss bl d { display: flex; } } @media(max-width:999px){ cwss bl d { grid-template-columns: auto auto; padding: 7px;gap: 11px; padding: 11px 0 ; } cwss>bl>hd { padding: 0; } cwss bd h3 { padding: 0; } }/*component: Workspace1*/ cshc hd { padding: 11px; } cwpc hd div { display: grid; align-items: center; grid-template-columns: auto auto auto auto; } cwpc hd a { font-size: 0.88em; font-weight: 400; color: var(--c0); } cwpc hd mg { display: grid; align-items: center; grid-template-columns: auto auto auto auto;padding: 11px; } @media(max-width:999px){ cwpc hd hr { width: 95%; margin-left: 3px; }} /* Ended App Theme CSS : App:Invoice - Branch:practice.aliens.school */ /* Started Brand Theme CSSO : Invoice_Basic - practice.aliens.school */ /* Ended Brand Theme CSSO : Invoice_Basic - practice.aliens.school */ /* File : 0 Ended*/