/* Started Brand Theme CSS : Base_Standard */ /*# CSS Variables */ :root{ /*# Colors */ --0:rgb(0 0 0 / 0); --a:rgb(3 83 253); --a-t:rgba(3 83 253 / 44%); --aa:rgb(1 27 120); --aa-t:rgb(1 27 120 / 22%); --aaa:linear-gradient(333deg, var(--a), var(--aa)); --b:rgb(255 255 255); --bt:rgb(255 255 255 / 77%); --b-t:rgb(255 255 255 / 77%); --b-t22:rgb(255 255 255 / 22%); --b-t44:rgb(255 255 255 / 44%); --b-t77:rgb(255 255 255 / 77%); --b-t88:rgb(255 255 255 / 88%); --b-t95:rgb(255 255 255 / 95%); --b1:rgb(255 255 255); --b1-t:rgb(255 255 255 / 77%); --bg:rgb(244 244 244 / 88%); --bg-t:rgb(244 244 244 / 44%); /* --bgi:/-/Base/asset/BG001.JPG; --bgi1:/-/ID/asset/TV.jpg; */ --bgi:url("/-/Base/asset/BG001.JPG"); --bgi1:url("/-/ID/asset/TV.jpg"); --bc:rgb(18 52 86 / 7%); --bc-t:rgb(18 52 86 / 7%); --c:rgb(18 52 86); --c-t:rgb(18 52 86 / 77%); --c0:rgb(101 103 107); --c0-t:rgb(101 103 107 / 77%); --c1:rgb(0 0 136); --c1-t:rgb(0 0 136 / 77%); --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)); /** Colors */ /*# Typography */ --ff:system-ui; --fs:1em; --fs-xl:4em; --fs-l:2em; --fs-m:1em; --fs-s:0.77em; --fs-xs:0.44em; --fw-n:400; --fw-b:700; --lh:1.5; /** Typography */ /*# Spacing - Padding, Margin */ --s:22px; --s-xl:44px; --s-l:22px; --s-m:11px; --s-s:7px; --s-xs:4px; /** Spacing - Padding, Margin */ /*# Border */ --br:22px; --br-xl:44px; --br-l:22px; --br-m:11px; --br-s:7px; --br-xs:4px; /** Border */ /*# Z-Index */ --z1: 1000; --z2: 999; --z3: 998; --z4: 997; --z5: 996; /** Z-Index */ /*# Transition */ --t-fast: 0.2s ease-in-out; --t-normal: 0.3s ease-in-out; --t-slow: 0.5s ease-in-out; /** Transition */ /*# Box-Shadow */ --bt-bx:0 0px 5px 0px rgb(0 0 0 / 6%); --bs:0px 0px 1px 0px rgb(0 0 0 / 22%); --bss:0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%); --bs-b:inset 0 -7px 11px 0px rgb(0 0 0 / 2%), inset 0 4px 7px 0px rgb(0 0 0 / 2%), 0 2px 3px rgb(0 0 0 / 4%), 0 -1px 2px rgb(0 0 0 / 4%), 1px 0 2px rgb(0 0 0 / 4%), -1px 0 2px rgb(0 0 0 / 4%); --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 / 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); /** Box-Shadow */ /*# Linear-Gradient */ --lg:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.10), rgba(255,255,255,0.05) ); --lg1:linear-gradient(90deg, rgba(0,255,255,0.05), rgba(0,255,255,0.10), rgba(0,255,255,0.05) ); --lg-bl:linear-gradient( 123deg , rgb(103 58 183 / 22%), rgb(3 169 244 / 22%), rgb(0 222 111 / 22%), rgb(3 169 244 / 22%) ); --lg-b:linear-gradient(90deg, #002bdc88, #32ded488); --lg-b1:linear-gradient(128.84deg,#0f6cbd 20.46%,#3c45ab 72.3%); /** Linear-Gradient */ /*# Blur */ --blur:blur(44px); --blur-xl:blur(111px); --blur-l:blur(77px); --blur-m:blur(44px); --blur-s:blur(22px); --blur-xs:blur(11px); /** Blur */ /*temp*/ --bor:rgb(63 63 63 / 30%); --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%)); --tb:linear-gradient(180deg, rgb(230 230 230), transparent, transparent); --lgaa:linear-gradient(333deg, var(--a), var(--aa)); } [data-theme="dark"] { /*# Colors */ --b:rgb(22 22 22); --bt:rgb(22 22 22 / 77%); --b-t:rgb(22 22 22 / 77%); --b-t22:rgb(22 22 22 / 22%); --b-t44:rgb(22 22 22 / 44%); --b-t77:rgb(22 22 22 / 77%); --b-t88:rgb(22 22 22 / 88%); --b-t95:rgb(22 22 22 / 95%); --b1:rgb(22 22 22); --b1-t:rgb(22 22 22 / 77%); --bg:rgb(11 11 11 / 44%); --bg-t:rgb(11 11 11 / 22%); --bgi:unset; --bgi1:unset; --bc:rgb(118 152 186 / 7%); --bc-t:rgb(118 152 186 / 7%); --c:rgb(118 152 186); --c-t:rgb(118 152 186 / 77%); --c0:rgb(101 103 107); --c0-t:rgb(101 103 107 / 77%); --c1:rgb(100 100 136); --c1-t:rgb(100 100 136 / 77%); /** Colors */ } /*# CSS Variables */ /* Base CSS */ html,body,aliens,dapp,app,.app{display:block;height:100%;width:100%;overflow:hidden} html{ position:fixed; height:100%; width:100%; overflow:hidden; color:var(--c); font-family:var(--ff) } body{ margin:0; overflow:hidden; background:var(--b); } desktop { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } 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 */ } .splash console{opacity:0} .account content { margin-top: calc(100vh - 22px); } d { display: block; } ib { display: inline-block; } img{ max-width: 100%;max-height:100%; } hr { display: inline-block; width: 100%; background: var(--bc); height: 1px; border: 0; } select {color: var(--c); height: 100%; width: calc(100% - 44px); margin: 0 22px; border: unset; background: var(--0); font-weight: bold; } select:focus-visible { outline: unset; } label { opacity:0.77} sl, .sl { border-radius: 11px; position: relative; height: auto; overflow: hidden; background: var(--bc); width: auto; display: grid ; margin: 4px; box-sizing: border-box; align-items: center; } sl input, sl select { min-height: 50px; } sl select { padding: 0; margin: 0 16px; width: -webkit-fill-available; } sl label { position: absolute; pointer-events: none; left: 20px; 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: 4px; bottom: 10px; left: 20px; font-size: 0.55em; opacity: 0.77; }*/ sl input { font-size: 14px; width: calc(100% - 44px); margin: 0; background: var(--0); border: unset; box-shadow: unset;border-radius: 11px; box-sizing: border-box; width: 100%; } sl error { font-size: 0.66em; color: red; display: block; margin-top: 2px; } tl, .tl{display: grid ; background: var(--bc);margin: 4px;border-radius: 11px;padding: 7px 14px;min-height: 40px;} tl label{display: grid;grid-template-columns: auto 50px;align-items: center;justify-content: space-between;display: grid;} .after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; } 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); } img { max-width: 100%; max-height: 100%; } h0, h1, h2, h3, h4, h5, h6, h7, h8, h9 { margin: 0; } h7 { font-size: 0.7em; } p { font-size: 0.88em; } .dnone, .dn {display: none;} .dn {display: none !important;} trcs>trc p { margin: 0; } bg { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; z-index: 0; } i>svg, svg { height: -webkit-fill-available; width: -webkit-fill-available; margin: auto; } trcs>trc img { object-fit: contain; height: 77%; width: 77%; } 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; } 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; } 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; } bl { display: block; } ::-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); } } .cgreen { color: #007600; } .cred { color: #CC0C39; } 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); } input { outline: 0; border-radius: 4px 7px; display: block; max-width: 100%; border: 0; background: var(--b-t77); color: var(--c); width: calc(100% - 58px); height: 44px; font-weight: bold; padding: 0 22px; } button { outline: 0; border: 0; padding: 11px; } @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap'); 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%; } .switch { position: relative; display: inline-block; width: 60px; height: 34px;opacity:1 } .switch input { opacity: 0; width: 0; height: 0; width: 100%; height: 100%; margin: 0; z-index: 9999999999999; position: relative;} .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--bc); transition: all 0.4s; border-radius: 34px; } .switch .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } .switch input:checked + .slider { background:var(--aaa); } .switch input:checked + .slider:before { transform: translateX(26px); } .round { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--a); cursor: pointer; position: relative;justify-self: self-end; } .round input { opacity: 0; position: absolute; width: 0; height: 0; } .round input:checked + span { background-color:var(--a); border-radius: 50%; width: 16px; height: 16px; } .Error{border: 1px solid red;} .P, .p{font-size: 0.55em;margin: 0;} .P0, .p0{opacity:0.7} .P1, .p1{margin: 0 11px; margin-bottom: 11px;font-size: 0.55em;} .gcs1{grid-column-start: 1;} .gce3{ grid-column-end: 3;} /*# Screen Layout 1 #*/ @media only screen and (max-width: 999px) { .sl1 smenu { display: none; } .sl1 header{ display:none } } @media only screen and (min-width: 999px) { .sl1 {display: grid ; grid-template-columns: 333px calc(100% - 333px); 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 - 55px); 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 { max-width: 777px; 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 4 #*/ @media only screen and (max-width: 999px) { .sl4 smenu { } } @media only screen and (min-width: 999px) { .sl4 {display: grid ; grid-template-columns:100%; max-width:1920px;min-width: 1280px; margin: 0 auto;} .sl4 nev { display: grid ; } .sl4 smenu { display: grid ; } .sl4 header { display: grid ; } .sl4 hero { display: grid ; } .sl4 aerea { display: grid ; } .sl4 .aerea { display: grid ;grid-template-columns: 100%; } .sl4 main { width:100%; max-width: 100%; margin: 0 auto; } .sl4 sidebar { max-width:100%;width:100%; } .sl4 footer { display: grid ; } } /** Screen Layout 4 **/ /*# Screen Layout 5 #*/ @media only screen and (max-width: 999px) { } @media only screen and (min-width: 999px) { .sl5 {display: grid ; grid-template-columns:100%; max-width:1920px;min-width: 1280px; margin: 0 auto;} .sl5 nev { display: grid ; } .sl5 smenu { display: grid ; } .sl5 header { display: grid ; } .sl5 hero { display: grid ; } .sl5 aerea { display: grid ; } .sl5 .aerea { width: 85%; margin: 0 auto; max-width: 1700px; } .sl5 main { margin: 0 auto; } .sl5 sidebar { } .sl5 footer { display: grid ; } } /** Screen Layout 5 **/ 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) } more { height: 44px; display: flex; justify-content: center; align-items: center; width: 66%; margin: auto; border-radius: 50px; background: var(--bc); transition: 99ms; margin-top: 11px;overflow:hidden;position:relative;} more>i { width: 11px; height: 11px; margin-left: 11px; margin-top: 4px; } more.more{ background: var(--b-t); box-shadow: var(--bs-bs); } no { display: grid; grid-template-rows: auto auto; width: 77%; margin: 44px auto; justify-content: center; align-items: center; text-align: center; } no img { width:77%;height:auto;margin:auto;width:111px; } button { outline: 0; border: 0; padding: 11px; } button:hover {box-shadow: unset !important;} bl{display:block}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%;} hr { display: inline-block; width: 100%; background: var(--bc); height: 1px; border: 0; } 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; } 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; } ex{position: absolute;min-height: 77px;margin:auto;top: 0;left: 0;right: 0; display: none;} .content{display: block; overflow: hidden; overflow-y: auto; height: 100%; width: 100%;} db footer,in footer,out footer,cm footer{ } 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; } .btn{ transition:99ms; } .btn:hover { } .btn:active {transform: scale(0.95); } 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; } meetingmsg { font-size: 0.66em; display: block; } mts{padding-top: 22px; display: block;} mts trc hd {height: 66px; width: 66px;background:transparent} mts trcs>trc{grid-template-columns:66px auto 88px;width: auto; margin: 7px 11px;} mts .oo oo { box-shadow: 4px 0px 11px ; margin-left: 30px ; } mts .oo bo { box-shadow: inset 60px 0px 0px; } 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); } 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; } btn { cursor: pointer; } .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; } .cgreen { color: #007600; } .cred { color: #CC0C39; } .bred { background: #CC0C39; } /*profile*/ @media only screen and (min-width: 999px) { spfo d.main {margin: 0 7px;} } spfo d.main { padding-bottom: 22px;} spfo main { margin: 0 !important; } @media only screen and (max-width: 999px) { 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} 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:11px;margin-bottom: 0;} } /* Layout : Screen's Header by Gagan Nayak */ screen header { display: block; position: sticky; top: 0; z-index: 888; padding: 0; } @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); */ } screen header { display: block; position: sticky; top: 0; z-index: 888; padding: 0; } } content{z-index:3} .Flyout Flyouts { display: block; opacity: 1; visibility: visible; position: fixed; z-index: 1111111;} /* Flyouts */ Flyouts { position: absolute; inset: 0; display: none; justify-items: center; place-content: center; transition: 333ms; opacity: 0; visibility: hidden; z-index: 999999999999; } .Flyout Flyouts { display: block; opacity: 1; visibility: visible; position: fixed; } Flyouts>bg { background: var(--b-t22); backdrop-filter: blur(33px); } Flyouts>rvm { position: absolute; inset: 0; z-index: 0; } flyout { position: absolute; inset: 0; z-index: 0; transition: 333ms; transform: scale(0.97); visibility: hidden; opacity: 1; display: flex ; align-items: center; justify-content: center; } .Flyout { opacity: 1; visibility: visible; transform: scale(1); } .ds flyouts { display: block; visibility: visible; opacity: 1; } .ds flyout { display: block; visibility: visible; opacity: 1; } extra{z-index:4} tr.cr td:nth-of-type(1){color:#00ff00;} tr.dr td:nth-of-type(1){color:#ff0000;} bg{display:block;position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:-1;} 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(--b-t), transparent, transparent, transparent, transparent, transparent, transparent, var(--b-t22), var(--b))} bg.bgh { background: linear-gradient(180deg, var(--bt)); } /*#dark*/ .dark bg.console { filter: saturate(0); } .dark grid bl { background: rgb(10 10 11); } .dark grid bl bl { background: rgb(30 33 33); } /**dark*/ .table {overflow: visible; overflow-x: auto; display: block;} table {min-width: 100%;width: max-content !important} h nv gg { height: 55px; align-items: center; display: grid; grid-template-columns: 55px 33px 64% 0px 43px; } 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%; 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 op>i { height: 33%; width: 33%; } h nv gg>i>svg { height: 66%; width: 66%; } h nv t>h3 { white-space: nowrap; width: 99.5%; 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%; 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 op>i { height: 55%; width: 55%; } h nv gg>i>svg { height: 66%; width: 66%; } .dn{display:none !important;} @media only screen and (min-width: 999px) { header nv { display: none; } .s_bg { display: none; } .img bg>photo,.img bg>img,.img bg>.img-box{opacity:0} bg.bgc{opacity:0} } @media only screen and (max-width: 999px){ html, body { overflow: scroll !important;} content { top: 0px;bottom:55px; } .content { margin-top: 0px; } } /* Layout : Header by Gagan Nayak */ h nv back { font-family: monospace; font-size: 1.23em; height: 44px; width: 44px; display: flex ; justify-content: center; align-items: center; background: var(--bt); margin: 7px; border-radius: 55%; box-shadow: 0 4px 7px var(--bc); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } h nv gg { height: 55px; align-items: center; display: grid ; grid-template-columns: 55px 24px auto 0px 55px; } h nv op { display: flex ; justify-content: center; align-items: center; height: 44px; width: 44px; background: var(--bt); margin: 7px; border-radius: 55%; box-shadow: 0 4px 7px var(--bc); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); } /*Anil Nayak*/ @media only screen and (max-width: 1367px){ content {left: 0;} } @media only screen and (min-width: 999px) { footer{margin: 44px 0;} } @media only screen and (max-width: 999px) { footer{margin-bottom: 0;} } @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: 0px; right: 0; top: 55px; bottom: 0; } .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; } } /* Zoom Alert PopUp css */ .alert alert{opacity: 1; top: 7px;} alert {display: flex ; position: absolute; top: -333%; left: 0; right: 0; z-index: 999999999; justify-content: center; align-items: center; pointer-events: auto; opacity: 1; transition: 333ms; } alert modal { box-shadow: 0px 5px 20px 7px rgb(164 164 186 / 20%); display: grid ; max-height: 277px; min-height: 48px; height: fit-content; max-width: 433px; position: relative; align-items: center; z-index: 2; overflow: hidden; text-align: center; width: 100%; margin: 11px; padding: 16px; border-radius: 22px;} alert.warning warning { display: block; } alert.success success{ display: block; } alert.failed failed{ display: block; } alert bl>hd { width: 100%; z-index: 8; top: 0; left: 0; right: 0; display: flex ; justify-content: center; align-items: center; } alert admi { font-weight: bold; } alert exit { transition: 333ms; cursor: default; position: absolute; height: 18px; width: 18px; font-family: monospace; font-size: 36px; border-radius: 7px; background: var(--b-t95); opacity: 0.7; padding: 2px; right: 21px; bottom: 30px; z-index: 99999; } alert exit svg { fill: var(--c); } alert exit:hover { opacity: 1; } modal info { display: flex ; flex-direction: column; justify-content: center; } alert info t { display: none; font-size: 1.33em; font-weight: 600; font-family: monospace; letter-spacing: 0; width: 90%; text-align: start; } alert text { font-family: Unbounded, sans-serif; letter-spacing: 0; font-size: 12px; text-align: left; color: var(--b); } modal>bl>ft { display: none ; justify-content: center; filter: url(); } modal>bl>ft>h6 { margin-top: 11px; font-size: 0.88em; font-weight: 400; opacity: 0.6; } alert icon>* {display: none; height: 28px; width: 28px; border-radius: 11px; padding: 11px; overflow: hidden; background: var(--b1); } alert bd { position: relative; display: grid ; grid-template-columns: 66px auto; align-items: center; } alert.success modal>bg { background: var(--c); } alert.failed modal>bg { background: var(--c); } alert modal>bg {background: var(--b-t77); backdrop-filter: blur(11px); } alert.warning warning svg { fill: red; } alert.warning t { display: block; color: red; } alert.warning text { color: red; } alert.success text { color: rgb(0, 255, 0); } alert.failed modal { color: rgb(138 0 0); } alert.failed text { color: rgb(255 60 60); } alert icon>i:first-child { display: block; } alert bl ft t { text-align: center; width: 77%; display: block; margin: 7px auto; font-size: 0.88em; letter-spacing: 1px; font-weight: 400; opacity: 0.6; margin-bottom: 0; margin-top: 11px; } alert icon>* img { filter: drop-shadow(0px 7px 10px #00000059); } @media (min-width: 999px){ alert { justify-content: end; } alert modal { right: 16px; top: 64px; min-height: unset; margin: 0; } } #MenuButton{ transition:333ms;height: 44px;width: 100%;display: flex;position: relative;z-index: var(--z2);justify-content: left;align-items: center;max-width: 100%;max-height: 100%;transition:333ms; } nav{display:flex;flex-direction: column;justify-content:center;align-items:center;position:absolute;left:0;top:0;width:333px;height:155px;z-index:99999999;transition:1s;box-shadow: var(--bs-bs); backdrop-filter: unset; } nav bg{/* background:var(--b);*/} nav n { display: grid; grid-template-columns: 28% auto 28%; max-height: 100%; height: 100%; width: 100%; z-index: 8; align-items: center;} nav left logo { height: 44px; width: 100%; display: flex ; position: relative; z-index: 8888888; justify-content: center; align-items: center; max-width: 100%; max-height: 100%; } nav srch { position: relative; display: flex ; justify-content: center; align-items: center; margin-left: 11px; } nav right d.btn { background: var(--bc); height: 88%; margin: 2% 0; border-radius: 7px; font-weight: bold; font-size: 0.88em; display: grid ; grid-template-columns: 18px auto auto; grid-column-gap: 4px; min-width: 99px; background: rgb(0 128 0 / 21%); color: green; overflow: hidden; max-width: 100%; min-width: unset; align-items: center; padding: 0 11px; position: relative; width: 77%; } nav h7 { font-size: 0.7em; } nav n>left { height: 100%; display: grid ; width: 100%; grid-template-columns: 55px 66px 55px auto; padding: 0; align-items: center; } nav n>right{display: grid; grid-template-columns: auto auto 44px 44px 44px 55px;grid-column-gap: 2px; } nav n>right>*{ display: flex; justify-content: center; align-items: center; width: 100%; height: 44px; border-radius: 11px; } nav n>right>*>i { height: 55%; width: 55%; } nav n>right>aa:hover {background: var(--bc);} nav pf { height: 44px; width: 44px; display: flex; justify-content: center; align-items: center;position:relative } nav pf img { height: 66%; } nav nt>* { display: flex; justify-content: center; align-items: center; } nav pf>d { display: block; height: 70%; padding: 4px; box-shadow: inset 0 0 0 2px var(--b-t); border-radius: 25%; } nav srch>f { color: var(--c); width: 88%; height: 56%; display: flex; align-items: center; box-shadow: 0 1px 0 0; padding-left: 22px; } nav nt>aa svg { transition: 333ms; } nav .menu srch>f { opacity: 0; } nav logo i { height: 77%; } nifo>* { display: flex; justify-content: center; align-items: center; } srch form{display:none} .menu srch form { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 0; padding: 0; } #Search { color: var(--c); margin: 0; padding: 0; width: 100%; padding-left: 22px; background: var(--bc); border: solid 2px var(--bc); height: calc(100% - 7px); margin-top: 1px; border-radius: 4px; font-size: 1em; border-radius: 7px; } .menu #MenuButton { transform: rotate(90deg); } .bootinggg nav { width:100vw;height:100vh; } .bootinggg nav left {opacity:0;background:transparent;} .menu #MenuButton{} .menu #MenuButton svg{ fill:var(--a)} .start #StartButton{} .start #StartButton svg{ fill:var(--a)} @media only screen and (max-width: 999px) { nav{height:88px;width:100vw;box-shadow: unset;overflow:hidden;height:0;} nav n { display: grid; grid-template-columns:unset;grid-template-rows: 50% 0 50%;} nav n>left{padding:0;} } @media only screen and (min-width: 999px) { nav{backdrop-filter: unset;height: 55px; width: 100%; display: flex; flex-direction: row; } nav {width: auto; left: 0; right: 0;} nav n>left{background:unset;} nav nifo{display:none !important} nav srch { max-width: 333px; margin-left: 0; background: var(--bc); border-radius: 9px; border: solid 1px var(--bc); width: 88%;display: flex; align-items: center; margin:auto 0; height:37px} nav srch>f { box-shadow: unset; } nav nt>aa { opacity: 0; } nav #Search { margin: 0; height: 100%; } nav n>right{justify-content: end;} } /* Component : Menu1 */ /*startmenu { position: absolute; top: 57px; left: 7px; z-index: 999; padding: 11px; display: none; width: 500px; height: calc(100% - 79px); background: var(--b-t44);}*/ startmenu hd sl { display: flex ; align-items: center; height: fit-content; border-radius: 22px; padding: 0 11px; width: auto; } startmenu hd sl>i { width: 24px; height: 24px; } startmenu hd sl input { width: calc(100% - 55px); } startmenu bd>bl { display: flex; flex-direction: column; border-bottom: 1px solid var(--bc); margin: 7px 0; gap: 9px; padding-bottom: 9px; } crato bd bl>d { display: grid ; grid-template-columns: 51px auto; align-items: center; margin: 11px 0; } @media only screen and (max-width: 999px) { /*.menu startmenu { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; overflow: hidden; overflow-y: auto; padding-bottom: 11%; min-height: unset; width: unset; }*/ cstmn { grid-template-columns: unset; justify-content: unset; gap: 11px; } } /* Layout : Menu by GaganNayak */ .menu startmenu { display: block; position: absolute; inset: 0; top: 0; visibility: visible; opacity: 1; } startmenu>rvm { position: absolute; inset: 0; height: -webkit-fill-available; z-index: 999; } startmenu { visibility: hidden; opacity: 0; transition: var(--t-slow); z-index: 99999999; } startmenu bd>bl mb { display: grid ; grid-template-columns: 33% 33% 33%; gap: 4px; } crato, cstmn>mm { padding: 11px; border-top: unset; height: fit-content; } csmn>bl bd { display: block; overflow: auto; max-height: 90%; } @media only screen and (max-width: 999px) { .menu startmenu>csmn { width: -webkit-fill-available; height: calc(100% - 79px); } startmenu>csmn { right: 7px; top: 55px; max-width: 100%; width: -webkit-fill-available; } } /* Layout Account by GaganNayak */ account { top: 0 !important; } /* Ended Brand Theme CSS : Base_Standard */ /* Started Library CSS : Base_Basic */ smbo .aerea { flex-direction: initial; } cpho bd btn { display: grid ; height: 22px; width: 22px; position: absolute; background: var(--bc-t); bottom: 14px; overflow: hidden; justify-content: center; border-radius: 55%; padding: 4px; right: 0; left: 65px; } cpho bd btn input { position: absolute; inset: 0; opacity: 0; padding: 0; height: 30px; width: 30px; } cpho bd btn i { height: auto; } cpho>bl bd { position: relative; } /* soon */ cson bl{background: var(--bt);margin: 22px;border-radius: 22px;} cson hd{display: grid; justify-content: center; align-items: center;} cson bd{ text-align: center;} cson bd h1{ color: var(--c);} cson bd h4{ margin: unset;} cson bd p{ margin: unset;} cson ft{ padding: 18px; padding-top: 0px;padding-bottom: 43px;} cson ft h4{ display: block; font-weight: 100;} cson ft bttn{ margin: 12px auto 0px auto; padding: 8px 0px; display: flex; width: 52%; border-radius: 11px; justify-content: center; align-items: center; background: var(--lg-b); color: var(--c); box-shadow: 1px 1px 12px #846af9; } flex.greed.chart.piechart { background: unset !important; } .piechart { grid-template-columns: 50% 50% !important; } piec { margin: auto; max-width: 161px; margin-top: 22px; display:inline-grid; } flex.greed.chart.piechart bd bttn { margin: 0px auto 0px auto; padding: 8px 0px; display: flex; width: 41%; border-radius: 11px; justify-content: center; align-items: center; background: rgb(255 242 171); color: var(--b); } cppc { display: block; background: var(--bt); border-radius: 11px; padding: 11px; margin: 7px 0; } cppc cwac { display: none; } crocs i {height: 24px; margin: auto;} crocs { display: grid ; background: rgb(5 19 33 / 12%); border-radius: 44px; height: 36px; width: 36px; transition: 99ms; cursor: pointer; } crocs:active { transform: scale(0.95); } crocs:hover { background: rgb(5 19 33 / 22%); } /* soon */ /* feature */ @media only screen and (min-width: 999px) { saps feature { display: block; margin: 0px 22px; } } /* .phonev */ @media (min-width: 620px) { .phonev { display: none; } } /* Template : popup */ popups { left: 0; position: fixed; inset: 0; display: flex ; align-items: center; justify-content: center; transition: 333ms; opacity: 0; visibility: hidden; z-index: 999999; top: 55px; bottom: 0; right: 0; } .popup popups { opacity: 1; visibility: visible; position: fixed; } popups>bg { background: var(--bor); } popups>rvm { position: absolute; inset: 0; z-index: -1; height: auto; } .bg_bc { background: var(--bc); color: var(--c); } ext { display: block; height: 33px; width: 33px; place-content: center; position: absolute; right: 0; margin: 7px; z-index: 999; top: 0; background: var(--bc); border-radius: 55%; } .disabled { pointer-events: none; opacity: 0.5; background: var(--bc) !important; color: var(--c) !important; } :root { --tr-a: opacity 0.3s ease-in-out 0.15s, visibility 0.3s ease-in-out 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s, -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s; } grid { display: grid ; grid-gap: 0; grid-template-columns: 100%; } @media only screen and (min-width: 999px) { } /* Flayout by Gagan Nayak */ .Flyout rvm { height: 0; } flyouts { background: var(--b-t22); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); } cmco>hd { overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 16px; height: 77px; width: 77px; background: transparent; } cmco img{/*object-fit: contain;*/ height: 77%; width: 77%;border-radius: 50%;} cmco>bd{display: flex; flex-direction: column; justify-content: center; padding-left: 4px;} cmco 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%;} cmco ac1{display: flex; justify-content: center; align-items: center;} cmco ac2 { display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: monospace; font-size: 2.3em; color: var(--c1); transform: rotate(270deg); height: 33px; width: 33px; } cmco 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(--aa); right: unset;} cmco bo{display: block; height: 100%; width: 100%; transition: 333ms; border-radius: 50px;} cmco 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;} cmco .oo bo { box-shadow: inset 60px 0px 0px; } cmco .oo oo { box-shadow: 4px 0px 11px; margin-left: 30px; } cmso{display: block; padding: 22px; box-shadow: var(--bs-bs); border-top-right-radius: 22px; border-top-left-radius: 22px; position: relative; overflow: hidden; z-index: 9;background: var(--b-t); margin: 7px 11px;} cmso gd{display: grid; grid-template-columns: 44px auto auto;} cmso gd i{height: 40px; width: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--bc); padding: 2px;} cmso gd img{border-radius: 50%; background: var(--bc);} cmso gd h5{display: flex; align-items: center; padding-left: 11px; font-size: 1em;} cmso gd h6{margin-left: 11px; font-weight: unset; color: var(--c0); display: inline;} cmso gd d:nth-child(3) { display: flex; justify-content: end; align-items: center; } cmso gd op { height: 22px; width: 22px; padding: 6px; } cmso dlt { position: absolute; background: var(--bt); padding: 11px; border-radius: 11px; z-index: 9999; backdrop-filter: blur(20px); transition: 333ms; top: 58px; bottom: unset; right: 34px; box-shadow: var(--bs-b); display: none; } cmso dlt btn {border-radius: 6px;display: grid;grid-template-columns: 22px auto;align-items:center; margin: 4px; padding: 11px; background: var(--bc); } cmso dlt i { height: 15px; width: 15px; border-radius: 0; box-shadow: unset; padding: 0; } cmso ft { position: relative; width: 100%; display: block; } cmso acns { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; height: 33px; margin-top: 11px; } cmso acn { display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 0.88em; border-left: solid 1px var(--bc); } cmso deletsure { display: grid; grid-template-rows: 100px auto auto; width: 400px; height: 200px; align-items: center; padding: 22px; text-align: center; border-radius: 11px; transform: scale(0); left: 20%; border: solid 1px var(--bor); top: 54px; z-index: 9999; position: absolute; background: var(--bt); backdrop-filter: blur(20px); transition: 333ms; box-shadow: var(--bs-b); } cmso deletsure hd { display: flex; justify-content: center; } cmso deletsure i { height: 44px; padding: 11px; width: 44px; background: var(--bc); border-radius: 44px; } cmso deletsure ft { display: grid; grid-template-columns: 48% 48%; gap: 11px; } cmso deletsure ft a { background: var(--bc); padding: 11px; border-radius: 11px; display: grid; align-items: center; justify-content: center; } cmso .PostOption dlt{display:block} cmso .Deleteconferm deletsure { transform: scale(1); } @media screen and (max-width: 999px) { cmso deletsure { left: 0; width: -webkit-fill-available; } } cmbo>hd{position:relative} cmbo>hd img{object-fit:cover;width:100%;height:100%;border-radius: 50%;} cmbo>bd { display:block; margin: 4px;position: relative; } cmbo>ft { display: grid; grid-column-start: 1; grid-column-end: 3; } cmbo p{margin:0;font-weight: 100;margin-top: 2px;} cmbo wish i svg { opacity: 0.44; } cmbo country, cmbo state { background: var(--bc); padding: 7px 22px; margin: 4px; display: inline-block; margin-left: 0;border-radius: 4px; } cmbo mrp { margin-left: 11px; font-weight: 100; font-size: 0.77em; text-decoration-line: line-through; } cmbo ftrs { display: grid; grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%; justify-content: center; align-items: center; } cmbo ftr { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } cmbo ftr i { height: 77%; width: 77%; } cmbo info { display: grid; grid-template-columns: auto 170px; } cmbo reviews{display: grid; align-items: center; grid-template-columns: 60% 40%;} cmbo ftr i t { font-weight: bold; font-style: normal; display: flex; height: 100%; width: 100%; margin: auto; justify-content: center; align-items: center; background: var(--hover); border-radius: 11px; } /* changed by Gagan Nayak for meeting bot component btn */ cmbo actn>adc { display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--aa); background: var(--aat); border-radius: 7px; font-size: 0.88em; padding: 0 11px; } cmbo actn>wish { display: grid; justify-content: center; align-items: center; background: var(--bc); border-radius: 7px; grid-template-columns: 44px auto; padding: 0 11px; } cmbo actn { display: grid; grid-template-columns: auto auto; height: 40px; grid-column-gap: 4px; margin: 11px 0; position: relative; z-index: 999; width: 44%; } .heart svg {opacity: 1; } .heart t { font-weight: bold; } @media only screen and (min-width: 999px){ } @media only screen and (max-width: 999px){ cmbo { grid-template-columns: 88px auto; } cmbo actn { width: -webkit-fill-available; } } @media only screen and (min-width: 999px){ users.dg2 { display: grid; grid-template-columns:50% 50%; } users.dg3 { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; } users.dg4 { display: grid; grid-template-columns: 25% 25% 25% 25%; } users.dg5 { display: grid; grid-template-columns: 20% 25% 25% 25%; } } users>user { display: grid; grid-template-rows: auto auto auto; width: auto; margin:4px; background: var(--bt); border-radius: 11px; position: relative;overflow: hidden;border: solid 1px var(--bt);} users>user>hd{position:relative} users>user img{object-fit:cover;width:100%;height:100%;} users>user>bd { display:block;margin: 7px 22px; } users>user>ft { display:block;margin:0px 7px; } users>user actn{ display: grid; grid-template-columns: auto 40px; height: 40px; margin-bottom: 11px; grid-column-gap: 4px; } users>user actn>adc{display:flex;justify-content:center;align-items:center;font-weight:bold;color:var(--aa);background:var(--aat);border-radius:7px;font-size: 0.88em;} users>user actn>wish{display:flex;justify-content:center;align-items:center;font-size:2em;font-family:monospace;background:var(--bc);border-radius:7px;} users>user p{margin:0;} users>user wish i svg { opacity: 0.44; } hm name p { font-weight: bold; } cmcna i svg { height: 21px; width: 44px; } cmcna mg i { height: 66px; background: var(--bc); border-radius: 11px; width: auto; } cmcna bd >i { background: transparent;width: auto; } cmcna i { display: flex; background: var(--b); border-radius: 55%; height: 33px; width: 33px; } cmcna mg { gap: 2%; display: grid; grid-template-columns: 20% 20% 20% 20%; justify-content: center; padding: 11px 0; } cmcna hd { opacity: 1; } cmcna ad { display: grid; grid-template-columns: 44px auto; align-items: center;border: solid 1px var(--bc); padding: 11px; border-radius: 11px; } cmcna uick { display: flex; gap: 2%; } cmcna bl{ display: grid; padding: 22px; background: var(--bt); border-radius: 22px; margin: 11px auto; max-width: 88%;} cmcna bd { display: block; border-radius: 11px; } cmcna uick i { height: 33px; width: 33px; display: inline-block; margin: 4px; } cmcna bl.mr { background: transparent; display: grid; grid-template-columns: auto auto; justify-content: space-between; border-radius: 11px; padding: 11px; margin: 11px 0; } cmcna span.top-2 { display: grid; background: #fdff46; padding: 11px; font-weight: 600; border-radius: 11px; } cmcna mro { display: flex; justify-content: center; align-items: center; width: auto; margin: auto; border-radius: 50px; transition: 99ms; overflow: hidden; position: relative; font-size: 14px; } cmcna mro i { height: 17px; } cmcna h2 { margin: 10px 0; } cmcna form { display: flex; flex-direction: row; position: relative; justify-content: flex-start; align-items: center; gap: 2%; font-size: 0.88em; }bl.confirm btns btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); border-radius: 11px; } cmcna btns { display: grid; grid-template-columns: auto auto; gap: 2%; padding: 11px 0;} cmcna d { color: var(--a); } cmcna bd { padding: 22px; } cmcna bl.mr i { background: transparent; } cmcna bd { padding: 22px;border-radius: 22px; } cmcna mro i { transform: rotate(180deg); } @media screen and (max-width: 999px) { cmcna bl { padding: 0; } cmcna bl.mr { font-size: 10px; text-align: center; padding: 4px;border: unset; } cmcna span.top-2 { border-radius: 4px; } cmcna i { background: transparent; } cmcna mro i { height: 12px; } cmcna label { font-size: 0.77em; } cmcna bl.mr { display: none; } } cchos { display: grid; padding: 22px; background: var(--bt); border-radius: 22px; margin: auto; max-width: 88%;} cchos .group { display: grid; grid-template-columns: auto 27px; align-items: center; border: solid 1px var(--bc); padding: 6px; border-radius: 11px; } cchos btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); border-radius: 11px;margin: 16px 0;margin-top: 15px; } cchos h2 { font-size: 1.25em; padding-bottom: 16px; } cchos input.input { padding: 0; font-size: 0.99em; } @media screen and (max-width: 999px){ cchos {margin: 11px;} } cartfill { display: grid; padding: 22px; background: var(--bt); border-radius: 22px;margin: 11px auto; max-width: 88%;} cartfill btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); border-radius: 11px;margin: 16px 0;margin-top: 15px; } cartfill h2 { font-size: 1.25em; } cartfill input.input { padding: 0; font-size: 0.99em; } cartfill hd bl { display: grid; grid-template-columns: 100%; align-items: center; justify-content: start;padding: 11px 0; } cartfill ft btns { display: grid; grid-template-columns: auto auto; gap: 2%; } cartfill i { display: block; } cartfill select { padding: 14px; margin: 0; border: solid 1px var(--bc); width: 100%; border-radius: 11px; height: 58px; } cartfill .group { display: grid; } @media screen and (max-width: 999px) { cartfill { margin: 11px; } .ftt { padding: 0; } cartfill p { font-size: 0.77em; } } ccvpo { display: grid; padding: 22px; background: var(--bt); border-radius: 22px;margin: 11px auto; max-width: 88%;} ccvpo .group { display: grid; grid-template-columns: auto 27px; align-items: center; border: solid 1px var(--bc); padding: 11px; border-radius: 4px; } ccvpo btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); border-radius: 11px;margin: 16px 0;margin-top: 15px; } ccvpo h2 { font-size: 1.25em; } ccvpo input.input { padding: 0; font-size: 0.99em; } ccvpo hd bl { display: grid; grid-template-columns: 48px 48px; align-items: center; justify-content: start; } ccvpo ft btns { display: grid; grid-template-columns: auto auto; gap: 2%; } ccvpo .group { display: grid; align-items: center; border: solid 1px var(--bc); padding: 11px; border-radius: 4px; width: 88%; } ccvpo i { display: block; } @media screen and (max-width: 999px) { ccvpo { margin: 11px; } ccvpo p { font-size: 0.77em; } upgradep { display: block !important; margin: 11px !important; } upgradep bd { display: block !important; } Upgrade i { height: auto; } } Upgradep { display: grid; padding: 22px; background: var(--bt); border-radius: 22px;margin: 11px auto; max-width: 88%;grid-template-rows: 64px 181px 76px;} Upgradep .group { display: grid; grid-template-columns: auto 27px; align-items: center; border: solid 1px var(--bc); padding: 11px; border-radius: 4px; } Upgradep btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); border-radius: 11px;margin: 16px 0;margin-top: 15px; } Upgradep h2 { font-size: 1.25em; padding-bottom: 16px; } Upgradep input.input { padding: 0; font-size: 0.99em; } Upgradep hd bl { display: grid; grid-template-columns: 48px 48px; align-items: center; justify-content: start; } Upgradep ft btns { display: grid; grid-template-columns: auto auto; gap: 2%; } .ftt { display: grid; grid-template-rows: 22px auto; margin: 7px 0; row-gap: 10px; padding: 11px 0; } Upgradep .group { display: grid; align-items: center; border: solid 1px var(--bc); padding: 11px; border-radius: 4px; width: 88%; } Upgradep btns { display: grid; grid-template-columns: auto auto; gap: 2%; } Upgradep p { font-size: 0.77em; } Upgradep i { justify-content: center; display: flex; align-items: center; } Upgradep bd { display: grid; grid-template-columns: 50% 50%; justify-content: center; } Upgradep li { font-size: 0.88em; } @media screen and (max-width: 999px) { Upgradep { display: block; margin: 11px; } Upgradep bd { display: block; } } /* Replace by Gagan Nayak for MeetingSubscriptionDelete */ cmco>ft { display: grid; align-items: center; grid-template-columns: 109px 0px 0px; justify-content: center; position: relative; z-index: 99999; } cmbo actn { margin-bottom: 0; } /* Gurpreet_singh */ /* Meeting_Session*/ smso bl bd >i { background: transparent; width: auto; overflow: hidden; border-radius: 22px; } smso h1 { font-weight: 600; } smso bd.onder { margin-bottom: 0; display: grid; grid-template-rows: 33% 33% 33%; } smso bl.inv_call i { height: 22px; } smso bl.inv_call p { margin: 0; } smso .adpeo{color: #54c870; background: #54c8701f; padding: 5px 11px; border-radius: 6px;} smso a.adpeo svg { fill: #54c870; } smso .in_po{padding: 2px 8px; background: #54c87036; border-radius:5px; color: #54c870;} smso .abs_po { padding: 2px 8px; background: #f05b6338; border-radius: 5px; color: #f05b63; } smso .peo_po { padding: 2px 8px; background: #113ef740; border-radius: 5px; color: #113ef7; } smso .bot_call bl hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } smso .bot_call bl hd aa i { height: 16px; width: 16px; margin: auto; } smso .myalb{display: grid; align-items: end;justify-content: center;} ccmo>i>svg { height: 22px; fill: var(--b); } smso .bot_call> i { background: var(--bc); height: 100%; } smso .zayn i{height:15px;} smso .zayn p { margin: 0; color: var(--b); } smso .zayn i svg { fill: var(--b); } smso bd.onder> bl> i { max-height: 100%; max-width: 100%; background: var(--bc); height: 100%; } cmco ft { display: flex; justify-content: end; align-items: center; } smso .meti_alls hd{justify-content: center; align-items: center;} smso .meti_all i { height: 22px; } smso .meti_all i svg { fill: var(--b); } smso .meti_all p { color: var(--b); } smso .myalb i.cal_cut{background: #ff6262;} smso .cal_cut svg{height: 30px} smso .meet_vol hd { display: flex; justify-content: space-around; text-align: center; align-items: center; } smso .meet_vol ft { display: flex; justify-content: space-around; text-align: center; align-items: center; } smso .meet_vol bd {display: flex; gap: 11px; justify-content: space-around; text-align: center; align-items: center;} smso .meet_vol p { margin: 0; } smso .meet_vol a { display: grid; gap: 11px; } smso .main { height: 100%; } smso cmbo actn { width: 100%; } smso .bot_call .anne img { height: 100%; width: 100%; border-radius: 44px; } smso .zayn img { border-radius: 44px; } cmys trc>hd>op i { height: 20px; width: 20px; background: unset; padding: 0; transform: rotate(90deg); } @media screen and (max-width: 999px) { smso .bot_call> i { max-height:400px;} smso .wekda p { margin: 0; } smso h1{font-size:1.3rem} .bome> bd { display: flex; align-items: center; gap: 22px; } smso .bot_call bl hd aa i { height: 16px; width: 16px;} smso .bot_call bl hd aa{height: 22px; width: 22px;border-radius: 5px;} smso.bot_call bl hd bd { grid-template-columns: 30px 30px 30px; display: grid; gap: 11px; } smso .bot_call bl mg{grid-template-columns: 30px 30px 30px 30px 30px;} smso .bot_call bl hd bd { grid-template-columns: 30px 30px 30px; display: grid; gap: 11px; } smso .meti_all { height: 22px; width:44px;} smso .bot_call bl hd { gap: 11px; } .anne p { font-size: 8px; } smso .meet_vol a {gap: 6px; } smso .meet_vol i svg { height: 16px; width: 16px; } smso .meet_vol i>svg { height: 22px; width: 22px; } smso bl.inv_call i { height: 16px; } smso .in_po { padding: 0px 8px;} smso .abs_po{ padding: 0px 8px;} smso .peo_po{ padding: 0px 8px;} .bome> bd p { margin: 0; } smso .onder { grid-template-columns: 32% 32% 32%; grid-template-rows: unset; margin: 11px 0; height: fit-content; } } smso location { display: grid; height: 111px; background: var(--bc); border-radius: 11px; padding: 11px; } smso bl.inf bd t { text-align: start; display: block; } smso bl.inf btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 333px; margin: auto; } smso sell { display: grid; grid-template-columns: 44px auto; align-items: center;text-align: start;padding-top: 12px; } smso sell t { margin: 7px 0 !important; padding: 0; text-align: start !important; } smso sifo { display: flex; font-size: 0.88em; align-items: center; justify-content: space-between; } smso sifo more { background: unset; display: grid; width: auto; margin: 0; color: var(--a); } smso spf i { background: var(--bc); height: 60px; border-radius: 55%;width: 60px; } smso spf { display: grid; grid-template-columns: 60px auto; align-items: center; gap: 2%; } smso spf name { font-weight: 700; font-size: 21px; } smso bl.tag { display: grid; justify-content: start; padding: unset; border-radius: 0; border: unset; background: transparent;margin: 0; } smso bl.tag hd { font-weight: 700; text-align: start;} smso number {height:38px;display:grid;align-items:center;margin:auto;border-radius:22px;background:var(--bc);position:relative;width:111px;} smso menu.btn i { background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yd/r/H0IWxav-HaA.png); background-position: 0 -290px; background-size: auto; width: 16px; height: 16px; background-repeat: no-repeat; display: inline-block; } smso menu.btn{display:flex;justify-content:center;align-items:center;font-size:2em;font-family:monospace;background:var(--bc);border-radius: 7px;} smso time { display: block; width: auto; } smso so_chats pa { color: var(--b); background: #ff6262; padding: 2px 6px; font-size: 11px; font-weight: 700; border-radius: 5px; margin-left: 11px; } smso grid so_chats> hd>h3 { display: flex; align-items: center; } smso grid so_chats> hd { display: flex; align-items: center; gap: 11px; justify-content: space-between; } smso .my hd { display: grid; grid-template-columns: auto auto 44px; align-items: center; } smso .your hd { display: grid; grid-template-columns: 44px auto auto; align-items: center; } smso grid so_chats bl { background: var(--0); padding: 0; border: unset; border-radius: 0; margin: 11px 0; } smso grid so_chats .my> bd { display: flex; justify-content: end; } smso .your hd d { text-align: end; } smso so_chats> ft { display: grid; grid-template-columns: 33px 11px auto 44px; align-items: center; background: var(--bc); padding: 0px 11px; border-radius: 11px; height: 44px; } smso so_chats> ft input { background: var(--0);} smso so_chats ft hr { height: 67%; width: 2px;} smso so_chats> ft i { height: 22px; } smso .my hd> p { text-align: end; } smso .your h5{font-weight:500;} smso .my h5{font-weight:500;} smso cmbo { margin: 0; margin-top: 11px; } smso .bot_dit { border: unset; display: grid; grid-template-columns: auto auto; padding: 0 11px; align-items: center; } smso .bot_dit ftrs { display: grid; grid-template-columns: 22px 22px; justify-content: space-around; align-items: center; } smso .bot_dit ftrs t { font-weight: bold; font-style: normal; padding: 3px 10px; background: var(--hover); border-radius: 11px; } @media screen and (max-width: 999px) { smso main {grid-row: 1;} } /* Meeting_Session */ /* Meeting_Sessions*/ /* header*/ smss sos_wek { display: grid; grid-template-columns:25% 25% 25% 25%; padding: 11px; } smss sos_wek hd { display: grid; grid-template-columns: 44px auto; align-items: center;justify-content: center;} smss sos_wek bl { display: grid; justify-content: center; background: var(--b-t); margin: 11px; padding: 22px; text-align: center; align-items: center; border-radius: 14px; } smss sos_wek h2 { font-size: 1.4rem; } smss sos_wek bl p { margin: 0; font-weight: 600; } smso .bomee img { width: 100%; object-fit: cover; height: 100%; } @media screen and (max-width: 999px) { smso .bot_call bl hd .anne { width: auto; grid-template-columns: 22px auto; border-radius: 5px; } smss sos_wek bl { width: 250px; } smss sos_wek { grid-template-columns: auto auto auto auto; overflow: scroll; } /*smss header {position: relative;backdrop-filter: unset;} */ } /*header*/ /*main*/ smso .bot_call bl hd .anne {width: auto; grid-template-columns: 33px auto; padding: 8px 11px; align-items: center; height: auto;} smss bl.shon { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; padding: 0 11px; } smss bl.shon hd { display: grid; grid-template-columns: auto 44px auto 44px; align-items: center;gap:11px; } smss bl.shon bd { display: grid; grid-template-columns: auto auto 44px; align-items: center; gap: 11px;} smss bl.shon hd img { height: 33px; width: 33px; background: rebeccapurple; border-radius: 44px; max-width: unset; max-height: unset; } smss bl.shon name { font-weight: 700;font-size: 1.1rem; } smss bl.shon hd svg { height: 22px; } smss .shon p { margin: 0;} smss bl.shon bd h3 { font-weight: 600; } cmco p { margin: 0; font-weight: 500; margin-top: 1px; padding: 2px; } @media screen and (max-width: 999px) { cmys { grid-template-columns: unset; margin: 0 11px;padding:0; } cmys trc> bd{ justify-content: space-between;gap:0px;} cmys trc h7 { grid-template-columns: 20px auto; font-size: 0.6rem; } smss bl.shon{grid-template-columns:unset;justify-content: unset;background:var(--b-t);margin:11px;padding:11px;border-radius: 11px; } smss bl.shon bd { grid-template-columns: 80px auto 44px; } smss bl.shon hd { grid-template-columns: 90px 44px auto 22px; gap: 0; } cmys trc {margin: 4px 0; padding: 16px; gap: 7px;} } @media screen and (max-width:400px) { cmys h7 {grid-template-columns: 22px auto;font-size: 0.6rem; } } /*main*/ /*sidebar*/ smss sidebar bl { padding: 22px; border-radius: 22px; margin: 11px; } smss sidebar bl bd { display: grid; padding: 0; gap:7px; } smss sidebar bl a { display: grid; align-items: center; grid-template-columns: 44px auto; gap: 11px; background: var(--bt); padding: 11px; border-radius: 14px; } smss sidebar bl bd dp { display: grid; height: 44px; width: 44px; justify-content: center; align-items: center; background: var(--bc); border-radius: 44px; color: var(--a); } smss sidebar bl hd { margin: 0 11px; } @media screen and (max-width: 999px) { } /*sidebar*/ /* Meeting_Sessions*/ /*Meeting Subscription New*/ msnb bl bd> ft { display: grid; margin: 0; grid-template-columns: auto auto; column-gap: 2%; } msnb .up_dp { display: grid; border: unset; grid-template-columns: 50% 50%; } @media screen and (max-width: 999px) { msnb sl, .sl{width:auto;} msnb bl bd> ft {display: block;} smcn d.aerea { display: flex; flex-direction: column-reverse; } smcn form { display: block; } smcn d.aerea { display: grid; } smcn main { grid-row-start: 1; display: grid; } smcn t { text-align: unset; font-size: 14px; } smcn .nw { margin: 0; } } /* Meeting Subscription New*/ @media screen and (max-width: 400px) { cmcs cmco>ft{grid-template-columns:auto auto;} } /* walet */ @media screen and (max-width: 999px) { .home home wallet bl ft {grid-template-columns:116px 22px auto;} } home wallet bl>ft { display: grid; grid-template-columns: auto 22px auto; align-items: center; height: 45px; } home wallet bl btn{display:grid;max-width: 333px;background:var(--aaa);height:44px;justify-content:center;align-items:center;margin-left:11px;border-radius:7px;} home wallet bl btn a { color: var(--b); } home wallet bl ft d { position: relative; } csfs>bl so_chats bl { padding: 0; border: unset; } /* wallets */ cwlo { align-items: center; } /* Changed by Gagan for Meeting Session */ ccmo { display: flex; justify-content: center; padding: 11px 0; align-items: center; background: var(--bor); padding: 11px; border-radius: 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-width: 95%; margin: auto; } ccmo:after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(148deg, var(--bor), var(--bor), var(--bor)); z-index: -1; border-radius: 22px; } ccmo>i { display: flex; border-radius: 55%; height: 33px; width: 33px; margin: 0 6px; padding: 6px; place-content: center; align-items: center; background: var(--b-t22); } ccmo i>svg { height: 18px; width: 18px; } smso .tire { display: flex; gap: 11px; justify-content: end; align-items: center; } smso .bome bd>hd p { margin: 7px 0; display: flex; justify-content: right; } smso or { display: grid; height: 11px; width: 11px; border: solid 2px #f6c6c5; border-radius: 44px; justify-content: center; align-items: center; padding: 2px; } smso or i { height: 11px; width: 11px; background: #f25154; } smso .wekda a { display: flex; align-items: center; margin: 0; gap: 2%; white-space: nowrap; font-weight: 500; } smso .wekda a h3 { font-weight: 500; } smso .wekda a p { color: var(--aa); font-size: 1em; } smso .wekda p { margin: 0; } smso .son { display: block; } smso .inv_call { display: flex; padding: 22px; background: var(--b); margin: 5px 0; border-radius: 11px; justify-content: space-between; margin-top: 11px; } smso .inv_call a { display: grid; grid-template-columns: 25px auto auto; align-items: center; gap: 2%; white-space: nowrap; opacity: 0.8; padding: 5px 11px; border-radius: 5px; font-weight: 400; font-size: 0.88em; } smso bl.inv_call i { height: 22px; width: 22px; } smso .inv_call d { display: flex; gap: 2%; } smso .bot_call bl hd bd { display: flex; align-items: center; } smso .bot_call bl hd aa { display: grid; backdrop-filter: blur(20px); border-radius: 8px; height: 33px; width: 33px; margin: 0 2px; padding: 5px; background: var(--bor); } smso .bot_call bl { position: absolute; height: calc(100% - 11%); width: calc(100% - 8%); z-index: 999; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; color: var(--b); } smso .bot_call bl hd aa i svg { fill: var(--b); } smso .bot_call bl hd>aa>i { height: 25px; width: 25px; box-shadow: inset 0 0 0 1px var(--bt); border-radius: 55%; overflow: hidden; padding: 1px; } smso .meti_alls> i { filter: blur(1.1px); } smso .meti_all{ display: grid; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); margin: auto; background: var(--b-t22); height: 27px; width: fit-content; font-weight: 300; font-size: 0.88em; } smso .zayn i { box-shadow: inset 0 0 0 1px var(--bt); border-radius: 55%; overflow: hidden; padding: 1px; height: 22px; width: 22px; } smso .meti_all { display: grid; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; backdrop-filter: blur(20px); border-radius: 8px; color: var(--b); margin: auto; background: var(--bor); height: 27px; width: fit-content; font-weight: 300; font-size: 0.88em; } smso .meet_vol { display: grid; grid-template-columns: 66px auto 66px; padding: 22px; background: var(--bt); align-items: center; margin: 11px 0; border-radius: 11px; justify-content: space-between; } smso .bomee { display: grid; grid-template-columns: 75% auto; border-radius: 11px; padding: 22px; max-height: 400px; background: var(--bt); gap: 1%; } smso bl .bot_call { margin-right: 0; position: relative; overflow: hidden; border-radius: 11px; max-height: 399px; } smso .meet_vol i { width: 44px; background: var(--bc); padding: 6px; margin: auto; margin-bottom: 4px; } smso .meet_vol btn { display: grid; justify-content: center; align-items: center; border-radius: 7px; margin: auto; font-weight: 400; white-space: nowrap; text-align: center; grid-template-rows: 55px auto; } smso .meet_vol btn t {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 99.9%; font-size: 0.88em; margin-top: 5px;} smso .meet_vol btn.this { font-weight: 500; } smso .meet_vol btn.this i { background: var(--aaa); } smso .meet_vol btn.this svg { fill: var(--b); } smso main { overflow: unset; } smso .meet_vol copo btn t { text-overflow: unset; overflow: unset; } smso .meet_vol btn copo btn { display: grid; grid-template-columns: 33px auto; padding: 5px; background: var(--bc); align-items: center; border-radius: 5px; margin: 6px 0; height: 24px; border: solid 1px var(--bc); position: relative; color: var(--c); width: auto; box-shadow: unset; font-weight: 400; text-align: start; justify-content: start; max-width: unset; } smso so_chats> hd btn { display: block; padding: 5px; border-radius: 5px; } smso so_chats> hd svg { height: 18px; opacity: 0.8; } smso grid so_chats .my> bd h5 { padding: 8px; background: var(--bc); margin-right: 44px; border-radius: 6px; font-weight: 400; } smso grid so_chats .your> bd h5 { padding: 8px; background: var(--bc); border-radius: 6px; font-weight: 400; } smso grid so_chats .your> bd { display: flex; padding-left: 36px; padding-top: 4px; } smso so_chats bl p { margin: 0; opacity: 0.7; } smso .your hd nm { text-align: start; font-weight: 500; font-size: 0.88em; opacity: 0.7; } smso .my hd nm { text-align: end; font-weight: 500; font-size: 0.88em; opacity: 0.7; } smso so_chats> ft hd { position: relative; height: 22px; width: 22px; padding: 5px; justify-content: center; align-items: center; display: flex; } smso .bot_call bl hd .anne t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; font-size: 0.88em; } smso so_chats> ft hd input{position:absolute;height: 22px; width: 22px; padding: 0; opacity: 0; z-index: 999;} smso so_chats { height: 44vh; background: var(--bt); padding: 22px; display: grid ; border-radius: 11px; margin-top: 5px; grid-template-rows: 44px auto 44px; } smso .your hd i, smso .my hd>i { width: 22px; display: block; height: 22px; border: 1px solid var(--bc); border-radius: 50%; margin: 0 5px; } smso bl hd>i img { border-radius: 16px; width: 100%; height: 100%; } smso .your hd, smso .my hd { margin-bottom: 4px; } smso .meet_vol copo btn { margin: 4px 0; } smso so_chats>bd { overflow: hidden; overflow-y: scroll; } @media screen and (min-width: 999px) { smso main { width: 80%; max-width: 844px; } } @media screen and (max-width: 999px) { smso bl .bot_call { box-shadow: var(--bs-bt); max-height: 322px; height: 322px; } smso .onder { margin: 11px 0; height: fit-content; display: flex !important; overflow-y: auto; } smso .bot_call bl { height: calc(100% - 14%); width: calc(100% - 11%); } smso .inv_call d { display: block; } smso .inv_call a { margin: 11px 0; } smso .inv_call a:first-child { margin-top: 0; padding: 11px; } smso .inv_call a:last-child { margin-bottom: 0; padding: 11px; } smso .bomee { display: block; background: var(--bt); padding: 11px; border-radius: 11px; max-height: unset; } smso .meet_vol { overflow: hidden; overflow-x: scroll; gap: 11px; } smso .bot_call bl hd bd { display: none; } smso .aerea { display: grid; grid-template-columns: 100%; } smso .inv_call { white-space: nowrap; overflow: hidden; overflow-x: scroll; gap: 11px; padding: 11px; } smso main .son { display: block; margin: 11px; } } @media screen and (max-width: 999px) { .start screen { overflow: hidden !important; } } /* Meeting_Subscription */ smco bl bd >i { background: transparent; width: auto; overflow: hidden; border-radius: 22px; } smco bl i {height: auto;} smco .onder { display: grid; grid-template-rows: 32% 32% 32%; gap: 8px; } smco h1 { font-weight: 600; } smco .wekda{display: flex;gap:11px;align-items: center;} smco bl.inv_call i { height: 22px; } smco bl.inv_call p { margin: 0; } smco .adpeo{color: #54c870; background: #54c8701f; padding: 5px 11px; border-radius: 6px;} smco a.adpeo svg { fill: #54c870; } smco .in_po{padding: 2px 8px; background: #54c87036; border-radius:5px; color: #54c870;} smco .abs_po { padding: 2px 8px; background: #f05b6338; border-radius: 5px; color: #f05b63; } smco .peo_po { padding: 2px 8px; background: #113ef740; border-radius: 5px; color: #113ef7; } smco .bot_call bl hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } smco .bot_call bl hd aa i { height: 22px; width: 22px; margin: auto; } smco .myalb{display: grid; align-items: end;justify-content: center;} smco .myalb i { background: var(--b-t22); backdrop-filter: blur(11px); } smco .myalb svg { height: 22px; fill: var(--b); } smco .bot_call> i { height: 100%; background: var(--bc); max-height: 100%; max-width: 100%;} smco .bot_call i img {width: 100%; height: 100%;object-fit:cover } smco .me_mute{display: grid; justify-content: end; height: fit-content;} smco .zayn i{height:15px;} smco .zayn p { margin: 0; color: var(--b); } smco .zayn i svg { fill: var(--b); } smco bd.onder> bl> i { max-height: 100%; max-width: 100%; height: 100%; border: solid 1px var(--bc); border-radius: 11px; background: var(--bc); } smco bd.onder> bl> i img{ height: 100%; } smco .meti_alls hd{justify-content: center; align-items: center;} smco .meti_all i { height: 22px; } smco .meti_all i svg { fill: var(--b); } smco .meti_all p { color: var(--b); } smco .myalb i.cal_cut{background: #ff6262;} smco .cal_cut svg{height: 30px} smco .meet_vol hd { display: flex; justify-content: space-around; text-align: center; align-items: center; } smco .meet_vol ft { display: flex; justify-content: space-around; text-align: center; align-items: center; } smco .meet_vol bd {display: flex; gap: 11px; justify-content: space-around; text-align: center; align-items: center;} smco .meet_vol p { margin: 0; } smco .meet_vol i svg { height: 22px; width: 22px; opacity: 0.8; } smco .meet_vol a { display: grid; gap: 11px; } smco .main { height: 100%; } smco cmbo actn { width: 100%; } @media screen and (max-width: 999px) { smco .wekda p { margin: 0; } smco h1{font-size:1.3rem} .bome> bd { display: flex; align-items: center; gap: 22px; } smco .bot_call bl hd aa i { height: 16px; width: 16px;} smco .bot_call bl hd aa{height: 22px; width: 22px;border-radius: 5px;} smco.bot_call bl hd bd { grid-template-columns: 30px 30px 30px; display: grid; gap: 11px; } smco .bot_call bl hd .anne { height: 22px; width: auto; grid-template-columns: 22px auto; border-radius: 5px; } smco .bot_call bl mg{grid-template-columns: 30px 30px 30px 30px 30px;} smco .bot_call bl hd bd { grid-template-columns: 30px 30px 30px; display: grid; gap: 11px; } smco .zayn{grid-template-columns:0px auto;padding:0;margin:0;white-space:nowrap;font-size:10px;width:auto;border-radius:5px;text-align: center;} smco .me_mute i { height: 22px; width: 22px; border-radius: 5px; } smco .meti_all { height: 22px; width:44px;} smco .bot_call bl hd { gap: 11px; } .anne p { font-size: 8px; } smco .onder bl img{ border-radius: 11px; } smco .meet_vol a {gap: 6px; } smco .meet_vol i svg { height: 16px; width: 16px; } smco bl.inv_call i { height: 16px; } smco .in_po { padding: 0px 8px;} smco .abs_po{ padding: 0px 8px;} smco .peo_po{ padding: 0px 8px;} .bome> bd p { margin: 0; } smco .onder { grid-template-columns: 32% 32% 32%; grid-template-rows: unset; margin: 11px 0; height: fit-content; } smco bl .bot_call{margin-right:0px;} } smco location { display: grid; height: 111px; background: var(--bc); border-radius: 11px; padding: 11px; } smco bl.inf bd t { text-align: start; display: block; } smco bl.inf btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 333px; margin: auto; } smco sell { display: grid; grid-template-columns: 44px auto; align-items: center;text-align: start;padding-top: 12px; } smco sell t { margin: 7px 0 !important; padding: 0; text-align: start !important; } smco sifo { display: flex; font-size: 0.88em; align-items: center; justify-content: space-between; } smco sifo more { background: unset; display: grid; width: auto; margin: 0; color: var(--a); } smco spf i { background: var(--bc); height: 60px; border-radius: 55%;width: 60px; } smco spf { display: grid; grid-template-columns: 60px auto; align-items: center; gap: 2%; } smco spf name { font-weight: 700; font-size: 21px; } smco bl.tag { display: grid; justify-content: start; padding: unset; border-radius: 0; border: unset; background: transparent;margin: 0; } smco bl.tag hd { font-weight: 700; text-align: start;} smco number {height:38px;display:grid;align-items:center;margin:auto;border-radius:22px;background:var(--bc);position:relative;width:111px;} smco menu.btn i { background-image: url(https://static.xx.fbcdn.net/rsrc.php/v3/yd/r/H0IWxav-HaA.png); background-position: 0 -290px; background-size: auto; width: 16px; height: 16px; background-repeat: no-repeat; display: inline-block; } smco menu.btn{display:flex;justify-content:center;align-items:center;font-size:2em;font-family:monospace;background:var(--bc);border-radius: 7px;} smco time { display: block; width: auto; } smco so_chats pa { color: var(--b); background: #ff6262; padding: 2px 6px; font-size: 11px; font-weight: 700; border-radius: 5px; margin-left: 11px; } smco grid so_chats> hd>h3 { display: flex; align-items: center; } smco grid so_chats> hd { display: flex; align-items: center; gap: 11px; justify-content: space-between; } smco .my hd { display: grid; grid-template-columns: auto auto 44px; align-items: center; } smco .your hd { display: grid; grid-template-columns: 44px auto auto; align-items: center; } smco grid so_chats bl { background: var(--0); padding: 0; border: unset; border-radius: 0; margin: 11px 0; } smco grid so_chats .my> bd { display: flex; justify-content: end; } smco .your hd bd { text-align: end; } smco so_chats> ft { display: grid; grid-template-columns: 44px 22px auto 44px; align-items: center; background: var(--bc); padding: 0px 11px; border-radius: 11px; height: 44px; } smco so_chats> ft input { background: var(--0);} smco so_chats ft hr { height: 67%; width: 2px;} smco so_chats> ft i { height: 22px; } smco .my hd> p { text-align: end; } smco .your h5{font-weight:500;} smco .my h5{font-weight:500;} smco cmbo { margin: 0; margin-top: 11px; } smco .bot_dit { border: unset; display: grid; grid-template-columns: auto auto; padding: 0 11px; align-items: center; } smco .bot_dit ftrs { display: grid; grid-template-columns: 22px 22px; justify-content: space-around; align-items: center; } smco .bot_dit ftrs t { font-weight: bold; font-style: normal; padding: 3px 10px; background: var(--hover); border-radius: 11px; } @media screen and (max-width: 999px) { smco main {grid-row: 1;} } smco bl mg { display: flex; justify-content: center; padding: 11px 0; align-items: center; } smco .tire { display: flex; gap: 11px; justify-content: end; align-items: center; } smco .bome bd>hd p { margin: 7px 0; display: flex; justify-content: right; } smco or { display: grid; height: 11px; width: 11px; border: solid 2px #f6c6c5; border-radius: 44px; justify-content: center; align-items: center; padding: 2px; } smco or i { height: 11px; width: 11px; background: #f25154; } smco .wekda a { display: flex; align-items: center; margin: 0; gap: 2%; white-space: nowrap; font-weight: 500; } smco .wekda a h3 { font-weight: 500; } smco .wekda a p { color: var(--aa); font-size: 1em; } smco .wekda p { margin: 0; } smco .bome { display: grid; grid-template-columns: 73% auto; padding: 11px; border-radius: 22px; } smco .son { display: block; } smco .inv_call { display: flex; padding: 11px; background: var(--b); margin: 5px 0; border-radius: 11px; justify-content: space-between; margin-top: 11px; } smco .inv_call a { display: grid; grid-template-columns: 33px auto auto; align-items: center; gap: 2%; white-space: nowrap; opacity: 0.8; padding: 5px 11px; border-radius: 5px; } smco bl.inv_call i { height: 22px; width: 22px; } smco .inv_call d { display: flex; gap: 2%; } smco .bot_call bl hd bd { display: flex; align-items: center; } smco .bot_call bl hd aa { display: grid; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); height: 33px; width: 33px; margin: 0 4px; padding: 5px; background: var(--b-t22); } smco .bot_call bl { position: absolute; height: calc(100% - 22px); width: calc(100% - 22px); z-index: 999; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; } smco .bot_call bl hd aa i svg { fill: var(--b); } smco .bot_call bl hd .anne { width: auto; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; } smco .anne i { box-shadow: inset 0 0 0 1px var(--bt); border-radius: 55%; overflow: hidden; padding: 1px; } smco bl mg i { display: grid; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); height: 33px; width: 33px; margin: 0 4px; padding: 5px; background: var(--b-t22); } smco .meti_alls> i { filter: blur(1.1px); } smco .me_mute i { display: grid; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); height: 33px; width: 33px; padding: 5px; background: var(--b-t22); } smco .zayn { display: grid; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); margin: 0 4px; background: var(--b-t22); height: 27px; width: fit-content; font-weight: 300; font-size: 0.88em; } smco .meti_all { display: grid; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); margin: auto; background: var(--b-t22); height: 27px; width: fit-content; font-weight: 300; font-size: 0.88em; } smco .zayn i { box-shadow: inset 0 0 0 1px var(--bt); border-radius: 55%; overflow: hidden; padding: 1px; height: 22px; width: 22px; } smco .meti_all { display: grid; grid-template-columns: 33px auto; padding: 5px 11px; align-items: center; backdrop-filter: blur(11px); border-radius: 8px; color: var(--b); margin: auto; background: var(--b-t22); height: 27px; width: fit-content; font-weight: 300; font-size: 0.88em; } smco .meet_vol { display: grid; grid-template-columns: 66px auto 66px; padding: 11px; background: var(--bt); align-items: center; margin: 11px 0; border-radius: 11px; justify-content: space-between; } smco .bomee { display: grid; grid-template-columns: 75% auto; border-radius: 22px; } smco bl .bot_call { height: 100%; margin-right: 0; position: relative; overflow: hidden; border-radius: 11px; } smco .meet_vol i { width: 44px; background: var(--bc); padding: 11px; margin: auto; margin-bottom: 4px; } smco .meet_vol btn { display: grid; justify-content: center; align-items: center; border-radius: 7px; margin: auto; font-weight: 400; white-space: nowrap; text-align: center; max-width: 88px; } smco .meet_vol btn t { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 99.9%; font-size: 0.88em; } smco .meet_vol btn.this { font-weight: 500; } smco .meet_vol btn.this i { background: var(--aaa); } smco .meet_vol btn.this svg { fill: var(--b); } smco main { overflow: unset; } smco .meet_vol copo btn t { text-overflow: unset; overflow: unset; } smco .meet_vol btn copo btn { display: grid; grid-template-columns: 33px auto; padding: 5px; background: var(--bc); align-items: center; border-radius: 5px; margin: 6px 0; height: 24px; border: solid 1px var(--bc); position: relative; color: var(--c); width: auto; box-shadow: unset; font-weight: 400; text-align: start; justify-content: start; max-width: unset; } smco so_chats> hd btn { display: block; padding: 5px; border-radius: 5px; } smco so_chats> hd svg { height: 18px; opacity: 0.8; } smco grid so_chats .my> bd h5 { padding: 8px; background: var(--bc); margin-right: 44px; border-radius: 6px; font-weight: 400; } smco grid so_chats .your> bd h5 { padding: 8px; background: var(--bc); border-radius: 6px; font-weight: 400; } smco grid so_chats .your> bd { display: flex; padding-left: 36px; padding-top: 4px; } smco so_chats bl p { margin: 0; opacity: 0.7; } smco .your hd nm { text-align: start; font-weight: 500; font-size: 0.88em; opacity: 0.7; } smco .my hd nm { text-align: end; font-weight: 500; font-size: 0.88em; opacity: 0.7; } smco so_chats> ft hd { position: relative; height: 22px; width: 22px; padding: 5px; justify-content: center; align-items: center; display: flex; } smco .bot_call bl hd .anne t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; font-size: 0.88em; } smco so_chats> ft hd input{position:absolute;height: 22px; width: 22px; padding: 0; opacity: 0; z-index: 999;} smco so_chats { height: 33vh; background: var(--b-t); padding: 11px; display: grid; border-radius: 11px; margin-top: 11px; grid-template-rows: 44px auto 44px; } smco .your hd i, smso .my hd>i { width: 22px; display: block; height: 22px; border: 1px solid var(--bc); border-radius: 50%; margin: 0 5px; } smco bl hd>i img { border-radius: 16px; width: 100%; height: 100%; } smco .your hd, smso .my hd { margin-bottom: 4px; } smco .meet_vol copo btn { margin: 4px 0; } smco so_chats>bd { overflow: hidden; overflow-y: scroll; } smco .zayn>t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; font-size: 0.88em; } @media screen and (min-width: 999px) { smco main { width: 80%; max-width: 844px; } } @media screen and (max-width: 999px) { smco main .bome { display: block; padding: 22px; border-radius: 22px; background: var(--b-t); } smco .inv_call d { display: block; } smco .inv_call a { margin: 11px 0; } smco .inv_call a:first-child { margin-top: 0; padding: 11px; } smco .inv_call a:last-child { margin-bottom: 0; padding: 11px; } smco .bomee { display: block; background: var(--bt); padding: 11px; border-radius: 11px; } smco .onder { grid-template-columns: 44% 44% 44%; grid-template-rows: unset; margin: 11px 0; height: fit-content; overflow-x: scroll; gap: 0; } smco .meet_vol { overflow: hidden; overflow-x: scroll; gap: 11px; } smco .bot_call bl hd bd { display: none; } smco .bomee { display: block; } smco .aerea { display: grid; grid-template-columns: 100%; } smco .inv_call { white-space: nowrap; overflow: hidden; overflow-x: scroll; gap: 11px; padding: 11px; } smco main .son { display: block; margin: 11px; } } /* Meeting_Subscription */ cpsolti sstm hd { display: grid; margin: auto; justify-content: start; } cpsolti sstm slc:after { content: " "; position: absolute; height: 14px; width: 43px; background: var(--aaa); border-radius: 3px; right: 15px; bottom: 13px; margin: auto; } cpsolti div {display: grid; grid-template-columns: 77px auto auto; align-items: center; padding: 22px; margin: 11px 0; border-bottom: solid 1px var(--bc);} cpsolti bd> bl bd {display: grid; grid-template-columns: 19% 19% 19% 19% 19%; align-items: center; padding: 22px; height: 100%; gap: 1.3%; width: 70%; margin-left: 7%;} cpsolti> bd bl { display: grid; position: relative; } cpsolti pbg { display: grid; height: 100%; } cpsolti pbg img { height: 100%; border-radius: 11px; width: 100%; display: grid; } cpsolti> bd hd h3 { display: grid; font-size: 1.55rem; font-weight: 500; } cpsolti div hd i { height: 44px; width: 44px; } cpsolti div bd h3 { font-size: 1.55rem; font-weight: 500; } cpsolti div bd p { font-size: 1.22rem; opacity: 0.55; margin: 0; } cpsolti div ft> i { transform: rotate(180deg); } cpsolti> bd cho bl { grid-template-columns: auto auto; justify-content: space-between; align-items: center; margin: 11px 0; border-top: solid 1px var(--bc); padding: 11px 0; } cpsolti cho { margin-top: 0px; padding: 22px; } cpsolti> bd cho btn {display: grid; grid-template-columns: auto 44px; align-items: center; padding: 0 11px; border: solid 1px var(--bc); border-radius: 7px; width: 170px; height: 44px;} cpsolti> bd cho bl h3 { font-size: 1.55rem; font-weight: 400; } cpsolti div ft btn { display: grid; grid-template-columns: auto 33px; align-items: center; width: fit-content; border: solid 1px var(--bc); padding: 7px 22px; gap: 11px; border-radius: 11px; font-size: 1.11rem; } cpsolti div ft { display: grid; justify-content: end; grid-template-columns: auto 33px; align-items: center;gap:11px;} @media screen and (max-width: 999px) { cpsolti sstm slc { height: 100px; width: 100px; } cpsolti bd> bl bd { grid-template-columns: 33% 33% 33%; } cpsolti div hd i { height: 33px; width: 33px; } cpsolti div bd h3 { font-size: 1rem; } cpsolti div bd p { font-size: 0.88rem; } cpsolti div ft { grid-template-columns: auto 22px; } cpsolti div ft btn { padding: 7px 11px; grid-template-columns: auto 22px; } cpsolti div { grid-template-columns: 44px auto auto; padding: 11px; } cpsolti> bd cho btn { width: 100px; font-size: 0.88rem; } cpsolti> bd cho bl h3 { font-size: 1.11rem; } } sactsti main { width: 100%; max-width: 1111px; } spwbtt main { width: 100%; max-width: 1000px; } cbdibl bl hd i { height: 22px; width: 22px; margin: auto; } cbdibl bl ft h3{ font-size: 1.77rem; font-weight: 400; } cbdibl bl ft i { transform: rotate(270deg); height: 22px; width: 22px; } .cbdibl bl { margin-bottom: 0; } cbdibl pp { display: grid; grid-template-columns: auto auto auto; height: 0px; align-items: center; background: var(--b-t); border-radius: 11px; transition: 333ms; font-size: 1.33rem; text-align: center; border: solid 1px var(--bor); border-top: 0; font-weight: 500; color: var(--aa); } .cbdibl pp {padding: 33px 11px; height: auto; } cmdibl> h3 { margin: 11px 0; margin-top: 44px; font-size: 1.55rem; } @media screen and (max-width: 999px) { cbdibl bl { grid-template-columns: 44px auto auto; margin: 4px 11px; } cbdibl { display: block; padding-bottom: 11px; } cbdvc bd bl { margin: 7px 11px; } } /* Changed by Gagan Nayak for Personalization*/ cpsolti sstm hd i { margin: auto; justify-content: start; height: 100%; border-radius: 11px; max-height: 155px; overflow: hidden; box-shadow: 0 0 0 8px var(--c); } cpsolti sstm slc { display: block; height: 55%; width: 44%; position: absolute; right: 15px; background: var(--b-t22); z-index: 999; bottom: 15px; border-radius: 7px; backdrop-filter: blur(13px); } /* Bluetooth & devices */ cbdibl bl {display: grid; grid-template-columns: 70px auto auto; align-items: center; background: var(--b-t); border-radius: 11px; padding: 16px 11px; gap: 22px; margin: 11px 3px;margin-top: 0; box-shadow: 0px 0px 0px 1px var(--bor);} cbdibl bl ft bb.oo oo {margin-left: 40px; background: var(--b); box-shadow: 0 0 10px 3px var(--b-t);} cbdibl bl ft bb {position: revert; border-color: var(--bor); height: 28px; width: 66px;} cbdibl bl ft bb.oo { background: var(--aa); } cbdibl bl ft { display: grid; justify-content: end; grid-template-columns: auto auto;align-items: center;} cbdibl bl bd p { margin: 0; font-size: 1.11rem;opacity: 0.7;} cbdibl bl bd h3 { font-size: 1.33rem; font-weight: 400; } cbdibl bl hd i { height: 33px; width: 33px; margin: auto; } cbdibl bl ft h3{ font-size: 1.77rem; font-weight: 400; } cbdibl bl ft btn { background: var(--btn); padding:7px 33px; color: var(--b); border-radius: 7px; } cbdibl bl ft i { transform: rotate(270deg); height: 33px;width: 33px;} cbdibl bl ft bb.oo oo {margin-left: 40px; background: var(--at); box-shadow: 0 0 10px 3px var(--at); } cbdibl bl ft bb oo { height: 22px; width: 22px; margin: 3px; } cbdibl bl ft bb.oo { background: var(--at); } cbdibl .degp{gap: 22px;} @media screen and (max-width: 999px) { cbdibl bl { margin: 11px; grid-template-columns: 44px auto auto; } cbdibl bl bd h3 { font-size: 1.11rem;font-weight: 500; } cbdibl bl bd p { font-size: 0.88rem; } cbdibl .degp { gap: 11px; } cbdibl { display: block; padding-bottom: 11px; } cbdibl bl ft btn { padding: 7px 16px; } cbdvc bd bl { margin: 7px 11px; } } cbdvc bd bl ft { display: block; text-align: center; } cbdvc> bd {display: grid; grid-template-columns: auto auto auto auto; align-items: center; width: fit-content;} cbdvc bd bl bd { align-items: center; display: flex; } cbdvc .bat{display:grid;grid-template-columns:auto 44px;width:fit-content;align-items:center;height:fit-content;gap:11px;margin:auto;} cbdvc ft h3{ font-size: 1rem; font-weight: 500;} cbdvc >hd h1 {margin-bottom:11px;} cbdvc { display: block; padding: 11px 0; } cbdvc bd bl:hover { background: var(--b); transform: scale(1); } csops csopo select { padding: 7px; height: auto; border-radius: 7px; max-width: 155px; max-height: 33px; } csopoj { display: none; } .csopoj csopoj { display: grid; } csopojs csopo { margin: 0; border: 0; padding: 11px;} csopojs {display: grid; background: var(--b-t); margin: 11px 0;border-radius: 11px;} .csopoj csopojs { padding:3px;border: solid 1px var(--bor); } csopoj> ft { display: flex; align-items: center; gap: 22px; padding: 33px 22px; } .csopoj csopojs csopo { border-radius: 0; } csopoj> ft h3 { margin: 0; } csopoj csopo hd { opacity: 0; } csopoj csopo ft { padding-right: 33px; } page inf name svg { fill: var(--a); } @media screen and (max-width: 999px) { cbdvc> bd { grid-template-columns:auto auto; } cbdvc bd bl:nth-child(2) { display: none; } cbdvc >hd h1 { font-size: 1.88rem; } } @media screen and (max-width:666px) { cbdvc bd bl:nth-child(1) { display: none; } } /* Bluetooth & devices */ /* Channel */ sapo upld { position: absolute; z-index: 9999; background: rgb(149 149 149 / 14%); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } sapo userpff sidebar { width: 50%; } sapo header { position: unset; } sapo friends main { width: 100%; max-width: 100%; } sapo friends { width: 100%; } sapo Photos main { width: 100%; max-width: 100%; } sapo Photos { width: 100%; } sapo Videos main { width: 100%; max-width: 100%; } sapo Videos { width: 100%; } sapo Reels main { width: 100%; max-width: 100%; } sapo Reels { width: 100%; } sapo gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} sapo cpss> d { display: grid;margin: 0 11px;} sapo abouts>main>d.main { padding-bottom: 22px; } sapo btn { cursor: pointer; } sapo grid { margin-top: 11px; } sapo gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} sapo gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } sapo username{font-size: 0.55em; opacity: 0.66;} sapo nv back>i { height: 33px; width: 33px; } sapo cover { display: flex; position: relative; overflow: hidden; } sapo ff>ft>bl op:hover { background: var(--bc); } sapo pffs ff ft expnd:hover { background: var(--bc); } sapo gd:hover { background: var(--bc); } sapo ff>ft>bl op { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; justify-content: center; } sapo cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } sapo cover ii img { object-fit: cover; height: 100%; width: 100%; } sapo cover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 18px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 15px; grid-template-columns: 30px auto; width: unset; } sapo ff>bd {position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; padding-top: 22px;} sapo pffs btns>btn:first-child svg { fill: var(--b); } sapo ff dppic {display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%); position: relative; padding: 6px; height: 144px; width: 144px;} sapo dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } sapo ff {grid-template-rows: auto auto; display: grid; padding: 11px 11px 1px 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset;} sapo mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } sapo ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } sapo ff bd bl:nth-child(1) { display: grid; grid-template-columns: 177px auto; margin-left: 22px; } sapo ff bd btn { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; place-content: center; } sapo h1>name { display: flex; align-items: center; white-space: nowrap;font-size: 2.22rem; } sapo pffs { display: block; background: var(--bt); margin-bottom: 11px; } sapo pffs ff ft expnd svg { transform: rotate(-90deg); } sapo pffs ff>ft>bl mb {display: flex; margin: 0; align-items: center; gap: 22px;} sapo pfinfo upld h5 { font-weight: 100; } sapo pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } sapo oppffs ff ft op{ display: none; } sapo pffs bd btn h6 { font-weight: 400; } sapo pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } sapo pffs opp { display: none; background: var(--b); border-radius: 11px; position: absolute; right: 0; width: 280px; padding: 11px; top: 56px; transition: 333ms; z-index: 99999999999; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); } sapo mg>a>i { height: auto; width: auto; margin-top: 2px; } sapo pffs ff>ft>bl {display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 11px; border-bottom: 1px solid var(--bc);padding: 11px 0;} sapo ff mb aa { display: flex; padding: 8px; margin: 0 6px; font-weight: bold; transition: 33ms; height: auto; margin-top: 1px; position: relative; align-items: center; font-size: 0.88em; opacity: 0.9; } sapo ff mb aa>i { margin-top: 7px; } sapo expnd svg { height: 22px; width: 22px; } sapo pffs bd btn t { display: flex; justify-content: center; align-items: start; margin-bottom: 3px; font-weight: 500; opacity: 0.9; font-size: 0.77em; } sapo pffs btns i { height: 17px; width: 17px; margin: auto; } sapo ff bl ft op { display: none; } sapo ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } sapo cover upld h5 { font-weight: 100; } sapo bl op svg { height: 22px; width: 22px; margin: auto; } sapo pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } sapo inf bd b {margin-top: 7px;font-weight: 500;} sapo h1>name i { height: 22px; width: 22px; } sapo ff inf btn {width: auto; border-radius: 44px; padding: 7px 22px; height: auto; display: unset; font-size: 0.88rem;} sapo ff inf btns { margin-top: 11px; } sapo cino bd a img { height: 44px; width: 44px; border-radius: 44px; } sapo cino bd { display: grid; grid-auto-flow: column; width: fit-content; margin-left: auto; gap: 11px; } sapo cino hd h3 { font-weight: 500; } sapo cino bd aa { height: fit-content; border: solid 1px var(--c); padding: 7px 16px; border-radius: 44px; text-align: center; color: var(--a); font-weight: 500; } sapo pfmgr t { font-weight: 600; } cchnvi {display: block; height: max-content; width: 100%; max-width: 333px; min-width: 354px; max-height: 100%; min-height: 100%; position: relative;} cchnvi i { height: 100%; width: 100%; } cchnvi img { height: 100%; width: 100%; border-radius: 16px; } cchnvi bd h3 {font-weight: 500; font-size: 1rem;overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} ccshot {display: block; max-width: 222px; min-height: 100%; height: 100%; min-width: 144px; position: relative; max-height: 100%; width: 122px;} ccshot hd { display: grid; } ccshots { display: flex;overflow: hidden; overflow-x: scroll;padding-bottom: 11px;border-bottom: 1px solid var(--bc);} ccshot hd i { height: 100%; } ccshot hd img { height: 100%; width: 100%; border-radius: 16px; object-fit: cover; display: grid; } ccshot bd h3 { font-weight: 500; font-size: 1rem;overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} ccshot ft d {font-size: 0.8rem; padding: 0 7px;} cchnvis ft d {font-size: 0.8rem; display: flex; padding: 0 11px;} cchnvist{display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc);padding: 11px 0;} cchnvist ft d {font-size: 0.8rem; display: flex; padding: 0 4px; margin-top: 4px;} cchnst {display: block; height: max-content; width: 100%; max-width: 194px; min-width: 222px; max-height: 100%; min-height: 100%; position: relative;} cchnst i { height: 100%; width: 100%; } cchnst img { height: 100%; width: 100%; border-radius: 16px; } cchnst bd h3 {font-weight: 500; font-size:0.88rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} cchnst bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between; grid-template-columns: auto 33px;align-items: start;} cchnst bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } cchnst bd btn svg { height:18px; width:18px; } cchnvin{display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 16px; padding-top: 7px;} cchnvin ft d {font-size: 0.8rem; display: flex; padding: 0 11px;} cchnstn {display: grid; width: fit-content; max-width: fit-content; min-width: 222px; position: relative; grid-template-columns: auto auto; max-height: 238px; height: fit-content;} cchnstn i { height: 100%; width: 100%; } cchnstn img { height: 100%; width: 100%; border-radius: 16px; } cchnstn bd h3 {font-weight: 500; font-size: 0.88rem; overflow: hidden; -webkit-line-clamp:1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 11px;} cchnstn bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between;align-items: start;} cchnstn bd btn { display: flex; height: auto; justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; width: fit-content; font-weight: 600; font-size: 1rem; } cchnstn bd btn svg { height:18px; width:18px; } cchnstn hd{display: grid; max-width: 333px; max-height: 238px; min-width: 424px;} cchnstn bd chli h3 { display: grid; } cchnstn bd chli h3 a { font-weight: 600; color: var(--a); } @media screen and (max-width: 999px) { ccshot hd i { height: 100%; min-width: 122px; position: relative; min-height: 172px; max-width: 75px; width: auto; } cchnvin {display:none;} sapo pffs ff>ft>bl mb { overflow: scroll; width: 100%; padding: 11px 0; } sapo pfmgr { display: grid; } } sapo sho { display: grid; grid-template-columns: 22px auto; font-size: 1.11rem; font-weight: 700; padding: 11px 0; gap: 7px; } sapo footer h1>name { font-size: 1.22rem; font-weight: 500; margin-bottom: 7px; } sapo chnrt bd a { font-weight: 500; } chnrt ft btn { padding: 10px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; } sapo footer { margin: 0; margin-bottom: 44px; } sapo footer bl { box-shadow: unset; } sapo chnrt hd i { height: 122px; width: 122px; margin: auto; border-radius: 88px; overflow: hidden; } cchnvi bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between; grid-template-columns: auto 33px;align-items: start;} cchnvi bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } cchnvi bd btn svg { height:18px; width:18px; } @media screen and (max-width: 999px) { sapo cpss> d { display: grid; } sapo h1>name { font-size: 1.55rem;margin-top: 11px;} sapo ff bd bl:nth-child(1) {grid-template-rows: auto auto; margin: 0 11px; grid-template-columns: unset;} sapo ff dppic { height: 99px; width: 99px; } sapo cino bd a img { height: 33px; width: 33px; } sapo cino bd { gap: 7px; } sapo footer chnrt { grid-template-rows: 40% auto auto auto ; grid-template-columns: unset; gap: 11px; } sapo ff>bd { padding-top: 11px; } cchnvi { min-width:288px; } ccshot { min-width: 144px; margin: 4px;} } /* Channel */ /* Channels */ skrb {display: grid; max-width: 222px; width: 100%; min-width: 200px; text-align: center; position: relative; padding: 16px 0; background: var(--bc); border-radius: 11px; box-shadow: var(--bs); justify-content: center; margin: 7px;} skrb ft { display: grid;margin: auto; } skrb bd h3 { margin-top: 7px; } skrb bd p {font-size: 0.99rem; font-weight: 600; margin: 7px 0;} skrb hd i { height: auto; } skrb btn {padding: 7px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; position: relative; z-index: 99999; transition: 222ms;} skrb btn:hover { transform: scale(0.95); background: linear-gradient(222deg, var(--a), var(--aa)); } channels mt hd a { display: grid; align-items: center; height: 44px; width: auto; margin: auto; grid-template-columns: auto 44px; font-size: 1.55rem;padding-top:11px; } channels { display: grid; background: var(--b); } channels mt hd a svg { height:26px; width:26px; } @media only screen and (max-width: 999px){ skrb {max-width: 188px; min-width: 166px; margin: 0 11px;} channels mt hd a { padding: 0 11px; font-size: 1.22rem; } channels mt hd a svg { height: 22px; width: 22px; } } /* Channels */ ccmpso btns { cursor: pointer; } ccmpso time {text-align: unset; } ccmpso hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } ccmpso { display: grid;margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; border: solid 1px var(--bc);max-width: 882px;} ccmpso faqs user { display: grid; grid-template-rows: auto auto auto; width: 95%; margin: 7px auto; background: var(--bt); border-radius: 11px; position: relative; overflow: hidden; border: solid 1px var(--bt); } ccmpsofaqs upostser actn>adc { display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--aa); background: var(--aat); border-radius: 7px; font-size: 0.88em; } ccmpso comant { display: grid; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } ccmpso hd ft>i:active { background: var(--bc); } ccmpso hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } ccmpso hd d bd { text-align: justify; font-size: 0.88em; } ccmpso >bd {display: grid; background: unset; margin: auto 33px;width: fit-content;} ccmpso >bd i { margin: auto; height: auto; } ccmpso trc ft { display: flex; justify-content: end; } ccmpso ft btn {display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 5px; margin: 4px; align-items: center; padding: 7px; font-weight: 500;} ccmpso ft btn i { height: 28px; width: 28px; } ccmpso ft t { width: auto; margin: 0; font-size:1em; text-align: center; } ccmpso p { font-size: 11px; margin: 0; } ccmpso dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} ccmpso> hd i{display: flex; align-items: center; justify-content: center; padding: 7px; height: 44px; width: 44px; border-radius: 44px;} ccmpso trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: start; margin-bottom: 11px; } ccmpso time { display: block; width: auto; float: unset; } ccmpso name { font-size: 1em; font-weight: 500; } ccmpso>ft btns {display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; margin-top: 7px; width: fit-content; margin-left: 33px;} ccmpso trc bd h4 { display: flex; gap: 7px; font-size: 1.11rem; align-items: center; } ccmpso time { display: block; width: auto; float: unset; font-size: 0.9rem; } ccmpso trc bd h3 a { color: var(--a); } ccmpso trc bd h3 { overflow: hidden; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; } ccmpso >bd i img {height: 100%; width: 100%; border-radius: 22px; min-width: 666px; min-height: 333px; max-height: 666px; max-width: 555px;} @media screen and (max-width: 999px) { ccmpso >bd i img { min-width: 333px; } ccmpso ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } ccmpso ic i:last-child { display: none; } ccmpso trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } ccmpso name { font-size: unset; } ccmpso time { font-size: 0.77em;} ccmpso hd i { background: unset; height: auto; width: auto; } ccmpso comant bd { height: auto; } ccmpso ic { display: none; } ccmpso comant bd d { grid-template-columns: 100%; } ccmpso comant { grid-template-columns: 43px auto; gap: 1%; } ccmpso ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } ccmpso gp bb { font-size: 0.88em; } ccmpso { padding: 11px; margin: 11px 0;width:auto; } ccmpso >bd { height: auto;margin: 0 11px; } ccmpso us { padding: 0; } ccmpso msg { padding: 11px; } ccmpso ft t { text-align: unset; } ccmpso ft btn i { height: 20px; width: 20px; } ccmpso trc bd h3 { font-size: 1rem; } ccmpso>ft btns { margin-left: 7px; } } cchnpca { display: block; height: max-content; width: 100%; max-width: 200px; min-width: 188px; max-height: 100%; min-height: 100%; position: relative; padding: 11px; } cchnpca i { height: 100%; width: 100%; } cchnpca img { height: 100%; width: 100%; border-radius: 16px; } cchnpca bd h3 {font-weight: 500; font-size: 1rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 7px;} cchnpca bd {display: grid; padding: 0 4px; height: fit-content; justify-content: space-between; align-items: start;} cchnpca bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } cchnpca bd btn svg { height:18px; width:18px; } cchnpca chp {position: absolute; height: 100%; top: -4px; bottom: 0; z-index: -1; background-color: #1c4c7a; width: calc(100% - 16px); left: 8px; right: 8px; border-radius: 12px;} cchnpca chpp {position: absolute; height: 100%; top: -8px; bottom: 0; z-index: -2; background-color: #f77d6d; opacity: 50%; width: calc(100% - 24px); left: 12px; right: 12px; border-radius: 12px;} cchnpca hd { position: relative; } /*videos*/ videos .aerea { display: grid; grid-template-columns: 30% 70%; gap: 16px;margin-top: 11px;} videos main, videos sidebar { max-width: unset; width: auto; } /*videos*/ @media screen and (max-width: 999px) { cths ctho { height: 90px !important; } cths ctho slc { height: 40px; width: 40px; } } emoji {display: none; position: absolute; z-index: 1; left: 0; bottom:5%; width: 100%; overflow: auto; z-index: 99;} emoji bl{display:block;background-color: var(--b); margin: 15% auto; padding: 20px; border: 1px solid var(--bor); width: 80%; max-width: 600px;border-radius: 7px;} .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; margin-left: auto;} .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } emoji bd { display: flex; flex-wrap: wrap; gap: 10px; } emoji em{ font-size: 24px; cursor: pointer; padding: 5px; border: 1px solid transparent; border-radius: 4px;font-style: normal; transition: 333ms;} emoji em:hover { border: 1px solid #ddd; background-color: #f0f0f0; } emoji em:active { transform: scale(0.9); } .emoji emoji { display: block;} videos main { position: relative; } crvo bl ft { position: absolute; } cdmo h2 { font-weight: 500; } .csvo csvo { display: grid; } cdnlod { display: none; background: var(--b); max-width: 450px; max-height: 450px; margin: auto; border-radius: 11px; padding: 11px; padding-top: 22px; font-weight: 500; position: absolute; top: 40%; left: 25%;z-index: 999;} cdnlod p a { font-weight: 400; color: var(--a); } cdnlod p { margin: 22px 0; font-size: 1.11rem; font-weight: 400; } cdnlod input { height: 20px; width: 20px; } cdnlod psize h3 { font-weight: 400; font-size: 1.11rem; } cdnlod psize { display: grid; grid-template-columns: 33px auto; align-items: center; margin-top: 22px; } cdnlod bd> h3 { margin-top: 22px; font-weight: 400; font-size: 1.22rem; } cdnlod h1 { font-weight: 700; } cdnlod hd { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 0 22px; } cdnlod hd i { height: auto; } cdnlod bd { padding: 0 22px; } cdnlod ft btn { display: flex; color: var(--a); padding: 11px; line-height: 1; border-radius: 44px; } cdnlod ft btns { display: flex; align-items: center; } cdnlod ft { display: grid; justify-content: end; } cdnlod ft btn:nth-child(2) { background: var(--a); color: var(--b); } .cdnlod cdnlod { display:grid;} @media screen and (max-width: 999px){ cdnlod { top: 64%; width: auto; left: 0; } } /*Albums*/ cosog {display: grid; max-width: 222px; padding: 11px; min-width: 166px; position: relative;;} cosog hd { display: grid; margin: auto; } cosog hd i { max-width: 216px; max-height: 216px; display: grid; height: auto; } cosog hd img { border-radius: 7px; } cosog ft { display: grid; grid-template-columns: 18px auto auto auto; align-items: center; width: fit-content; font-weight: 500; font-size: 0.88rem; margin-top: 7px; gap: 4px; } cosog ft svg { height: 18px; width: 18px; } cosog bd { margin-top: 11px; } cosog bd h3 { line-height: 1; font-weight: bold; font-size: 1rem; } calbo rms {display: flex; width: 100%; overflow: scroll; background: var(--b); border-radius: 11px; padding: 0 7px;} calbo> hd b btn { border-radius: 44px; border: solid 1px; height: 28px; width: 28px; display: grid; margin: auto; justify-content: center; align-items: center; } calbo> hd b btn i { height: auto; } calbo> hd b btn svg { height: 22px; width: 22px; } calbo> hd b .btn { opacity: 0.44; transform: rotate(180deg); } calbo>hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 11px; } calbo> hd h3 { font-size: 1.22rem; } calbo> hd a { font-weight: 500; font-size: 0.88rem; border: solid 1px; padding: 7px 11px; border-radius: 44px; line-height: 1; } calbo> hd b { display: grid; grid-template-columns: auto 33px 33px; align-items: center; gap: 7px; } /*Albums*/ /* Albums componenet hover system */ cosog ply {display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:linear-gradient(168deg, var(--bt), var(--0)51%); border-radius: 6px; flex-direction: column; justify-content: space-between; padding: 11px; opacity: 0;} cosog ply dot btn { display: grid; height: 33px; width: 33px; border-radius: 55%; justify-content: center; align-items: center; position: relative; z-index: 999; } cosog ply dot { display: flex; justify-content: end;} cosog ply i { display: flex; height: 18px; margin: 0; width: 18px; } cosog ply py { display: flex; justify-content: end;} cosog hd { display: grid; margin: auto; position: relative; } cosog ply dot btn:hover { background: var(--bc); } cosog ply py btn {background: var(--b-t44); display: grid; justify-content: center; align-items: center; border-radius: 55%; padding: 8px; transition: 222ms; position: relative; z-index: 9999; } cosog ply py btn:hover { transform: scale(1.2); background: var(--b-t77); } cosog:hover ply { opacity: 1; } csvsh {display: none; position: absolute; right: -72%; top: 20%; max-width: 222px; min-width: 177px; z-index: 99; border-radius: 7px; background: var(--b);} csvsh btn { display: grid; grid-template-columns: 33px auto; align-items: center; height: 33px; padding: 7px; } csvsh btn h3 { font-size: 1rem; font-weight: 400; } .csvsh csvsh {display: grid;} /*Albums*/ album .aerea { flex-direction: unset; } bgimgs {position: absolute; width: 90%; height: 30%; display: grid; max-width: 1599px; justify-content: space-between; grid-template-columns: 18% 26%; max-height: 248px; margin: auto; z-index: -1; filter: blur(100px);} bgimgl { position: relative; z-index: -1; filter: blur(122px); margin-right: auto; width: 100%; height: 100%; max-height: 222px; } bgimgr { z-index: -1; filter: blur(122px); position: relative; width: 100%; margin-left: auto; object-fit: cover; max-height: 222px; } alsngs {display: grid; justify-content: center; margin: auto; background: var(--b-t22); padding: 0 10%; padding-top: 11%; margin-top: 11px; border-radius: 11px;} alsngs hd { display: flex; flex-direction: column; align-items: center; } alsngs id { display: grid; grid-template-columns: 25px auto; align-items: center; height: fit-content; margin: auto; padding: 11px 0; gap: 7px; } alsngs id i { height: auto; border-radius: 44px; } alsngs id img { border-radius: 44px; } alsngs soni i { height: auto; } alsngs soni img { border-radius: 7px; } alsngs soname { font-size: 1.33rem; font-weight: 700; margin: auto; width: fit-content; display: grid; } alsngs tp { display: grid; grid-template-columns: 18px auto auto auto; align-items: center; width: fit-content; font-weight: 500; font-size: 0.88rem; margin: auto; margin-top: 7px; gap: 4px; } alsngs bd { display: grid; margin: auto;text-align: center;} alsngs time { font-weight: 500; font-size: 0.88rem; } alsngs p { font-size: 0.9rem; font-weight: 500; margin: 0; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1; margin-top: 7px; }lsngs bd { display: grid; margin: auto; text-align: center; } alsngs>ft {display: grid; grid-template-columns: auto auto auto; padding: 22px; align-items: center; height: fit-content; justify-content: space-between; width: 80%; margin: auto;} alsngs ft sv { display: grid; background: var(--bc); align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 44px; } alsngs ft play { display: grid; background: var(--b); align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 44px; } alsngs ft play svg { height: 33px; width: 33px; } alsngs ft dot { display: grid; background: var(--bc); align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 44px;transform: rotate(90deg); } csonss {display: grid; padding: 11px; padding-top: 6%; margin-top: 11px; border-radius: 11px 11px 0 0; background: var(--b-t22);} csonss bl {display: grid; grid-template-columns: 44px max-content auto max-content; align-items: center; padding: 7px; gap: 11px; margin: 4px; position: relative;border-radius: 7px;} csonss bl hd { display: grid; text-align: center; } csonss bl h3 { font-weight: 500; font-size: 1.11rem; opacity: 0.88; } csonss bl bd { display: grid; gap: 4px; } csonss bl bd h3 { opacity: 1;} csonss bl p { margin: 0; } csonss bl ft { margin-left: auto; } csonss lik {display: grid; grid-template-columns: 38px 38px 38px; align-items: center; margin-left: auto; padding: 0 11px; gap: 7px; opacity: 0;position: relative;z-index: 9999999;} csonss lik svg { width: 24px; height: 24px; } csonss hov input { height: 22px; width: 22px; margin-left: auto; } csonss hov { display: grid; grid-template-columns: auto 33px; justify-content: space-between; position: absolute; top: 0; bottom: 0; left: 14px; right: 14px; align-items: center; opacity: 0;z-index: 99;} csonss hov svg { height: 22px; width: 22px; } csonss bl:hover hd { opacity: 0; } csonss bl:hover hov { opacity:1; } csonss bl:hover ft { opacity: 0; } csonss bl:hover lik { opacity: 1; } @media screen and (max-width: 999px){ csonss bl bd h3 { white-space: nowrap; width:122px; overflow: hidden; text-overflow: ellipsis;} csonss bl p { margin: 0; white-space: nowrap; width:122px; overflow: hidden; text-overflow: ellipsis; } csonss bl { grid-template-columns: 33px max-content auto max-content; padding: 7px 0; } csonss lik { grid-template-columns: 25px 25px 25px; } csonss { padding: 11px 0; } csonss bl h3 {font-size: 1rem; } csonss hov { left: 0px; right: 0px; } } albsngs {display: flex; width: auto; overflow: scroll; background: var(--b-t22); padding: 11px;} albsng bl { display: grid; max-width: 155px; min-width: 124px; margin: 4px 11px; } albsng hd i { height: auto; margin-bottom: 7px; } albsng hd img { border-radius: 7px; } albsng bd h3 { overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1; font-weight: 500; font-size: 16px; } albsng bl p { margin: 0;font-weight: 500; } albsng {padding: 11px 7px; background: var(--b); margin: 4px; border-radius: 7px; position: relative;} /*hover*/ albsng bl ply {display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background:linear-gradient(168deg, var(--bt), var(--0)51%); border-radius: 6px; flex-direction: column; justify-content: space-between; padding: 11px; opacity: 0;} albsng bl ply dot btn { display: grid; height: 33px; width: 33px; border-radius: 55%; justify-content: center; align-items: center; position: relative; z-index: 999; } albsng bl ply dot { display: flex; justify-content: end;} albsng bl ply i { display: flex; height: 18px; margin: 0; width: 18px; } albsng bl ply py { display: flex; justify-content: end;} albsng bl hd { display: grid; margin: auto; position: relative; } albsng bl ply dot btn:hover { background: var(--bc); } albsng bl ply py btn {background: var(--b-t44); display: grid; justify-content: center; align-items: center; border-radius: 55%; padding: 8px; transition: 222ms; position: relative; z-index: 9999; } albsng bl ply py btn:hover { transform: scale(1.2); background: var(--b-t77); } albsng:hover ply { opacity: 1; } csonss bl:hover { background: var(--b-t22); } /*song*/ ssno iframe { width: 100%; height: 100%; min-width: 444px; min-height: 444px; border-radius: 7px; } @media screen and (max-width: 999px){ ssno iframe{min-width: 100%;min-height: 333px;} csso> bd { display: grid; width: 100%; } } /*song*/ cslgo {display: grid; text-align: center; padding: 22px; margin: 7px auto; width: 90%; position: relative; border-radius: 11px; grid-template-columns: auto 35%; background: linear-gradient(333deg, #3770ec, #001b78); align-items: center;} cslgo bd { display: grid; height: fit-content; } cslgo h3 {font-weight: 500; letter-spacing: 8px; font-size: 1.66rem; line-height: 1; color: #FDC302; text-shadow: 3px 0px 3px #272521;} cslgo h2 { font-size: 30px; font-weight: 800; color: var(--b); font-family: sans-serif; text-shadow: 3px 0px 3px #272521;} cslgo p { margin: 0; font-size: 13px; font-weight: 500; color: var(--b); text-shadow: 3px 0px 3px #272521;} cslgo hd, cslgo bd, cslgo ft { position: relative; z-index: 999; } cslgo bg { background: #0000006e; } sslgo header { position: unset; } cslgo bd i { height: auto; } csbnd input {border: solid 1px var(--bor); border-radius: 7px; height: 36px; width: -webkit-fill-available; font-size: 14px; font-weight: 500; background: #fafafa;} csbnd { display: grid; margin: 11px; position: relative; z-index: 9999; background: var(--b); padding: 22px; border-radius: 11px; } csbnd sl {background: var(--0); height: auto; border-radius: 0; margin-bottom: 22px;} csbnd sl input:focus { box-shadow: unset; border-radius: 7px; border: solid 1px; } csbnd sl h4 {display: flex; font-weight: 400; font-size: 1rem; margin-bottom: 7px;} csbnd ft btn {background: var(--btn); display: grid; text-align: center; padding: 7px; border-radius: 7px; height: 22px; color: var(--b); margin: 7px 0;} csbnd sl select { border: solid 1px var(--bor); border-radius: 7px; height: 36px; width: -webkit-fill-available; font-size: 14px; font-weight: 500; background: #fafafa; padding: 0 11px; } cfaq {display: grid; padding: 22px; margin: 11px auto; background: var(--b); border-radius: 11px;} cfaq bd { display: grid; border: solid 1px var(--bor); margin: 11px 0; } cfaq tx { display: flex; align-items: center; padding:11px; border-bottom: solid 1px var(--bor); gap: 7px; } cfaq tx i { height: 22px; width: 22px; } cfaq tx h4 { font-size: 0.9rem; font-weight: 500; } cfaq tx p { margin: 7px 0; font-size: 13px; } cfaq hd h3 { font-size: 20px; font-weight: 600; } csao hd det h3 span { margin-right: 6px; } /* stories */ sstors main {width: auto; max-width: unset; display: grid;} sstors aerea { display: grid; align-items: center; } sstors main d.main {overflow: hidden; overflow-x: scroll;} cstors { display: grid; position: relative; transform: scale(0.66); transition: 999ms; max-width: 366px; max-height: 666px; width: 100%; height: 100%; border-radius: 7px; object-fit: cover; } cstors> hd {display: grid;grid-auto-flow: column; align-items: center;} cstors> hd i { height: 100%; position: relative; min-height: 210px; } cstors> hd img { height: 100%; width: 100%; border-radius: 16px; object-fit: cover; display: grid; } cstors ft d { font-size: 0.8rem; padding: 0 7px; } cstors video { min-width: 366px; min-height: 666px; width: 100%; height: 100%; border-radius: 7px;object-fit: cover;} cstors.this{ transform: scale(1);} cstorss { display: grid; grid-auto-flow: column; width: fit-content; } cstors> bd { display: block; padding-bottom: 0; position: absolute; top: 22px; bottom: 22px; left: 11px; right: 11px; } cstors stnam { display: none; flex-direction: column; justify-content: space-between; height: 100%; } lins { display: grid; height: 2px; width: 100%; grid-auto-flow: column; gap: 2px; } lin { background: rgb(255 255 255 / 51%); display: grid; border-radius: 22px; } ln { background: var(--b); } cstors stnam stid{display:grid;grid-template-columns: 33px auto auto; align-items: center; gap: 7px;color: var(--b); padding: 11px 0; } cstors stnam stid h3 { font-weight: 500; font-size: 0.99rem; } cstors stnam stid h3 span { margin-left: 4px; opacity: 0.77; } cstors stnam stid ft { display: grid; grid-template-columns: 33px 33px 33px; align-items: center; margin-left: auto; } cstors stnam stid img { border-radius: 44px; } cstors stnam stid p { margin: 0; font-size: 0.77rem; font-weight: 700; } stnam .sudoff:after { content: ''; position: absolute; height: 22px; width: 2px; background: white; z-index: 9999; transform: rotate(138deg); top: -2px; box-shadow: 1px -1px 1px 1px #000; border-radius: 20px; } cstors stnam ft { display: grid; grid-template-columns: auto 33px 33px; align-items: center; } cstors stnam ft input::placeholder { color: var(--b); } cstors stnam ft input { font-size: 0.66rem; border-radius: 44px; height:42px; background: var(--0); border: solid 1px var(--b); color: var(--b); } cstors stnam ft btn { display: grid; align-items: center; justify-content: center; position: relative; height: fit-content; grid-template-rows: auto 0; } cstors stnam ft svg { fill: var(--b); color: var(--b); } cstors stnam ft btn i { height: 28px; width: 28px; } cstors stnam ft btn i:nth-child(2){transform: scale(0);} stnam ft .like i:nth-child(2) {transform: scale(1);} stnam ft .like i:nth-child(1) { transform: scale(0); } cstors stnam ft .like { grid-template-rows: 0 auto; } stnam ft .like i:nth-child(2) svg { fill: #ff3040; } cstors.this stnam { display: flex; } cstors> ft { position: absolute; top:0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; display: grid; align-items: center; justify-content: center; text-align: center; background: var(--bor); color: var(--b); } cstors.this> ft {display: none;} cstors> ft nost { display: grid; } cstors> ft nost i { height: auto; } cstors> ft nost img { height: 101px; width: 101px; border-radius: 50%; } cstors> ft nost h2 { font-weight: 500; font-size: 1.11rem; } cstors> ft nost h4 { font-size: 0.9rem; font-weight: 500; } /* stories */ /* stories Share */ pstshr {position: absolute; z-index: 999999; top: 25%; right: 25%; background: var(--b);border-radius: 11px; min-width: 555px; max-width: 333px; max-height: 555px; display:none; flex-direction: column;} pstshr> hd { display: grid; } pstshr sha {display: grid; grid-template-columns: 55px auto auto; align-items: center; margin:7px 0;} pstshr sha p { margin: 0; } pstshr> hd sch input { height: 38px; padding: 0 20px; } pstshr> hd sch h3 { font-weight: 500; font-size: 1.11rem; } pstshr> hd sch { display: flex; align-items: center; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); padding: 0 11px;} pstshr> hd ct { display: grid; grid-template-columns: auto 44px; align-items: center; } pstshr> hd ct h3 { text-align: center; font-size: 1.11rem; font-weight: 500; } pstshr sha bd h4 { font-weight: 500;font-size: 0.88rem;} pstshr shas> h4 { font-weight: 500; padding: 7px 0; line-height: 1; } pstshr sha i {height: 44px; width: 44px;} .shmark:after { content: ""; position: absolute; display: none; } .shasl .shmark:after {left: 8px; top: 4px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .shasl input:checked ~ .shmark:after { display: block; } .shmark {position: absolute; top: -12px; height: 22px; width: 22px; border-radius: 44px; right: 0; border: solid 1px var(--bor);} .shasl input:checked ~ .shmark {background-color:var(--a); border-color:var(--a);} .shasl input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } pstshr> bd {display: grid; height: 100%; overflow-y: scroll; scrollbar-width: thin; padding:0 11px;} pstshr> bd shas { display: grid; height: 100%; } pstshr> bd shas label { opacity: 1; } pstshr> ft btn {display: grid; padding: 7px; text-align: center; background: var(--btn); color: var(--b); border-radius: 7px; margin: 8px; opacity: 0.44;height: 25px;} pstshr> ft { border-top: solid 1px var(--bc); } .pstshr bg { display: block; background: #000000b8; z-index: 4; } .pstsh{ display: none;} .pstshr pstshr{display: flex;} pstshr> ft input { height: 0; padding: 0 16px; transition: 333ms; } .this> ft input { height: auto; padding: 16px; } .this> ft btn { margin-top: 0; opacity: 1; } /* stories Share */ /* video */ cvinst hd t {position: absolute; display: flex; bottom: 11px; right: 11px; max-width: 23px; max-height: 16px; font-size: 12px; background: var(--c); color: var(--b); border-radius: 4px; padding: 0 4px; padding-bottom: 3px;} cvinst> hd { position: relative; } csao ccshot { margin: 0 4px; } scvido cveo ccshots bd { display: flex; } camo com hd h2 { font-weight: 600; font-size:1.11rem;} /* video */ csonss lik btn {height: 38px; width: 38px; align-items: center; display: grid; border-radius: 44px; } csonss lik btn:hover{ background: var(--b-t22); } csonss lik btn i { height: auto; } cpsolti h1 { margin-bottom: 11px; font-weight: 600; } /* pending */ album:after { position: absolute; height: 200px; width:288px; z-index: 9999; top: 40%; background-image: url(/0/IMG/pending.png); background-repeat: no-repeat; transform: rotate(45deg); left: 37%; } /* pending */ cmco img { object-fit: cover;} /* pricing */ spcio main { width: 100%; max-width: 100%; } cpril { display: grid; background: var(--c); color: var(--b); padding: 22px; } cpril hd {display: flex; gap: 15px; margin: auto; padding: 33px 0; padding-top: 22px;} cpril h1 { font-size: 2.66rem; } cpril btn { display: grid; grid-template-columns: auto 33px; width: fit-content; align-items: center; color: var(--a); } cpril btn h1 { border-bottom: solid;line-height: 1; } cpril btn i { transform: rotate(90deg); } cpril mb { margin: auto; display: flex;justify-content: center;} cpril mb a {color: var(--b); font-weight: 500; font-size: 1rem; padding:9px 16px; border: solid 1px; border-radius: 44px; margin: 0 7px; line-height: 32px;} cpril mb t { display: flex; line-height: 1; } cpril mb a:hover { color: var(--a); background: var(--b); border-color: var(--b); } cpril mb a.this { background: var(--a); border-color: var(--a); color: var(--c); } cinrupe> hd {display: grid; grid-template-columns: auto auto; width: fit-content; margin-left: auto; padding: 11px 0;} spcio header { position: unset; } /* pricing */ /* Chat GPT */ .custom-select { position: relative; display: inline-block; margin: 0 22px;} .custom-select select { display: none;} .select-items div, .select-selected {padding: 7px 10px; cursor: pointer; background-color: #fff; display: grid; grid-template-columns: 22px auto; align-items: center; font-size: 0.88rem; font-weight: 700; color: var(--b); border-radius: 6px;} .select-items {position: absolute; background-color: #fff; border: 1px solid #ccc; z-index: 99; width: 100%; display: none; padding: 4px; margin: 4px 0;} .select-items div img {width: 18px; height: 18px; margin-right: 10px; border-radius: 44px;} .select-items div:hover { background-color: #f1f1f1; } .select-selected { padding:7px 11px; color: var(--c); } .select-selected img { width: 18px; height: 18px; margin-right: 10px; border-radius: 44px; } .select-items div { background: var(--a); border-radius: 9px; margin: 2px; width: max-content; } /* Chat GPT */ cmplnn {display: grid; max-width: 188px; max-height: 537px; background: var(--b); box-shadow: var(--bs-bt); padding: 22px; padding-top: 33px; border-radius: 22px; margin: 4px; margin-bottom: 11px; min-width:200px; grid-template-rows: 44px auto; height: 659px;} cmplnn mru {display: grid; grid-template-columns: 18px auto auto; width: fit-content; align-items: start; padding: 4px 0;} cmplnn h4 span { font-weight: 400; font-size: 12px; margin-left: 4px; } cmplnn mru i { height: 11px; width: 11px; margin: 1px; } cmplnn mru h4 {font-size: 14px; font-weight: 500;} cmplnn bd> btn {padding: 11px 22px; display: grid; border: solid 1px; color: var(--a); border-radius: 44px; width: fit-content; line-height: 1; margin: 22px 0;font-weight: 500;} cmplnn bd h2 {font-size: 32px; font-weight: 500; margin: 19px 0; display: flex; align-items: start; line-height: 1;} cmplnn> hd { display: flex; flex-wrap: wrap; align-items: start; } cmplnn> hd span { font-size: 12px; margin-left: 4px; font-weight: 500; color: var(--c0); } cmplnn> hd h3 {font-size: 1.33rem; color: var(--a); font-weight: 500; line-height: 1;} cmplnn h4 btn { background: var(--bc); padding: 2px 9px; margin: 4px; color: var(--a); font-weight:700; border-radius: 4px; line-height: 1; } cinrupe> bd {display: flex; gap: 11px; align-items: end; overflow: scroll;} cinrupe> bd cmplnns { display: grid; background: linear-gradient(179deg, rgba(0, 255, 145, .19) 1.21%, rgba(0, 255, 145, .08) 98.8%); border: 1px solid #00ff91; padding: 11px; border-radius: 22px;padding-bottom: 0;} cmplnns> bd { display: flex; } cmplnns> hd p { display: flex; justify-content: center; } cmplnn bd h2 span {font-size: 14px; font-weight: 700; margin: 0 4px; margin-bottom: auto; margin-top: 7px; } cmplnn .ai h4 { display: flex; align-items: center; } cmplnn.this bd> btn { color: var(--b); background: var(--a); border-color: var(--a); } cmplnn bd h5 { font-weight: 500; font-size: 11px; display: grid; color: var(--c0); } cinrupe> ft btn {display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px;} cinrupe> ft { margin-top: 33px; } cinrupe> ft btn i {filter: invert(1); height: 20px; width: 20px;} cinrupe> ft h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } monthlyplan { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; } cenjoy { border-radius: 20px; margin-bottom: 140px; display: grid; grid-template-columns: 50% 49.4%; background: linear-gradient(135deg, #d2ffbd, #41e48a); position: relative; height: 413px; overflow: hidden; gap: 7px;align-items: center;} cenjoy hd { padding-left: 66px; } cenjoy hd h3 { font-size: 2rem; font-weight: 500; margin-bottom: 16px; } cenjoy hd p { font-size: 1rem; margin: 0; margin-bottom: 16px; } cenjoy bd i { height: 413px; background-position: 100%; border-radius: 20px; background: url(/0/IMG/pricingEnjoy.svg); background-size: cover;} cenjoy bd { width: 90%; margin-left: auto; } cenjoy hd btn { padding: 10px 16px; background: var(--btn); border-radius: 44px; line-height: 1; display: grid; width: fit-content; color: var(--b); } cejoyt { display: inline-grid; background: -webkit-gradient(linear, left top, right top, from(#b5d0f8), color-stop(34%, #b5d0f8), color-stop(34%, #00031f), to(#00031f)); height: 388px; grid-template-columns: 48% 48%; color: var(--b); position: relative; padding: 0 22px; gap: 22px; width:auto; margin-top: 44px;} cejoyt hd i { height: 100%; } cejoyt hd img { display: inline-block; text-align: center; position: absolute; bottom: -64px; height: 100%; top: -33px; border-radius: 16px; width: 100%; } cejoyt bd { width: 77%; float: right; position: relative; margin-top:88px; margin-bottom: 30px; display: grid; height: fit-content; } cejoyt bd p { font-size: 1.22rem; margin: 0; margin-bottom: 7px; } cejoyt bd span { font-size: 0.77rem; font-weight: 500; margin-bottom: 22px; } cejoyt bd btn { padding: 16px 30px; background: var(--btn); border-radius: 44px; line-height: 1; display: grid; width: fit-content; color: var(--b); font-weight: 500; } cejoyt bd:after { content: ''; position: absolute; background-image: url(/0/IMG/base.png); height: 33px; width: 33px; background-repeat: no-repeat; top: -26px; } cfno bl.this bd { display: grid; height: auto; padding: 22px; } cfno .this hd i { transform: rotate(180deg); } cfno .this bd p { font-size: 16px; } cfno .this hd { background: var(--b-t22); } @media screen and (max-width: 999px){ cpril { padding: 16px; } cpril h1 { font-size: 1.33rem; } cpril hd { padding: 9px 0; padding-top: 31px; } cpril bd { display: grid; overflow: scroll; } spcio main { margin: 0 16px; width: unset; } cpril mb a { width: max-content; } calfetus { overflow: scroll; } monthlyplan { display: grid; grid-template-columns: 50% 50%; } cenjoy { display: grid; grid-template-columns: unset; grid-template-rows: auto auto; padding: 22px; height: auto; } cenjoy bd { height: 200px; } cenjoy bd i {background-repeat: no-repeat; position: absolute; bottom: 0; height: 267px; width: 100%; right: 0; background-size: 90%; background-position: 100% 100%; border-radius: 0; } cenjoy hd { padding-left: 0; } cejoyt { grid-template-columns: unset; height: auto; width: auto; background: #00031f; grid-template-rows: auto auto; padding: 22px; gap: 0; padding-bottom: 40px; } cejoyt hd i { height: 222px; position: relative; z-index: 99; } cejoyt hd img { position: unset; margin: 11px; } cejoyt hd:after { content: ''; position: absolute; height: 30%; left: 0; background: #71a0ec; z-index: 0; top: 0; right: 0; } cejoyt bd { margin: 0; margin-top: 44px; width: auto; } cejoyt bd:after{top: -30px;} cenjoy hd h3 { font-size: 1.33rem; } } @media screen and (max-width:666px){ monthlyplan { display: block; } } webinars { display: grid; } spcio d.aerea { margin: 0; } webinars { display: grid; background: var(--b); padding: 16px; border-radius: 77px 77px; } spcio main .main { display: grid; background: var(--b); padding: 16px; border-radius:44px 44px 0 0; position: relative; } spcio main { position: relative; } webinars> hd bl { justify-content: space-between; } webinars bl hd { display: flex; align-items: center; } webinars> bd { display: flex;justify-content: center;} spcio main:after { content: ''; position: absolute; background: var(--c); height: 20%; left: 0; right: 0; top: 0; z-index: -1; } webinars> ft { margin-top: 33px; } webinars> ft btn { display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px; } webinars> ft btn i { filter: invert(1); height: 20px; width: 20px; } webinars> ft h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } scvido { background: var(--b-t22); display: grid; } cmcto bd .best{clip-path: polygon(0 0, 100% 0%, 93% 100%, 0% 100%); background:#c45601; padding: 3px 11px; color: var(--b);font-weight: 500;} cmcto bd .pri{font-size: 1.55rem; font-weight:500;} smcot size ds {color: #d5395d; font-size: 1.55rem; line-height: 1; font-weight:300;} cmcto bd p span { font-size: 0.77rem; margin: 0 2px; margin-top: 2px; line-height: 1; } cmcto .mrp b{font-size: 0.77em; font-weight: 600;} cmcto .mrp p{font-size: 0.77em; font-weight: 600; text-decoration: line-through; } smcot .mrp { color: var(--c0); } @media screen and (max-width:999px){ smcot main bl { padding: 22px 11px; } smcot size> b { display: none; } cmcto bd .pri { display: flex; font-size: 1.33rem; } smcot size ds { font-size: 1.22rem; } smcot .mrp b { display: flex; } cmcto { border-radius: 11px; } } couo {display: grid; margin-bottom: 11px; background: var(--b); border-radius: 7px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 38%), 0 0px 13px rgb(0 0 0 / 32%); position: absolute; width: 222px; padding: 11px; bottom: 20px; height: fit-content; transform: scale(0); z-index: 99999; text-align: start; left: 0px; right: 0; border-bottom-left-radius: 0;} calfetus td i:hover couo { transform: scale(1); } couo:after {content: ''; position: absolute; height: 13px; width: 13px; background: var(--b); bottom: -12px; left: 0px; clip-path: polygon(0 0, 49% 75%, 100% 0); z-index: 9999;} couo p { font-size: 14px; color: var(--c0); } spcio ft.view { margin-top: 33px; } spcio ft.view btn { display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px; } spcio ft.view btn i { filter: invert(1); height: 20px; width: 20px; } spcio ft.view h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } cnss bl i { height: auto; } cnss>bd bl { display: grid ; grid-template-columns: 33px auto; align-items: center; padding: 7px; border-radius: 5px; background: var(--bt); margin: 4px 5px; gap: 7px; box-shadow: 0 0px 5px 0px rgb(0 0 0 / 3%); } cnss { background: var(--bt); display: grid ; padding: 11px; border-radius: 11px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%);} cnss>bd { grid-template-columns: 33.33% 33.33% 33.33%; display: grid ; margin-top: 11px;} ccnss { background: var(--bt); display: grid ; padding: 11px; border-radius: 11px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%); margin-top: 7px; } ccnss>input { margin-top: 7px; border: solid 1px var(--bc); display: grid ; border-radius: 11px; } cslens bl hd ap { display: grid ; grid-template-columns: 40px auto; align-items: center; gap: 11px; } cslens hd bl { display: grid ; grid-template-columns: auto 40px; align-items: center; } cslens hd bl ap i { height: auto; } cslens>hd { padding: 11px; } cslens { border: solid 1px var(--bc); display: grid ; border-radius: 11px; margin-bottom: 7px; align-items: center; } cslco { display: flex ; justify-content: space-between; padding: 7px 11px; margin: 11px; background: var(--bc); border-radius: 11px; } cslco>bd i { height: 23px; width: 23px; background: var(--c); padding: 7px; } cslco>bd i svg { fill: var(--b); } cslco>bd { display: flex ; gap: 7px; align-items: center; } cslens>bd { height: 300px; overflow: scroll; } cslens.cscs>bd { height: auto; visibility: visible; opacity: 1; display: block; border-top: solid 1px var(--bc); height: 300px; overflow: scroll;} cslens>bd { display: flex; height: 0; transition: 333ms; opacity: 0; visibility: hidden; overflow: hidden; padding-top: 0; padding-bottom: 0; } ccnss ft btn { display: flex ; align-items: center; justify-content: center; padding: 7px; border: solid 1px var(--bc); border-radius: 7px; } fltr { display: grid ; grid-template-columns: 94% auto; align-items: center; justify-content: space-between; margin-bottom: 7px; } fltr>bl>hd { background: var(--b); padding: 11px; border-radius: 11px; display: grid ; grid-template-columns: 50% 50%; } fltr hd t { display: flex ; justify-content: center; } fltr bd>i { height: 20px; width: 20px; display: flex ; background: var(--aaa); padding: 7px; } fltr bd i svg { fill: var(--b); } csnts { background: var(--bt); display: grid ; padding: 11px; border-radius: 11px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%); margin-bottom: 7px; } csnts bd bb { position: relative; display: block; max-height: 30px; width: 44px; border-radius: 50px; border: solid 2px; transition: 333ms; box-shadow: unset; overflow: visible; top: unset; height: 21px; right: unset; background: var(--bc); padding: 2px; opacity: 0.9; border: 1px solid var(--bc); } csnts bd bl { display: flex ; justify-content: space-between; align-items: center; } csnts bd btn oo { display: block; height: 19px; width: 19px; background: var(--aaa); border-radius: 50%; position: absolute; transition: 333ms; color: #000; box-shadow: unset; margin: 1px; opacity: 0.8; } csnts .oo oo { margin-left: 23px; } csnts bd btn bo { box-shadow: inset 60px 0px 0px; color: var(--at); border-radius: 50px; padding: 0px; } csnts>ft btn { display: inline-flex ; padding: 11px 22px; background: var(--aaa); color: var(--b); height: auto; border-radius: 11px; margin-top: 11px; } csnts>bd { padding: 11px 0; } cmbot bd p { margin-block: 9px 4px; } cmbot hd p { display: grid ; grid-template-columns: 33px auto; align-items: center; font-size: 16px; column-gap: 11px; font-weight: 600; margin-block: 25px 1px; } smbo grid bl bd { padding: 0; } cmbot bd h1 { display: grid ; grid-template-columns: 83px auto; align-items: center; font-size: 16px; font-weight: 600; column-gap: 7px; } cmbot is { display: flex ; } cmbot ft { margin-block: 12px; display: flex ; column-gap: 18px; } cmbot btn { display: inline-flex ; background: var(--bc); padding: 6px 18px; border-radius: 6px; font-weight: 600; font-size: 0.77em; } cmbot btn:nth-child(2) { box-shadow: inset 0 0 0 2px var(--a); color: var(--a); background: transparent; } bio { background: var(--b-t); } smau sl input { background: var(--bc); } /* Coupons */ increasedcashback { display: block; margin: 22px 0; } /* Meeting_botHero */ cmhi mg img { height: 46px; margin: auto; } cmhi mg { height: max-content; margin: 0px; min-width: 0px; width: 100%; white-space: nowrap; display: flex ; flex-direction: row; overflow: scroll; padding-top: 22px; justify-content: center; } cmhi mg { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; } cmhi mg a.this { border-bottom: solid 3px; border-radius: unset; opacity: 1; } cmhi mg a.this t { font-weight: bold; } cmhi mg a {justify-content: center; white-space: nowrap; display: grid; font-size: 0.77em; font-weight: 100; text-align: center; padding: 0 11px; width: max-content;} cmhi mg a.dn { display: none; } cmhi mg a.dn { display: none; } smbo hero{position: relative;z-index:888;background: transparent;backdrop-filter:unset;border:unset} cmhi { display: block; background: var(--b); padding: 11px; } @media screen and (min-width: 999px) { cmhi mg i {height:66px;align-items:center;border-radius:16px;width:66px;display:grid;margin:auto; background:var(--bt);cursor:pointer;} cmhi mg t { margin: 7px auto; font-size: 11px; font-weight: 500; } cmhi mg svg { height: 55px; width: 55px; } } @media screen and (max-width: 999px) { cmhi mg t { margin: 11px auto; font-size:11px; } cmhi mg { padding-top:11px; } cmhi mg svg { width: 22px; max-width: unset; max-height: unset; height: 22px; } cmhi mg a i { width: 55px; margin: auto; } cmhi mg a { grid-template-rows: auto 22px; align-items: center; border-radius: 11px; display: flex; margin: 0 4px; background: var(--bt); border: solid 1px var(--b-t); padding: 0 7px; } } /* Meeting_botHero */ /* Meeting_Subscription*/ cmsco { display: flex ; justify-content: center; background: var(--bt); padding: 22px; margin: 4px; border-radius: 22px; flex-direction: column; } cmsco hd { display: block; } cmsco hd btn { position: relative; display: flex ; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; gap: 9px; } cmsco hd btn i { width: 24px; height: 24px; } cmsco hd btn i path { fill: var(--b); } cmsco hd btn t { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } /* Meeting_Subscription*/ /* Meeting_Subscription/New*/ /* Meeting_Subscription/New*/ /* Profile Update */ update>hd>h { display: grid; grid-template-columns: 55px auto 55px; text-align: center; padding: 11px; border-bottom: 1px solid var(--bc); align-items: center; } update>hd back { padding: 6px; height: 22px; width: 22px; border-radius: 55%; background: var(--bc); cursor: pointer; margin: 0 auto; } update>ft>btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); margin: 11px; border-radius: 5px; color: var(--a); font-weight: 500; cursor: pointer; } update { display: block; background: var(--bt); padding-bottom: 22px; margin: 11px; border-radius: 11px; } @media screen and (max-width: 999px) { update>hd>h { display: none; } update { margin: 11px; } } /* Dashboard/ Today.php */ no.flx { display: grid ; grid-template-columns: 111px 295px 222px 222px; grid-column-start: 3; grid-column-end: 7; width: 100%; margin: 0; padding: 22px; justify-content: center; align-items: center; grid-template-rows: unset; flex: none; column-gap: 2%; } no.flx>btns { display: flex ; align-items: center; } no.flx>btns>btn { height: 55px; display: flex ; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 333px; margin: 4px; font-weight: bold; cursor: pointer; min-width: 221px; position: relative; } no.flx>btns>btn:nth-child(2) { height: 55px; box-shadow: inset 0 0 0 3px var(--a); color: var(--a); background: transparent; } /* Footer */ /* web footer component */ cwfo { display: block; background: var(--bt); margin: 11px auto; max-width: 1100px; border-radius: 11px; padding: 22px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%); } cwblo links>bl>a { font-weight: 500; display: block; padding: 5px; margin-bottom: 5px; font-size: 0.88em; } cwblo links>bl>h4 { display: block; padding: 11px 4px; } cwblo>links { display: grid; grid-template-columns: 20% 20% 20% 40%; } cwblo links>bl>d { display: block; padding: 7px 0; margin: 7px 0; } cwblo links>bl>d>sl { display: flex; background: transparent; align-items: center; width: auto; margin: 0; } cwblo links d>sl>input { background: var(--bc); border-radius: 11px; width: 60%; font-size: 0.77em; font-weight: 500; letter-spacing: 0.44px; } cwblo links sl>btn { display: block; padding: 11px 22px; background: var(--aaa); color: var(--b); height: auto; margin: 0 11px; border-radius: 11px; } cwblo links>bl>d>i { height: 118px; width: 133px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%); border-radius: 11px; overflow: hidden; } cwblo links d>i { height: 100%; width: 100%; object-fit: cover; } cwblo links d p { margin: 0; margin-bottom: 6px; font-size: 0.77em; opacity: 0.9; } cwbao { background: var(--aaa); justify-content: space-between; color: var(--b); display: grid; grid-template-columns: 50% 50%; align-items: center; padding: 33px 22px; border-radius: 11px; position: relative; margin-top: 33px; } cwbao>bd { display: flex; justify-content: end; position: relative; } cwbao>bd>btn { display: block; padding: 15px 22px; background: var(--b); border-radius: 11px; color: var(--c); min-width: 39%; text-align: center; font-weight: 700; max-width: 39%; margin-left: auto; margin-right: 44px; } cwbao>bg { justify-content: end; background: url(/0/img/PIPcircule.png); opacity: 0.4; background-size: 100%; z-index: 0; } cwbao>hd>p { color: var(--b-t); } cwbao>hd>h2 { font-weight: 400; font-size: 1.44em; } cwblo>links>bl { display: block; margin: 7px; padding: 7px; } cwbao:before { content: ""; position: absolute; top: -99px; bottom: 0; right: 22px; height: 155px; width: 155px; background: url(https://zoooom.aliens.services/0/IMG/Vesion.png); background-size: 100%; display: block; z-index: 9; } @media screen and (max-width: 999px) { cwblo>links { grid-template-columns: 33% 34% 33%; } cwblo>links>bl:last-child { grid-column-start: 1; grid-column-end: 4; } cwbao { display: block; padding: 22px; } cwbao>bd { display: block; } cwfo { padding: 11px; margin: 7px; } cwbao>bd>btn { max-width: unset; margin: 0; } cwbao:before { display: none; } } @media only screen and (min-width: 999px){ main>* { margin: 0; } } smas main { width: 100%; max-width: unset; } sbko header { position: relative; } sbko d.aerea { display: flex ; flex-direction: column; } sbko main, sbso main { width: 100%; overflow: hidden; max-width: unset; } sbso header { position: relative; } smbs component>a { display: none !important; } component>* { margin: 11px; } setting bo { display: block; transition: 333ms; border-radius: 50px; } /* Gagan */ .btn_purple { background: #6C5DD3; color: #ffffff; } /* Component : Manager Support Call Details */ cdss div { display: block; background: var(--b); border-radius: 22px; overflow: hidden; } cdss bd bl { display: grid ; grid-template-columns: auto 0px auto; justify-content: space-between; background: transparent !important; box-shadow: unset; border-radius: 0; border-bottom: solid 1px var(--b-t); padding: 22px; transition: 99ms; } cdss bd hd { padding: 0; } cdss i { width: 44px; height: 44px; } cdss svg { fill: transparent; } cdss t { opacity: .7; font-size: 14px; letter-spacing: .5; margin-top: 3px; } cdss bd bl:hover { background: var(--b1t) !important; } cdss bd bl:last-child { border: unset; } pay.pay aerea { z-index: 9; top: 0; bottom: 0; left: 0; right: 0; position: absolute; } pay.pay sidebar { height: 0;overflow: hidden; } /* cofs */ cofs ofrs strt grid {grid-template-columns: 55px auto; align-items: center; padding: 16px; transition: 222ms; border: solid 1px var(--0); position: relative; margin-bottom: 4px;} cofs ofrs strt grid i { width: 44px; height: 44px; } cofs ofrs strt grid h5 { font-size: 0.88rem; font-weight: 600; } cofs ofrs strt { display: grid; border: solid 1px var(--bc); border-radius: 11px; position: relative; } cofs ofrs strt aa { cursor: pointer; } cofs ofrs strt grid h6 { font-size: 0.88rem; font-weight: 400; } cofs ofrs strt grid:after {content: ''; position: absolute; height: 20px; width: 14px; background: var(--0); right: -15px; top: 38%; clip-path: polygon(0 0, 100% 50%, 0 100%, 0% 100%, 1% 56%, 0% 0%);} .fashion .fson, .domains .web, .dining .food, .health .bety, .travel .tral, .tablets .mobl { background: var(--bc); box-shadow: 0px 0px 1px 1px var(--bor); } .fashion .fson:after, .domains .web:after, .dining .food:after, .health .bety:after, .travel .tral:after, .tablets .mobl:after { background: var(--bc); } trending cofs ofrs { display: grid; gap: 2%; grid-template-columns: 25% 73%; position: relative;width: 100%; } domains { display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .domains domains { display: grid; } dining { display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .dining dining{ display: grid; } fashion{ display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .fashion fashion{ display: grid; } health{ display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .health health{ display: grid; } travel{ display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .travel travel{ display: grid; } tablets{ display: none; grid-template-rows: 29px auto; border: solid 1px var(--bc); border-radius: 11px; padding: 11px; } .tablets tablets{ display: grid; } tablets> ft,travel> ft,health> ft,fashion> ft,dining> ft,domains> ft{display: flex; overflow: scroll;} tablets> bd,travel> bd,health> bd,fashion> bd,dining> bd,domains> bd {display: grid; padding: 11px; grid-template-columns: auto auto auto; align-items: center; height: fit-content; position: relative;} alofr offrs { display: flex; overflow: scroll; height: fit-content; width: 100%; } cpbtn { display: grid; } cpbtn btn {display: grid; width: 90%; padding: 4px; background: var(--btn); color: var(--b); border-radius: 7px; position: relative; font-size: 0.88rem; font-weight: 500; height: 33px; align-items: center; text-align: center;} cpbtn btb {position: absolute; top: 0%; padding: 7px; right: 0px; : 0; border: dashed 1px; z-index: -1; padding-right: 7px; font-size: 1rem; font-weight: 500; height: 25px; background: var(--bc); color: var(--c); border-radius: 6px;} alofr hd h3 { font-size: 1.11rem; font-weight: 600; } alofr trsto { display: flex; margin-top: 22px; width: 100%; } alofr trsto bl { display: grid; max-height: 111px; max-width: 222px; background: var(--b-t); border-radius: 11px; padding: 11px; position: relative; min-width: 155px; margin-right: 11px; min-height: 111px; } trsto bl hd i { position: absolute; top: -8px; width: fit-content; height: fit-content; left: 14px; } trsto bl hd img { height: 33px; width: auto; box-shadow: 0px 3px 7px 3px var(--bc); border-radius: 4px; background: var(--b); } trsto bl hd p { margin: 0; text-align: end; font-size: 0.66rem; font-weight: 500; } trsto zol { display: grid; grid-template-columns: 30px auto; align-items: center; height: fit-content; margin-top: 11px; } trsto zol i { height: 22px; width: 22px; } trsto zol p { font-size: 0.77rem; font-weight: 500; } trending .web { border-radius: 11px 11px 0px 0px; } alofr trsto bl:hover { background: var(--c); color: var(--b); } @media screen and (max-width: 999px) { trending .web {border-radius: unset; } cofs ofrs strt { display: grid; overflow: scroll; padding: 11px 7px; grid-auto-flow: column; height: fit-content; margin-bottom: 7px; border: unset; } .fashion .fson, .domains .web, .dining .food, .health .bety, .travel .tral, .tablets .mobl { box-shadow: unset; background: var(--at); } trending cofs ofrs { grid-template-columns: unset; width: auto; margin: 11px 7px; } cofs ofrs strt grid {padding: 7px; grid-template-columns: unset; justify-content: center; border-radius: 4px !important;} cofs ofrs strt grid i { width: 30px; height: 30px; } cofs ofrs strt grid h6 { display: none; } cofs ofrs strt grid:after { clip-path: unset; bottom: -8px; top: unset; width: 110%; height: 3px; border-radius: 22px; right: -4px;} .fashion .fson:after, .domains .web:after, .dining .food:after, .health .bety:after, .travel .tral:after, .tablets .mobl:after { background: var(--c); } tablets> bd, travel> bd, health> bd, fashion> bd, dining> bd, domains> bd { grid-template-columns: 0 auto 0; } } /*Screen*/ saso .aerea, ssts .aerea, ssys .aerea,snss .aerea, spsolti .aerea,sbdvc .aerea,sass .aerea, sactsti .aerea,stlo .aerea, sgss .aerea, sspo .aerea, swpo .aerea, ssmdlti .aerea, spwbtt .aerea, syuio .aerea, sigpo .aerea, spmo .aerea { justify-content: flex-end; } spmo main { width: 100%; } /*Screen*/ /*coverdp*/ spmu select { padding: 14px; margin: 0; border: solid 1px var(--bc); width: 100%; border-radius: 5px; height: 55px; } smsn sl input { height: 60px; } smcn sl input { height: 60px; } /*coverdp*/ /*input*/ smau sl label { left: 0; } smau sl { border-radius: 0; } /*input*/ /*Password Hide Button*/ regular.eyelogo eye.eyepass:before { content: " "; height: 26px; position: absolute; width: 3px; background: #526c88; top: 21px; bottom: 0; transform: rotate(45deg); right: 22px; border-radius: 22px; } /*Password Hide Button */ /* class*/ smos.fld aa.fe, .all aa.al, .scs aa.su, .pnd aa.pe { background: var(--aaa); color: var(--b);border-color:var(--lg);} smos all.al,succes.su, pending.pe, failed.fe { display: none; } cmos.scs succes.su { display: block; } cmos.pnd pending.pe { display: block; } cmos.fld Failed.fe { display: block; } wish.this svg { fill: var(--c);opacity: 1; } wish svg { opacity: 0.4; } .itemadd t { font-weight: bold; } .itemadd svg { fill: var(--c);opacity: 1; } .itemad adc { background: var(--c); color: var(--b); } buynow { display: none;transform: scale(0); } .buynow buynow { display: block; transition: 333ms; transform: scale(1); } @media screen and (max-width: 999px) { cmos.all all.al { display: block; } } /* class*/ /* hover*/ cpdo button:hover { transform: scale(1.023); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 4px 10px rgba(0, 0, 0, 0.02), 0 5px 30px rgba(0, 0, 0, 0.06); } /* hover*/ /* ac2*/ cmco ac2 svg { fill: var(--c1); } cmco ac2 i { height: auto; } /* ac2*/ /* Meeting Bot Filter Component*/ cmsu btn { border-radius: 5px; padding: 11px 22px; background: var(--aaa); color: var(--b); } @media screen and (min-width: 999px) { cmbog { position: sticky; top: 0; z-index: 999; } } /* Meeting Bot Filter Component*/ /* Meeting Bots Filter Component*/ /* Meeting Bots Filter Component*/ /* Meeting Order*/ smro trc svg { height: 31px; width: 31px; } smro bl.odifo >hd { background: var(--bg); padding: 11px; border-radius: 11px; margin: 4px; text-align: center; } smro bl.odifo >bd { padding: 11px; border-radius: 11px;margin: 4px } smro bl.odifo >ft { background: var(--bc); padding: 11px; border-radius: 11px;margin: 4px } smro btt { display: grid; grid-template-columns: auto 55px; width: fit-content; margin-top: 22px; } smro bl.ptm b { margin-top: 20px;} smro btn { display: grid; grid-template-columns: 100%; align-items: center; justify-content: end;font-size: 0.77em; } smro btn t { width: unset !important; display: block; } smro bl.odifo { display: flex; gap: 1%; background: var(--b-t22); padding: 22px; border-radius: 22px; margin-bottom: 22px; flex-direction: column; margin-top:22px} smro bl.eko i { height: auto; width: auto; } smro.eko aa { display: grid; grid-template-columns: 22px auto; gap: 3%; } smro select { margin: auto; } smro trcs>trc>h6 { text-align: end; display: block; } smro trcs>trc { border-radius: 0; box-shadow: unset; margin: 4px; grid-template-columns: 50% 50%; padding: 0px; padding-bottom: 3px; background: transparent; font-size: 0.77em; backdrop-filter: unset; -webkit-backdrop-filter: unset; width: auto; } smro trcs { margin-top: 20px; } smro bl.pro { display: grid; grid-template-columns: 77px auto auto; gap: 2%;align-items: center; } smro bl.info { display: grid; gap: 0%; } smro bl.info hd { padding-bottom: 20px; } smro bl.info t { margin: unset; width: unset; padding: 0; text-align: left; } smro bl.pro bd { text-align: start; font-size: 0.77em; } smro save.btn { height: 36px; display: flex; justify-content: center; align-items: center; background: var(--bc); color: var(--c); border-radius: 7px; width: 36%;margin-top: 11px; } smro bl.pro ft btn { display: grid; grid-template-columns: 100%; border: solid 1px var(--bc); padding: 7px; margin: 4px; border-radius: 6px; font-size: 0.66em; text-align: center; } smro bl.pro bd b { display: flex; } smro bl.pro p { margin: unset; } smro bl.pro bd {text-align: start;font-size: 0.77em;} smro bl.ptm bl { display: flex; align-items: center; justify-content: space-between; } smro bl.ptm hr { margin: 0; } smro bl h5 { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between;margin: 11px 0; } bl.odifo bl { background: var(--b); padding: 22px; border-radius: 22px; border: solid 1px var(--b);} order bl>hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } smro main b { font-weight: 500; font-size: 13px; } smro dlt{display: none; } /* Changed by Gagan Nayak */ cmos.all all.al { display: block; } cmros bl { margin: 5px; background: var(--b); border-radius: 22px; padding: 22px; box-shadow: var(--bs-b); } cmrs ammount { display: flex; align-items: center; flex-wrap: wrap; } cmrs { background: unset; padding: 0; margin: 4px 0; grid-template-columns: 120px auto; } cmros name { font-weight: 700; } adl p { background: var(--bc); padding: 11px; border-radius: 5px; font-weight: 400; } cmao button { border-radius: 5px; padding: 11px 22px; background: var(--aaa); color: var(--b); width: max-content; position: relative; } cpmom cvv h5 { margin: 0; border-radius: 8px; background: var(--bc); width: auto; height: auto; padding: 11px 22px; border: 1px solid var(--bc); height: 32px; align-items: center; display: flex; } /*gurpreet*/ @media screen and (max-width:430px) { bl.odifo bl { padding: 16px; } bl.odifo cmro { grid-template-columns: 137px auto 0px; font-size: 0.88em; gap: 4%; } } cmos bd h5:nth-child(2) { display: block; } bl.lg{margin:11px;} cmos:nth-child(1) bd h5:nth-child(2) { display: grid; } cmos:nth-child(2) bd h5:nth-child(2) { display: grid; } /*gurpreet*/ cmro {display: grid; grid-template-columns: 88px auto 0px; width: auto; gap: 2%; margin:0; padding: 0;} cmro hd { justify-content: center; grid-template-columns: 100%; } cmro img { border-radius: 11px; } cmro i { height: 100%; } cmro bd { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; } cmpi { background: var(--bt); padding: 22px; border-radius: 22px; border: solid 1px var(--b); margin: 11px 0;} cmpi hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } cmpi op { font-size: 0.77em; } cmpi bd {padding-top: 11px;} cmpi op { font-size: 0.77em; } cmpi h7 { display: grid; grid-template-columns: auto auto auto; width: fit-content; gap: 2%; } cmro bd h4 { display: grid; } size { display: flex; align-items: center;gap:7px;} cmos { display: block; background: var(--b-t22); padding: 22px; border-radius: 22px; margin-top: 22px; } cmos>bd {padding-top: 11px;} cmoa { background: var(--b); padding: 22px; border-radius: 22px; border: solid 1px var(--b); margin: 11px; } cmoa bd { padding: 11px 0 } cmoc trc { grid-template-columns: 44px auto 55px; align-items: center; gap: 1%; } cmoc trc hd { display: flex; justify-content: center; align-items: center; } cmoc btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 333px; margin: auto; font-weight: bold; cursor: pointer; margin: 11px 0; } cmoc bd { padding: 11px 0; } cmrs { width: auto; border-radius: 22px; padding: 11px; margin: 0; position: relative; background: var(--bc); border-bottom: solid 0.5px var(--b1); display: grid; grid-template-columns: 133px auto; gap: 11px; } cmrs hd { justify-content: center; grid-template-columns: 100%; } cmrs img { border-radius: 11px; } cmrs i { height: auto; } cmrs h7 { display: grid; gap: 2%; grid-template-columns: 32% 32% 32%; font-size: 0.88em; } cmrs h7 p { margin: 5px 0;} cmrs btn { display: grid; grid-template-columns: 11px auto; align-items: center; } cmrs p { margin: 0; } cmrs ft { text-align: end; } cmros h3 { margin: 0; } smos gp { display: grid; grid-template-columns: auto 64px; align-items: center; margin: 0 11px; } smos gp d { display: flex; gap: 2%; align-items: center;} smos btn { display: grid; grid-template-columns: 33px 33px;align-items: center; } smos mg {height: 55px; margin: 0px; min-width: 0px; width: 100%; white-space: nowrap; display: grid; flex-direction: row; overflow: scroll; grid-template-columns: 25% 25% 25% 25%;} smos mg aa {display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative; margin: 0 2px; background: var(--b-t22); border-radius: 22px; font-weight: 400; border: solid 1px var(--c);} smos mg a.this { background: var(--aaa); color: var(--b); } smos hd h2 { padding: 11px 0; } count { display: flex; justify-content: center; align-items: center; font-size: 111px; position: relative; font-weight: bold; background: var(--bt); border-radius: 22px; box-shadow: inset 0 0px 2px 0px rgb(0 0 0 / 11%), 0 4px 11px rgb(0 0 0 / 11%); } @media screen and (max-width: 999px) { cmros bl { padding: 16px; } cmrs h7 p { margin: 0; padding: 2px 0; } cmro bd { display: block; } } smro cmos { padding: 22px; } cmpi h7 p { width: auto; margin: 4px 0;border-radius:11px; } cmos { margin: 7px; padding: 11px; background: var(--bt); } cmoa h4 { padding: 2px 0; } cmpi h7 { grid-template-columns: 50% 50%; } cmoa { margin-bottom: 0; } cmros d { align-items: center; } cmrs h7 { display: block; } smos hd h2 { padding: 0; } smro bl.odifo { margin: 0px; padding: 11px; margin-top: 0; background: unset; } smro bl.odifo >hd { display: grid; border: solid 1px var(--bc); border-radius: 22px; padding: 22px;} smro select { height: auto; } smro bl.pro ft { display: none; } smro bl.pro bd { font-size: 0.66em; } smro save.btn { width: auto; } smro bl.pro p { margin: 7px 0px; } smro bl.ptm { display: block; } smro time { display: block; width: unset; float: unset; } smro select { display: none; } smro bl.eko { gap: 0; } smro time, id, price{ font-size: 0.88em; margin: 4px 0;text-align: center; } smro cmr bd { display: block; } smos hd h2 { padding: 0; } smos gp d { display: block; } smos gp { margin: 0; } cmros bl>bd { margin:; } smos gp h6 { color: var(--c0); } @media screen and (max-width: 999px) { cmrs h7 { display: block;font-size: 0.7em; } } /* Meeting Order*/ /* Meeting Orders*/ smos trc status { color: green; } smos trc img { object-fit: cover; } smos mnft { display: grid; grid-template-columns: 50% 50%; } smos nftc { display: block; width: 85%; background: rgb(82 71 71 / 44%); height: auto; border-radius: 12px; padding: 9px; margin: 6px; } smos nfti { width: 100%; display: block; } smos nftinfo { width: 100%; display: block; } smos nftinfo div { display: grid; grid-template-columns: 61% 38%; text-align: center; margin-top: 9px; } smos nftinfo cod { border: 2px solid #ffffff4f; border-radius: 7px; } smos np span { display: block; width: 80%; margin-left: 10%; } smos trcs mg a { width: 100%; } smos trc num { display: flex; justify-content: center; align-items: center;margin-right: 15px;font-size: 11px; } smos trc success { color: #24ff00; } smos button { display: flex; padding: 14px 24px; transition: box-shadow 0.2s cubic-bezier(0.2,0,0,1),transform 0.1s cubic-bezier(0.2,0,0,1); width: 99px; text-align: center; justify-content: center; border-radius: 11px; background: var(--a); color: var(--b); font-size: 1em; line-height: 1.25rem; } smos section { display: grid; padding: 0 33px; } smos trc>hd { height: 77px; width: 77px; } smos trc img { object-fit: cover; border-radius: 15px; height: 100%; width: 100%; } smos trcs>trc>bd { justify-content: left; white-space: nowrap; text-overflow: ellipsis; align-items: start;width: 141px; } smos trc bd h4 { display: flex; align-items: center; gap: 4px; margin: 4px 0px;font-weight: 100; } smos trcs>trc>ft svg { width: 20px; margin: 6px; height: auto; fill: var(--b1-t44); stroke: var(--b-t); overflow: visible; } smos mg { align-items: center; } smos Overview trc { grid-template-columns: 77px auto 88px; gap: 2%; } smos Overview trc a { display: grid; background: var(--c); font-weight: 100; padding: 6px; color: var(--b) !important; border-radius: 22px; font-size: 0.88em; width: 100%; text-align: center; } smos trcs>trc>ft { display: flex; flex-direction: column; align-items: end; text-align: end; justify-content: end; gap: 20px; } smos select.form-control { background: transparent; width: 123px; color: aliceblue; border-radius: 9px; padding: 8px; margin: 0px 5px; } smos.form-control option { background: #000; padding: 11111px !important; } smos trcs>trc>ft>i { height: 100%; justify-content: flex-end; } smos trc.recnt h6 name { font-size: 1em; } smos Orders trc { grid-template-columns: 77px auto 88px; gap: 2%;position: relative; } smos Orders trc a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } @media only screen and (min-width: 999px){ smos trcs>trc>ft>i { height: 100%; justify-content: flex-end; } smos mnft { grid-template-columns: 33.33% 33.33% 33.33%; } } @media only screen and (max-width: 999px){ smos trc a { width: unset; font-size: 0.77em; padding: 9px; } smos trc { padding: 11px; width: 88%; } } @media only screen and (max-width: 1070px){ } /* Meeting Orders*/ /* Meeting Crat*/ cmcto input { width: 15px; height: 15px; } cmcto pl { display: grid; grid-template-columns: 33px 33px 33px; align-items: center; } cmcto pll { display: grid; grid-template-columns: 33px 33px 33px; align-items: center; background: var(--bc); padding: 5px; margin: 4px 0; border-radius: 5px; } cmcto ft { text-align: end; align-items: self-end;display: grid;} cmcto h5 { display: grid; grid-template-columns: auto auto; gap: 2%; justify-content: space-between; width: -webkit-fill-available; } cmcto bd input { margin: auto; background: unset; width: 77px; padding: 0; text-align: center; } cmcto btn { display: grid; justify-content: center; align-items: center; border: solid 1px var(--bc); border-radius: 22px; padding: 5px 11px; font-size: 0.666em; width: 80px; margin: 4px 0; } cmcto bd p {display: grid; grid-template-columns: auto auto auto; margin: 0; align-items: start; height: fit-content; line-height: 1;} cmcto svg { width: 22px; height: 22px; } cmcto ft input { margin: auto; background: unset; width: 77px; padding: 0; text-align: center; } cmcto i { height: 22px; width: 22px; } cmcto num btn { display: grid; justify-content: center; align-items: center; background: unset; margin: 0; border-radius: 11px; grid-template-columns: 44px auto; width: -webkit-fill-available; border: unset; padding: 0; } cmcto ft p { margin: 0; } cmcto img { border-radius: 11px; } cmcto bl.del input { width: 16px; height: 16px; } cmcto hd>i { width: 77px; height: 77px; } cmcto bl.del p { margin: 0; font-weight: 600; font-size: 14px; } cmcto hd btn { border: unset; grid-template-columns: 29px auto; width: auto; } cmcto hd { display: grid; justify-content: space-between; flex-direction: row-reverse; height: 100%; margin-left: 7px; } smcot label { font-family: system-ui; opacity: 1; } @media screen and (max-width: 999px) { bl.del { padding-bottom: 22px;margin: 11px; } cmcto hd { flex-direction: row; } cmcto hd>i { width: 88px; height: 88px; } } @media screen and (max-width: 999px) { smcot main bl { background: unset;padding: 0; } cmcto bd p { font-size: 0.88em; font-weight: 500; overflow: hidden; display: block; max-height: 3.4em; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } mcot main bl { margin: 11px;padding: 0; background: unset; } cmcto ft { grid-column-start: 1 !important; grid-column-end: 4; display: grid; align-items: center; text-align: justify; padding-top: 11px; } cmcto h5 { justify-content: space-between; } cmcto h5 p { font-weight: 100; } cmcto pll { padding: 3px; } } /* Changed by G'agan Nayak for cart new solve bugg and improve design */ smcot main bl { background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } bl.del btn { display: flex; justify-content: center; align-items: center; margin: auto; border-radius: 5px; background: var(--aaa); transition: 99ms; overflow: hidden; position: relative; padding: 6px 22px; color: var(--b); } /* ProfileDp*/ } /* ProfileDp*/ /* Profileinfo*/ /* Profileinfo*/ /* Accountinfo*/ /* Your Profile*/ /*Safe and secure*/ csfo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } csfo p {margin: 0;} csfo name { font-weight: 400; } csfo>bd { display: grid; padding: 11px 0; gap: 11px; } csfo trc { display: grid; grid-template-columns: 55px auto 25px; margin: 16px 0; border-bottom: solid 1px var(--bc); padding-bottom: 11px; align-items: center; gap: 2%; } csfo trc bd { font-size: 0.88em; } csfo b { font-weight: 400; } csfo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } csfo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } csfo h4 { font-weight: 500; } csfo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } csfo i { height: 100%; } @media screen and (max-width: 999px) { csfo i { height: 55%; } csfo ad a { grid-column-start: 2; grid-column-end: 4; } csfo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } } /*Safe and secure*/ /* products */ cppo { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } cppo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cppo>hd { display: grid; align-items: center; } cppo p {margin: 0;} cppo button { border: solid 1px var(--bor); width: 20%; background: var(--aaa); color: var(--b); border-radius: 9px; } cppo name { font-weight: 400; } cppo>bd { display: grid; padding: 11px 0; gap: 11px; background: var(--bc); border-radius: 22px; margin: 11px 0; } cppo trc { display: grid; grid-template-columns: 50px auto 100px; margin: 16px auto; border-bottom: solid 1px var(--bc); align-items: center; gap: 2%; background: var(--bc); } cppo trc bd { font-size: 0.88em; } cppo b { font-weight: 400; } cppo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } cppo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } cppo h4 { font-weight: 500; } cppo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } cppo i { height: 100%; } cppo h3 { padding-bottom: 22px; } cppo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } cppo bd a { padding: 22px; display: grid; } @media screen and (max-width: 999px) { cppo trc {margin: 11px 0; width: auto; grid-template-columns: 40px auto 23px; } cppo { margin: 11px;} cppo ad a { grid-column-start: 2; grid-column-end: 4; } cppo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } cppo button { width: 88%; margin-top: 11px; } cppo ft p { display: none; } cppo trc>ft { display: block; } } /*products*/ /*App access*/ capo { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } capo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } capo>hd { display: grid; align-items: center; } capo p {margin: 0;} capo button { border: solid 1px var(--bor); width: 20%; background: var(--aaa); color: var(--b); border-radius: 9px; } capo name { font-weight: 400; } capo>bd { display: grid; padding: 11px 0; gap: 11px; } capo trc bd { font-size: 0.88em; } capo b { font-weight: 400; } capo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } capo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } capo h4 { font-weight: 500; } capo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } capo h3 { padding-bottom: 22px; } capo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } capo quick { display: grid; grid-template-columns: 25% 25% 25% 25%; } capo bd a { padding: 22px; display: grid; } capo trc { display: grid; grid-template-columns: 55px auto 100px; margin: 4px 0; border-bottom: solid 1px var(--bc); align-items: center; background: var(--bc); padding: 22px; border-radius: 11px; } capo trc hd { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; border-radius: 11px; } @media screen and (max-width: 999px) { capo trc hd { background: transparent !important; width: 44px; } capo trc {margin: 5px 0; width: auto; grid-template-columns: 40px auto 23px; } capo { margin: 11px;} capo ad a { grid-column-start: 2; grid-column-end: 4; } capo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } capo button { width: 88%; margin-top: 11px; } capo ft p { display: none; } capo trc>ft { display: block; } capo quick { grid-template-columns: 50% 50%; } capo quick { grid-template-columns: auto auto; justify-content: space-around; } } /*App accesscapo*/ /*App access*/ capo { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } capo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } capo>hd { display: grid; align-items: center; } capo p {margin: 0;} capo name { font-weight: 400; } capo b { font-weight: 400; } capo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } capo h4 { font-weight: 500; } capo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } capo i { height: 100%; } capo h3 { padding-bottom: 22px; } capo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } capo bd a { padding: 22px; display: grid; } @media screen and (max-width: 999px) { capo { margin: 11px;} } /*App access*/ /*More privacy*/ cmpo { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } cmpo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cmpo>hd { display: grid; align-items: center; } cmpo p {margin: 0;} cmpo name { font-weight: 400; } cmpo b { font-weight: 400; } cmpo a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cmpo h4 { font-weight: 500; } cmpo i { height: 100%; } cmpo h4 { padding-bottom: 22px;font-weight: 500; } cmpo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } cmpo bd a { display: grid; } cmpo trc hd { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; background: var(--bc); border-radius: 11px; } cmpo ads { display: grid; grid-template-columns: 33% 33% 33%; } cmpo add { text-align: left; display: grid; grid-template-rows: auto auto 30px; background: var(--bc); align-items: center; border-radius: 22px; margin: 8px; padding: 22px; } cmpo>bd { padding-top: 26px; } cmpo add hd { padding: 22px; } @media screen and (max-width: 999px) { cmpo ads { grid-template-columns: 100%; } cmpo h4 { padding: 22px 0; } cmpo { margin: 11px;} } /*More privacy*/ /* Additional */ cado { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 14px 0; grid-template-rows: auto auto 30px; } cado>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cado p {margin: 0;} cado name { font-weight: 400; } cado b { font-weight: 400; } cado a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cado h4 { font-weight: 500; } cado bd a { display: grid; } cado>bd { padding-top: 26px; } cado ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } cado btn { display: grid; grid-template-columns: 44px auto; } cado btn h4 { font-weight: 400; } cado p { margin: 0; } cado hd h4 { margin-bottom: 5px; } cado ads { display: grid; grid-template-columns: 33% 33% 33%; } cado add h4 { padding: 18px 0; font-size: 20px;} cado add hd { display: grid; justify-content: center; align-items: center; } cado add i { height: 66%; } cado btn svg { height: 22px; } cado add { display: grid; padding: 15px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bc); margin: 7px; grid-template-rows: 144px auto 48px; } ads ft { display: flex; align-items: end; } @media screen and (max-width: 999px) { cado add hd {background: var(--b); border-radius: 11px; } cado add { height: 37vh; } cado ads { display:block;} cado { margin: 11px;} cado>hd { display: block; } cado { margin: 11px; } cado ad a { display: grid; grid-column-start: 2; grid-column-end: 4; } cado btn { padding: 11px 0; } cado h3 { padding-bottom: 22px; } } /* Additional */ /* Cart */ ccos buynow btn { box-shadow: inset 0 0 0 3px var(--a); color: var(--a); background: unset;margin: 2% 0; } cmcto bd { display: grid; align-items: end; } ccos btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 333px; margin: 6px 0; font-weight: bold; cursor: pointer;margin:auto;} ccos bd b { display: grid; grid-template-columns: auto auto; align-items: center; } ccos bl bd { padding: 11px 0; } ccos p { font-weight: 500; text-align: end; } cmcto bd btn { background: var(--bc); } /* Cart */ /* Address */ smao .adres { display: grid; background: var(--b); padding: 22px; border-radius: 11px; } smao .adres bl { display: grid; background: var(--bc);border-radius: 11px; box-shadow: var(--bs-b); } smao .adres> bd { display: grid; grid-template-columns: 48% 48%; gap: 22px;margin-top: 22px;} smao .ad-adr{align-items: center; grid-template-rows: auto auto; text-align: center;} smao .adres h1 { font-weight: 500; } smao .adres bl ft { display: grid; grid-template-columns: 48% 48%; gap: 4%; padding: 0 11px; text-align: center; border-top: solid 1px var(--b); padding-bottom: 11px; margin-top: 11px;align-items:center; } smao bl.adres p { margin: 0; margin-top: 11px; } smao .adres bl bd { display: grid; padding: 22px; } smao .ad-adr i { height:60px;width:60px; } smao bl.ad-adr { display: flex; flex-direction: column; justify-content: center; align-items: center;position: relative; } smao .ad-adr a { position: absolute; height: 100%; width: 100%; } smao .adres adl_pop { position: absolute; top: 33%; grid-template-rows: 100px auto auto; background: var(--b); width: 400px; height: 200px; align-items: center; padding: 22px; text-align: center; border-radius: 11px; transform: scale(0); left: 20%; transition: 333ms;border: solid 1px var(--bor);box-shadow: var(--bs-bt); } smao .adl_pop adl_pop{ display: grid; transform: scale(0.9); } smao adl_pop hd{display: flex; justify-content: center;} smao adl_pop i { height: 44px; padding: 11px; width: 44px; background: var(--bc); border-radius: 44px; } smao adl_pop ft { display: grid; grid-template-columns: 48% 48%; gap: 11px; } smao adl_pop a { background: var(--bc); padding: 11px; border-radius: 11px; display: grid; align-items: center; justify-content: center; } smao .adres ft a { margin-top: 11px; background: var(--bc); padding: 11px 0px; border-radius: 11px; color: var(--a); } smao .adres ft btn { margin-top: 11px;font-weight: bold; background: var(--bc); padding: 11px 0px; border-radius: 11px; color: var(--a); } cmao bd { display: grid; grid-template-columns: 50% 50%;} @media only screen and (max-width: 999px) { smao .adres {height: 100%; grid-template-rows: 33px auto;} smao .adres> bd { grid-template-columns: unset;grid-template-rows: auto auto;} smao .adres a-r-p {left: 4%; width: 350px;} } /* Address component */ /* Address */ /* Address new*/ cman>hd>i { height: 77px; width: 77px; margin: 0 auto; opacity: 0.5; } cman>bd>h2 { font-size: 1.66em; } cmas b { font-weight: 500; } cmas bl { background: var(--b-t22); } @media screen and (max-width: 999px) { smas bl { margin: 11px 0;padding: 0 11px; } smas bl>bd { grid-template-columns: 100%;padding: 0; } } smas main { width: 100%; max-width: unset; } cmas>ft btns { display: flex; align-items: center; white-space: nowrap; margin: 6px 0; justify-content: space-around; } cmas>ft hr { transform: rotate(90deg); max-width: 34px; } smas cmas>hd { padding-bottom: 10px; border-bottom: 1px solid var(--bc); grid-template-columns: 33px auto; display: grid; } cmas>bd { background: unset; } cmas name { font-weight: bold; } cmas>bd h5 { font-weight: 400; font-size: 0.88em; margin: 6px 0; display: flex; gap: 2px; align-items: center; } smas cmas>bd { padding: 0; margin: 11px 0; } cmas p { font-size: 14px; margin: 0; } cmas bd h4 { display: flex; gap: 2px; align-items: center; } @media screen and (max-width: 999px) { smas bl>bd { display: block; } cman>hd>i { height: 44px; width: 44px; opacity: 1; } } /* Address new*/ /* Address*/ cmao { display: block; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--b-t22); margin-top: 22px;} cmao add hd { display: grid; grid-template-columns: 44px auto; align-items: center;} cmao add { display: grid; grid-template-columns: auto auto; padding: 22px; align-items: center; background: var(--bt); border-radius: 22px; gap: 11px; margin-top: 11px; justify-content: space-between; } cmao bd { display: grid; } cmao sl input { width: calc(100% - 50px); border: solid 1px var(--bor); border-radius: 9px; background: var(--0); height: 50px; position: relative; margin-top: 11px;} cmao sl label { left: 9px; position: relative; top: 0px; } cmao sl { background: transparent; height: 91px; } cmao bd { display: grid;background: var(--bt); padding: 22px; border-radius: 22px; margin: 11px 0; } cmao add bd { background: unset; padding: 0; margin: 0; } cmao textarea { width: -webkit-fill-available; border: solid 1px var(--bor); border-radius: 9px; background: var(--0); height: 50px; position: relative; margin-top: 12px; } sl p { font-size: 14px; margin: 4px; background: var(--bc); border: unset; box-shadow: unset; border-radius: 9px; display: grid; align-items: center; height: 55px; padding: 0 16px; margin-top: 8px; } cmao add input { width: 22px; } adl { display: grid; grid-template-rows: 50% 50%; padding: 11px 0; align-items: center; font-size: 15px; margin: 0 7px; } @media screen and (max-width: 999px) { cmao { margin: 11px; padding: 0; background: transparent; } cmao select { border: solid 1px var(--bor); border-radius: 9px; background: var(--0); height: 50px; position: relative; margin-top: 11px; } cmao add input { width: 24px; } cmao add { padding: 11px; } cmao bd { display: block; } } /* Address*/ /* Subscription*/ smco main bl { display: grid; grid-template-columns: 50% 50%; padding: 0; border-radius: 22px; background: unset; margin: 11px 0; } cmsp { display: grid; grid-template-columns: 80px auto 88px; border-radius: 22px; background: var(--bt); align-items: center;padding: 22px; } smco main grid { background: var(--b-t22); padding: 22px; border-radius: 22px; margin-bottom: 22px; margin-top: 22px; } cmsp p { margin: 0; } cmsu p { margin: 0; } cmsu { display: grid; grid-template-columns: 53px auto 104px; border-radius: 22px; background: var(--bt); align-items: center; padding: 22px; margin: 11px 0; } cmsp ft { text-align: end; } @media screen and (max-width: 999px) { smco main bl { display: block; } smco main grid { padding: 11px; } cmsp bd p { white-space: nowrap; width: 158px; overflow: hidden; text-overflow: ellipsis; } } /* Subscriptioncmsco*/ /* adaddress*/ sman adaddress > bl { display: grid; gap: 22px; } sman adaddress h1{font-weight:500;} sman adaddress option { padding: 11px 0; background: var(--bc); } sman adaddress .sele { display: grid; gap: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } sman adaddress bd sel { display: grid; padding: 20px 11px; border-radius: 9px; background: var(--bc); } sman adaddress .sele h5{margin-bottom:5px;font-weight: 600;} sman adaddress .new-add { display: grid; grid-template-columns:22px auto auto; padding: 17px; align-items: center; background:var(--bt); border-radius: 11px; gap: 11px; margin-top: 11px;} sman adaddress { margin: 11px; display: block; } sman adaddress hd ft { display: flex; justify-content: end; } sman adaddress input { width: -webkit-fill-available; border-radius: 5px; background: var(--bc); height: 55px;} sman .sele bl{display: grid; grid-template-columns: 48% 48%; gap: 4%;} sman adaddress ft hd { display: grid; width: fit-content; grid-template-columns: 24px auto;align-items: center;gap:11px; } sman adaddress p{margin:0;} sman adaddress .chb-ads { margin-bottom: 44px; display: flex; justify-content: space-between; align-items: center; background: var(--bt); padding: 11px; border-radius: 11px; } sman adaddress > bl > hd { display: grid; gap: 11px; } sman .txtar textarea { border-radius: 11px; border: solid 1px var(--bor); padding: 11px; background: var(--0); } sman adaddress bd sel select { padding: unset; margin: unset; border: unset; border-radius: unset; height: unset; background: transparent; } @media only screen and (max-width: 999px) { sman adaddress > bl { display: block; } sman adaddress .sele { display: block; padding:22px 11px;margin-top: 22px; } sman adaddresss .chb-ads { margin-top: 22px;} sman textarea { width: -webkit-fill-available; border: solid 2px var(--bc); background: transparent; border-radius: 9px; } sman adaddress .chb-ads { margin: 11px 0; } sman in { margin: 7px 0; } } /* adaddress*/ /* no*/ smso no { display: flex; flex-direction: column; width: 77%; margin: auto; justify-content: center; align-items: center; text-align: center; } smso no t { margin-top: 0; } /* Address */ /* CSS changed by G'agan Nayak for Order */ sman adaddress button { border-radius: 5px; padding: 11px; background: var(--aaa); color: var(--b); } sman .txtar{display: grid; margin: 11px 0; grid-template-rows: 22px auto;} sman .sele bl:nth-child(4) { display: block; } smro cmos {margin: 0 4px; margin-top: 7px; background: var(--b);} smro blc {display: grid; grid-template-columns: 50% 50%; gap: 0; margin: 0;} cmpi h7 d { background: var(--bc); width: max-content; padding: 7px 11px; } smro p { font-size: 0.88rem; font-weight: 400; margin: 2px 0; opacity: 0.7; } cmoa bl { background: transparent; padding: 0; border: 0; border-radius: 0; margin: 0; } smro cmoa bd { padding: 0; } smro bl trc hd { height: 33px; width: 33px; overflow: hidden; border-radius: 55%; } smro bl trc hd i { height: 100%; width: 100%; } smro trc { display: grid; grid-template-columns: 44px auto; align-items: center; } cmoa bl>h4 { margin-bottom: 16px; } @media only screen and (max-width: 999px) { smro blc { display: block; } smro cmos { padding: 22px; margin: 0; margin-top: 7px; } spsolti cths { padding: 0 !important; } setting { margin: 0!important ; } cths ctho { width: 95px !important ; } } cpsolti >ft { grid-column-start: 1; grid-column-end: 3; } smau sl label { top: 0; } smau sl input { display: block; border-radius: 11px; margin-bottom: 11px; position: relative; height: 60px; overflow: hidden; background: var(--bc); width: 100%; } smau sl label { position: relative; top: -4px; } smau sl input { display: block; margin-bottom: 0; position: relative; height: 55px; background: var(--bc) ; } /* post */ pt ic svg { height: 20px; } pt post{display: block; width: 88%; background: var(--b-t); margin: auto; border-radius: 22px; margin-top: 22px; padding: 22px;} .faq { display: block; letter-spacing: 1; box-shadow: var(--bs-b); padding: 22px; border-radius: 22px; background: linear-gradient( 133deg , rgb(0 188 212 / 10%), rgb(0 255 222 / 10%), rgb(0 188 212 / 10%)); margin: 11px; backdrop-filter: blur(11px); border: solid 2px var(--b-t); } .faq h2 { font-size: 1em; } .faq>div { font-size: 0; transition: 0ms; } .faq.this>div { font-size: 0.88em; } faqs user { display: grid; grid-template-rows: auto auto auto; width: 95%; margin: 7px auto; background: var(--bt); border-radius: 11px; position: relative; overflow: hidden; border: solid 1px var(--bt); } faqs user actn>adc { display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--aa); background: var(--aat); border-radius: 7px; font-size: 0.88em; } pt comant { display: grid; grid-template-columns: 55px auto; gap: 2%; align-items: center; } pt post hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } pt post hd d bd { text-align: justify; font-size: 0.88em; } pt post >bd { margin: 4px; display: block; background: var(--bc); border-radius: 22px; } pt post ft { display: grid;} pt post ft btn { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 11px; margin: 4px; align-items: center; padding: 11px;} pt post ft t { width: auto; margin: 0; font-size: 0.88em; text-align: center; } pt post p { font-size: 11px; margin: 0; } pt post.dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} pt post hd i { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 6px; } pt post trc { display: grid; grid-template-columns: 55px auto 48px; gap: 2%; align-items: center; } pt post time { display: block; width: auto; float: unset; } pt post hd> i { height: auto; width: auto; background: transparent; border: solid 1px; border-radius: 55%; } pt post name { font-size: 20px; font-weight: bold; } pt post ft btns { display: grid; grid-template-columns: 50% 50%; border-bottom: solid 1px var(--bc); justify-content: space-around; width: unset; margin: unset; padding: 0;} pt comant bd { display: grid; align-items: center; height: 55px; background: var(--bc); border-radius: 11px; margin: 7px; } pt comant bd d { display: grid; grid-template-columns: auto 30px 30px 30px 30px; gap: 2%; border-radius: 55%; justify-content: center; align-items: center; } pt postt input { background: unset; } pt comant bd i { display: flex; background: transparent; margin: 4px; border-radius: 55%; height: 22px; width: 22px; } pt comant bd d { display: grid; grid-template-columns: auto auto; gap: 2%; border-radius: 55%; align-items: center;justify-content: normal; } pt ic { display: grid; grid-template-columns: auto auto auto auto auto auto;justify-content: center; } pt post input { background: unset; } pt post us { display: grid; grid-template-columns: 40px auto 76px; align-items: center; gap: 1%; padding: 11px 0; border-bottom: solid 1px var(--bc);} pt post id { display: grid; grid-template-columns: 55px auto; padding: 11px 0; align-items: center; } pt post id i { border-radius: 50% !important; background: var(--bc); } pt post msg p { display: block; background: var(--bc); padding: 4px; border-radius: 2px; width: 100px; text-align: center; } t msg btns { grid-template-columns: auto auto auto !important; justify-content: start !important; gap: 4%; } pt msg { display: grid; gap: 2%;padding: 11px 0; } pt msg bd i { display: block; height: 77px; padding-bottom: 11px; } pt msg btns { grid-template-columns: auto auto auto !important; justify-content: flex-start !important; gap: 4%; padding-bottom: 11px !important; } pt post ft btn:hover { background: var(--bc); } pt btns { cursor: pointer; } pt post time {text-align: unset; } @media screen and (max-width: 999px) { pt post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } pt post name { font-size: unset; } pt post time { font-size: 0.77em;} pt post hd i { background: unset; height: auto; width: auto; } pt comant bd { height: auto; } pt ic { display: none; } ptcomant bd d { grid-template-columns: 100%; } pt comant { grid-template-columns: 43px auto; gap: 0; } pt post ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent;padding: 0; } pt gp bb { font-size: 0.88em; } pt post { padding: 11px; margin: 0 auto; } pt post >bd { height: auto; } pt post us { padding: 0; } pt post ft btns { border-bottom: unset; } pt msg { padding: 11px; } pt post ft t { text-align: unset; } } /* post */ /* list */ cals { display: block; flex-direction: column; align-items: center; background: unset; cursor: pointer; transition: 99ms; border-radius: 17px; position: relative; overflow: hidden; height: 333px; margin: 8px;} cals hd { display: flex; flex-direction: column; align-items: center; justify-content: center; background: unset; cursor: pointer; transition: 99ms; border-radius: 17px; position: relative; overflow: hidden; background: var(--bc); height: 253px; width: 100%; } slio>bl>bd { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; } cals bd i { background: var(--bc); height: 74px; margin: 6px; width: -webkit-fill-available; } slio cman bd { display: block; } slio cman>bd>h2 { text-align: center; } @media screen and (max-width: 999px) { slio cals bl bd { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; gap: 0%; } slio bl>bd { display: block; } slio cman { display: block; } } /* list */ /* Genres */ mood hd { margin: unset; } moods>hd { margin: 0px 23px; display: block; } moods>bd { padding-left: 0px; display: block; } moods bl { position: relative; display: block; } moods bd options a div { background: var(--b); border-radius: 4px; margin: 5px; font-weight: bold; display: grid; grid-template-columns: 9px auto; padding: 0; height: 55px; align-items: center; gap: 5%; border: 1px solid rgba(0 0 0 / 0.08); } moods options div bgg { background: #ec9898; display: block; height: 100%; border-radius: 32px 0px 0 32px; } explore moods { display: block; padding: 6px 0; margin: 7px 11px;} moods { margin-top: 22px; display: block; } moods options bd{ display: grid; overflow: scroll; grid-template-columns: 25% 25% 25% 25%; } moods options hd { display: block; position: relative; } moods bd options a div bd { font-size: 0.88em; font-weight: 600; } moods { display: block; margin: 0 11px; } sgeo .aerea { justify-content: flex-end; } options div bd { display: block !important; } .red { border-left: solid 3px var(--a); } .yello { border-left: solid 3px #e7e719; } .bule { border-left: solid 3px var(--a); } .pink { border-left: solid 3px var(--at); } .orange { border-left: solid 3px #f07d5b; } .green { border-left: solid 3px #54c870; } @media screen and (min-width: 999px) { moods options bd{ grid-template-columns: 25% 25% 25% 25%; } } @media screen and (min-width: 999px) { moods { padding-bottom: 22px; } ssno cmos { padding: 0; } } /* Genres */ /* song */ csso btns btn { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative; margin: 0 2px; background: var(--b-t22); border-radius: 22px; font-weight: 400; border: solid 1px var(--c); width: max-content; } csso { display: grid; align-items: baseline; margin-top: 22px; background: var(--b-t22); padding: 22px; border-radius: 22px; height: 100%; overflow: hidden; gap: 1%;padding-bottom: 30px; } csso btns { display: flex; justify-content: center; } csso.Song btn.sg { background: var(--aaa); color: var(--b); } csso.Video btn.vi { background: var(--aaa); color: var(--b); } cmos mg { display: grid; grid-template-columns: 33.333333333333336% 33.333333333333336% 33.333333333333336%; text-align: center; } orders cmos mg { display: grid; grid-template-columns: 25% 25% 25% 25%; text-align: center; } cslo mg:last-child { display: flex; overflow: scroll !important; } cslo.nest aa.ne, .lyrics aa.ly, .related aa.re { background: transparent; color: var(--a); border-color: var(--lg); border-bottom: solid 2px var(--a);} cslo nest.ne, lyrics.ly, related.re{display:none;} cslo.nest nest.ne { display: block; } cslo.lyrics lyrics.ly { display: block; } cslo.related related.re { display: block; } cslo hd bl { display: grid; grid-template-columns: auto auto; justify-content: space-between; padding: 11px; margin: 11px 0; background: var(--b); border-radius: 11px; } cslo hd bl p { margin: 0; } cslo hd bl b { margin: 0; } cmos btn { display: grid; grid-template-columns: 33px auto; align-items: center; font-size: 0.88em; background: var(--b); padding: 0px 8px; border-radius: 22px; } cslo mg:last-child aa { background: var(--bc); display: flex; padding: 6px 33px; border-radius: 5px; grid-template-columns: 0px auto; align-items: center; justify-content: center; height: 37px; margin: 10px; max-width: 368px; width: 100%; color: var(--c); } cslo cmrmo { display: grid; box-shadow: 0px 0px 20px 3px var(--bc); position: relative; gap: 12px; overflow: hidden; margin: 4px 0; border-radius: 14px; background: var(--bt); grid-template-columns: 58px auto 77px; align-items: center; padding: 11px; cursor: move;} cslo cmros bl { background: transparent; box-shadow: unset; padding: 0; } cslo bx hd { display: grid; } cslo bx hd nam { font-weight: 600; } cslo cmrmo img { border-radius: 11px; } cslo cmrmo ft t { text-align: end; } ssno d.main { width: auto; } ssno main { width: max-content; } ssno .aerea { flex-direction: row; justify-content: space-around; } ssno cmos { display: block; background: transparent; padding: 22px; border-radius: 22px; margin-top: 0; } cmos mg aa { padding-bottom: 11px; } cmos aa.this { background: var(--b) !important; } cma { overflow: scroll; } cslo { display: block; margin-top: 22px; background: var(--b-t22); border-radius: 22px; } csso hd { margin: 11px auto; } csso btns btn { padding: 3px 16px; } ssno main { width: 55%; max-width: 555px; } @media screen and (min-width: 999px) { ssno .aerea sidebar { width: 50%; min-width: 499.5px;height: auto;} } @media screen and (max-width: 999px) { ssno cmos { padding: 0; } ssno main { width: 100% !important; } ssno d.main { width: 100%; } cslo mg:last-child aa { padding: 4px 26px; margin: 3px; } vio i img { border-radius: 8px; display: block; } vio { display: block; margin: auto; width: 95%; } csso { width: auto; margin: 0; display: flex; flex-direction: column; padding: 0; } csso hd { display: block; } ssno cmos bl>hd { padding-top: 11px; } } /* song */ .player { width: 300px; margin: 0 auto; text-align: center; background-color: #000; padding: 20px; border-radius: 10px; color: #fff; } .controls { display: flex; justify-content: space-around; align-items: center; margin-top: 20px; } .button { background: none; border: none; color: #fff; font-size: 35px; cursor: pointer; height: 62px; width: 62px; } .progress-container { width: 100%; background-color: var(--b); height: 5px; cursor: pointer; margin: 10px 0; } .progress { background-color: var(--b-t95); height: 5px; display: grid; grid-template-columns: auto auto; justify-content: space-between; } cson p { margin: 0; } cson { display: block; padding: 22px; gap: 2%; } csso ft { width: 100%; } div#progress p { margin-top: 9px; font-size: 0.66em; font-weight: 600; } div .button:nth-child(3) { display: block; border-radius: 50%; background: var(--bc); } cson hd { margin: 11px auto; display: contents; } ssno songs d { display: grid; grid-template-columns: 33% 33% 33%; gap: 1%; margin-top: 11px; } /* song */ /* wishlist */ swos trc ft i { height: 29px; width: 29px; opacity: 0.4; } swos trc img { object-fit: cover; } swos mnft { display: grid; grid-template-columns: 50% 50%; } swos nftc { display: block; width: 85%; background: rgb(82 71 71 / 44%); height: auto; border-radius: 12px; padding: 9px; margin: 6px; } swos nfti { width: 100%; display: block; } swos nftinfo { width: 100%; display: block; } swos nftinfo div { display: grid; grid-template-columns: 61% 38%; text-align: center; margin-top: 9px; } swos nftinfo cod { border: 2px solid #ffffff4f; border-radius: 7px; } swos np span { display: block; width: 80%; margin-left: 10%; } swos trcs mg a { width: 100%; } swos trc num { display: flex; justify-content: center; align-items: center;margin-right: 15px;font-size: 11px; } swos trc success { color: #24ff00; } swos button { display: flex; padding: 14px 24px; transition: box-shadow 0.2s cubic-bezier(0.2,0,0,1),transform 0.1s cubic-bezier(0.2,0,0,1); width: 99px; text-align: center; justify-content: center; border-radius: 11px; background: var(--a); color: var(--b); font-size: 1em; line-height: 1.25rem; } swos section { display: grid; padding: 0 33px; } swos Overview trc>hd { height: 77px; width: 77px; } swos trc img { object-fit: cover; border-radius: 15px; height: 100%; width: 100%; } swos trcs>trc>bd { justify-content: left; white-space: nowrap; text-overflow: ellipsis; align-items: start;width: 141px; } swos trc bd h4 { display: flex; align-items: center; gap: 4px; margin: 4px 0px;font-weight: 100; } swos trcs>trc>ft svg { width: 20px; margin: 6px; height: auto; fill: var(--b1-t44); stroke: var(--b-t); overflow: visible; } swos mg { align-items: center; } swos Overview trc { grid-template-columns: 77px auto 88px; gap: 2%;align-items: center; } swos Overview trc a { display: grid; background: var(--aaa); font-weight: 100; padding: 6px; color: var(--b) !important; border-radius: 22px; font-size: 0.88em; width: 100%; text-align: center; } swos trcs>trc>ft { display: flex; flex-direction: column; align-items: end; text-align: end; justify-content: end; gap: 20px; } swos select.form-control { background: transparent; width: 123px; color: aliceblue; border-radius: 9px; padding: 8px; margin: 0px 5px; } .form-control option { background: #000; padding: 11111px !important; } swos trcs>trc>ft>i { height: 100%; justify-content: flex-end; } swos trc.recnt h6 name { font-size: 1em; } swos trc hd { height: 78px; width: 78px; background: transparent; border-radius: 0; padding: 0; } swos .aerea { justify-content: flex-end; } alert.success modal {color: rgb(0 255 0 / 100%);} @media only screen and (min-width: 999px){ swos trcs>trc>ft>i { height: 100%; justify-content: flex-end; } swos mnft { grid-template-columns: 33.33% 33.33% 33.33%; } } @media only screen and (max-width: 999px){ swos Overview trc a { width: unset; font-size: 0.77em; } swos Overview trc { padding: 11px; width: 88%;align-items: center; } } /* wishlist */ /* Bug solve */ ssys setting>hd>bl { background: var(--b-t22); padding: 22px; border-radius: 22px; } setting btn { font-size: 0.88em; } @media only screen and (max-width: 999px){ setting>hd>bl { display: block; padding: 0px; background: transparent !important; } } /* Bug solve */ cpms { display: grid; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: dotted 2px var(--b); background: unset; margin: 7px; cursor: pointer; transition: 99ms; border-radius: 17px; position: relative; overflow: hidden; grid-template-rows: 111px auto; } cpms bd h2 { font-size: 1.33em; justify-content: center; display: grid; text-align: center; font-weight: 500; font-family: 'Unbounded'; } cvpo bd bl { display: grid; grid-template-columns: 55px auto 32px; align-items: center; padding: 22px; border-radius: 11px; margin-block: 7px; box-shadow: 0px 0px 0px 1px var(--bor);gap: 5px; } cvpo bl bd { padding: 3px 11px; display: grid; gap: 6%; } cvpo>hd { padding-bottom: 22px; display: grid; gap: 2px; } cvpo bd bl hd { display: flex; justify-content: center; align-items: center; height: 55px; width: 55px; } cvpo bl bd p { font-size: 0.88em; margin: 0; font-weight: 400; opacity: 0.4; } cvpo bd h5 { font-size: 21px; font-weight: 500; } cartfill input { background: var(--bc); border: solid 1px var(--bc); border-radius: 5px; height: 55px; } smau sl, .sl { background: transparent; margin: 11px 0; height: auto; } cartfill select { border-radius: 5px; height: auto; width: auto; } cpms>hd>i { height: 66px; width: 66px; margin: auto; } @media only screen and (max-width: 999px){ cvpo bd bl { padding: 11px; height: 64px; } cvpo { margin: 0px 11px; } cvpo bd h5 { font-size: 0.83em; } smaco span { color: var(--a); font-weight: 400; font-size: 0.77em; padding: 5px; } cvpo>hd { padding: 0; } cvpo p { font-size: 0.88em; margin: 0; } cvpo bl bd { padding: 0; } spmu p { font-weight: 400 !important; margin: 0; } cpmom { margin: 11px; } } spmu label { opacity: 1; font-weight: 500; } spmu p { font-weight: 500; } dubl { display: grid; grid-template-columns: 49% 49%; gap: 11px; } spmu .ftt { padding: 0; margin: 0; row-gap: 0; } dubl select { margin-top: 15px; display: block; } cpmom hd { display: grid; grid-template-columns: 46px auto 133px; align-items: center; column-gap: 6px; } ammount { display: flex; align-items: center; gap: 7px; height: fit-content; } smos d>bl { margin: 11px; background: var(--b); padding: 22px; border-radius: 22px; } smcot size { display: flex; align-items: start; gap: 7px; font-family: 'Karla'; margin-bottom: 7px; } /* Participantss */ users>user { display: grid; grid-template-rows: auto auto auto; width: 95%; margin: 7px auto; background: var(--bt); border-radius: 11px; position: relative;overflow: hidden;border: solid 1px var(--bt); padding: 7px; } users>user>hd{position:relative} users>user img { object-fit:cover; width:100%; height: 66%; } participants users>user>bd { margin: 7px; } users>user actn{ display: grid; grid-template-columns: auto 40px; height: 40px; margin-bottom: 11px; grid-column-gap: 4px; } users>user actn>adc{display:flex;justify-content:center;align-items:center;font-weight:bold;color:var(--aa);background:var(--aat);border-radius:7px;font-size: 0.88em;} users>user actn>wish{display:flex;justify-content:center;align-items:center;font-size:2em;font-family:monospace;background:var(--bc);border-radius:7px;} users>user p{margin:0;} users>user wish i svg { opacity: 0.44; } participants user>hd picture { display: block; padding: 6px; border-radius: 28px; overflow: hidden; } participants a.hd { display: flex; justify-content: space-between; } participants lc { display: grid; grid-template-columns: 33px auto auto; gap: 0px; color: var(--a); align-items: center; } participants lc svg { fill: var(--a); } participants user>bd h4 { display: grid; grid-template-columns: auto 22px 22px; } users>user>ft aa { display: grid; grid-template-columns: 22px auto; align-items: center; background: var(--bc); border: 1px solid var(--b-t77); border-radius: 6px; padding: 0 5px; margin: 3px; height: 30px; font-size: 0.88em; justify-content: center; max-width: 100%; } users>user>ft aa h5 { font-weight: 400; } textarea { width: 100%; border: unset; background: unset; font-family: sans-serif; font-weight: 500; color: var(--c); } @media only screen and (max-width: 999px){ users.mg2 { display: block; } users>user { margin: 11px auto; } } @media only screen and (min-width: 999px){ users.dg2 { display: grid; grid-template-columns:50% 50%; } users.dg3 { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; } users.dg4 { display: grid; grid-template-columns: 25% 25% 25%; column-gap: 11px; } users.dg5 { display: grid; grid-template-columns: 20% 25% 25% 25%; } } /* Participantss */ /* Checkout */ ccuto { display: block; background: var(--b); padding: 22px; border-radius: 22px; position: relative; margin-top: 22px; } ccuto select { width: 100%; padding: 8px; margin-top: 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; } ccuto a { color: var(--a); font-weight: 400; } ccuto bl.billing { display: grid; grid-template-columns: 50% 50%; } ccuto bl.product { display: grid; grid-template-columns: 50% 50%; } ccuto bl.product ft { grid-column-start: 1; grid-column-end: 3; } ccuto p { font-weight: 400; } newcomponent main { margin-bottom: 22px; } @media screen and (max-width: 999px) { ccuto { margin: 11px; } ccuto bl.billing { display: block; } ccuto bl.product { display: block; } ccuto bl.billing hd{ margin: 11px 0; } ccuto bl.billing bd { margin: 11px 0; } ccuto bl.product hd{ margin: 11px 0; } ccuto bl.product bd { margin: 11px 0; } } /* Checkout */ /* Meeting type */ cmto .oo oo { box-shadow: 4px 0 11px; margin-left: 42px; } cmto bo { display: block; height: 100%; width: 100%; } cmto bb { right: 7px; position: relative; display: block; height: 27px; max-height: 34px; width: 68px; border-radius: 50px; border: solid 2px; color: var(--b); transition: 333ms; box-shadow: inset 0 0 0 2px var(--aa); overflow: visible; top: 5px; } cmto oo { display: block; height: 21px; width: 21px; background: var(--b); margin: 3px; border-radius: 50%; position: absolute; transition: 333ms; box-shadow: -4px 0 11px; color: #000; } cmto .oo bb { background: var(--c1); color: var(--c1); overflow: hidden; } cmto bb.oo { background: var(--aa); } cmto>bl { display: block; background: var(--b); padding: 22px; border-radius: 22px; height: auto; position: relative; margin-top: 22px;} cmto .category { display: grid; grid-template-columns: 50px auto; align-items: center; gap: 2%; } cmto form { display: grid; gap: 15px; position: relative;} cmto svg { fill: var(--c); height: 22px; } cmto select { width: fit-content; } cmto input { padding: 16px 11px; border: 1px solid var(--bc); border-radius: 7px; font-size: 0.88em; font-weight: 500; background: var(--bc); letter-spacing: 0.22px; height: auto;width: auto; } cmto textarea, cmto select { resize: vertical; min-height: 60px; } cmto .meeting-type, .visibility, .schedule { display: flex; align-items: center; gap: 10px; } cmto input[type="checkbox"], cmto input[type="radio"] { margin-right: 5px; } cmto .actions { text-align: right; } cmto .visibility { display: grid; grid-template-columns: 50px auto; } cmto .visibility bl hd { background: var(--bc); border-radius: 11px; padding: 22px; border: solid var(--bc);display: grid; gap: 2px;} cmto .visibility bl bd { background: var(--bc); border-radius: 11px; padding: 22px; border: solid var(--bc);display: grid; gap: 2px; position: relative;} cmto .visibility p { margin: 0; } cmto bl { display: grid; grid-template-columns: 49% 49%; gap: 2%;position: relative; } cmto btn { display: grid; grid-template-columns: 33px auto; color: var(--a); align-items: center; border: solid 1px var(--bc); padding: 2px 11px; border-radius: 9px; width: max-content; } cmto sp { font-size: 0.88em; margin: 0; font-weight: 400; } bl.dblls btn { border: unset; } cmto bl bd btn { border: transparent; color: var(--c); font-weight: 500; } cmto .visibility bl hd:hover { background: var(--aat); } cmto .visibility bl bd:hover { background: var(--aat); } smho ff bd btn>i { height: 15px; width: 15px; margin: auto; } @media screen and (max-width: 999px) { cmto { margin: 11px; } cmto .category { grid-template-columns: 40px auto; } cmto .visibility bl bd { margin: 11px 0; } cmto bl { display: block; } cmto .visibility { grid-template-columns: 40px auto; align-items: baseline;gap: 7px; } bl.dblls btn { margin: 22px 0; } cmto btn svg { height: auto; } cmto bl bd btn { height: 43px; } cmto select { width: auto; } cmto bb { height: 30px; } cmto oo { height: 23px; width: 23px; margin: 3px; } } /* Meeting type */ /* Meeting_Bot About Content Component*/ /* Meeting_Sessionreviews Create Review Component*/ smbo.review ctor { display: block; } ctor { background: var(--b); display: none; padding: 22px; border-radius: 22px; margin-block: 22px; } ctor hd b { display: flex ; align-items: center; gap: 5px; border-bottom: solid 1px var(--bor); } ctor hd i { width: 35px; height: 35px; } ctor bd rating { display: flex ; align-items: center; gap: 5px; border-bottom: solid 1px var(--bor); } cenr rating input{display: none;} label.label{font-family: system-ui;font-size: 34px;color: #ccc;cursor: pointer;} label.selected{color: #f1ed00;} label.hover{color: #f1ed00;} ctor star {font-size: 30px;transition: color 0.3s ease;} ctor star.full {color: var(--a);} ctor star.half {position: relative;} ctor star.half::before {content: '★';position: absolute;left: 0;top: 0;color:var(--a);width: 50%;overflow: hidden;display: inline-block;} ctor bd cenr { padding: 7px 2px; display: grid;} cenr input { border: solid 1px; margin: 16px 0px; border-radius: 10px;} ctor bd cenr:nth-child(2) { border-bottom: solid 1px var(--bor); } ctor bd { display: grid ; } ctor bd puls { display: flex ; width: 100px; border: dotted 4px var(--bor); border-radius: 11px; margin: 15px 2px; padding: 25px 0px; background: var(--bc); position: relative; } cenr puls input { border: solid 1px; border-radius: 11px; position: absolute; inset: 0; height: auto; width: auto; margin: 0; opacity: 0; cursor: pointer; } ctor bd .pulss { display: flex ; width: 100px; border: solid 4px rgb(63 63 63 / 63%); border-radius: 11px; margin: 15px 2px; padding: 25px 0px; background: rgb(80 117 153 / 22%); position: relative; } ctor puls img { width: 45px; height: 45px; filter: opacity(0.5); } ctor puls i { height: 100%; } ctor bd cenr:nth-child(4) { border-bottom: solid 1px var(--bor); } ctor textarea { border: solid 1px; margin: 16px 0px; border-radius: 8px; padding: 10px 2% 10%; } ctor ft btn { padding: 12px 26px; border-radius: 25px; background: var(--aaa); color: var(--b); display: flex ; align-items: center; float: right; } cenr plss { display: flex ; } cmbop bl hd input { margin: auto; background: unset; width: 77px; padding: 0; text-align: center; height: 16px; } svis invoiceslist>hd bx h4 { display: grid; justify-content: center; } /*Channel New*/ schn.fld aa.fe, .all aa.al, .scs aa.su, .pnd aa.pe { border-bottom: solid; } schn.all all.al { display: block; } schn.scs succes.su { display: block; } schn.pnd pending.pe { display: block; } schn.fld Failed.fe { display: block; } schn hd h2 { padding: 0; } schn gp d { display: block; padding-top: 11px; } schn gp { margin: 0; } schn { background:unset; padding: 0; margin: 4px 0; } schn gp h6 { color: var(--c0); } schln mg a { display: flex; justify-content: center; align-items: center; position: relative; font-weight: 400; height: 50px; } schln mg hd { display: grid; gap: 11px; grid-template-columns: 77px 77px 77px; } schn trc { display: grid; grid-template-columns: unset; align-items: center; border-radius: 7px; padding: 11px; max-width: 100%; position: relative; margin: 7px 0; width: auto; border: solid 1.6px var(--bc); } schn trc bl { display: grid; grid-template-columns: 44px auto 60px; height: auto; width: auto; justify-content: unset; background: var(--0); gap: 2%; align-items : center;} all trc hd>i { background: var(--bc); width: 45px; height: 45px; border-radius: 44px; } schn all trc>bd { display: flex; gap: 11px; justify-content: unset; } schn bd h7 { display: block; font-weight: 500; } schn trc hd i svg { height: 25px; width: 25px; } schn h7 i { height: 18px; width: 18px; } schln .aerea { justify-content: start; padding-top:22px;} schn stn { display: grid; align-items: center; padding: 11px; grid-template-columns: auto 130px; gap: 7px;} schn stn btn i svg { fill: var(--b); } schn stn bd btn { display: grid; grid-template-columns: 34px auto; margin: 0; padding: 3px 0px; } schn bd>i { height: 36px; width: 24px; } schn scn { display: grid; border-radius: 7px; padding: 11px; margin: 7px 0; border: solid 1.6px var(--bc); } schn scn hd { display: grid; grid-template-columns: 44px auto; justify-content: unset; background: var(--0); gap: 2%; align-items: center; } schln { display: grid; background: var(--b); } schln h>d { padding: 22px 22px 0px 22px; border-bottom: solid 1px var(--bor); } scnb bd i img { height: 120px; width: 120px; border-radius: 100px; } scnb bl>bd { display: grid; grid-template-columns: 270px auto; } scnb bl { display: grid; } scnb bl>bd i { height: auto; background: var(--bc); margin: 11px; padding: 11px; width: auto;} scnb bd t h4 { padding: 7px 17px; background: var(--bc); font-weight: 500; border-radius: 44px; position: relative; z-index: 99999; width: 37px; align-items: center; justify-content: center; display: grid; margin-top: 7px; } scnb bd t h4:hover { background: var(--bor); } schln mg a:this { border-bottom: solid 2px var(--c0); } schln mg btns btn:nth-child(1):hover { background: var(--bor); } schln mg { display: grid; align-items: center; justify-content: space-between; padding-top: 22px; grid-template-columns: auto auto; } schln mg bd btns { display: grid; gap: 11px; grid-template-columns: 124px 81px 80px; } schln mg btns btn { display: grid; padding: 7px 14px; background: var(--bc); border-radius: 22px; align-items: center; color: var(--c0); font-weight:500; } schln span i { height: 16px; width: 16px; } schln trc hd bd t { font-size: 14px; width: 500px; display: block; } schln hd h3 { font-weight: 600; } schln mg btns btn:nth-child(1) { color: var(--c); } svis trcs>trc img { object-fit: contain; height: 100%; width: 100%; } schn all trc ft btn { padding: 7px 7px; display: grid; margin: 0; } cmcto>hd>input { width: 15px; height: 15px; position: absolute; z-index: 999; top: 22px; left: 5px; } schln lnk { display: grid; grid-template-columns: 28px auto 41px; align-items: center; gap: 11px; margin-top: 22px; transform: scale(0); height: 0; } schln lnk bd>bl { display: grid; padding: 6px; box-shadow: 0px 0px 0px 1.5px var(--bor); border-radius: 3px; } schln lnk>bd { display: grid; grid-template-columns: 35% 63%; justify-content: center; gap: 11px; } schln lnk bl input { height: 20px; padding: 0 11px; opacity: 0.6;} schln lnk bd bl>hd { padding: 0 11px; } schln lnk hd h5 { font-weight: 500; } schln lnk>hd { opacity: 0.6; } schln lnk>ft svg { fill: var(--c) !important; } .lnk lnk { transform: scale(1); height: auto; } schln lnk>ft { opacity: 0; } schln lnk:hover ft { opacity: 1; height: 40px; width: 40px; align-items: center; justify-content: center; display: grid; } schln lnk>ft:hover { opacity: 1; background: var(--bc); align-items: center; justify-content: center; display: flex; border-radius: 22px; } schln lnk>ft i { height: 20px; width: 20px; } .language language { transform: scale(1); } language { display: grid; height: auto; bottom: unset; overflow: hidden; overflow-y: auto; max-width: 999px; right: 55px; box-shadow: var(--bs-b); left: 220px; top: 137px; position: absolute; z-index: 999999999999999999999; opacity: 1; margin: auto; align-items: center; background: var(--b); border-radius: 22px; transform: scale(0); transition: 333ms; } language>d>hd { border-bottom: solid 1px var(--bor); display: flex; padding: 11px; align-items: center; gap: 7px; } language>d>bd { display: grid; grid-template-columns: 49% 49%; } language bd>bl { padding: 22px; } language bd>bl:first-child { border-right: solid 0.3px var(--bor); } language bd bl>hd { display: flex; padding: 6px; box-shadow: 0px 0px 0px 1.5px var(--bor); border-radius: 3px; align-items: center; justify-content: space-between; } language>d>hd i { height: 20px; width: 20px; } language bd bl>hd i { height: 30px; width: 30px; } language bd>lgc slt { font-size: 1.5em; opacity: 0.6; font-weight: 500; } language bd bl>bd { display: flex; padding: 6px; box-shadow: 0px 0px 0px 1.5px var(--bor); border-radius: 3px; align-items: center; margin: 22px 0; background: var(--bc)} language bd bl>ft { display: flex; padding: 6px; box-shadow: 0px 0px 0px 1.5px var(--bor); border-radius: 3px; background: var(--bc); height: 200px; align-items: start; } language bl h5 { opacity: 0.7; } language d>ft { border-top: solid 1px var(--bor); display: flex; padding: 11px; align-items: center; gap: 7px; justify-content: end;} language d ft btns { gap: 11px; display: flex; } language d ft btns btn { background: var(--bc); padding: 7px 14px; border-radius: 22px; font-weight: 500; opacity: 0.6; } language btns btn:nth-child(1) { opacity: 1; } schln schn asn { display: grid; background: var(--b); position: absolute; right: 329px; padding: 11px; box-shadow: var(--bs-b); border-radius: 11px; transform: scale(0); height: 270px; } asn bl bd h4 { display: grid; opacity: 0.7; font-weight: 400; } .asn asn { transform: scale(1); } schln schn asn d { display: grid; overflow: scroll; overflow-x: auto; scrollbar-width: thin; } schln schn asn bl bd { display: grid; margin: 11px; gap: 11px; margin-top: 3px; } @media only screen and (max-width: 999px){ schn trc hd bd name { font-size: 12px; } schn all trc hd>i { width: 30px; height: 30px; } schn trc hd i svg { height: 15px; width: 15px; } schln mg bd btns btn { font-size: 9px; justify-content: center; } schln mg bd btns { display: grid; gap: 5px; grid-template-columns: 85px 55px 55px; } schln mg hd>aa { font-size: 9px; } schln d mg>hd { display: grid; gap: 4px; grid-template-columns: 40px 50px 50px; font-size: 11px; } schln h>d { padding: 0px 7px 0px 7px; } schn { display: grid; margin: 0 11px; } schn trc bl { grid-template-columns: 34px auto 45px; gap: 11px; } schn all trc ft btn { font-size: 0.77em; border-radius: 22px; } schln mg { padding: unset; } schn scn hd { grid-template-columns: 25px auto; } schn bd stn { grid-template-columns: auto 104px; } schn stn>bd btn { display: grid; justify-content: center; align-items: center; border-radius: 22px; grid-template-columns: 26px auto; padding: 2px 3px; margin: unset; font-size: 0.77em; } schn bd all name { font-size: 0.9em; } schln schn asn { right: 0; } scnb bd i img { height: 80px; width: 80px; } scnb bl>bd { grid-template-columns: 160px auto; } scnb bd t { font-size: 0.77em; } scnb bl hd { margin: 0 11px; } scnb bl>bd t { margin-top: 11px; } scnb bl hd p { margin: 0px; } language { margin: 0 7px; right: 0; left: 0; } language bl h5 { font-size: 0.8em; } language bd>lgc slt { font-size: 1em; } schln lnk>bd { grid-template-columns: 42% 56%; gap: 6px; } schln lnk bl input { padding: 0 0px; width: 100%; } schln lnk hd h5 { font-size: 11px; } schln lnk bd bl>hd { padding: 0 0px; } schln basic p { font-size: 0.822rem; } } cnfo>bd>t { font-weight: bold; } cnfo>bd>p { margin-bottom: 11px; } cnfo>hd>i { height: 45px; width: 45px; background: #fff; border-radius: 50%; overflow: hidden; } cnfo>ft>i { border-radius: 11px; overflow: hidden; height: 77px; width: 77px; } cnfo>ft { display: grid; justify-content: end; } cnfo btns { display: flex;} cnfo btns>btn { display: grid; justify-content: center; align-items: center; border-radius: 7px; background: var(--bc); color: var(--c); padding: 6px 22px; margin: 4px; } cnfo btns>btn:last-child { background: var(--aaa); color: var(--b); } cnfo { display: grid; grid-template-columns: 15% auto 25%; padding: 8px 11px; border-bottom: 1px solid var(--bc); margin: 6px 0; } /* Changed by Gagan Nayak */ crmo aa>i>img { height: 100%; width: 100%; object-fit: cover; } crmo>ft>bl>bd t { font-size: 0.88em; color: var(--bt); } crmo { background-image: url(/0/IMG/MeetingRoom.webp); border-radius: 22px; background-size: 100%; margin-top: 11px; height: 100%; max-height: 564px; display: flex; flex-direction: column; padding: 22px; } crmo>hd>bl { display: grid; grid-template-columns: 37px auto 90px; align-items: center; padding: 6px; font-size: 0.88em; } crmo>bd { overflow: hidden; display: grid; justify-content: center; } crmo>ft>bl { background: var(--b-t22); margin: 11px 0; padding: 5px 11px; border-radius: 22px; display: grid; grid-template-columns: 55px auto 44px; align-items: center; border: solid 1.7px var(--b-t); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(3px); } crmo>ft>bl btn:hover { background: var(--hover); } crmo>ft>bl btn { height: 44px; display: block; width: 44px; align-content: center; border-radius: 55px; } crmo>ft>bl btn svg { fill: var(--bt); } rma hd bl>bd>h4 { font-weight: 400; background: var(--b-t22); padding: 6px 22px; border-radius: 33px; font-size: 0.96em; color: var(--bt); } crmo>bd>aa>i { display: grid; border-radius: 22px; overflow: hidden; border: solid 1.9px var(--b-t); height: 144px; width: 144px; justify-items: center; background: var(--b-t44); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } crmo>hd>bl>bd { display: grid; justify-content: center; } crmo ft>bl>hd>i { width: 30px; } crmo ft>bl>hd>i>svg { fill: var(--b); } crmo>ft>bl>bd>p { font-weight: 300; color: var(--b-t); margin: 5px 0; width: 100%; height: fit-content; max-height: 25px; line-height: 0.88em; display: flex; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } smcot size>b { white-space: nowrap; } @media screen and (max-width: 999px) { crmo>bd { display: flex; overflow-x: scroll; justify-content: unset; } } /* System */ ssys battery hd { display: grid; align-items: center; font-size: 5em; font-weight: 600; grid-template-columns: 205px 180px; } ssys tnc hd { display: flex; justify-content: space-between; width: 555px; align-items: center; } ssys tnc hd p { font-size: 1.5em; } ssys nam { display: flex; align-items: center; gap: 11px; } ssys nam t { font-size: 2.2em; font-weight: 500; opacity: .6; } @media screen and (min-width: 999px) { sgno main { width: 100%; overflow: hidden; max-width: 1111px; } ssns main { width: 100%; overflow: hidden; max-width: 1111px; } ssns .aerea { justify-content: start; margin: unset; } sgn main { max-width: unset; } smsu cafo>btns { max-width: 66%; } } csops csopo ac1 { display: flex; align-items: center; justify-content: end; } csops csopo ac1 bb bo { border-radius: 55px; } csops csopo ac1 bo oo { height: 15px; width: 15px; margin-top: 3px; } csops h3 { font-size: 1.22em; font-weight: 500; margin-top: 22px; margin-bottom: 11px; } csops pp { display: grid; grid-template-columns: auto auto auto; height: 0px; align-items: center; background: var(--b); border-radius: 11px; transition: 333ms; font-size: 1.33rem; text-align: center; font-weight: 500; color: var(--aa); } .csops pp { padding: 33px 11px; height: auto; border-top: 0; } .csops .advc>ft i svg { transform: rotate(-90deg); } smbs sl input:focus { box-shadow: unset;border-radius: 0; } cccs .cashs next svg path { fill: var(--b); } .pado pado { transform: scale(1); } pado { display: grid; height: auto; bottom: unset; overflow: hidden; overflow-y: auto; max-width: 999px; right: 55px; box-shadow: var(--bs-b); left: 220px; top: 137px; position: absolute; z-index: 999999999999999999999; opacity: 1; margin: auto; align-items: center; background: var(--b); border-radius: 22px; transform: scale(0); transition: 333ms; } pado>d>hd { border-bottom: solid 1px var(--bor); display: flex; padding: 11px; align-items: center; gap: 7px; justify-content: space-between;} pado>d>bd { display: grid; grid-template-columns: 50% 50%; height: 673px; } pado bd bl>hd { display: flex; align-items: center; justify-content: space-between; border-bottom: solid 1px var(--bor); } pado>d>hd i { height: 24px; width: 22px; padding: 6px; } pado bd bl>hd:last-child { border-left: solid 0.3px var(--bor); } pado bl h5 { color:var(--c0); } pado bl>syv { display: flex; align-items: center; justify-content: space-between; border-bottom: solid 1px var(--bor); } pado bd bl lgs { padding: 7px 11px; display: grid; align-items: center; grid-template-columns: 25px auto 25px; flex: 1 1 auto; padding-right:19px; } pado bd bl lgs i { opacity: 0.8; padding:6px; } pado lgs ft svg { height: auto; width: auto; } pado lgs ft i:hover { background: var(--bc); border-radius: 22px; } pado lgs bd input { width: calc(100% - 36px); } pado btn svg { width: auto; } pado>d>hd i:hover { background: var(--bc); border-radius: 22px; } pado btn t { font-size: 11px; color: var(--c); display: grid; background: var(--b); padding: 3px 7px; align-items: center; border-radius: 22px; justify-content: center; margin-top: 3px; display: none; position: absolute; box-shadow: var(--bs-b); } pado btn:hover t { display: grid; } cmcto>ft { grid-column-start: 2 !important; } @media only screen and (max-width: 999px){ pado { left: 0; right: 0; width: 95%; } pado bd bl lgs { grid-template-columns: 40px auto; } sgno ft>d { grid-template-columns: unset !important; } sgno rms { grid-template-columns: unset !important; } sgno hd>bl { grid-template-columns: 60% auto !important; } cmcto>bd { grid-column-start: 2; grid-column-end: 4; grid-row-end: 2; display:block; } } sgnosgno t { font-size: 14px; } /* Genre */ sgno cmrmo { display: flex; box-shadow: 0px 0px 20px 3px var(--bc); position: relative; gap: 12px; overflow: hidden; margin: 4px 0; border-radius: 14px; background: var(--bt); align-items: center; padding: 11px; } sgno cmrmo>ft fct { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; padding: 11px; } sgno cmrmo>hd { display: block; width: 19%; overflow: hidden; border-radius: 3px;} sgno cmrmo>hd>i { height: 100%; width: 100%; } sgno cmrmo>hd img { height: 100%; width: 100%; } sgno cmrmo bx>hd { display: flex; flex-direction: column; } sgno cmrmo>bd { display: block; padding: 11px 0; } sgno cmrmo bx btn { padding: 6px 22px; background: var(--aaa); align-items: center; justify-content: center; display: flex; border-radius: 5px; color: var(--b); position: relative; z-index: 9999; } sgno cmrmo bx { display: flex; justify-content: space-between; } sgno cmrmo fct i { height: 18px; width: 18px; } sgno cmrmo bx nam { font-weight: 500; font-size: 1em; } sgno rms { display: grid; grid-template-columns: 31.88% 32.88% 32.88%; gap: 1%;margin-top: 11px; margin-bottom: 100px; } sgno t { font-size: 14px; } sgno ft>bl { margin-top: 22px; } sgno ft>d { display: grid; grid-template-columns: 15.83% 15.83% 15.83% 15.83% 15.83% 15.83%; gap: 1%; margin-top: 11px; } csns bl ft>p { margin-top: 4px; font-size: 12px;} csns bl hd i { border-radius: 5px; display: grid; overflow: hidden; } sgno hd>bl>hd { display: grid; grid-template-columns: 39px auto; align-items: center; width: calc(100% - 0px); background: var(--bc); border-radius: 7px; border: solid 0.2px var(--bc);} sgno songs>hd { margin-top: 11px; display: grid; } sgno hd input { width: calc(100% - 44px); background: unset; } sgno hd bl>bd { display: grid; grid-template-columns: 27px 40px; align-items: center; gap: 11px; } sgno hd>bl { display: grid; grid-template-columns: 37% auto; justify-content: space-between;} sgno hd bl>bd i:last-child { height: 33px; width: 33px; background: var(--aat); border-radius: 22px; overflow: hidden;} sgno hd bl>bd i { height: auto; } sgno genre>hd { margin-top: 11px; display: grid; } csns bl hd ii>btn { display: block; height: 44px; width: 44px; background: var(--bt); border-radius: 22px; margin-left: auto; } csns bl hd ii { position: absolute; display: grid; bottom: 0; top: 0; right: 0; left: 0; padding: 11px; background: var(--b-t44); transition: 333ms; visibility: hidden; align-items: end; } csns bl hd { position: relative; } csns:hover bl hd ii { visibility: visible; } csns>bl>ft { padding: 11px; padding-top: 0; } csns>bl>bd { padding: 11px; padding-bottom: 0; } csns { display: block; box-shadow: 0px 0px 20px 3px var(--bc); position: relative; border-radius:5px; background: var(--bt); margin-top:11px;} sgno ft>hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 11px; } sgno ft hd b { display: grid; grid-template-columns: auto 33px 33px; align-items: center; gap: 7px; } sgno hd b .btn { opacity: 0.44; transform: rotate(180deg); } sgno hd b btn { border-radius: 44px; border: solid 1px; height: 28px; width: 28px; margin: auto; justify-content: center; align-items: center; } sgno ft hd a { font-weight: 500; font-size: 0.88rem; border: solid 1px; padding: 7px 11px; border-radius: 44px; line-height: 1; } /* Songs */ ssns cmrmo { display: grid; box-shadow: 0px 0px 20px 3px var(--bc); position: relative; gap: 12px; overflow: hidden; margin: 4px 0; border-radius: 14px; background: var(--bt); grid-template-columns: 58px auto ; align-items: center; padding: 11px; cursor: move; } ssns cmros bl { margin: 11px 0; background: var(--b-t22); border-radius: 22px; padding: 22px; } ssns cmros bl>hd { display: flex; gap: 11px; border-bottom: 1px solid var(--bc); } ssns bd bx hd { display: grid; justify-content: space-between; grid-template-columns: auto auto; } ssns cmrmo bx { display: flex; flex-direction: column; align-items: stretch; } ssns bd bx bd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } /* GigNew Overview */ sgn .aerea { justify-content: start; } sgn ovrw { display: grid; margin: 11px 0; background: var(--bt); border-radius: 22px; padding: 22px; grid-template-columns: 30% auto; } sgn bl div1 input { border: solid 1px var(--bc); padding: 7px 28px; margin: 2px; border-radius: 11px; font-size: 13px; font-weight: 700; background: var(--0); } sgn ovrw>bl { padding: 22px; } sgn ovrw bl hd>h5 { display: grid; justify-content: end; color: var(--bor); } sgn ovrw bl hd div { display: grid; grid-template-columns: auto auto; gap: 11px; margin-top: 50px; } sgn ovrw bl>bd { margin-top: 50px; } sgn ovrw bd>input { border: solid 1px var(--bc); padding: 7px 28px; margin: 2px; border-radius: 11px; font-size: 13px; font-weight: 700; background: var(--0); } sgn ovrw bl bd>d { margin-top: 22px; display: grid; } sgn ovrw bl bd>btn { background: var(--aaa); padding: 11px; margin-top: 11px; display: inline-grid; border-radius: 7px; color: var(--b); } sgn ovrw bl>ft { display: grid; grid-template-columns: 25px auto auto; align-items: center; } sgn ovrw bl ft circle { fill: var(--a); } sgn ovrw bl ft t { text-align: center; color: var(--a); } sgn bl mg a { display: flex; justify-content: center; align-items: center; position: relative; margin: 0 2px; opacity: 0.8;} sgn mg stp { display: grid; grid-template-columns: auto auto 30px; align-items: center; margin: 0px 3px; } sgn mg h4 { display: flex; justify-content: center; align-items: center; gap: 11px; height: 25px; width: 25px; background: var(--bor); border-radius: 22px; color: var(--b); margin-right: 4px; } /* GigNew Prime */ sgn services hd input { width: unset; } sgn services hd { display: grid; grid-template-columns: 25px auto 20px; align-items: center; gap: 11px; padding: 0px 11px;} sgn services { display: grid; background: var(--b); align-items: center; margin-top: 11px; border: solid 1px var(--bc);} sgn services hd i { display: grid; height: 20px; width: 20px; background: var(--bor); align-items: center; justify-content: center; color: var(--b); border-radius: 22px; } sgn services select { margin: 0; border: solid 3px var(--bc); width: 100%; border-radius: 11px; height: 39px; padding: 7px; background: var(--b-t77);} sgn services bl>h4 { display: grid; font-weight: 600; justify-content: end; padding: 22px 0; } sgn services>bd { display: grid; margin: 7px 0; background: var(--bc); padding: 0px 11px; border: solid 1px var(--bc);} sgn services>ft bl { display: grid; grid-template-columns: 25px 23% 22% 12% 15% 17%; align-items: center; gap: 11px; border-bottom: solid 1px var(--bc); padding: 0px 11px; } sgn services ft input { width: unset; } sgn services ft add { display: grid; grid-template-columns: 44px auto; align-items: center; color: var(--a); } sgn services ft add svg { fill: var(--a); } cgdo { display: grid; grid-template-columns: 28% 22% 17% 15% 12%; align-items: center; gap: 11px; margin: 7px 0; } cgdo h4 { display: grid; font-weight: 600; justify-content: end; padding: 22px 0;} cgdo select:focus-visible { outline: 1px solid #222325; } sgn packages hd bl { display: grid; grid-template-columns: 20% auto; } sgn packages hd bl bd { display: grid; grid-template-columns: auto auto auto; } sgn packages bd select { padding: 14px; margin: 0; border: solid 1px var(--bc); width: 100%; height: 58px; border-radius: unset;} sgn table { width: 100%; border-collapse: collapse; border: 1px solid var(--bc);} sgn th, td { border: solid 0px var(--bc); padding: 8px; text-align: left; } sgn th { background-color: var(--b); } sgn table trc { height: auto; display: grid; } sgn table trc th { display: grid; height: auto; align-items: end; } sgn table tr.Revisions { grid-template-columns: auto; grid-row-start: 1; grid-row-end: 9; } sgn table tr.Revisions th { display: grid; height: auto; align-items: end; } sgn tr.name th { background: var(--bc); } sgn amount input { width: 100%; padding: 8px; box-sizing: border-box; border-radius: 7px; border: solid 3px var(--bc); } sgpo>d { overflow: scroll; } sgn td select { border: unset; background: unset; } sgn td.ramuvv { border-top: unset; border-bottom: unset; align-items: end; display: grid; } sgn td input { border: unset; width: unset; background: unset; padding: unset;} sgn tr th.ramuv { background-color: unset; } sgn tr th.ramuv { background-color: unset; border-bottom: 0px; } sgn tr td d { display: grid; justify-content: center; } sgn td textarea { resize: none; font-size: 15px; padding: unset; border: unset; background: unset; letter-spacing: unset; } sgn tbody tr { background: var(--b); display: grid; grid-template-columns: 25% 25% 25% 25%; } sgn tbody .package td { display: grid; grid-template-columns: auto 22px; align-items: start; height: 90px; } sgn tbody .offering td { display: grid; grid-template-columns: auto 22px; align-items: start; height: 130px; } sgn textarea:focus-visible { outline: 0px; } sgn tbody .package td i { height: auto; } sgn tbody .offering td i { height: auto; } sgn description hd p { font-size: 0.88em; font-weight: 400; margin: 0; } sgn description { display: grid; padding: 11px } sgn description bd bl { display: grid; grid-template-columns: auto auto; justify-content: left; align-items: center; gap: 22px; } sgn description bd p { font-size: 0.88em; font-weight: 400; color: var(--c0); margin-top: 11px; } sgn bd bl btn { background: var(--aaa); color: var(--b); padding: 2px 11px; border-radius: 11px; align-items: center; display: grid; padding-top: 0px; } sgn work hd h2 { text-align: center; font-size: 1.5em; } sgn bd work { padding-top: 44px; display: grid; } sgn description work p { text-align: center; } sgn work i svg { fill: var(--0); width: 55%; height: 55%; } sgn work i { height: auto; padding: 39px 0px; border-bottom: solid 2px var(--bor); margin-bottom: 44px; border-bottom: border-radius:unset; } sgn description ft bl { display: grid; grid-template-columns: auto auto; align-items: center; border-bottom: solid 2px var(--bor); margin-top: 44px; padding-bottom: 11px; justify-content: space-between; } sgn description ft btn { color: var(--a); display: grid; font-weight: 500; font-size: 0.88em; } sgn work p a { font-size: 0.88em; color: var(--a); margin-left: 7px; } sgn description ft d { display: flex; gap: 7px; border-bottom: solid 2px var(--bor); margin-top: 44px; padding-bottom: 22px; justify-content: space-between; } sgn description ft d p { font-weight: 500; margin: 0; } sgn description d hd p { font-size: 1em; font-weight: 500; color: var(--c0); margin-top: 7px; } sgn .pricing-table { margin: 0 auto; border-collapse: collapse; box-shadow: 0 0 10px rgba(0,0,0,0.1); } sgn .pricing-table th { background-color: #f9f9f9; font-weight: bold; } sgn .pricing-table input[type="number"] { width: 100%; padding: 8px; box-sizing: border-box; border-radius: 7px; border: solid 3px var(--bc); } sgn .pricing-table input[type="checkbox"] { transform: scale(1.5); } /* Briefly component */ sgdo { padding-bottom: 70px; display: grid; } sgdo>d { display: grid; background: var(--b); align-items: center; margin: 11px 0px; border: solid 1px var(--bor); } sgdo hd btns { display: grid; grid-template-columns: 17px 17px 19px 28px 28px; gap: 11px; padding: 11px; border-bottom: solid 2.23px var(--bor);} sgdo hd btns i { height: auto; } sgdo editor { display: grid; height: 250px; } sgdo btns btn { display: grid; align-items: center; } sgdo h4 { display: grid; color: var(--bor); text-align: end; } sgdo { padding-bottom: 70px; display: grid; margin-bottom: 11px; border-bottom: solid 2px var(--bor); } sgmo hd { display: grid; grid-template-columns: 35px auto; align-items: center; opacity: 0.6; } sgmo ft t { font-size: 1.2em; } sgmo { border: solid 1px var(--bor); display: grid; padding: 11px; border-radius: 5px; margin: 11px 0px; } sgn requirements>d { display: grid; padding: 11px; border: solid 1px var(--bor); border-radius: 5px; background: var(--b); } sgn hd divider { display: grid; position: relative; grid-template-columns: auto min-content auto; width: auto; margin: 11px auto; } sgn divider>t { padding: 0 11px; width: 136px; } sgn divider>d { height: 1px; background: var(--c0); } sgn requirements d>hd>p { font-size: 0.9rem; font-weight: 500; color: var(--c0); margin: 0; } sgn d>ft>p { font-size: 0.99em; font-weight: 500; display: grid; margin-bottom: 30px; } sgmo ft>p { line-height: 21px; font-weight: 500; font-size: 0.9rem; } sgn d ft>btn { color: var(--a); font-weight: 500; font-size: 0.88em; border: solid 2px var(--a); padding: 7px; border-radius: 7px; display: block; width: fit-content; } sgn question hd>bl { display: grid; grid-template-columns: auto auto; margin-bottom: 11px; } sgn question hd>bl bd { display: grid; grid-template-columns: 27px auto; justify-content: end; } sgn uestion { background-color: var(--bc); border: 1px solid var(--bor); padding: 24px 20px 20px; display: grid; margin-top: 22px; } sgn question hd>textarea { display: flex; box-sizing: border-box; width: 100%; resize: none; font: inherit; padding: 8px 16px; border: 1px solid var(--bor); border-radius: 8px; transition: none; background: var(--b); } sgn question hd>bl input { height: auto; width: auto; } sgn question { background-color: var(--bc); border: 1px solid var(--bor); padding: 24px 20px 20px; display: none; margin-top: 22px; } sgn hd textarea:focus { outline: 1px solid var(--c); } sgn question hd>p { display: grid; font-size: 18px; opacity: 0.5; margin-top: 8px; font-weight: 500; justify-content: end; } sgn question bd select { width: 200px; background: var(--b); border: solid 1px var(--bor); margin-top: 11px; font-weight: 500; font-size: 19px; } sgn question bd select:focus { outline: 1px solid var(--c); } sgn question>ft btns { display: grid; font-size: 18px; margin-top: auto; font-weight: 500; justify-content: end; grid-template-columns: auto auto; gap: 11px; } sgn question>ft btns btn { border: solid 1px var(--bor); padding: 7px 11px; border-radius: 7px; } sgn question>ft btns btn:last-child { background: var(--c); color: var(--b); } sgn question.trc { display: block; } sgn td textarea:focus~i { display: none; } sgn gallery { display: block; margin: 11px; } sgn gallery hd>d { background: var(--aaa); margin: 11px 0; border: 1px solid var(--bc); padding: 0px 15px; margin-top: 22px; border-radius: 11px; color: var(--b); } sgn requirements divider { width: auto; } sgn gallery bd bl { display: grid; grid-template-rows: 80px auto auto; align-items: center; padding: 11px; border: dashed 1.22px var(--bor); background-color: var(--b); line-height: 100%; font-size: 12px; justify-content: center; border-radius: 11px; max-width: 188px; } sgn gallery bd bl i { height: 60px; opacity: 0.6; } sgn gallery bd bl p { font-size: 14px; font-weight: 500; color: var(--c0); } sgn gallery bd bl h4 { color: var(--a); font-size: 18px; font-weight: 500; cursor: pointer; text-align: center; display: grid; padding-bottom: 22px; } sgn gallery bd>d>p { margin-top: 0; font-weight: 500; font-size: 1em; } sgn gallery>bd>d { margin: 22px 0; background: var(--bt); padding: 11px; border-radius: 11px; } sgn publish>h4 { display: grid; justify-content: center; font-size: 1.6em; letter-spacing: 2px; word-spacing: 4px; } sgn publish>p { text-align: center; font-size: 1.3em; padding: 0px 11px; } sgn publish { padding: 62px 0px; border: 1px solid var(--bor); margin-bottom: 20px; background: var(--b); display: block; border-radius: 5px 5px 0 0; } sgn publish i svg { fill: var(--0); height: 170px; margin-bottom: 30px; } sgn videos { margin: 7px; display: grid; } sgn buttons btn { display: grid; padding: 11px; background: var(--c); color: var(--b); } sgn buttons { display: grid; justify-content: end; } sgn buttons btn { display: grid; border-radius: 11px; } sgn buttons back { margin: 11px; color: var(--a); cursor: pointer; text-align: end; } /* Aktualnie component */ caktualnie d { display: inline-grid; background: var(--b-t); padding: 11px; border-radius: 11px; margin-top: 11px; } caktualnie d hd bl { display: grid; grid-template-columns: auto auto; justify-content: flex-start; gap: 11px; } caktualnie hd bl i { height: 44px; width: 44px; border-radius: 44px;} caktualnie hd bl i img { border-radius: 11px; } caktualnie bd bl hd { display: grid; grid-template-columns: 39px auto; } caktualnie bd bl { display: flex; gap: 22px; } caktualnie bd bl bd h5 { display: grid; color: var(--a); } caktualnie ft btn { background: var(--bc); padding: 7px; border-radius: 22px; font-weight: 700; display: block; text-align: center; } caktualnie hd p { background: var(--bc); padding: 5px 11px; border-radius: 7px; font-weight: 700; display: inline-block; margin-top: 0px; font-size: 0.777em; } caktualnie bd bl hd t { font-size: 14px; opacity: 0.8; } caktualnie d hd bl bd t { display: grid; font-size: 14px; } /* Procownicy component */ cpwcy d { justify-content: flex-start; display: inline-grid; grid-template-columns: auto auto; gap: 11px; background: var(--b-t); padding: 11px; border-radius: 11px; margin-top: 11px; align-items: center; } cpwcy hd i { display: grid; height: 22px; width: 22px; padding: 11px; background: var(--bc); border-radius: 22px; } smas { display: block; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--b-t22); margin-top: 22px; } /* walet */ @media screen and (max-width: 999px) { .home home wallet bl ft {grid-template-columns:116px 22px auto;} } home wallet bl>ft { display: grid; grid-template-columns: auto 22px auto; align-items: center; height: 45px; } home wallet bl btn{display:grid;max-width: 333px;background:var(--aaa);height:44px;justify-content:center;align-items:center;margin-left:11px;border-radius:7px;} home wallet bl btn a { color: var(--b); } home wallet bl ft d { position: relative; } /* wallets */ cwlo { align-items: center; } /* Changed by Gagan for Meeting Session */ ccmo { display: flex; justify-content: center; padding: 11px 0; align-items: center; background: var(--bor); padding: 11px; border-radius: 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); max-width: 95%; margin: auto; } ccmo:after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(148deg, var(--bor), var(--bor), var(--bor)); z-index: -1; border-radius: 22px; } ccmo>i { display: flex; border-radius: 55%; height: 33px; width: 33px; margin: 0 6px; padding: 6px; place-content: center; align-items: center; background: var(--b-t22); } ccmo i>svg { height: 18px; width: 18px; } @media screen and (max-width: 999px) { .start screen { overflow: hidden !important; } } /* Meeting_Subscription */ cpsolti sstm hd { display: grid; margin: auto; justify-content: start; } cpsolti sstm slc:after { content: " "; position: absolute; height: 14px; width: 43px; background: var(--aaa); border-radius: 3px; right: 15px; bottom: 13px; margin: auto; } cpsolti div {display: grid; grid-template-columns: 77px auto auto; align-items: center; padding: 22px; margin: 11px 0; border-bottom: solid 1px var(--bc);} cpsolti bd> bl bd {display: grid; grid-template-columns: 19% 19% 19% 19% 19%; align-items: center; padding: 22px; height: 100%; gap: 1.3%; width: 70%; margin-left: 7%;} cpsolti> bd bl { display: grid; position: relative; } cpsolti pbg { display: grid; height: 100%; } cpsolti pbg img { height: 100%; border-radius: 11px; width: 100%; display: grid; } cpsolti> bd hd h3 { display: grid; font-size: 1.55rem; font-weight: 500; } cpsolti div hd i { height: 44px; width: 44px; } cpsolti div bd h3 { font-size: 1.55rem; font-weight: 500; } cpsolti div bd p { font-size: 1.22rem; opacity: 0.55; margin: 0; } cpsolti div ft> i { transform: rotate(180deg); } cpsolti> bd cho bl { grid-template-columns: auto auto; justify-content: space-between; align-items: center; margin: 11px 0; border-top: solid 1px var(--bc); padding: 11px 0; } cpsolti cho { margin-top: 0px; padding: 22px; } cpsolti> bd cho btn {display: grid; grid-template-columns: auto 44px; align-items: center; padding: 0 11px; border: solid 1px var(--bc); border-radius: 7px; width: 170px; height: 44px;} cpsolti> bd cho bl h3 { font-size: 1.55rem; font-weight: 400; } cpsolti div ft btn { display: grid; grid-template-columns: auto 33px; align-items: center; width: fit-content; border: solid 1px var(--bc); padding: 7px 22px; gap: 11px; border-radius: 11px; font-size: 1.11rem; } cpsolti div ft { display: grid; justify-content: end; grid-template-columns: auto 33px; align-items: center;gap:11px;} @media screen and (max-width: 999px) { cpsolti sstm slc { height: 100px; width: 100px; } cpsolti bd> bl bd { grid-template-columns: 33% 33% 33%; } cpsolti div hd i { height: 33px; width: 33px; } cpsolti div bd h3 { font-size: 1rem; } cpsolti div bd p { font-size: 0.88rem; } cpsolti div ft { grid-template-columns: auto 22px; } cpsolti div ft btn { padding: 7px 11px; grid-template-columns: auto 22px; } cpsolti div { grid-template-columns: 44px auto auto; padding: 11px; } cpsolti> bd cho btn { width: 100px; font-size: 0.88rem; } cpsolti> bd cho bl h3 { font-size: 1.11rem; } } sactsti main { width: 100%; max-width: 1111px; } spwbtt main { width: 100%; max-width: 1000px; } cbdibl bl hd i { height: 22px; width: 22px; margin: auto; } cbdibl bl ft h3{ font-size: 1.77rem; font-weight: 400; } cbdibl bl ft i { transform: rotate(270deg); height: 22px; width: 22px; } .cbdibl bl { margin-bottom: 0; } cbdibl pp { display: grid; grid-template-columns: auto auto auto; height: 0px; align-items: center; background: var(--b-t); border-radius: 11px; transition: 333ms; font-size: 1.33rem; text-align: center; border: solid 1px var(--bor); border-top: 0; font-weight: 500; color: var(--aa); } .cbdibl pp {padding: 33px 11px; height: auto; } cmdibl> h3 { margin: 11px 0; margin-top: 44px; font-size: 1.55rem; } @media screen and (max-width: 999px) { cbdibl bl { grid-template-columns: 44px auto auto; margin: 4px 11px; } cbdibl { display: block; padding-bottom: 11px; } cbdvc bd bl { margin: 7px 11px; } } /* Changed by Gagan Nayak for Personalization*/ cpsolti sstm hd i { margin: auto; justify-content: start; height: 100%; border-radius: 11px; max-height: 155px; overflow: hidden; box-shadow: 0 0 0 8px var(--c); } cpsolti sstm slc { display: block; height: 55%; width: 44%; position: absolute; right: 15px; background: var(--b-t22); z-index: 999; bottom: 15px; border-radius: 7px; backdrop-filter: blur(13px); } /* Bluetooth & devices */ cbdibl bl {display: grid; grid-template-columns: 70px auto auto; align-items: center; background: var(--b-t); border-radius: 11px; padding: 16px 11px; gap: 22px; margin: 11px 3px;margin-top: 0; box-shadow: 0px 0px 0px 1px var(--bor);} cbdibl bl ft bb.oo oo {margin-left: 40px; background: var(--b); box-shadow: 0 0 10px 3px var(--b-t);} cbdibl bl ft bb {position: revert; border-color: var(--bor); height: 28px; width: 66px;} cbdibl bl ft bb.oo { background: var(--aa); } cbdibl bl ft { display: grid; justify-content: end; grid-template-columns: auto auto;align-items: center;} cbdibl bl bd p { margin: 0; font-size: 1.11rem;opacity: 0.7;} cbdibl bl bd h3 { font-size: 1.33rem; font-weight: 400; } cbdibl bl hd i { height: 33px; width: 33px; margin: auto; } cbdibl bl ft h3{ font-size: 1.77rem; font-weight: 400; } cbdibl bl ft btn { background: var(--btn); padding:7px 33px; color: var(--b); border-radius: 7px; } cbdibl bl ft i { transform: rotate(270deg); height: 33px;width: 33px;} cbdibl bl ft bb.oo oo {margin-left: 40px; background: var(--at); box-shadow: 0 0 10px 3px var(--at); } cbdibl bl ft bb oo { height: 22px; width: 22px; margin: 3px; } cbdibl bl ft bb.oo { background: var(--at); } cbdibl .degp{gap: 22px;} @media screen and (max-width: 999px) { cbdibl bl { margin: 11px; grid-template-columns: 44px auto auto; } cbdibl bl bd h3 { font-size: 1.11rem;font-weight: 500; } cbdibl bl bd p { font-size: 0.88rem; } cbdibl .degp { gap: 11px; } cbdibl { display: block; padding-bottom: 11px; } cbdibl bl ft btn { padding: 7px 16px; } cbdvc bd bl { margin: 7px 11px; } } cbdvc bd bl ft { display: block; text-align: center; } cbdvc> bd {display: grid; grid-template-columns: auto auto auto auto; align-items: center; width: fit-content;} cbdvc bd bl bd { align-items: center; display: flex; } cbdvc .bat{display:grid;grid-template-columns:auto 44px;width:fit-content;align-items:center;height:fit-content;gap:11px;margin:auto;} cbdvc ft h3{ font-size: 1rem; font-weight: 500;} cbdvc >hd h1 {margin-bottom:11px;} cbdvc { display: block; padding: 11px 0; } cbdvc bd bl:hover { background: var(--b); transform: scale(1); } csops csopo select { padding: 7px; height: auto; border-radius: 7px; max-width: 155px; max-height: 33px; } csopoj { display: none; } .csopoj csopoj { display: grid; } csopojs csopo { margin: 0; border: 0; padding: 11px;} csopojs {display: grid; background: var(--b-t); margin: 11px 0;border-radius: 11px;} .csopoj csopojs { padding:3px;border: solid 1px var(--bor); } csopoj> ft { display: flex; align-items: center; gap: 22px; padding: 33px 22px; } .csopoj csopojs csopo { border-radius: 0; } csopoj> ft h3 { margin: 0; } csopoj csopo hd { opacity: 0; } csopoj csopo ft { padding-right: 33px; } page inf name svg { fill: var(--a); } @media screen and (max-width: 999px) { cbdvc> bd { grid-template-columns:auto auto; } cbdvc bd bl:nth-child(2) { display: none; } cbdvc >hd h1 { font-size: 1.88rem; } } @media screen and (max-width:666px) { cbdvc bd bl:nth-child(1) { display: none; } } /* Bluetooth & devices */ cchnvi:hover { background: rgb(235, 223, 221); } ccshot hd { display: grid; } ccshot hd i { height: 100%; } ccshot ft d { font-size: 0.88em; font-weight: 400; color: var(--c); } cchnvis ft d {font-size: 12px; display: flex; font-weight: 500; color: var(--c0);} cchnvist { display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc);padding: 11px 0;} cchnvist ft d {font-size: 0.8rem; display: flex; padding: 0 4px; margin-top: 4px;} cchnst {display: block; height: max-content; width: 100%; max-width: 194px; min-width: 222px; max-height: 100%; min-height: 100%; position: relative;} cchnst i { height: 100%; width: 100%; } cchnst img { height: 100%; width: 100%; border-radius: 16px; } cchnst bd h3 {font-weight: 500; font-size:0.88rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} cchnst bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between; grid-template-columns: auto 33px;align-items: start;} cchnst bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } cchnst bd btn svg { height:18px; width:18px; } cchnvin{display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 16px; padding-top: 7px;} cchnvin ft d {font-size: 0.8rem; display: flex; padding: 0 11px;} cchnstn {display: grid; width: fit-content; max-width: fit-content; min-width: 222px; position: relative; grid-template-columns: auto auto; max-height: 238px; height: fit-content;} cchnstn i { height: 100%; width: 100%; } cchnstn img { height: 100%; width: 100%; border-radius: 16px; } cchnstn bd h3 {font-weight: 500; font-size: 0.88rem; overflow: hidden; -webkit-line-clamp:1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 11px;} cchnstn bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between;align-items: start;} cchnstn bd btn { display: flex; height: auto; justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; width: fit-content; font-weight: 600; font-size: 1rem; } cchnstn bd btn svg { height:18px; width:18px; } cchnstn hd{display: grid; max-width: 333px; max-height: 238px; min-width: 424px;} cchnstn bd chli h3 { display: grid; } cchnstn bd chli h3 a { font-weight: 600; color: var(--a); } @media screen and (max-width: 999px) { ccshot hd i { height: 100%; min-width: 122px; position: relative; min-height: 172px; max-width: 75px; width: auto; } cchnvin{display:none;} } } @media screen and (max-width: 999px) { cchnvi { min-width:288px; } ccshot { min-width: 144px; margin: 4px;} } /* Channels */ comedy bd { position: relative; } skrb {display: grid; max-width: 222px; width: 100%; min-width: 200px; text-align: center; position: relative; padding: 16px 0; background: var(--bc); border-radius: 11px; box-shadow: var(--bs); justify-content: center; margin: 7px;} skrb ft { display: grid;margin: auto; } skrb bd h3 { margin-top: 7px; } skrb bd p { font-size: 0.88em; font-weight: 400; margin: 5px 0; } skrb hd i { height: auto; } skrb btn {padding: 7px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; position: relative; z-index: 99999; transition: 222ms;} skrb btn:hover { transform: scale(0.95); background: linear-gradient(222deg, var(--a), var(--aa)); } channels mt hd a { display: grid; align-items: center; height: 44px; width: auto; margin: auto; grid-template-columns: auto 44px; font-size: 1.55rem;padding-top:11px; } channels { display: grid; background: var(--b); } channels mt hd a svg { height:26px; width:26px; } @media only screen and (max-width: 999px){ skrb {max-width: 188px; min-width: 166px; margin: 0 11px;} channels mt hd a { padding: 0 11px; font-size: 1.22rem; } channels mt hd a svg { height: 22px; width: 22px; } } /* Channels */ ccmpso btns { cursor: pointer; } ccmpso time {text-align: unset; } ccmpso hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } ccmpso { display: grid;margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; border: solid 1px var(--bc);max-width: 882px;} ccmpso faqs user { display: grid; grid-template-rows: auto auto auto; width: 95%; margin: 7px auto; background: var(--bt); border-radius: 11px; position: relative; overflow: hidden; border: solid 1px var(--bt); } ccmpsofaqs upostser actn>adc { display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--aa); background: var(--aat); border-radius: 7px; font-size: 0.88em; } ccmpso comant { display: grid; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } ccmpso hd ft>i:active { background: var(--bc); } ccmpso hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } ccmpso hd d bd { text-align: justify; font-size: 0.88em; } ccmpso >bd {display: grid; background: unset; margin: auto 33px;width: fit-content;} ccmpso >bd i { margin: auto; height: auto; } ccmpso trc ft { display: flex; justify-content: end; } ccmpso ft btn {display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 5px; margin: 4px; align-items: center; padding: 7px; font-weight: 500;} ccmpso ft btn i { height: 28px; width: 28px; } ccmpso ft t { width: auto; margin: 0; font-size:1em; text-align: center; } ccmpso p { font-size: 11px; margin: 0; } ccmpso dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} ccmpso> hd i{display: flex; align-items: center; justify-content: center; padding: 7px; height: 44px; width: 44px; border-radius: 44px;} ccmpso trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: start; margin-bottom: 11px; } ccmpso time { display: block; width: auto; float: unset; } ccmpso name { font-size: 1em; font-weight: 500; } ccmpso>ft btns {display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; margin-top: 7px; width: fit-content; margin-left: 33px;} ccmpso trc bd h4 { display: flex; gap: 7px; font-size: 1.11rem; align-items: center; } ccmpso time { display: block; width: auto; float: unset; font-size: 0.9rem; } ccmpso trc bd h3 a { color: var(--a); } ccmpso trc bd h3 { overflow: hidden; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; } ccmpso >bd i img {height: 100%; width: 100%; border-radius: 22px; min-width: 666px; min-height: 333px; max-height: 666px; max-width: 555px;} @media screen and (max-width: 999px) { ccmpso >bd i img { min-width: 333px; } ccmpso ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } ccmpso ic i:last-child { display: none; } ccmpso trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } ccmpso name { font-size: unset; } ccmpso time { font-size: 0.77em;} ccmpso hd i { background: unset; height: auto; width: auto; } ccmpso comant bd { height: auto; } ccmpso ic { display: none; } ccmpso comant bd d { grid-template-columns: 100%; } ccmpso comant { grid-template-columns: 43px auto; gap: 1%; } ccmpso ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } ccmpso gp bb { font-size: 0.88em; } ccmpso { padding: 11px; margin: 11px 0;width:auto; } ccmpso >bd { height: auto;margin: 0 11px; } ccmpso us { padding: 0; } ccmpso msg { padding: 11px; } ccmpso ft t { text-align: unset; } ccmpso ft btn i { height: 20px; width: 20px; } ccmpso trc bd h3 { font-size: 1rem; } ccmpso>ft btns { margin-left: 7px; } } cchnpca { display: block; height: max-content; width: 100%; max-width: 200px; min-width: 188px; max-height: 100%; min-height: 100%; position: relative; padding: 11px; } cchnpca i { height: 100%; width: 100%; } cchnpca img { height: 100%; width: 100%; border-radius: 16px; } cchnpca bd h3 {font-weight: 500; font-size: 1rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 7px;} cchnpca bd {display: grid; padding: 0 4px; height: fit-content; justify-content: space-between; align-items: start;} cchnpca bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } cchnpca bd btn svg { height:18px; width:18px; } cchnpca chp {position: absolute; height: 100%; top: -4px; bottom: 0; z-index: -1; background-color: #1c4c7a; width: calc(100% - 16px); left: 8px; right: 8px; border-radius: 12px;} cchnpca chpp {position: absolute; height: 100%; top: -8px; bottom: 0; z-index: -2; background-color: #f77d6d; opacity: 50%; width: calc(100% - 24px); left: 12px; right: 12px; border-radius: 12px;} cchnpca hd { position: relative; } @media screen and (max-width: 999px) { cths ctho { height: 90px !important; } cths ctho slc { height: 40px; width: 40px; } } videos main { position: relative; } crvo bl ft { position: absolute; } cdmo h2 { font-weight: 500; } .csvo csvo { display: grid; } cdnlod { display: none; background: var(--b); max-width: 450px; max-height: 450px; margin: auto; border-radius: 11px; padding: 11px; padding-top: 22px; font-weight: 500; position: absolute; top: 40%; left: 25%;z-index: 999;} cdnlod p a { font-weight: 400; color: var(--a); } cdnlod p { margin: 22px 0; font-size: 1.11rem; font-weight: 400; } cdnlod input { height: 20px; width: 20px; } cdnlod psize h3 { font-weight: 400; font-size: 1.11rem; } cdnlod psize { display: grid; grid-template-columns: 33px auto; align-items: center; margin-top: 22px; } cdnlod bd> h3 { margin-top: 22px; font-weight: 400; font-size: 1.22rem; } cdnlod h1 { font-weight: 700; } cdnlod hd { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 0 22px; } cdnlod hd i { height: auto; } cdnlod bd { padding: 0 22px; } cdnlod ft btn { display: flex; color: var(--a); padding: 11px; line-height: 1; border-radius: 44px; } cdnlod ft btns { display: flex; align-items: center; } cdnlod ft { display: grid; justify-content: end; } cdnlod ft btn:nth-child(2) { background: var(--a); color: var(--b); } .cdnlod cdnlod { display:grid;} @media screen and (max-width: 999px){ cdnlod { top: 64%; width: auto; left: 0; } } /*song*/ cslgo {display: grid; text-align: center; padding: 22px; margin: 7px auto; width: 90%; position: relative; border-radius: 11px; grid-template-columns: auto 35%; background: linear-gradient(333deg, #3770ec, #001b78); align-items: center;} cslgo bd { display: grid; height: fit-content; } cslgo h3 {font-weight: 500; letter-spacing: 8px; font-size: 1.66rem; line-height: 1; color: #FDC302; text-shadow: 3px 0px 3px #272521;} cslgo h2 { font-size: 30px; font-weight: 800; color: var(--b); font-family: sans-serif; text-shadow: 3px 0px 3px #272521;} cslgo p { margin: 0; font-size: 13px; font-weight: 500; color: var(--b); text-shadow: 3px 0px 3px #272521;} cslgo hd, cslgo bd, cslgo ft { position: relative; z-index: 999; } cslgo bg { background: #0000006e; } sslgo header { position: unset; } cslgo bd i { height: auto; } csbnd input {border: solid 1px var(--bor); border-radius: 7px; height: 36px; width: -webkit-fill-available; font-size: 14px; font-weight: 500; background: #fafafa;} csbnd { display: grid; margin: 11px; position: relative; z-index: 9999; background: var(--b); padding: 22px; border-radius: 11px; } csbnd sl {background: var(--0); height: auto; border-radius: 0; margin-bottom: 22px;} csbnd sl input:focus { box-shadow: unset; border-radius: 7px; border: solid 1px; } csbnd sl h4 {display: flex; font-weight: 400; font-size: 1rem; margin-bottom: 7px;} csbnd ft btn {background: var(--btn); display: grid; text-align: center; padding: 7px; border-radius: 7px; height: 22px; color: var(--b); margin: 7px 0;} csbnd sl select { border: solid 1px var(--bor); border-radius: 7px; height: 36px; width: -webkit-fill-available; font-size: 14px; font-weight: 500; background: #fafafa; padding: 0 11px; } cfaq {display: grid; padding: 22px; margin: 11px auto; background: var(--b); border-radius: 11px;} cfaq bd { display: grid; border: solid 1px var(--bor); margin: 11px 0; } cfaq tx { display: flex; align-items: center; padding:11px; border-bottom: solid 1px var(--bor); gap: 7px; } cfaq tx i { height: 22px; width: 22px; } cfaq tx h4 { font-size: 0.9rem; font-weight: 500; } cfaq tx p { margin: 7px 0; font-size: 13px; } cfaq hd h3 { font-size: 20px; font-weight: 600; } csao hd det h3 span { margin-right: 6px; } /* stories */ sstors main {width: auto; max-width: unset; display: grid;} sstors aerea { display: grid; align-items: center; } sstors main d.main {overflow: hidden; overflow-x: scroll;} stnam ft .like i:nth-child(2) {transform: scale(1);} stnam ft .like i:nth-child(1) { transform: scale(0); } cstors stnam ft .like { grid-template-rows: 0 auto; } stnam ft .like i:nth-child(2) svg { fill: #ff3040; } cstors.this stnam { display: flex; } cstors> ft { position: absolute; top:0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; display: grid; align-items: center; justify-content: center; text-align: center; background: var(--bor); color: var(--b); } cstors.this> ft {display: none;} cstors> ft nost { display: grid; } cstors> ft nost i { height: auto; } cstors> ft nost img { height: 101px; width: 101px; border-radius: 50%; } cstors> ft nost h2 { font-weight: 500; font-size: 1.11rem; } cstors> ft nost h4 { font-size: 0.9rem; font-weight: 500; } /* stories */ /* stories Share */ pstshr {position: absolute; z-index: 999999; top: 25%; right: 25%; background: var(--b);border-radius: 11px; min-width: 555px; max-width: 333px; max-height: 555px; display:none; flex-direction: column;} pstshr> hd { display: grid; } pstshr sha {display: grid; grid-template-columns: 55px auto auto; align-items: center; margin:7px 0;} pstshr sha p { margin: 0; } pstshr> hd sch input { height: 38px; padding: 0 20px; } pstshr> hd sch h3 { font-weight: 500; font-size: 1.11rem; } pstshr> hd sch { display: flex; align-items: center; border-bottom: solid 1px var(--bc); border-top: solid 1px var(--bc); padding: 0 11px;} pstshr> hd ct { display: grid; grid-template-columns: auto 44px; align-items: center; } pstshr> hd ct h3 { text-align: center; font-size: 1.11rem; font-weight: 500; } pstshr sha bd h4 { font-weight: 500;font-size: 0.88rem;} pstshr shas> h4 { font-weight: 500; padding: 7px 0; line-height: 1; } pstshr sha i {height: 44px; width: 44px;} .shmark:after { content: ""; position: absolute; display: none; } .shasl .shmark:after {left: 8px; top: 4px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .shasl input:checked ~ .shmark:after { display: block; } .shmark {position: absolute; top: -12px; height: 22px; width: 22px; border-radius: 44px; right: 0; border: solid 1px var(--bor);} .shasl input:checked ~ .shmark {background-color:var(--a); border-color:var(--a);} .shasl input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } pstshr> bd {display: grid; height: 100%; overflow-y: scroll; scrollbar-width: thin; padding:0 11px;} pstshr> bd shas { display: grid; height: 100%; } pstshr> bd shas label { opacity: 1; } pstshr> ft btn {display: grid; padding: 7px; text-align: center; background: var(--btn); color: var(--b); border-radius: 7px; margin: 8px; opacity: 0.44;height: 25px;} pstshr> ft { border-top: solid 1px var(--bc); } .pstshr bg { display: block; background: #000000b8; z-index: 4; } .pstsh{ display: none;} .pstshr pstshr{display: flex;} pstshr> ft input { height: 0; padding: 0 16px; transition: 333ms; } .this> ft btn { margin-top: 0; opacity: 1; } /* stories Share */ /* video */ cvinst hd t {position: absolute; display: flex; bottom: 11px; right: 11px; max-width: 23px; max-height: 16px; font-size: 12px; background: var(--c); color: var(--b); border-radius: 4px; padding: 0 4px; padding-bottom: 3px;} cvinst> hd { position: relative; } csao ccshot ft { font-weight: 600; color: var(--b); display: grid ; font-size: 0.77em; } csao ccshot { margin: 0 4px; } scvido cveo ccshots bd { display: grid; } /* video */ csonss lik btn {height: 38px; width: 38px; align-items: center; display: grid; border-radius: 44px; } csonss lik btn:hover{ background: var(--b-t22); } csonss lik btn i { height: auto; } cpsolti h1 { margin-bottom: 11px; font-weight: 600; } /* pending */ album:after { position: absolute; height: 200px; width:288px; z-index: 9999; top: 40%; background-image: url(/0/IMG/pending.png); background-repeat: no-repeat; transform: rotate(45deg); left: 37%; } /* pending */ cmco img { object-fit: cover;} /* pricing */ spcio main { width: 100%; max-width: 100%; } cpril { display: grid; background: var(--c); color: var(--b); padding: 22px; } cpril hd {display: flex; gap: 15px; margin: auto; padding: 33px 0; padding-top: 22px;} cpril h1 { font-size: 2.66rem; } cpril btn { display: grid; grid-template-columns: auto 33px; width: fit-content; align-items: center; color: var(--a); } cpril btn h1 { border-bottom: solid;line-height: 1; } cpril btn i { transform: rotate(90deg); } cpril mb { margin: auto; display: flex;justify-content: center;} cpril mb a {color: var(--b); font-weight: 500; font-size: 1rem; padding:9px 16px; border: solid 1px; border-radius: 44px; margin: 0 7px; line-height: 32px;} cpril mb t { display: flex; line-height: 1; } cpril mb a:hover { color: var(--a); background: var(--b); border-color: var(--b); } cpril mb a.this { background: var(--a); border-color: var(--a); color: var(--c); } cinrupe> hd {display: grid; grid-template-columns: auto auto; width: fit-content; margin-left: auto; padding: 11px 0;} spcio header { position: unset; } /* pricing */ /* Chat GPT */ .custom-select { position: relative; display: inline-block; margin: 0 22px;} .custom-select select { display: none;} .select-items div, .select-selected {padding: 7px 10px; cursor: pointer; background-color: #fff; display: grid; grid-template-columns: 22px auto; align-items: center; font-size: 0.88rem; font-weight: 700; color: var(--b); border-radius: 6px;} .select-items {position: absolute; background-color: #fff; border: 1px solid #ccc; z-index: 99; width: 100%; display: none; padding: 4px; margin: 4px 0;} .select-items div img {width: 18px; height: 18px; margin-right: 10px; border-radius: 44px;} .select-items div:hover { background-color: #f1f1f1; } .select-selected { padding:7px 11px; color: var(--c); } .select-selected img { width: 18px; height: 18px; margin-right: 10px; border-radius: 44px; } .select-items div { background: var(--a); border-radius: 9px; margin: 2px; width: max-content; } /* Chat GPT */ cmplnn {display: grid; max-width: 188px; max-height: 537px; background: var(--b); box-shadow: var(--bs-bt); padding: 22px; padding-top: 33px; border-radius: 22px; margin: 4px; margin-bottom: 11px; min-width:200px; grid-template-rows: 44px auto; height: 659px;} cmplnn mru {display: grid; grid-template-columns: 18px auto auto; width: fit-content; align-items: start; padding: 4px 0;} cmplnn h4 span { font-weight: 400; font-size: 12px; margin-left: 4px; } cmplnn mru i { height: 11px; width: 11px; margin: 1px; } cmplnn mru h4 {font-size: 14px; font-weight: 500;} cmplnn bd> btn {padding: 11px 22px; display: grid; border: solid 1px; color: var(--a); border-radius: 44px; width: fit-content; line-height: 1; margin: 22px 0;font-weight: 500;} cmplnn bd h2 {font-size: 32px; font-weight: 500; margin: 19px 0; display: flex; align-items: start; line-height: 1;} cmplnn> hd { display: flex; flex-wrap: wrap; align-items: start; } cmplnn> hd span { font-size: 12px; margin-left: 4px; font-weight: 500; color: var(--c0); } cmplnn> hd h3 {font-size: 1.33rem; color: var(--a); font-weight: 500; line-height: 1;} cmplnn h4 btn { background: var(--bc); padding: 2px 9px; margin: 4px; color: var(--a); font-weight:700; border-radius: 4px; line-height: 1; } cinrupe> bd {display: flex; gap: 11px; align-items: end; overflow: scroll;} cinrupe> bd cmplnns { display: grid; background: linear-gradient(179deg, rgba(0, 255, 145, .19) 1.21%, rgba(0, 255, 145, .08) 98.8%); border: 1px solid #00ff91; padding: 11px; border-radius: 22px;padding-bottom: 0;} cmplnns> bd { display: flex; } cmplnns> hd p { display: flex; justify-content: center; } cmplnn bd h2 span {font-size: 14px; font-weight: 700; margin: 0 4px; margin-bottom: auto; margin-top: 7px; } cmplnn .ai h4 { display: flex; align-items: center; } cmplnn.this bd> btn { color: var(--b); background: var(--a); border-color: var(--a); } cmplnn bd h5 { font-weight: 500; font-size: 11px; display: grid; color: var(--c0); } cinrupe> ft btn {display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px;} cinrupe> ft { margin-top: 33px; } cinrupe> ft btn i {filter: invert(1); height: 20px; width: 20px;} cinrupe> ft h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } monthlyplan { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; } cenjoy { border-radius: 20px; margin-bottom: 140px; display: grid; grid-template-columns: 50% 49.4%; background: linear-gradient(135deg, #d2ffbd, #41e48a); position: relative; height: 413px; overflow: hidden; gap: 7px;align-items: center;} cenjoy hd { padding-left: 66px; } cenjoy hd h3 { font-size: 2rem; font-weight: 500; margin-bottom: 16px; } cenjoy hd p { font-size: 1rem; margin: 0; margin-bottom: 16px; } cenjoy bd i { height: 413px; background-position: 100%; border-radius: 20px; background: url(/0/IMG/pricingEnjoy.svg); background-size: cover;} cenjoy bd { width: 90%; margin-left: auto; } cenjoy hd btn { padding: 10px 16px; background: var(--btn); border-radius: 44px; line-height: 1; display: grid; width: fit-content; color: var(--b); } cejoyt { display: inline-grid; background: -webkit-gradient(linear, left top, right top, from(#b5d0f8), color-stop(34%, #b5d0f8), color-stop(34%, #00031f), to(#00031f)); height: 388px; grid-template-columns: 48% 48%; color: var(--b); position: relative; padding: 0 22px; gap: 22px; width:auto; margin-top: 44px;} cejoyt hd i { height: 100%; } cejoyt hd img { display: inline-block; text-align: center; position: absolute; bottom: -64px; height: 100%; top: -33px; border-radius: 16px; width: 100%; } cejoyt bd { width: 77%; float: right; position: relative; margin-top:88px; margin-bottom: 30px; display: grid; height: fit-content; } cejoyt bd p { font-size:20px; margin: 0; margin-bottom: 7px; } cejoyt bd span { font-size: 0.77rem; font-weight: 500; margin-bottom: 22px; } cejoyt bd btn { padding: 16px 30px; background: var(--btn); border-radius: 44px; line-height: 1; display: grid; width: fit-content; color: var(--b); font-weight: 500; } cejoyt bd:after { content: ''; position: absolute; background-image: url(/0/IMG/base.png); height: 33px; width: 33px; background-repeat: no-repeat; top: -26px; } cfno bl.this bd { display: grid; height: auto; padding: 22px; } cfno .this hd i { transform: rotate(180deg); } cfno .this bd p { font-size: 16px; } cfno .this hd { background: var(--b-t22); } @media screen and (max-width: 999px){ cpril { padding: 16px; } cpril h1 { font-size: 1.33rem; } cpril hd { padding: 9px 0; padding-top: 31px; } cpril bd { display: grid; overflow: scroll; } spcio main { margin: 0 16px; width: unset; } cpril mb a { width: max-content; } calfetus { overflow: scroll; } monthlyplan { display: grid; grid-template-columns: 50% 50%; } cenjoy {display: grid; grid-template-columns: unset; grid-template-rows: auto auto; padding: 22px; height: auto; margin-bottom: 22px;} cenjoy bd { height: 200px; } cenjoy bd i {background-repeat: no-repeat; position: absolute; bottom: 0; height: 267px; width: 100%; right: 0; background-size: 90%; background-position: 100% 100%; border-radius: 0; } cenjoy hd { padding-left: 0; } cejoyt { grid-template-columns: unset; height: auto; width: auto; background: #00031f; grid-template-rows: auto auto; padding: 22px; gap: 0; padding-bottom: 40px;margin-top: 0; border-radius: 22px;} cejoyt hd i { height: 222px; position: relative; z-index: 99; } cejoyt hd img { position: unset; margin: 11px; } cejoyt hd:after{content:'';position:absolute;height:30%;left:0;background:#71a0ec;z-index:0;top:0;right:0;border-radius:20px 20px 0 0;} cejoyt bd:after{top: -30px;} cenjoy hd h3 { font-size: 1.33rem; } } @media screen and (max-width:666px){ monthlyplan { display: block; } } webinars { display: grid; } spcio d.aerea { margin: 0; } webinars { display: grid; background: var(--b); padding: 16px; border-radius: 77px 77px; } spcio main .main { display: grid; background: var(--b); padding: 16px; border-radius: 55px 55px 0 0; position: relative; } spcio main { position: relative; } webinars> hd bl { justify-content: space-between; } webinars bl hd { display: flex; align-items: center; } webinars> bd { display: flex;justify-content: center;} spcio main:after { content: ''; position: absolute; background: var(--c); height: 20%; left: 0; right: 0; top: 0; z-index: -1; } webinars> ft { margin-top: 33px; } webinars> ft btn { display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px; } webinars> ft btn i { filter: invert(1); height: 20px; width: 20px; } webinars> ft h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } scvido { background: var(--b-t22); display: grid; } cmcto bd .best{clip-path: polygon(0 0, 100% 0%, 93% 100%, 0% 100%); background:#c45601; padding: 3px 11px; color: var(--b);font-weight: 500;} cmcto bd .pri{font-size: 1.55rem; font-weight:500;} smcot size ds {color: #d5395d; font-size: 1.55rem; line-height: 1; font-weight:300;} cmcto bd p span { font-size: 0.77rem; margin: 0 2px; margin-top: 2px; line-height: 1; } cmcto .mrp b{font-size: 0.77em; font-weight: 600;} cmcto .mrp p{font-size: 0.77em; font-weight: 600; text-decoration: line-through; } smcot .mrp { color: var(--c0); } czpo hd br { display: none; } @media screen and (max-width:999px){ smcot>main>bl { padding: 22px 11px; } smcot size> b { display: none; } cmcto bd .pri { display: flex; font-size: 1.33rem; } smcot size ds { font-size: 1.22rem; } smcot .mrp b { display: flex; } cmcto { border-radius: 11px; } webinars { overflow: scroll; border-radius: 0; padding: 11px 0; background: var(--0); } spcio event { display: grid; overflow-y: scroll; } } couo {display: grid; margin-bottom: 11px; background: var(--b); border-radius: 7px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 38%), 0 0px 13px rgb(0 0 0 / 32%); position: absolute; width: 222px; padding: 11px; bottom: 20px; height: fit-content; transform: scale(0); z-index: 99999; text-align: start; left: 0px; right: 0; border-bottom-left-radius: 0;} calfetus td i:hover couo { transform: scale(1); } couo:after {content: ''; position: absolute; height: 13px; width: 13px; background: var(--b); bottom: -12px; left: 0px; clip-path: polygon(0 0, 49% 75%, 100% 0); z-index: 9999;} couo p { font-size: 14px; color: var(--c0); } spcio ft.view { margin-top: 33px; } spcio ft.view btn { display: grid; width: fit-content; grid-template-columns: auto 22px; align-items: center; font-weight: 500; padding: 8px 16px; border-radius: 44px; margin: 0 auto; line-height: 1; background: var(--btn); color: var(--b); gap: 7px; } spcio ft.view btn i { filter: invert(1); height: 20px; width: 20px; } spcio ft.view h2 { margin: 55px 0px 33px 0; text-align: center; font-size: 1.88rem; font-weight: 600; } conta flex { gap: 11px; } @media screen and (max-width:999px){ couo:after { left: unset; right: 0; } couo { left: unset; border-bottom-left-radius: 7px; border-bottom-right-radius: 0; } } /* Peoples component (Group) */ cgpps p { margin: 0; } cgpps>hd>sl { display: grid; grid-template-columns: 44px auto; align-items: center; height: 44px; border-radius: 44px; margin: 11px 0; } cgpps>hd>sl>btn { display: flex; padding: 6px; place-content: center; position: relative; z-index: 99; height: 40px; width: 40px; align-items: center; margin-left: 5px; } cgpps>hd { display: block; padding-bottom: 5px; border-bottom: 1px solid var(--bc); } cgpps>hd>sl>btn>i { height: 22px; width: 22px; margin: 4px; margin-bottom: 0; } cgpps>hd>sl>input { position: absolute; padding-left: 50px; width: auto; left: 0; top: 0; bottom: 0; right: 0; font-weight: 500; } cgpps>hd>sl>input:focus { border-radius: 44px; box-shadow: none; border: 1px solid var(--bor); } @media only screen and (max-width: 999px){ cpplo>ft>btn>t { display: none; } cpplo>ft>btn { grid-template-columns: 33px 0; } cpplo { grid-template-columns: 66px auto 55px; } } /* User(List) Component (Group) */ /* Groups Compnent */ cgrs>hd>bx { display: flex; align-items: center; justify-content: space-between; } abtgrps { display: flex; } cgrs>hd aa { margin: 6px; padding: 11px; cursor: pointer; white-space: nowrap; } .Public aa.pblc { border-bottom: 2px solid var(--a); color: var(--a); } /* Delete Popup */ cmys trc.agree>cdlo { transform: scale(1); visibility: visible; top: 0; } .agree rvm { position: absolute; } cdlo>hd>i { height: 33px; width: 33px; padding: 12px; background: #ffb1b14d; border-radius: 55%; } cdlo { display: flex; background: var(--b); box-shadow: var(--bs-b); border-radius: 22px; position: absolute; z-index: 999; text-align: center; padding: 22px; flex-direction: column; left: 0; right: 0; margin: 11px; max-width: 360px; margin: auto; transition: 99ms; height: 165px; top: -333px; right: 0; transform: scale(0.88); visibility: hidden; } cdlo>bd>t { display: block; margin: 11px auto; } cdlo>hd { display: flex; justify-content: center; } cdlo btns>btn { display: block; padding: 11px; background: var(--bc); border-radius: 5px; margin: 11px 4px; font-weight: 500; height: auto; width: auto; box-shadow: unset; color: var(--c); } cdlo>ft>btns { display: grid; grid-template-columns: 50% 50%; } @media only screen and (max-width: 999px){ cdlo { margin: 11px; } } /* Login First */ no>back { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; padding: 5px; position: absolute; top: 13px; left:13px;} no>back>i { height: 33px; width: 33px; } /* Meeting Subscription Update */ smcu form { position: relative; padding: 0; } smcu main { max-width: 100%; } smcu>bl>bd>d { display: grid; grid-template-columns: 49% 50%; gap: 1%; } smcu meetingmsg { text-align: center; letter-spacing: 0; font-size: 0.6em; width: 77%; margin: auto; display: block; } smcu trcs>trc>h6 { text-align: end; display: block; } smcu h7 { display: flex; align-items: center; letter-spacing: 0; font-size: 0.7em; } smcu trcs>trc { border-radius: 0; box-shadow: unset; margin: 4px; grid-template-columns: 50% 50%; border-bottom: solid 0.5px var(--bc); padding: 0 11px; padding-bottom: 3px; background: transparent; font-size: 0.77em; backdrop-filter: unset; -webkit-backdrop-filter: unset;width: auto; } smcu divider { display: grid; position: relative; grid-template-columns: auto min-content auto; width: 80%; margin: 11px auto; grid-column-start: 1; grid-column-end: 3; } smcu form bl:nth-child(6) { grid-column-start: 1; grid-column-end: 3; padding-bottom: 31px; } smcu ft svg { fill: var(--b); } smcu .nw { margin-top: 14px; padding: 0; border-radius: unset; background: var(--t);margin:0 } smcu main { grid-row-start: 1; display: grid; } smcu t { text-align: unset; font-size: 14px; } smcu .nw>hd>d { position: sticky; top: 0; z-index: 9999; margin-top: 15px; } smcu .nw>hd btns { width: 100%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; margin: auto; z-index: 9; position: relative; background: var(--bt); border-radius: 15px; border: solid 1px var(--bc); } smcu d btns>aa { display: flex; justify-content: center; align-items: center; font-weight: bold; height: calc(100% - 14px); margin: 7px; border-radius: 11px; position: relative; transition: 99ms; } smcu .nw>ft { margin-bottom: 11px; display: flex; justify-content: center; background: var(--bt); padding: 22px; margin: 6px; border-radius: 22px; flex-direction: column; text-align: center; margin-bottom: 33px; } smcu .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; } smcu .nw>ft>aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smcu .nw>ft f { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } smcu .nw>ft d { text-align: center; font-size: 0.6em; width: 88%; margin: 11px auto; } smcu .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; } smcu d btns>aa.this { background: var(--bc); } @media screen and (max-width: 999px) { smcu d.aerea { display: grid; } smcu form { display: block; }} smcu bl.nw>ft aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; } smcu bl.nw>ft aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smcu mg>aa { display: flex; padding: 13px; border: 1px solid var(--bc); margin: 4px; border-radius: 8px; justify-content: center; } smcu mg { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; align-items: center; } smcu form msnb>bl { margin: 0; padding: 0; background: var(--bt); } smcu mg>aa:active { background: var(--bc); transform: scale(0.88); background: var(--bc); color: var(--a); } /*Meeting Participans */ smps bl.cfa { grid-column-start: 1; grid-column-end: 3; } mbbl>hd>btns { display: flex; margin-bottom: 7px; } mbbl btns>btn { display: grid; grid-template-columns: 24px auto; align-items: center; background: var(--bc); border-radius: 39px; margin: 4px; padding: 8px 16px; font-weight: 400; } mbbl sl { height: 100%; margin: 0; background: unset; border-left: 1px solid #000000a6; border-radius: 0; } mbbl btn>i { height: 18px; width: 18px; } mbbl sl input:focus { border-radius: 40px; box-shadow: unset; } mbbl bx:focus { box-shadow: inset 0 0 0 2px var(--c); border-radius: 38px; } prtntfilter { display: block; position: absolute; top: 333%; bottom: 0; right: 0; left: 0; z-index: 999999; background: var(--b); transition: 333ms; overflow: scroll; border-radius: 22px 22px 0 0; box-shadow: 0 0px 20px #00000070; padding-bottom: 44px; } .participantsFilter prtntfilter { top: 2%; } prtntfilter>hd>back { height: 33px; width: 33px; display: block; padding: 5px; } prtntfilter>hd { display: flex; justify-content: end; padding: 11px; padding-bottom: 0; } mbbl bx { display: grid; grid-template-columns: 44px auto; background: var(--bc); align-items: center; border-radius: 38px; margin-bottom: 11px; position: relative; height: 48px; overflow: hidden; background: var(--bc); padding: 0 4px; } smps mbbl { display: none; } @media screen and (min-width: 999px) { } @media screen and (max-width: 999px) { smps mbbl { display: block; padding: 11px; background: var(--bt); } } /*Meeting Participant*/ smpco userpff sidebar { width: 50%; } smpco header { position: unset; } smpco friends main { width: 100%; max-width: 100%; } smpco friends { width: 100%; } smpco Photos main { width: 100%; max-width: 100%; } smpco Photos { width: 100%; } smpco Videos main { width: 100%; max-width: 100%; } smpco Videos { width: 100%; } smpco Reels main { width: 100%; max-width: 100%; } smpco Reels { width: 100%; } smpco gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} smpco abouts>main>d.main { padding-bottom: 22px; } smpco btn { cursor: pointer; } smpco grid { margin-top: 11px; } smpco gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} smpco gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } smpco username{font-size: 0.55em; opacity: 0.66;} smpco nv back>i { height: 33px; width: 33px; } smpco cover { display: flex; position: relative; height: 100%; overflow: hidden; } smpco spfo>bl>ft>bl op:hover { background: var(--bc); } smpco btn:hover { background: var(--bc); } smpco pffs ff ft expnd:hover { background: var(--bc); } smpco gd:hover { background: var(--bc); } smpco pffs hd btn:hover { transform: scale(0.9); background: var(--a); } smpco ff>ft>bl op { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 28px; width: 28px; justify-content: center; cursor: pointer; } smpco cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } smpco cover ii img { object-fit: cover; height: 100%; width: 100%; } smpco smpcocover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 30px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 15px; grid-template-columns: 30px auto; width: unset; } smpco ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } smpco ff dppic { display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); position: relative; padding: 6px; height: 168px; width: 168px; } smpco dppic upld { position: absolute; z-index: 9999; background: rgb(149 149 149 / 14%); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } smpco dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } smpco ff { grid-template-rows: 370px auto; display: grid; padding: 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } smpco mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } smpco ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; padding-right: 0; } smpco ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; } smpco ff btns btn { display: grid; grid-template-columns: 22px auto; margin: 4px; white-space: nowrap; font-size: 0.88em; align-items: center; padding: 2px 14px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; font-weight: 400; } smpco ff btn>i { height: 18px; width: 18px; margin-left: 2px; } smpco ff btn:nth-child(2)>i>svg { fill: var(--b); } smpco pffs { display: block; } smpco pffs ff ft expnd svg { transform: rotate(-90deg); } smpco pffs ff>ft>bl mg { display: flex; margin: 0; } smpco pfinfo upld h5 { font-weight: 100; } smpco pffs ff>ft>bl mg a.this { border-bottom: 2px solid; color: var(--c); } smpco oppffs ff ft op{ display: none; } smpco pffs bd btn h6 { font-weight: 400; } smpco pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } smpco pffs opp { display: none; background: var(--b); border-radius: 11px; position: absolute; right: 0; width: 280px; padding: 11px; top: 56px; transition: 333ms; z-index: 99999999999; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); } .opp opp { display: block; } smpco mg>a>i { height: auto; width: auto; margin-top: 2px; } smpco pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; border-bottom: 1px solid var(--bc); } smpco ff mg a { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; } smpco ff mg aa { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; cursor: pointer; } smpco expnd svg { height: 22px; width: 22px; } @media screen and (max-width: 999px) { smpco ff btns>btn:nth-child(3) { display: none; } smpco sidebar { width: auto; margin: 11px; } smpco pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } smpco pffs ff>bd { display: block; } smpco ff { grid-template-rows: 163px auto; padding: 0 11px; } smpco ff ft expnd { display: none; } smpco ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } smpco pffs { display: block; background: var(--b-t); } smpco ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } smpco upld h5 { display: none; } smpco cover upld { width: 33px; padding: 6px; right: 10px; bottom: 8px; } } cm input { background: none; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; padding: 0 11px; } smpco ff bl ft op { display: none; } smpco ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } smpco cover upld h5 { font-weight: 100; } smpco bl op svg { height: 22px; width: 22px; } smpco pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } smpco upld { display: none; } smpco dppic upld { display: none; } smpco ff bd bl:last-child>btns { display: flex; } pfilter btn { display: grid; grid-template-columns: 22px auto; margin: 4px; white-space: nowrap; font-size: 0.88em; align-items: center; padding: 2px 14px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; font-weight: 400; } pfilter { display: flex; background: var(--b-t); padding: 11px; border-radius: 11px; margin-bottom: 11px; align-items: center; justify-content: space-between; } @media screen and (min-width: 999px) { smpco sidebar { width: 44%; } smpco .aerea { flex-direction: unset; max-width: 1100px; margin: auto; } .otherpos d.aerea { display: block; } .otherpos main { max-width: unset; width: auto; } } /* Meeting Particpant Intro Component */ cpno { display: block; padding: 11px; background: var(--b-t); border-radius: 11px; margin-bottom: 11px; } cpno>bd>d { display: grid; grid-template-columns: 33px auto; margin: 5px 0px; padding: 4px 0; } cpno d>i { height: 22px; width: 22px; opacity: 0.5; } cpno>bd>d { display: grid; grid-template-columns: 33px auto; padding: 7px 0; margin-bottom: 3px; font-weight: 400; font-size: 0.99em; } @media screen and (max-width: 999px) { smpcu ff btns>btn:nth-child(3) { display: none; } smpcu sidebar { width: auto; margin: 11px; } smpcu pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } smpcu pffs ff>bd { display: block; } smpcu ff { grid-template-rows: 163px auto; padding: 0 11px; } smpcu ff ft expnd { display: none; } smpcu ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } smpcu pffs { display: block; background: var(--b-t); } smpcu ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } smpcu upld h5 { display: none; } bio { padding: 11px; } } /* Gig user about component */ caguo { display: block; padding: 11px; background: var(--bt); border-radius: 11px; margin: 11px 0; } caguo>bd>bl { display: block; padding: 22px; background: var(--bc); box-shadow: var(--bs); border-radius: 11px; margin-top: 11px; } caguo>bd>bl>hd { display: grid; grid-template-columns: 50% 50%; } caguo>bd>bl d { margin: 22px; } caguo>bd>bl d>p { margin: 0; margin-bottom: 5px; } caguo>bd>bl d>t { font-weight: 700; } caguo>bd>btn { display: block; text-align: center; width: fit-content; background: var(--aaa); padding: 11px 22px; margin: 11px; margin-left: 0; border-radius: 5px; box-shadow: var(--bs); font-weight: 500; color: var(--b); } aboutuser { display: block; margin: 11px; margin-top: 33px; } /* Gig Package compaire component */ cgpco td>i { height: 16px; width: 16px; } cgpco td.status { text-align: center; vertical-align: middle; width: 25%; } cgpco td:first-child { color: #74767e; font-weight: 400; padding: 11px; text-align: left; vertical-align: text-top; width: 144px; } /* FAQ component */ cgfqo fq>d { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; } cgfqo fq { display: block; transition: 99ms; margin: 5px 0; padding: 5px; border-bottom: 1px solid var(--bc); overflow: hidden; } cgfqo fq>text { display: block; overflow: hidden; } cgfqo fq>d>btn { transition: 99ms; display: block; height: 22px; width: 22px; place-content: center; } fq.more t { visibility: visible; transform: translate(0, 0%) scale(1); height: 100%; } cgfqo fq t { display: block; transition: 333ms; transform: translate(0%, -353%) scale(1); visibility: hidden; height: 0; } FQ.more>d>btn { transform: rotate(180deg); } cgfqo { display: block; padding: 22px; margin: 11px; background: var(--bt); border-radius: 11px; } cgfqo fq:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } cgfqo fq:last-child>d { padding-bottom: 0; } cgfqo>hd { display: grid; grid-template-columns: auto 44px; align-items: center; } cgfqo>hd>btn { display: block; height: 22px; width: 22px; place-content: center; margin: auto; margin-right: 0; } cgfqo.FAQ>hd>btn { transform: rotate(180deg); } /* Gig Reviews */ crco>hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } crco>hd>rate { display: flex; align-items: center; } crco>hd>rate>i { height: 13px; width: 13px; margin: 4px; } crco>hd>rate { display: flex; align-items: center; font-weight: 600; } crco trc { display: grid; align-items: center; grid-template-columns: 55px auto 44px; padding: 5px 0; margin-bottom: 5px; } crco trc>d { display: block; background: var(--bc); height: 11px; border-radius: 33px; margin: 0 11px; position: relative; } crco trc>d:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 45%; background: var(--aaa); border-radius: 33px; } crco>bd { display: grid; grid-template-columns: 50% 50%; } crco>bd rnk { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; margin-bottom: 5px; } crco>bd rnk>d { display: flex; align-items: center; } crco rnk>d>i { height: 13px; width: 13px; margin: 4px; } gigreviews { display: block; margin: 11px; } cgrws { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin-top: 11px; } crfo>hd>sl { display: grid; grid-template-columns: auto 45px; height: 38px; border: 1px solid var(--bc); align-items: center; border-radius: 5px; } crfo sl>input { position: absolute; height: auto; top: 0; bottom: 0; right: 0; left: 0; font-weight: 500; letter-spacing: 0.55px; padding-right: 55px; width: auto; } crfo>hd>sl>btn { display: block; place-content: center; height: 39px; width: 45px; grid-column-start: 2; background: var(--aaa); border-radius: 0 3px 3px 0; border-left: 1px solid var(--bc); } crfo sl>btn svg { fill: var(--b); } crfo sl>input:focus { box-shadow: none; border-radius: 5px; } crfo { display: block; width: 46%; margin: 22px 0; } crfo select { height: auto; padding: 0; border: none; width: fit-content; background: transparent; } crfo label>input { margin: 0; height: 13px; width: 13px; } crfo>bd>label { display: grid; align-items: center; grid-template-columns: 22px auto; margin: 11px 0; } cgrwo rww trc>hd>i { height: 44px; width: 44px; border-radius: 55%; overflow: hidden; margin-right: 11px; } cgrwo>rww { display: block; padding: 22px; border: 1px solid var(--bc); border-radius: 11px; } cgrwo reog { display: flex; align-items: center; white-space: nowrap; } cgrwo reog>i { height: 13px; width: 13px; margin: 4px; margin-left: 0; } cgrwo>rww trc { display: flex; align-items: center; padding-bottom: 5px; } cgrwo rate>i { height: 13px; width: 13px; margin: 4px; } cgrwo>rww rate { display: flex; align-items: center; font-weight: 600; } cgrwo>rww bd>p { font-weight: 500; overflow: hidden; display: block; max-height: 8.4em; -webkit-line-clamp: 4; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } cgrwo>rww>bd>bl>ft { display: flex; align-items: center; } cgrwo>rww>bd>bl>ft t { font-weight: 600; margin: 0; } cgrwo bl>ft>l { display: block; height: 22px; width: 0px; border-left: 2px solid var(--bc); margin: 0 33px; } cgrwo bl>ft>d>p { margin: 0; } cgrwo>rww>bd>bl>ft { display: flex; align-items: center; padding-bottom: 11px; } cgrwo>rww cmnt>hd { display: grid; grid-template-columns: 44px auto 11px; align-items: center; } cgrwo>rww cmnt>hd>i { height: 33px; width: 33px; border-radius: 55%; overflow: hidden; } cgrwo>btns { display: flex; align-items: center; } cgrwo>btns>t { display: block; margin: 5px; padding-bottom: 11px; padding-top: 5px; } cgrwo>btns>btn { display: grid; padding: 11px 5px; grid-template-columns: 22px auto; align-items: center; margin: 5px; padding-top: 5px; font-size: 0.88em; font-weight: 600; } cgrwo>btns>btn>i { height: 13px; width: 13px; } cgrwo>btns>btn.this { color: #1dbf73; } cgrwo>btns>btn.this svg { fill: #1dbf73; } cgrwo>btns>btn.this:last-child { color: #f74040; } cgrwo>btns>btn.this:last-child svg { fill: #f74040; } cgrws>ft>btn { padding: 11px 22px; background: var(--aaa); color: var(--b); border-radius: 5px; margin-top: 11px; display: block; width: fit-content; } cgrwo cmnt>bd { display: block; overflow: hidden; } cgrwo cmnt>bd>t { display: block; transition: 333ms; transform: translate(0%, -353%) scale(1); visibility: hidden; height: 0; padding: 0; } cgrwo.cmnt cmnt>bd>t { visibility: visible; transform: translate(0, 0%) scale(1); height: 100%; padding: 11px; } cgrwo>rww trc d { display: flex; align-items: center; } cgrwo time { font-size: 0.88em; opacity: 0.7; } /* Gig Plan */ gigplan>hd>btns { display: flex; align-items: center; justify-content: end; } gigplan>hd>btns i.btn { opacity: 0.5; } gigplan>hd>btns>d t:after { border-style: solid; content: ""; position: absolute; border-color: transparent #fff transparent transparent; border-width: 6px 8px 6px 0; left: -8px; top: 8px; z-index: 3; } gigplan>hd>btns btn { display: flex; align-items: center; } gigplan>hd>btns>d t:before { border-color: transparent #dadbdd transparent transparent; border-width: 8px 9px 8px 0; left: -9px; top: 6px; z-index: 2; border-style: solid; content: ""; position: absolute; } gigplan>hd>btns>d>t { display: block; padding: 5px 11px; background: var(--bt); border-radius: 5px; position: relative; border-width: 8px 9px 8px 0; border: 1px solid; font-size: 0.77em; border-color: #dadbdd; margin-left: 7px; } gigplan>hd>btns i.btn { opacity: 0.5; height: 15px; width: 15px; margin: 4px; } gigplan>hd>btns>d { display: flex; align-items: center; } /* Gig Plan Component */ cgplo>hd btns { display: grid; text-align: center; grid-template-columns: 33.3% 33.3% 33.3%; } cgplo>hd btns>btn { display: block; padding: 11px; border: 1px solid var(--bc); font-weight: 500; } gigplan>ft>btn { display: block; background: var(--aaa); padding: 11px; text-align: center; color: var(--b); border-radius: 5px; } cgplo bsc>hd>d { display: flex; align-items: center; } cgplo bsc>hd>d>i { height: 13px; width: 13px; margin: 4px; } cgplo bsc>hd>d>h4 { font-weight: 500; font-size: 1.22em; } cgplo bsc>hd { display: block; margin-bottom: 11px; } cgplo bsc>bd>d { display: block; margin: 11px 0; } cgplo bsc>ft>bl>hd { display: flex; font-weight: 600; align-items: center; font-size: 0.88em; } cgplo bsc>ft>bl>hd i { height: 13px; width: 13px; margin: 4px; margin-bottom: 2px; } cgplo bsc>ft>bl d>i { margin: 0 5px; width: 14px; height: 14px; } cgplo bsc>ft>bl d { display: grid; grid-template-columns: 33px auto; font-size: 0.77em; align-items: center; padding: 4px 0; } cgplo bsc>bd>d>t { font-size: 0.88em; } cgplo bsc bl>ft>btn { padding: 11px; background: var(--aaa); display: block; border-radius: 5px; color: var(--b); margin-top: 22px; } d.notable>i { opacity: 0.4; } cgplo bsc bl>ft>btn>t { margin: 0; } cgplo { display: block; background: var(--bt); border: 1px solid var(--bc); margin-top: 22px; } cgplo>bd { display: block; padding: 22px; } gigplan>ft { display: block; padding: 22px; background: var(--bt); margin-top: 22px; border-radius: 5px; } cgplo basic, cgplo standard, cgplo premium { display: none; } cgplo.basic basic { display: block; } cgplo.standard standard { display: block; } cgplo.premium premium { display: block; } cgplo.basic btn.bsc { border-bottom: 2px solid var(--c); } cgplo.standard btn.stndrd { border-bottom: 2px solid var(--c); } cgplo.premium btn.prmim { border-bottom: 2px solid var(--c); } gigplan>hd>btns>btn { height: 22px; width: 22px; padding: 3px 10px; background: var(--bt); margin: 0 5px; border: 1px solid #dadbdd; border-radius: 5px; } cgplo.basic>bd { padding: 15px; } cgplo t { font-size: 0.88em; } cgplo>bd { display: block; padding: 22px; padding-bottom: 11px; } gigpost>h1 { overflow-wrap: break-word; padding-bottom: 16px; font-size: 1.44em; line-height: 130%; font-family: sans-serif; font-weight: 700; margin: 11px; margin-bottom: 0; } cgpo points { display: none; } /* General and Advance feature component */ /* Meeting sessions */ cmys trc ft>i { display: block; margin: auto; height: 33px; width: 33px; padding: 11px; position: relative; z-index: 9999; transition: 333ms; transform: rotate(90deg); } cmys trc.more ft>i { transform: rotate(-90deg); } /* Common css */ moreop { display: block; position: relative; } cmopo { display: block; position: absolute; z-index: 99; top: 80%; background: var(--b-t95); padding: 11px; border-radius: 11px; width: 149px; right: 18px; backdrop-filter: blur(20px); box-shadow: var(--bs-bt); transition: 33ms; transform: translate(0%, -5%); visibility: hidden; } cmopo>d { display: flex; position: relative; padding: 11px; border-radius: 5px; height: 33px; margin: 5px 0; align-items: center; } cmopo>d:hover { background: var(--hover); } .MoreOption cmopo { transform: translate(0%, 2%); visibility: visible; } @media screen and (min-width: 999px) { moreop { display: none; } } /* Cut Border component */ cctbo>d { display: block; height: 1px; width: 90%; border-bottom: 2px dashed; margin: auto; color: var(--bc); } cctbo>c { display: block; height: 33px; background: var(--b); width: 33px; margin: 3px; border-radius: 55%; position: absolute; left: -35px; } cctbo>dd { display: block; height: 33px; background: var(--b); width: 33px; margin: 3px; border-radius: 55%; position: absolute; right: -33px; } /* Reciept */ crpo cpro>ft>btn { background: transparent; } crpo cpydo pd { display: grid; grid-template-columns: 50% 50%; } crpo cpydo { padding: 11px; } crpo cpydo d { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 7px; margin: 5px; font-size: 0.77em; } crpo cpydo pd>d>c { font-size: 15px; margin-top: 5px; } crpo cpro { border-radius: 22px 22px 0 0; position: relative; padding-bottom: 33px; } cbgs { display: flex; position: absolute; bottom: -14px; left: 0; right: 0; } cbgs>d { display: block; height: 22px; width: 22px; background: var(--b); margin: 5px; border-radius: 55%; } /* Onboarding */ character { display: none; } cchro>bd { display: block; padding: 11px 0; } cchro>hd>logo { display: block; height: 44px; width: 29px; margin: 11px; place-content: center; margin-left: 0; } cchro { display: block; position: relative; } cchro>bd>form { position: relative; } cchro form>d { display: grid; grid-template-columns: 44px auto; align-items: center; border: 1px solid var(--bc); margin: 11px 0; position: relative; padding: 11px; border-radius: 33px; } cchro sl>i>svg { opacity: 0; fill: var(--b); transition: 99ms; } cchro form>d>input { position: absolute; margin: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; opacity: 0; } cchro form>d>sl { height: auto; width: auto; background: transparent; margin: 0; } cchro form>d>sl>i { display: block; height: 11px; width: 11px; border: 1px solid var(--bor); border-radius: 55%; margin: 4px; padding: 5px; } cchro { display: block; position: relative; padding: 44px 0; height: 100%; } cchro>bg { height: 30%; transition: 99ms; background: var(--aaa); color: var(--b); position: absolute; overflow: visible; top: unset; bottom: 9%; text-align: center; display: grid; grid-template-rows: 88px 55px auto; border-radius: 22px 22px 0 0; } cchro>bg>p { grid-row-start: 2; padding: 11px; } character>hd { display: flex; justify-content: space-between; align-items: center; } cchro>bg>img { position: absolute; top: -88px; width: 166px; height: 166px; left: 0; right: 0; opacity: 1; margin: auto; animation: oscillate 5s linear infinite; } cchro>bg:after { content: ""; background: url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp); background-repeat: repeat; background-size: 100%; background-position: 100% 100%; animation: Flow 3s infinite; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } cchro>hd, cchro>bd { display: block; padding: 11px; } cchro>ft>btn.btn { height: auto; padding: 11px; max-width: 222px; } @media only screen and (min-width: 999px){ character { overflow-y: auto; scroll-behavior: smooth; } cchro>bg { border-radius: 22px; margin: 11px; bottom: 0; height: auto; } } cchro form>d.this i>svg { opacity: 1; } cchro form>d.this i { background: var(--aaa); } /* registered successfull */ crgdo { display: block; padding: 22px; max-width: 333px; margin: 22px auto; text-align: center; background: var(--btn2); box-shadow: 0 0 4px 3px var(--bc), 0 0 11px 6px var(--bc); border-radius: 23px; position: relative; color: var(--b); } crgdo>ft>a { color: var(--b); } crgdo>hd>i { height: 33%; width: 33%; margin: 22px auto; margin-top: 0; } crgdo>bg { background: rgb(255 255 255 / 35%); border-radius: 22px; top: 3%; right: 3%; left: 3%; bottom: 3%; } crgdo>ft>btn.btn { background: var(--b); padding: 11px 22px; font-size: 0.88em; color: var(--c); margin: 11px auto; display: block; height: auto; max-width: 55%; margin-top: 22px; } rgstrsuccess { display: none; justify-content: center; align-items: center; } .Registered rgstrsuccess { display: flex; } /* Account in Desktop */ @media screen and (min-width: 999px) { account { border: solid 1px var(--bt); border-radius: 22px; height: 77vh; max-width: 77%; } #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; } } /* CSS for Apple Users */ /* CSS for designes improve */ cman:hover { background: var(--hover); } cman:active { transform: scale(0.98); } cartfill input:focus { border: solid 2px var(--aa); } cartfill .group { display: grid; border: 1px solid var(--bc); border-radius: 5px; } cartfill .group>select { border: none; } cartfill label { opacity: 1; font-weight: 500; padding: 0 7px; } ccpo>bd btn:hover { background: var(--hover); } out { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; margin: 11px; } skip { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; margin: 11px; font-weight: 500; } /* Gig New 's buggs and design improved css */ @media screen and (max-width: 999px) { sgn ovrw { display: block; padding: 11px; margin: 11px; } sgn ovrw>bl { padding: 11px; margin: 0; } sgn ovrw bl>ft { display: none; } } sgpo>h2 { margin: 11px; margin-top: 22px; } /* meeting host */ smho sidebar { width: 50%; } smho ff bd btn>i { height: 15px; width: 15px; margin: auto; } smho header { position: unset; } smho friends main { width: 100%; max-width: 100%; } smho friends { width: 100%; } smho Photos main { width: 100%; max-width: 100%; } smho Photos { width: 100%; } smho Videos main { width: 100%; max-width: 100%; } smho Videos { width: 100%; } smho Reels main { width: 100%; max-width: 100%; } smho Reels { width: 100%; } smho gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} smho abouts>main>d.main { padding-bottom: 22px; } smho btn { cursor: pointer; } smho grid { margin-top: 11px; } smho gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} smho gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } smho username{font-size: 0.55em; opacity: 0.66;} smho nv back>i { height: 33px; width: 33px; } smho cover { display: flex; position: relative; height: 100%; overflow: hidden; } smho ff>ft>bl op:hover { background: var(--bc); } smho pffs ff ft expnd:hover { background: var(--bc); } smho gd:hover { background: var(--bc); } smho ff>ft>bl op { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; justify-content: center; } smho cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } smho cover ii img { object-fit: cover; height: 100%; width: 100%; } smho cover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 18px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 15px; grid-template-columns: 30px auto; width: unset; } smho ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } smho ff dppic { display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%); position: relative; padding: 6px; height: 155px; width: 155px; } smho dppic upld { position: absolute; z-index: 9999; background: rgb(149 149 149 / 14%); height: 33px; width: 33px; bottom: 0px; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; top: unset; } smho dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } smho ff { grid-template-rows: 370px auto; display: grid; padding: 11px 11px 1px 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } smho mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } smho ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } smho ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; margin-left: 22px; } smho ff bd btn { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; place-content: center; } smho pffs { display: block; background: var(--bt); margin-bottom: 11px; } smho pffs ff ft expnd svg { transform: rotate(-90deg); } smho pffs ff>ft>bl mb { display: flex; margin: 0; } smho pfinfo upld h5 { font-weight: 100; } smho pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } smho oppffs ff ft op{ display: none; } smho pffs bd btn h6 { font-weight: 400; } smho pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } smho pffs opp { display: none; background: var(--b); border-radius: 11px; position: absolute; right: 0; width: 280px; padding: 11px; top: 56px; transition: 333ms; z-index: 99999999999; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); } smho opp { display: block; } smho mg>a>i { height: auto; width: auto; margin-top: 2px; } smho pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } smho ff mb aa { display: flex; padding: 8px; margin: 0 6px; font-weight: bold; transition: 33ms; height: auto; margin-top: 1px; position: relative; align-items: center; font-size: 0.88em; opacity: 0.9; } smho ff mb aa>i { margin-top: 7px; } smho expnd svg { height: 22px; width: 22px; } smho pffs bd btn t { display: flex; justify-content: center; align-items: start; margin-bottom: 3px; font-weight: 500; opacity: 0.9; font-size: 0.77em; } spfo pffs btns i { height: 17px; width: 17px; margin: auto; } @media screen and (max-width: 999px) { smho ff bd btn:last-child { display: flex; } smho pffs btns { display: grid; margin-top: 22px; grid-template-columns: 40.3% 40.3% 19.3%; } smho sidebar { width: auto; margin: 11px; } smho pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } smho pffs ff>bd { display: block; } smho ff { grid-template-rows: 163px auto; padding: 0 11px; } smho ff ft expnd { display: none; } smho ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } smho pffs { display: block; background: var(--b-t); } smho ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } smho upld h5 { display: none; } smho cover upld { width: 33px; padding: 6px; right: 10px; bottom: 8px; } } smho ff bl ft op { display: none; } smho ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } smho cover upld h5 { font-weight: 100; } smho bl op svg { height: 22px; width: 22px; margin: auto; } smho pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } @media screen and (min-width: 999px) { smho sidebar { width: 44%; } smho .aerea { flex-direction: unset; max-width: 1300px; margin: auto; }} smmro goals { display: grid; background: var(--b-t); margin: 11px 0; border-radius: 22px; margin-top: 11px; padding: 11px; grid-template-columns: 50% 50%; box-shadow: var(--bs); } smmro goals hd h4 { display: grid; justify-content: center; margin-bottom: 11px; margin-bottom: 11px; } smmro goals bd h4 { display: grid; justify-content: center; margin-bottom: 11px; } smmro goals hd { background: var(--bc); padding: 11px; border-radius: 22px; margin: 4px; overflow: hidden; } smmro goals bd { padding: 11px; border-radius: 22px; margin: 4px; overflow: hidden; border: solid 2px var(--bc); } smmro goals hd d { display: flex; align-items: center; gap: 5px; } smmro goals hd d input { width: 15px; height: 15px; } smmro goals d p { margin: 7px 0px; font-size: 12px; } smmro goals>bd>d { display: flex; align-items: center; justify-content: space-between; } smmro goals bd p { margin: 7px 0px; font-size: 12px; } smmro goals name { margin: 7px 0px; font-size: 12px; } smmro goals time { margin: 7px 0px; font-size: 12px; } /* user */ suso upld { position: absolute; z-index: 9999; background: rgb(149 149 149 / 14%); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } suso userpff sidebar { width: 50%; } suso header { position: unset; } suso friends main { width: 100%; max-width: 100%; } suso friends { width: 100%; } suso Photos main { width: 100%; max-width: 100%; } suso Photos { width: 100%; } suso Videos main { width: 100%; max-width: 100%; } suso Videos { width: 100%; } suso Reels main { width: 100%; max-width: 100%; } suso Reels { width: 100%; } suso gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} suso abouts>main>d.main { padding-bottom: 22px; } suso btn { cursor: pointer; } suso grid { margin-top: 11px; } suso gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} suso gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } suso username{font-size: 0.55em; opacity: 0.66;} suso nv back>i { height: 33px; width: 33px; } suso cover { display: flex; position: relative; height: 100%; overflow: hidden; } suso ff>ft>bl op:hover { background: var(--bc); } suso btn:hover { background: var(--bc); } suso pffs ff ft expnd:hover { background: var(--bc); } suso gd:hover { background: var(--bc); } suso ff>ft>bl op { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; justify-content: center; } suso cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } suso cover ii img { object-fit: cover; height: 100%; width: 100%; } suso cover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 18px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 15px; grid-template-columns: 30px auto; width: unset; } suso ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } suso pffs btns>btn:first-child svg { fill: var(--b); } suso ff dppic { display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%); position: relative; padding: 6px; height: 155px; width: 155px; } suso dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } suso ff { grid-template-rows: 370px auto; display: grid; padding: 11px 11px 1px 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } suso mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } suso ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } suso ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; margin-left: 22px; } suso ff bd btn { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; place-content: center; } suso pffs { display: block; background: var(--bt); margin-bottom: 11px; } suso pffs ff ft expnd svg { transform: rotate(-90deg); } suso pffs ff>ft>bl mb { display: flex; margin: 0; } suso pfinfo upld h5 { font-weight: 100; } suso pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } suso ff bd btn.this { background: var(--aaa); color: var(--b); } suso oppffs ff ft op{ display: none; } suso pffs bd btn h6 { font-weight: 400; } suso pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } suso pffs opp { display: none; background: var(--b); border-radius: 11px; position: absolute; right: 0; width: 280px; padding: 11px; top: 56px; transition: 333ms; z-index: 99999999999; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); } suso mg>a>i { height: auto; width: auto; margin-top: 2px; } suso pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } suso ff mb aa { display: flex; padding: 8px; margin: 0 6px; font-weight: bold; transition: 33ms; height: auto; margin-top: 1px; position: relative; align-items: center; font-size: 0.88em; opacity: 0.9; } suso ff mb aa>i { margin-top: 7px; } suso expnd svg { height: 22px; width: 22px; } suso pffs bd btn t { display: flex; justify-content: center; align-items: start; margin-bottom: 3px; font-weight: 500; opacity: 0.9; font-size: 0.77em; } suso pffs btns i { height: 17px; width: 17px; margin: auto; } @media screen and (max-width: 999px) { suso ff bd btn:last-child { display: flex; } suso pffs btns { display: grid; margin-top: 22px; grid-template-columns: 40.3% 40.3% 19.3%; } suso sidebar { width: auto; margin: 11px; } suso pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } suso pffs ff>bd { display: block; } suso ff { grid-template-rows: 163px auto; padding: 0 11px; } suso ff ft expnd { display: none; } suso ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } suso pffs { display: block; background: var(--b-t); } suso ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } suso upld h5 { display: none; } suso cover upld { width: 33px; padding: 6px; right: 10px; bottom: 8px; } } suso ff bl ft op { display: none; } suso ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } suso cover upld h5 { font-weight: 100; } suso bl op svg { height: 22px; width: 22px; margin: auto; } suso pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } @media screen and (min-width: 999px) { suso sidebar { width: 44%; } suso .aerea { flex-direction: unset; max-width: 1100px; margin: auto; } .otherpos d.aerea { display: block; } .otherpos main { max-width: unset; width: auto; } } @media screen and (max-width: 750px) { aa.chek { display: none; } } @media screen and (max-width: 650px) { aa.vdos { display: none; } } @media screen and (max-width: 550px) { aa.phts { display: none; } aa.flwrs { display: none; } aa.msns { display: none; } } @media screen and (max-width: 450px) { aa.frns { display: none; } aa.rels { display: none; } } @media screen and (max-width: 300px) { aa.Abt { display: none; } } /*Totalposts Component*/ ctpo { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin: 7px; } ctpo>hd { display: flex; align-items: center; justify-content: space-between; margin: 11px 0; } ctpo psts { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; align-items: center; } ctpo pst { border-radius: 6px; display: grid; overflow: hidden; margin: 2px; cursor: pointer; } ctpo pst img { height: 100%; width: 100%; } ctpo pst i { overflow: hidden; height: 100%; width: 100%; } ctpo>hd>btn { padding: 6px; border-radius: 5px; font-size: 0.88em; } /*Totalfriends Component */ cfro { display: block; padding: 11px; background: var(--b-t); border-radius: 11px; margin: 11px; } cfro>hd { display: flex; align-items: center; justify-content: space-between; margin: 11px 0; } cfro frnds { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; align-items: center; } cfro frnd { border-radius: 6px; display: grid; overflow: hidden; margin: 2px; cursor: pointer; margin-bottom: 11px; } cfro frnd i { overflow: hidden; height: 100%; width: 100%; max-height: 166px; } cfro frnd i img { height: 100%; width: 100%; object-fit: cover; } cfro>hd>btn { padding: 6px; border-radius: 5px; font-size: 0.88em; } cfro frnd h5:hover { text-decoration: underline; } cfro frnd>h5 { margin: 7px; } cfro>bd>h6:hover { cursor: text; } /* Invoices */ svis invss invs { display: grid; grid-template-columns: 55px auto auto; padding: 11px; margin: 11px; background: var(--b-t); align-items: center; border-radius: 11px; font-size: 1.11em; } svis invs hd { height: 44px; width: 44px; overflow: hidden; border-radius: 55%; border: 1px solid var(--bc); } svis invs hd i { height: 100%; width: 100%; } svis invs h6 { font-weight: 400; } svis invs>ft { display: flex; flex-direction: column; justify-content: end; align-items: end; } svis invs>ft>h5 { font-weight: 400; letter-spacing: 1px; font-size: 0.77em; } svis invoiceslist>hd>bl>hd { display: flex; justify-content: space-between; } svis invoiceslist>hd bl hd btn { display: grid; padding: 3px 11px; border-bottom: 11px; background: var(--aaa); color: var(--b); border-radius: 5px; grid-template-columns: 33px auto; align-items: center; font-weight: 400; font-size: 0.88em; } svis invoiceslist>hd bd bx { display: flex; flex-direction: column; border: 1px solid var(--bor); border-radius: 11px; padding: 11px; margin: 6px; } svis invoiceslist>hd>bl bd { display: grid; grid-template-columns: 25% 25% 25% 25%; align-items: center; margin-top: 22px; } svis invoiceslist bx p { margin: 0; display: grid; justify-content: center; } svis invoiceslist>hd>bl svg { fill: var(--b); } svis invoicelst mg btn { display: grid; padding: 3px 11px; border: 1px solid; color: var(--aa); border-radius: 7px; grid-template-columns: 33px auto 33px; align-items: center; margin-bottom: 4px; } svis invoicelst mg { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 0 6px; } svis invoicelst mg aa { display: block; padding: 11px 0; margin: 0 11px; transition: 333ms; } svis invoicelst mg hd { display: flex; } svis invoicelst mg aa.this { border-bottom: 1px solid var(--c); font-weight: 500; } svis invoicelst { margin-top: 5px; display: block; padding: 22px; background: var(--bt); border-radius: 0 0 22px 22px; } svis inv trcs>trc li { margin: 0 11px; } svis inv trcs>trc>hd { display: flex; flex-direction: column; text-align: center; background: var(--bc); border-radius: 5px; padding: 4px; } svis inv trcs>trc age h6 { margin-top: 5px; font-weight: 500; } svis inv trcs>trc { grid-template-columns: 73px auto 88px; align-items: start;position: relative;} svis inv trcs>trc h6, trcs>trc h5 { font-weight: 500; opacity: 0.8; align-items: center; } invss>trcs>trc { box-shadow: var(--bs); background: var(--bc); border: 1px solid var(--bc); } svis inv trc h5.cgreen { color: #70ff58; font-weight: 600; } svis inv trc h5.cred { color: #ff5858; font-weight: 600; } svis inv trcs>trc id { font-weight: 400; } svis inv trcs>trc a{position: absolute; height: 100%; width: 100%;} invoiceslist>hd>bl { display: block; padding: 22px; background: var(--bt); border-radius: 22px 22px 0px 0px; } bx#w3review { background: var(--bc); padding: 11px; border-radius: 11px; } @media screen and (max-width: 999px) { svis invoiceslist>hd>bl bd { display: grid; grid-template-columns: 50% 50%; align-items: center; margin: 11px 0; } svis invoiceslist { display: block; margin: 0 11px; } svis invoicelst mg btn { display: none; } svis invoicelst mg { display: block; } svis invoicelst mg hd { justify-content: space-between; text-align: center; } } svis grid bl { background: var(--bt); padding: 22px; } .AllInvoice aa.alll { border-bottom: 1px solid var(--c); font-weight: 500; } .Draft aa.drft { border-bottom: 1px solid var(--c); font-weight: 500; } .Unpaid aa.unpd { border-bottom: 1px solid var(--c); font-weight: 500; } /*Empty Friends Component*/ .Birthdayempty btn.seeall { display: none; } cemo { display: none; align-items: center; justify-content: center; grid-column-start: 1; grid-column-end: 3; padding: 55px; font-weight: bold; font-size: 1.33em; opacity: 0.8; } .Birthdayempty cemo { display: flex; } .Followingempty btn.seeall { display: none; } .Followingempty cemo { display: flex; } /*Photo Component*/ cfto>hd btn { position: absolute; padding: 8px; height: 18px; width: 18px; border-radius: 55%; background: rgba(0, 0, 0, 0.4); z-index: 99999; right: 7px; top: 7px; } cfto { height: 100%; width: 100%; display: block; position: relative; max-width: 203px; max-height: 203px; border-radius: 11px; overflow: hidden; margin: 3px; cursor: pointer; } cfto i { display: block; height: 100%; width: 100%; } cfto i>img { width: 100%; height: 100%; } cfto>hd btn svg { fill: var(--bt); } /* Reels Component */ /*{ background: var(--bt); border-radius: 11px; display: block; padding: 11px; }*/ crls aa { margin: 6px; padding: 11px; cursor: pointer; } abrls { display: flex; align-items: center; } .Yourreels aa.urrls { border-bottom: 2px solid var(--a); color: var(--a); } .Savedreels aa.svrls { border-bottom: 2px solid var(--a); color: var(--a); } crls vdos { display: flex; flex-wrap: wrap; } @media screen and (max-width: 999px) { crls { margin: 0 11px; } } /*Profile Update*/ update>hd>h { display: grid; grid-template-columns: 55px auto 55px; text-align: center; padding: 11px; border-bottom: 1px solid var(--bc); align-items: center; } update>hd back { padding: 6px; height: 22px; width: 22px; border-radius: 55%; background: var(--bc); cursor: pointer; margin: 0 auto; } update>ft>btn { display: flex; justify-content: center; padding: 11px; background: var(--bc); margin: 11px; border-radius: 5px; color: var(--a); font-weight: 500; cursor: pointer; } update { display: block; background: var(--bt); padding-bottom: 22px; margin: 11px; border-radius: 11px; } @media screen and (max-width: 999px) { update>hd>h { display: none; } update { margin: 11px; } } cbio>bd>pfphto { display: flex; justify-content: center; } cbio { display: block; padding: 11px; margin: 11px; } cbio>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cbio>hd>btn:hover { background: var(--bc); } cbio>hd { display: flex; justify-content: space-between; } cboo { display: flex; overflow: hidden; border-radius: 11px; margin: 11px auto; padding: 11px; padding-bottom: 0; justify-content: center; } cboo>t { cursor: text; } cfuo { position: relative; display: grid ; width: fit-content; min-width: 333px; height: auto; } cfuo hd { display: block; } cfuo hd tt { display: flex ; justify-content: space-between; align-items: center; margin-bottom: 11px; } cfuo hd tt h3 { font-size: 1.33em; font-weight: 600; } cfuo hd tt mm { display: flex ; align-items: center; } cfuo hd tt mm h4 { font-size: 14px; font-weight: 600; } cfuo hd tt mm i { width: 20px; height: 20px; margin-left: 7px; } cfuo bd { display: block; overflow-x: scroll; } cfuo bd btns { display: grid ; grid-auto-flow: column; } cfuo bd btns btn { display: flex ; align-items: center; border: 1px solid var(--bc); padding: 4px 7px; width: auto; height: fit-content; margin: 0 7px; border-radius: 11px; } cfuo bd btns btn i { width: 24px; height: 24px; align-content: center; text-align: center; } cfuo bd btns btn i path { fill: var(--c); } cfuo bd btns btn t { font-size: 0.88em; font-weight: 500; margin-left: 7px; white-space: nowrap; } featured { display: block; padding: 11px; border-radius: 11px; margin-bottom: 11px; background: var(--b); } featured>bd { display: grid; overflow: scroll; grid-template-columns: 50% 50% 50% 50% 50%; } featured>hd { display: block; margin: 11px 0; } /* Meeting Subscrition Delete */ .agree cdlo { visibility: visible; top: 1px; } cmco>ft>op:active { background: var(--bc); } rvm { left: 0; right: 0; border: 0; top: 0; display: grid; height: 100%; width: 100%; z-index: 9999; height: 0; } cmco>ft>op { display: block; padding: 7px; height: 20px; width: 20px; border-radius: 55%; margin: 0 auto; position: relative; z-index: 9999; } smcs main { overflow: unset; } .options copo { visibility: visible; top: 66px; } cmco>ft>op>i { height: auto; } cmco dlop { position: relative; display: block; } cmco>bd { white-space: nowrap; } @media screen and (max-width: 999px) { cmco id { text-align: unset; } cmco h4 { white-space: nowrap; } } /* Option Delete & More details Component */ .option copo { visibility: visible; top: 66px; } .option rvm { position: absolute; height: 100%; } .deletesure rvm { position: absolute; height: 100%; } copo { display: block; padding: 12px 15px; background: var(--b); box-shadow: 0 50px 100px -20px rgb(50 50 93 / 14%), 0 30px 60px -30px rgb(0 0 0 / 17%), 0 -2px 6px 0 rgb(10 37 64 / 15%); position: absolute; border-radius: 11px; z-index: 99999999; right: 21px; top: 61px; visibility: hidden; transition: 88ms; } copo btn { display: grid; grid-template-columns: 28px auto; padding: 4px 11px; background: var(--bc); align-items: center; border-radius: 5px; margin: 6px 0; height: 30px; border: solid 1px var(--bc); position: relative; color: var(--c); width: auto; box-shadow: unset; font-weight: 400; } smsoh nv op:active { background: var(--bc); } cmys trc.more>copo { visibility: unset; top: 66px; } smso header { z-index: 99999; } smco header { z-index: 9999999; } /* MeetingSessionDelete */ cmys op { display: block; padding: 7px; height: 20px; width: 20px; border-radius: 55%; margin: 0 auto; position: absolute; right: 11px; z-index: 999; } cmys op:active { background: var(--bc); } cmys trc>hd { overflow: unset; } cmys trc>hd>op i:after { display: none; } cmys copo btn>i:after { display: none; } cmys trc>hd>op i { height: 22px; width: 22px; background: unset; padding: 0; } cmys copo btn>i { height: 18px; width: 18px; background: unset; padding: 0; } cmys dlop { display: block; position: relative; } /* MeetingSessionNew */ smsn form { display: grid; position: relative; padding: 0; overflow: scroll; } smsn main { max-width: 100%; } smsn meetingmsg { text-align: center; letter-spacing: 0; font-size: 0.6em; width: 77%; margin: auto; display: block; } smsn trcs>trc>h6 { text-align: end; display: block; } smsn h7 { display: flex; align-items: center; letter-spacing: 0; font-size: 0.7em; } smsn trcs>trc { border-radius: 0; box-shadow: unset; margin: 4px; grid-template-columns: 50% 50%; border-bottom: solid 0.5px var(--bc); padding: 0 11px; padding-bottom: 3px; background: transparent; font-size: 0.77em; backdrop-filter: unset; -webkit-backdrop-filter: unset;width: auto; } smsn form bl:nth-child(6) { grid-column-start: 1; grid-column-end: 3; padding-bottom: 31px; } smsn ft svg { fill: var(--b); } smsn .nw { margin-top: 14px; padding: 0; border-radius: unset; background: var(--t);margin:0 } smsn main { grid-row-start: 1; display: grid; } smsn t { text-align: unset; font-size: 14px; } smsn .nw>hd>d { height: 66px; position: sticky; top: 0; z-index: 9999; margin-top: 15px; } smsn .nw>hd btns { width: 100%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; margin: auto; z-index: 9; position: relative; background: var(--bt); border-radius: 15px; border: solid 1px var(--bc); } smsn d btns>aa {display: flex; justify-content: center; align-items: center; font-weight: bold; margin: 7px; border-radius: 11px; position: relative; transition: 99ms; } smsn d btns>aa.this { background: var(--bc); } smsn .nw>ft { margin-bottom: 11px; display: flex; justify-content: center; background: var(--bt); padding: 22px; margin: 6px; border-radius: 22px; flex-direction: column; text-align: center; margin-bottom: 33px; } smsn .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; } smsn .nw>ft>aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smsn .nw>ft f { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } smsn .nw>ft d { text-align: center; font-size: 0.88em; width: 88%; margin: 11px auto; } smsn .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; } @media screen and (max-width: 999px) { smsn d.aerea { display: grid; } smsn form { display: block; } } /*Profile Photo system Component */ cpio ii>img { height: 100%; width: 100%; object-fit: cover; } cpio>cover { display: block; border-radius: 11px; height: 100%; max-height: 182px; overflow: hidden; position: relative; margin: 0 auto; max-width: 85%; } cpio>dppic { display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%); position: relative; padding: 6px; height: 122px; width: 122px; margin-top: -78px; margin-left: 51px; } cpio upld { position: absolute; z-index: 9999; background: var(--b-t77); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } cpio>dppic>ii { border-radius: 55%; overflow: hidden; display: block; height: 122px; width: 122px; } cpio ii>img { height: 100%; width: 100%; object-fit: cover; } cpio cover upld { width: auto; display: grid; grid-template-columns: 27px auto; bottom: 9px; padding: 4px 10px; } cpio>cover i { height: 18px; width: 18px; } @media screen and (max-width: 999px) { cpio>cover { max-width: 100%; } cpio>cover t { display: none; } cpio cover upld { position: absolute; z-index: 9999; background: var(--b-t77); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } cpio>dppic { margin-left: auto; margin-right: auto; } } /* MeetingSessionUpdate */ smsu form { display: grid; grid-template-columns: 50% 50%; position: relative; padding: 0; overflow: scroll; } smsu main { max-width: 100%; } smsu>bl>bd>d { display: grid; grid-template-columns: 49% 50%; gap: 1%; } smsu meetingmsg { text-align: center; letter-spacing: 0; font-size: 0.6em; width: 77%; margin: auto; display: block; } smsu trcs>trc>h6 { text-align: end; display: block; } smsu h7 { display: flex; align-items: center; letter-spacing: 0; font-size: 0.7em; } smsu trcs>trc { border-radius: 0; box-shadow: unset; margin: 4px; grid-template-columns: 50% 50%; border-bottom: solid 0.5px var(--bc); padding: 0 11px; padding-bottom: 3px; background: transparent; font-size: 0.77em; backdrop-filter: unset; -webkit-backdrop-filter: unset;width: auto; } smsu divider { display: grid; position: relative; grid-template-columns: auto min-content auto; width: 80%; margin: 11px auto; grid-column-start: 1; grid-column-end: 3; } smsu form bl:nth-child(6) { grid-column-start: 1; grid-column-end: 3; padding-bottom: 31px; } smsu ft svg { fill: var(--b); } smsu .nw { margin-top: 14px; padding: 0; border-radius: unset; background: var(--t);margin:0 } smsu main { grid-row-start: 1; display: grid; } smsu t { text-align: unset; font-size: 14px; } smsu .nw>hd>d { height: 66px; position: sticky; top: 0; z-index: 9999; margin-top: 15px; } smsu .nw>hd btns { width: 100%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; margin: auto; z-index: 9; position: relative; background: var(--bt); border-radius: 15px; border: solid 1px var(--bc); } smsu d btns>aa { display: flex; justify-content: center; align-items: center; font-weight: bold; height: calc(100% - 14px); margin: 7px; border-radius: 11px; position: relative; transition: 99ms; } smsu d btns>aa.this { background: var(--bc); } .General aa.gnrl { background: var(--bc); } .Advance aa.avnc { background: var(--bc); } /* SpotWallet */ swls dmdearn bd { display: grid; grid-template-columns: 77px auto; background: linear-gradient(227deg, #2870ea17, var(--bc)); padding: 11px; border-radius: 11px; align-items: center;margin: 22px 0; } swls dmdearn bd h5 { font-weight: 100; opacity: 0.5; } swls trcs>trc { position: relative; align-items: center; } swls wlp { display: block; margin: 11px; } swls wlp>bl { padding: unset; margin: unset; background: var(--b) !important; } swls wlp>bl bd { position: sticky; bottom: 11px; padding: unset; } swls wlp>bl btns { margin: unset; padding: unset; width: 100%; } swls wlp btns { display: grid; grid-template-columns: 100%; width: 88%; margin: 22px auto; } swls wlp bl btn { display: grid; justify-content: center; align-items: center; height: 44px; border-radius: 11px; position: relative; grid-template-columns: 30px 70px; color: var(--b); background: var(--aaa); } swls ccinfo { display: grid; grid-template-columns: 47% 47%; gap: 22px; margin-top: 11px; } swls ccinfo p { margin: unset; opacity: 0.8; font-weight: 400; } swls btn svg { fill: var(--b); } swls trc>hd { background: var(--bc); padding: 6px; height: 44px; width: 44px; } swls wlsp p { margin: 0; } swls wlsp h3 { display: flex; gap: 2px; font-weight: 400; } swls wlsp h3>i { height: 22px; width: 33px; } swls wlsp balance { display: flex; gap: 2px; font-size: 1.3em; } swls wlsp>bl>bd { text-align: center; padding: unset; } /* Transaction */ strc bl d { display: flex; justify-content: space-between; align-items: center; } strc bl d { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); } strc divider { margin: 16px auto; } strc amnt>bl>hd { display: grid; grid-template-columns: 44px auto; } strc amnt>bl { background: var(--bt); padding: 11px; border-radius: 22px; } strc amnt>bl>hd { display: grid; grid-template-columns: 28px auto; align-items: center; font-weight: 500; } strc amnt>bl>hd>i { height: 22px; width: 22px; } strc amnt>bl>bd { display: grid; justify-content: center; align-items: center; text-align: center; position: relative; } strc amnt amount { font-size: 4em; font-weight: bold; } strc amnt ccc { font-weight: bold; position: relative; } strc bl d { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); margin: 11px; } strc bl { padding: 11px; background: var(--bc); } strc grid { margin: 0; border-radius: 22px; padding: 22px; } strc order>hd {display: grid;grid-template-columns: 28px auto;justify-content: unset;align-items: center;font-weight: 500;font-size: 1.33em;} strc order>hd>i { height: 22px; width: 22px; } stores { display: block; margin: 22px 0; } /* Delete Popup */ cmys trc.agree>cdlo { transform: scale(1); visibility: visible; top: 0; } .agree rvm { position: absolute; } cdlo>hd>i { height: 33px; width: 33px; padding: 12px; background: #ffb1b14d; border-radius: 55%; } cdlo { display: flex; background: var(--b); box-shadow: var(--bs-b); border-radius: 22px; position: absolute; z-index: 999; text-align: center; padding: 22px; flex-direction: column; left: 0; right: 0; margin: 11px; max-width: 360px; margin: auto; transition: 99ms; height: 165px; top: -333px; right: 0; transform: scale(0.88); visibility: hidden; } cdlo>bd>t { display: block; margin: 11px auto; } cdlo>hd { display: flex; justify-content: center; } cdlo btns>btn { display: block; padding: 11px; background: var(--bc); border-radius: 5px; margin: 11px 4px; font-weight: 500; height: auto; width: auto; box-shadow: unset; color: var(--c); } cdlo>ft>btns { display: grid; grid-template-columns: 50% 50%; } @media only screen and (max-width: 999px){ cdlo { margin: 11px; } } /* Login First */ no>back { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; padding: 5px; position: absolute; top: 13px; left:13px;} no>back>i { height: 33px; width: 33px; } /* Meeting Subscription Update */ smcu main { max-width: 100%; } smcu>bl>bd>d { display: grid; grid-template-columns: 49% 50%; gap: 1%; } smcu meetingmsg { text-align: center; letter-spacing: 0; font-size: 0.6em; width: 77%; margin: auto; display: block; } smcu trcs>trc>h6 { text-align: end; display: block; } smcu h7 { display: flex; align-items: center; letter-spacing: 0; font-size: 0.7em; } smcu trcs>trc { border-radius: 0; box-shadow: unset; margin: 4px; grid-template-columns: 50% 50%; border-bottom: solid 0.5px var(--bc); padding: 0 11px; padding-bottom: 3px; background: transparent; font-size: 0.77em; backdrop-filter: unset; -webkit-backdrop-filter: unset;width: auto; } smcu divider { display: grid; position: relative; grid-template-columns: auto min-content auto; width: 80%; margin: 11px auto; grid-column-start: 1; grid-column-end: 3; } smcu form bl:nth-child(6) { grid-column-start: 1; grid-column-end: 3; padding-bottom: 31px; } smcu ft svg { fill: var(--b); } smcu .nw { margin-top: 14px; padding: 0; border-radius: unset; background: var(--t);margin:0 } smcu main { grid-row-start: 1; display: grid; } smcu t { text-align: unset; font-size: 14px; } smcu .nw>hd>d { position: sticky; top: 0; z-index: 9999; margin-top: 15px; } smcu .nw>hd btns { width: 100%; height: 100%; display: grid; grid-template-columns: 50% 50%; align-items: center; margin: auto; z-index: 9; position: relative; background: var(--bt); border-radius: 15px; border: solid 1px var(--bc); } smcu d btns>aa { display: flex; justify-content: center; align-items: center; font-weight: bold; height: calc(100% - 20px); margin: 7px; border-radius: 11px; position: relative; transition: 99ms; } smcu .nw>ft { margin-bottom: 11px; display: flex; justify-content: center; background: var(--bt); padding: 22px; margin: 6px; border-radius: 22px; flex-direction: column; text-align: center; margin-bottom: 33px; } smcu .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; } smcu .nw>ft>aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smcu .nw>ft f { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } smcu .nw>ft d { text-align: center; font-size: 0.6em; width: 88%; margin: 11px auto; } smcu .nw>ft>aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; } smcu d btns>aa.this { background: var(--bc); } @media screen and (max-width: 999px) { smcu d.aerea { display: grid; } smcu form { display: block; }} smcu bl.nw>ft aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: var(--aaa); border-radius: 11px; height: 50px; box-shadow: var(--bs-bs); max-width: 333px; margin: 11px auto; color: var(--b); width: 88%; cursor: pointer; } smcu bl.nw>ft aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smcu mg>aa { display: flex; padding: 13px; border: 1px solid var(--bc); margin: 4px; border-radius: 8px; justify-content: center; } smcu mg { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; align-items: center; } smcu form msnb>bl { margin: 0; padding: 0; background: var(--bt); } smcu mg>aa:active { background: var(--bc); transform: scale(0.88); background: var(--bc); color: var(--a); } /*Meeting Participans */ smps bl.cfa { grid-column-start: 1; grid-column-end: 3; } mbbl>hd>btns { display: flex; margin-bottom: 7px; } mbbl btns>btn { display: grid; grid-template-columns: 24px auto; align-items: center; background: var(--bc); border-radius: 39px; margin: 4px; padding: 8px 16px; font-weight: 400; } mbbl sl { height: 100%; margin: 0; background: unset; border-left: 1px solid #000000a6; border-radius: 0; } mbbl btn>i { height: 18px; width: 18px; } mbbl sl input:focus { border-radius: 40px; box-shadow: unset; } mbbl bx:focus { box-shadow: inset 0 0 0 2px var(--c); border-radius: 38px; } prtntfilter { display: block; position: absolute; top: 333%; bottom: 0; right: 0; left: 0; z-index: 999999; background: var(--b); transition: 333ms; overflow: scroll; border-radius: 22px 22px 0 0; box-shadow: 0 0px 20px #00000070; padding-bottom: 44px; } .participantsFilter prtntfilter { top: 2%; } prtntfilter>hd>back { height: 33px; width: 33px; display: block; padding: 5px; } prtntfilter>hd { display: flex; justify-content: end; padding: 11px; padding-bottom: 0; } mbbl bx { display: grid; grid-template-columns: 44px auto; background: var(--bc); align-items: center; border-radius: 38px; margin-bottom: 11px; position: relative; height: 48px; overflow: hidden; background: var(--bc); padding: 0 4px; } smps mbbl { display: none; } @media screen and (max-width: 999px) { smps mbbl { display: block; padding: 11px; background: var(--bt); } } /*Meeting Participant*/ smpco userpff sidebar { width: 50%; } smpco header { position: unset; } smpco friends main { width: 100%; max-width: 100%; } smpco friends { width: 100%; } smpco Photos main { width: 100%; max-width: 100%; } smpco Photos { width: 100%; } smpco Videos main { width: 100%; max-width: 100%; } smpco Videos { width: 100%; } smpco Reels main { width: 100%; max-width: 100%; } smpco Reels { width: 100%; } smpco gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} smpco abouts>main>d.main { padding-bottom: 22px; } smpco btn { cursor: pointer; } smpco grid { margin-top: 11px; } smpco gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} smpco gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } smpco username{font-size: 0.55em; opacity: 0.66;} smpco nv back>i { height: 33px; width: 33px; } smpco cover { display: flex; position: relative; height: 100%; overflow: hidden; } smpco ff>ft>bl op:hover { background: var(--bc); } smpco btn:hover { background: var(--bc); } smpco pffs ff ft expnd:hover { background: var(--bc); } smpco gd:hover { background: var(--bc); } smpco pffs hd btn:hover { transform: scale(0.9); background: var(--a); } smpco ff>ft>bl op { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 28px; width: 28px; justify-content: center; cursor: pointer; } smpco cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } smpco cover ii img { object-fit: cover; height: 100%; width: 100%; } smpco smpcocover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 30px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 15px; grid-template-columns: 30px auto; width: unset; } smpco ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } smpco ff dppic { display: block; background: var(--b); border-radius: 55%; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); position: relative; padding: 6px; height: 168px; width: 168px; } smpco dppic upld { position: absolute; z-index: 9999; background: rgb(149 149 149 / 14%); height: 33px; width: 33px; bottom: 0; right: 12px; border-radius: 11px; display: flex; place-content: center; align-items: center; backdrop-filter: blur(7px); padding: 6px; } smpco dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } smpco ff { grid-template-rows: 370px auto; display: grid; padding: 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } smpco mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } smpco ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; padding-right: 0; } smpco ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; } smpco ff btns btn { display: grid; grid-template-columns: 22px auto; margin: 4px; white-space: nowrap; font-size: 0.88em; align-items: center; padding: 2px 14px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; font-weight: 400; } smpco ff btn>i { height: 18px; width: 18px; margin-left: 2px; } smpco ff btn:nth-child(2)>i>svg { fill: var(--b); } smpco pffs { display: block; } smpco pffs ff ft expnd svg { transform: rotate(-90deg); } smpco pffs ff>ft>bl mg { display: flex; margin: 0; } smpco pfinfo upld h5 { font-weight: 100; } smpco pffs ff>ft>bl mg a.this { border-bottom: 2px solid; color: var(--c); } smpco oppffs ff ft op{ display: none; } smpco pffs bd btn h6 { font-weight: 400; } smpco pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } smpco pffs opp { display: none; background: var(--b); border-radius: 11px; position: absolute; right: 0; width: 280px; padding: 11px; top: 56px; transition: 333ms; z-index: 99999999999; box-shadow: 0 0 0 1px rgb(0 0 0/4%), 0 6px 20px rgb(0 0 0/20%); } .opp opp { display: block; } smpco mg>a>i { height: auto; width: auto; margin-top: 2px; } smpco pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; border-bottom: 1px solid var(--bc); } smpco ff mg a { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; } smpco ff mg aa { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; cursor: pointer; } smpco expnd svg { height: 22px; width: 22px; } @media screen and (max-width: 999px) { smpco ff btns>btn:nth-child(3) { display: none; } smpco sidebar { width: auto; margin: 11px; } smpco pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } smpco pffs ff>bd { display: block; } smpco ff { grid-template-rows: 163px auto; padding: 0 11px; } smpco ff ft expnd { display: none; } smpco ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } smpco pffs { display: block; background: var(--b-t); } smpco ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } smpco upld h5 { display: none; } smpco cover upld { width: 33px; padding: 6px; right: 10px; bottom: 8px; } } cm input { background: none; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; padding: 0 11px; } smpco ff bl ft op { display: none; } smpco ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } smpco cover upld h5 { font-weight: 100; } smpco bl op svg { height: 22px; width: 22px; } smpco pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } smpco upld { display: none; } smpco dppic upld { display: none; } smpco ff bd bl:last-child>btns { display: flex; } pfilter btn { display: grid; grid-template-columns: 22px auto; margin: 4px; white-space: nowrap; font-size: 0.88em; align-items: center; padding: 2px 14px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; font-weight: 400; } pfilter { display: flex; background: var(--b-t); padding: 11px; border-radius: 11px; margin-bottom: 11px; align-items: center; justify-content: space-between; } @media screen and (min-width: 999px) { smpco sidebar { width: 44%; } smpco .aerea { flex-direction: unset; max-width: 1100px; margin: auto; } .otherpos d.aerea { display: block; } .otherpos main { max-width: unset; width: auto; } } /* Meeting Particpant Intro Component */ cpno { display: block; padding: 11px; background: var(--b-t); border-radius: 11px; margin-bottom: 11px; } cpno>bd>d { display: grid; grid-template-columns: 33px auto; margin: 5px 0px; padding: 4px 0; } cpno d>i { height: 22px; width: 22px; opacity: 0.5; } cpno>bd>d { display: grid; grid-template-columns: 33px auto; padding: 7px 0; margin-bottom: 3px; font-weight: 400; font-size: 0.99em; } @media screen and (max-width: 999px) { smpcu ff btns>btn:nth-child(3) { display: none; } smpcu sidebar { width: auto; margin: 11px; } smpcu pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } smpcu pffs ff>bd { display: block; } smpcu ff { grid-template-rows: 163px auto; padding: 0 11px; } smpcu ff ft expnd { display: none; } smpcu ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } smpcu pffs { display: block; background: var(--b-t); } smpcu ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } smpcu upld h5 { display: none; } bio { padding: 11px; } } /* Meeting_participantUpdate */ smpcu abouts>main>d.main { padding-bottom: 22px; } smpcu btn { cursor: pointer; } smpcu grid { margin-top: 11px; } smpcu gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} smpcu gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } smpcu username{font-size: 0.55em; opacity: 0.66;} smpcu nv back>i { height: 33px; width: 33px; } smpcu cover { display: flex; position: relative; height: 100%; overflow: hidden; } smpcu ff>ft>bl op:hover { background: var(--bc); } smpcu pffs ff ft expnd:hover { background: var(--bc); } @media screen and (min-width: 999px) { smpcu main { width: 100%; max-width: 566px; } smpcu sidebar { width: 44%; } /* smpcu .aerea { max-width: 1033px; flex-direction: unset; }*/ } smpcu cover { display: flex; position: relative; height: 100%; overflow: hidden; } smpcu header { position: unset; } @media screen and (min-width: 999px) { smpcu .aerea { flex-direction: unset; } smpcu sidebar { width: 44%; } smpcu main { width: 100%; max-width: 566px; } } /* Meeting_participantNew */ smpcn cover { display: flex; position: relative; height: 100%; overflow: hidden; } smpcn header { position: unset; } @media screen and (min-width: 999px) { smpcn .aerea { max-width: 1033px; flex-direction: unset; } smpcn sidebar { width: 44%; } smpcn main { width: 100%; max-width: 566px; } } /* Meeting_participant */ smpo cover { display: flex; position: relative; height: 444px; overflow: hidden; } smpo header { position: unset; } smpo cpho upld { display: none; } smpo cpio sl>input, smpo cpio sl>select { background: unset; border: none; border-bottom: 1px solid var(--bc); height: auto; padding: 11px 11px 7px 7px; font-weight: 400; border-radius: 0; } smpo cpio bd:after { position: absolute; content: ""; top: 0; right: 0; left: 0; bottom: 0; } smpo cpio bd { position: relative; } @media screen and (min-width: 999px) { smpo .aerea { max-width: 1033px; flex-direction: unset; } smpo sidebar { width: 44%; } smpo main { width: 100%; max-width: 566px; }} /* Meeting_Rooms */ rooms>hd h4 { display: flex; align-items: center; gap: 1%; margin: 11px 0; font-weight: 400; } rooms>hd h2 { margin: 11px 0; font-size: 2.22em; font-weight: 500; } smrs rms { display: grid; grid-template-columns: 31.88% 32.88% 32.88%; margin-top: 11px; } smrs main { width: 100%; max-width: unset; } @media screen and (max-width: 999px) { smrs rms { display: block; } smrs cmrmo { margin: 11px; } } /* Meeting_Room Component */ smrs cmrmo { display: block; background: var(--bt); overflow: hidden; border-radius: 22px; padding: 11px; box-shadow: 0px 5px 9px #0000001f; position: relative; } smrs cmrmo>ft fct { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; padding: 11px; padding-bottom: 22px; } smrs cmrmo>hd { display: block; max-height: 222px; height: 100%; width: 100%; border-radius: 11px; overflow: hidden; } smrs cmrmo>hd>i { height: 100%; width: 100%; } smrs cmrmo>hd img { height: 100%; width: 100%; object-fit: cover; } smrs cmrmo bx>hd { display: flex; flex-direction: column; } smrs cmrmo>bd { display: block; padding: 11px 0; } smrs cmrmo bx btn { padding: 6px 22px; background: var(--aaa); align-items: center; justify-content: center; display: flex; border-radius: 5px; color: var(--b); position: relative; z-index: 9999; } smrs cmrmo bx { display: flex; justify-content: space-between; } smrs cmrmo fct i { height: 18px; width: 18px; } smrs cmrmo bx nam { font-weight: 500; font-size: 1em; } /* Meeting Organizer */ /* Orgnizer Filter */ cofo { display: flex; padding: 11px; background: var(--b-t); border-radius: 11px; margin-bottom: 11px; justify-content: space-between; align-items: center; } cofo bd btn { display: grid; grid-template-columns: 29px auto; align-items: center; background: var(--bc); padding: 4px 11px; border-radius: 5px; } /* Organizer Featured */ cftro>hd>trc { display: grid; grid-template-columns: 55px auto 0; align-items: center; padding: 11px; padding-bottom: 0; } cftro>p { line-height: 1.22rem; font-weight: 400; overflow: hidden; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; margin: 2px 0; padding: 0 11px; padding-bottom: 0; margin-bottom: 11px; } cftro>hd>trc bd { display: flex; flex-direction: column; } cftro>hd>trc name { font-weight: bold; display: grid; grid-template-columns: auto 33px; align-items: center; width: fit-content;} cftro>hd>trc time { font-weight: bold; opacity: 0.5; font-size: 0.88em; } cftro trc>hd i img { height: 100%; width: 100%; } cftro trc>hd i { height: 40px; width: 40px; overflow: hidden; box-shadow: 0 0 0 3px var(--bc); border-radius: 55%; } cftro>bd i img { height: 100%; width: 100%; object-fit: cover; } cftro { display: block; background: var(--bc); border-radius: 11px; overflow: hidden; margin: 4px; max-height: 333px; position: relative; } cftro>bd i { width: 100%; height: 100%; } cftro>bd { height: 100%; display: block; max-height: 167px; } @media screen and (max-width: 999px) { sono pffs ff>ft>bl mg b { display: none; } cftro { max-height: unset; } cftro>bd { max-height: 333px; } featured hd { margin: 0; } cftro>hd>trc { padding-bottom: 0; } sono pffs btns { display: grid; margin-top: 22px; grid-template-columns: 38.3% 35.3% 26.3%; } featured>bd { grid-template-columns: 100% 100% 100% 100% 100%; } sono sidebar { width: auto; margin: 11px; } sono pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } sono pffs ff>bd { display: grid; padding: 0; justify-content: unset; } pffs btns { margin-top: 22px; } sono ff { grid-template-rows: 163px auto; padding: 0 11px; } sono ff ft expnd { display: none; } sono ff ft op { display: flex; align-items: center; padding: 2px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 30px; justify-content: center; } sono pffs { display: block; background: var(--b-t); } sono ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } sono upld h5 { display: none; } sono cover upld { width: 33px; padding: 6px; right: 10px; bottom: 8px; } } sono input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 11px; background: transparent; border-radius: 34px; } sono ff bl ft op { display: none; } sono ff ft expnd { display: flex; align-items: center; padding: 4px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; width: 33px; justify-content: center; cursor: pointer; } sono cover upld h5 { font-weight: 100; } sono bl op svg { height: 22px; width: 22px; } sono pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } @media screen and (min-width: 999px) { sono sidebar { width: 44%; } sono .aerea { flex-direction: unset;} } /* Organizers */ orgngrs { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; border-radius: 11px; } sons main { width: 100%; max-width: unset; } organizers>hd>h2 { margin: 11px 0; font-size: 1.55em; font-weight: 500; } @media screen and (max-width: 999px) { orgngrs { display: block; } } /* Meeting_OrganizerUpdate/Cover image select popup */ addimg ul>li { list-style: none; position: relative; display: grid; grid-template-columns: 33px auto; align-items: center; padding: 4px; margin: 0; font-weight: 500; font-size: 1em; } addimg { bottom: 0; background: var(--b); border-radius: 11px; padding: 6px; opacity: 0; right: 2px; position: absolute; overflow: hidden; display: block; width: 300px; box-shadow: var(--bs); transform: scale(0) translateY(-21px); transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; } .option addimg { bottom: 45px; opacity: 1; transform: scale(1) translateY(0); height: auto; } addimg ul { margin: 4px; padding: 0; } /* CSS & other buggs */ cmbo reviews h7 { margin: 1px 0px 0 0; } wallets bl ft t { width: auto; margin: 0; text-align: start; } /* SpotWallets */ swso nv gg { height: 55px; align-items: center; z-index: 22; display: grid; grid-template-columns: 55px 33px auto 44px 44px; } swso nv back { font-family: monospace; font-size: 1.23em; height: 100%; width: 55px; display: flex; justify-content: center; align-items: center; } swso nv gg>i { height: 100%; width: 100%; fill: #fff; display: flex; justify-content: center; align-items: center; } swso nv t { display: flex; align-items: center; text-align: center; width: 100%; display: block; } swso nv op { display: flex; justify-content: center; align-items: center; } swso bl mg a { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative;margin: 0 2px; } swso bl mg a.this { border-bottom: solid 2px; color: var(--a); } swso nv op>i { height: 55%; width: 55%; } swso nv gg>i>svg { height: 66%; width: 66%; } /* Wallets */ swls nv gg { height: 55px; align-items: center; z-index: 22; display: grid; grid-template-columns: 55px 33px auto 44px 44px; } swls nv back { font-family: monospace; font-size: 1.23em; height: 100%; width: 55px; display: flex; justify-content: center; align-items: center; } swls nv gg>i { height: 100%; width: 100%; fill: #fff; display: flex; justify-content: center; align-items: center; } swls nv t { display: flex; align-items: center; text-align: center; width: 100%; display: block; } swls nv op { display: flex; justify-content: center; align-items: center; } swls bl mg a { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative;margin: 0 2px; } swls bl mg a.this { border-bottom: solid 2px; color: var(--a); } swls nv op>i { height: 55%; width: 55%; } swls nv gg>i>svg { height: 66%; width: 66%; } swls cwbbbo hd { padding: 0; display: grid; grid-template-columns: 80% 20%; } swls cwbo hd tb { display: grid; grid-template-columns: 22px auto 22px; align-items: center; width: fit-content; gap: 2%; white-space: nowrap; font-weight: 500; } swls cwbo hd tb i { width: 22px; height: 22px; } swls cwbo hd tb ii { width: 22px; height: 22px;transition: 333ms; } swls cwbo hd tbicon i { width: 22px; height: 22px; } swls cwbo bd { text-align: center; padding: unset; } swls cwbo bd hi { display: flex; align-items: center; } swls cwbo bd pdl { display: grid; grid-template-columns: 25px auto; margin: 0; width: fit-content; align-items: center; } swls cwbo ft btns { margin: 0 auto; width: 100%; } swls cwbo { display: block; background: var(--bt); padding: 11px; border-radius: 22px; margin: 11px 0; min-height: fit-content; } swls cwbo ft btns { display: grid; grid-template-columns: 100%; width: 100%; margin: 11 auto; } swls btns btn { display: grid; justify-content: center; align-items: center; height: 44px; background: var(--bc); margin: 7px; border-radius: 11px; position: relative; grid-template-columns: 30px 70px; } cwbo btns btn:first-child svg { fill: var(--b); } .hidebalance cwbo hd tb ii{ transform: rotate(-90deg);} .hidebalance bd.balance { filter: blur(6px); transform: scaleY(0.7); opacity: 0.6; } cwbo btns btn:first-child { color: var(--b); } @media screen and (max-width: 999px) { swls cwbo { margin:11px; } cwlos>h4 { display: grid; grid-template-columns: 50% 50%; } } /* SpotWallet balance component */ cswo { padding: 11px;border-radius: 22px; margin-bottom: 7px; background: var(--bt);} cswo>hd { display: grid; grid-template-columns: 80% 20%; text-align: center; } cswo>hd tb { display: grid; grid-template-columns: 22px auto 22px; align-items: center; width: fit-content; gap: 2%; white-space: nowrap; font-weight: 500; } cswo>hd tb i { width: 22px; height: 22px; } cswo>hd tbicon { display: grid; grid-template-columns: 50% 50%; align-items: center; background: var(--b1); height: auto; padding: 7px; border-radius: 11px; width: 88%; } cswo>hd tbicon i { width: 22px; height: 22px; } cswo>bd { padding: 0px; } cswo>bd hi { display: flex; align-items: center; } cswo>bd pdl { display: grid; grid-template-columns: 22px 77px; align-items: center; margin: 0; opacity: 0.77; } cswo>ft btns { margin: 0 auto; width: 100%; display: grid; } cswo mg a { display: flex; justify-content: center; align-items: center; padding: 8px 16px; position: relative; } cswo mg a { margin: 0 2px; } cswo mg a.this { border-bottom: solid 2px; color: var(--a); } cswo btns btn { display: grid; justify-content: center; align-items: center; height: 44px; background: var(--bc); margin: 7px; border-radius: 11px; position: relative; grid-template-columns: 30px 70px; } cswo todypnl { display: grid; grid-template-columns: auto 22px; align-items: center; margin-top: 11px; width: fit-content; } cswo todypnl p { margin: unset; } cswo todycuncy { display: grid; grid-template-columns: auto 22px; align-items: center; margin: 7px 0; width: fit-content; } cswo btns btn t { font-size: 0.88em; } cswo btns btn:first-child svg { fill: var(--b); } .hidebalance cswo>hd tb ii { transform: rotate(-90deg); } cswo>hd ii { height: 22px; transition: 333ms; width: 22px; } .hidebalance cswo>bd hi { filter: blur(6px); transform: scaleY(0.7); } @media only screen and (max-width: 999px) { cswo>ft btns{ display: grid; } } /* Start */ userpf { display: block; padding: 11px; margin: 11px; } userpf gd { display: grid; grid-template-columns: 77px auto; margin: 5px; grid-gap: 22px; padding: 11px; border-radius: 22px; position: relative; } userpf gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b); background: var(--b); } userpf gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } userpf username { font-size: 0.55em; opacity: 0.66; } userpf>bd { margin: 0 11px; display: block; } userpf sl { display: grid; grid-template-columns: auto 44px; align-items: center; height: 44px; background: var(--bt); border-radius: 5px; box-shadow: 0 4px 7px 0px rgb(0 0 0 / 3%), 0 1px 4px 0px rgb(0 0 0 / 0%), 0 1px 0px rgb(0 0 0 / 39%); } userpf sl btn { height: 20px; width: 20px; padding: 11px; cursor: pointer; grid-column-start: 2; position: relative; } userpf sl input { font-weight: 400; width: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; padding-right: 44px; height: auto; } userpf sl input:focus { border-radius: 5px; } pinned>bl>hd>h4 { margin-bottom: 11px; } .oo bb { background: blue;color:blue } ssts .oo oo { margin-left: 26px; }start aerea { position: absolute; left: 0; right: 0; top:55px; bottom: 0; overflow: hidden; overflow-y: auto; padding-bottom: 11%;min-height: unset; } 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:active { box-shadow: 0 0 7px; transform: scale(1.1); } /* Meeting bots filter */ @media only screen and (max-width: 999px) { .filllt boatfilter { top: 0%; display: block; } .filllt main { display: none; } boatfilter { position: absolute; z-index: 99999; background: var(--b); top: 100%; left: 0; right: 0; transition: 444ms; margin: 11px; border-radius: 11px; margin-top: 0; display: none; } } /* Settings */ ssts main { width: 100%; max-width: 900px; } ssts sstm { display: flex; align-items: center; } ssts sstm>hd>i { display: block; height: 66px; width: 122px; margin: 11px; box-shadow: 0 0 0 4px var(--c); border-radius: 11px; overflow: hidden; } ssts d.aerea { margin: 0; } cmno grid:hover { background: var(--hover); } cmno grid.this { background: var(--bc); } cmno grid.this::before { content: ''; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 4px; background: var(--c); border-radius: 4px; } cmno grid>i { height: 22px; } cmno { overflow: hidden; display: block; transition: 333ms; background: transparent; } cmno bl{border-radius: 0; background: transparent; border: unset; color: var(--bc);padding: 22px;} cmno bl hd{color:var(--c)} cmno 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} cmno bo {display:block;height:100%;width:100%;} cmno oo:active { box-shadow: 0 0 7px; transform: scale(1.1); } cmno error,cmno dt{ position: absolute; top:11px; color: var(--c); font-size: 7px; left: 11;margin:0;height:11px; } cmno grid { min-height: 33px; padding: 11px; grid-template-columns: 60px auto; margin: 4px 11px; position: relative; border-radius: 7px; align-items: center; } cmno grid h6 {font-size: 14px; display: flex; align-items: center;color:var(--c);font-weight: 500;} cmno code {display: block;padding: 11px;border-bottom:solid 1px var(--bc)} cmno grid>* { height: 30px;color: var(--c); margin:0} cmno value { grid-row-start: 2; grid-column-start: 1; grid-column-end: 3; max-height:0px; display: grid; grid-template-columns: auto 77px; padding-top: 4px;overflow:hidden;transition:333ms} cmno .oo value {max-height: 34px;} cmno value>* { outline: 0; display: flex; align-items: center; } cmno grid[disabled]:after { content: 'No Permissions'; position: absolute; background: rgba(12,21,31,0.77); z-index: 8; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: transparent; font-weight: bold; transition: 333ms; } cmno grid[disabled]:hover:after{ color: #eef; background: rgba(12,21,31,0.88); } cnc svg { fill: var(--a); } cnc>ft>i { height: 15px; width: 15px; margin: auto; opacity: 0.7; padding: 5px; } csopo { display: grid; grid-template-columns: 55px auto auto; align-items: center; border: 1px solid var(--bc); padding: 22px; border-radius: 11px; background: var(--b); margin-bottom: 5px; } @media only screen and (min-width: 999px) { cmno grid { padding: 7px 2px;} } @media only screen and (max-width: 999px) { cmno { position: absolute; z-index: 9999; background: var(--b); overflow: scroll; left: -100%; box-shadow: 3px -1px 8px var(--bc); border-radius: 0 11px 11px 0; top: -33px; opacity: 0; } setting bl sstm>hd { box-shadow: unset; margin: unset; } setting>hd>bl { display: block; } setting>hd>h1 { margin-bottom: 0px;} setting>hd>bl>bd { display: block; } } ssys bl sstm>hd>i { display: block; height: 66px; width: 122px; margin: 11px; box-shadow: 0 0 0 4px var(--c); border-radius: 11px; overflow: hidden; } ssys sstm { display: flex; align-items: center; } setting>hd>h1 { margin: 0 11px; margin-bottom: 11px; font-weight: 600; } setting { display: block; margin-top: 22px; } setting>hd>bl { display: grid; align-items: center; justify-content: space-between; padding: 11px 0; margin-bottom: 11px; grid-template-columns: auto auto; } setting>hd>bl>bd { display: flex; align-items: center; } setting bl sstm i img { height: 100%; width: 100%; object-fit: cover; } setting sstm btn { color: var(--a); font-weight: 400; } ssts p { margin: 3px 0; } setting bl cnc { display: grid; grid-template-columns: 33px auto; align-items: center; padding: 9px; margin: 4px 11px; } ssts setting bl>bd { display: flex; } setting bl cnc>hd>i { height: 22px; width: 22px; } ssts setting>bd { display: grid; grid-template-columns: 50% 50%; } setting p { margin: 3px 0; font-size: 0.88em; font-weight: 500; } setting time { font-weight: 500; font-size: 1.88em; } setting sstm>bd>p { display: flex; align-items: center; } setting sstm>bd>p>i { height: 15px; width: 15px; margin-right: 4px; } stlo ctmo>hd { margin-bottom: 11px; } spwbtt sstm { display: flex; align-items: center; } crss { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 11px; background: var(--bt); margin: 3px; } crss>hd { display: block; padding: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 22px; } crss>bd>trc { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 18px 11px; border-bottom: 1px solid var(--bc); margin: 5px 0; } crss>bd>trc>hd i { height: 22px; width: 22px; margin-left: 3px; } crss>bd>trc>ft i { height: 11px; width: 11px; } crss>bd>trc ac1 bb { color: var(--aa); height: 21px; width: 44px; box-shadow: inset 0 0 0 1px; position: unset; margin: 0 11px; } crss>bd>trc>ft { display: flex; align-items: center; justify-content: end; } crss ac1 oo { height: 15px; width: 15px; margin-top: 3px; } crss .oo bo { box-shadow: inset 60px 0px 0px; } crss bo { display: block; transition: 333ms; border-radius: 50px; } crss>bd>trc ac1 { display: flex; } crss>bd>trc:last-child { border: none; margin-bottom: 0; } cbds blcntrl trc { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 18px 11px; border-bottom: 1px solid var(--bc); margin: 5px 0; } cbds blcntrl trc>hd i { height: 22px; width: 22px; margin-left: 3px; } cbds blcntrl trc>ft i { height: 11px; width: 11px; } cbds blcntrl trc>ft { display: flex; align-items: center; justify-content: end; } setting .oo bo { box-shadow: inset 60px 0px 0px; } setting ac1 { display: flex; align-items: center; justify-content: end; } cbds { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 11px; background: var(--bt); height: fit-content; margin: 3px; } cbds>hd { display: block; padding: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 22px; } cbds>bd>trc { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 18px 11px; border-bottom: 1px solid var(--bc); margin: 5px 0; } cbds>bd>trc>hd i { height: 22px; width: 22px; margin-left: 3px; } cbds>bd>trc>ft i { height: 11px; width: 11px; } cbds>bd>trc>ft { display: flex; align-items: center; justify-content: end; } setting .oo bo { box-shadow: inset 60px 0px 0px; } cbds>bd>trc>ft>btn { display: block; padding: 5px 22px; border: 1px solid var(--bc); margin: 0 11px; border-radius: 4px; } cbds trc p { font-size: 0.77em; } cbds>ft>trc>bd>btn { display: flex; padding: 5px 11px; border: 1px solid var(--bor); margin: auto; border-radius: 4px; justify-content: center; margin-right: 0; } cbds>ft>trc ft { display: flex; justify-content: end; } cbds>ft>trc { display: grid; grid-template-columns: auto 38% 22px; align-items: center; padding: 13px 11px; margin: 5px 0; margin-bottom: 0; } cbds>ft>trc i { height: 11px; width: 11px; } cpds { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 11px; background: var(--bt); margin: 3px; } cpds>hd { display: block; padding: 11px; padding-bottom: 22px; } cpds wlps>wlp { display: block; border-radius: 11px; overflow: hidden; position: relative; margin: 4px; height: 111px; max-width: 133px; } cpds wlps>wlp ii img { height: 100%; width: 100%; object-fit: cover; } cpds wlps { display: flex; padding: 11px; flex-wrap: wrap; } cpds wlps>wlp>i { height: 22px; width: 22px; position: absolute; background: var(--bor); right: 5px; top: 5px; padding: 4px; } cpds wlps>wlp>i svg { fill: var(--b); } cpds wlps>wlp slc { display: block; height: 55px; width: 55px; position: absolute; right: 5px; background: var(--b-t22); z-index: 999; bottom: 5px; border-radius: 7px; backdrop-filter: blur(13px); } cpds wlps>wlp slc:after { content: " "; position: absolute; height: 9px; width: 30px; background: var(--aaa); border-radius: 3px; left: 0; right: 0; bottom: 5px; margin: auto; } cpds>ft>themmode>trc { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 18px 11px; border-bottom: 1px solid var(--bc); margin: 5px 0; justify-content: unset; } cpds themmode>trc>hd i { height: 22px; width: 22px; margin-left: 3px; } cpds themmode>trc select { height: 40px; border-radius: 5px; box-shadow: 0 1px 1px var(--bc); width: auto; padding: 11px; } cpds>ft trc { display: grid; align-items: center; justify-content: space-between; padding: 11px; grid-template-columns: auto auto 15px; } cpds>ft>trc>bd>i { height: 11px; width: 11px; } stlo cnc svg { fill: var(--c); } sspo d.main { margin: 11px; } sgss setting>bd { display: block; } saso setting>bd { display: block; } sspo setting>bd { display: block; } swpo setting>bd { display: block; } swpo setting bl>hd>cnc i { height: 88px; width: 88px; } swpo setting bl cnc { grid-template-columns: 99px auto; } setting bl>bd>btn { display: block; padding: 8px 11px; background: var(--aaa); color: var(--b); border-radius: 7px; width: fit-content; } setting bl cnc hd { position: relative; } swpo setting bl cnc btn d { display: block; height: 11px; width: 0px; border: 1px solid; margin: 0 4px; } swpo setting bl cnc btn { display: flex; position: absolute; bottom: 0; right: 13px; background: var(--aaa); color: var(--b); z-index: 99; height: 33px; width: 33px; border-radius: 50%; align-items: center; justify-content: center; } swpo csopo { grid-template-columns: 44px auto auto; } csopo>ft { display: flex; align-items: center; justify-content: end; } csopo btn { background: var(--btn); padding: 7px 33px; color: var(--b); border-radius: 7px; } swpo csopo>ft select { height: 40px; padding: 4px; border-radius: 5px; } csops csopo bd p b { color: var(--a); } swpo setting bl cnc h5 { font-size: 1.11em; } setting>ft>d { display: grid; grid-template-columns: 44px auto; padding: 5px 11px; margin-bottom: 5px; align-items: center; } setting>ft>d i { height: 22px; width: 22px; } setting>ft>d:first-child { margin: 22px 0; } ssts main { width: 100%; max-width: 1111px; } spwbtt sstm>hd { margin: auto; justify-content: start; height: 100%; border-radius: 11px; max-height: 155px; overflow: hidden; box-shadow: 0 0 0 6px var(--c); display: flex; max-width: 188px; margin: 11px; } csopo>ft>i { height: 33px; width: 33px; } @media screen and (max-width: 999px) { setting bl>bd { display: grid; grid-template-columns: 50% 50%; } setting>hd>bl { display: block; } setting bl>bd { margin-top: 11px; } ssts setting>bd { display: block; margin-bottom: 22px; } setting bl cnc { margin: 4px 1px; } ssts nv btn { display: flex; padding: 11px; height: 19px; width: 27px; margin: auto; align-items: center; border-radius: 5px; } .Settingss cmno { left: 0; opacity: 1; } cpds wlps>wlp slc { height: 41px; width: 41px; } } /* Nettwork & Internet */ snss setting bl cnc:last-child { grid-template-columns: 33px auto 57px; } snss cnc svg { fill: var(--c); } snss setting bl sstm>hd { box-shadow: none; } snss sstm>hd svg { fill: var(--a); } /* Personalization */ cths ctho { display: block; overflow: hidden; position: relative; margin: 4px; height: 88px; width: 133px; border-radius: 11px; box-shadow: var(--bs); } cths ctho ii img { height: 100%; width: 100%; object-fit: cover; } cths ctho>i { height: 15px; width: 15px; position: absolute; background: var(--bor); right: 5px; top: 5px; padding: 4px; } cths ctho>i svg { fill: var(--b); } cths ctho slc { display: block; height: 44px; width: 44px; position: absolute; right: 5px; background: var(--b-t22); z-index: 999; bottom: 5px; border-radius: 7px; backdrop-filter: blur(13px); } cths ctho slc:after { content: " "; position: absolute; height: 6px; width: 23px; background: var(--aaa); border-radius: 3px; left: 0; right: 0; bottom: 5px; margin: auto; } cths>bd { display: grid; grid-template-columns: auto auto auto; justify-content: flex-start; } spsolti cths { display: block; border-radius: 11px; margin-left: 22px; } cpsolti>hd>bl { margin-top: 22px; } cpsolti> bd hd h3 { font-weight: 500; margin-bottom: 11px; font-size: 1.2em; } cpsolti>hd { display: flex; } @media screen and (min-width: 999px) { spsolti main { width: auto; max-width: unset; } } @media screen and (max-width: 999px) { cpsolti>hd>bl { margin: 0; } cpsolti>hd { display: block; } spsolti cths { margin: 0; margin-top: 11px; } } /* Adderess Update */ smau edit-address > bl { display: grid; gap: 22px; } smau edit-address h1{font-weight:500;} smau edit-address { margin:0; } smau edit-address option { padding: 11px 0; background: var(--bc); } smau edit-address .sele { display: grid; gap: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } smau edit-address bd sel { display: grid; padding: 0; border-radius: 9px; } smau edit-address .sele h5{margin-bottom:5px;} smau edit-address .new-add { display: grid; grid-template-columns:22px auto auto; padding: 17px; align-items: center; background:var(--bt); border-radius: 11px; gap: 11px; margin-top: 11px;} smau edit-address button { border-radius: 5px; padding: 11px 22px; background: var(--aaa); color: var(--b); } smau edit-address hd ft { display: flex; justify-content: end; } smau .sele bl { display: grid; grid-template-columns: 49% 49%; grid-column-gap: 2%; } smau edit-address ft hd {display:grid;width:fit-content; grid-template-columns: 24px auto;align-items: center;gap:11px;} smau edit-address p{margin:0;} smau edit-address .chb-ads { margin-bottom: 44px; display: flex; justify-content: space-between; align-items: center; background: var(--bt); padding: 11px; border-radius: 11px; } smau edit-address > bl > hd { display: grid; gap: 11px; } smau .txtar { display: grid; margin: 11px 0; grid-template-rows: 22px auto; max-width: 100%; } @media only screen and (max-width: 999px) { smau edit-address>bl { display: block; margin: 0 11px; } smau edit-address .sele { display: block; padding:22px 11px;margin-top: 22px; } smau edit-address .chb-ads { margin-top: 22px;} } /* Accounts Setting */ cactst { display: grid; grid-template-columns: auto auto; width: fit-content; align-items: center; padding: 33px 0; gap: 22px; } cactst>hd { display: block; height: 88px; width: 88px; border-radius: 55%; overflow: hidden; } cactst>hd>i { height: 100%; width: 100%; } cactst>hd img { height: 100%; width: 100%; object-fit: cover; } cactst bd h3 { font-size: 1.33em; font-weight: 600; } cactst bd p { margin: 4px 0; font-size: 0.77em; } @media screen and (max-width: 999px) { cactst bd h3 { font-size: 1.44rem; } cactst hd img { height: 111px; width: 111px; } cactst { padding: 11px; } cactst bd p { font-size: 1rem;} } /* Time & Language */ stlo setting>bd { display: block; grid-template-columns: 50% 50%; } /* Activity */ csas>hd>bl>hd { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } csas>hd>bl { display: block; padding: 11px; margin: 11px; } csas>bd>bx { display: grid; grid-template-columns: 44px auto; align-items: center; border: 2px solid var(--bc); border-radius: 11px; padding: 6px 11px; margin: 22px; margin-bottom: 11px; } csas>bd>fltr { display: block; padding: 11px; margin: 11px; } csas fltr src>hd>i { height: 100%; width: 21px; margin: auto; padding: 11px; } csas fltr src { display: grid; grid-template-columns: 55px auto 50px; align-items: center; background: var(--bt); color: var(--c); border-radius: 11px; height: 55px; position: relative; } csas fltr src>ft>btn { display: flex; padding: 5px; height: 33px; width: 33px; justify-content: center; align-items: center; } csas>bd>fltr bx { display: flex; padding: 11px 5px; justify-content: space-between; margin: 4px 0; } csas>bd>fltr bx>hd { display: grid; grid-template-columns: 44px auto; align-items: center; height: 35px; } csas>bd>fltr bx btn { display: grid; grid-template-columns: auto 23px; align-items: center; padding: 5px 11px; justify-content: space-between; border-radius: 5px; } csas fltr src input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background: transparent; padding: 0 60px; width: auto; padding-left: 44px; } csas fltr src input:focus { box-shadow: var(--bs); } csas>ft>bx { display: grid; grid-template-columns: auto 55px; background: var(--bt); border-radius: 11px; align-items: center; padding: 11px; font-weight: 600; } csas>ft>bx btn { display: block; padding: 4px; height: 33px; width: 33px; margin-left: auto; } csas>ft>t { display: grid; grid-template-columns: 33px auto; align-items: center; margin-top: 22px; } csas>ft>t>i { display: block; padding: 3px; border: 1px solid; border-radius: 50%; height: 11px; width: 11px; } csas>ft>bx btn i { height: 100%; width: 100%; } /* Activity Commponent */ cavo { display: block; margin: 5px 0; border-bottom: 1px solid var(--bc); padding: 11px 0; background: var(--bc); padding: 11px; border-radius: 11px; } csas actvts { display: block; padding: 11px; background: var(--bt); border-radius: 11px; margin-top: 11px; } cavo bx>hd { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 5px; } cavo bx>hd>i { height: 33px; width: 33px; } cavo bx>bd>btn { display: block; padding: 4px; height: 33px; width: 33px; opacity: 0.7; } cavo bx>bd>btn i { height: 100%; width: 100%; } cavo bx { display: flex; align-items: center; justify-content: space-between; } cavo>bd>t { font-size: 1em; margin: 11px 0; display: block; } cavo date { font-size: 0.88em; font-weight: 400; } csas cats { display: flex; border-radius: 9px; background: var(--bt); justify-content: space-between; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0%), 0 1px 3px 1px rgb(0 0 0 / 8%); } cats>cato { display: grid; border-right: solid 1px rgb(0 0 0 / 11%); padding: 12px 12px; max-width: 100%; width: 100%; } cato>bd>bx { display: flex; justify-content: space-between; height: 50px; align-items: center; } cato bx>act { display: grid; grid-template-columns: 25px auto; align-items: center; } cato act>i { justify-content: end; background: var(--a); width: 22px; height: 22px; border-radius: 14px; } csas cats { display: flex; border-radius: 9px; background: var(--bt); margin: 5px; justify-content: space-between; box-shadow: var(--bs-b); } cato bx>i { width: 22px; height: 22px; } csas>bd>bx t { font-size: 0.88em; } csas>bd>bx t a { font-size: 0.88em; } @media screen and (max-width: 999px) { csas>hd>bl { padding: 0; } csas>hd>bl { display: block; padding: 11px; margin: 0; } csas>bd>fltr { margin: 0; } csas fltr src input { width: auto; } csas cats { display: block; margin: 0; } cats>cato { width: auto; border: none; border-bottom: 1px solid var(--bc); } } /* user details Commponent */ cudo { display: block; border-radius: 11px; margin: 11px; flex-direction: column; padding: 11px; } cudo>hd { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } cudo>bd>btn { display: grid; grid-template-columns: 22px auto; align-items: center; justify-content: center; padding: 4px 11px; background: var(--bc); border-radius: 44px; font-size: 0.88em; width: fit-content; margin: 11px auto; font-weight: 500; } cudo>bd>btn:hover { background: var(--hover); } cudo>ft>btns>btn>i:hover { background: var(--hover); } cudo>ft>btns { display: flex; justify-content: center; align-items: center; margin: 11px; } cudo>ft>btns>btn { display: grid; grid-template-rows: 44px auto; align-items: center; text-align: center; justify-content: center; margin: 0 22px; font-size: 0.88em; } cudo>ft>btns>btn>i { display: block; margin: auto; height: 16px; width: 16px; padding: 11px; background: var(--bc); border-radius: 55%; } cudo name { font-weight: bold; } /* User option Commponent (Conversation) */ cuop>d { display: grid; padding: 2px 11px; margin: 4px; border-radius: 5px; grid-template-columns: auto 33px; align-items: center; font-size: 0.88em; font-weight: 500; } cuop>d:hover { background: var(--hover); } /* Activity Commponent */ /* Filter function Commponent */ /* Vonversation */ cico>hd { display: block; height: 55px; width: 55px; overflow: hidden; border-radius: 55%; } cico>hd>i { height: 100%; } cico>hd>i>img { object-fit: cover; height: 100%; width: 100%; } cico name { margin: 7px; display: block; } scss main { width: 100%; max-width: unset; } scss d.aerea { height: 94vh; } scss d.main { height: 100%; } scss dppic { height: 90px; width: 90px; box-shadow: unset; } scss dppic>upld { display: none; } scss main grid { display: grid; grid-template-columns: 366px auto; height: 100%; } scss sidebar { height: 100%; } scss d.sidebar { height: 100%; } scss grid { height: 100%; } /* Chat commponent */ /* input smss */ /* output smss */ /* Send Messege commponent */ cntrglt { display: flex; align-items: center; padding: 11px; margin: 11px; border: 1px solid var(--bc); border-radius: 11px; } cntrglt>h4 { font-weight: 500; margin-left: 11px; color: var(--aa); } scss { position: sticky; top: 0; } /* Conversation in phone version */ @media screen and (max-width: 999px) { scss sidebar { display: none; } scss main grid { display: block; } /*Conversation*/ conversation { height: calc(100% - 66px); display: block; } scss { position: sticky; top: 0; height: 100%; display: block; } scss d.Screen_Address { height: 100%; } aerea { height: calc(100% - 55px); display: block; } scss d.aerea { height: 100%; } scss main { width: 100%; max-width: unset; height: 100%; } scss d.main { height: 100%; } /*Conversation */ screen#Conversation1 { overflow: hidden; } } /* Coupons steps Commponent */ ccss { display: block; padding: 11px; margin: 11px; } ccss ccso>hd { height: 66px; width: 66px; display: flex; align-items: center; justify-content: center; } ccss ccso>hd>i { height: 55px; } ccss>bd { display: flex; } ccso>bd>p { margin: 4px 0; } ccso>bd>t { font-weight: 500; } ccso stp { display: flex; padding: 8px; border-radius: 5px; background: var(--aaa); color: var(--b); align-items: center; justify-content: center; height: 11px; width: 11px; position: absolute; top: -6px; right: 16px; } ccss>bd { display: flex; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); margin-top: 11px; } /* Coupon Card Commponent */ cscs>bd>ccards { display: flex; white-space: nowrap; scroll-behavior: smooth; overflow-x: auto; overflow-y: hidden; position: relative; } ccro>hd { height: 100%; max-height: 164px; border-radius: 11px 11px 0 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } ccro bx>hd>i { height: 40px; width: 95px; border-radius: 6px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); display: flex; justify-content: center; align-items: center; padding: 5px; background: var(--b); } cscs>bd { display: flex; align-items: center; position: relative; } ccro bx>hd { margin-top: -22px; display: block; } ccro bx>bd>p { margin: 11px 0; margin-top: 11px; font-weight: 500; letter-spacing: 0.1px; } ccro>ft>d { display: flex; width: fit-content; align-items: center; padding: 6px 11px; background: #e5fff5; border-radius: 5px; } ccro>ft>d>i { height: 22px; width: 22px; border-radius: 55%; overflow: hidden; padding: 4px; } ccro>ft>d>t { font-weight: 500; margin-left: 5px; } ccro>hd>i { height: 100%; } ccro>hd>i>img { height: 100%; width: 100%; object-fit: fill; } cscs cards { display: flex; } ccro>bd { display: block; padding: 11px; padding-bottom: 0; } ccro>ft { display: block; padding: 11px; } ccro>ft>p { margin: 0; font-size: 0.66em; } ccro>ft>t { display: flex; align-items: center; margin: 11px 0; } ccro>ft>t>h5 { margin-left: 6px; text-decoration: line-through; color: var(--bor); font-weight: 500; } ccro { display: block; border-radius: 11px; box-shadow: 0 0 0 1px var(--bc); margin: 8px; overflow: hidden; background: var(--b); width: 244px; transition: transform 0.8s; } cscs>hd>h2 { color: var(--b); margin-bottom: 22px; } cscs>bd::-webkit-scrollbar { display: none; }::-webkit-scrollbar { display: none; } cards>card:hover ccro { transform: rotateY(180deg); backface-visibility: hidden; } scroll { display: flex; align-items: center; position: absolute; top: 0; bottom: 0; z-index: 99; } scroll:last-child { right: 0; } cscs>bd>ccrds { display: flex; overflow-x: scroll; padding: 0 16px; } scroll:first-child>btn>svg { transform: rotate(180deg); } /* Back Card commponent */ cbco { border-radius: 10px; transform: rotateY(180deg); background: var(--b-t); display: flex; flex-direction: column; justify-content: center; text-align: center; backface-visibility: hidden; transition: transform 0.8s; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; backdrop-filter: blur(20px); box-shadow: inset 0 0 0px 4px var(--bc); } cards>card { position: relative; display: inline-block; } cbco>bx { display: flex; flex-direction: column; } cbco>bx>btn { background: var(--bt); padding: 11px; display: block; text-align: center; margin: 0 22px; border-radius: 5px; font-weight: bold; margin-bottom: 11px; } cbco>bx a { font-weight: 500; text-decoration: underline; color: var(--b); } cards>card:hover cbco { transform: rotateY(0deg); } /* Coupons */ 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); } /* Top Staores Commponent (Coupons) */ ctss { display: block; margin: 11px; } ctss strs { display: flex; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); margin-top: 11px; padding: 11px; } ctsto>bd>t { text-align: center; letter-spacing: 0.36px; margin-top: 11px; display: block; font-size: 1.22em; font-weight: 500; } ctsto { display: block; padding: 11px; margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); border-radius: 11px; background: var(--bt); max-height: 324px; } ctsto>hd>i { height: 100%; } ctsto>hd svg, ctsto>hd img { height: 100%; width: 100%; object-fit: fill; } ctsto>hd { height: 100%; display: flex; max-height: 180px; justify-content: center; align-items: center; border: 1px solid var(--bc); border-radius: 11px; position: relative; overflow: hidden; } ctsto>hd>ii { position: absolute; top: 11px; right: 11px; } ctsto>ft>d { margin-top: 11px; display: grid; padding: 11px; grid-template-columns: 40px auto; font-size: 1.22em; gap: 5px; color: #0b5b24; font-weight: 500; } ctss bx>bd>d { display: grid; grid-template-columns: 33px auto; align-items: center; border: 1px solid var(--bc); border-radius: 5px; margin-top: 11px; } ctsso bx i>img { height: 100%; width: 100%; object-fit: fill; border-radius: 11px; } ctsso:hover bl { height: 100%; opacity: 1; } ctsls { display: block; padding: 5px; } ctsls>toplist { display: flex; } /* Offers commponent (Coupons) */ cofs>bl>bd { display: grid ; grid-template-columns: auto auto; column-gap: 11px; } cofs ofrs { display: grid; grid-template-columns: 33% auto; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); margin-top: 11px; padding: 11px; gap: 2%; } offers { display: block; margin: 22px 0; } cobo { border-radius: 10px; box-shadow: 4px 3px 6px 0 #e5ebff; background: var(--bt); text-align: center; font-size: 1.1em; font-weight: 500; margin: 4px; max-width: 199px; max-height: 199px; height: 100%; width: 100%; display: block; } ccfo { border-radius: 10px; box-shadow: 4px 3px 6px 0 #e5ebff; background: var(--bt); text-align: center; font-size: 1.1em; font-weight: 500; margin: 4px; display: block; overflow: hidden; height: 95px; width: 100%; } ccfo>i { height: 88%; padding: 7px; width: 88%; } ccfo>i>img { height: 100%; width: 100%; object-fit: contain; aspect-ratio: 2 / 3; } cofrs>toplist { display: flex; } cofs>bd { display: grid; grid-template-columns: 49% 50%; gap: 1%; } cobo>hd>i { width: 77px; margin: auto; } /* cashbackstores Commponent (Coupons) */ cashbackstores>hd { display: flex; justify-content: space-between; } ccfro>hd { width: 211px; height: 133px; box-sizing: border-box; border-radius: 4px; display: flex; align-items: center; padding: 0 5px; background: var(--bc); } ccfro { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin: 11px 5px; } ccfro>bd>d { display: grid; grid-template-columns: 33px auto; align-items: center; padding: 5px 11px; background: #e5fff5; border-radius: 5px; font-weight: 500; margin-top: auto; font-size: 0.88em; white-space: nowrap; } ccfro>bd>name { margin-top: 11px; font-size: 1.11em; } ccfro>bd { display: flex; padding: 11px; flex-direction: column; } chcs cstr { overflow-x: scroll; scroll-behavior: smooth; display: list-item; } chcs scroll:last-child { right: 5px; } chcs scroll:first-child { left: 5px; } chcs>bd { display: flex; position: relative; align-items: center; padding: 0 22px; } cashbackstores { display: block; margin: 22px 0; } cics ctsto { display: grid; } cics ics { display: flex; align-items: center; } cics>bd { display: flex; align-items: center; position: relative; padding: 11px 22px; } cics scroll:first-child { left: 5px; } cics cincs { display: flex; overflow: scroll; } cics scroll:last-child { right: 5px; } cics { display: block; padding: 11px; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); position: relative; } cics>hd { padding: 11px; display: block; } @media screen and (max-width: 999px) { cashbackstores { display: block; margin: 11px; margin-top: 22px; } } /* Cashback Commponent */ ccbo>hd { height: 100%; display: flex; max-height: 180px; justify-content: center; align-items: center; border: 1px solid var(--bc); border-radius: 11px; position: relative; overflow: hidden; } ccbo { display: block; padding: 11px; margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); border-radius: 11px; background: var(--bt); width: 212px; } ccbo>hd>i { height: 100%; } ccbo>hd svg, ctsto>hd img { height: 100%; width: 100%; object-fit: fill; } ccbo>ft>d { display: grid; padding: 2px 11px; grid-template-columns: 40px auto; font-size: 0.88em; font-weight: 500; background: #e5fff5; align-items: center; border-radius: 11px; } ccbo>bd>p { margin: 5px 0; } ccbo>bd { display: block; padding: 11px 5px; } ccbo:hover { box-shadow: 0 0 22px 0 var(--bc); } /* Popular Offers commponent (Coupons) */ cpos>hd>btns { display: flex; background-color: var(--bc); width: fit-content; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid var(--bc); border-bottom: none; align-items: center; height: 55px; padding-bottom: 7px; } cpos>hd>btns>btn { width: 249px; text-align: center; font-size: 1em; border-right: solid 1px var(--bc); cursor: pointer; padding: 11px; margin: 4px; border-radius: 5px; } cpos>hd>btns>btn:last-child { border: none; } cpos cpoos { display: flex; padding: 33px; border: 1px solid var(--bc); border-radius: 11px; margin-top: -8px; position: relative; background: var(--b-t); align-items: center; } cpos scroll:last-child { right: 11px; } cpos scroll:first-child { left: 11px; } popularoffers { display: block; margin: 22px 0; } /* Popular Offer commponent (Coupons) */ scps ctmo { margin: 0; padding: 22px; width: 138px; text-align: center; place-content: center; background: var(--bt); margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); } cpos { display: block; margin-top: 11px; } cpoo { display: grid; padding: 22px; border-radius: 5px; border: solid 1px #f4f4f4; background-color: #fff; position: relative; transition: all ease 0.5s; box-shadow: 0 0 10px 0 var(--bc); margin: 5px; width: 177px; height: 222px; grid-template-rows: 55px auto 44px; } cpoo:hover { background: var(--aat); } cpoo>hd { width: 99px; height: 44px; display: block; margin-bottom: 3px; } cpoo>hd>i { height: 100%; } cpoo>hd>i>img { height: 100%; width: 100%; border-radius: 5px; } cpoo>bd>d { display: grid; padding: 2px 0; grid-template-columns: 38px auto; font-size: 0.88em; font-weight: 500; align-items: center; border-radius: 11px; white-space: nowrap; margin-top: 11px; } cpoo>ft>btn { display: block; text-align: center; padding: 11px; background: var(--aaa); color: var(--b); font-weight: 500; border-radius: 5px; } cpoos pofrs { display: grid; grid-auto-flow: column; } cpos ofrlst { display: block; overflow-x: scroll; padding: 0px 22px; } cpos items { display: none; overflow: hidden; } .Today items.Today { display: block; } .Today btn.tdy { background: var(--aaa); color: var(--b); } .Exclusive items.Exclusive { display: block; } .Exclusive btn.exc { background: var(--aaa); color: var(--b); } .Current items.Current { display: block; } .Current btn.crnt { background: var(--aaa); color: var(--b); } /* Coupons in phone version */ @media screen and (max-width: 999px) { scps ctmo { grid-column-start: 1; grid-column-end: 3; width: auto; padding: 11px; font-weight: 500; } cics>bd { padding: 11px; } ccss>bd { display: block; padding: 11px; } ctss strs { display: block; } ctsls>toplist { display: grid; grid-template-columns: 50% 50%; } ctmo { width: auto; grid-column-start: 1; grid-column-end: 3; } ctsls>toplist:first-child { display: none; } cics { margin: 11px; } cofs>bd { display: block; } cofs ofrs { display: block; } cobo { max-width: unset; max-height: unset; padding: 33px 22px; width: auto; height: auto; } cpos>hd>btns>btn { width: auto; } } @media screen and (max-width: 999px) { ccss { padding: 0; } cscs { margin: 11px; padding: 11px; } stores { margin: 11px; margin-top: 22px; } ctss { margin: 0; } trending { display: block; margin: 11px; margin-top: 22px; } trending cofs ofrs { margin: 0; } popularoffers { margin: 11px; margin-top: 22px; } offers { margin: 11px; margin-top: 22px; } } /* Trade (Game) Commponent */ cbdo { display: block; padding: 11px; background: var(--b); border-radius: 11px; } cbdo .smbg { position: absolute; opacity: 0.5; } cbdo>hd>percdbx { color: var(--c); padding: 11px; display: grid; grid-template-columns: 50% auto; position: relative; border-radius: 11px; overflow: hidden; margin: 4px; } cbdo>hd>percdbx>bg { background-image: url(/0/img/GameBG.png); background-repeat: no-repeat; background-size: 101% 117px; background-position: 1px center; z-index: -1; filter: hue-rotate(-92deg); } cbdo peridnm { display: flex; flex-direction: column; justify-content: center; } cbdo peridnm>guide { display: grid; grid-template-columns: 22px auto; border: 1px solid var(--b); border-radius: 32px; padding: 3px; justify-content: center; margin-bottom: 6px; font-size: 0.77em; width: 77%; } cbdo peridnm>h5 { font-weight: 400; letter-spacing: 1px; margin-left: 5px; font-size: 0.66em; } cbdo peridnm>timeleft { display: flex; margin-top: 11px; margin-left: 2px; } cbdo peridnm>timeleft>i { height: 28px; width: 28px; margin-right: 3px; } cbdo percdbx>peridnum { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; } cbdo peridnum cntdwn>h3 { font-size: 0.79rem; letter-spacing: 0.55; font-weight: 400; } cbdo>bd { padding: 11px 0; display: block; } cbdo>bd>color { display: flex; } cbdo color>div>h4 { position: relative; justify-content: center; padding: 11px; border-radius: 7px; display: flex; } cbdo color div>h4>bx { display: block; text-align: center; } cbdo color t.cl { position: absolute; top: 4px; color: var(--b4); display: flex; left: 11px; opacity: 0.5; font-size: 14px; } cbdo>bd joinnum { display: grid; grid-template-columns: auto auto auto; text-align: center; column-gap: 1.5%; } cbdo>bd joinnum>num { padding: 7px; padding-top: 22px; border-radius: 6px; position: relative; background: var(--b); margin-top: 7px; } /* Common css for components and etc */ csopo:hover { background: var(--b-t); } start grid svg, start grid img { height: 22px; width: 22px; } /* Video Component cvdoo { display: grid; grid-template-columns: 255px auto 111px; max-width: 777px; background: var(--bt); border-radius: 11px; margin: 7px 11px; padding: 11px; } cvdoo>ft btn:hover { background: var(--hover); } cvdoo>hd>i { height: 144px; width: 246px; border-radius: 11px; overflow: hidden; margin-right: 5px; } cvdoo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cvdoo d>a { display: flex; align-items: center; } cvdoo d>a>i { height: 16px; width: 16px; margin: 0 3px; } cvdoo d>a { display: flex; align-items: center; font-size: 0.88em; font-weight: 400; } cvdoo>ft>btns>btn { display: block; height: 30px; width: 30px; padding: 5px; margin: 2px; justify-items: center; align-content: center; border-radius: 55%; } cvdoo>ft>btns { display: flex; align-items: center; justify-content: end; } cvdoo>bd>d { display: flex; align-items: center; font-size: 0.99em; font-weight: 400; margin-top: 5px; } cvdoo>bd>t { font-size: 1em; line-height: 1.08em; font-weight: bold; overflow: hidden; max-height: 3.2em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; display: -webkit-box; } cvdoo>bd { display: block; padding: 5px; } cvdoo>bd>d>p { font-size: 0.88em; line-height: 1.44em; font-weight: 400; overflow: hidden; max-height: 3.2em; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; display: -webkit-box; margin: 0; margin-top: 7px; } cvdoo>hd>i>act { display: block; height: 6px; width: 100%; background: var(--bt); position: absolute; left: 0; border-radius: 22px; z-index: 99; bottom: 0px; } cvdoo>hd>i>act:after { content: " "; position: absolute; top: 0; bottom: 0; left: 0; display: block; right: 36%; background: var(--aaa); border-radius: 22px; } @media screen and (max-width: 999px) { cvdoo>hd>i { height: 96px; width: 150px; } cvdoo>bd>t { font-size: 0.88em; } cvdoo>bd>d { font-size: 0.88em; } cvdoo>bd>d>p { margin: 0; } cvdoo { grid-template-columns: 155px auto 0; } } */ /* Video History Manage component */ chmo>hd>sl>input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-left: 55px; border-radius: 11px !important; width: auto; } chmo>hd>sl>i { width: 22px; height: 22px; } chmo sl>btn>i { height: 22px; width: 22px; margin: auto; } chmo>bd btn:hover { background: var(--hover); } chmo>bd btn { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 11px; border-radius: 33px; margin-bottom: 5px; } chmo>ft>a { display: block; padding: 5px; margin-bottom: 5px; padding-left: 57px; } chmo>hd>sl { display: grid; grid-template-columns: 55px auto; align-items: center; margin: 6px; position: relative; height: 48px; width: auto; } chmo { display: block; background: var(--bt); border-radius: 11px; padding: 11px; margin: 11px; } chmo>bd btn>i { height: 18px; width: 18px; margin: auto; } @media screen and (max-width: 999px) { chmo { display: none;} } /* Video History */ svho header>mg { display: none; } @media screen and (max-width: 999px) { svho header>mg { display: flex; justify-content: space-between; align-items: center; position: relative; } .cntrl header>mg>cslo { left: 33%; } .intrction header>mg>cslo { left: 33%; } svho header>h4 { margin: 0 18px; } svho header>mg>a { display: block; padding: 11px; width: 100%; margin: 0 5px; text-align: center; } svho header>mg cslo { display: block; position: absolute; bottom: 0; width: 33%; left: 0%; height: 4px; background: var(--a); margin: 0 5px; border-radius: 33px; transition: 333ms; } svho header>h4 { margin: 0 18px; padding: 11px; } svho bg.hd { display: none; } svho header>mg>a.this { border-bottom: 2px solid; } } /* Intrections (Video History) */ citro trc i { height: 26px; width: 26px; margin: auto; } citro bl { display: block; border: 1px solid var(--bc); border-radius: 11px; margin-top: 11px; padding: 11px 0; background: var(--bt); } citro trc { display: grid; grid-template-columns: 55px auto 44px; align-items: center; padding: 7px 11px; } cvio { display: block; margin: 11px; margin-bottom: 22px; } citro>p { margin: 11px; } citro { display: block; padding-bottom: 22px; } citro trc:hover { background: var(--hover); } /* Control (Video History) */ ccnlo>bl { display: block; margin: 11px; border: 1px solid var(--bc); border-radius: 11px; background: var(--bt); } ccnlo>bl>bd { padding: 22px; padding-bottom: 5px; } ccnlo>bl>ft { padding: 11px; padding-top: 0; } ccnlo>bl>bd>t>h2 { text-align: center; } ccnlo>bl>bd>trc { display: flex; align-items: center; justify-content: space-between; } ccnlo>bl>bd>trc d i { height: 22px; width: 22px; } ccnlo>bl>bd>trc btn { display: block; border: 1px solid var(--bc); border-radius: 5px; white-space: nowrap; padding: 11px 22px; } ccnlo>bl>bd>bx { display: block; margin-top: 11px; } ccnlo>bl>bd>bx>bd>label>input { height: 22px; width: 22px; } ccnlo>bl>bd>trc>hd>d { display: grid; grid-template-columns: 33px auto; align-items: center; } ccnlo>bl>bd>bx trc { display: grid; grid-template-columns: 44px auto 33px; align-items: center; padding: 11px 0; } ccnlo>bl>bd>trc>bd>i { height: 44px; width: 44px; border-radius: 50%; overflow: hidden; margin: auto; } ccnlo>bl>bd>bx trc i { height: 28px; width: 28px; margin: auto; } ccnlo>bl btn { display: flex; justify-content: space-between; align-items: center; font-weight: bold; } ccnlo>bl>ft>btn { display: grid; grid-template-columns: auto 44px; align-items: center; } ccnlo>bl>ft t { text-align: start; font-size: 1.22em; font-weight: 600; margin: 0; } ccnlo>bl>bd>bx label { display: grid; grid-template-columns: 44px auto; padding: 5px; align-items: center; } ccnlo>bl>bd>bx h4 { margin: 11px 0; } ccnlo>bl>hd { padding: 11px; } ccnlo>bl:nth-child(2)>bd>trc { margin-bottom: 11px; } ccnlo>bl>bd>a { display: grid; grid-template-columns: auto 44px; align-items: center; } ccnlo>bl>bd>a>i { height: 22px; width: 22px; } ccnlo>bl>ft>d>t { font-weight: 400; font-size: 1em; } ccnlo>bl>ft>d { display: grid; grid-template-columns: 55px auto; } cpmoo { display: block; text-align: center; justify-items: center; align-content: center; margin: 22px; padding: 22px; } cpmoo>bd { display: block; } cpmoo>hd>i { height: 55%; width: 55%; margin: auto; } cpmoo>ft { padding: 11px; margin-top: 11px; } /* Song Component (Artist) */ csgo { display: grid; grid-template-columns: 66px auto 0; padding: 11px; border-radius: 0; transition: 99ms; margin-bottom: 5px; align-items: center; overflow: hidden; border-bottom: 1px solid var(--bc); } csgo:active { transform: scale(0.99); } csgo>hd { overflow: hidden; border-radius: 11px; height: 55px; width: 55px; position: relative; } csgo>bd>d>h5 { font-size: 0.88em; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; width: 33%; } csgo>bd>t { font-weight: bold; white-space: nowrap; width: fit-content; overflow: hidden; text-overflow: ellipsis; display: block; } cplo>ft>btns>btn:last-child i { margin: 0; } saro calbo { display: block; margin-top: 11px; } csgo>hd>img { height: 100%; width: 100%; } csgo>hd>i>svg { height: 22px; width: 22px; fill: var(--b); } csgo>hd>i { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background: var(--b-t22); border-radius: 8px; transition: 99ms; visibility: hidden; } csgo>ft { display: flex; align-items: center; justify-content: space-around; width: 95%; } csgo btns { display: flex; align-items: center; justify-content: end; transition: 99ms; visibility: hidden; padding-right: 22px; } csgo:hover>hd>i { visibility: visible; } csgo:hover btns { visibility: visible; } csgo btns>btn>i { height: 22px; width: 22px; } csgo btns>btn:hover { background: var(--bc); } csgo btns>btn { height: 33px; width: 33px; border-radius: 55%; display: flex; align-items: center; justify-content: center; margin: 4px; } /* Artist in Phone version */ @media screen and (max-width: 999px) { csgo btns { visibility: visible; } cplo d.phone { margin: 6px 0; padding: 8px 22px; } csgo { grid-template-columns: 66px 48% auto; } csgo>ft { width: auto; justify-content: end; } csgo btns { padding: 0; } csgo>ft>d { display: none; } csgo>bd>d { display: flex; align-items: center; } cplo .desktop { display: none; } clpo { display: block; margin: 11px; margin-top: 22px; } } /* Play Component (Artist) */ cplo>ii>img { height: 100%; width: 100%; } cplo>ii { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; } cplo>ft>btns { display: flex; } cplo>bd { display: block; width: 62%; } cplo>ft>btns>btn>i { height: 18px; width: 18px; margin-right: 5px; } cplo btn:hover { background: var(--bg); } cplo btn { display: flex; align-items: center; justify-content: center; background: var(--bt); padding: 5px 22px; border-radius: 44px; margin-right: 5px; font-size: 0.88em; } cplo { display: block; justify-items: end; align-content: end; position: relative; padding: 11px; height: 177px; } cplo h1 { font-size: 1.77em; } cplo d { width: fit-content; display: flex; align-items: center; justify-content: center; background: var(--bt); padding: 5px 22px; margin: 0 4px; border-radius: 44px; border: none; font-size: 0.88em; } cplo btn:last-child { padding: 11px; } cplo btn:last-child>i { height: 16px; width: 16px; } cplo>ii:after { background: linear-gradient(1turn, rgb(224 231 241) 8.98%, rgba(0, 0, 0, 0) 100%); content: " "; position: absolute; top: 0; bottom: -11px; left: 0; right: 0; } clpo>hd { display: block; margin-bottom: 11px; } cplo>ft btn:hover { background: var(--b-t44); } clpo { display: block; margin-top: 22px; } clpo>ft>btn { display: block; padding: 7px 24px; font-weight: 500; border-radius: 33px; text-align: center; border: 1px solid var(--c); margin-top: 11px; width: fit-content; } /* Artist in Only Desktop */ @media screen and (min-width: 999px) { cplo .phone { display: none; } saro d.aerea { display: block; } saro main { max-width: unset; width: auto; } saro sidebar { max-width: unset; width: auto; position: relative; } saro d.sidebar { padding: 0; } cplo { height: 500px; } cplo>ii { overflow: hidden; } csgo { grid-template-columns: 66px 33% auto; } csgo>ft>d { display: flex; justify-content: space-around; align-items: center; width: 90%; } csgo>bd>d { display: none; } } /* Podcasts */ cpcco calbo { margin-top: 22px; display: block; } cpcco>hd { display: block; padding: 11px; } spcs main { max-width: unset; width: 100%; } /* Music Component */ cmuo { display: grid; grid-template-columns: 144px auto 44px; align-items: center; padding: 11px; margin: 5px; max-width: 444px; background: var(--bt); border-radius: 11px; overflow: hidden; min-width: 92vw; } cmuo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cmuo>hd>i { height: 88px; width: 94%; overflow: hidden; } cmuo time { font-size: 0.88em; opacity: 0.6; display: block; } cmuo>bd>t { font-size: 1em; line-height: 1.22em; font-weight: 500; overflow: hidden; display: block; -webkit-line-clamp: 2; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; margin: 4px 0; } cmuo>bd>p { font-size: 0.77em; line-height: 1.22em; overflow: hidden; display: block; -webkit-line-clamp: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; margin: 0; margin-top: 11px; opacity: 0.6; } cmuo>ft>btn { height: 44px; width: 44px; display: block; border-radius: 55%; align-content: center; } cmuo>ft>btn:hover { background: var(--bc); } cmuo>hd { display: block; position: relative; } cmuo>hd>ii { position: absolute; display: flex; top: 0; right: 8px; bottom: 0; left: 0px; border-radius: 6px; background: var(--b-t22); justify-content: center; align-items: center; visibility: hidden; transition: 99ms; } cmuo:hover ii { visibility: visible; } cmuo>hd>ii>i>svg { fill: var(--b); } cmuo>hd>ii>i { height: 22px; width: 22px; } cmus>clm { display: flex; } @media screen and (min-width: 999px) { cmuo { min-width: 25vw; } } /* Artists */ sars bg.hd { display: none; } sars mb { display: flex; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); margin-bottom: 11px; padding-bottom: 0; } sars mb>a { padding: 11px 22px; margin-right: 5px; } sars mb>a.this { border-bottom: 2px solid var(--a); color: var(--a); } sars bl>mg { display: flex; overflow-x: scroll; } sars bl>mg a { display: block; padding: 7px 22px; margin: 8px; margin-left: 5px; background: var(--bc); border-radius: 22px; font-size: 0.88em; font-weight: 500; } sars bl>mg>aa>btn:hover { background: var(--bt); } sars bl>mg a.this { background: var(--bt); box-shadow: var(--bs-b); } sars d.aerea { justify-content: start; } sars bgimgs { width: 100%; display: block; height: 100%; } sars bgimgs>img { height: 100%; width: 100%; opacity: 0.5; } sars bl>mg>aa { display: flex; margin-left: 11px; align-items: center; } sars bl>mg>aa>btn { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; background: var(--bc); border-radius: 55%; border: 1px solid var(--bc); } /* Liked Artists component */ clco>hd>i>img { width: 100%; height: 100%; } clco>hd>i { overflow: hidden; border-radius: 11px; height: 122px; width: 100%; } clco { display: grid; padding: 11px; background: var(--bt); border-radius: 11px; margin: 4px; width: 139px; position: relative; grid-template-rows: 122px auto; } clco>hd { display: block; position: relative; } clco>bd>t { font-size: 0.88em; font-weight: bold; } clco d { display: flex; align-items: center; margin-top: 5px; opacity: 0.8; font-weight: 500; } clco>bd { display: block; padding: 5px; padding-bottom: 0; } clco d>i { height: 13px; width: 13px; margin-right: 3px; } clco d>p { margin: 0; font-size: 0.77em; } clco>hd>bl i { height: 33px; width: 33px; border-radius: 55%; margin: 5px; background: var(--b-t44); transition: 99ms; } clco bl i>svg { height: 18px; width: 18px; } clco bl>bd>i { margin-right: 11px; } clco bl i:hover { background: var(--b-t22); transform: scale(1.2); } clco>hd>bl { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: end; padding: 11px; background: linear-gradient(142deg, var(--b-t22), transparent); border-radius: 11px; transition: 99ms; visibility: hidden; } clco:hover bl { visibility: visible; } clco bl>bd>i::after { content: ""; position: absolute; top: 9%; bottom: 9%; left: 9%; right: 9%; background: var(--b-t); border-radius: 55%; z-index: -1; transition: 99ms; transform: scale(0); } clco bl>bd>i:active::after { transform: scale(1.01); } /* Artist component */ catss { display: flex; flex-wrap: wrap; } catso { display: grid; padding: 11px; margin: 4px; position: relative; grid-template-rows: 111px auto 0; align-items: center; max-width: 177px; text-align: center; background: var(--b-t44); border-radius: 11px; box-shadow: var(--bs); } catso>hd>i { height: 111px; width: 111px; border-radius: 5555%; overflow: hidden; margin: auto; } catso>hd>i>img { height: 100%; width: 100%; object-fit: cover; } catso>bd>p { margin: 0; font-weight: 500; opacity: 0.8; font-size: 0.77em; } catso>bd>t { font-size: 1em; font-weight: bold; padding: 11px; display: block; padding-bottom: 0; } catso>ft>btn:hover { background: var(--hover); } catso>ft>btn { height: 44px; width: 44px; display: block; align-content: center; border-radius: 55%; visibility: hidden; } catso:hover>ft>btn { visibility: visible; } catso>ft { display: flex; justify-content: end; } sars h>d>bl { display: flex; justify-content: space-between; align-items: center; } sars h>d>bl>btn>select { padding: 0; height: auto; border: none; } sars h>d>bl>btn { display: flex; padding: 10px 11px; background: var(--bt); border-radius: 5px; margin: 0 5px; } sars h bl btn { height: 44px; display: flex; align-items: center; width: 44px; border-radius: 55%; margin-right: 3px; } sars h bl btn:last-child { display: grid; grid-template-columns: auto 33px; width: auto; } sars h>d>bl>btns { display: flex; align-items: center; } sars main { max-width: unset; width: 100%; } @media screen and (max-width: 999px) { catso { margin: 4px; } catso>ft>btn { visibility: visible; } } @media screen and (max-width: 450px) { catss { display: grid; grid-template-columns: 50% 50%; padding: 5px; } } /* Watch later component */ cwao>hd>i>img { width: 100%; height: 100%; } cwao>hd>i { overflow: hidden; border-radius: 11px; height: 122px; width: 100%; } cwao { display: grid; padding: 11px; background: var(--bt); border-radius: 11px; margin: 4px; width: 139px; position: relative; grid-template-rows: 122px auto; } cwao>hd { display: block; position: relative; } cwao>bd>t { font-size: 0.88em; font-weight: bold; } cwao d { display: flex; align-items: center; margin-top: 5px; opacity: 0.8; font-weight: 500; } cwao>bd { display: block; padding: 5px; padding-bottom: 0; } cwao d>i { height: 16px; width: 16px; margin-right: 5px; } cwao d>p { margin: 0; font-size: 0.77em; } cwao>hd>bl i { height: 33px; width: 33px; border-radius: 55%; margin: 5px; background: var(--b-t44); transition: 99ms; } cwao bl i>svg { height: 18px; width: 18px; } cwao bl>bd>i { margin-right: 11px; } cwao bl i:hover { background: var(--b-t22); transform: scale(1.2); } cwao>hd>bl { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: end; padding: 11px; background: linear-gradient(142deg, var(--b-t22), transparent); border-radius: 11px; transition: 99ms; visibility: hidden; } cwao:hover bl { visibility: visible; } cwao bl>bd>i::after { content: ""; position: absolute; top: 9%; bottom: 9%; left: 9%; right: 9%; background: var(--b-t); border-radius: 55%; z-index: -1; transition: 99ms; transform: scale(0); } cwao bl>bd>i:active::after { transform: scale(1.01); } @media screen and (max-width: 999px) { clco, cwao { width: auto; grid-template-rows: 155px auto; } clco>hd>i { height: 155px; } clbo>hd>i { height: 155px; } cwao>hd>i { height: 155px; } } /* Podcast */ spco d.aerea { flex-direction: unset; } spco csonss { border-radius: 11px; background: var(--b-t22); text-align: center; } ccpso btn { display: flex; align-items: center; justify-content: center; height: 36px; width: 36px; background: var(--bt); margin: 0 5px; border-radius: 55%; padding: 2px; } ccpso>btns { display: flex; justify-content: center; padding: 11px; margin: 11px; margin-bottom: 0; align-items: center; } ccpso btn:nth-child(2) { height: 50px; width: 50px; margin: 0 11px; } ccpso btn:hover { background: var(--b-t44); } ccpso btn:nth-child(2)>i { height: 20px; width: 20px; } ccpso btn>i { height: 16px; width: 16px; } spco alsngs>ft { padding: 0; display: block; padding-bottom: 11px; } alsngs>bd>h1 { font-size: 1.33em; margin-top: 11px; font-weight: 700; line-height: 1.33em; letter-spacing: 0.07px; text-align: center; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } spco alsngs soni i { height: 233px; width: 244px; overflow: hidden; margin: 5px; } spco bgimgs>img { height: 100%; width: 100%; opacity: 0.2; } spco bgimgs { left: 0; right: 0; margin: 0; width: auto; display: block; } spco alsngs time { display: flex; justify-content: center; } spco alsngs id { display: flex; padding: 4px; } @media screen and (min-width: 999px) { spco sidebar { width: 44%; } } @media screen and (max-width: 999px) { spco bgimgs>img { opacity: 0.4; } spco bgimgs { height: 66%; } spco alsngs { padding: 22px; margin: 0; } spco alsngs id { display: block; text-align: center; } alsngs>bd>h1 { margin-top: 11px; } } /* Footer */ cftso { display: block; background: var(--bt); border-radius: 11px; margin-top: -100px; } cfio { display: grid; grid-template-columns: 40% auto; border-radius: 11px; align-items: center; max-width: 77%; margin: auto; background: var(--aaa); color: var(--b); box-shadow: 0 5px 10px #4e81ecb5; position: relative; } cfio svg, cfio path { fill: var(--b); } cfio>hd>i { height: 100%; width: 40%; position: absolute; top: -57px; left: 0; right: 0; } cfio>bd>bl { display: block; padding: 22px; max-width: 77%; } cfio>bd>bl t { font-size: 1.22em; font-weight: 500; } cfio bl p { font-weight: 400; color: var(--bt); text-align: start; } cfio bl sl { display: grid; grid-template-columns: 33px auto 77px; align-items: center; padding: 11px; height: 29px; background: var(--b-t22); border-radius: 33px; } cfio bl sl>i { height: 22px; width: 22px; margin: auto; } cfio bl sl { display: grid; grid-template-columns: 33px auto 98px; align-items: center; height: 36px; background: var(--b-t22); border-radius: 33px; width: auto; max-width: 77%; padding: 4px; } cfio bl sl>input { position: absolute; padding: 0 44px; padding-right: 111px; top: 0; bottom: 0; left: 0; right: 0; width: auto; color: var(--b); letter-spacing: 0.44px; font-weight: 500; border-radius: 33px; height: auto; } cfio bl sl>btn { display: block; font-size: 0.88em; font-weight: 500; color: var(--c); background: var(--bt); padding: 9px 11px; border-radius: 22px; grid-column-start: 3; text-align: center; position: relative; z-index: 9; cursor: pointer; box-shadow: var(--bs-b); } cfio sl input:focus { border: 1px solid var(--b-t44); border-radius: 33px; box-shadow: none; } cfio bl p>a { text-decoration: underline; color: var(--b); } cfio>bd>bl>ft { padding: 0; } cftso>hd { display: block; position: relative; height: 122px; z-index: -1; } cfdo logo { display: grid; grid-template-columns: 55px auto; align-items: center; } cfdo { display: flex; max-width: 77%; margin: auto; justify-content: space-between; } cfdo>hd ft>d { display: flex; } cfdo>hd ft>d>i { height: 16px; width: 16px; margin-right: 22px; } cfdo>hd>bl { display: block; padding: 11px; max-width: 259px; } cfdo>bd>links { display: flex; justify-content: space-between; } cfdo links>bl { display: flex; flex-direction: column; } cfdo links>bl { display: flex; flex-direction: column; padding: 11px; margin: 0 11px; } cfdo links>bl a { font-weight: 400; margin-top: 11px; font-size: 0.88em; } cfdo links>bl d { display: grid; grid-template-columns: 33px auto; align-items: center; margin-top: 11px; } cftso>ft>bl { display: flex; justify-content: space-between; max-width: 77%; margin: auto; align-items: center; padding: 11px 0; padding-bottom: 22px; white-space: nowrap; } cftso>ft>bl d.links { display: flex; align-items: center; } cftso d.links>a { margin: 0 22px; font-size: 0.88em; font-weight: 400; transition: 99ms; } cftso a:hover { color: var(--a); } cfdo a:hover { color: var(--a); } cfdo logo>t { font-weight: bold; font-size: 1.44em; } cftso d.links>hr { width: 1px; height: 22px; } cfio bl sl>input::placeholder { color: var(--b); opacity: 1; /* Firefox */ } cftso copyrights { font-size: 0.88em; } @media screen and (max-width: 999px) { cfio>hd>i { display: none; } cfio { display: block; max-width: unset; margin: 11px; } cftso { margin: 11px; } cftso>hd { height: 0; } cfdo { max-width: unset; display: block; } cfdo>bd>links { display: grid; grid-template-columns: 33% 33% 33%; margin-top: 11px; } cfdo links>bl:last-child { grid-column-start: 1; grid-column-end: 3; } cftso>ft>bl { display: block; max-width: unset; padding: 11px; } cftso>ft>bl d.links { overflow-x: scroll; white-space: nowrap; display: flex; } copyrights { padding: 22px; display: block; padding-top: 0; } cfio>bd>bl { max-width: unset; } cfdo>hd>bl { margin-left: 11px; } cfio bl sl { max-width: unset; } } /* Lyrics */ slyo bgimgs>img { height: 100%; width: 100%; opacity: 0.5; } slyo bgimgs { left: 0; right: 0; margin: 0; width: auto; display: block; } clrcs>hd>d { display: flex; align-items: center; padding: 4px 0; font-size: 0.66em; margin-right: 22px; position: relative; } clrcs>hd>d>i { height: 11px; width: 11px; margin: 5px; margin-bottom: 3px; margin-left: 0; } clrcs>hd { display: flex; align-items: center; padding: 11px 0; justify-content: center; white-space: nowrap; position: relative; } clrcs>hd>d>ii { height: 22px; width: 22px; border-radius: 55%; overflow: hidden; margin-right: -5px; border: 1px solid var(--bt); } clrcs>bd>bl>t { font-weight: 500; margin-top: 22px; display: block; } clrcs>ft>d { display: flex; padding: 7px 33px; border: 2px solid var(--c); border-radius: 33px; margin-right: 11px; width: 43px; justify-content: center; align-items: center; cursor: pointer; transition: 99ms; } clrcs>ft>d:hover { background: var(--hover); } clrcs>ft>d>i { height: 16px; width: 16px; } clrcs>ft>d { display: flex; padding: 7px 33px; border: 2px solid var(--c); border-radius: 33px; margin-right: 11px; } slyo alsngs>ft { padding: 0; display: block; margin: 0; margin-top: 22px; } slyo alsngs ft>time { display: flex; align-items: center; } slyo alsngs ft>time>d { display: grid; grid-template-columns: 22px auto; align-items: center; white-space: nowrap; padding: 11px 0; margin-right: 11px; font-size: 0.88em; font-weight: 400; } slyo alsngs { padding: 11px; background: transparent; position: relative; } clrcs>bd>bl { display: block; text-align: center; } slyo alsngs p { -webkit-line-clamp: 5; font-weight: 400; margin-top: 15px; } clrcs>ft { display: flex; justify-content: center; padding: 11px; } alsngs>bg { position: absolute; z-index: -1; filter: blur(72px); bottom: 135px; opacity: 0.2; } cmspo { display: grid; grid-template-columns: 22% auto 88px; align-items: center; background: var(--bt); border-radius: 11px; box-shadow: var(--bs-bt); padding: 11px; } cmspo>bd { display: grid; grid-template-columns: 44px 44px 75% 44px; align-items: center; width: 95%; } cmspo>ft { width: auto; margin: 0; } cmspo>bd>btn { height: 33px; width: 33px; padding: 4px; display: flex; justify-content: center; align-items: center; } cmspo trc { display: grid; grid-template-columns: 55px auto; align-items: center; } cmspo trc i { height: 44px; width: 44px; overflow: hidden; } cmspo trc t { text-align: start; } cmspo trc p { margin: 0; text-align: start; -webkit-line-clamp: 1; font-size: 0.77em; } cmspo>ft>logo { display: grid; grid-template-columns: 33px auto; align-items: center; } cmspo input { padding: 0; width: 96%; height: auto; margin: 0; } alsngs>hd>soni { position: relative; } cplpo { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: linear-gradient(141deg, #000000e8, #0000002e); border-radius: 7px; color: var(--b); display: grid; grid-template-rows: 44px auto 44px; visibility: hidden; transition: 333ms; } cplpo btn { height: 33px; width: 33px; overflow: hidden; padding: 5px; margin: auto; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 55%; } soni:hover cplpo { visibility: visible; } cplpo btn:hover { background: var(--bg); } cplpo btn:active svg { fill: var(--c); } cplpo btn:active { background: var(--bt); } slyo alsngs bd t { margin-top: 5px; } cplpo>hd t { display: flex; padding: 11px; font-size: 0.88em; } cplpo>ft { display: grid; grid-template-columns: 44px 64% 44px; padding: 11px; font-size: 0.88em; } cplpo>hd t>p { margin: 0; font-size: 1em; font-weight: bold; } cplpo btn>i>svg { fill: var(--b); } cplpo input { height: auto; margin: 0; padding: 0; width: 88%; margin: auto; } slyo alsngs a { font-size: 0.88em; } alsngs cplpo btn>i { height: 22px; width: 22px; margin: 0; overflow: unset; } input[type="range"] { accent-color: var(--b); } @media screen and (max-width: 999px) { clrcs>hd>d { margin: 0 7px; } .Translator ctro { top: 80%; left: 26px; } cmspo trc>bd { display: none; } cmspo>ft>logo { display: none; } cmspo { grid-template-columns: 55px auto 0; } cmspo>bd>btn { display: none; } cmspo>bd { display: flex; gap: 3%; align-items: center; } clrcs>ft { overflow-x: scroll; justify-content: unset; } } @media screen and (min-width: 999px) { slyo sidebar { min-width: 411px; } } @media screen and (min-width: 999px) { clrcs>hd>d { margin-right: 11px; } } /* Translator Option component */ ctro { display: block; width: 158px; overflow: hidden; border-radius: 11px; background: var(--b); position: absolute; z-index: 99; top: -1%; box-shadow: var(--bs-bs); font-size: 0.88em; border: 1px solid var(--bc); transition: 99ms opacit; visibility: hidden; } ctro>ul>li:hover { background: var(--bg); } ctro>ul>li:active { background: var(--bc); } ctro>ul>li { padding: 4px 11px; margin: 1px 0; } ctro>ul { padding: 4px 0; margin: 4px 0; } .Translator ctro { top: 1%; visibility: visible; } /* Podcaster */ spdo d.aerea { flex-direction: unset; } spdo alsngs ft { width: auto; display: block; padding: 0; } spdo alsngs btns { display: flex; align-items: center; justify-content: center; padding: 11px; } spdo alsngs btns>btn { display: flex; align-items: center; white-space: nowrap; } spdo alsngs { display: block; padding: 11px; } spdo alsngs btns>btn i { height: 18px; width: 18px; } spdo alsngs btns>btn { display: flex; align-items: center; white-space: nowrap; background: var(--bt); border-radius: 44px; padding: 11px; } spdo alsngs btn:nth-child(2) { display: grid; grid-template-columns: 22px auto; align-items: self-end; font-size: 0.88em; padding: 11px 22px; margin: 0 11px; } spdo alsngs btn:hover { background: var(--b-t44); } spdo csonss { padding: 11px; } csonss mg>aa { display: block; background: var(--b-t); border-radius: 5px; margin-right: 11px; padding: 9px 11px; font-size: 0.88em; } csonss mg { display: flex; align-items: center; margin-bottom: 11px; } csonss mg>aa>select { height: auto; width: auto; padding: 0; border: none; background: transparent; } csonss mg>aa:hover { background: var(--b-t44); } @media screen and (max-width: 999px) { csonss>hd { display: block; overflow-x: scroll; } csonss mg { white-space: nowrap; } } /* Podcast component */ cpdco { display: block; padding: 11px; border-radius: 11px; } cpdco>hd { display: grid; grid-template-columns: 66px auto 44px; align-items: center; margin-bottom: 11px; } cpdco>hd>i { height: 33px; width: 55px; overflow: hidden; border-radius: 5px; } cpdco>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cpdco>hd>t { font-weight: 500; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } cpdco>bd>t { font-weight: 400; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: 0.88em; margin-bottom: 11px; } cpdco time { display: flex; align-items: center; font-size: 0.88em; } cpdco>hd>btn { height: 33px; width: 33px; display: flex; justify-content: center; align-items: center; border-radius: 55%; visibility: hidden; } cpdco>hd>btn:active { background: var(--bt); } cpdco>hd>btn:hover { background: var(--b-t44); box-shadow: var(--bs-b); } cpdco:hover>hd>btn { visibility: visible; } @media screen and (max-width: 999px) { cpdco>hd>btn { visibility: visible; } } /* Video History */ /* Order */ cmgs mg a { display: flex; justify-content: center; align-items: center; position: relative; margin: 0 2px; background: var(--b-t); border-radius: 9px; font-weight: 400; padding: 16px; width: 111px; } cmgs a.this { background: var(--aaa); color: var(--b); border-color: var(--lg); } cmgs { display: block; padding: 11px; } cmgs mg { height: 55px; margin: 0px; min-width: 0px; width: 100%; white-space: nowrap; display: flex; flex-direction: row; overflow: scroll; grid-template-columns: 33% 33% 33%; margin: auto; } /* Payment method */ cpmom cvn input { border: none; padding: 6px 22px; margin: 0; border-radius: 11px; font-size: 16px; font-weight: 700; background: transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-right: 44px; width: auto; height: auto; } cpmom cn input { padding: 0; margin: 0; display: flex; justify-content: center; background: transparent; font-size: 15px; width: auto; border: none; } cpmom div2>btn { display: block; height: 33px; width: 33px; align-content: center; grid-column-start: 2; } cpmom cvn bl>div2 { display: grid; grid-template-columns: auto 44px; align-items: center; background: var(--bc); border-radius: 8px; border: 1px solid var(--bc); position: relative; height: 57px; } cpmom date>input { position: unset; background: var(--bc); border: 1px solid var(--bc); padding: 11px 11px; font-size: 0.77em; height: 32px; } cpmom cn btn { font-weight: 500; display: grid; grid-template-columns: 33px auto; align-items: center; position: relative; font-size: 0.88em; } cvv>t { font-size: 0.88em; } cpmom bl>cvv>h5 { font-weight: 400; letter-spacing: 1px; font-size: 1em; } cpmoi { background: var(--bt); border-radius: 11px; display: block; margin-top: 65px; padding: 22px; } cpmoc { display: grid; row-gap: 30px; background-color: rgb(255 255 255); border-radius: 22px; background-image: url(/0/IMG/line.png); width: 277px; margin: auto; transform: translate(-3px, -60px); max-width: 255px; height: 266px; } cpmoi>bd { display: block; padding: 22px; padding-bottom: 0; } cpm>hd>i { height: 44px; width: 44px; } cpmoc ft { display: flex; justify-content: space-between; align-items: center; } cpmom hd hd { background: var(--aaa); border-radius: 33px; justify-content: center; display: flex; align-items: center; padding: 3px; height: 33px; width: 33px; } cpmom cvn bl>.pass { grid-template-columns: auto 44px 44px; } cpmom bd .bl { display: grid; grid-template-columns: 55px auto 44px; align-items: center; background: var(--bc); padding: 11px; border-radius: 11px; border: solid 1px var(--bc); } cpmom { padding: 22px; display: block; background: var(--bt); border-radius: 11px; margin: 11px; } @media only screen and (min-width: 999px) { cartfill bd { display: grid; grid-template-columns: 50% 50%; } } @media only screen and (max-width: 999px) { cpmoc { width: 100%; max-width: 288px; } cpmom bl>cvv { margin-bottom: 11px; } cpmoc { width: 100%; max-width: 288px; } } /* Gif */ cguo { display: grid; border-radius: 22px; grid-template-columns: 77px auto; align-items: center; } cguo d { display: flex; } cguo>hd>i { height: 66px; width: 66px; border-radius: 55%; overflow: hidden; } cguo d>lvl { display: flex; align-items: center; margin-left: 11px; padding-left: 11px; border-left: 1px solid var(--bc); font-size: 0.88em; } cguo lvl>i { height: 11px; width: 11px; margin: 4px; } cguo lvl>i:last-child>svg { fill: var(--bc); } cguo rated { display: flex; align-items: center; white-space: nowrap; font-size: 0.88em; } cguo rated>i { height: 11px; width: 11px; margin: 4px; margin-left: 0; } cgpo postimgs { border-radius: 11px; display: flex; width: 100%; overflow-y: auto; margin: 11px 0; height: 388px; } cgpo postimgs>bl { align-items: center; display: flex; margin: 11px 0; } cgpo postimgs>bl>i { height: 100%; margin: 0 13px; border-radius: 11px; overflow: hidden; flex: none; width: 95%; } cgpo>h1 { margin-bottom: 22px; font-size: 1.88em; font-weight: 500; } cgpo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin: 11px; } cgpo>bd { display: block; position: relative; } sggo scroll:first-child { left: 0px; } sggo scroll:last-child { right: 5px; } cgpo>ft otherposts>bl>i>img { height: 100%; width: 100%; object-fit: cover; } cgpo>ft otherposts>bl>i { height: 100%; } cgpo>ft otherposts>bl { display: block; height: 77px; width: 77px; border-radius: 11px; overflow: hidden; margin: 4px; } cgpo otherposts { display: flex; } cgpo>ft>bl { display: grid; overflow-x: scroll; overflow-y: hidden; } cgpo>ft>scroll>btn { height: 85%; border-radius: 0px; place-content: center; background: var(--b-t22); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); } gigplan.phone { display: none; } /* Gig Liked Review component */ clro { display: flex; margin: 0 11px; padding: 22px; border-radius: 11px; box-shadow: var(--bs); margin-bottom: 5px; background: var(--bt); flex: none; } clro>hd>i { height: 44px; width: 44px; border-radius: 55%; overflow: hidden; margin-right: 22px; } clro d { display: flex; align-items: center; } clro d i { height: 16px; width: 16px; margin: 0 5px; } clro d>rgn { display: flex; align-items: center; padding: 0 7px; border-right: 2px solid var(--bc); } clro d>rate { display: flex; align-items: center; font-weight: 600; margin-left: 5px; } clro time { opacity: 0.6; } clrs bl>hd>btns { display: flex; align-items: center; justify-content: end; padding: 22px 0; padding-bottom: 0; } clrs bl>hd btn { height: 33px; width: 33px; background: var(--bt); place-content: center; border-radius: 55%; margin: 4px; padding: 2px; box-shadow: var(--bs-b); } clro d>rgn>t { opacity: 0.6; font-size: 0.88em; } clro>bd>d>t { margin: 5px 0; line-height: 1.6em; font-weight: 500; overflow: hidden; display: block; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } clro d>rate>i { height: 13px; width: 13px; margin: 0 3px; } clrs>hd { display: flex; justify-content: space-between; } clrs { display: block; margin: 11px; margin-top: 33px; } clrs lrwss { display: grid; width: 100%; grid-template-columns: 40% 40% 40% 40% 40%; } clrs bl>bd { display: grid; overflow-x: scroll; overflow-y: hidden; } /* Gig About */ cgao { display: block; margin: 11px; padding: 22px; background: var(--bt); border-radius: 11px; } cgao>bd>bl>t { font-weight: 600; margin-top: 33px; display: block; } cgao>bd>bl>p { font-weight: 500; opacity: 0.7; } cgao>bd>bl>p:last-child { margin-bottom: 0; } cgpo postimgs img { width: 100%; height: 100%; object-fit: cover; } /* Gig user about component */ caguo { display: block; padding: 11px; background: var(--bt); border-radius: 11px; margin: 11px 0; } caguo>bd>bl { display: block; padding: 22px; background: var(--bc); box-shadow: var(--bs); border-radius: 11px; margin-top: 11px; } caguo>bd>bl>hd { display: grid; grid-template-columns: 50% 50%; } caguo>bd>bl d { margin: 22px; } caguo>bd>bl d>p { margin: 0; margin-bottom: 5px; } caguo>bd>bl d>t { font-weight: 700; } caguo>bd>btn { display: block; text-align: center; width: fit-content; background: var(--aaa); padding: 11px 22px; margin: 11px; margin-left: 0; border-radius: 5px; box-shadow: var(--bs); font-weight: 500; color: var(--b); } aboutuser { display: block; margin: 11px; margin-top: 33px; } /* Gig Package compaire component */ cgpco td>i { height: 16px; width: 16px; } cgpco td.status { text-align: center; vertical-align: middle; width: 25%; } cgpco td:first-child { color: #74767e; font-weight: 400; padding: 11px; text-align: left; vertical-align: text-top; width: 144px; } /* FAQ component */ cgfqo fq>d { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; } cgfqo fq { display: block; transition: 99ms; margin: 5px 0; padding: 5px; border-bottom: 1px solid var(--bc); overflow: hidden; } cgfqo fq>text { display: block; overflow: hidden; } cgfqo fq>d>btn { transition: 99ms; display: block; height: 22px; width: 22px; place-content: center; } fq.more t { visibility: visible; transform: translate(0, 0%) scale(1); height: 100%; } cgfqo fq t { display: block; transition: 333ms; transform: translate(0%, -353%) scale(1); visibility: hidden; height: 0; } FQ.more>d>btn { transform: rotate(180deg); } cgfqo { display: block; padding: 22px; margin: 11px; background: var(--bt); border-radius: 11px; } cgfqo fq:last-child { border: none; margin-bottom: 0; padding-bottom: 0; } cgfqo fq:last-child>d { padding-bottom: 0; } cgfqo>hd { display: grid; grid-template-columns: auto 44px; align-items: center; } cgfqo>hd>btn { display: block; height: 22px; width: 22px; place-content: center; margin: auto; margin-right: 0; } cgfqo.FAQ>hd>btn { transform: rotate(180deg); } /* Gig Reviews */ crco>hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } crco>hd>rate { display: flex; align-items: center; } crco>hd>rate>i { height: 13px; width: 13px; margin: 4px; } crco>hd>rate { display: flex; align-items: center; font-weight: 600; } crco trc { display: grid; align-items: center; grid-template-columns: 55px auto 44px; padding: 5px 0; margin-bottom: 5px; } crco trc>d { display: block; background: var(--bc); height: 11px; border-radius: 33px; margin: 0 11px; position: relative; } crco trc>d:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 45%; background: var(--aaa); border-radius: 33px; } crco>bd { display: grid; grid-template-columns: 50% 50%; } crco>bd rnk { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; margin-bottom: 5px; } crco>bd rnk>d { display: flex; align-items: center; } crco rnk>d>i { height: 13px; width: 13px; margin: 4px; } gigreviews { display: block; margin: 11px; } cgrws { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin-top: 11px; } crfo>hd>sl { display: grid; grid-template-columns: auto 45px; height: 38px; border: 1px solid var(--bc); align-items: center; border-radius: 5px; } crfo sl>input { position: absolute; height: auto; top: 0; bottom: 0; right: 0; left: 0; font-weight: 500; letter-spacing: 0.55px; padding-right: 55px; width: auto; } crfo>hd>sl>btn { display: block; place-content: center; height: 39px; width: 45px; grid-column-start: 2; background: var(--aaa); border-radius: 0 3px 3px 0; border-left: 1px solid var(--bc); } crfo sl>btn svg { fill: var(--b); } crfo sl>input:focus { box-shadow: none; border-radius: 5px; } crfo { display: block; width: 46%; margin: 22px 0; } crfo select { height: auto; padding: 0; border: none; width: fit-content; background: transparent; } crfo label>input { margin: 0; height: 13px; width: 13px; } crfo>bd>label { display: grid; align-items: center; grid-template-columns: 22px auto; margin: 11px 0; } cgrwo rww trc>hd>i { height: 44px; width: 44px; border-radius: 55%; overflow: hidden; margin-right: 11px; } cgrwo>rww { display: block; padding: 22px; border: 1px solid var(--bc); border-radius: 11px; } cgrwo reog { display: flex; align-items: center; white-space: nowrap; } cgrwo reog>i { height: 13px; width: 13px; margin: 4px; margin-left: 0; } cgrwo>rww trc { display: flex; align-items: center; padding-bottom: 5px; } cgrwo rate>i { height: 13px; width: 13px; margin: 4px; } cgrwo>rww rate { display: flex; align-items: center; font-weight: 600; } cgrwo>rww bd>p { font-weight: 500; overflow: hidden; display: block; max-height: 8.4em; -webkit-line-clamp: 4; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } cgrwo>rww>bd>bl>ft { display: flex; align-items: center; } cgrwo>rww>bd>bl>ft t { font-weight: 600; margin: 0; } cgrwo bl>ft>l { display: block; height: 22px; width: 0px; border-left: 2px solid var(--bc); margin: 0 33px; } cgrwo bl>ft>d>p { margin: 0; } cgrwo>rww>bd>bl>ft { display: flex; align-items: center; padding-bottom: 11px; } cgrwo>rww cmnt>hd { display: grid; grid-template-columns: 44px auto 11px; align-items: center; } cgrwo>rww cmnt>hd>i { height: 33px; width: 33px; border-radius: 55%; overflow: hidden; } cgrwo>btns { display: flex; align-items: center; } cgrwo>btns>t { display: block; margin: 5px; padding-bottom: 11px; padding-top: 5px; } cgrwo>btns>btn { display: grid; padding: 11px 5px; grid-template-columns: 22px auto; align-items: center; margin: 5px; padding-top: 5px; font-size: 0.88em; font-weight: 600; } cgrwo>btns>btn>i { height: 13px; width: 13px; } cgrwo>btns>btn.this { color: #1dbf73; } cgrwo>btns>btn.this svg { fill: #1dbf73; } cgrwo>btns>btn.this:last-child { color: #f74040; } cgrwo>btns>btn.this:last-child svg { fill: #f74040; } cgrws>ft>btn { padding: 11px 22px; background: var(--aaa); color: var(--b); border-radius: 5px; margin-top: 11px; display: block; width: fit-content; } cgrwo cmnt>bd { display: block; overflow: hidden; } cgrwo cmnt>bd>t { display: block; transition: 333ms; transform: translate(0%, -353%) scale(1); visibility: hidden; height: 0; padding: 0; } cgrwo.cmnt cmnt>bd>t { visibility: visible; transform: translate(0, 0%) scale(1); height: 100%; padding: 11px; } cgrwo>rww trc d { display: flex; align-items: center; } cgrwo time { font-size: 0.88em; opacity: 0.7; } /* Gig Plan */ gigplan>hd>btns { display: flex; align-items: center; justify-content: end; } gigplan>hd>btns i.btn { opacity: 0.5; } gigplan>hd>btns>d t:after { border-style: solid; content: ""; position: absolute; border-color: transparent #fff transparent transparent; border-width: 6px 8px 6px 0; left: -8px; top: 8px; z-index: 3; } gigplan>hd>btns btn { display: flex; align-items: center; } gigplan>hd>btns>d t:before { border-color: transparent #dadbdd transparent transparent; border-width: 8px 9px 8px 0; left: -9px; top: 6px; z-index: 2; border-style: solid; content: ""; position: absolute; } gigplan>hd>btns>d>t { display: block; padding: 5px 11px; background: var(--bt); border-radius: 5px; position: relative; border-width: 8px 9px 8px 0; border: 1px solid; font-size: 0.77em; border-color: #dadbdd; margin-left: 7px; } gigplan>hd>btns i.btn { opacity: 0.5; height: 15px; width: 15px; margin: 4px; } gigplan>hd>btns>d { display: flex; align-items: center; } /* Gig Plan Component */ cgplo>hd btns { display: grid; text-align: center; grid-template-columns: 33.3% 33.3% 33.3%; } cgplo>hd btns>btn { display: block; padding: 11px; border: 1px solid var(--bc); font-weight: 500; } gigplan>ft>btn { display: block; background: var(--aaa); padding: 11px; text-align: center; color: var(--b); border-radius: 5px; } cgplo bsc>hd>d { display: flex; align-items: center; } cgplo bsc>hd>d>i { height: 13px; width: 13px; margin: 4px; } cgplo bsc>hd>d>h4 { font-weight: 500; font-size: 1.22em; } cgplo bsc>hd { display: block; margin-bottom: 11px; } cgplo bsc>bd>d { display: block; margin: 11px 0; } cgplo bsc>ft>bl>hd { display: flex; font-weight: 600; align-items: center; font-size: 0.88em; } cgplo bsc>ft>bl>hd i { height: 13px; width: 13px; margin: 4px; margin-bottom: 2px; } cgplo bsc>ft>bl d>i { margin: 0 5px; width: 14px; height: 14px; } cgplo bsc>ft>bl d { display: grid; grid-template-columns: 33px auto; font-size: 0.77em; align-items: center; padding: 4px 0; } cgplo bsc>bd>d>t { font-size: 0.88em; } cgplo bsc bl>ft>btn { padding: 11px; background: var(--aaa); display: block; border-radius: 5px; color: var(--b); margin-top: 22px; } d.notable>i { opacity: 0.4; } cgplo bsc bl>ft>btn>t { margin: 0; } cgplo { display: block; background: var(--bt); border: 1px solid var(--bc); margin-top: 22px; } cgplo>bd { display: block; padding: 22px; } gigplan>ft { display: block; padding: 22px; background: var(--bt); margin-top: 22px; border-radius: 5px; } cgplo basic, cgplo standard, cgplo premium { display: none; } cgplo.basic basic { display: block; } cgplo.standard standard { display: block; } cgplo.premium premium { display: block; } cgplo.basic btn.bsc { border-bottom: 2px solid var(--c); } cgplo.standard btn.stndrd { border-bottom: 2px solid var(--c); } cgplo.premium btn.prmim { border-bottom: 2px solid var(--c); } gigplan>hd>btns>btn { height: 22px; width: 22px; padding: 3px 10px; background: var(--bt); margin: 0 5px; border: 1px solid #dadbdd; border-radius: 5px; } cgplo.basic>bd { padding: 15px; } cgplo t { font-size: 0.88em; } cgplo>bd { display: block; padding: 22px; padding-bottom: 11px; } gigpost>h1 { overflow-wrap: break-word; padding-bottom: 16px; font-size: 1.44em; line-height: 130%; font-family: sans-serif; font-weight: 700; margin: 11px; margin-bottom: 0; } cgpo points { display: none; } /* Gig in phone version */ @media only screen and (max-width: 999px) { cgpo otherposts { display: none; } likedreviews { display: none; } gigplan.desktop { display: none; } cguo>hd>i { height: 40px; width: 40px; } caguo cguo { display: flex; flex-direction: column; } cgpo postimgs { margin: 11px 0; max-height: 266px; } cgpo { padding: 11px; } gigplan>hd>btns { display: none; } cgplo { margin: 11px; border-radius: 11px; } gigplan>ft { margin: 11px; } aboutuser { margin: 11px; } packages { display: none; } cgmo>hd { display: block; } cgpo points { display: flex; } cgpo>ft>bl { display: none; } sggo .phone { display: block; } caguo cguo>hd>i { height: 77px; width: 77px; margin: 22px; } caguo>bd>btn { margin: 11px auto; width: 66%; } caguo cguo d { justify-content: center; } sggo .desktop { display: none; } caguo cguo d i { height: 13px; width: 13px; margin: 4px; } cguo rated.phone { display: flex; margin-top: 11px; } cgfqo>bd { display: block; transition: 333ms; height: 0; visibility: hidden; overflow: hidden; } crco>bd { display: block; } crco trc>t:last-child { display: flex; justify-content: end; } crfo { width: auto; } cgfqo.FAQ>bd { height: 100%; visibility: visible; } } @media only screen and (min-width: 999px) { sggo .phone { display: none; } } /* Scroll points component */ points { display: flex; justify-content: center; } points>pnt { display: block; height: 11px; width: 11px; background: var(--bc); border-radius: 55%; margin: 4px; box-shadow: var(--bs); transition: 333ms; transform: scale(0.5); padding: 2px; } points>pnt:last-child { transform: scale(0.7); } points>pnt.this { transform: scale(0.77); background: var(--aaa); } /* Gig Post Slider */ .swiper { width: 100%; height: 200%; } /*.swiper-slide { display: flex; justify-content: center; align-items: center; } */ .Users-img img, .swiper-slide img { max-width: 400%; height: auto; } .stare img { width: 300px; margin-right: 5px; } /* Group screen in underoll media */ sgrpo ff mb btn { display: none; grid-template-columns: auto 33px; align-items: center; padding: 11px; font-weight: 600; } @media screen and (max-width: 630px) { sgrpo ff>ft>bl op { display: none; } sgrpo ff mb btn { display: grid; } a.Files { display: none; } } @media screen and (max-width: 600px) { a.Media { display: none; } } @media screen and (max-width: 530px) { a.Event { display: none; } } @media screen and (max-width: 450px) { a.People { display: none; } } @media screen and (max-width: 380px) { a.Featured { display: none; } } /* Gift Cards */ cgcso>hd { display: block; text-align: center; } cgcso { display: block; padding: 11px; background: var(--bt); border-radius: 11px 11px 0 0; margin: 11px; } cgfco { display: block; padding: 11px; max-width: 177px; text-align: center; min-width: 155px; } cgfco>t { display: block; padding: 11px; margin-top: 11px; padding-bottom: 0; font-weight: 500; } sgfcs bg.hd { display: none; } cgfcs { display: flex; align-items: center; padding: 22px; background: var(--b-t44); border-radius: 11px; box-shadow: inset -1px -11px 22px 0px rgb(0 0 0 / 7%), inset 0 1px 4px 0px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 2%); margin-bottom: 22px; overflow-y: auto; margin: 11px; } cgfco>i>img { height: 100%; width: 100%; object-fit: cover; } cgfco>i { display: block; border-radius: 55%; overflow: hidden; height: 88px; width: 88px; margin: auto; } cgcfo label>input { height: 16px; width: 16px; margin: 0; margin-right: 11px; } cgcfo label { display: flex; align-items: center; margin-bottom: 5px; } cgcfo { display: block; padding: 22px; } cgcfo>hd { display: block; margin-bottom: 11px; font-size: 1.22em; letter-spacing: 0.66px; } cgcfs { display: block; background: var(--bt); margin: 11px; border-radius: 11px; } crgco { display: grid; grid-template-columns: 77px auto; padding: 11px; background: var(--bt); box-shadow: var(--bs); border-radius: 11px; margin: 5px; flex: none; align-items: center; min-width: 333px; } sgfcs header { position: relative; } sgfcs d.aerea { flex-direction: unset; margin: 0; } crgcs { display: flex; align-items: center; overflow-y: auto; } crgco>bd>h6 { font-weight: 400; margin: 4px 0; font-size: 0.88em; } crgco>bd>d>btn { display: block; padding: 8px 22px; background: var(--aaa); border-radius: 5px; color: var(--b); } crgco ivc { display: flex; align-items: center; font-size: 0.77em; } crgco>bd>d { display: flex; align-items: center; justify-content: space-between; } crgco>bd>t { font-weight: 500; } crgco>hd>t { font-size: 0.55em; background: var(--aaa); height: 14px; justify-content: center; color: var(--b); display: flex; align-items: center; position: absolute; z-index: 99; bottom: 0; left: 0; right: 0; } crgco>hd>i { height: 80%; } crgco>hd>i>img { height: 100%; width: 100%; object-fit: cover; } crgco>hd { display: block; height: 77px; width: 66px; background: var(--bc); border-radius: 5px; overflow: hidden; position: relative; } crgco p { margin: 0; } ctgco { display: grid; max-width: 222px; background: var(--bt); box-shadow: var(--bs); border-radius: 11px; grid-template-rows: 230px auto; overflow: hidden; margin: 5px; flex: none; } ctgcs crds { display: flex; width: 100%; } ctgcs>bd { display: grid; overflow-y: auto; } ctgco>hd>i { height: 100%; overflow: hidden; border-radius: 11px 11px 0 0; } ctgco>ft>p { margin: 0; } ctgco>bd>t { font-weight: 600; } ctgco>bd { display: block; padding: 11px; padding-bottom: 0; } ctgcs { display: block; padding: 22px; background: var(--bc); margin: 11px; border-radius: 11px; } ctgco>hd>i>img { height: 100%; width: 100%; object-fit: cover; } ctgcs>hd { display: block; margin-bottom: 22px; } ctgco>ft { display: block; padding: 11px; padding-top: 0; } chco { display: grid; grid-template-columns: 45% 55%; align-items: center; border-radius: 11px; height: 99px; overflow: hidden; background: var(--bt); margin: 11px; box-shadow: inset 0px 1px 19px var(--bor); border: 1px solid var(--bc); } cgco d>p { margin: 0; font-size: 0.66em; opacity: 0.7; } chco>hd { display: block; background: var(--aaa); height: 100%; border-radius: 0 0 101%; border-right: 1px solid var(--bc); padding: 13px; } chco>hd>i { height: 77px; width: 77px; margin: auto; } chco>bd { display: flex; justify-content: space-around; } chco>bd>btn { display: block; padding: 11px 22px; background: var(--aaa); color: var(--b); text-align: center; border-radius: 55px; } sgfcs main { background: var(--bt); border-radius: 11px; margin-right: 11px; padding: 11px; margin-top: 11px; } coco>i { height: 100%; } cgcrs { display: grid; grid-template-columns: 33% 33% 33%; } @media screen and (min-width: 999px) { sgfcs main { width: 88%; max-width: unset; }} @media screen and (max-width: 999px) { chco>bd>h1 { display: none; } chco { display: grid; grid-template-columns: 56% 44%; } cgfcs { overflow-y: auto; } cgfco { min-width: 166px; } cgcso { display: none; } cgcfs { display: block; position: absolute; top: 0; left: -100%; width: 95%; } } /* Category's Gift Card component (Gift Cards) */ cgco { display: grid; max-width: 266px; background: var(--bt); box-shadow: var(--bs-bt); grid-template-rows: 150px auto auto; overflow: hidden; margin: 5px; flex: none; padding: 3px; } cgcs { display: flex; width: 100%; overflow-y: auto; padding-bottom: 22px; margin-bottom: 11px; border-bottom: 1px solid var(--bc); } cgco>hd>i { height: 100%; overflow: hidden; border-radius: 0; } cgco>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cgco>bd { display: block; padding: 11px; border-bottom: 1px solid var(--bc); } cgco>ft>h5 { font-size: 0.88em; font-weight: 500; letter-spacing: 0.88px; } cgco>ft { display: block; padding: 15px; } cgco name { display: block; } cgco bl>ht { border-left: 1px solid var(--bc); width: 0px; display: block; margin: 0 20px; } cgco>bd>bl h1 { font-weight: 400; font-size: 1.55em; letter-spacing: 0.88px; } cgco>bd>bl { display: flex; justify-content: center; } cgco bl>hd { text-align: end; } /* Shop by Occasion component */ cocs ocnc { display: grid; grid-template-columns: 25% 25% 25% 25%; } coco { display: block; margin: 5px; overflow: hidden; border-radius: 5px; box-shadow: var(--bs-b); position: relative; height: 133px; } coco>i>img { height: 100%; width: 100%; } cocs>hd { display: block; margin: 5px; margin-bottom: 0; box-shadow: var(--bs-b); border-radius: 5px; overflow: hidden; height: 55px; } cocs>hd>i { height: 100%; } cocs>hd>i>img { height: 100%; width: 100%; } @media screen and (max-width: 999px) { cocs ocnc { grid-template-columns: 50% 50%; } } /* Meeting sessions */ cmys trc ft>i { display: block; margin: auto; height: 33px; width: 33px; padding: 11px; position: relative; z-index: 9999; transition: 333ms; transform: rotate(90deg); } cmys trc.more ft>i { transform: rotate(-90deg); } /* Common css */ moreop { display: block; position: relative; } cmopo { display: block; position: absolute; z-index: 99; top: 80%; background: var(--b-t95); padding: 11px; border-radius: 11px; width: 149px; right: 18px; backdrop-filter: blur(20px); box-shadow: var(--bs-bt); transition: 33ms; transform: translate(0%, -5%); visibility: hidden; } cmopo>d { display: flex; position: relative; padding: 11px; border-radius: 5px; height: 33px; margin: 5px 0; align-items: center; } cmopo>d:hover { background: var(--hover); } .MoreOption cmopo { transform: translate(0%, 2%); visibility: visible; } @media screen and (min-width: 999px) { moreop { display: none; } } /* No Notificaction */ cnno { display: block; margin: 22px auto; padding: 22px; text-align: center; max-width: 333px; } cnno>hd { display: flex; justify-content: center; padding: 22px; } cnno>ft { font-size: 0.88em; margin: 7px; margin-bottom: 0; } /* Meeting controls */ .controlVideo i.video:after { content: " "; height: 27px; position: absolute; width: 2px; background: var(--b); top: 9px; bottom: 0; transform: rotate(148deg); right: 24px; border-radius: 22px; opacity: 0.7; box-shadow: -1px 0px 0px 1px #a9aaac; } .controlVideo i.video svg { opacity: 0.6; } .controlspeacker i.speacker:after { content: " "; height: 29px; position: absolute; width: 3px; background: var(--b); top: 9px; bottom: 0; transform: rotate(148deg); right: 22px; border-radius: 22px; opacity: 0.7; box-shadow: -1px 0px 0px 1px #a9aaac; } .controlspeacker i.speacker svg { opacity: 0.6; } .controlmute i.mute:after { content: " "; height: 27px; position: absolute; width: 3px; background: var(--b); top: 9px; transform: rotate(148deg); right: 22px; border-radius: 22px; opacity: 0.7; box-shadow: -1px 0px 0px 1px #a9aaac; } .controlmute i.mute svg { opacity: 0.6; } /* Zooom Pay Gift Card */ cpgco { display: block; background: var(--bt); border-radius: 11px; padding: 22px; margin: 11px; } cpgco trc { display: grid; grid-template-columns: 66px auto; padding: 11px; background: var(--bc); margin-bottom: 5px; align-items: center; border-radius: 11px; box-shadow: var(--bs-b); } cpgco trc>hd>i { height: 55px; width: 55px; } cpgco trc>bd d { display: flex; align-items: center; font-size: 0.88em; } cpgco trc>bd d>h6 { font-size: 0.88em; font-weight: 400; } cpgco>bd sl { background: none; margin: 0; height: auto; } cpgco>bd sl>input { border: 1px solid var(--bor); width: auto; margin-top: 11px; border-radius: 7px; font-weight: 400; font-size: 0.88em; letter-spacing: 0.88px; } cpgco>bd sl>h6 { font-weight: 400; opacity: 0.6; margin-left: 33px; } cpgco>bd { display: block; padding: 22px 22px; background: var(--bc); border-radius: 11px; margin-top: 5px; box-shadow: var(--bs-b); } cpgco>bd sl>t { font-weight: 500; } cpgco>bd>btn { padding: 11px 22px; display: block; background: var(--aaa); color: var(--b); border-radius: 33px; margin: 11px 0; text-align: center; width: fit-content; font-size : 0.88em; } cpgco>bd>d { display: flex; align-items: center; font-size: 0.88em; } cpgco>bd>d>i { height: 14px; width: 14px; margin: 6px; margin-left: 0; } cpgco>ft { display: block; padding: 22px; padding-bottom: 0; } cpgco>ft>a { font-weight: 500; } cpgco trc>bd d>t { font-size: 0.88em; } cadmo { display: block; padding: 22px; background: var(--bt); margin: 11px; border-radius: 11px; } cadmo>bd>btn { display: block; padding: 11px 22px; background: var(--bc); border-radius: 33px; font-weight: 400; font-size: 0.88em; width: fit-content; margin: 11px 0; } cadmo>ft>a { font-weight: 500; font-size: 0.88em; } cgts { display: block; padding: 22px; background: var(--bt); margin: 11px; border-radius: 11px; position: relative; } cgts>hd { display: flex; justify-content: space-between; align-items: center; } cgts>hd>i { height: 22px; width: 22px; } cardpay>h2 { margin: 11px; } /* Gift Cards Transactions */ cgtcs { display: block; background: var(--bt); box-shadow: var(--bs-b); } sgcto bg.hd { visibility: hidden; } cgtcs>hd { font-size: 0.88em; padding: 11px; display: block; border-bottom: 1px solid var(--bc); } cgtcs mg { display: flex; align-items: center; padding: 11px; padding-bottom: 0; } cgtcs mg>a { display: block; margin: 5px; font-weight: 500; font-size: 0.88em; padding: 7px; margin-bottom: 0; } cgtcs mg>a.this { border-bottom: 2px solid var(--c); } cgcts { display: block; margin: 11px; background: var(--bt); border-radius: 11px; overflow: hidden; } cgcto>bl { display: grid; grid-template-columns: 66px auto 99px; padding: 11px; margin-bottom: 5px; border-bottom: 1px solid var(--bc); align-items: center; border-radius: 0px; background: transparent; } cgcto:last-child>bl { margin: 0; border: none; } cgcto.inf bl>ft>btn { transform: rotate(-90deg); } cgcto>bl time { display: block; font-size: 0.77em; margin-top: 2px; letter-spacing: 0.44px; } cgcto>bl>bd>t { font-weight: 500; } cgcto>bl>hd>i { height: 55px; width: 55px; } cgcto>bl>ft { display: flex; align-items: center; justify-content: end; } cgcto>bl>ft>btn { height: 44px; width: 44px; transition: 99ms; transform: rotate(90deg); display: block; place-content: center; align-content: center; } cgcto>inf p { margin: 0; } cgcto>inf>d { display: flex; align-items: center; letter-spacing: 0.33px; } cgcto>inf { display: flex; align-items: center; justify-content: center; height: 0px; visibility: hidden; padding: 0; transition: 333ms; } cgcto.inf>inf { height: 100%; padding: 11px; visibility: visible; padding-bottom: 18px; } cctfo label { display: flex; align-items: center; padding: 5px; font-size: 0.88em; padding-left: 0; } cctfo>bd>bl h4 { font-weight: 500; font-size: 0.88em; } cctfo label>input { height: 14px; width: 14px; margin: 5px; margin-left: 0; } cctfo>bd { display: block; padding: 11px 22px; } cctfo { display: block; background: var(--bt); border-radius: 11px; } cctfo>hd { display: flex; justify-content: space-between; align-items: center; padding: 22px; border-bottom: 1px solid var(--bc); } cctfo>bd>bl { display: block; margin-bottom: 11px; } cgcbo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin-bottom: 11px; margin-top: 11px; } cgcbo>hd { display: flex; align-items: center; justify-content: space-between; font-size: 0.88em; } cgcbo>hd>d { display: flex; align-items: center; } cgcbo>hd>d>btn { height: 22px; width: 22px; display: block; place-content: center; align-content: center; padding: 4px; transform: rotate(90deg); transition: 99ms; } cgcbo>bd>d { display: flex; justify-content: space-between; margin-bottom: 5px; padding: 4px 0; } cgcbo>ft>a { font-weight: 400; color: var(--a); font-size: 0.77em; } sgcto refunds { display: block; width: 70%; overflow: hidden; max-width: 777px; } smno .noti>ft>a { position: unset; } refunds>main { width: 100%; max-width: unset; } cgcbo.hide>bd { height: 0; visibility: hidden; } cgcbo>bd { height: 100%; transition: 333ms; visibility: visible; display: block; } cgcbo.hide>hd>d>btn { transform: rotate(-90deg); } @media screen and (max-width: 999px) { cgcbo { margin: 11px; } cctfo { margin: 11px; } cgcts { margin: 0; } } /* Dashboard */ @media screen and (min-width: 999px) { db2 main { width: 88%; max-width: 877px; } db2 sidebar { width: 50%; } } /* User Overview component */ cuoo { display: block; background: var(--bt); padding: 22px; border-radius: 11px; box-shadow: var(--bt-bx); } cuoo>hd>d>btn { display: block; grid-template-columns: 28px auto; padding: 7px; border-radius: 5px; background: var(--bc); } cuoo>hd { display: flex; justify-content: space-between; } cuoo>hd btn>i { height: 22px; width: 22px; } cuoo bl>d>hd>i { height: 19px; width: 19px; margin-right: 11px; } cuoo>hd>d { display: flex; align-items: center; } cuoo bl>d>hd { display: flex; align-items: center; font-weight: 500; } cuoo bl>d { display: grid; grid-template-columns: auto 33px; align-items: center; padding: 11px; margin-bottom: 5px; border-bottom: 1px solid var(--bc); opacity: 0.8; } cuoo>ft>btn { display: block; text-align: center; margin: 0; margin-bottom: 0; background: var(--aaa); border-radius: 5px; padding: 11px; place-content: center; color: var(--b); font-weight: 500; } cuoo>bd>bl { padding: 11px 0; } cuoo>hd date { font-weight: 500; padding: 7px; margin: 5px; } cuoo bl>d>hd>i:last-child { height: 16px; width: 16px; margin: 0; margin-left: 7px; opacity: 0.6; } cuoo bl>d:last-child { border: none; } @media screen and (max-width: 999px) { cuoo { margin: 11px; } } /* Global component */ cusalv { display: grid; } cusalv clvls { width: 100%; display: flex; overflow-x: scroll; padding: 11px; padding-top: 0; } cusalv clvlo { display: block; overflow: hidden; position: relative; flex: none; margin: 5px; background: var(--bt); padding: 22px; border-radius: 11px; min-width: 211px; box-shadow: var(--bt-bx); transition: 95ms; } cusalv clvlo:active { transform: scale(0.99); } clvlo>hd { display: flex; justify-content: space-between; align-items: center; font-size: 0.88em; } clvlo>bd>i { height: 18px; width: 18px; padding: 11px; background: var(--bt); border: 1px solid var(--bc); border-radius: 55%; box-shadow: var(--bt-bx); } clvlo>bd { display: flex; align-items: center; margin-top: 15px; } clvlo>hd>i { height: 22px; width: 22px; } clvlo>bd>h3 { margin-left: 11px; font-size: 1.44em; } clvlo>hd>t { opacity: 0.7; } clvlo>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Profits component */ ctbds>hd { display: grid; position: relative; grid-template-columns: 44px auto; align-items: center; margin-bottom: 5px; } ctbds ctbdo>bd>h3 { font-weight: 500; letter-spacing: 0.44px; } ctbds ctbdo>hd>i { height: 22px; width: 22px; margin: auto; } ctbds ctbdo>hd { display: grid; grid-template-columns: auto 33px; align-items: center; margin-bottom: 11px; } ctbds ctbdo>bd { border-radius: 22px; padding: 16px 22px; background: var(--b-t88); display: block; text-align: center; margin-top: 5px; } ctbds>bd { display: grid; grid-template-columns: 40% 30% 30%; margin: 11px; } ctbds ctbdo { display: block; position: relative; background: var(--bc); border-radius: 22px; padding: 22px; box-shadow: var(--bs); margin: 4px; } ctbds ctbdo>hd>h4 { font-size: 0.88em; font-weight: 500; } ctbds { display: block; background: var(--bt); padding: 11px; border-radius: 22px; margin: 11px; } ctbds ctbdo:hover { background: var(--aat); } /* Curent Users component */ ccrus>ccruo { display: grid; background: var(--b-t); margin: 5px 11px; padding: 11px; grid-template-columns: 88px auto 0px; border-radius: 11px; position: relative; overflow: hidden; } ccruo>hd>i { height: 66px; width: 66px; border-radius: 11px; overflow: hidden; background: var(--bc); margin: 7px; } ccruo name { font-weight: bold; display: grid; grid-template-columns: auto 44px; justify-content: space-between; align-items: center; margin-bottom: 7px; } ccruo name>i { height: 22px; width: 22px; margin-left: auto; } ccrus>ccruo>bd { display: flex; flex-direction: column; justify-content: center; } ccruo>bd>d { display: flex; justify-content: space-between; } ccruo>bd>d>h5 { font-size: 0.88em; font-weight: 500; } ccruo>bd>d>t { font-size: 0.88em; } ccruo>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Dashboard Wallet component */ cwlts bl>hd>d { display: grid; grid-template-columns: 44px auto; align-items: center; font-weight: bold; } cwlts h2 { font-size: 1.66em; } cwlto>bd { background: var(--b-t88); padding: 14px 22px; border-radius: 11px; text-align: center; } cwlto>hd>h4 { font-weight: 500; } cwlto { display: block; padding: 22px; margin: 5px; background: var(--bc); border-radius: 22px; position: relative; transition: 333ms; } cwlto>hd { display: grid; grid-template-columns: auto 33px; align-items: center; margin-bottom: 7px; } cwlto:hover { background: var(--aat); } /* Alert User component */ caluo { display: grid; grid-template-columns: 66px auto auto; padding: 22px; background: var(--bt); border-radius: 11px; box-shadow: inset 0 -4px 7px 0px rgb(0 0 0 / 0%), inset 0 1px 7px 0px rgb(0 0 0 / 0%), 0 7px 11px rgb(0 0 0 / 6%); align-items: center; margin: 14px; margin-bottom: 11px; } caluo>ft>btn { display: block; padding: 11px 22px; text-align: center; background: var(--aaa); color: var(--b); border-radius: 33px; font-size: 0.8em; } caluo>hd>i>svg { height: 22px; width: 22px; fill: var(--b); } caluo>hd>i { height: 44px; width: 44px; padding: 2px; background: var(--c); border-radius: 55%; } caluo>bd>p { margin: 0; margin-top: 4px; line-height: 1.44em; font-weight: 500; overflow: hidden; display: block; -webkit-line-clamp: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } caluo>ft { display: flex; justify-content: end; } caluo>bd>t { font-weight: 500; } /* Dashboard Meeting subscription */ smtss>hd>bl { display: grid; grid-template-columns: 44px auto 44px; align-items: center; padding: 11px; margin-bottom: 22px; } smtss>hd>bl>hd>i { height: 22px; width: 22px; } smtss>hd>bl>ft>btn { display: block; height: 33px; width: 33px; background: var(--bt); place-content: center; border-radius: 55%; padding: 5px; box-shadow: var(--bt-bx); } smtss>hd>bl>bd>h4 { font-weight: 500; } smtss>hd>bl>bd>t { font-size: 0.88em; } smtss { display: block; padding: 11px; background: var(--bt); border-radius: 22px; margin: 11px; } smtss cmco { box-shadow: 0 11px 11px 0px rgb(0 0 0 / 1%), 0 1px 11px 0px rgb(0 0 0 / 1%), 0 11px 2px rgb(0 0 0 / 1%); } /* Dashboard Meeting Session */ smtss cmys trc { box-shadow: var(--bt-bx); } /* Servis Categories component */ czso { display: grid; grid-template-rows: 66px auto; text-align: center; min-width: 88px; max-width: 88px; background: var(--bt); border-radius: 11px; margin: 5px; padding: 22px; } czss { display: flex; overflow-x: auto; padding: 11px; } czso>hd>i { height: 44px; width: 37px; margin: auto; margin-top: 7px; } cauo>hd>bl { display: flex; flex-direction: column; align-items: center; } cauo>hd>bl name { margin: 22px; } /* Reels */ /* Add meeting subscription */ crmso { display: block; text-align: center; border-radius: 11px; margin: 11px; padding: 22px; border: 1px dashed var(--c); position: relative; } crmso>bd { position: relative; } crmso>hd>i { display: block; height: 88px; width: 88px; margin: 22px auto; margin-bottom: 11px; } crmso>bd>t { background: var(--aaa); text-decoration: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 1.22em; } crmso>bd>p { margin: 4px 16px; font-size: 0.77em; line-height: 1.44em; margin-top: 11px; } crmso>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* QR code component */ cqro { display: block; padding: 22px; margin: 7px; background: var(--bt); border-radius: 11px; } cqro>hd { display: flex; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--bc); } cqro>hd>btn { display: flex; height: 44px; width: 44px; border-radius: 5px; padding: 4px; align-items: center; justify-content: center; } cqco { display: block; padding: 22px 0; border-bottom: 1px solid var(--bc); } cqco p { margin: 0; } cqco>bd>qr { display: block; height: 188px; width: 188px; margin: 22px auto; padding: 7px; border-radius: 11px; border: 2px dashed; } cqro p { font-size: 0.77em; } cqco>hd>t { color: var(--a); font-weight: 600; letter-spacing: 0.44px; } ceco>hd>t { color: var(--a); font-weight: 600; letter-spacing: 0.44px; } cqco>bd>qr i mg { height: 100%; width: 100%; object-fit: cover; } cqco>bd>qr>i { height: 100%; width: 100%; overflow: hidden; border-radius: 11px; } cqco>ft>d { display: flex; align-items: center; margin: 11px 0; } cqco>ft>d>input { height: 22px; border-radius: 5px; background: var(--bc); padding: 11px; margin: 0; font-size: 16px; width: auto; } cqco>ft>d>btn { display: flex; padding: 5px; height: 33px; width: 33px; align-items: center; justify-content: center; margin: 5px; background: var(--aaa); border-radius: 5px; } cqco>ft>d>btn path { fill: var(--b); } ceco p { margin: 0; } cqco>ft>d>btn svg { fill: var(--b); height: 22px; width: 22px; } cqco>ft>d { display: grid; align-items: center; margin: 11px 0; grid-template-columns: auto 55px; } ceco>ft>btn { display: block; padding: 11px; border: 1px solid var(--c); border-radius: 11px; width: fit-content; font-size: 0.88em; } cqro txt>t { font-size: 0.77em; } ceco code { display: flex; margin: 22px 0; } ceco code>input { width: 44px; border-radius: 11px; height: 55px; margin: 4px; background: transparent; border: 1px solid var(--bc); text-align: center; transition: 99ms; padding: 0; } cqro>ft btn.this>t { color: var(--b); } ceco code>input:focus { border: 1px solid var(--a); box-shadow: 0 0 1px 1px var(--a); } cqro>ft>btns { margin: 0; width: auto; display: flex; justify-content: space-between; } cqro>ft btn>i { height: 22px; width: 22px; margin-right: 11px; } cqro>ft>btns>btn { display: flex; align-items: center; padding: 11px 15px; margin: 4px; height: auto; border: 1px solid var(--bc); font-size: 0.88em; border-radius: 5px; } cqro>ft btn.this { background: var(--aaa); border: none; color: var(--b); } cqro>ft { padding-top: 11px; border-top: 1px solid var(--bc); display: block; } ceco { display: block; padding: 22px 0; } /* Popular Items */ cpis { display: block; background: var(--bt); padding: 11px; margin: 11px; border-radius: 22px; } cpis sl { display: grid; grid-template-columns: 55px auto 55px; position: relative; height: 55px; background: var(--bc); border: none; border-radius: 26px; align-items: center; padding: 0 4px; width: auto; } cpis sl>input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: transparent; padding: 0 44PX; font-size: 0.88em; width: auto; height: auto; } cpis sl>btn:last-child { grid-column-start: 3; } cpis sl>btn { display: flex; position: relative; z-index: 99; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; } cpis sl>input:focus { border-radius: 33px; } cpis d { display: flex; justify-content: space-between; align-items: center; padding: 11px; } cpito { display: block; height: 155px; width: 155px; margin: 4px; overflow: hidden; border-radius: 22px; } cpito>i { height: 100%; width: 100%; } cpito>i>img { height: 100%; width: 100%; object-fit: cover; } cpito { display: block; height: 155px; width: 155px; margin: 4px; overflow: hidden; border-radius: 22px; flex: none; } cpis itms { display: flex; align-items: center; overflow-y: auto; margin-top: 22px; } /* add friends component */ cadfo bg { display: block; position: relative; background: var(--lg-b); border-radius: 55%; height: 66px; width: 66px; margin: auto; } cadfo>hd btn { align-items: center; justify-content: center; height: 62px; width: 64px; border-radius: 55%; margin: auto; margin-top: 2px; display: flex; background: var(--bt); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } cadfo>bd>t { margin: 22px; display: block; margin-bottom: 0; letter-spacing: 0.88px; } cadfo { display: flex; padding: 22px; background: var(--bt); justify-content: center; max-width: 186px; margin: 5px; border-radius: 22px; height: 177px; align-items: center; flex-direction: column; border: 1px dashed; min-width: 152px; } /* View Profile */ cvepo bl>hd>i { height: 55px; width: 55px; border-radius: 55%; overflow: hidden; } cvepo bl>hd>ov { height: 22px; width: 22px; display: block; top: -11px; position: relative; margin: auto; } cvepo bl>hd { display: flex; flex-direction: column; justify-content: center; align-items: center; } cvepo bl>hd>i { height: 55px; width: 55px; border-radius: 55%; overflow: hidden; } cvepo bl>hd>ov { height: 22px; width: 22px; display: block; top: -11px; position: relative; } csts>hd { display: flex; overflow-y: auto; } cvepo bl { display: flex; background: var(--b); border-radius: 22px; padding: 22px; text-align: center; flex-direction: column; align-items: center; height: 177px; } cvepo bl>bd>t { font-size: 0.88em; display: block; letter-spacing: 0.44px; opacity: 0.6; } cvepo bg { position: relative; background: var(--lg-b); border-radius: 22px; margin: 5px; padding: 1px; } cvepo bl>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cvepo btn { height: auto; padding: 4px 11px; width: fit-content; border-radius: 33px; font-size: 0.8em; color: var(--c); font-weight: 400; background: var(--bc); margin: 11px; margin-bottom: 0; display: block; } cvepo { display: block; max-width: 243px; min-width: 222px; } /* Setting component */ csto { display: grid; grid-template-columns: 55px auto 44px; padding: 11px; align-items: center; background: var(--bt); margin: 5px; border-radius: 44px; } csto>hd { height: 38px; width: 38px; display: flex; justify-content: center; align-items: center; background: var(--bc); border-radius: 55%; padding: 5px; } csto>ft>i { height: 22px; width: 22px; margin: auto; } /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ /* payment method component - 1 */ cpymo { display: block; padding: 11px; margin: 11px; background: var(--bt); border-radius: 22px; } cpyso { display: block; padding: 22px; background: var(--b1); border-radius: 22px; text-align: center; } cpyso>hd { display: block; margin: 22px; margin-top: 0; } cpyso h4 { display: flex; justify-content: center; padding: 11px; letter-spacing: 0.88px; font-size: 23px; } cpydo>hd { display: flex; align-items: center; justify-content: space-between; } cpydo>hd>i { display: block; height: 22px; width: 22px; } cpydo d { display: flex; justify-content: space-between; margin-bottom: 7px; white-space: nowrap; } cpydo d>cc { opacity: 0.5; } cpydo pd>d>c { display: flex; align-items: center; } cpydo pd>d>c>i { height: 15px; width: 15px; margin: 5px; } cpydo>bd { padding: 11px 0; display: block; border-bottom: 1px dashed var(--bc); } cpydo>ft { display: block; padding: 11px 0; } cpydo { display: block; padding: 22px; background: var(--bt); border-radius: 22px; margin-top: 11px; } cpydo d:last-child { margin: 0; } cpyto { display: grid; grid-template-columns: 55px auto 44px; align-items: center; background: var(--bt); border-radius: 22px; margin-top: 11px; padding: 22px; } cpyto>bd>p { margin: 0; font-size: 0.77em; } cpyto>bd>t { font-size: 0.88em; font-weight: 500; } cpyto>ft>i { display: block; height: 22px; width: 22px; margin-left: auto; } cpyto>hd>i { height: 28px; width: 28px; padding: 10px; background: var(--bc); border-radius: 55%; } cpyso>hd>i { height: 44px; width: 44px; margin: auto; border-radius: 55%; background: #d8f7d89c; padding: 7px; box-shadow: 0 0 0 2px #c6f3c659; } cpyro { display: block; padding: 11px; margin: 11px; background: var(--bt); border-radius: 22px; } cpyro>ft>btn { display: grid; grid-template-columns: 33px auto; align-items: center; padding: 11px; margin-top: 22px; height: auto; color: var(--b); letter-spacing: 0.66px; font-weight: 400; background: var(--aaa); border-radius: 11px; justify-content: center; } cpyro>ft>btn svg { fill: var(--b); } cpro>bd { display: block; border-bottom: 1px solid var(--bc); padding-bottom: 22px; } cpydo d h5 { display: block; letter-spacing: 0.88px; font-size: 1.22em; font-weight: 400; } cpydo d h5>b { font-weight: 400; } cpydo pd>d>c>t { font-size: 0.88em; letter-spacing: 0.88px; font-weight: 400; } cpyro cpso { background: transparent; } cpyro cpydo { background: transparent; } cpyso>bd>h2 { letter-spacing: 0.88px; font-weight: 500; } rop>btns { display: flex; justify-content: space-between; align-items: center; } rop>btns>btn { display: flex; height: 33px; width: 33px; padding: 3px; border-radius: 55%; background: transparent; border: 1px solid var(--bc); margin: 11px; align-items: center; justify-content: center; } cctbo>c, cctbo>dd { display: none; } /* Cut Border component */ cctbo { display: flex; align-items: center; margin: 11px 0; position: relative; } cctbo>d { display: block; height: 1px; width: 90%; border-bottom: 2px dashed; margin: auto; color: var(--bc); } cctbo>c { display: block; height: 33px; background: var(--b); width: 33px; margin: 3px; border-radius: 55%; position: absolute; left: -35px; } cctbo>dd { display: block; height: 33px; background: var(--b); width: 33px; margin: 3px; border-radius: 55%; position: absolute; right: -33px; } /* Reciept */ crpo cpro>ft>btn { background: transparent; } crpo cpydo pd { display: grid; grid-template-columns: 50% 50%; } crpo cpydo { padding: 11px; } crpo cpydo d { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 7px; margin: 5px; font-size: 0.77em; } crpo cpydo pd>d>c { font-size: 15px; margin-top: 5px; } crpo cpro { border-radius: 22px 22px 0 0; position: relative; padding-bottom: 33px; } cbgs { display: flex; position: absolute; bottom: -14px; left: 0; right: 0; } cbgs>d { display: block; height: 22px; width: 22px; background: var(--b); margin: 5px; border-radius: 55%; } /* User Control on Dashboard component */ cuco { display: grid; grid-template-columns: 66px auto auto; margin-top: 5px; padding: 11px 0; align-items: center; border-bottom: 1px solid var(--bc); } cucs { display: block; padding: 22px; background: var(--bt); margin: 11px; border-radius: 11px; } cuco>hd>i { height: 55px; width: 55px; border-radius: 55%; overflow: hidden; } cuco>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cuco>bd>d>t { font-size: 0.88em; } cuco>bd { display: flex; justify-content: space-between; align-items: center; } cuco>bd>dt { display: block; padding: 4px 11px; background: var(--bc); border-radius: 22px; font-size: 0.88em; font-weight: 500; margin-right: 11px; } cuco>ft>ct { display: flex; align-items: center; } cuco bb { position: unset; width: 40px; height: 22px; color: var(--aa); } cucs.oo bb { box-shadow: inset 60px 0px 0px; color: var(--aa); } cucs.oo oo { margin-left: 18px; background: var(--b); } cuco>ft { display: flex; justify-content: end; } cuco bb oo { background: var(--aaa); height: 18px; width: 20px; margin-left: 1px; } cucs>ft>btn { display: grid; grid-template-columns: 33px auto; align-items: center; padding: 11px; padding-bottom: 0; margin-top: 11px; } cucs>bd { display: block; margin-top: 11px; } /* Skills Board */ csbo { display: block; padding: 22px; border-radius: 11px; background: var(--bt); margin: 11px; } csbo>hd>select { display: block; height: auto; width: auto; padding: 0; background: transparent; border: none; } csbo>hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; } csbo clm>ds { display: flex; flex-wrap: wrap; } csbo ds>d { display: block; padding: 19px; background: var(--bc); border-radius: 55%; margin: 4px; box-shadow: inset -2px -3px 27px rgb(247 247 247 / 6%), inset -2px -2px 5px #011b781f; } csbo ds>d.fill { background: var(--aaa); box-shadow: unset; } csbo clm { display: grid; grid-template-columns: auto 41px; align-items: center; } csbo>ft { display: flex; justify-content: space-between; padding: 22px 5px; padding-bottom: 0; width: 77%; } /* Next Button component */ cnxo { display: flex; padding: 11px; justify-content: end; } cnxo>btn { display: block; padding: 11px 22px; margin: 11px; background: var(--aaa); border-radius: 11px; color: var(--b); width: max-content; height: 33px; place-content: center; position: relative; } cnxo>btn>a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /* Account2nd */ /* Enter Splash Panel */ cento>bd>i { height: 66%; width: 66%; margin: auto; transition: 333ms; animation: oscillate 5s linear infinite; } cento>ft>.btn { display: block; text-align: center; padding: 17px; background: var(--b-t); color: var(--c); font-weight: 600; letter-spacing: 0.88px; border-radius: 36px; margin: 22px auto; max-width: 66%; height: auto; } #account>bd { display: block; overflow: hidden; overflow-y: hidden; max-height: calc(100% - 0px); height: 100%; } cento { display: grid; height: 100%; } #account { display: block; position: relative; z-index: 2; overflow: hidden; height: 100%; } #AccountRegular { display: grid; grid-template-columns: 100% 100% 100%; height: 100%; } cento name>h2 { font-size: 2.33em; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; letter-spacing: 1px; } enter>bg.strc { background: 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%; } cento>ft:after { content: ""; position: absolute; bottom: 0; left: -18px; top: 0; right: 19px; background: var(--b-t44); z-index: -1; filter: blur(46px); opacity: 0.3; border-radius: 55%; } enter>bg.strc:after { content: ""; position: absolute; display: block; height: 44%; width: 44%; top: 51%; background: url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp); animation: Flow 5s linear infinite; } cento>hd { display: none; } enter>bg>img { position: unset; height: 100%; width: 100%; } enter { display: none; grid-template-rows: 60% 40%; overflow-y: auto; scroll-behavior: smooth; position: relative; height: 100vh; } cwaco { display: block; max-width: 333px; margin: auto; text-align: center; color: var(--b); } .enter enter { display: grid; } enter>ext svg { fill: var(--b); } enter out>i>svg { fill: var(--b); } enter>hd>cvr { display: block; background: var(--aa); margin: 11px; border-radius: 22px; padding: 22px; height: 88%; position: relative; overflow: hidden; } cento>ft>btns { display: grid; grid-template-columns: 84% 66px; padding: 11px; } cento>bd { display: block; padding: 22px; padding-bottom: 0; } cento>bd>p { margin: 0; } enter>hd>cvr>bg { background: url(/0/IMG/Noise.webp); background-size: 100%; } enter>hd>cvr>i { height: 100%; } enter>hd>bg>img { height: 100%; width: 100%; } enter ext svg { fill: var(--b); } cento btns>.btn { border: unset; height: 55px; font-size: 1em; font-weight: bold; background: var(--bc); color: var(--c); box-shadow: var(--bs-b); border-radius: 11px; padding: 0; display: block; text-align: center; place-content: center; margin: 0 5px; width: auto; border: 0.4px solid var(--bc); } cento btns>btn:first-child { background: var(--aaa); color: var(--b); } cento>bd>h2 { font-size: 1.99em; line-height: 1.44em; } @media screen and (min-width: 999px) { cento>bd>i { height: 55%; width: 55%; } enter { height: 75vh; } enter { display: none; grid-template-columns: 50% 50%; } enter>hd { grid-row-start: 1; grid-row-end: 3; } enter>bd { grid-row-start: 1; grid-row-end: 3; } cento { display: block; place-content: end; height: 98%; } enter ext svg { fill: var(--c); } } /* Onboarding */ character { display: none; } cchro>bd { display: block; padding: 11px 0; } cchro>hd>logo { display: block; height: 44px; width: 29px; margin: 11px; place-content: center; margin-left: 0; } cchro { display: block; position: relative; } cchro>bd>form { position: relative; } cchro form>d { display: grid; grid-template-columns: 44px auto; align-items: center; border: 1px solid var(--bc); margin: 11px 0; position: relative; padding: 11px; border-radius: 33px; } cchro sl>i>svg { opacity: 0; fill: var(--b); transition: 99ms; } cchro form>d>input { position: absolute; margin: 0; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; opacity: 0; } cchro form>d>sl { height: auto; width: auto; background: transparent; margin: 0; } cchro form>d>sl>i { display: block; height: 11px; width: 11px; border: 1px solid var(--bor); border-radius: 55%; margin: 4px; padding: 5px; } cchro { display: block; position: relative; padding: 44px 0; height: 100%; } cchro>bg { height: 30%; transition: 99ms; background: var(--aaa); color: var(--b); position: absolute; overflow: visible; top: unset; bottom: 9%; text-align: center; display: grid; grid-template-rows: 88px 55px auto; border-radius: 22px 22px 0 0; } cchro>bg>p { grid-row-start: 2; padding: 11px; } character>hd { display: flex; justify-content: space-between; align-items: center; } cchro>bg>img { position: absolute; top: -88px; width: 166px; height: 166px; left: 0; right: 0; opacity: 1; margin: auto; animation: oscillate 5s linear infinite; } cchro>bg:after { content: ""; background: url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp), url(/0/IMG/0Stars.webp); background-repeat: repeat; background-size: 100%; background-position: 100% 100%; animation: Flow 3s infinite; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } cchro>hd, cchro>bd { display: block; padding: 11px; } cchro>ft>btn.btn { height: auto; padding: 11px; max-width: 222px; } @media only screen and (min-width: 999px){ character { overflow-y: auto; scroll-behavior: smooth; } cchro>bg { border-radius: 22px; margin: 11px; bottom: 0; height: auto; } } cchro form>d.this i>svg { opacity: 1; } cchro form>d.this i { background: var(--aaa); } /* registered successfull */ crgdo { display: block; padding: 22px; max-width: 333px; margin: 22px auto; text-align: center; background: var(--btn2); box-shadow: 0 0 4px 3px var(--bc), 0 0 11px 6px var(--bc); border-radius: 23px; position: relative; color: var(--b); } crgdo>ft>a { color: var(--b); } crgdo>hd>i { height: 33%; width: 33%; margin: 22px auto; margin-top: 0; } crgdo>bg { background: rgb(255 255 255 / 35%); border-radius: 22px; top: 3%; right: 3%; left: 3%; bottom: 3%; } crgdo>ft>btn.btn { background: var(--b); padding: 11px 22px; font-size: 0.88em; color: var(--c); margin: 11px auto; display: block; height: auto; max-width: 55%; margin-top: 22px; } rgstrsuccess { display: none; justify-content: center; align-items: center; } .Registered rgstrsuccess { display: flex; } /* CSS for designes improve */ cman:hover { background: var(--hover); } cman:active { transform: scale(0.98); } cartfill input:focus { border: solid 2px var(--aa); } cartfill .group { display: grid; border: 1px solid var(--bc); border-radius: 5px; } cartfill .group>select { border: none; } cartfill label { opacity: 1; font-weight: 500; padding: 0 7px; } ccpo>bd btn:hover { background: var(--hover); } out { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; margin: 11px; } skip { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; margin: 11px; font-weight: 500; } /* Gig New 's buggs and design improved css */ @media screen and (max-width: 999px) { sgn ovrw { display: block; padding: 11px; margin: 11px; } sgn ovrw>bl { padding: 11px; margin: 0; } sgn ovrw bl>ft { display: none; } } sgpo>h2 { margin: 11px; margin-top: 22px; } /* Notes component */ cntss { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } cntso { display: grid; grid-template-columns: 33px auto 88px; padding: 11px; margin-bottom: 5px; border-bottom: 1px solid var(--bc); } cntss>hd { display: flex; justify-content: space-between; align-items: center; } cntso>hd>input { height: 15px; width: 15px; margin: 4px auto; } cntso>bd>t { font-weight: 500; } cntso>bd>p { margin: 0px; white-space: nowrap; width: 88%; overflow: hidden; text-overflow: ellipsis; } cntso>bd>btns { display: flex; padding: 11px 0; } cntso btns>btn { display: block; padding: 7px 22px; background: var(--aaa); color: var(--b); border-radius: 33px; margin: 4px; font-size: 0.88em; } cntso time { display: grid; grid-template-columns: 33px auto; align-items: center; } cntso>ft { display: flex; align-items: end; } /* Common css */ db2 grid { grid-template-columns: 50% 50%; } db2 sidebar { width: 100%; max-width: 366px; } @media screen and (max-width: 999px) { db2 grid.prs { display: block; } db2 grid { display: block; } db2 sidebar { width: auto; max-width: unset; } } /* web footer component */ cwblo links>bl>a { font-weight: 500; display: block; padding: 5px; margin-bottom: 5px; font-size: 0.88em; } cwblo links>bl>h4 { display: block; padding: 11px 4px; } cwblo>links { display: grid; grid-template-columns: 20% 20% 20% 40%; } cwblo links>bl>d { display: block; padding: 7px 0; margin: 7px 0; } cwblo links>bl>d>sl { display: flex; background: transparent; align-items: center; width: auto; margin: 0; } cwblo links d>sl>input { background: var(--bc); border-radius: 11px; width: 60%; font-size: 0.77em; font-weight: 500; letter-spacing: 0.44px; } cwblo links sl>btn { display: block; padding: 11px 22px; background: var(--aaa); color: var(--b); height: auto; margin: 0 11px; border-radius: 11px; } cwblo links>bl>d>i { height: 118px; width: 133px; box-shadow: 0 1px 10px 0px rgb(45 140 255 / 8%), 0 1px 4px 0px rgb(45 140 255 / 8%), 0 0px 0px rgb(45 140 255 / 8%); border-radius: 11px; overflow: hidden; } cwblo links d>i { height: 100%; width: 100%; object-fit: cover; } cwblo links d p { margin: 0; margin-bottom: 6px; font-size: 0.77em; opacity: 0.9; } cwbao { background: var(--aaa); justify-content: space-between; color: var(--b); display: grid; grid-template-columns: 50% 50%; align-items: center; padding: 33px 22px; border-radius: 11px; position: relative; margin-top: 33px; } cwbao>bd { display: flex; justify-content: end; position: relative; } cwbao>bd>btn { display: block; padding: 15px 22px; background: var(--b); border-radius: 11px; color: var(--c); min-width: 39%; text-align: center; font-weight: 700; max-width: 39%; margin-left: auto; margin-right: 44px; } cwbao>bg { justify-content: end; background: url(/0/img/PIPcircule.png); opacity: 0.4; background-size: 100%; z-index: 0; } cwbao>hd>p { color: var(--b-t); } cwbao>hd>h2 { font-weight: 400; font-size: 1.44em; } cwblo>links>bl { display: block; margin: 7px; padding: 7px; } cwbao:before { content: ""; position: absolute; top: -99px; bottom: 0; right: 22px; height: 155px; width: 155px; background: url(https://zoooom.aliens.services/0/IMG/Vesion.png); background-size: 100%; display: block; z-index: 9; } @media screen and (max-width: 999px) { cwblo>links { grid-template-columns: 33% 34% 33%; } cwblo>links>bl:last-child { grid-column-start: 1; grid-column-end: 4; } cwbao { display: block; padding: 22px; } cwbao>bd { display: block; } cwfo { padding: 11px; margin: 7px; } cwbao>bd>btn { max-width: unset; margin: 0; } cwbao:before { display: none; } } /* Unique Splash */ cgspo>* { max-width: 555px; width: 100%; margin: 0 auto; } csplo { display: grid; grid-template-rows: 8vh 422px 20% 77px auto; background: linear-gradient(49deg, rgb(236, 124, 148), rgb(236, 124, 148), rgb(236, 124, 148), rgb(236, 124, 148), rgb(236, 124, 148)); height: 100%; transition: 999ms; position: absolute; z-index: 999; inset: 0; backdrop-filter: blur(20px); opacity: 0; visibility: hidden; } csplo>hd { position: relative; display: block; height: 100%; } bg.ripple { height: 100%; border-radius: 55px; margin: 22px auto; width: 100%; z-index: 999; max-width: 444px; } bg.ripple>layer { display: block; height: 79%; width: 79%; border: 40px solid; border-radius: 55%; position: absolute; inset: 0; border-color: rgb(202 202 202 / 14%); box-shadow: 0 0 19px 6px var(--bc); } bg.ripple>.layer2 { height: 64%; width: 64%; margin: auto; z-index: 99; border-color: rgb(202 202 202 / 28%); } bg.ripple>.layer3 { height: 46%; width: 46%; margin: auto; border-color: rgb(202 202 202 / 46%); } bg.ripple>.layer4 { border-color: rgb(252 249 250 / 28%); width: 30%; margin: auto; height: 30%; background: rgb(252 249 250 / 28%); backdrop-filter: blur(20px); } bg.bg2 { z-index: 99999; height: 66%; width: 66%; margin: auto; max-width: 444px; } bg.bg2>img { z-index: 999; opacity: 1; height: 25px; width: 25px; } bg.bg2>img:first-child { top: 15px; left: 0; height: 44px; width: 44px; filter: blur(2px); } bg.bg2>img:nth-child(2) { right: 0; top: 18%; } bg.bg2>img:nth-child(3) { bottom: 49px; filter: blur(1px); } bg.bg2>img:last-child { top: 73%; left: 59%; } csplo>hd>i { position: absolute; inset: 0; margin: auto; z-index: 9999; height: auto; max-width: 444px; } csplo>hd>i>img { height: 55%; width: 55%; margin-top: 0; filter: drop-shadow(2px 4px 6px var(--bor)); } csplo h1 { font-family: "Archivo Black", sans-serif; color: var(--b); font-size: 3.77em; margin: 0 auto; position: relative; width: max-content; display: block; text-shadow: 0px 2px 20px var(--bc), 1px 1px 17px var(--bc), 0px 4px 14px var(--bc); } csplo.stp1 h1:after { content: " "; position: absolute; height: 10px; width: 13px; left: 21%; top: 11%; background: rgb(253, 208, 92); } csplo h2 { font-family: "Archivo Black", sans-serif; color: rgb(253, 208, 92); font-size: 3.33em; margin: 0 auto; position: relative; width: max-content; display: block; margin-top: -18px; text-shadow: 0px 2px 20px var(--bc), 1px 1px 17px var(--bc), 0px 4px 14px var(--bc); } bg.ripple>layer:first-child { box-shadow: 0 0 44px 0px var(--bc); border-color: rgb(202 202 202 / 14%); } csplo>bd { display: block; position: relative; top: -58px; width: 60%; text-align: center; margin: 0 auto; z-index: 99999; } csplo>bd>p { margin: 14px 7px; color: var(--b); letter-spacing: 0.1px; } csplo>ft { display: flex; padding: 11px; justify-content: space-around; align-items: center; } csplo>ft>btn { display: flex; height: 50px; width: 50px; padding: 0; background: rgb(253, 208, 92); align-items: center; justify-content: center; border-radius: 55%; box-shadow: 1px 12px 12px 0px var(--bc), -16px 2px 12px 0px var(--bc), 15px 3px 12px 0px var(--bc); margin: 11px; transition: 95ms; } csplo>ft>btn:active { transform: scale(0.95); } csplo stps>stp { display: block; height: 7px; width: 7px; margin: 4px; border-radius: 55%; border: 1px solid var(--b-t22); background: var(--b-t22); opacity: 0.6; transition: 333ms; } csplo stps { display: flex; align-items: center; } cspls.stp2 csplo { background: linear-gradient(49deg, rgb(60 80 242), rgb(70 89 240), rgb(96 112 242), rgb(88 104 234), rgb(64 83 232)); } cspls.stp3 csplo { background: linear-gradient(49deg, rgb(165, 234, 123), rgb(165, 234, 123), rgb(165, 234, 123), rgb(165, 234, 123), rgb(165, 234, 123)); } cspls.stp3 csplo>ft>btn { background: rgb(232, 254, 91); } cspls.stp3 stps>stp:nth-child(3) { background: var(--b); opacity: 1; } cspls.stp2 csplo>ft>btn { background: rgb(90, 254, 245); } cspls.stp2 csplo stps>stp:nth-child(2) { background: var(--b); opacity: 1; } cspls.stp1 stps>stp:first-child { background: var(--b); opacity: 1; } cspls.stp1>csplo.stp1 { opacity: 1; visibility: visible; } cspls.stp2>csplo.stp2 { opacity: 1; visibility: visible; } cspls.stp3>csplo.stp3 { opacity: 1; visibility: visible; } csplo.stp2 h2 { color: rgb(90, 254, 245); font-size: 2.44em; } csplo.stp2 h1 { font-size: 4.22em; } csplo.stp3 h1 { font-size: 4.2em; } csplo.stp3>hd>i>img { filter: drop-shadow(0px 20px 20px rgb(165 234 123)); } csplo.stp2>hd>i>img { filter: drop-shadow(0px 24px 14px rgb(69, 87, 232)); } csplo.stp1>hd>i>img { filter: drop-shadow(0px 62px 44px rgb(236, 124, 148)); } csplo.stp3 h2 { color: rgb(232, 254, 91); } cgspo { display: grid; background: rgb(167, 235, 126); padding: 22px; grid-template-rows: 39% 155px auto; visibility: hidden; opacity: 0; position: absolute; inset: 0; transition: 999ms; border-radius: 22px; } cgspo btns>btn { display: grid; grid-template-columns: 44px auto; align-items: center; justify-content: center; padding: 19px 11px; background: var(--bt); border-radius: 33px; margin: 11px auto; font-weight: 500; max-width: 80%; transition: 95ms; } cgspo btns>btn:nth-child(1) svg { fill: var(--b); } cgspo btns>btn:nth-child(1) { background: rgb(0, 0, 0); color: var(--b); } cgspo btns>btn>i { height: 22px; width: 22px; margin: 0 auto; } cgspo>hd { position: relative; display: flex; align-items: end; } cgspo>hd>i { height: 88%; width: 66%; margin: 0 auto; max-width: 258px; } cgspo h1 { font-family: "Archivo Black", sans-serif; color: var(--b); font-size: 5.66em; margin: 0 auto; position: relative; width: max-content; display: block; text-shadow: 0px 2px 20px var(--bc), 1px 1px 17px var(--bc), 0px 4px 14px var(--bc); } cgspo h2 { font-family: "Archivo Black", sans-serif; color: rgb(253, 208, 92); font-size: 3em; margin: 0 auto; position: relative; width: max-content; display: block; margin-top: -18px; transform: scale(0.8); position: relative; left: 3px; line-height: 51px; background-image: linear-gradient(180deg, rgb(255 255 255), rgb(255 255 255)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8; } cgspo>ft { display: block; padding: 22px 0; margin-top: 11px; } cgspo>hd>i>img { height: 100%; width: 100%; filter: drop-shadow(-11px 9px 16px #00000042); } cgspo>bg { height: 50%; background: url(/0/img/GiftElementss.png); filter: blur(5px); width: 100%; background-size: 100%; background-position: 100% 100%; transform: rotate(-107deg); transition: 222ms; opacity: 0.6; } cspls.stpfinal>cgspo { opacity: 1; visibility: visible; } cgspo btns>btn:active { transform: scale(0.95); } splash { display: none; } .enter splash { display: block; } @media screen and (max-width: 999px) { cgspo { justify-content: center; } } @media screen and (min-width: 999px) { csplo>bd>p { max-width: 66%; margin: 0 auto; } csplo>ft { position: absolute; left: 0; right: 0; } csplo { grid-template-rows: 12vh 411px 20% 47px auto; border-radius: 22px; } } /* Buggs of Phone Version and common */ @media screen and (max-width: 999px) { cmcos no { display: block; width: 77%; margin: auto; } cslgo { margin: 11px; width: auto; display: block; } sgcto refunds { width: auto; max-width: unset; margin: 11px; } } /* Animations */ /* shdow flow animation */ @keyframes shdow-flow { 0% { box-shadow: 0 0 0 0 rgba(30, 112, 185); } 100% { box-shadow: 0 0 0 15px transparent; } } @keyframes Rotate { 0% { transform: rotateX(-20deg) rotateY(360deg); } 100% { transform: rotateX(-20deg) rotateY(0deg); } } @keyframes oscillate { 0% { transform: translate(0, 0); } 50% { transform: translateY(6px); } 100% { transform: translate(0, 0); } } @keyframes Flow { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.5; } } @keyframes jellovertical { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(0.75, 1.25, 1); } 40% { transform: scale3d(1.25, 0.75, 1); } 50% { transform: scale3d(0.85, 1.15, 1); } 65% { transform: scale3d(1.05, 0.95, 1); } 75% { transform: scale3d(0.95, 1.05, 1); } 100% { transform: scale3d(1, 1, 1); } } /* Splash1 */ cspfo csldro>bd { display: block; height: 77%; } cspfo slide { height: 100%; min-height: calc(100% - 0px); } cspfo csldro slides { height: 90%; } csldro slide>hd>i img { height: 77%; width: 100%; } cspfo csldro slide>hd>i { height: 100%; } cspfo slide>bd { margin: 0; padding: 22px; padding-bottom: 0; max-width: 66%; } cspfo slide>bd>h2 { text-align: start; } cspfo slide>ft { margin: 0; padding: 22px; padding-bottom: 0; text-align: start; max-width: 66%; } cspfo cldro g .dot { height: 3px; width: 11px; border-radius: 11px; } cspfo cldro g .dot.this { width: 16px; } /* Dashboard2 */ cnvbo>logo { height: 44px; width: 100%; display: flex ; position: relative; z-index: 8888888; justify-content: center; align-items: center; max-width: 100%; max-height: 100%; } cnvbo { display: grid ; grid-template-columns: 55px auto; align-items: center; justify-content: space-between; position: sticky; padding: 11px; top: 0; z-index: 999; } cnvbo>btns { display: flex ; align-items: center; } cnvbo cncn { display: grid ; grid-template-columns: 44px auto; border: 1px solid var(--bg); border-radius: 44px; padding: 5px; background: var(--bt); padding-right: 22px; align-items: center; font-size: 0.88em; } cnvbo cncn>i>img { height: 100%; width: 100%; object-fit: cover; } cnvbo cncn>i { height: 40px; width: 40px; border-radius: 55%; overflow: hidden; } cnvbo cncn p { margin: 0; opacity: 0.6; font-weight: 600; letter-spacing: 0.44px; } cnvbo cncn>i { height: 33px; width: 33px; border-radius: 55%; overflow: hidden; } cnvbo>btns>btn { display: block; height: 44px; width: 44px; align-content: center; justify-items: center; border: 1px solid var(--bc); border-radius: 55%; margin: 0 7px; background: var(--bt); } cnvbo btn>i { height: 20px; width: 20px; } /* Open account help component */ coaco { display: block; padding: 88px 22px 22px 22px; background: var(--aaa); color: var(--b); border-radius: 0 0 33px 33px; position: relative; margin-top: -70px; } coaco>bg { display: block; background: url(/0/img/grid.png); background-size: 6%; filter: invert(1); opacity: 0.05; } coaco>hd { display: flex ; align-items: center; } coaco>hd>i { height: 66px; width: 66px; filter: hue-rotate(148deg); } coaco>hd p { margin: 0; line-height: 2em; } coaco>bd>btn { display: block; padding: 15px; background: var(--b); color: var(--c); font-weight: 500; text-align: center; border-radius: 11px; margin: 22px 0; } coaco>hd { display: flex ; align-items: center; justify-content: space-between; position: relative; z-index: 99; } coaco>bd { position: relative; z-index: 999; } coaco>ft { position: relative; z-index: 999; text-align: center; } @media screen and (min-width: 999px) { coaco { border-radius: 22px; padding: 22px; margin: 0; } } /* Dashboard quick action component */ cqcao btns { display: grid ; grid-template-columns: 25% 25% 25% 25%; margin: 22px 0; } cqcao btns>btn { display: grid ; grid-template-rows: 77px auto; position: relative; text-align: center; padding: 0 11px; margin: 0 5px; } cqcao btns>btn>pp { position: absolute; top: -11px; background: var(--c); color: var(--b); font-size: 0.77em; padding: 5px 11px; border-radius: 4px; left: 0; right: 0; margin: 0 auto; text-align: center; max-width: fit-content; z-index: 9999; } cqcao btns>btn>i { display: block; height: 44px; width: 44px; padding: 11px; background: var(--bt); align-content: center; justify-items: center; margin: 0 auto; border-radius: 22px; } cqcao btn>i>svg { height: 26px; width: 26px; } cqcao btns>btn>t { font-weight: 500; } cqcao { display: block; padding: 22px 11px; margin: 7px; padding-bottom: 11px; } cqcao>hd { display: block; position: relative; } /* Slider Banner */ cprslo { display: block; position: relative; padding: 22px; border-radius: 11px; overflow: hidden; color: var(--b); max-width: 44%; } cprslo>hd>p { margin: 0; color: var(--bt); } cprslo>hd { display: block; max-width: 66%; } cprslo>hd>h4 { margin-bottom: 7px; font-weight: 500; font-size: 1.11em; } cprslo>bd>btn { display: block; padding: 11px; background: var(--b); color: var(--c); font-weight: 500; border-radius: 11px; width: 111px; text-align: center; margin-top: 11px; } csbnro>bd { display: flex ; height: auto; background: var(--a); overflow: hidden; border-radius: 11px; margin: 11px; } csbnro>ft>cldro { bottom: -13px; background: var(--c); border-radius: 22px; left: 0; right: 0; margin: 0 auto; max-width: max-content; overflow: hidden; height: 5px; } csbnro>ft>cldro a.dot { margin: 0; height: 5px; width: 23px; border-radius: 0; background: none; transition: 95ms; } csbnro>ft>cldro a.dot.this { transform: unset; height: 5px; } csbnro { display: block; position: relative; margin: 22px 0; } csbnro>hd>action { position: absolute; inset: 0; height: 55%; opacity: 0; } csbnro>hd>action>play { height: auto; width: auto; inset: 0; } csbnro>hd>action>pause { height: auto; width: auto; inset: 0; } /* Watchlist */ cwcls>hd { display: flex ; align-items: center; justify-content: space-between; } cwcls { display: block; padding: 11px 0; margin: 11px; } cwcls>bd { display: flex ; align-items: center; overflow-y: auto; } cwclo { display: block; padding: 11px; border-radius: 11px; border: 1px solid var(--bc); margin: 4px; flex: none; min-width: 188px; background: var(--bt); box-shadow: var(--bs-bs); } cwclo amnt { font-weight: 500; } cwclo>hd>i { display: block; height: 44px; width: 44px; border-radius: 55%; background: var(--a); } cwcls>hd>btn { display: block; font-size: 0.88em; font-weight: 500; background: var(--bt); padding: 7px 22px; border-radius: 33px; position: relative; } cwclo>hd { display: flex ; align-items: center; justify-content: space-between; } cwclo d>p { margin: 4px 0; } cwclo d>t { font-weight: 500; } cwclo rto { display: grid ; grid-template-columns: 22px auto; align-items: center; margin-top: 5px; font-weight: 500; } cwclo>bd { height: 55px; display: block; } cwclo rto>i { height: auto; } cwclo rto[red] svg { fill: #f56f6f; } cwclo rto[green] svg { transform: rotate(180deg); fill: #6ff58c; } cwclo rto[red] { color: #f56f6f; } cwclo rto[green] { color: #6ff58c; } /* App Link component */ cgapo { display: block; background: var(--aaa); color: var(--b); padding: 22px; position: relative; margin: 22px 0; } cgapo>bg { background: url(Griid.png); filter: invert(1); background-size: 30%; height: 44%; opacity: 0.06; } cgapo>bl { display: block; position: relative; z-index: 9999; } cgapo>bl ap { display: grid ; grid-template-columns: 66px auto; align-items: center; } cgapo>bl ap p { margin: 5px 0px; color: var(--bt); } cgapo>bl ap>i { height: 55px; width: 55px; background: var(--at); } cgapo>bl>hd { display: flex ; align-items: center; justify-content: space-between; } cgapo>bl>hd>btn { display: block; background: var(--b); color: var(--c); font-size: 0.88em; padding: 7px 22px; border-radius: 33px; font-weight: 500; } cgapo>bl>bd { display: flex ; padding: 11px 0; align-items: center; justify-content: space-between; } cgapo>bl>bd>i { height: 111px; width: 111px; object-fit: cover; } cgapo>bl>bd h2 { font-size: 2.22em; font-weight: 500; } cgapo>bl>bd p { color: var(--bt); } cgapo>bl>bd img { filter: hue-rotate(333deg); } @media screen and (min-width: 999px) { cgapo { border-radius: 11px; } } /* Lemmon Profile */ cusvo { display: block; text-align: center; padding: 33px; margin: 11px; } cusvo>hd { display: block; height: 77px; width: 77px; margin: 11px auto; border: 1px solid; align-content: center; justify-items: center; border-radius: 55%; background: var(--aa); } cusvo>hd svg { fill: var(--b); } cstso { display: grid ; grid-template-columns: 55px auto 55px; padding: 22px 11px; background: var(--bt); margin: 11px; border-radius: 11px; transition: 95ms;align-items: center; } nv btn { display: block; height: 33px; width: 33px; margin: auto; align-content: center; justify-items: center; padding: 5px; border-radius: 11px; } cstso cc>t { font-weight: 500; font-size: 1em; } cstso:hover { background: var(--b); } cstso cc>c { display: block; background: #e77f7f; padding: 3px 11px; font-size: 0.77em; color: var(--b); font-weight: 500; max-width: max-content; border-radius: 5px; margin: 0 11px; } cstso>bd>cc { display: flex ; align-items: center; } cstso>hd>i { height: 22px; width: 22px; margin: 0 auto; } cstso>ft>i { height: 22px; width: 22px; margin: 0 auto; margin-right: 0; } cstss>hd { display: block; padding: 22px 11px; padding-bottom: 0; } cstss>hd>h4 { font-weight: 500; font-size: 1.44em; } cstss>hd>p { margin: 7px 0; } cstso.this:first-child { background: var(--a); color: var(--b); } cstso.this svg { fill: var(--b); } cstso.this:nth-child(2) { background: var(--at); color: var(--b); } cstss>ft>btn { display: block; padding: 15px; background: var(--aaa); text-align: center; margin: 22px 11px; border-radius: 11px; color: var(--b); font-weight: 600; margin-bottom: 44px; } cstss>ft>btn:hover { background: var(--aaa); } cstss sps { display: block; padding: 11px; } cstso>bd>cc>p { margin: 5px 0; } /* Game Statics */ ctmbo { display: block; padding: 11px; border-radius: 11px; background: var(--bt); margin: 5px; margin-right: 0; height: 284px; } ctmbo p { margin: 6px 0px; } ctmbo amnt { font-weight: 600; font-size: 1.44em; } ctmbo>hd>h4 { font-size: 1.22em; font-weight: 500; } ctmbo bl { margin: 0; border-radius: 0; padding-top: 22px; } ctmbo bl>hd { display: grid ; grid-template-columns: 36px 33px; width: max-content; align-items: center; font-weight: 500; border-radius: 33px; background: var(--aaa); padding: 5px 11px; text-align: center; color: var(--b); } ctmbo bl>bd>i { height: 66px; width: 100%; flex: none; justify-content: end; } ctmbo bl>bd>i>img { height: 66px; width: 66px; } ctmbo bl>bd { display: flex ; overflow-y: auto; } ctmbo bl>hd>i { height: 11px; width: 11px; margin: 0 auto; margin-right: 0; padding: 4px; background: var(--bt); border-radius: 55%; color: var(--c); } ctmbo bl cldro { position: unset; justify-content: start; } cuscno { display: block; padding: 11px; border-radius: 11px; background: var(--bt); margin: 5px; position: relative; overflow: hidden; height: 192px; } cuscno>hd { display: flex ; justify-content: space-between; } cuscno>hd>d>t { font-size: 0.88em; } cuscno>hd>tg { display: block; padding: 7px 22px; background: var(--aaa); color: var(--b); height: max-content; border-radius: 0 11px 0 23px; position: absolute; right: 0; top: 0; font-size: 0.88em; } cuscno cn>i { display: block; height: 33px; width: 33px; border-radius: 55%; background: var(--a); padding: 7px; align-content: center; } cuscno cn>i>svg { fill: var(--b); height: 26px; width: 26px; } cuscno cn { display: block; place-content: center; justify-items: center; text-align: center; padding: 11px; } cuscno cn>t { font-weight: 500; margin-top: 7px; display: block; } cuscno>ft { display: grid ; align-items: center; justify-content: space-between; grid-template-columns: 77% auto; } cuscno>ft>h4 { font-size: 1.66em; font-weight: 500; } cuscno>ft rts { display: flex ; align-items: center; transition: 95ms; background: var(--bc); height: 10px; margin: 11px 0; border-radius: 11px; width: 100%; position: relative; } cuscno>ft rts:after { content: " "; display: block; height: 11px; width: 35%; transition: 95ms; background: var(--aaa); border-radius: 11px; } cbuco { display: grid ; grid-template-columns: 77% auto; padding: 11px; border-radius: 11px; background: var(--bt); margin: 5px; position: relative; overflow: hidden; align-items: center; height: 65px; } cbuco>hd>p { margin: 7px 0; } cbuco>bd img { filter: hue-rotate(22deg); } teambattle>grid { display: grid ; grid-template-columns: 50% 50%; } /* Wallet2 */ cwltto { display: block; padding: 11px; background: var(--bor); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur; margin: 11px; border-radius: 22px; } cwltto>hd { display: grid ; grid-template-columns: 72% auto; align-items: center; padding: 11px; padding-bottom: 22px; } cwltto>hd>h2 { display: block; text-align: center; font-weight: bold; font-size: 3.44em; line-height: 0; color: var(--b); } cwltto>hd>d { color: var(--bt); font-weight: 300; font-size: 0.88em; } cwltto>hd>d>a { color: var(--b); } cwltto>bd>bl { display: block; padding: 15px; border-radius: 22px; background: linear-gradient(217deg, #eda88b, #f0b15d, #f58941, #f58941); box-shadow: 0 0px 1px 2px var(--bt); } cwltto bl blnc { display: flex ; align-items: center; font-size: 2.33em; font-weight: 400; } cwltto bl blnc>b { font-weight: 400; } cwltto bl blnc>t { color: var(--c0); } wallet cwltto bl>btn { font-size: 0.88em; color: var(--b); max-width: 50%; border-radius: 44px; margin: 0px auto; } cwltto bl>wlt>cc { display: flex ; } cwltto wlt>cc>d { display: block; background: var(--bc); height: 2px; width: 100%; margin: 8px 0px; } cwltto bl>wlt>cc>i { height: 15px; width: 15px; margin: 1px; } cwltto bl>wlt>cc>t { font-size: 0.77em; font-weight: 500; } cwltto bl>wlt { display: grid ; grid-template-columns: 44% auto; margin-bottom: 22px; align-items: center; } /* Every Buggs */ wallet>bl { border-radius: 22px; } cwllto bl>ft btn { display: grid ; max-width: 333px; background: var(--aaa); height: 44px; justify-content: center; align-items: center; margin-left: 11px; border-radius: 7px; cursor: pointer;} cwllto bl>ft btn a { color: var(--b); } cromo span>i { transform: rotate(-90deg); } alsngs soni img { height: 100%; width: 100%; object-fit: cover; } schln mg a.this { border-bottom: 1px solid var(--c); } alsngs soni i { height: 233px; width: 244px; overflow: hidden; margin: 5px; } cal { font-size: small; } setting bl cnc:hover { background: var(--hover); } trending cofs>bd { display: block; } sbdvc main { width: 100%; max-width: 1050px; } trcs>trc p { margin: 0; } cmnsf saved svdop btn.this { background: var(--aaa); color: var(--b); } cmnsf svdop btn.this svg { fill: var(--b); } cmnsf svdop btn i>svg { fill: var(--a); } smns smns hd bl bd>h5 { font-weight: 400; } smns smns hd bl btn>h5 { font-weight: 400; } smns notf:last-child { border: none; margin-bottom: 0; } cgpco table tr td label>p { margin: 0; } smos d>bl { margin: 11px; } cmbov>bd>h4 { padding: 0 11px; } cgpco { margin: 11px; display: block; border-radius: 11px; overflow: hidden; background: var(--bt); padding: 11px; } filter2 bl.cfa { border: none; } cgfo .oo>bo { background: var(--aaa); } sgn header nv { display: block; } smos gp>d>h6 { margin-bottom: 11px; font-size: 0.88em; font-weight: 500; } smos d>bl>ft>t { display: none; } smcot main bl.del { display: grid; grid-template-columns: auto 88px; align-items: center; margin: 0; padding: 11px; background: var(--bc); border-radius: 5px; margin-bottom: 22px; } smcot label>input { height: 16px; width: 16px; margin-right: 11px; } smcot main bl.del label { display: flex; align-items: center; } spms ad { position: relative; } cvpo label { opacity: 1; } spco alsngs time { display: flex; flex-wrap: nowrap; justify-content: center; } stlo ctmo { background: transparent; padding: 0; } cpds themmode>trc>ft { display: flex; justify-content: end; } cbdvc ft>p { font-size: 0.88em; text-align: center; font-weight: 400; position: relative; width: fit-content; margin: auto; padding: 0 22px; } cbdvc ft .con:after { content: ''; position: absolute; background: green; height: 7px; width: 7px; left: 11px; right: 0; border-radius: 44px; top: 0; bottom: 0; margin: auto 0; } cbdvc hd>btn { display: block; height: 22px; width: 22px; padding: 5px; border-radius: 55%; align-content: center; } cbdvc bd>bl { display: block; background: var(--b-t); margin: 5px; border-radius: 11px; box-shadow: 0px 0px 0px 1px var(--bc); padding: 11px; height: 100%; width: 200px; transform: scale(0.98); transition: 333ms; max-height: 188px; } cbdvc bd bl>hd { display: flex; justify-content: end; } cbdvc bd>bl>bd>i { display: block; height: 44px; width: 44px; margin: auto; margin-bottom: 11px; } cbdvc .bat>i { height: 22px; width: 22px; } cbdvc hd>btn:hover { background: var(--hover); } cbdvc bl>ft btn { background: var(--b-t); display: grid; text-align: center; padding: 1px 22px; border-radius: 5px; font-weight: 500; box-shadow: 0px 0px 0px 1px var(--bor); width: fit-content; margin: auto; margin-top: 11px; } cbdvc bd bl bd svg { height: 66px; width: 66px; } cbdvc ft btn { background: var(--b-t); width: auto; display: grid; text-align: center; padding: 11px 0; border-radius: 5px; font-weight: 500; box-shadow: 0px 0px 0px 1px var(--bc); margin: 0 1px; margin-top: 11px; } cbdvc bd bl:last-child { display: flex; flex-direction: column; align-items: center; justify-content: center; } snss sstm { display: flex; align-items: center; } snss sstm>hd { height: 100px; width: 100px; margin: 5px; align-content: center; } snss sstm>hd>i { height: 88%; width: 88%; } cgmo { display: block; padding: 22px; margin: 11px; background: var(--bt); border-radius: 11px; } cgmo>bd>gigscards { display: block; overflow: scroll; position: relative; } cgmo>bd { display: block; position: relative; } smau sl select { border-radius: 5px; } cartfill btn:last-child { background: var(--aaa); color: var(--b); } sgcto refunds cgcto.inf>inf { display: block; padding-left: 88px; font-size: 0.88em; } smau sl input:focus { border-radius: 5px; } smau edit-address input { width: -webkit-fill-available; border-radius: 5px; height: 55px; } smau sl.edt>label { font-size: 13px; top: -4px; margin: 0; left: 0; } cmsdu>sl>img { height: 100%; position: absolute; z-index: 99; width: 100%; opacity: 0;} cmsdu>sl>img[src=""] { display: none; } msnb sl.edt>label { margin-left: 0; font-size: 0.88em; } gb.Pending { display: block; margin: 11px; padding: 11px; } smso .bot_call>i img[src=""] { display: none; } smso .bomee img[src=""] { display: none; } smso bd.onder> bl> i img[src=""] { display: none; } calls no { display: grid; grid-template-columns: 111px 295px 222px 222px; grid-column-start: 3; grid-column-end: 7; width: 100%; margin: 0; padding: 22px; justify-content: center; align-items: center; grid-template-rows: unset; flex: none; column-gap: 2%; } svio a.anit>i { height: 22px; width: 22px; margin: auto; } svio clt { display: grid; gap: 14px; background: var(--bt); border-radius: 11px; margin: 7px; } smso cmcno i>svg { height: 22px; width: 22px; } ccshot>ft { position: unset; text-shadow: unset; } grid wallet bl { background: var(--b-t44); padding: 22px; } smso cmcno copo btn>i { width: auto; height: auto; margin: 0; padding: 0; background: unset; } .agree~cdlo { visibility: visible; top: 0; } ccos>bl { display: block; padding: 22px; background: var(--b-t); border-radius: 22px; margin: 7px; } cmbop>bl,cmboo>bl { background: var(--bt); padding: 22px; border-radius: 22px; } crypto grid>bl { padding: 22px; } smcs grid>bl { background: var(--bt); padding: 22px; } pricing>bl { background: var(--bt); padding: 22px; } schln grid>bl { background: var(--bc); padding: 22px; } @media screen and (max-width: 999px) { smso cmcno { overflow: hidden; overflow-x: scroll; gap: 11px; } } cmcg { display: grid ; background: var(--b); margin: 4px; border-radius: 22px; padding: 22px; text-align: center; } cmcg i { display: block; height: 22px; margin: 7px 0; } /*Chetram jakhatiya Nayak*/ /*Settings option Component*/ csops csopo hd i { height: 22px; width: 22px; margin: auto; } csops csopo bd h4 { font-weight: 500; font-size: 1em; } csops h3 { font-size: 1.11em; font-weight: 500; margin-top: 11px; margin-bottom: 7px; } csops csopo bd p { margin: 0; font-size: 0.88em; font-weight: 400; } csopo>bd { display: grid; gap: 3px; } /*YourInfo*/ syuio setting { display: grid; background: var(--bg); padding: 22px; border-radius: 22px; } syuio ft btn { border: 1px solid var(--bc); background: unset; color: unset; width: 88px; text-align: center; font-size: 0.88em; padding: 7px 11px;} csopo#you { display: none; grid-template-columns: auto auto; } .your csopo#you { display: grid; } #Hp ft i { transform: rotate(90deg); transition: 333ms; } .your #Hp ft i { transform: rotate(270deg); } @media screen and (max-width: 999px) { syuio setting { display: grid; padding: 11px; } } /*Sign-in Opctions*/ csopo.edit { display: grid; grid-template-columns: auto auto; } sigpo ft btn { transform: rotate(0deg); color: var(--c); padding: 7px 28px; background: unset; border: 1px solid var(--bc); } .fac #fc1 ft i { transform: rotate(270deg); } sigpo ft i { transform: rotate(90deg); } .fac bl { display: none; } sigpo bl snp { display: grid; grid-template-columns: 16px auto; align-items: center; gap: 7px; padding: 11px; } sigpo bl snp i { font-style: normal; background: var(--a); color: var(--b); border-radius: 20px; font-size: 12px; } sigpo bl snp p { font-size: 1em; } sigpo ft btn { display: grid; grid-template-columns: auto auto; align-items: center; } /*Coupons*/ coupons main { width: 100%; max-width: unset; } coupons ccpon{ display: grid; align-items: center; border-radius: 22px; } ccpon>h3 { font-size: 1.44em; margin: 11px; } ccpon copn { display: grid; padding: 22px; border-radius: 22px; grid-template-columns: auto auto; background: var(--bc);} copn cpn { display: grid; background: var(--b); border-radius: 11px; padding: 11px; } copn cpn>hd { display: flex; margin-bottom: 14px; } copn cpn>hd>i { height: 100%; width: 100%; border: 1px solid var(--bc);} copn cpn>bd { display: grid; } copn cpn>bd>hd>h3 { font-size: 32px; font-weight: 500; text-align: center; margin-bottom: 11px; } copn cpn bd>bd { display: grid; grid-template-columns:24% auto; align-items: center; } copn cpn bd>bd>i>img { width: 38px; height: 55px; border: 1px solid var(--c); border-radius: 50%; } copn cpw { display: grid; grid-template-columns: auto auto auto auto auto; gap: 11px; margin-left: 11px; } copn cpw>bl { display: grid; background: var(--b); padding: 11px; border-radius: 11px; grid-template-rows: auto 30%; } copn cpw bl>hd>i { height: 100%; width: 100%; } copn cpw bl>hd>i>img { width: 100%; height: 100%; } copn cpw>bl>bd { display: grid; grid-template-columns: auto auto; align-items: center; border: 1px solid var(--bc); padding: 4px; border-radius: 7px; } copn cpw>bl>bd>h3 { color: var(--c); font-size: 1.22em; font-weight: 500; } @media screen and (max-width: 999px) { ccpon copn { display: block; padding: 11px; border-radius: unset;} copn cpn { margin-bottom: 11px; } copn cpn bd>bd { grid-template-columns: auto auto; } copn cpn bd>bd>i>img { width: 30%; } copn cpw { grid-template-columns: auto auto; margin: unset; } } /*video*/ cvshot hd { display: grid; } cvshot { display: flex;overflow: hidden; overflow-x: scroll; border-bottom: 1px solid var(--bc);} cvshot hd i { height: 100%; } cvshot hd img {height: 100%; width: 100%; border-radius: 16px; object-fit: cover; display: grid; max-width: 131px; max-height: 238px;} cvshot bd h3 { font-weight: 500; font-size: 1rem;overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} cvshot ft d {font-size: 0.8rem; padding: 0 7px;} /*category*/ cveo { display: block; background: var(--bt); padding: 22px; border-radius: 22px; margin: 11px; } cveo hd { display: flex; justify-content: center; border-radius: 38px; } cveo hd t { font-size: 1em; font-weight: 500; } cveo bd { display: flex; overflow-x: scroll; } cveo bd a {background: var(--bc); display: grid; border-radius: 5px; align-items: center; justify-content: center; margin: 8px; padding: 7px 16px; font-size: 0.88em; font-weight: 500;} cveo ft cvshot { display: grid; } cveo ft cvshot ccshots { padding: 11px; border-bottom: none;} cveo ft cvshot cvinst { display: grid; grid-template-columns: auto auto auto; align-items: start; padding: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 22px;} cveo cvshot ft i { min-width: 133px; min-height: 100%; } cveo cvshot short {display: grid; grid-template-columns: 28px auto; align-items: center;padding: 0 11px;padding-top:11px;} cveo cvshot short i { width:22px; height:22px; } cveo cvshot short i svg { max-width: 66px; max-height: 66px; } cveo cvshot short h2 {font-size: 1.22em; font-weight: 700; width: fit-content;} cveo ft cvshot cvinst bd { display: grid; margin-left: 11px; } cveo ft cvshot cvinst ft h3 { font-size: 1.22em; line-height: 26px; } cveo ft cvshot cvinst ft span { opacity: 0.6; font-size: 1.11em;} cveo ft cvshot cvinst ft btn { display: block; width: 15px; height: 15px; transform: rotate(90deg); margin-top: 6px; } /*Comment*/ /*AddComment*/ @media screen and (max-width: 999px) { camo { display: none; } camo com { grid-template-columns: 140px auto auto; } camo com hd { grid-template-columns: 33px auto; } } /*Descriptionm*/ cdmo { display: none; } cdmo desc { display: grid; grid-template-columns: auto auto; justify-content: space-between; border-bottom: 1px solid var(--bc); padding-bottom: 11px; align-items: center; } cdmo hd desc i { width: 28px; height: 28px; } cdmo hd pf { display: grid; grid-template-columns: auto auto auto; margin: 14px 0px;} cdmo hd pf bl { display: grid; justify-content: center; } cdmo hd pf bl t { font-size: 0.88em; font-weight: 500; text-align: center; } cdmo hd btn { display: grid; grid-template-columns: auto auto auto auto; gap: 11px; } cdmo hd btn t { font-size: 0.88em; font-weight: 400; text-align: center; background: var(--bg); padding: 5px 0; border-radius: 20px; } cdmo hd p { font-size: 14px; background: var(--bg); padding: 11px; border-radius: 7px; line-height: 1.55em; } cdmo hd p aa { font-weight: 500; } cdmo bd { display: block; } cdmo>bd music { display: block; padding: 14px 0; } cdmo>bd music hd { display: grid; margin-bottom: 14px; } cdmo>bd music hd h2 { font-size: 1.22em; font-weight: 700; } cdmo>bd music hd h6 { font-weight: 400; font-size: 0.88em; } cdmo>bd music bd { display: grid; grid-template-columns:163px auto; align-items: start; margin-bottom: 14px; } cdmo>bd music bd i { height: auto; } cdmo>bd music bd i img { max-width:163px; max-height:163px; border-radius: 7px; } cdmo>bd music bd t>i { position: absolute; top: 9px; right: 7px; transform: rotate(90deg); width: 14px; height: 14px; } cdmo>bd music bd t>i svg { fill: var(--b); } cdmo>bd music bd pf { display: grid; margin-left: 7px; } cdmo>bd music bd pf p { margin: 0; font-size: 14px; font-weight: 500; } cdmo>bd music bd pf h5 { font-size:0.88em; font-weight: 400; } cdmo>bd music ft { display: flex; margin-bottom: 11px; } cdmo>bd music ft btn { display: flex; align-items: center; border: 1px solid var(--bc); border-radius: 37px; width: 100%; height: 40px; justify-content: center; transition: 333ms; } music ft btn:hover { background: var(--bc); border: solid 1px var(--bg); transition: 333ms; } cdmo>bd music ft btn i { width: 44px; } cdmo>bd music ft btn i svg { max-width: 44px; max-height: 44px; } cdmo>bd music ft btn t { text-align: center; font-weight: 500; } cdmo bd short>hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; margin-bottom: 11px;} cdmo bd short>hd bc { display: grid; } cdmo bd short>hd bc h5 { font-size: 0.88em; font-weight: 400; } cdmo bd short>hd btn { display: flex; height: fit-content; border: 1px solid var(--bc); padding: 5px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; } cdmo>bd>short>bd { display: grid; } cdmo bd short>ft { display: grid; gap: 11px; margin: 11px 0; } cdmo bd short>ft h5 { font-size: 0.88em; font-weight: 400; } cdmo bd short>ft btn { display: flex; border: 1px solid var(--bc); justify-content: center; padding: 7px 0; border-radius: 18px; } cdmo bd short>ft btn t { font-weight: 500; } cdmo ft { display: block; } cdmo ft man { display: grid; } cdmo ft man>hd { display: grid; grid-template-columns: 44px auto; margin-bottom: 11px; } cdmo ft man>hd i { min-width: 44px; min-height: 44px; } cdmo ft man>hd i img { background: var(--bc); border-radius: 40px; } cdmo ft man>hd pff { display: grid; margin-left: 11px; } cdmo ft man>hd pff h5 { font-size: 0.88em; font-weight: 400; } cdmo ft man>bd { display: grid; grid-template-columns: 27% 27% auto; gap: 11px; margin-bottom: 11px;} cdmo ft man bd btn { display: grid; grid-template-columns: auto auto; align-items: center; border: 1px solid var(--bc); border-radius: 50px; padding: 0 7px; } cdmo ft man bd btn i { max-width: 44px; max-height: 44px; } cdmo ft man bd btn t { text-align: center; font-weight: 500; } cvinst {display: grid; grid-template-columns: 118px auto; align-items: center; margin: 7px 0; gap: 11px;} cvinst hd i { display: block; min-width: 112px; min-height: 62px; } cvinst hd i img { border-radius: 7px; } cvinst>bd {display: grid; grid-template-rows: auto auto; gap: 4px;} cvinst bd h3 {font-size: 14px; font-weight: 500; line-height: 1;} cvinst bd d { font-size: 0.88em; font-weight: 400; } @media screen and (max-width: 999px) { cdmo {display: none; position: relative; background: var(--b); padding: 11px; top: -4px;} .cros cdmo { display: grid; } } /*Comments*/ cano { display: flex; overflow-x: scroll; background: var(--b-t77); padding: 11px 0; margin: 11px 8px; border-radius: 11px; padding-left: 11px; } cano bl { display: grid; line-height: 33px; min-width: 100%; max-width: 55%; } cano bl hd { display: flex; align-items: center; gap:7px; } cano bl hd h5 { font-size: 0.88em; font-weight: 400; } cano bl bd { display: flex; align-items: center; } cano bl bd i { min-width: 33px; min-height: 33px; max-width: 33px; max-height: 33px; background: var(--a); border-radius: 26px; color: var(--b); font-style: normal;} cano bl bd h4 { font-size: 1em; font-weight: 500; margin-left: 7px; } cano bl bd btn { background: var(--btn); padding: 2px 18px; border-radius: 28px; margin-left: 18px; color: var(--b); font-size: 0.77em; } @media screen and (min-width: 999px) { cano { display: none; } } /*Commentsm*/ cnmo { display: none; } cnmo>hd { display: grid; border-bottom: 1px solid var(--bc); padding-bottom: 11px; margin-bottom: 11px; } cnmo hd desc { display: grid; grid-template-columns: auto auto; justify-content: space-between; } cnmo hd desc i { width: 28px; height: 28px; } cnmo hd btn { display: flex; gap: 11px; } cnmo hd btn t { background: var(--bg); padding: 5px 16px; border-radius: 7px; font-size: 0.88em; } cnmo>bd { display: block; margin-bottom: 11px; } cnmo bd bl { display: grid; grid-template-columns: 38px auto 14px; padding: 11px 0; } cnmo bd bl hd i { max-width: 33px; max-height: 33px; min-height: 33px; min-width: 33px; background: var(--a); border-radius: 28px; color: var(--b); font-style: normal;} cnmo bd bl bd { display: grid; } cnmo bd bl bd h5 { font-weight: 500; } cnmo bd bl bd t { display: grid; grid-template-columns: 33px 22px 33px auto; align-items: center; } cnmo bd bl bd t i { min-width: 28px; min-height: 28px; } cnmo bd bl bd t h4 { font-weight: 400; } cnmo bd bl bd rep { display: flex; color: var(--a); } cnmo bd bl ft i { transform: rotate(90deg); max-width: 18px; max-height: 18px; } cnmo>ft { display: flex; border-top: 1px solid var(--bc); padding-top: 11px; align-items: center;} cnmo>ft>i { min-width: 33px; min-height: 33px; max-width: 33px; max-height: 33px; background: var(--a); border-radius: 35px; color: var(--b); font-style: normal;} cnmo ft input { background: var(--bg); padding: 0 11px; margin-left: 7px; } .comm cnmo { display: grid; } @media screen and (min-width: 999px) { cnmo { display: none; } } /*Addnewcomment*/ .add cnto { display: grid; } cnto { display: none; grid-template-rows: auto 45px; margin: 11px 0; } cnto hd { display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--bc); border-bottom: 1px solid var(--bc); padding: 14px 0; } cnto hd i { max-width: 33px; max-height: 33px; min-width: 33px; min-height: 33px; background: var(--a); border-radius: 20px; color: var(--b); font-style: normal; } cnto hd>input { border: 1px solid var(--bc); background: unset; } cnto bd { display: flex; align-items: center; justify-content: center; } cnto bd em { display: flex; align-items: center; justify-content: center; width: 58px; height: 33px; font-style: normal; font-size: 24px; } .add cnto { display: grid; } /*Savem*/ csvo { display: none; background: var(--bc); border-radius: 11px; } csvo form { display: grid; position: relative; } csvo form hd { display: flex; justify-content: space-between; align-items: center; padding: 11px; } csvo form hd d h3 { font-weight: 500; font-size: 1.11em; } csvo form hd d btn { display: grid; grid-template-columns: auto auto; align-items: center; gap: 11px;} csvo form hd d btn i { font-weight: 100; font-size: 28px; padding-bottom: 7px; color: var(--a); } csvo form hd d btn t { font-size: 0.88em; font-weight: 500; color: var(--a); } csvo form bd { display: flex; justify-content: space-between; border-top: 1px solid var(--bc); border-bottom: 1px solid var(--bc); padding: 0px 11px; } csvo form bd d { display: grid; grid-template-columns: auto auto; align-items: center; gap: 11px;} csvo form bd d input { min-width: 22px; min-height: 22px; } csvo form bd d h3 { font-weight: 500; font-size: 0.88em; margin-left: 11px; } csvo form bd d i { min-width: 28px; min-height: 28px; } csvo form ft { display: flex; justify-content: space-between; padding: 11px; } csvo form ft d { display: flex; gap: 11px; align-items: center; } csvo form ft d i { min-width: 44px; min-height: 44px; } csvo form ft btn t { font-size: 0.88em; font-weight: 500; } /*Books*/ books d.aerea main { width: unset; max-width: unset; } /*EbookType*/ disc { display: grid; grid-template-columns: auto 97px; min-width: 266px; border: 1px solid var(--bc); padding: 1px; margin-right: 11px; border-radius: 7px; position: relative; overflow: hidden; height: 77px; gap: 28px; background: var(--b-t22); } disc:hover { box-shadow: inset 0px 0px 0px 2px var(--c0); transition: 333ms; } disc hd { margin: 11px; margin-right: 0; } disc hd h3 { font-size: 0.75em; font-weight: 500; } disc bd i { min-width: 105px; min-height: 105px; position: absolute; right: 4px; top: 4px; } disc bd i img { transform: rotate(18deg); } /*EbookType*/ ceteo { display: grid; grid-template-columns: auto 97px; min-width: 266px; border: 1px solid var(--bc); padding: 1px; margin-right: 11px; border-radius: 7px; position: relative; overflow: hidden; height: 77px; gap: 28px; background: var(--b-t22); } ceteo:hover { box-shadow: inset 0px 0px 0px 2px var(--c0); transition: 333ms; } ceteo hd { margin: 11px; margin-right: 0; } ceteo hd h3 { font-size: 0.75em; font-weight: 500; } ceteo bd i { min-width: 105px; min-height: 105px; position: absolute; right: 4px; top: 4px; } ceteo bd i img { transform: rotate(18deg); } /*Art*/ books header { position: relative; width: unset; background: unset; } caro { display: grid; border-radius: 11px; padding: 22px; margin-top: 22px; background: linear-gradient(9deg, var(--bg) 33%, var(--b) 99%);} caro hd all { display: flex; align-items: center; gap: 11px; } caro hd all h3 { font-size: 1.11em; font-weight: 400; margin-bottom: 4px; } caro hd all i { max-width: 18px; max-height: 18px; transform: rotate(270deg); } caro hd h1 { font-size: 3.25rem; font-weight: 400; font-family: auto; } caro>bd { padding: unset; } caro bd p { font-size: 1.125rem; font-weight: 400; text-align: start; } caro ft { display: block; border-bottom: 1px solid var(--bc); } caro ft ul { padding: 0; } caro ft ul a { font-size: 1.11em; margin-right: 32px; font-weight: 400; padding: 14px 0; white-space: nowrap; } @media screen and (max-width: 999px) { caro { padding: 0 11px; background : unset; } caro ft { display: grid; overflow: scroll; } caro ft ul { display: flex; margin: unset; } } /*Ebook*/ cebo { display: grid; grid-template-rows: 200px auto auto; max-width: 111px; min-width: 211px; margin-right: 22px; position: relative; border-bottom: solid 1px var(--bc); background: var(--b); } cebo hd { display: flex; justify-content: center; height: 77%; } cebo hd i { min-width: 133px; min-height: 177px; margin-top: 32px; } cebo hd i img { box-shadow: 0 4px 6px rgba(0, 0, 0, .2); border-radius: 3px; } cebo bd { display: grid; padding: 0 11px; margin-bottom: 11px; margin-top: 22px; } cebo bd h4 { font-size: .875rem; font-weight: 400; margin-bottom: 7px; } cebo bd h3 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; font-size: 1.25em; font-weight: 500; } cebo bd span { text-decoration: underline; font-size: 1.11em; font-weight: 400; } cebo ft { display: grid; grid-template-columns: auto 55px; align-items: center; padding: 11px; padding-top: 0; } cebo ft bl { display: grid; grid-template-rows: 22px auto; } cebo ft bl ul { display: flex; padding: unset; align-items: center; margin: 0; gap: 7px; } cebo ft bl ul i { min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; } cebo ft bl ul i svg { fill: #e47b01; } cebo ft btn { display: flex; justify-content: center; align-items: center; margin-left: 11px; padding: 12px; padding-left: 15px; border-radius: 33px; z-index:999; } cebo ft btn i { display: grid; width: 100%; height: 100%; } cebo ft btn:hover { background: var(--bc); } /*Trending*/ books d.aerea { display: block; margin: unset; } ctno { display: grid; position: relative; background: var(--bg); padding: 22px; } ctno>hd { margin-bottom: 22px; } ctno hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } ctno hd h3 { font-size: 1.125rem; font-weight: 400; } ctno bd { display: grid; overflow: scroll; } ctno bd boxs { display: flex; } ctno bd boxs box { display: grid; grid-template-rows: 200px auto auto; max-width: 111px; min-width: 211px; margin-right: 22px; position: relative; border-bottom: solid 1px var(--bc); background: var(--b); } ctno bd boxs box hd { display: flex; justify-content: center; height: 77%; } ctno bd boxs box hd i { min-width: 133px; min-height: 177px; margin-top: 32px; } ctno bd boxs box hd i img { box-shadow: 0 4px 6px rgba(0, 0, 0, .2); border-radius: 3px; } ctno bd boxs box bd { display: grid; padding: 0 11px; margin-bottom: 11px; margin-top: 22px; } ctno bd boxs box bd h4 { font-size: .875rem; font-weight: 400; margin-bottom: 7px; } ctno bd boxs box bd h3 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; font-size: 1.25em; font-weight: 500; } ctno bd boxs box bd span { text-decoration: underline; font-size: 1.11em; font-weight: 400; } ctno bd boxs box ft { display: grid; grid-template-columns: auto 55px; align-items: center; padding: 11px; padding-top: 0; } ctno bd boxs box ft bl { display: grid; grid-template-rows: 22px auto; } ctno bd boxs box ft bl ul { display: flex; padding: unset; align-items: center; margin: 0; gap: 7px; } ctno bd boxs box ft bl ul i { min-width: 16px; min-height: 16px; max-width: 16px; max-height: 16px; } ctno bd boxs box ft bl ul i svg { fill: #e47b01; } ctno bd boxs box ft btn { display: flex; justify-content: center; align-items: center; margin-left: 11px; padding: 12px; padding-left: 15px; border-radius: 33px; z-index:999; } ctno bd boxs box ft btn i { display: grid; width: 100%; height: 100%; } ctno bd boxs box ft btn:hover { background: var(--bc); } ctno scroll { height: 100%; left: 6px; } ctno scroll btn { display: flex; align-items: center; } ctno scroll btn:hover { box-shadow: inset 0px 0px 0px 2px var(--c); } ctno scroll btn i { min-width: 28px; min-height: 28px; transform: rotate(90deg); } ctno scroll:last-child { display:grid; right: 6px; transform: rotate(180deg); left: unset; } @media screen and (max-width: 999px) { trending { margin: unset; } ctno { margin: 22px 0; background: unset; padding: 0 11px; } ctno bd boxs box { min-width: 194px; } } /*NewNoteworthy*/ cnwo { display: grid; position: relative; background: var(--bg); padding: 22px; } cnwo>hd { margin-bottom: 22px; } cnwo hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } cnwo>bd { display: grid; padding: unset; margin: unset; overflow: scroll; } cnwo bd h4 { font-weight: 100; font-size: 1em; margin-bottom: 11px; } cnwo bd h3 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 1.44em; font-weight: 500; } cnwo bd span { font-weight: 400; font-size: 1.11em; text-decoration: underline; margin-bottom: 11px; } cnwo bd p { margin: unset; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; display: -webkit-box; font-size: 1em;} cnwo bd newos { display: flex; } cnwo bd newos newo { position: relative; display: grid; margin-right: 28px; min-width: 352px; grid-template-rows: 211px auto auto; border-bottom: 1px solid var(--bc); background: var(--b); } cnwo bd newos newo hd { height: 77%; } cnwo bd newos newo hd i { min-width: 132px; min-height: 175px; margin-top: 24px; } cnwo bd newos newo hd i img { box-shadow: 0 4px 6px rgba(0, 0, 0, .2); border-radius: 3px; } cnwo bd newos newo bd { display: grid; overflow: scroll; padding: 0 18px; margin-bottom: 11px; } cnwo bd newos newo ft { display: grid; grid-template-columns: auto 44px; align-items: center; padding: 18px; } cnwo bd newos newo ft bl { display: grid; grid-template-columns: auto auto; align-items: center;} cnwo bd newos newo ft bl ul { display: flex; padding: unset; margin: 0; align-items: center; gap: 7px; } cnwo bd newos newo ft bl ul i { max-width: 18px; max-height: 18px; } cnwo bd newos newo ft bl ul i svg { fill: #e47b01; } cnwo bd newos newo ft bl t { margin-left: 11px; } cnwo bd newos newo ft btn { border-radius: 33px; padding-left: 3px; z-index:999; } cnwo bd newos newo ft btn:hover { background: var(--bc); } cnwo bd newos newo ft btn i { min-width: 44px; min-height: 44px; } cnwo scroll { left: 6px; display: flex; height: 95%; } cnwo scroll btn { display: flex; align-items: center; } cnwo scroll btn i { min-width: 28px; min-height: 28px; transform: rotate(90deg); } cnwo scroll:last-child { right: 6px; left: unset; } cnwo scroll btn:hover { box-shadow: inset 0px 0px 0px 2px var(--c); } @media screen and (max-width: 999px) { cnwo { padding: 0 11px; margin: 22px 0; background: unset; } cnwo bd newos newo { min-width: 418px; } cnwo bd newos newo ft bl { grid-template-columns: 118px auto; } } /*Discover*/ cdco { display: grid; background: var(--bg); padding: 22px; } cdco>hd { margin-bottom: 22px; } cdco hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } cdco hd h3 { font-size: 1.125rem; font-weight: 400; } cdco bd { display: grid; position: relative; } cdco bd discs { display: flex; overflow: scroll; } cdco bd discs disc { display: grid; grid-template-columns: auto 97px; min-width: 266px; border: 1px solid var(--bc); padding: 1px; margin-right: 11px; border-radius: 7px; position: relative; overflow: hidden; height: 77px; gap: 28px; background: var(--b-t22); } cdco bd discs disc:hover { box-shadow: inset 0px 0px 0px 2px var(--c0); transition: 333ms; } cdco bd discs disc hd { margin: 11px; margin-right: 0; } cdco bd discs disc hd h3 { font-size: 0.75em; font-weight: 500; } cdco bd discs disc bd i { min-width: 105px; min-height: 105px; position: absolute; right: 4px; top: 4px; } cdco bd discs disc bd i img { transform: rotate(18deg); } cdco scroll { left: 6px; height: 100%; } cdco scroll btn { display: flex; align-items: center; } cdco scroll btn i { transform: rotate(90deg); min-width: 28px; min-height: 28px; } cdco scroll:last-child { left: unset; right: 6px; } cdco scroll btn:hover { box-shadow: inset 0px 0px 0px 2px var(--c); } @media screen and (max-width: 999px) { cdco { padding: 0 11px; background: unset; margin: 22px 0; } } /*ThereMore*/ ctmo { display: grid; position: relative; background: var(--bg); padding: 22px; border-radius: 0 0 22px 22px; margin: 0; } ctmo>hd { margin-bottom: 22px; } ctmo hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } ctmo hd h3 { font-size: 1.125rem; font-weight: 400; } ctmo bd { display: grid; } ctmo bd boxs { display: flex; gap: 12px; } ctmo bd boxs box { display: grid; grid-template-rows: 200px auto auto; max-width: 111px; min-width: 211px; position: relative; border-bottom: solid 1px var(--bc); background: var(--b); } ctmo bd boxs box hd { display: flex; justify-content: center; height: 77%; } ctmo bd boxs box hd i { min-width: 133px; min-height: 177px; margin-top: 32px; } ctmo bd boxs box hd i img { box-shadow: 0 4px 6px rgba(0, 0, 0, .2); border-radius: 3px; } ctmo bd boxs box bd { display: grid; padding: 0 11px; margin-bottom: 11px; margin-top: 22px; } ctmo bd boxs box bd h4 { font-size: .875rem; font-weight: 400; margin-bottom: 7px; } ctmo bd boxs box bd h3 { -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; display: -webkit-box; font-size: 1.25rem; font-weight: 500; } ctmo bd boxs box bd span { text-decoration: underline; font-size: 1.11em; font-weight: 400; } ctmo bd boxs box ft { display: grid; grid-template-columns: auto 55px; align-items: center; padding: 11px; padding-top: 0; } ctmo bd boxs box ft bl { display: grid; grid-template-rows: 22px auto; } ctmo bd boxs box ft bl ul { display: flex; padding: unset; align-items: center; margin: 0; } ctmo bd boxs box ft bl ul i { min-width: 16px; min-height: 16px; } ctmo bd boxs box ft bl ul i svg { fill: #e47b01; } ctmo bd boxs box ft btn { display: flex; margin-left: 11px; padding: 11px; padding-left: 15px; border-radius: 33px; z-index: 999; } ctmo bd boxs box ft btn:hover { background: var(--bc); } ctmo bd boxs box ft btn i { display: grid; width: 100%; height: 100%; } ctmo>ft { display: flex; margin: auto; } ctmo>ft btn { display: grid; margin-top: 33px; } ctmo>ft btn t { background: var(--btn); color: var(--b); padding: 11px 22px; border-radius: 9px; padding-bottom: 14px; font-size: 1em; font-weight: 500; } @media screen and (max-width: 999px) { ctmo { margin: unset; padding: 0 11px; background: unset; } ctmo bd boxs { display: grid; grid-template-columns: auto auto; } ctmo bd boxs box { min-width: 196px; } ctmo>ft { display: grid; margin: unset; } ctmo>ft btn t { text-align: center; } } /*Read*/ crdo { display: grid; grid-template-columns: 44% auto; background: var(--bg); border-radius: 11px; margin-top: 40px; } crdo hd { display: flex; flex-direction: column; justify-content: center; margin-left: 77px; margin-right: 38px; } crdo hd h2 { font-size: 2.44em; font-weight: 500; font-family: auto; line-height: 1.3; margin-bottom: 11px; } crdo hd h3 { font-size: 1.125rem; font-weight: 400; margin-bottom: 14px; line-height: 1.5; } crdo hd btn { display: flex; } crdo hd btn t { background: var(--btn); color: var(--b); padding: 11px 22px; border-radius: 7px; padding-bottom: 14px; font-size: 1em; font-weight: 500; margin-bottom: 14px; } crdo hd p { font-size: 0.88em; margin: 0; } crdo hd p span { font-weight: 500; } crdo bd { display: grid; align-items: end; } crdo bd i { min-width: 502px; min-height: 358px; justify-content: end; padding-right: 11px; } @media screen and (max-width: 999px) { crdo { display: block; margin: 22px 0; padding: 0 11px; background: unset; } crdo hd { margin: unset; margin-bottom: 22px; } crdo bd i { display: block; min-width: unset; padding: unset; } } /*About*/ cauo { display: grid; margin: 44px 0; background: var(--bg); padding: 22px; border-radius: 22px; } cauo hd { margin-bottom: 11px; } cauo hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } cauo bd { display: grid; } cauo bd p { margin: 0; font-size: 1.11em; margin-bottom: 14px; font-weight: 400; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; display: -webkit-box; width: 88%; color: var(--c0); } cauo bd btn { display: flex; } cauo bd btn t { font-size: 1.11em; text-decoration: underline; font-weight: 400; } .read cauo bd p { display: unset; } .read cauo bd btn { display: none; } @media screen and (max-width: 999px) { cauo { margin: unset; padding: 0 11px; margin-bottom: 22px; background: unset; } cauo bd p { width: unset; } } /*book*/ book d.aerea { display: block; } book main { max-width: unset; width:unset;} /*TrialAbout*/ book header { position: relative; } ctao { display: grid; grid-template-columns: auto auto; margin: 11px 24px; align-items: center; gap: 166px; background: linear-gradient(9deg, var(--bg) 33%, var(--b) 99%); padding: 22px; border-radius: 22px; } ctao hd { display: block; padding: 44px 0; } ctao hd h2 { font-size: 1.625rem; font-weight: 400; font-family: auto; } ctao hd p { font-size: 1em; font-weight: 500; color: var(--c0); } ctao hd btn { display: flex; } ctao hd btn t { background: var(--btn); color: var(--b); padding: 11px 22px; font-weight: 500; border-radius: 6px; padding-bottom: 15px; } ctao bd { display: block; } ctao bd i { min-width: 422px; min-height: 191px; margin-top: 55px; } ctao ft { display: none; } @media screen and (max-width: 999px) { ctao { display: grid; grid-template-columns: unset; gap: unset; margin: unset; padding: unset; } ctao hd { grid-row-start: 2; padding: 22px; padding-top: unset; } ctao hd h2 { text-align: center; font-size: 1.33em; } ctao hd p { text-align: center; font-size: 0.88em; font-weight: 400; } ctao hd btn { justify-content: center; } ctao bd { display: none; } ctao ft { display: block; } } /*Ebook*/ EbookNovel { grid-template-columns: auto auto; gap: 44px; display: grid; background: var(--bg); padding: 22px; border-radius: 11px; } craso { display: grid; grid-template-columns: 66px auto; align-items: center; min-width: 266px; gap: 11px; margin-right: 11px; border: 1px solid var(--bc); border-radius: 7px; background: var(--b-t22); } craso:hover { box-shadow: inset 0px 0px 0px 2px var(--c0); transition: 333ms; } craso hd { margin: 11px; margin-right: 0; } craso hd i { background: var(--bc); padding: 15px; border-radius: 44px; max-width: 22px; max-height: 22px; } craso bd h3 { font-size: 1rem; font-weight: 500; } /*EbookNovel*/ cbto { display: grid; margin: 22px 0; } cbto hd { display: grid; grid-template-rows: 44px auto; margin-bottom: 11px; } cbto hd pf { display: flex; align-items: center; } cbto hd pf h4 { font-size: .875rem; font-weight: 400; line-height: 1.5; margin: 0; } cbto hd pf i { max-width: 22px; max-height: 22px; min-width: 22px; min-height: 22px; } cbto>hd>h1 { font-size: 2.5625em; font-weight: 400; font-family: auto; margin: 0; } cbto bd { display: grid; } cbto bd pff { display: grid; grid-template-columns: 22px auto; margin-bottom: 11px; } cbto bd pff>btn { font-size: 16px; font-weight: 500; text-decoration: underline; } cbto bd t { display: flex; gap: 7px; margin-bottom: 11px; } cbto bd t ul { display: flex; padding: unset; margin: unset; gap: 7px; align-items: center; } cbto bd t ul i { min-width: 18px; min-height: 18px; } cbto bd t ul i svg { fill: #e47b01; } cbto bd t sp { margin-left: 7px; } cbto bd t>btn { text-decoration: underline; margin-left: 11px; font-size: 16px; font-weight: 500; } cbto bd h2 { font-size: 1.625rem; font-weight: 400; font-family: auto; margin-bottom: 11px; } cbto bd strong { font-size: 1em; font-weight: 400; margin-bottom: 18px; } cbto bd strong em { font-weight: 500; } cbto bd p { margin: 0; font-size: 1em; margin-bottom: 14px; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; display: -webkit-box; } cbto bd>btn { display: flex; } cbto bd>btn>t { font-size: 1.11em; text-decoration: underline; font-weight: 500; } .read cbto bd p { display: unset; } .read cbto bd>btn { display: none; } cbto ft { display: grid; } cbto ft cdco { background: unset; padding : 22px 0; } cbto ft bl { display: flex; gap: 88px; } cbto ft bl d { display: grid; } cbto ft bl d h6 { font-size: .77em; font-weight: 400; margin-bottom: 11px; } cbto ft bl d h5 { font-size: 1rem; font-weight: 500; text-decoration: underline; } @media screen and (max-width: 999px) { ebooknovel { display: grid; grid-template-columns: unset; padding: 0 11px; background: unset; } cbto ft bl { display: block; } } /*Author*/ abto { display: grid; background: var(--bg); padding: 22px; border-radius: 22px; margin: 11px 0; } abto>hd { display: grid; margin-top: 22px; } abto hd d { display: grid; grid-template-columns: 88px auto; align-items: center; margin-bottom: 22px; } abto hd d i { background: var(--bc); border-radius: 47px; font-style: normal; font-size: 1.22em; font-weight: 500; height: 80px; width: 80px; } abto hd d b { display: grid; margin-left: 11px; } abto hd d b h4 { font-size: .875rem; font-weight: 400; } abto hd d b h2 { font-size: 1.8125rem; font-weight: 400; font-family: auto; } abto hd p { margin: 0; font-size: 1.11em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 55%; line-height: 1.4; margin-bottom: 14px; color: var(--c0); font-weight: 400; } abto hd btn { display: flex; } .read abto hd p { display: unset; } .read abto hd btn { display: none; } abto hd btn t { text-decoration: underline; font-size: 1.11em; font-weight: 500; } abto bd ctmo { display: grid; justify-content: start; margin: 0; margin-top: 22px; padding: 22px 0; background: unset; } abto bd ctmo boxs { display: flex; } abto>ft { display: block; } abto ft cdco { padding: unset; background: unset; } abto ft discs disc { display: grid; grid-template-columns: 66px auto; align-items: center; } abto ft discs disc hd i { background: var(--bc); padding: 15px 0; border-radius: 44px; } abto ft discs disc bd h3 { font-size: 1rem; font-weight: 500; } @media screen and (max-width: 999px) { abto { display: grid; padding: 0 11px; background: unset; } abto hd p { width: unset; } abto bd ctmo { padding: unset; } abto bd ctmo boxs { display: grid; grid-template-columns: auto auto; } abto bd ctmo boxs box { min-width: 196px; } } /*related*/ related ctno { background: unset; } @media screen and (max-width: 999px) { related { padding: 0 11px; background: unset; } related ctno { padding: unset; } } /*RelatedArticles*/ cbro { display: grid; position: relative; background: var(--bg); padding: 22px; border-radius: 0px 0px 22px 22px; } cbro>hd { display: block; margin-bottom: 21px; } cbro hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; } cbro>bd { display: grid; overflow: scroll; } cbro craos { display: flex; } cbro crao { display: grid; min-width: 212px; max-width: 212px; background: var(--b); margin-right: 22px; } cbro crao hd { display: grid; padding: 0 14px; margin-top: 33px; margin-bottom: 11px; } cbro crao hd i { max-width: 48px; max-height: 48px; background: var(--bc); padding: 11px 0; border-radius: 44px; font-style: normal; font-weight: 500; } cbro crao hd h5 { font-size: .875rem; font-weight: 400; margin: 7px 0; color: var(--c0); } cbro crao hd h3 { font-size: 1.44em; font-weight: 500; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } cbro crao hd h4 { font-size: 1em; font-weight: 500; color: var(--c0); } cbro crao bd { display: grid; } cbro crao bd i { display: flex; min-width: 155px; min-height: 155px; } cbro crao bd i img { visibility: visible; width: 100%; height: 100%; } cbro crao ft { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 14px; } cbro crao ft i { max-width: 33px; max-height: 33px; min-width: 33px; min-height: 33px; padding: 4px 0px; padding-left: 7px; border-radius: 26px; z-index: 999; } cbro crao ft i:hover { background: var(--bc); } cbro ft cdco { background: unset; padding : 22px 0; } cbro scroll { left: 6px; height: 73%; } cbro scroll btn { display: flex; align-items: center; } cbro scroll btn i { min-width: 28px; min-height: 28px; transform: rotate(90deg); } cbro scroll:last-child { right: 6px; left: unset; } cbro scroll btn:hover { box-shadow: inset 0px 0px 0px 2px var(--c); } cbro ft scroll { height:100% } @media screen and (max-width: 999px) { cbro { padding: 0 11px; margin: 22px 0; background : unset; } cbro crao { min-width: 196px; } cbro ft cdco { padding: unset; } } /*bookrating*/ crto { display: grid; margin: 22px 0; background: var(--bg); padding: 22px; border-radius: 22px; } crto hd { display: grid; } crto hd h2 { font-size: 1.88em; font-weight: 500; font-family: auto; margin-bottom: 14px; } crto hd d { display: flex; margin-bottom: 11px; } crto hd d ul { display: flex; padding: unset; margin: unset; align-items: center; gap: 5px; } crto hd d ul i { max-width: 20px; max-height: 20px; min-width: 20px; min-height: 20px; } crto hd d ul i svg { fill: #e47b01; } crto hd d t { font-size: 1.25rem; font-weight: 500; margin-left: 18px; color: var(--c0); } crto hd pf { display: flex; align-items: center; margin-bottom: 11px; } crto hd pf h4 { font-size: 16px; font-weight: 400; } crto hd pf i { max-width: 22px; max-height: 22px; } crto bd { display: grid; padding: 33px; background: var(--b); border-radius: 7px; } crto bd h3 { font-size: 1rem; font-weight: 500; margin-bottom: 11px; } crto bd pff { display: flex; align-items: center; margin-bottom: 11px; } crto bd pff ul { display: flex; padding: unset; margin: unset; align-items: center; gap: 7px; } crto bd pff ul i { max-width: 20px; max-height: 20px; min-width: 20px; min-height: 20px; border: 1px solid; padding: 5px; border-radius: 5px; } crto bd pff h5 { margin-left: 18px; font-size: 1.11em; font-weight: 400; color: var(--c0); } crto bd h6 { font-size: .875rem; font-weight: 400; color: var(--c0); } crto bd aa { display: grid; border: 1px solid var(--bor); border-radius: 9px; margin: 11px 0; height: 77px; padding: 7px; } crto bd aa input { height: 28px; padding: 0px 11px; color: var(--c0); font-weight: 500; font-size: 1em; } crto ft { display: grid; grid-template-columns: 288px auto auto; padding: 48px 0; border-bottom: 1px solid var(--bor); } crto ft bl { display: grid; } crto ft bl h2 { font-size: 1.125rem; font-weight: 500; margin-bottom: 11px; } crto ft bl d { display: flex; align-items: center; } crto ft bl d ul { display: flex; padding: unset; margin: unset; align-items: center; gap: 5px; } crto ft bl d ul i { max-width: 16px; max-height: 16px; min-height: 16px; min-width: 16px; } crto ft bl d ul i svg { fill: #e47b01; } crto ft bl d t { color: var(--c0); margin-left: 11px; } crto ft bl p { font-size: 16px; margin: 0; } crto ft bl>t { display: flex; align-items: center; gap: 7px; margin-top: 22px; } crto ft bl>t span { font-size: 16px; color: var(--c); } crto ft bl t i { max-width: 20px; max-height: 20px; min-width: 20px; min-height: 20px; } crto ft bl>t h7 { font-size: 1rem; font-weight: 500; } @media screen and (max-width: 999px) { crto { padding: 0 11px; background: unset; } crto hd { margin-bottom: 11px; } crto bd pff { display: grid; gap: 7px; margin-bottom: 22px; } crto bd pff h5 { margin: unset; } crto ft { grid-template-columns: unset; gap: 11px; } } /*DefiningGig*/ cdgo { display: grid; background: var(--0); padding: 22px; border-radius: 11px; grid-template-rows: auto auto 44px; align-items: center; box-shadow: var(--bs-b); } cdgo hd { display: grid; } cdgo hd h2 { font-size: 1.22em; font-weight: 500; margin-bottom: 11px; font-family: math; } cdgo hd i { width: 100%; height: auto; } cdgo i iframe { width: 100%; height: 188px; border-radius: 4px; } cdgo bd { display: grid; } cdgo bd ul { padding-left: 22px; } cdgo bd ul li { font-size: 1em; font-weight: 400; } cdgo ft { display: grid; grid-template-columns: 44px auto; align-items: center; } cdgo ft i { background: var(--bc); padding: 6px 0; border-radius: 33px; min-width: 33px; min-height: 33px; } cdgo ft t { margin-left: 11px; font-size: 1em; font-weight: 500; color: var(--a); } /*Gigs*/ sgso d.aerea { display: block; } sgso header>nv { display: grid; grid-template-columns: 88px auto; align-items: center; margin : 0 12px; } sgso nv hd { display: block; } sgso nv hd b { font-size: 15px; padding: 0 11px; } sgso nv bd { display: flex; margin-left: 11px; overflow: scroll; } sgso nv bd ul { display: flex; padding: unset; margin: unset; } sgso nv bd a { font-size: 13px; font-weight: 500; padding: 7px 11px; border: 1px solid var(--bc); background: var(--b-t44); margin: 15px 0; border-radius: 6px; margin-right: 7px; width: max-content; } sgso nv bd a:hover { border: 1px solid #95979d; } @media screen and (max-width: 999px) { sgso header>nv { margin: unset; } } /*GigsFilter*/ sgso d.sidebar { padding: unset; } sgso d.aerea sidebar { width: unset; position: relative; } cgfo { display: grid; margin: 11px 0; } cgfo hd { margin-bottom: 11px; } cgfo hd h1 { font-size: 28px; font-weight: 400; } cgfo bd { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; margin-bottom: 22px; } cgfo bd d { display: flex; align-items: center; } cgfo bd d btn { display: grid; grid-template-columns: auto auto; align-items: center; padding: 9px 18px; border: 1px solid var(--bc); margin-right: 11px; border-radius: 11px; gap: 11px; line-height: 1.5; } cgfo bd d btn t { font-size: 16px; font-weight: 500; } cgfo bd d btn i { max-width: 18px; max-height: 18px; min-width: 18px; min-height: 18px; } cgfo bd pf { display: grid; } cgfo bd pf ac1 { display: grid; grid-template-columns: auto auto; align-items: center; font-size: 16px; font-weight: 600; color: var(--c0); } cgfo bd pf ac1 bb { color: var(--aa); height: 21px; width: 44px; box-shadow: inset 0 0 0 1px; position: unset; margin: 0 11px; position: relative; overflow: hidden; } cgfo bd pf ac1 bb oo { width: 20px; height: 20px; margin: 0; } cgfo ft { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; } cgfo ft h4 { font-size: 16px; font-weight: 400; color: var(--c0); } cgfo ft>bl { display: flex; background: unset; padding: unset; align-items: center; border-radius: unset; } cgfo ft>bl sp { color: var(--c0); font-size: 16px; font-weight: 400; } cgfo ft>bl btn { display: grid; grid-template-columns: auto auto; align-items: center; padding: 9px 14px; gap: 11px; line-height: 1.5; border-radius: 11px; } cgfo ft>bl btn t { font-size: 16px; font-weight: 500; } cgfo ft>bl btn i { max-width: 18px; max-height: 18px; min-width: 18px; min-height: 18px; } cgfo ft>bl btn:hover { background: var(--bc); } @media screen and (max-width: 999px) { cgfo { padding: 0 11px; } cgfo bd { overflow-x: scroll; overflow-y: hidden; } cgfo bd d btn { white-space: nowrap; } cgfo bd pf { white-space: nowrap; } cgfo ft>bl { margin: unset; } } /*gigs*/ sgso d.aerea main { width: unset; max-width: unset; } cigo { display: grid; background: var(--bc); padding: 22px; border-radius: 22px; margin: 22px 0; } cigo>hd { display: grid; grid-template-columns: 55px auto; margin-bottom: 22px; } cigo>hd i { max-width: 54px; max-height: 54px; min-width: 54px; min-height: 54px; border-radius: unset; } cigo>hd i img { margin-right: 12px; margin-top: 9px; } cigo>hd d { display: grid; margin-left: 7px; } cigo>hd d h2 { font-size: 24px; font-weight: 700; } cigo>hd d p { font-size: 16px; font-weight: 400; margin: 0; padding-top: 7px; } cigo>bd { display: grid; gap: 22px; } @media screen and (max-width: 999px) { cigo { background: unset; padding: 0 11px; } sgco hd i img { width: 100%; height: 100%; } cigo>bd { display: block; } } /*Gigs*/ cigo bd gigscards { display: flex; gap: 12px; } cigo bd gigscards sgco { display: grid; grid-template-rows: auto auto auto; max-width: 265px; min-width: 265px; background: var(--b); border-radius: 11px; box-shadow: 0 4px 6px rgba(0, 0, 0, .2); } sgco>hd { display: block; overflow: hidden; position: relative; } sgco hd>i { object-fit: contain; height: 100%; } sgco hd i img { border-radius: 11px 11px 0 0; position: relative; } sgco hd span { position: absolute; right: -33px; top: 66px; } cigo bd gigscards sgco:hover hd span { right: 14px; transition: 99ms; } sgco>hd>span>i { max-width: 22px; max-height: 22px; min-width: 22px; min-height: 22px; background: var(--b); border-radius: 37px; padding: 4px; transform: rotate(270deg); } sgco>hd hart { position: absolute; top: 16px; right: 16px; } sgco>hd hart>i { width: 66px; height: 33px; } sgco bd { display: grid; padding: 11px; } sgco bd bl { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; } sgco bd bl d { display: flex; align-items: center; gap: 5px; } sgco bd bl d i { max-width: 24px; max-height: 24px; } sgco bd bl d i img { border-radius: 22px; } sgco bd bl d h4 { font-size: 14px; font-weight: 700; } sgco bd bl d aa { display: flex; gap: 2px; } .level svg { fill: var(--c0); } sgco bd p { font-size: 16px; font-weight: 400; margin: 0; margin-bottom: 11px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; position: relative; } sgco bd p:hover { text-decoration: underline; } sgco bd h3 { display: flex; align-items: center; font-size: 16px; font-weight: 700; margin-bottom: 6px; gap: 4px; } sgco bd h3 i { max-width: 15px; max-height: 15px; min-width: 15px; min-height: 15px; } sgco bd h3 i svg { fill: #e47b01; } sgco bd h3 span { color: var(--c0); font-weight: 500; } sgco ft { display: grid; grid-template-columns: 22px auto; align-items: center; padding: 0 11px; padding-bottom: 11px; } sgco ft i { max-width: 16px; max-height: 16px; min-width: 16px; min-height: 16px; } sgco ft t { font-size: 14px; font-weight: 600; } cigo>ft { display: flex; padding: 44px 0; margin: auto; } cigo>ft bl { display: grid; grid-template-columns: 44px auto 44px; align-items: center; gap: 7px; } cigo>ft bl btn { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid; border-radius: 44px; } cigo>ft bl btn i { max-width: 16px; max-height: 16px; transform: rotate(180deg); } cigo>ft bl t { display: flex; } cigo>ft bl t aa { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; color: var(--c0); font-weight: 500; } cigo>ft bl t aa:hover { color: var(--c); } cigo>ft bl t aa:hover::after { content: ''; position: absolute; border-bottom: 2px solid var(--c); width: 14px; bottom: 35%; } @media screen and (max-width: 999px) { cigo bd gigscards { display: block; } cigo bd gigscards sgco { margin: 11px; max-width: unset; } cigo>ft { width: 100%; overflow-x: scroll; overflow-y: hidden; } } /*RecommendedGigs*/ cgups { display: grid; background: var(--b); padding: 22px; border-radius: 11px; margin: 11px; } cgmo>hd { margin-bottom: 22px; } cgmo hd h2 { font-size: 24px; font-weight: bold; } cgmo>bd { display: block; overflow: scroll; } cgmo>bd gigscards { display: flex; gap: 12px; } cgmo>bd gigscards sgco { max-width: 232px; min-width: 232px; border-radius: 11px; background: var(--bt); box-shadow: var(--bs-bb); } cgmo scroll { height: 100%; left: 6px; } cgmo scroll:last-child { right: 6px; left: unset; } cgmo scroll btn { display: flex; align-items: center; justify-content: center; } cgmo scroll btn i { min-width: 28px; min-height: 28px; max-width: 28px; max-height: 28px; transform: rotate(90deg); } /*portfolio*/ cgups { display: grid; background: var(--b); padding: 22px; border-radius: 11px; margin: 11px; } cgups hd { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; } cgups hd h3 { font-size: 16px; font-weight: 500; } cgups hd i { max-width: 16px; max-height: 16px; background: var(--c0); padding: 3px 1px; border-radius: 28px; } cgups hd i svg { fill: var(--b); } cgups hd sp { font-size: 10px; font-weight: 500; background: var(--btn); color: var(--b); padding: 1px 6px; border-radius: 7px; } cgups bd { display: grid; grid-template-columns: 50% 50%; align-items: center; } cgups bd bl { display: block; border: 1px solid var(--bc); border-radius: 11px; position: relative; margin: 5px; overflow: hidden; } cgups bd bl i { height: 100%; width: 100%; } cgups bd bl i>img { height: 100%; width: 100%; object-fit: cover; } cgups bd bl h4 { color: var(--b); position: absolute; z-index: 999; bottom: 11px; left: 11px; font-size: 16px; font-weight: 500; opacity: 0; } cgups bd bl:hover h4 { opacity: 1; } cgups>ft { display: flex; align-items: center; gap: 11px; position: relative; } cgups ft t { font-size: 16px; font-weight: 400; color: var(--a); text-decoration: underline; } cgups ft i { max-width: 18px; max-height: 18px; min-width: 18px; min-height: 18px; } cgups ft i path { fill: var(--a); } @media screen and (max-width: 999px) { cgups { padding: 16px; } } /* changed by Gagan Nayak */ @media screen and (min-width: 999px) { cgups bd { display: flex; flex-wrap: nowrap; } cgups bd bl { height: 144px; width: 10vw; } } /*packages*/ packages hd { display: block; margin-bottom: 22px; } packages hd h4 { font-size: 20px; font-weight: 500; } cgpco table { font-size: 14px; line-height: 21px; border-spacing: unset; margin-bottom: 22px; min-width: 100%; max-width: 100%; width: 100%; } cgpco .row { color: #74767e; font-weight: 400; padding: 12px 16px; text-align: left; vertical-align: text-top; width: 141px; font-size: 16px; } cgpco .backpage { padding-left: 22px; padding-right: 22px; text-align: left; font-weight: 400; padding-top: 24px; position: relative; padding-bottom: 0; } .jhfvjg td { border-bottom: 1px solid var(--bor); } .backpage div p { font-size: 18px; font-weight: 500; margin: 0; margin-bottom: 11px; } .backpage b { display: grid; font-size: 18px; font-weight: 600; margin-bottom: 11px; } cgpco tr { background: none; } cgpco table tr th { width: 0; } cgpco table tr td { height: unset; border: none; } .bg td { background: var(--b); } .jhfvjg td { border-bottom: 1px solid var(--bor); } cgpco table tr td label { display: flex; margin: 9px 11px; gap: 3px; } cgpco table tr td label input { max-width: 16px; max-height: 16px; } cgpco table tr td label span { font-size: 14px; font-weight: 500; } cgpco table tr td label p { font-size: 14px; font-weight: 500; } cgpco table tr td p { text-align: center; font-size: 16px; font-weight: 500; } cgpco table tr td btn { display: block; background: var(--btn); color: var(--b); border-radius: 5px; padding: 11px 0; text-align: center; width: 88%; margin: 0 11px; font-size: 16px; font-weight: 500; } /*MonthlyPlan*/ cmplo { display: grid; padding: 22px; max-width: 405px; background: var(--b); border-radius: 11px; box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .12); margin: 7px; } cmplo hd { display: grid; grid-template-columns: 44px auto; gap: 7px; margin-bottom: 11px; } cmplo hd i { min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; background: var(--at); border-radius: 44px;} cmplo hd d { display: grid; } cmplo hd d h2 { font-size: 22px; font-weight: 600; } cmplo hd d h4 { font-size: 14px; font-weight: 400; } cmplo bd { display: block; margin-bottom: 11px; } cmplo bd p { margin: auto; font-size: 16px; font-weight: 400; line-height: 1.5; } cmplo ft { display: flex; justify-content: right; } cmplo ft btn { padding: 11px 22px; color: var(--a); font-size: 16px; font-weight: 400; border-radius: 44px; line-height: 1; } @media screen and (max-width: 999px) { .cmplo h2 {font-size: 1.55rem; margin-top: 0px; font-weight: 600;} } /*AllFeatures*/ calfetus { display: grid; } calfetus>h2 { font-size: 32px; font-weight: 700; text-align: center; margin: 22px 0; } calfetus table { display: grid; background: var(--b); padding: 22px; border-radius: 11px; box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .12); } calfetus .basic { display: flex; background: unset; border-bottom: 1px solid var(--bor); } .basic th { display: grid; width: 202px; height: 122px; } .basic th h3 { display: grid; font-size: 16px; font-weight: 400; color: var(--a); align-items: center; } .basic th t { display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; } .basic th t aa { font-size: 18px; font-weight: bold; margin: 0 7px; } .basic th btn {display: grid; font-size: 14px; align-items: center; font-weight: 400; background: var(--btn); color: var(--b); border-radius: 44px; padding: 7px 33px; margin: 0 auto; height: 22px; margin-top: auto; line-height: 1;} .core { display: flex; background: unset; border-bottom: 1px solid var(--bc); } .core td { display: grid; grid-template-columns: auto 22px; border: unset; align-items: center; height: 44px; width: fit-content; gap: 11px; } .core td h2 { color: var(--a); font-size: 20px; font-weight: bold; } .core td i { min-width: 16px; min-height: 16px; border: unset !important; } .core td i svg { fill: var(--a); } .row { display: flex; background: unset; border-bottom: 1px solid var(--bor); } .row:hover { background: #f2f2f7 !important; } .row td { display: flex; width: 215px; height: fit-content; border: none; text-align: center; align-items: center; gap: 11px; justify-content: center; height: 33px; padding: 9px 3px; font-size: 14px;} .row td:first-child { justify-content: start; width: 222px; padding-left: 11px; } .row td h3 { font-size: 16px; font-weight: 400; } calfetus .row td i { max-width: 16px; max-height: 16px; border-radius: 44px; font-style: normal; font-size: 11px; } calfetus td:nth-child(1) i { border: 1px solid var(--a); } .row td i path { fill: var(--a); } /*Frequently*/ cfno { display: grid; margin: 22px 0; } cfno h2 { font-size: 32px; font-weight:500; text-align: center; margin: 22px 0; } cfno bl {display: grid; border-bottom: 1px solid var(--bc); transition: 333ms;} cfno bl hd { display: flex; justify-content: space-between; align-items: center; padding:16px 22px; } cfno bl hd h3 { font-size: 18px; font-weight:400; } cfno bl hd i {max-width: 18px; max-height: 18px; min-width: 18px; min-height: 18px; transition: 333ms;} cfno bl bd { padding: 0 22px; height: 0; transition: 333ms; } cfno bl bd p { font-weight: 400; margin: 0; margin-bottom: 22px; font-size: 0; } bl.more>bd { display: grid; } /*Bestvalue*/ cbvo { display: grid; background: var(--b); max-width: 333px; max-height: 616px; min-width: 333px; min-height: 616px; padding: 22px; position: relative; border-radius: 11px; grid-template-rows: 288px auto 18px; margin: 0 5px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 11%), 0 0px 13px rgb(0 0 0 / 11%); } cbvo hd { display: flex; flex-direction: column; justify-content: center; gap: 14px; } cbvo hd h5 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 400; color: var(--b); background: var(--lg-b); display: block; border-radius: 11px 11px 0 0; height: 22px; } cbvo hd h2 { font-size: 22px; font-weight: 500; color: var(--a); } cbvo hd h3 { font-size: 14px; font-weight: 500; color: var(--c0); } cbvo hd d { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; } cbvo hd d>h3 { color: unset; } cbvo hd btn { display: flex; border: 1px solid var(--a); align-items: center; width: 44%; height: 44px; justify-content: center; border-radius: 44px; font-size: 16px; color: var(--a); margin-top: 18px; } cbvo bd { display: grid; align-items: center; height: 77%; } cbvo bd bl { display: flex; align-items: center; gap: 7px; } cbvo bd bl>i { max-width: 11px; max-height: 11px; min-width: 11px; min-height: 11px; } cbvo bd bl>h3 { font-size: 14px; font-weight: 500; } cbvo bd bl>h3 span { font-size: 12px; font-weight: 400; } cbvo bd bl>i sp { max-width: 12px; max-height: 12px; min-width: 12px; min-height: 12px; border-radius: 44px; font-size: 11px; font-weight: 500; font-style: normal; display: flex; justify-content: center; align-items: center; border: 1px solid var(--a); color: var(--a); } cbvo bd bl>i sp:hover couo { transform: scale(1); } cbvo bd bl h4 { font-size: 12px; font-weight: 400; } cbvo ft { display: flex; align-items: center; } cbvo ft t { font-size: 12px; font-weight: 500; } @media screen and (max-width: 666px) { cmplo { margin: 7px 0; } cfno bl hd { padding: 11px; } } /*pricingbtn*/ hd.cmplo { display: grid; margin: 22px 0; } .cmplo h2 { font-size: 32px; font-weight: 700; text-align: center; margin-top: 44px; margin-bottom: 22px; } .cmplo bl {display: flex; align-items: center; gap: 7px; justify-content: space-between;} .cmplo bl h3 { font-size: 16px; font-weight: 500; } .cmplo d ac1 bb { color: var(--0); height: 23px; width: 44px; margin: 0 11px; position: relative; overflow: hidden; background: var(--bc); border: 1px solid var(--bc); } .cmplo d ac1 bb bo { background: var(--bc); } .cmplo d ac1 bb bo oo { box-shadow: unset; width: 19px; height: 19px; margin-left: 3px; opacity: 0.8; background: var(--aaa); } .cmplo d ac1 .oo bo oo { margin-left: 20px; } .cmplo bl h4 { font-size: 16px; font-weight: 500; color: var(--c0); } .cmplo bl t { background: var(--btn); padding: 0 6px; padding-bottom: 2px; color: var(--b); border-radius: 22px; font-size: 14px; font-weight: 500; } hd.cmplo hd { display: flex; align-items: center; } /*Webinars*/ cwbo { display: grid ; background: var(--b); padding: 16px; min-height: 711px; position: relative; border-radius: 22px; grid-template-rows: max-content auto 22px; margin: 0 7px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 11%), 0 0px 13px rgb(0 0 0 / 11%); margin: 0 auto; } cwbo hd { display: grid; padding: 22px 0; gap: 11px; } cwbo hd h5 { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 500; height: 22px; border-radius: 22px 22px 0 0; background: var(--lg-b); color: var(--b); padding-top: 3px; } cwbo hd h2 { font-size: 22px; font-weight: 500; color: var(--a); } cwbo hd p { font-size: 16px; font-weight: 500; margin: 0; margin-bottom: 11px; } cwbo hd d { display: flex; align-items: center; gap: 11px; } cwbo hd d>btn { display: flex; border: 1px solid var(--bor); padding: 8px; border-radius: 6px; width: 100px; justify-content: space-between; } cwbo hd d btn i { max-width: 20px; max-height: 20px; min-width: 20px; min-height: 20px; } cwbo hd d h3 { font-size: 16px; font-weight: 500; } cwbo hd h6 { font-size: 12px; font-weight: 500; color: var(--c0); } cwbo hd pf {display: flex; width: fit-content;} cwbo hd pf h4 { font-size: 16px; font-weight: 500; } cwbo hd pf h4 aa { font-size: 32px; font-weight: 500; } cwbo hd pf hr { transform: rotate(90deg); width: 46px; height: 2px; margin: auto; } cwbo hd>btn {background: var(--btn); width: fit-content; text-align: center; padding: 7px 22px; border-radius: 22px; color: var(--b); font-size: 16px; font-weight: 400;} cwbo bd { display: grid; height: 52%; } cwbo bd bl { display: flex; gap: 11px; height: fit-content; } cwbo bd bl i { max-width: 11px; max-height: 11px; margin-top: 7px; } cwbo bd bl h3 { font-size: 16px; font-weight: 500; } cwbo ft { display: flex; } cwbo ft t { font-size: 14px; font-weight: 500; } /*EventsPlatform*/ cepo {display: grid; background: var(--b); padding: 16px; border-radius: 22px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 11%), 0 0px 13px rgb(0 0 0 / 11%); position: relative; min-height: 711px;margin:0 7px;} cepo hd h5 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 22px; text-align: center; background: var(--lg-b); border-radius: 22px 22px 0 0; padding-top: 3px; color: var(--b); font-size: 14px; font-weight: 400; } cepo>bd { display: grid; grid-template-columns: auto 33px auto; } cepo bd d {display: grid; grid-template-rows: 44% auto 22px;} cepo bd d hd { display: flex; flex-direction: column; justify-content: center; gap: 11px; padding-bottom: 22px; } cepo bd d hd h2 { font-size: 22px; font-weight: 500; color: var(--a); } cepo bd d hd p { font-size: 16px; font-weight: 400; margin: 0; margin-bottom: 11px; } cepo bd d hd pf { display: flex; gap: 7px; align-items: center; } cepo bd d hd pf btn { display: flex; border: 1px solid var(--bor); width: 100px; height: 24px; padding: 8px; border-radius: 6px; justify-content: space-between; align-items: center; } cepo bd d hd pf i { max-width: 20px; max-height: 20px; min-width: 20px; min-height: 20px; } cepo bd d hd pf h3 { font-size: 16px; font-weight: 400; } cepo bd d hd h6 { font-size: 12px; font-weight: 500; color: var(--c0); } cepo bd d hd h3 { font-size: 16px; font-weight: 400; } cepo bd d hd>btn {border: 1px solid var(--a); color: var(--a); width: 170px; border-radius: 22px; text-align: center; align-content: center; font-size: 16px; font-weight: 400; padding: 7px 0;} cepo bd d bd { display: grid; height: 70%; } cepo bd d bd h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; } cepo bd d bd bl { display: flex; gap: 11px; height: fit-content; } cepo bd d bd bl i { max-width: 11px; max-height: 11px; margin-top: 7px; } cepo bd d bd bl h3 { font-size: 16px; font-weight: 400; } cepo bd d ft { display: flex; } cepo bd d ft t { font-size: 14px; font-weight: 500; } cepo bd hr { width: 2px; height: 100%; margin: auto; } /*FindPlan*/ cfpo { display: grid; grid-template-rows: auto 30% 47%; max-width: 233px; max-height: 718px; min-width: 233px; min-height: 718px; margin: 34px 0; background-image: url(/0/IMG/backgroundbooks.jpg); background-repeat: no-repeat; background-size: 100%; } cfpo bd { display: grid; padding: 0 25px; align-items: end; } cfpo bd h3 { font-size: 22px; font-weight: bold; line-height: 24px; } cfpo bd p { font-size: 14px; font-weight: 400; margin: 0; line-height: 21px; } cfpo bd btn { background: var(--btn); color: var(--b); text-align: center; align-content: center; border-radius: 22px; width: 142px; height: 44px; font-size: 16px; font-weight: 400; } cfpo ft { display: block; } cfpo ft i { max-width: 213px; max-height: 185px; min-width: 213px; min-height: 213px; margin: 54px 10px; } /*Savingsroom*/ spcio savingsroom { display: grid; margin: auto; } csno {display: grid; background: var(--b); padding: 22px; border-radius: 22px; box-shadow: inset 0 0px 1px 0px rgb(0 0 0 / 11%), 0 0px 13px rgb(0 0 0 / 11%); position: relative; width: fit-content;} csno>bd { display: grid; grid-template-columns: auto auto; } csno bd d { display: grid;grid-template-rows: 41% 55% auto; } csno bd d hd { display: flex; flex-direction: column; justify-content: center; margin-bottom: 14px; gap :4px; } csno bd d hd h5 { font-size: 12px; font-weight: 500; color: #4a7d5c; } csno bd d hd h2 { font-size: 22px; font-weight: 500; color: var(--a); } csno bd d hd p { font-size: 16px; font-weight: 400; margin: 0; margin-bottom: 11px; font-style: normal; } csno bd d hd pf { display: flex; gap: 7px; align-items: center; margin-bottom: 11px; } csno bd d hd pf aa { font-size: 32px; font-weight: bold; } csno bd d hd t { display: flex; gap: 7px; } csno bd d hd t btn { padding: 10px 22px; color: var(--b); border-radius: 22px; } csno bd d hd h3 { font-size: 16px; font-weight: 400; } csno bd d hd>btn { border: 1px solid var(--a); color: var(--a); width: 170px; height: 44px; border-radius: 22px; text-align: center; align-content: center; font-size: 16px; font-weight: 400; } csno bd d bd { display: grid; margin-bottom: 11px; } csno bd d bd h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; } csno bd d bd bl { display: flex; gap: 11px; height: fit-content; } csno bd d bd bl i:first-child { max-width: 11px; max-height: 11px; margin-top: 7px; } csno bd d bd bl i { max-width: 14px; max-height: 14px; margin-top: 7px; } csno bd d bd bl i:hover couo { transform: scale(1); } csno bd d bd bl i svg { fill: var(--a); } csno bd d bd bl h3 { font-size: 16px; font-weight: 400; } csno bd d ft { display: flex; } csno bd d ft t { font-size: 16px; font-weight: 400; } csno bd d ft a { font-size: 16px; font-weight: 400; margin-left: 5px; color: var(--a); } @media screen and (max-width:999px) { csno>bd { grid-template-columns: unset; } csno bd d ft { display: block; } csno bd d { display: block; } } /*zoomphone*/ czpo { display: flex; justify-content: center; padding: 22px; background: var(--b); margin: 11px 0; border-radius: 11px; box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .12); } czpo hd { display: flex; flex-direction: column; align-items: center; width: 58%; } czpo hd h2 { font-size: 24px; font-weight: bold; } czpo hd p { font-size: 16px; font-weight: 400; } czpo hd p a { font-size: 14px; font-weight: 500; color: var(--a); margin-left: 6px; } czpo hd btn { border: 1px solid var(--a); padding: 10px 37px; border-radius: 22px; color: var(--a); } @media screen and (max-width:999px) { czpo hd p { font-size: 14px; text-align: center; } czpo hd br { display:block; } czpo hd { width: auto; } } /*Five*/ cfvo { display: grid; } cfvo hd mg {display: flex; justify-content: center; padding: 44px 0; flex-wrap: wrap;} cfvo hd mg i { max-width: 180px; max-height: 93px; min-width: 180px; min-height: 93px; } /*Visitor*/ cvso { display: grid; position: absolute; grid-template-columns: auto auto; max-width: 1226px; max-height: 600px; min-width: 1226px; min-height: 600px; } cvso hd { display: block; background: #000; border-radius: 11px 0 0 11px; } cvso hd i { max-width: 752px; max-height: 560px; min-width: 742px; min-height: 600px; } cvso hd i iframe { width: 100%; height: 77%; } cvso bd { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; max-width: 422px; max-height: 556px; min-width: 422px; min-height: 456px; background: var(--b); position: relative; border-radius: 0 11px 11px 0; } cvso bd d { display: grid; gap: 11px; } cvso bd d pf { display: flex; align-items: center; } cvso bd d pf>i { max-width: 44px; max-height: 44px; min-width: 44px; min-height: 44px; background: var(--at); border-radius: 22px; margin-right: 11px; } cvso bd d pf i logo img { max-width: 30px; max-height: 30px; min-width: 30px; min-height: 30px; } cvso bd d pf h2 { font-size: 22px; font-weight: bold; } cvso bd d pf sp i { position: absolute; max-width: 25px; max-height: 25px; min-width: 25px; min-height: 25px; top: 25px; right: 25px; } cvso bd d h4 { font-size: 16px; font-weight: 500; color: var(--c0); } cvso bd d bl { display: flex; gap: 7px; } cvso bd d bl i { max-width: 11px; max-height: 11px; min-width: 11px; min-height: 11px; margin-top: 7px; } cvso bd d bl i { max-width: 16px; max-height: 16px; min-width: 16px; min-height: 16px; margin-top: 7px; } cvso bd d bl h3 { font-size: 16px; font-weight: 500; } cvso bd p { font-size: 16px; font-weight: 400; padding-top: 18px; border-top: 1px solid var(--bor); margin: 0; color: var(--c0); } /*Essential*/ ceno { display: grid; position: absolute; background: var(--b); padding: 22px; max-width: 936px; max-height: 696px; overflow-y: scroll; border-radius: 11px; margin: 22px; padding-top: 0; scrollbar-width: thin; } ceno hd { display: grid; padding: 44px 17%; position: sticky; top: 0; background: var(--b); z-index: 9999; } ceno hd i { position: absolute; max-width: 18px; max-height: 18px; min-width: 18px; min-height: 18px; top: 22px; right: 7px; } ceno hd h2 { text-align: center; font-size: 32px; font-weight: 500; color: var(--a); } ceno hd p { font-size: 16px; font-weight: 500; text-align: center; margin: 0; letter-spacing: .03em; } ceno bd { display: grid; grid-template-columns: auto auto; column-gap: 30px; padding: 0 60px; margin-bottom: 44px; row-gap: 11px; } ceno bd bl { display: flex; padding: 11px; border-radius: 11px; } ceno bd bl:hover { background: var(--bg); } ceno bd bl i { max-width: 60px; max-height: 60px; min-width: 60px; min-height: 60px; background: var(--aat); margin-right: 11px; } ceno bd bl i img { max-width: 44px; max-height: 44px; min-width: 44px; min-height: 44px; } ceno bd bl pf { display: grid; height: fit-content; gap: 5px; } ceno bd bl pf d { display: flex; box-shadow: unset; padding: unset; gap: 4px; height: fit-content; } ceno bd bl pf d h3 { font-size: 16px; font-weight: 700; letter-spacing: .03em; } ceno bd bl pf d h4 { font-size: 14px; font-weight: 500; color: var(--c0); letter-spacing: .03em; } ceno bd bl pf p { font-size: 12px; font-weight: 500; margin: 0; letter-spacing: .03em; } ceno ft { display: grid; padding: 0 60px; } ceno ft btn { text-align: center; margin: 22px 0; } ceno ft btn a { font-size: 16px; font-weight: 500; color: var(--a); letter-spacing: .03em; } ceno ft btn a:hover { text-decoration: underline; } ceno ft p { font-size: 12px; font-weight: 500; margin: 0; letter-spacing: .03em; } ceno ft p a { color: var(--a); } ceno ft p a:hover { text-decoration: underline; } spcio events { display: flex; } spcio .webn{display:none;} @media screen and (max-width:1099px){ spcio events { display: block; } spcio cwbo { margin: 11px auto; } } @media screen and (max-width:999px){ spcio main .main { border-radius: 0;display: block;padding:11px} spcio main{ margin:0; } spcio events { display: none; } spcio .webn { display: flex; } spcio cwbo { margin: 11px 7px; min-width: 362px; } } czpo hd p /*Essentials*/ spcio flex { gap: 11px; } ceto {display: grid; background: var(--b); padding: 16px; box-shadow: 0 1px 16px rgba(0, 0, 0, .12); border-radius: 11px; min-height: 508px; grid-template-rows: 48% auto; row-gap: 11px; min-width: 333px; margin: 11px 0;} ceto hd { display: grid; } ceto hd h2 { font-size: 22px; font-weight: 500; color: var(--a); } ceto hd p { margin: 0; font-size: 16px; font-weight: 400; color: var(--c0); } ceto hd h3 { font-size: 16px; font-weight: 400; } ceto hd h4 { display: block; font-size: 16px; font-weight: 400; } ceto hd h4 aa { font-size: 32px; font-weight: 700; } ceto hd pf { display: flex; align-items: center; gap: 6px; } ceto hd pf i { max-width: 16px; min-width: 16px; } ceto hd pf i:hover couo { transform: scale(1); font-style: normal; } ceto hd pf i svg { fill: var(--a); } ceto hd btn { border: 1px solid var(--a); width: fit-content; align-content: center; padding: 4px 37px; border-radius: 22px; color: var(--a); font-size: 16px; font-weight: 400; } ceto bd { display: grid; } ceto bd bl {display: flex; align-items: center; column-gap: 7px; flex-wrap: wrap;} ceto bd bl i { max-width: 11px; max-height: 11px; } ceto bd bl h3 { font-size: 16px; font-weight: 400; } ceto bd bl sp i { max-width: 16px; max-height: 16px; } ceto bd bl sp { font-size: 14px; font-weight: 400; color: var(--c0); } conta { display: grid; overflow: scroll; padding: 0 11px; } @media screen and (max-width:999px){ conta { display: grid; overflow: scroll; padding: 0 11px; } ceto {display: grid; background: var(--b); padding: 16px; box-shadow: 0 1px 16px rgba(0, 0, 0, .12); border-radius: 11px; min-height: 508px; grid-template-rows: 48% auto; row-gap: 11px; min-width: 333px; margin: 11px 0;} } /*ZoomScheduler*/ czsn { display: grid; background: var(--b); box-shadow: 0 1px 16px 0 rgba(0, 0, 0, .12); width: fit-content; padding: 22px; border-radius: 22px; max-width: 456px; min-height: 568px; } czsn hd { display: grid; gap: 4px; margin-bottom: 11px; } czsn hd h3 { font-size: 22px; font-weight: 500; color: var(--a); } czsn hd>p { font-size: 16px; font-weight: 400; color: var(--c0); margin: 0; } czsn hd div { display: block; } czsn hd div span { font-size: 16px; font-weight: 500; } czsn hd div amount { font-size: 32px; font-weight: bold; padding: 0 5px; } czsn hd btn { display: flex; align-items: center; margin: 11px 0; } czsn hd btn t { background: var(--btn); color: var(--b); font-size: 16px; padding: 11px 31px; border-radius: 22px; } czsn bd { display: grid; margin-bottom: 7px; } czsn bd bl { display: flex; gap: 7px; } czsn bd bl i { max-width: 11px; max-height: 11px; margin-top: 7px; } czsn bd bl h4 { font-size: 16px; font-weight: 500; } czsn bd bl h4>span { color: var(--c0); font-size: 14px; font-weight: 400; margin-left: 4px; } czsn ft { display: grid; } czsn ft>bl { display: grid; background: var(--bc); padding: 11px; border-radius: 11px; margin-bottom: 11px; } czsn ft>bl t { font-size: 16px; font-weight: 400; background: var(--btn); color: var(--b); padding: 1px 7px; border-radius: 22px; margin-bottom: 11px; width: fit-content; } czsn ft>bl p { margin: 0; font-size: 14px; font-weight: 400; } czsn ft>bl a { font-size: 14px; font-weight: 500; color: var(--a); } czsn ft>bl a:hover { text-decoration: underline; } czsn ft p { font-size: 12px; font-weight: 400; margin: 0; } /*ZoomBundle*/ czbo { display: flex; background: var(--b); padding: 22px; justify-content: center; border-radius: 22px; box-shadow: 0 4px 6px rgba(0, 0, 0, .2); } czbo hd { display: grid; padding: 44px 22px; } czbo hd h2 { font-size: 24px; font-weight: 500; } czbo hd bl { display: grid; grid-template-columns: auto auto; column-gap: 10px; } czbo hd bl d { display: flex; align-items: center; column-gap: 7px; } czbo hd bl d i { max-width: 19px; max-height: 16px; } czbo hd bl d h3 { font-size: 14px; font-weight: 500; } czbo hd bl d sp i { max-width: 16px; max-height: 16px; } czbo hd btn { display: flex; align-items: center; } czbo hd btn t { background: var(--btn); color: var(--b); padding: 11px 31px; border-radius: 22px; } czbo bd { display: grid; } czbo bd i { min-width: 519px; min-height: 324px; } /*Rooms*/ cromo { display: grid; margin: 11px; background: var(--bt); border-radius: 11px; padding: 11px; box-shadow: var(--bt-bx); } cromo hd { display: grid; } cromo hd mg { display: grid; } cromo hd mg bl { display: grid; grid-template-columns: 70px auto 44px; align-items: center; margin: 7px; box-shadow: var(--bt-bx); border-radius: 22px; background: var(--bt); padding: 11px 22px; gap: 2%; } cromo bl i { height: 77px; } cromo bl i img { border-radius: 9px; height: 79%; } cromo hd mg bl d { display: grid; line-height: 24px; margin-left: 5px; } cromo hd mg bl d h3 { font-size: 1em; font-weight: bold; } cromo hd mg bl d h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } cromo hd bl span { display: flex; justify-content: end; } cromo hd bl span i { max-width: 22px; max-height: 22px; } @media screen and (max-width:999px){ cromo hd mg bl { padding: 7px 11px; margin: auto; margin-bottom: 11px; border-radius: 11px; min-width: 94%; } cromo hd bl>i { height: 66px; } cromo { display: grid; margin: 11px; background: var(--bt); border-radius: 11px; padding: 11px; box-shadow: var(--bt-bx); } cromo hd { display: block; overflow-x: scroll; } cromo hd mg { display: flex; gap: 4%; } cromo hd bl { display: grid; grid-template-columns: 66px auto 44px; align-items: center; margin: 7px; box-shadow: var(--bt-bx); border-radius: 11px; min-width: 97%; background: var(--bt); height: 66px; } cromo hd bl>i { max-width: 55px; max-height: 55px; margin: 0 9px; overflow: hidden; } cromo hd bl d { display: grid; line-height: 24px; margin-left: 5px; } cromo hd bl d h3 { font-size: 1em; font-weight: bold; } cromo hd bl d h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } cromo hd bl span { display: flex; justify-content: end; } cromo hd bl span i { max-width: 22px; max-height: 22px; } } /*nalytics*/ cnlo { display: grid; width: 333px; height: auto; background: var(--b); padding: 22px; border-radius: 22px; margin: 11px; } cnlo hd { display: grid; grid-template-columns: 33px auto 33px; align-items: center; margin-bottom: 11px; } cnlo hd i { width: 24px; height: 24px; } cnlo hd d { display: grid; } cnlo hd d h3 { font-size: 1em; font-weight: bold; } cnlo hd d h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } cnlo hd span i { width: 24px; height: 24px; transform: rotate(-45deg); background: var(--b); padding: 4px; border-radius: 44px; } cnlo bd { display: grid; } cnlo bd bl { display: grid; grid-template-columns: 44px auto 33px; align-items: center; background: var(--bc); border-radius: 44px; margin: 7px 0; padding: 8px 11px; column-gap: 2%; } cnlo bd bl sp i { width: 28px; height: 28px; background: var(--b); padding: 7px; border-radius: 44px; } cnlo bd bl b { display: block; line-height: 24px; } cnlo bd bl b h3 { font-size: 1em; font-weight: bold; } cnlo bd bl b h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } cnlo bd bl b span { display: flex; align-items: center; column-gap: 2%; } cnlo bd bl b span hr { transform: rotate(90deg); background: var(--bor); width: 7%; height: 1px; margin: 0; opacity: 0.6; } cnlo bd bl>i { width: 33px; height: 33px; } /*reatedscene*/ crso { display: grid; width: 355px; height: auto; background: var(--b); padding: 11px; border-radius: 22px; margin: 11px; } crso hd { display: grid; grid-template-columns: auto auto; margin-bottom: 11px; } crso hd bl { display: grid; padding: 22px; margin: 5px; background: var(--bc); border-radius: 22px; } crso hd bl bc { display: flex; justify-content: space-between; margin-bottom: 11px; } crso hd bl bc>i { width: 24px; height: 24px; background: var(--b); padding: 9px; border-radius: 22px; } crso hd bl bc span i { width: 24px; height: 24px; } crso hd bl b { display: block; margin-top: 11px; line-height: 22px; } crso hd bl b h3 { font-size: 1em; font-weight: bold; } crso hd bl b h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } crso bd { display: grid; grid-template-columns: 44px auto 88px; align-items: center; background: var(--bc); padding: 11px; border-radius: 44px; column-gap: 2%; } crso bd i { width: 33px; height: 33px; background: var(--b); padding: 7px; border-radius: 22px; } crso bd d { display: block; } crso bd d h3 { font-size: 1em; font-weight: bold; } crso bd d h4 { font-size: 0.88em; font-weight: 500; opacity: 0.6; } crso bd btn { background: var(--btn); color: var(--b); padding: 7px 5px; text-align: center; border-radius: 22px; font-size: 0.88em; font-weight: 500; margin-right: 7px; } /* Payment methods Content Component*/ cvpo h2:nth-child(2) { font-size: 15px; font-weight: 500; } cvpo bd { padding: 3px 11px; } cvpo bd h2 { font-size: 14px; font-weight: 500; } cvpo bd h6 { color: var(--a); } cvpo o { width: 22px; height: 22px; display: flex; border-radius: 22px; border: solid 1px; } spms ad { font-size: 17px; font-weight: 600; color: var(--a); } cvpo { padding: 21px; display: block; background: var(--bt); margin: 7px; border-radius: 11px; } cvpo .this o { box-shadow: inset 0 0 0 3px var(--a); } cvpo o1 { width: 10px; height: 10px; display: flex; border-radius: 22px; background: var(--a); margin: auto; display:none;} cvpo .this o1 { display: block; } cvpo input { outline: 0; border-radius: 4px 7px; display: block; max-width: 100%; border: 0; background: var(--b-t77); color: var(--c); height: 21px; font-weight: bold; padding: 0 22px; } /* Payment method main Content Component*/ spmo cpmom>hd { display: grid; grid-template-columns: 46px auto 133px;align-items: center;column-gap: 6px; } cpmom hd svg { fill: var(--b); } cpmom hd bd { display: flex; align-items: center; font-size: 12px; } cpmom hd bd h1 { font-size: 22px; font-weight: 700; } cpmom hd bd h2 { font-size: 17px; margin-block: 5px 1px; font-weight: 500; } cpmom hd svg { fill: var(--b); width: 26px; } cpmom hd ft t {background: var(--c); padding: 8px; color: var(--b); border-radius: 3px; justify-content: center; align-items: center; display: inline-flex; margin: 1px; } cpmom bd hd { display: block; background: transparent; } cpmom cn div svg { fill: var(--aa); } cpmom .bl ft svg { fill: var(--aa); fill: var(--b); } cpmom .bl svg { width: 25px; } cpmom .bl hd svg { width: 45px; } cpmom .bl bd h1 { color: var(--bor); margin: 1px 8px; } cpmom cn bd { display: flex; font-size: 10px; } cpmom div1 h1 { font-size: 18px; font-weight: 700; } cpmom div1 h2 { font-size: 15px; font-weight: 500; } cpmom div2 h1 { display: grid; grid-template-columns: 91% 6%; align-items: center; border: solid 1px var(--bc); border-radius: 11px;font-size: 20px; } cpmom>bd { display: block; row-gap: 30px; margin-top: 30px; } cpmom cn h1 { font-size: 18px; font-weight: 700; display: flex; } cpmom cn h2 { font-size: 15px; font-weight: 500; } cpmom cvn bl { display: grid; grid-template-columns: 50% 50%; margin-block: 22px; } cpmom date { display: grid; grid-template-columns: 44% 12% 44%; align-items: center; font-size: 22px; font-weight: 700; position: relative; } cpmom cvn input { padding: 7px 28px; margin: 2px; border-radius: 11px; font-size: 18px; font-weight: 700; } cpmom inp p { display: flex; justify-content: center; font-size: 21px; } date.jjtc.cvv1 input.cvv1 { border: solid var(--a); display: flex; background: rgb(234 244 255); } date.jjtc input.cvv { border: solid var(--a) 3px ; display: flex; background: rgb(234 244 255); } cpmom pass { display: grid; grid-template-columns: 91% 6%; align-items: center; font-size: 22px; font-weight: 700; border: solid 1px var(--bc); border-radius: 11px; } cpmom date p { display: flex; justify-content: center; margin-left:8px;} cpmom ft btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; max-width: 500px; margin: auto; font-weight: bold; cursor: pointer; margin: 11px 0; } cpmom ft btn { height: 55px; display: flex; justify-content: center; align-items: center; background: var(--aaa); color: var(--b); border-radius: 7px; box-shadow: var(--bs-bt); width: 100%; margin: auto; font-weight: bold; cursor: pointer; margin: 11px 0; max-width: none; } cpmom hd ft { display: flex; column-gap: 2px; align-items: center; justify-content: end; } cpmom cn input { padding: 0; margin: 0; display: flex; justify-content: center; background: transparent; font-size: 15px; } @media screen and (max-width: 999px){cpmom cvn bl { grid-template-columns: 100%; }} cpmom cn bl { display: grid; grid-template-columns: auto 77px; align-items: center; margin-block: 11px; } /* Payment method sidebar Content Component*/ cpmoc hd { display: flex; justify-content: space-between; align-items: center; } cpmoc hd img { width: 36px; } cpmoc bd h1 { font-size: 18px; font-weight: 500; } cpmoc ft h2 { font-size: 9px; } cpmoc ft h1 { font-size: 21px; display: flex; align-items: center; } cpmoc bd { margin-block: 99px 22px; margin-left: 11px; display: block; } cpmoc cpm { padding: 22px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(44px); box-shadow: var(--btn); border-radius: 22px; box-shadow: var(--bs-bt); } cpmoc::before { content: " "; background: var(--a); width: 92px; height: 17px; position: absolute; top: -7px; border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; left: 0; right: 0; margin: auto; } cpmoi bd bl { display: flex; justify-content: space-between; font-size: 14px; border-radius: 0px; padding-block: 11px; background: transparent; padding: 5px 11px; margin-bottom: 5px; } cpmoi bd h1 { font-size: 16px; font-weight: 500; } cpmoi bl h2 { font-size: 17px; } cpmoi name { font-size: 37px; } cpmoi ft bl { position: relative; grid-template-columns: 254px auto 0px; display: grid; } cpmoi ft t { font-size: 17px; font-weight: 600; } cpmoi ft bl { position: relative; grid-template-columns: 82% 47px 0%; display: grid; align-items: center; background: var(--0); } cpmoi ft bl1 { display: grid; grid-template-columns: 0 100% 0; align-items: center; } cpmoi bl1 hd { background: #d7dae7; clip-path: circle(48.8% at 0 46%); height: 55px; } cpmoi bl1 bd { background: transparent; letter-spacing: 1.7px; font-size: 26px; align-items: center; display: flex; color: var(--bor); justify-content: center; } cpmoi bl1 ft { background: #d7dae7; height: 62px; clip-path: circle(48.8% at 100% 59%); } @media only screen and (max-width: 999px) { cpmoi bl1 ft { background: #d9e1f0; } cpmoi bl1 hd { background: #dde1ee; } } /* Payment method New Content Component*/ .ftt { column-gap: 11px; } /* Meeting_Bot About Content Component*/ grid cmboa bd bl { border: none; border-radius: 0px; width: auto; background: transparent;font-size: 16px; font-weight: 600; } cmboa>bl { background: var(--bt); padding:22px; border-radius: 22px; } grid cmboa bd bl { border: none; } grid cmboa bd bl::after { content: ''; background: black; width: 7px; display: block; height: 7px; position: absolute; border-radius: 22px; left: 0px; top: 19px; } /* Meeting_Bot Overview Content Component*/ @media screen and (max-width: 999px) { sapp d.aerea.sl1 { display: flex ; flex-direction: column-reverse; } } story d.aerea { flex-direction: row; } cato { display: block; background: var(--b-t); border-radius: 11px; padding: 22px; margin: 11px; } cato bd { display: grid ; grid-template-columns: 33% 33% 33%; padding: 22px 11px; grid-gap: 0; position: relative; overflow: hidden; padding-bottom: 0; font-size: 0.66em; } cato bd d.btn { display: grid ; justify-content: center; align-items: center; height: 55px; background: var(--bc); border-radius: 11px; margin: 7px; grid-template-columns: 44px auto; } cato hd d { display: grid ; height: 55px; grid-column-start: 1; grid-column-end: 3; width: 88%; grid-template-columns: 55px auto; align-items: center; margin: auto; } /* Component : AboutOld */ about { display: block; } .abt {display: block; padding: 22px; box-shadow: var(--bs-b); backdrop-filter: blur(11px); background: var(--b-t); margin: 11px; border-radius: 22px; letter-spacing: 1;} /* 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; max-height: 88%; margin: auto; top: 7%; 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:999999;} 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; padding:0px 22px; border-radius: 44px; } 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); border-radius: 11px; } saco steps { opacity: 0; } .form-group { display: block; width: 100%; position: relative; margin-bottom: 22px; } saco .btn { background: var(--aaa); border: unset; color: var(--b); height: 55px; font-size: 1em; font-weight: bold; box-shadow: var(--bs-b); border-radius: 11px; margin: 7px; padding: 0; display: block; text-align: center; place-content: center; } saco .gf { grid-column-start: 1; grid-column-end: 3; display: grid; } 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); } account hd exit { display: flex ; justify-content: center; align-items: center; height: 33px; width: 33px; margin: 0 auto; } account hd exit i{width:33%; height: 33%;} 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: 500; letter-spacing: 0.44px; margin-bottom: 11px; display: block; opacity: 1; margin-left: 11px; } .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 #rpfn{display:none} account.verify #rpln{display:none} account.verify #rpwd{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: none; } 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; box-shadow: 0 -11px 33px var(--bc); 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: grid ; grid-template-columns: 66px auto 66px; overflow: hidden; align-items: center; padding: 7px; } saco>d>hd>i { height: 55%; width: 55%; display: block; margin: auto; } saco>bg { background: var(--b-t22); backdrop-filter: blur(11px); } 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} saco { display: block; background: var(--bt); box-shadow: var(--bs-bt); border-radius: 22px; max-height: 88vh; overflow: hidden; } 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 { border-radius: 11px; 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: 29px; backdrop-filter: blur(3px); display: flex ; 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); } #account>bg { opacity: 0; } saco { border-radius: 0; box-shadow: none; max-height: unset; } } /* Component : AccountDetails */ cpain>bl { display: block; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); } cpain ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between; } cpain hd { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; } cpain svg { filter: grayscale(1); transform: rotate(180deg); height: 27px; width: 27px; } cpain button { border: solid 1px var(--bor); width: 20%; } cpain bd { display: block; padding: 11px 0; } cpain a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cpain p { margin: 0; } cpain bl i { display: none; } cpain b { font-weight: 400; } cpain trc>hd { height: auto; width: auto; background: transparent; border-radius: 0; display: block; } cpain trc { display: grid ; grid-template-columns: auto auto; margin: 16px 0; border-bottom: solid 1px var(--bc); padding-bottom: 11px; } @media screen and (max-width: 999px) { cpain ft { font-size: 12px; } cpain { margin: 11px; max-width: -webkit-fill-available; min-width: 333px; } cpain p { display: none; } cpain button { width: auto; } cpain bl hd { grid-template-columns: unset;} cpain bl { align-items: center; padding: 22px; margin: 0; grid-template-columns: auto 28px; } cpain trc i { display: grid; justify-content: end; } cpain a.Infooption { display: none !important;} cpain a.Infooption { display: block; background: var(--bc); box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; outline: transparent; color: var(--c); text-align: center; top: 2px; } } /* Component : Account_Activity */ cpao trcs>trc { margin: 7px auto; padding: 22px; border-radius: 14px; box-shadow: var(--bs-bs); width: calc(100% - 66px); } cpao { display: grid ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } cpao>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cpao>hd { display: grid; align-items: center; } cpao button { border: solid 1px var(--bor); width: 20%; background: var(--aaa); color: var(--b); border-radius: 9px; } cpao name { font-weight: 400; } cpao>bd { display: grid; padding: 11px 0; gap: 11px; } cpao trc { display: grid; grid-template-columns: 50px auto 100px; border-bottom: solid 1px var(--bc); align-items: center; background: var(--bc); max-width: -webkit-fill-available; } cpao trc bd { font-size: 0.88em; } cpao b { font-weight: 400; } cpao trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } cpao a { font-weight: 400; color: var(--aa); font-size: 0.88em; } cpao h4 { font-weight: 500; } cpao ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } cpao i { height: 100%; } cpao h3 { padding-bottom: 22px; } cpao trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } cpao trc hd { background: transparent; width: 44px; } cppo t { color: var(--a); font-weight: 500; } @media screen and (max-width: 999px) { cpao trc { margin: 11px 0; width: auto; grid-template-columns: 40px auto 23px; } cpao { margin: 11px; max-width: -webkit-fill-available; min-width: 333px; } cpao ad a { grid-column-start: 2; grid-column-end: 4; } cpao ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } cpao button { width: 88%; margin-top: 11px; } cpao ft p { display: none; } cpao trc>ft { display: block; } } msnb> { padding: 0;margin-bottom: 44px; } msnb>bd d { display: grid;justify-content: center;align-items: center;padding: 11px;grid-template-columns: auto auto;grid-gap: 7px; } msnb>bd d ddd { font-size: 2.2em; font-weight: bold; } msnb>bd d>h7 { font-size: 0.66em; } msnb bl bd divider { margin-top: 11px; margin-bottom: 11px; } msnb bl bd divider t { font-size: 0.77em; } msnb bl bd>d { display: grid; grid-template-columns: 50% 50%; border-top: solid 2px; padding: 4px 22px; } msnb bl>ft { margin: 0; } msnb bl>ft aa { position: relative;display: flex;justify-content: center;align-items: center;transition: 77ms;background:var(--aaa);border-radius: 11px;height: 50px;box-shadow: var(--bs-bs);max-width: 244px;margin: 11px auto;color: var(--b);width:88% } msnb bl>ft aa i { height: 22px;width: 22px;margin-right: 0px;fill: #fff; } msnb bl>ft aa f { font-size:1em;font-weight: 600;letter-spacing: 0;margin-left: 7px; } /* Component : Account_dictionary */ ccdo trcs>trc { margin: 7px auto; padding: 22px; border-radius: 14px; box-shadow: var(--bs-bs); width: calc(100% - 66px); } ccdo { display: grid ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } ccdo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } ccdo>hd { display: grid; align-items: center; } ccdo p { margin: 0;} ccdo button { border: solid 1px var(--bor); width: 20%; background: var(--aaa); color: var(--b); border-radius: 9px; } ccdo name { font-weight: 400; } ccdo>bd { display: grid; padding: 11px 0; gap: 11px; } ccdo trc { display: grid; grid-template-columns: 50px auto 100px; border-bottom: solid 1px var(--bc); align-items: center; background: var(--bc); max-width: -webkit-fill-available; } ccdo trc bd { font-size: 0.88em; } ccdo b { font-weight: 400; } ccdo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } ccdo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } ccdo h4 { font-weight: 500; } ccdo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } ccdo i { height: 100%; } ccdo h3 { padding-bottom: 22px; } ccdo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } ccdo trc hd { background: transparent; width: 44px; } @media screen and (max-width: 999px) { ccdo trcs>trc {margin: 11px 0; width: auto; grid-template-columns: 45px auto 22px; } ccdo { margin: 11px;} ccdo ad a { grid-column-start: 2; grid-column-end: 4; } ccdo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } ccdo button { width: 88%; margin-top: 11px; } ccdo ft p { display: none; } ccdo trc>ft { display: block; } } caeo>ec { display:block; } caeo wt{ display: block; padding: 11px 33px; border-radius: 22px; background: #fff6; border: solid 1px #fff; margin-top: 11px;position: relative; overflow: hidden; } caeo ec grid { grid-template-rows: 66px auto; background: linear-gradient( 45deg , rgb(0 136 218 / 11%),rgb(7 110 194 / 11%),rgb(16 76 161 / 11%),rgb(22 55 140 / 11%),rgb(24 47 133 / 11%),rgb(0 26 63 / 11%)); padding: 7px 11px; border-radius: 11px; margin: 11px 7px; } caeo ec f{align-items: center;position:unset;} caeo ec co input{transform: scale(1.1); height: 44px; width: 44px; margin:0 } caeo ec h7{display: flex; align-items: center;letter-spacing: 0; } caeo ec label { margin-left: 11px;} caeo ec input:after { position: absolute; content: ''; z-index: 88; left: 0; right: 0; top: 0; bottom: 0; } caeo ec grid{position:relative} caeo ec co { margin: 7px; border-radius: 11px; overflow: hidden; position: relative; height: 44px; width: 44px;box-shadow:0 0 0 7px rgb(255 255 255 / 22%); border: solid 2px var(--c); } caeo ec co:after { z-index: 888; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } caeo ec a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 8; } caeo ec svg { margin: 22%; height:55%;width:55%} caeo ec bl>bd{ min-height:123px; padding:0; } caeo ec bl>bd>wallet { display:block;min-height:123px; } caeo ec bl>bd trxwallet f { z-index: 8;align-items: center;flex-wrap: wrap; } caeo ec bl>bd f bt { max-height: 99px;font-size: 3em; } caeo>ec bl>bd balance { font-size: 0.66em; } caeo ec bl>bd wallet h2 { line-height: 1;margin: auto 4px; } caeo>ec bl>bd h2 b { letter-spacing: 4px;font-size: 0.66em; } caeo>ec bl>bd form { position:relative;background:var(--b-t);padding: 7px;border-radius: 22px;padding-top: 44px; } caeo>ec bd form h4 { text-indent: 22px;height: 44px; } caeo>ec bd form>d { display: grid;grid-template-columns: 50% 50%; } caeo ec mm b { fill: #fff; } caeo>ec bl>ft { display: block; } /* Forgot Password */ cfrgo { display: block; padding: 11px; margin: 7px; position: relative; } cfrgo>hd i { display: block; height: 44px; width: 44px; } cfrgo>hd p { margin: 4px 0; margin-bottom: 22px; } cfrgo>bd .wrapper { padding: 0; } cfrgo>bd aa.regbtn { margin: 7px 0; } cfrgo>ft d { display: block; text-align: center; }clgno form sl:nth-child(2) { grid-template-columns: auto 55px; display: grid; } 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; } 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: 500; } clgno label>input { margin: 6px; height: 13px; width: 13px; border: 1px solid; margin-left: 0; } clgno bl p { font-weight: 400; letter-spacing: 0.33px; text-align: center; } 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; overflow-y: auto; scroll-behavior: smooth; } 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; } clgno { display: block; padding: 33px 22px; overflow: hidden; background: var(--b); border-radius: 22px 22px 0 0; height: 98%; max-width: 444px; margin: 0 auto; } 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 sl>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: 44px; } clgno form { position: relative; } clgno form sl .btn { display: flex; margin: 0; position: relative; z-index: 99; width: 44px; height: 44px; align-items: center; justify-content: center; } clgno form sl { display: flex; align-items: center; background: transparent; border: 1px solid var(--bor); height: 55px; border-radius: 11px; margin:13px 0; } 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; } } capro bl>bd { min-height: 144px } #BuyOne input { position: absolute; left: 7px; top: 7px; margin: 0; right: 186px; max-width: 77%; background: rgba(0,0,0,0.44); color: var(--c); font-size: 50px; padding: 11px 22px;font-weight: bold;} capro pricer { background: transparent; box-shadow: unset; } capro form input { right: 0;width: 100%;max-width: 100%;left: 0;top: 0;background: transparent;border-radius: 0;padding: 2px 22px;border-bottom: solid 2px;text-align: center;font-family: monospace; color:#f00;margin: 11px 0; font-size: 2.5em; } capro form cs>i { position: absolute; left: 18px; width: 22px; height: 22px; top: 11px;display:none } capro form>p { margin: 0;font-size: 0.88em;text-align: center;margin-top:11px;bottom: 0;color:#F00;font-weight: bold;font-family: monospace; } capro pricer>f { position: absolute;left: 0;right: 0;top: auto;bottom: 0;height: 77px;z-index: 88888; } capro pricer aa { position: absolute;top: 0;bottom: 0;display: flex;justify-content: center;align-items: center;transition: 77ms;margin: auto;left: 11%;right: 11%;background: linear-gradient( 133deg, #33bab3, #1e6fb5, #0c2eba);border-radius: 50px;height: 50px;box-shadow: var(--bs-b); } capro pricer aa i { height: 33px;width: 33px;margin-right: 11px;fill: #fff; } capro pricer aa f { font-size: 22;font-weight:bold;letter-spacing: 0;color: #e8d5b2; } /* Component : Account_Privacy */ cpro ad { display: grid; background: var(--bc); align-items: center; padding: 11px; border-radius: 22px; } cpro ft { font-size: 0.77em; } cpro ft ad hd { display: grid; grid-template-columns: 37px auto; } cpro ft ad bd { display: grid; grid-template-columns: auto 30px; align-items: center; } cpro a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cpro ad bd i { height: 100%; opacity: .7; } crpo cpro>ft>btn { background: transparent; } crpo cpydo pd { display: grid; grid-template-columns: 50% 50%; } crpo cpydo { padding: 11px; } crpo cpydo d { display: block; padding: 11px; border: 1px solid var(--bc); border-radius: 7px; margin: 5px; font-size: 0.77em; } crpo cpydo pd>d>c { font-size: 15px; margin-top: 5px; } crpo cpro { border-radius: 22px 22px 0 0; position: relative; padding-bottom: 33px; } cpro { display: block; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px; } cpro hd { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; } cpro p {margin: 0;} cpro button { border: solid 1px var(--bor); width: 20%; } cpro name { font-weight: 400; } cpro bd { display: grid; padding: 11px 0; gap: 11px; } cpro trc { display: grid; grid-template-columns: 55px auto 25px; margin: 16px 0; border-bottom: solid 1px var(--bc); padding-bottom: 11px; align-items: center; gap: 2%; } cpro trc bd { font-size: 0.88em; } cpro b { font-weight: 400; } cpro trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } cpro a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cpro h4 { font-weight: 500; } @media screen and (max-width: 999px) { cpro { min-width: 333px; margin: 11px; } } /* Component : Account_products */ cppo { display: grid ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } cppo ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cppo hd { display: grid; align-items: center; } cppo p {margin: 0;} cppo button { border: solid 1px var(--bor); width: 20%; background: var(--aaa); color: var(--b); border-radius: 9px; } cppo name { font-weight: 400; } cppo bd { display: grid; padding: 11px 0; gap: 11px; background: var(--bc); border-radius: 22px; margin: 11px 0; } cppo trc { display: grid; grid-template-columns: 50px auto 100px; margin: 16px auto; border-bottom: solid 1px var(--bc); align-items: center; gap: 2%; background: var(--bc); } cppo trc bd { font-size: 0.88em; } cppo b { font-weight: 400; } cppo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } cppo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } cppo h4 { font-weight: 500; } cppo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } cppo i { height: 100%; } cppo h3 { padding-bottom: 22px; } cppo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } cppo quick { display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 11px; } cppo bd a { padding: 22px; display: grid; } cppo t { color: var(--a); font-weight: 500; } @media screen and (max-width: 999px) { cppo trc {margin: 11px 0; width: auto; grid-template-columns: 40px auto 23px; } cppo { margin: 11px;min-width: 333px;} cppo ad a { grid-column-start: 2; grid-column-end: 4; } cppo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } cppo button { width: 88%; margin-top: 11px; } cppo ft p { display: none; } cppo trc>ft { display: block; } cppo quick { grid-template-columns: 50% 50%; } } /* Component : Register */ crgso>hd { display: block; padding: 33px 30px; padding-top: 7px; text-align: center; } crgso>hd>i { height: 44px; width: 44px; margin: 11px auto; display: block; } 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; } crgso { 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; } crgso: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); } crgso 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); } crgso 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; } crgso 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; } crgso>ft d { display: block; text-align: center; } crgso>ft d>aa:last-child { font-weight: 500; color: var(--a); } crgso>bd d { font-size: 0.88em; } @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; } crgso { max-width: 444px; display: block; margin: 0 auto; background: transparent; min-height: auto; } crgso: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); } } /* Component : Account_Secure */ csfo { display: grid ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px; } csfo>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } csfo p {margin: 0;} csfo h2 { font-size: 1.25em; } csfo name { font-weight: 400; } csfo>bd { display: grid; padding: 11px 0; gap: 11px; } csfo trc { display: grid; grid-template-columns: 55px auto 25px; margin: 16px 0; border-bottom: solid 1px var(--bc); padding-bottom: 11px; align-items: center; gap: 2%; } csfo trc bd { font-size: 0.88em; } csfo b { font-weight: 400; } csfo button { display: flex; justify-content: center; align-items: center; font-weight: bold; color: var(--b); background: var(--aaa); border-radius: 7px; height: 44px; width: 100%; margin-top: 11px; } csfo trc ft svg { opacity: 0.4; filter: grayscale(1); transform: rotate(180deg); } csfo a { font-weight: 100; color: var(--aa); font-size: 0.88em; } csfo h4 { font-weight: 500; } csfo ad { display: grid; grid-template-columns: 44px auto auto 44px; background: var(--bc); align-items: center; } csfo i { height: 100%; } csfo hd i { position: relative; display: flex; height: 135px; width: 135px; border-radius: 55%; justify-content: center; align-items: center; background: var(--bc); margin: auto; } @media screen and (max-width: 999px) { csfo i { height: 55%; } csfo { margin: 11px; grid-template-rows: auto auto;min-width: 300px;} csfo ad a { grid-column-start: 2; grid-column-end: 4; } csfo ad i:nth-child(2) { grid-row-start: 1; grid-row-end: 2; } } /* Account_Security*/ caso { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); } caso ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } caso p {margin: 0;} caso name { font-weight: 400; } caso b { font-weight: 400; } caso a { font-weight: 500; color: var(--aa); font-size: 0.88em; } caso h4 { font-weight: 500; } caso bd a { display: grid; } caso>bl>bd { padding-top: 11px; } caso hd btn i { display: grid; width: 40px; background: var(--aat); border-radius: 55%; height: 40px; } caso btn { display: grid; grid-template-columns: 55px auto; align-items: center;padding: 11px 0; } caso ad { display: grid ; background: var(--bc); align-items: center; padding: 11px; border-radius: 9px; font-size: 0.88em; } caso hld{ display: grid ; grid-template-columns: 37px auto; } caso bld { align-items: center; display: grid ; grid-template-columns: auto 30px; font-size: 0.88em; } caso bld i { height: 100%; opacity: .7; } caso btn h4 { font-weight: 400; } caso btn h4>t { font-weight: 500; } caso p { margin: 0; font-size: 0.77em; } caso btn svg { width: 21px; } @media screen and (max-width: 999px) { caso hd { display: block; } cpro { margin: 11px;} caso>hd h3 { padding-bottom: 22px; } caso { margin: 11px; } } /* Account_Security*/ /* Component : Account_SecurityPrivacy */ cmpo { display: grid ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 7px 0; } cmpo>bl>ft { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: space-between;font-size: 0.77em; } cmpo>bl>hd { display: grid; align-items: center; } cmpo p {margin: 0;} cmpo name { font-weight: 400; } cmpo b { font-weight: 400; } cmpo a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cmpo h4 { font-weight: 500; } cmpo i { height: 100%; } cmpo h4 { padding-bottom: 22px;font-weight: 500; } cmpo trc>ft { display: grid; justify-content: center; grid-template-columns: auto 22px; align-items: center; } cmpo bd a { display: grid; } cmpo trc hd { overflow: hidden; display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; background: var(--bc); border-radius: 11px; } cmpo ads { display: grid; grid-template-columns: 33% 33% 33%; } cmpo add { text-align: left; display: grid; grid-template-rows: auto auto 30px; background: var(--bc); align-items: center; border-radius: 22px; margin: 8px; padding: 22px; } cmpo bd { padding-top: 26px; } cmpo add hd { padding: 22px; } @media screen and (max-width: 999px) { cmpo ads { grid-template-columns: 100%; } cmpo h4 { padding: 22px 0; } cmpo { margin: 11px; min-width: 333px; overflow-x: scroll; } } casko>bl { border-radius: 22px;/* background-image: linear-gradient( 201deg,#0ee4d8, #3a98e2, #6a3fea) !important;*/box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%);transition:777ms;transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); } casko mm b { fill: #fff; } casko bl>bd { min-height:123px;padding-top: 0; } casko bl>bd d { display:block;min-height:123px; } casko bd trxwallet>f { z-index: 8;align-items: center;width: 100%;flex-wrap: wrap; } caps { background: var(--b); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: block; align-items: center; padding: 20px; border-radius: 10px; width: 96%; margin: 20px auto;} caps hd { display: block; font-weight: bold; font-size: 18px; margin-bottom: 12px; } caps bl { display: block; background: var(--bc); border-radius: 12px; padding: 30px 20px; text-align: center; margin: 11px 0; } caps bd h3 { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; } caps ft p { display: block; font-size: 14px; } @media screen and (max-width: 999px) { caps { margin: 11px; width: auto; } } /* Component : Activities */ cpvo grid { grid-template-columns: 100%;margin: 22px;display:none; } cpvo grid hd { /* grid-column-start: 1; *//* grid-column-end: 3; */height: 44px; } cpvo grid bl { padding: 0; } cpvo grid bl hd { padding: 11px 22px; } cpvo grid bl grid { padding: 11%;height: 150px;background: #fff1;border-radius: 22px;grid-template-columns: 20% 20% 20% 20% 20%;grid-gap: 0; } cpvo grid bl d { height: 33%;background: #3f51b5; } cpvo grid bl d { height: 65%;background: #673ab7; } cpvo grid bl d { height: 77%;background: #e91e63; } cpvo grid bl d { height: 33%;background: #00bcd4; } cpvo grid bl d { height: 55%;background: #ffeb3b; } cpvo grid bl ft { display: block; padding: 11px 22px; } cpvo grid bl h4 { color:transparent; } cpvo grid { grid-template-columns: 25% 75%; } /* Component : Activity_Creat */ csao>bl { display: block;} csao>bl>hd { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } csao hd>i { max-width: 290px; max-height: 107px; width: 100%; height: 100%; margin: 11px; margin-bottom: 22px; } /* Component : Activity_Created */ csas { display: block; padding: 11px; margin: 11px; background: var(--bt); border-radius: 11px; } csas bd>bx { display: grid; grid-template-columns: 44px auto; align-items: center; border: 2px solid var(--bc); border-radius: 11px; padding: 6px 11px; margin: 22px; margin-bottom: 11px; } csas bd>fltr { display: block; padding: 11px; margin: 11px; } csas fltr src>hd>i { height: 100%; width: 21px; margin: auto; padding: 11px; } csas fltr src { display: grid; grid-template-columns: 55px auto 50px; align-items: center; background: var(--bt); color: var(--c); border-radius: 11px; height: 55px; position: relative; } csas fltr src>ft>btn { display: flex; padding: 5px; height: 33px; width: 33px; justify-content: center; align-items: center; } csas bd>fltr bx { display: flex; padding: 11px 5px; justify-content: space-between; margin: 4px 0; } csas bd>fltr bx>hd { display: grid; grid-template-columns: 44px auto; align-items: center; height: 35px; } csas bd>fltr bx btn { display: grid; grid-template-columns: auto 23px; align-items: center; padding: 5px 11px; justify-content: space-between; border-radius: 5px; } csas fltr src input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; background: transparent; padding: 0 60px; width: auto; padding-left: 44px; } csas fltr src input:focus { box-shadow: var(--bs); } csas ft>bx { display: grid; grid-template-columns: auto 55px; background: var(--bt); border-radius: 11px; align-items: center; padding: 11px; font-weight: 600; } csas ft>bx btn { display: block; padding: 4px; height: 33px; width: 33px; margin-left: auto; } csas ft>t { display: grid; grid-template-columns: 33px auto; align-items: center; margin-top: 22px; } csas ft>t>i { display: block; padding: 3px; border: 1px solid; border-radius: 50%; height: 11px; width: 11px; } csas ft>bx btn i { height: 100%; width: 100%; } bams { display: block; height: 100vh; background: var(--b); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); transition: width 0.3s ease; } bams.collapsed { width: 88px; } bams.expanded { width: 250px; } bams i { height: 44px; width: 44px; } bams hd { padding: 16px; display: flex ; align-items: center; border-bottom: 1px solid var(--bc); } bams.expanded hd { justify-content: flex-start; padding-left: 16px; } bams hd img { height: 24px; } bams hd h1 { display: block; font-size: 18px; margin-left: 10px; } bams.expanded hd h1 { display: none; } bams bd { flex: 1; display: flex; flex-direction: column; overflow-y: auto; } bams.collapsed bd {padding: 16px 0;} bams.collapsed ft {padding: 16px 0;} bams.collapsed usr i { display: none; } bams usr { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid var(--bc); } bams.collapsed usr span { display: none; } bams usr img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } bams.expanded usr { padding: 12px 0px; justify-content: space-between; } bams.expanded usr span { flex: 1; margin-left: 10px; font-size: 14px; font-weight: 500; opacity: 0;} bams nvit { display: flex; align-items: center; padding: 12px; cursor: pointer; transition: background-color 0.2s; } bams nvit:hover { background-color: var(--bc) } bams nvit.active { background: var(--aaa); color: var(--b); } bams nvit i { font-size: 20px; min-width: 36px; text-align: center; } bams.collapsed nvit span { display: none; } bams.expanded nvit { padding: 12px 0px; } bams.expanded nvit span { margin-left: 10px; font-size: 14px; opacity: 0;} bams dvdr { height: 1px; background-color: var(--bc); margin: 8px 0; flex-shrink: 0; } bams ft { padding: 8px 0; } bams tgbtn { display: none; cursor: pointer; padding: 12px; } bams nvit i { height: 27px; } cacs bl { display: block; max-width: 900px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 11px auto; } cacs hd { display: block; padding: 16px 20px; border-bottom: 1px solid var(--bor); } cacs hd h2 { font-size: 20px; font-weight: 600; } cacs bd { display: flex; padding: 0;align-items: center; } cacs left { flex: 1; padding: 24px; } cacs right { width: 40%; display: flex; align-items: center; justify-content: center; overflow: hidden; } cacs right img { width: 100%; height: auto; } cacs h1 { font-size: 24px; font-weight: 700; margin-bottom: 12px; } cacs p { font-size: 16px; margin-bottom: 24px; line-height: 1.4; opacity: 0.5; } cacs div { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; } cacs item { display: flex; gap: 16px; } cacs i { width: 40px; height: 40px; background: var(--bc); border-radius: 50%; display: flex ; align-items: center; justify-content: center; flex-shrink: 0; padding: 11px; } cacs h3 { display: flex; flex-direction: column; } cacs t { font-size: 18px; font-weight: 600; margin-bottom: 4px; } cacs b { font-size: 14px; line-height: 1.4; font-weight: 300;} cacs ft { display: block; padding: 24px; } cacs btn { background: var(--aaa); border: none; border-radius: 6px; padding: 12px; font-size: 16px; font-weight: 600; display: block; cursor: pointer; text-align: center; color: var(--b); } cacs btn:hover { background: var(--aa); } @media screen and (max-width: 999px) { cacs bl { margin: 11px; width: auto; } cacs right { display: none; } cacs h1 { font-size: 18px; } cacs p { margin: 0; font-size: 0.88em; margin-bottom: 31px; } cacs i { width: 32px; height: 32px; margin: auto; } } camo>bl{ display: grid ; grid-template-rows: auto auto; padding: 22px; border-radius: 22px; background: var(--bt); } camo>bl>hd { display: grid; grid-template-columns: 18% auto 18%; align-items: center; } camo hd gr { display: grid; grid-template-columns: 30px auto; } camo hd f { display: flex; align-items: center; gap: 7px; margin-left: 11px; } camo f i { width: 24px; height: 24px; } camo f h4 { font-weight: 500; } camo bd { display: grid; grid-template-columns: 44px auto; align-items: center; } camo bd { display: grid; align-items: center;} camo bd i { width: 40px; height: 40px; background: var(--at); border-radius: 26px; overflow: hidden; } camo bd bd { display: grid; margin-left: 11px; } camo bd h4 { display: grid; margin-left: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 7px; margin-bottom: 11px; } camo bd input { background: unset; padding: unset; height: 30px; font-weight: 500; font-size: 14px; } camo ft { display: none; grid-template-columns: auto auto; justify-content: space-between; align-items: center; margin-left: 55px; position: relative; } camo ft i svg { max-width: 44px; max-height: 44px; } camo ft btn { display: grid; grid-template-columns: auto auto; align-items: center; } camo ft btn cnl { text-align: center; margin-right: 11px; padding: 11px 18px; border-radius: 38px; font-size: 0.88em; font-weight: 500; } camo ft btn cnl:hover { background: var(--bc); transition: 333ms; } camo ft btn t { text-align: center; background: var(--btn); color: var(--b); padding: 9px 11px; border-radius: 38px; font-size: 0.88em; font-weight: 500; } camo.cancel ft { display: grid; } /* Component : AddFrame_Profile */ cafp { display: block; align-items: center; background: var(--b); width: max-content; border-radius: 11px; position: absolute; inset: 0; max-width: 777px; margin: auto; height: fit-content; opacity: 0; transition: var(--tr-a); transform: scale(.95); visibility: hidden; padding: 11px; } .Profile_DPFram cafp { opacity: 1; transform: scale(1); visibility: visible; } cafp>hd { display: flex ; justify-content: space-between; align-items: center; padding: 17px; border-bottom: 1px solid var(--bor); } cafp hd h1 { flex-grow: 1; text-align: center; font-weight: 600; } cafp hd button { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 50%; border: none; background: transparent; cursor: pointer } cafp hd button:hover { background: #f0f2f5 } cafp hd button svg { width: 24px; height: 24px; color: #65676b } cafp>bl>bd { display: flex; } cafp caf { padding: 16px; border-right: 1px solid var(--bor);height: fit-content;} cafp caf h2 {font-size: 18px; font-weight: 600; margin-bottom: 11px; } cafp csh { position: relative; margin-bottom: 16px } cafp csh svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin: 0; } cafp caf>sl { display: grid ; grid-template-columns: 44px auto; align-items: center; height: 44px; border-radius: 22px; position: relative; width: -webkit-fill-available; overflow: visible; } cafp caf>sl>input { position: absolute; padding: 11px; padding-left: 44px; border-radius: 22px; min-height: auto; } cafp csh input {padding: 0px 16px 0px 40px; border-radius: 9999px; border: none; background: var(--bc); outline: none; font-size: 14px; height: 33px; font-weight: 500;} cafp caf>sl>input:focus { border-radius: 22px; } cafp csh input:focus { box-shadow: 0 0 0 2px #1877f233 } cafp cafs {display: flex ; flex-direction: column;max-height: 555px; overflow-y: auto; scrollbar-width: thin;} cafp cafs::-webkit-scrollbar { width: 6px } cafp cafs::-webkit-scrollbar-track { background-color: transparent } cafp cafs::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 3px } cafp cafs::-webkit-scrollbar-thumb:hover { background-color: #9ca3af } cafp cbd { padding: 20px ;background: var(--bc); } cafp>ft { display: flex ; justify-content: space-between; align-items: center; padding: 16px; border-top: 1px solid var(--bor); background: var(--b); } cafp div { display: flex; align-items: center } cafp ft span { font-size: 14px; color: #65676b } cafp cop { position: relative; margin-left: 8px; display: inline-block } cafp cop select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 1px solid #ccd0d5; border-radius: 4px; padding: 4px 32px 4px 12px; font-size: 14px; outline: none } cafp cop select:focus { border-color: #1877f2 } cafp cop btn {position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; height: 16px; width: 16px;} cafp>bl>ft>btn{ padding: 8px 16px; background: #e4e6eb; color: #1c1e21; font-weight: 500; border: none; border-radius: 6px; cursor: pointer; transition: background .2s ease; display: block; width: max-content; margin-top: 11px; } cafp ft>btn:hover { background: #d8dadf } cafp cbd input { width: auto; } cafp cbd hd { margin-bottom: 22px; display: grid ; } cafp>bl>ft { display: flex ; align-items: center; justify-content: space-between; } @media (min-width: 768px) { cafp>bd { flex-direction:row } cafp caf {width: 40%; display: grid ; padding: 7px;} cafp div { width:60% } } @media (max-width: 999px) { cpdeo { margin: auto 7px; } cafp { width: auto; margin: auto 7px; overflow: auto; max-height: 88vh; bottom: 66px; } cafp ft { display: block; } cafp bd { display: grid ; grid-template-columns: 100% 100%; max-width: 100%; } cafp cbd { position: absolute; z-index: -1; opacity: 0; visibility: hidden; transition: 333ms; } cafp.active cbd { opacity: 1; visibility: visible; z-index: 99; background: var(--b); } } balo { display: flex ; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: dotted 2px var(--bc); background: unset; margin: 5px; cursor: pointer; transition: 99ms; border-radius: 17px; position: relative; overflow: hidden; } balo:hover { background: var(--hover); } balo bg { background: var(--bt); margin: 4px; border-radius: 15px; display: flex ; align-items: center; } balo hd>i { height: 77px; width: 77px; margin: 0 auto; opacity: 0.5; } balo>bl>bd { display: flex ; } balo bd>h2 { font-size: 1.66em; text-align: center; opacity: 0.33; } /* Component : Add_Friend */ cffo { display: grid ; width: auto; height: auto; background: var(--bt); border-radius: 7px; box-shadow: var(--bs); position: relative; } cffo hd { display: block; } cffo hd i { width: 100%; height: 100%; border-radius: 7px 7px 0 0; overflow: hidden; } cffo>bl>bd { display: grid ; grid-template-rows: 18px 18px; padding: 11px; row-gap: 7px; } cffo bd h4 { font-size: 1em; font-weight: 500; transition: 333ms; width: max-content; } cffo bd>h4:hover cdpo { opacity: 1; visibility: visible; } cffo bd>h4:hover { text-decoration: underline; } cffo bd h5 { font-size: 0.77em; font-weight: 500; } cffo ft { display: block; padding: 11px; } cffo ft btns { display: grid ; row-gap: 7px; } cffo ft btn { background: var(--bc); padding: 7px 0; border-radius: 7px; text-align: center; } cffo ft btn:first-child { background: #d8e6f5; color: var(--a); } cffs hd btn { padding: 9px 11px; border-radius: 5px; transition: 333ms; } cffs hd btn:hover { background: var(--bc); } cffo ft t { font-size: 0.88em; font-weight: 500; } cffo cdpo { width: 444px; height: fit-content; top: 44px; left: -22px; z-index: 999; } /* Component : Add_Friends */ cffs>bl { display: grid ; row-gap: 11px; margin: 22px; } cffs>bl>hd { display: flex ; justify-content: space-between; align-items: center; } cffs hd h2 { font-size: 1.44em; font-weight: bold; } cffs hd t { font-size: 1em; font-weight: 500; color: var(--a); } cffs>bl>bd { display: grid ; grid-template-columns: auto auto auto auto auto; gap: 11px; } @media (max-width: 999px) { cffs>bl>bd { grid-template-columns: 100%; } } /* Component : Addresses */ cmas { display: grid; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; background: var(--bt); margin: 5px; grid-template-rows: 52px auto 40px; align-items: flex-start; min-height: 27vh; } cmas hd { padding-bottom: 10px; border-bottom: 1px solid var(--bc); grid-template-columns: 33px auto; display: grid ; height: auto; margin-bottom: 11px; } cman hd>i { height: 77px; width: 77px; margin: 0 auto; opacity: 0.5; } cman { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 22px; border: dotted 2px var(--bc); background: unset; margin: 5px; cursor: pointer; transition: 99ms; border-radius: 17px; position: relative; overflow: hidden; } cman bd>h2 { font-size: 1.66em; } cmas b { font-weight: 500; } cmas bl { background: var(--b-t22); } @media screen and (max-width: 999px) { smas bl { margin: 11px 0;padding: 0 11px; } cmas { margin: 2px; } smas bl>bd { grid-template-columns: 100%;padding: 0; } } smas main { width: 100%; max-width: unset; } cmass { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; } cmas ft btns { display: flex; align-items: center; white-space: nowrap; margin: 6px 0; justify-content: space-around; } cmas ft hr { transform: rotate(90deg); max-width: 34px; } smas cmas>hd { padding-bottom: 10px; border-bottom: 1px solid var(--bc); grid-template-columns: 33px auto; display: grid; } cmas bd { background: unset; } cmas name { font-weight: bold; } cmas bd h5 { font-weight: 400; font-size: 0.88em; margin: 6px 0; display: flex; gap: 2px; align-items: center; } smas cmas>bd { padding: 0; margin: 11px 0; } cmas p { font-size: 14px; margin: 0; } cmas bd h4 { display: flex; gap: 2px; align-items: center; } @media screen and (max-width: 999px) { cmass { display: block; } cmas { margin: 11px 0; } cman { flex-direction: unset; padding: 44px 11px; } smas bl>bd { display: block; } cman hd>i { height: 44px; width: 44px; opacity: 1; } } bado bl { display: block; max-width: 700px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 7px auto; } bado hd { display: block; padding: 20px; border-bottom: 1px solid var(--bor); } bado hd h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; } bado hd p { font-size: 14px; } bado bd { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; text-align: center; min-height: 300px; } bado .empty-icon { width: 80px; height: 80px; margin-bottom: 20px; opacity: 0.7; } bado bd h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; } bado bd p { font-size: 14px; max-width: 400px; line-height: 1.4; } bado ft { display: flex; justify-content: center; padding: 20px; } bado .btn { background: var(--aaa); color: var(--b); border: none; border-radius: 6px; padding: 10px 20px; font-size: 16px; font-weight: 500; cursor: pointer; min-width: 120px; } bado .btn:hover { background: var(--bc); } @media only screen and (max-width: 999px) { bado { width: auto; margin: 11px; display: block;} }/* Alert User component */ caluo {display: grid; grid-template-columns: 66px auto auto; padding: 22px; background: var(--bt); border-radius: 11px; box-shadow: inset 0 -4px 7px 0px rgb(0 0 0 / 0%), inset 0 1px 7px 0px rgb(0 0 0 / 0%), 0 7px 11px rgb(0 0 0 / 6%); align-items: center; margin: 14px; margin-bottom: 11px; position: relative; min-width: 322px; } caluo>ft>btn { display: block; padding: 11px 22px; text-align: center; background: var(--aaa); color: var(--b); border-radius: 33px; font-size: 0.8em; } caluo>hd>i>svg { height: 22px; width: 22px; fill: var(--b); } caluo>hd>i { height: 44px; width: 44px; padding: 2px; background: var(--c); border-radius: 55%; } caluo>bd>p { margin: 0; margin-top: 4px; line-height: 1.44em; font-weight: 500; overflow: hidden; display: block; -webkit-line-clamp: 1; display: box; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } caluo>ft { display: flex; justify-content: end; } caluo>bd>t { font-weight: 500; } /* Component : AllConversations */ hcts>bl { display: grid ; grid-template-rows: max-content auto max-content; background: var(--bt); border-right: 1px solid var(--bc); position: relative; overflow: hidden; height: 100%; border-radius: var(--br); margin: var(--s-m); } hcts>bl hd>f { display: flex ; justify-content: space-between; align-items: center; margin-bottom: 11px; } hcts>bl f>btn { display: flex ; height: 33px; width: 33px; background: var(--bc); border-radius: 55%; align-items: center; margin: 0 4px; padding: 1px; } hcts>bl>hd { display: block; padding: 11px; border-bottom: 1px solid var(--bc); } hcts>bl hd>sl { display: grid ; grid-template-columns: 44px auto; align-items: center; height: 40px; border-radius: 55px; margin: 0; } hcts>bl sl>input { position: absolute; border-radius: 33px; padding: 0 44px; width: auto; inset: 0; padding-right: 11px; min-height: auto; height: auto; } hcts>bl sl>input:focus { border-radius: 33px; } hcts>bl sl>i { height: 22px; width: 22px; padding: 5px; margin-left: 5px; } hcts>bl hd>btns { display: flex ; } hcts>bl hd>btns btn { display: block; padding: 5px 11px; font-weight: 500; border-radius: 22px; font-size: 0.88em; margin: 11px 0; margin-right: 7px; } hcts>bl hd btn.this { background: var(--a-t); color: var(--a); } hcts>bl hd btn:hover { background: var(--a-t); color: var(--a); } hcts>bl>bd>d { display: block; overflow-y: scroll; max-height: 72vh; } hcts>bl>ft btn { display: block; text-align: center; padding: 22px; } cavs hd h3 { margin-top: 11px; margin-bottom: 16px; font-size: 1.11rem;padding: 0 12px; } cavs>bl>bd { display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc);padding-bottom: 11px;flex-wrap: wrap; } cavs {display: grid ; padding: 16px 0;} /* Component : AllWallet */ cawo bl { background-image: linear-gradient(180deg, rgba(0,255,255,0.11), rgba(20, 37, 55, 0.4)); } cawo bl wallet b { fill: #fff; } cawo bl wallet bd { min-height:123px;padding-top: 0; } cawo bl wallet bd d { display:block;min-height:123px; } cawo bl wallet bd f { z-index: 8; items-align:center; } cawo bl wallet bd h2 { line-height: 1;margin: auto 4px; } cawo bl wallet bd balance { font-size: 0.66em; } cawo bl wallet bd b { letter-spacing: 4px;font-size: 0.66em; } cawo bl wallet bd ethwallet f { z-index: 8; item-aligns:center; } cawo bl wallet bd btcwallet f { z-index: 8;item-aligns:center; } cawo bl wallet bd btcwallet h2 { line-height: 1; margin: auto 4px; } cawo bl wallet bd btcwallet b { letter-spacing: 4px; } /*allownotification*/ cnao { padding: 11px; margin: 11px 0; border-radius: 11px; background: var(--bc); display: none ; } cnao hd h3 { font-size: 1.11em; padding: 7px; font-weight: 500; margin-bottom: 11px; } cnao bd { display: grid; } cnao gr { display: grid; grid-template-columns: 44px auto; align-items: center; } cnao gr:nth-child(2) { justify-content: space-between; } cnao gr d { display: grid; grid-template-columns: 44px auto; align-items: center; } cnao gr i { min-width: 28px; min-height: 28px; } cnao gr h3 { font-size: 1em; font-weight: 500; margin-left: 11px; } cnao gr d i { min-width: 30px; min-height: 30px; } cnao gr:nth-child(2)>i { min-width: 44px; min-height: 44px; } .cnao cnao{display:grid;} cpac bl { display: block; max-width: 700px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 20px; margin: 11px auto; } cpac hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } cpac hd h2 { font-size: 20px; font-weight: 600; } cpac hd p { font-size: 14px; opacity: 0.5; } cpac hd btn {background: var(--aaa); color: var(--b); border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; display: grid ; align-items: center; gap: 6px; height: 24px; grid-template-columns: 22px auto;} cpac d { margin-bottom: 24px; } cpac d h3 { font-size: 18px; margin-bottom: 16px; } cpac blc { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--bc); } cpac blc:last-child { border-bottom: none; } cpac h4 { display: flex; align-items: center; gap: 6px;font-weight: 400;} cpac bl { display: block; max-width: 700px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; padding: 20px; margin: 11px auto; } cpac p { font-weight: 500; margin:0;} cpac chart { height: 120px; margin: 20px 0; position: relative; } cpac chart i { height: 100%; width: 100%; position: relative; } cpac .chle { fill: none; stroke: #0866ff; stroke-width: 2; } cpac .chae { fill: rgba(8, 102, 255, 0.1); } cpac .chgd { stroke: #e4e6eb; stroke-width: 1; } cpac lg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; } cpac ib { width: 16px; height: 16px; display: flex ; align-items: center; justify-content: center; font-size: 12px; background: var(--bc); border-radius: 50%; } @media screen and (max-width: 999px) { cpac bl { width: auto; margin: 11px; } } bads bl { max-width: 700px; margin: 0 auto; background: var(--b); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; } bads hd h2 { font-size: 20px; margin-bottom: 4px; } bads hd p { font-size: 14px; } bads bd { padding: 20px; } bads .stat { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bor); margin-bottom: 20px; } bads lvl { display: flex; align-items: center; font-weight: 500; } bads i { display: inline-flex ; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--c); color: var(--b); border-radius: 50%; font-size: 12px; margin-left: 6px; cursor: pointer; transition: background-color 0.2s ease; } bads i:hover { background: var(--bc); transform: scale(1.1); } bads bd p { font-weight: 600; font-size: 16px; } bads chart { margin-top: 30px; padding-bottom: 20px; } bads h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; } bads .chart { display: flex; justify-content: space-between; align-items: flex-end; height: 150px; margin-bottom: 10px; } bads blc { width: 14%; display: flex; flex-direction: column; align-items: center; cursor: pointer; } bads b { width: 100%; background: var(--aaa); height: 4px; margin-bottom: 10px; transition: all 0.3s ease; } bads p { margin :0 ;transition: all 0.3s ease; } bads t { font-size: 12px; margin-bottom: 10px; } bads ft { padding: 12px 20px; background: var(--bc); } bads a { display: block; padding: 10px; background: var(--aaa); color: var(--b); border: none; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.3s ease; width: auto; } bads a:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.1); } bads hd { padding: 11px; } @media only screen and (max-width: 999px) { bads { margin: 11px; display: block; } bads bd p { font-size: 7px; } } cmsa bl { display: block; width: 80%; max-width: 666px; background: var(--b); padding: 15px; border-radius: 10px; font-size: 18px; font-weight: bold; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); text-align: center; margin: 22px auto; } cmsa blc { text-align: center; } cmsa i { height: 100px; width: 100px; margin: 22px auto; } cmsa hd { display: block; font-size: 16px; text-align: left; } cmsa bd { display: block; font-size: 14px; margin-top: 5px; } @media screen and (max-width: 999px) { cmsa bl { width: 100%; margin: 11px; max-width: fit-content; } } /* Component : App */ cdao>bl { display: grid ; grid-template-columns: max-content auto 22%; padding: 11px; border-radius: 11px; background: var(--b-t44); box-shadow: var(--bt-bx); align-items: center; max-width: 1400px; margin: 7px 0; transition: 95ms; } cdao hd { display: grid ; grid-template-columns: 66px auto; align-items: center; width: max-content; } cdao hd>i { height: 44px; width: 44px; padding: 4px; border: 1px solid var(--bc); margin: auto; } cdao hd t { font-weight: 600; font-size: 0.88em; } cdao hd p { margin: 0; font-size: 0.77em; } cdao bd>d { display: flex ; justify-content: space-around; padding: 0 22px; font-size: 0.88em; font-weight: 500; } cdao ft>btns { display: flex ; align-items: center; justify-self: end; } cdao btns>btn { display: block; padding: 11px 22px; margin: 0 4px; place-content: center; justify-items: center; } cdao btns>btn:first-child { border: 1px solid var(--bc); border-radius: 11px; text-align: center; font-size: 0.88em; padding: 7px 44px; } cdao btns>btn:last-child { height: 33px; width: 33px; padding: 5px; } cdao ft btn>i { transform: rotate(90deg); } cdas { display: block; padding: 22px; max-width: 1400px; margin: 0 auto; background: var(--bt); border-radius: 11px; } cdas>bl>hd { display: flex ; align-items: center; justify-content: space-between; padding-bottom: 55px; } cdas hd p { margin: 4px 0; } cdas hd btn { display: block; padding: 11px 22px; background: var(--aaa); color: var(--b); font-size: 0.88em; font-weight: 500; border-radius: 11px; box-shadow: 0px 3px 0 var(--c); margin: 0 4px; } cdas hd btn:nth-child(1) { background: transparent; box-shadow: unset; color: var(--c1); } cdas hd>btns { display: flex ; align-items: center; } cdas bd>h4 { margin: 33px 11px 11px 0; width: max-content; } cdao:hover { background: var(--b-t77); } cdao:active { background: var(--b-t22); } cdao hd>btn { display: block; margin: 0 4px; place-content: center; justify-items: center; height: 33px; width: 33px; padding: 5px; transition: 95ms; } cdao hd>btn:hover { background: var(--bc;) } @media (max-width : 999px) { cdas hd { display: block; } cdas>bl>hd { display: block; } cdas hd>btn { margin: 11px 0; width: max-content; } cdas hd { display: block; padding-bottom: 22px; } cdao bd>d { display: block; padding: 0; } cdao d>time { display: block; font-size: 0.88em; font-weight: 400; } cdao btns>btn:first-child { margin: 7px; padding: 11px; background: var(--b-t44); border-radius: 7px; } cdao btns>btn:hover { background: var(--b-t77); } cdao bd t { display: none; } cdao bd>d { margin: 0 11px; } cdao hd { grid-template-columns: 66px auto 55px; width: auto; } cdas { padding: 15px; } cdao ft btn>i { transform: rotate(0deg); } cdao { display: grid ; grid-template-rows: auto auto auto; grid-template-columns: 100%; } cdas hd>btns { flex-direction: row-reverse; justify-content: start; padding: 11px 0; } cdao ft { grid-row-start: 2; } cdao ft>btns { display: block; justify-self: unset; } cdao btns>btn:last-child { display: none; }} @media (min-width : 999px) { cdao hd>btn { display: none; } } /* Component : App_alsoview */ capvs bd div { display: block; } capvs capv { display: flex ; align-items: center; gap: 3px; padding: 11px 5px; cursor: pointer; margin: 5px 8px; border-radius: 8px; transition: 333ms; } capvs capv:hover { background: var(--bc); } capvs capv hd { display: flex ; padding: 0px 0px; border-radius: 6px; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px; cursor: pointer; } capvs capv hd i { height: 55px; width: 55px; } capvs capv>bd { display: block; } capvs capv>bd h3 { font-size: 17px; font-weight: 500; margin: 2px 0px; } capvs capv wr { display: flex ; align-items: center; } capvs capv wr t { display: flex ; align-items: center; font-size: 13px; } capvs bd capv wr i { height: 10px; width: 100%; margin: 0px 4px; } capvs capv wr ln { height: 14px; background: var(--c0); width: 1px; margin: 0px 6px; } capvs capv>ft { display: flex ; margin-left: auto; } capvs capv>ft btn { display: flex ; background:var(--bc); padding: 1px 15px; margin: 0px 11px; border-radius: 3px; } capvs capv>ft t { font-size: 13px; } capvs capv>ft span { display: none; font-size: 13px; } capvs bd div>line { display: flex ; height: 1px; background: var(--bor); width: 100%; } @media screen and (max-width: 430px) { capvs capv>ft { display: flex ; margin-left: auto; } capvs capv>ft btn { padding: 3px 15px; } } cbsg { display: block; background-color: var(--b); border-radius: 11px; border: solid 1px #6a666e30; padding: 11px; box-sizing: border-box; max-width: max-content; height: fit-content; max-width: 333px; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; transform: scale(1.0); } cbsg hd i { height: 100%; } cbsg hd { display: grid ; gap: 10px; grid-template-columns: 23% 50% auto; padding: 5px 5px; min-width: 299px; color: var(--c); } cbsg hd img { border-radius: 5px; filter: drop-shadow(1px 2px 3px var(--bor));} cbsg hd div { display: flex ; flex-direction: column; justify-content: center; } cbsg btn { background: var(--bc); padding: 2px 10px; border-radius: 5px; font-weight: bold; height: 25px; transition: transform 0.3s, opacity 0.3s; opacity: 1; font-size: 12px; display: flex ; align-items: center; top: 23px; position: relative; } cbsg bd .description { position: relative; left: 0;padding: 11px 9px; font-size: 14px; opacity: 0; transform: translateY(10px); margin: 0; } cbsg bd .description { opacity: 1; transform: translateY(0); } cbsg ft { display: none ;border-top: solid 1px var(--bor);} cbsg bd { display: none ; gap: 11px; position: relative; } cbsg button { display: none ; transform: translateY(-20px); } cbsg ft div { display: flex ; align-items: center; gap: 10px; margin: 6px 8px; } cbsg div i { width: 50px; height: 50px; } cbsg ft app { display: flex ; flex-direction: column; justify-content: center; } cbsg app p { margin: 1px 0; font-size: 12px; } cbsg app b { font-size: 12px; } cbsg div p { opacity: .7; } cbsg div button { border-radius: 5px; background: var(--aa); box-shadow: 0px 3px 10px -6px var(--aa); color: var(--b); padding: 6px 0px; font-weight: 500; font-size: 15px; width: 45px; left: 14px; position: relative; cursor: pointer;} ceao hd i { width: 100%; height: 100%; } ceao hd i:first-child { position: absolute; z-index: -2; filter: blur(44px); } @media only screen and (min-width: 999px) { cbsg:hover { position: relative; z-index: 999999999999999; transition: 999ms; min-width: fit-content; transform: scale(1.03); top: 44px; box-shadow: 0px 10px 19px -13px; } cbsg:hover bd, cbsg:hover ft, cbsg:hover button { display: block; } cbsg:hover btn { display: none ;} } /* Component : App_description */ capdc { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px; padding: 3px 0px;} capdc hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } capdc hd t { font-size: 17px; font-weight: 500; } capdc bd { padding: 1px 32px; } capdc bd tx { display: block; padding: 0; } capdc bd tx.descr { display: none; } .descrs capdc bd tx.descr { display: block; } capdc ft { display:block; padding: 19px 32px; } capdc ft btn { display: flex ; color: var(--a); cursor: pointer; } .descrs btn.less { display: block; } capdc ft btn.less { display: none; } .descrs capdc ft btn { display: none; } /* Component : App_Detail */ cdwo { display: block; margin: 7px; background: var(--b); position: relative; border-radius: 11px; box-shadow: var(--bt-bx); } cdwo>ft { display: block; padding: 33px; justify-items: end; background: var(--bc); } cdwo>bd { display: block; padding: 33px 22px 11px 22px; } cdwo>ft>btn { display: block; place-content: center; padding: 11px 33px; background: var(--bc); font-weight: 500; border-radius: 7px; } /* Component : App_Features */ capfs { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px; padding: 3px 0px;} capfs hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } capfs hd t { font-size: 17px; font-weight: 500; } capfs bd { padding: 1px 32px; } capfs bd tx { display: block; padding: 0; } capfs bd tx.fets { display: none; } .fetrs capfs bd tx.fets { display: block; } capfs ft { display:block; padding: 19px 32px; } capfs ft btn { display: flex ; color: var(--a); cursor: pointer; } .fetrs btn.clo { display: block; } capfs ft btn.clo { display: none; } .fetrs capfs ft btn { display: none; } /* Component : App_Hero1 */ capi { display: flex ; flex-direction: column; padding: 45px 68px; background: var(--b-t); position: relative; margin: 11px; border-radius: 22px; } capi bg { width: 100%; height: 100%; z-index: -1; } capi bg img { width: 100%; height: 100%; opacity: 1; object-fit: cover; } capi hd { display: flex ; gap: 24px; align-items: center; } capi hd>i { width: 5%; height: auto; } capi hd>bl { display: block; } capi hd>bl h2 { margin: 5px 9px; font-size: 34px; font-weight: 500; } capi hd>bl bd { display: flex ; } capi hd>bl bd wr { display: flex ; align-items: center; margin: 1px 9px; gap: 4px; flex-direction: column; align-items: baseline; } capi hd>bl bd span { color: var(--a); cursor: pointer; } capi hd>bl bd rt { display: flex ; align-items: center; } capi hd>bl bd t { display: flex ; align-items: center; } capi hd>bl bd t>i { width: 15px; height: 15px; margin: 0px 2px; } capi hd>bl bd ln { height: 14px; background: var(--c0); width: 1px; margin: 0px 6px; } capi hd>bl i { width: 10%; height: auto; } capi hd>bl tx {display: block ; } capi hd>bl tx t { font-size: 11px; } capi hd>bl tx h4 { font-size: 14px; font-weight: 500; } capi bd p { padding-right: 59%; margin: 37px 0px; } capi ft { display: flex ; flex-direction: column; } capi ft wr { display: flex ; align-items: center; } capi ft btn { display: flex ; min-height: auto; min-width: 184px; line-height: 28px; background: var(--btn); color: var(--b); padding: 11px 9px; border-radius: 7px; width: fit-content; cursor: pointer; font-size: 17px; font-weight: 500; } capi ft p { display: flex ; align-items: center; } capi ft p>i { border: 1px solid var(--bor); border-radius: 50%; font-style: normal; min-width: 12px; width: fit-content; margin-right: 6px; cursor: pointer; font-size: 8px; } capi ft wr i { height: 22px; width: auto; margin: 0px 29px; cursor: pointer; padding: 2px 2px; transition: 333ms; } capi ft wr i:hover { background: var(--bor); } @media screen and (max-width: 430px) { capi hd { flex-direction: column; gap: 0px; } capi hd>i { width: 34%; height: auto; } capi hd>bl { display: flex ; flex-direction: column; align-items: center; } capi hd>bl bd { flex-direction: column; align-items: center; } capi hd>bl bd wr { justify-content: center; margin: 4px 0px; } capi { padding: 45px 29px; } capi hd>bl i { width: 16%; height: auto; } capi bd p { display: none; } capi ft wr { display: flex ; align-items: center; flex-direction: column; margin: 16px 0px; } capi ft p { margin: 0; justify-content: center; } capi ft wr i { margin: 3px 0px; } } /* Component : App_Hero2 */ caph { display: flex ; flex-direction: column; padding: 45px 68px; position: relative; color: var(--b); background: var(--b-t22); } caph bg { width: 100%;height: 100%;z-index: -1;overflow: hidden; } caph video { width: 100%; position: absolute; top: 0; } caph hd bl wr { flex-direction: column; align-items: baseline; } caph>hd { display: flex ; gap: 24px; align-items: center; } caph>hd>i { width: 5%; height: auto; } caph>hd>bl { display: block; } caph>hd>bl h2 { margin: 5px 9px; font-size: 34px; font-weight: 500; padding-right: 19%; } caph>hd>bl bd { display: flex ; } caph>hd>bl bd wr { display: flex ; align-items: center; margin: 1px 9px; gap: 4px; } caph>hd>bl bd span { color: var(--b-t44); cursor: pointer; } caph>hd>bl bd rt { display: flex ; align-items: center; } caph>hd>bl bd t { display: flex ; align-items: center; } caph>hd>bl bd t>i { width: 15px; height: 15px; margin: 0px 2px; } caph>hd>bl bd t>i svg { fill: var(--b); } caph>hd>bl bd ln { height: 14px; background: var(--c0); width: 1px; margin: 0px 6px; } caph>hd>bl i { width: 7%; height: auto; } caph>hd>bl tx {display: block ; } caph>hd>bl tx t { font-size: 11px; } caph>hd>bl tx h4 { font-size: 14px; font-weight: 500; } caph>bd p { padding-right: 59%; margin: 54px 0px; } caph>ft { display: flex ; flex-direction: column; } caph>ft wr { display: flex ; align-items: center; } caph>ft btn { display: flex ; min-height: auto; min-width: 185px; max-width: 185px; line-height: 34px; background: var(--btn); color: var(--b); padding: 11px 9px; border-radius: 7px; width: fit-content; cursor: pointer; font-size: 17px; font-weight: 500; margin: 1px 3px; } caph>ft p { display: flex ; align-items: center; } caph>ft p>i { border-radius: 50%; font-style: normal; min-width: 12px; width: fit-content; margin-right: 6px; cursor: pointer; font-size: 8px; border: 1px solid var(--b-t); } caph>ft wr i { height: 22px; width: auto; margin:0px 11px; cursor: pointer; padding: 2px 2px; transition: 333ms; } caph>ft wr i:hover { background: var(--bor); } caph>ft wr i svg { fill: var(--b); } caph>ft wr i img { filter: invert(1); } @media screen and (max-width: 430px) { caph>hd { flex-direction: column; gap: 0px; } caph>hd>i { width: 34%; height: auto; } caph>hd>bl { display: flex ; flex-direction: column; align-items: center; } caph>hd>bl bd { flex-direction: column; align-items: center; } caph>hd>bl bd wr { justify-content: center; margin: 4px 0px; } caph { padding: 45px 29px; } caph>hd>bl i { width: 16%; height: auto; } caph>bd p { display: none; } caph>ft wr { display: flex ; align-items: center; flex-direction: column; margin: 16px 0px; } caph>ft p { margin: 0; justify-content: center; } caph>ft wr i { margin: 3px 0px; } } /* Component : App_Peopleview */ capvs { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px; } capvs hd { display: flex ; padding: 1px 0px; margin: 1% 4%; align-items: center; cursor: pointer;} capvs hd t { font-size: 17px; font-weight: 500;transition: 333ms; } capvs hd t:hover { margin-left: 15%; } capvs hd i { height: 30px; width: 30px; margin-top: 5px; } capvs bd { display: block; padding: 0px 0px 8px 0px; } /* Component : App_Ratings_reviews */ carr { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px;padding: 3px 0px; } carr hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } carr hd t { font-size: 17px; font-weight: 500; } carr bd>hd { display: grid ; padding: 7px 20px; gap: 15px; grid-template-columns: 16% auto auto;border-bottom: unset; } carr bd>hd tx { display: block; } carr bd>hd h2 { font-size: 55px; font-weight: 400; } carr bd>hd tx t { font-size: 11px; } carr bd>hd rt { display: block; } carr bd>hd rt tx { display: flex ; align-items: center; } carr bd>hd rt tx t { display: flex ; align-items: center; } carr bd>hd rt tx i { height: 13px; width: 20px; } carr bd>hd rt tx bd { display: flex ; align-items: center; height: 0px; width: 100%; margin: 3px 1px 4px 9px; background: var(--bg); border: 1px solid #EAE7EF; border-radius: 9px; padding: 7px 0px; } carr bd>hd rt tx bd ln { display: flex ; background: var(--aa); height: 14px; border-radius: 9px; } carr bd>bl { padding: 15px; margin: 1% 0%; } carr bd>bl btn { border: 1px solid var(--bor); padding: 6px 7px; border-radius: 7px; font-size: 11px; } carr bd>bl h3 { display: flex ; font-size: 23px; margin: 10px 0px; font-weight: 500; align-items: center; } carr bd>bl h3 i { height: 100%; width: 2%; margin: 0px 3px; margin-top: 4px; } carr bd>bl h5 { font-size: 16px; margin: 13px 0px; font-weight: 500; } carr bd>bl>btns { display: flex ; flex-wrap: wrap; row-gap: 7px; } carr bd>bl>btns btn { border-radius: 17px; margin: 0px 2px; padding: 5px 10px; cursor: pointer; background: var(--bc); } carr bd>bl h6 { margin-top: 14px; font-size: 14px; font-weight: 200; } carr ft { display: block; padding: 19px 32px; } carr ft btn { display: flex ; color: var(--a); cursor: pointer; } @media screen and (max-width: 430px) { carr bd>bl h3 { align-items: unset; } carr bd>bl h3 i { width: 10%; } carr bd>hd { grid-template-columns: 24% auto; } } /* Component : App_Requirements */ capsr { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px; padding: 3px 0px;} capsr hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } capsr hd t { font-size: 17px; font-weight: 500; } capsr bd { padding: 1px 21px; } capsr bd tx { display: flex ; align-items: center; } capsr bd tx i { height: 100%; width: 12px; background: #008000; border-radius: 50%; padding: 2px 2px; margin-right: 11px; } capsr bd tx i img { filter: invert(1); } capsr bd bl { display: block; padding: 0; } capsr bd bl tx i { background: unset; } capsr bd bl tx i img { filter: unset; } capsr bd bl { display: flex ; align-items: center; } capsr bd bl.systr { display: none; } .syst capsr bd bl.systr { display: block; } capsr ft { display:block; padding: 19px 32px; } capsr ft btn { display: flex ; color: var(--a); cursor: pointer; } .syst btn.cls { display: block; } capsr ft btn.cls { display: none; } .syst capsr ft btn { display: none; } @media screen and (max-width: 430px) { capsr bd { padding: 1px 14px; } capsr bd tx i { width: 21px; } capsr bd bl tx i {width: 13px; } } casb { display: flex ; justify-content: space-between; align-items: center; padding: 0px 15px; } casb h3 { display: grid ; grid-template-columns: auto 15%; } casb caps { display: flex ; gap: 12px; } casb caps i {width: 25px;height: 25px;border-radius: 20px;background: var(--b);} casb h3 i { height: 100%; } casb { display: flex ; justify-content: space-between; align-items: center; padding: 0px 4px; margin-block: 16px; } casb h3:hover { background: var(--bc); } casb h3 { padding: 8px 11px; border-radius: 7px; transition: 99ms;} @media only screen and (max-width: 999px) { casb caps { display: none; } casb { margin-bottom: 0px; } } /* Componet : App_Update */ cuao>bl { display: block; background: var(--b-t44); border-radius: 11px; overflow: hidden; transition: 95ms; margin: 7px 0; } cuao cdao { box-shadow: unset; margin: 0; background: transparent; } cuao detail { display: block; padding: 5px 11px; margin: 7px 11px; border-top: 1px solid var(--bc); font-size: 0.88em; } cuao detail>d>t { display: block; font-weight: 500; } cuao detail>btn:hover { background: var(--bc); } cuao detail>btn { display: block; padding: 4px 11px; font-weight: 500; color: var(--c1); border-radius: 7px; width: max-content; font-size: 0.88em; transition: 95ms; } cuao:active { background: var(--b-t22); } cuao:hover { background: var(--b-t77); }/* component= App_additionalinfo */ caai { display: flex ; flex-direction: column; } caai hd { border: unset; gap: 8px; padding: 3px 22px; } caai hd i { height: 20px; width: 19px; margin-top: 2px; } caai hd bl { display: block; } caai hd bl p { margin: 1px 0px; color: var(--c0); } caai hd bl span { color: var(--a); font-weight: 400; } caai hd bl t { font-size: 14px; } /* Component : App_information */ cainf { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px;padding: 3px 0px; } cainf hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } cainf hd t { font-size: 17px; font-weight: 500; } cainf bd { display: grid ; grid-template-columns: auto auto auto; } @media screen and (max-width: 430px) { cainf bd { grid-template-columns:100%; } caai hd { align-items: center; } } /* Component : App_mininav1 */ camn { display: flex ; justify-content: space-between; background: var(--bt); margin: 14px 0px; padding: 5px 12px; border-radius: 11px; position: sticky; top: 0; cursor: pointer; border: 1px solid var(--bor); z-index: 999; } camn hd { display: flex ; align-items: center; } camn hd wr { display: flex ; flex-direction: column; height: fit-content; margin: 0px 4px; } camn hd wr i { width: 60px; overflow: hidden; } camn hd wr h3 { font-weight: 500; } camn hd wr t { font-size: 13px; } camn bd { display: flex ; justify-content: end; width: 60%; } camn bd bl { display: block; } camn bd bl btn { display: flex ; min-height: auto; min-width: 184px; line-height: 28px; background: var(--btn); color: var(--b); padding: 11px 9px; border-radius: 7px; width: fit-content; cursor: pointer; font-size: 17px; font-weight: 500; margin: 5px 0px; } camn bd bl p { display: flex ; align-items: center; margin: 3px 0px; } camn bd bl p i { border: 1px solid var(--bor); border-radius: 50%; font-style: normal; min-width: 12px; width: fit-content; margin-right: 6px; cursor: pointer; font-size: 8px; } @media screen and (max-width: 430px) { camn { flex-direction: column; gap: 4px; } camn bd { width: 100%; } } /* Component : App_screenshots1 */ capss { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px;padding: 3px 0px; } capss hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } capss hd t { font-size: 17px; font-weight: 500; } capss bd { display: grid ; grid-template-columns: 4% auto 4%; align-items: center; } capss bd btn { cursor: pointer; display: grid ; height: 255px; width: 30px; align-items: center; border-radius: 11px; justify-content: center; z-index: 1; } capss bd btn i { height: 35px; width: 35px; transform: rotate(93deg); } capss bd btn.right i { height: 35px; width: 35px; transform: rotate(267deg); } capss bd btn i svg { opacity: 0; transition: 333ms; } capss bd cneter { display: flex ; align-items: center; width: 100%; overflow: scroll; scroll-behavior: smooth; } capss bd cneter scl { display: flex ; align-items: center; height: 200px; overflow: hidden; min-width: 352px; border-radius: 12px; margin: 4px; position: relative; cursor: pointer; } capss bd cneter scl i { width: 100%; height: 100%; } capss :hover i svg { opacity: 1; } @media screen and (max-width: 430px) { capss bd btn i { display: none; } capss bd cneter scl { min-width: 380px; } capss bd { grid-template-columns: 6% auto 6%; } } /* Component : App_screenshots2 */ capps { display: flex ; flex-direction: column; background: var(--b-t); margin: 2% 1%; border-radius: 11px;padding: 3px 0px; } capps hd { display: flex ; border-bottom: 1px solid var(--bor); padding: 15px; margin: 1% 0%; } capps hd t { font-size: 17px; font-weight: 500; } capps bd { display: grid ; grid-template-columns: 4% auto 4%; align-items: center; } capps bd btn { cursor: pointer; display: grid ; height: 255px; width: 30px; align-items: center; border-radius: 11px; justify-content: center; z-index: 1; } capps bd btn i { height: 35px; width: 35px; transform: rotate(93deg); } capps bd btn.right i { height: 35px; width: 35px; transform: rotate(267deg); } capps>bd btn i svg { opacity: 0; transition: 333ms; } capps bd cneter { display: flex ; align-items: center; width: 100%; overflow: scroll; scroll-behavior: smooth; } capps bd cneter scl { flex-direction: column; display: flex ; align-items: center; height: 200px; overflow: hidden; min-width: 352px; border-radius: 12px; margin: 4px; position: relative; cursor: pointer; justify-content: center; } capps bd cneter scl i { width: 100%; height: 100%; } capps bd cneter pl { position: absolute; background: var(--b); border-radius: 50%; padding: 6px 6px; opacity: 0; transition: 333ms; } capps bd cneter pl i { height: 29px; width: 100%; } capps :hover i svg { opacity: 1; } capps bd cneter scl:hover pl { opacity: 1; } @media screen and (max-width: 430px) { capps bd btn i { display: none; } capps bd cneter scl { min-width: 380px; } capps bd { grid-template-columns: 6% auto 6%; } }capsl { display: flex ; justify-content: space-between; align-items: center; padding: 0px 15px; } capsl h3 { display: grid ; grid-template-columns: auto 15%; } capsl capl { display: flex ; gap: 12px; } capsl capl i {width: 25px;height: 25px;border-radius: 20px;background: var(--b);} capsl h3 i { height: 100%; } capsl { display: flex ; justify-content: space-between; align-items: center; padding: 0px 4px; margin-block: 16px; } capsl h3:hover { background: var(--bc); } capsl h3 { padding: 8px 11px; border-radius: 7px; transition: 99ms;} @media only screen and (max-width: 999px) { capsl capl { display: none; } capsl { margin-bottom: 0px; } } ceap>ft { position: absolute; top: 30px; right: 24px; } casr { display: flex ; flex-direction: column; gap: 20px; border-radius: 11px; width: 100%; overflow: hidden; max-height: 480px; min-height: 480px; position: relative; color: var(--b); justify-content: center; box-shadow: 0px 4px 11px -1px #9b9ab9; transition: 99ms; } /*casr::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: url(/-/Base/asset/AppImage.png); z-index: -9999; background-position: left; background-size: 901px 488px; background-repeat: no-repeat; }*/ cass bd { position: relative} cass .swiper-pagination { position: absolute; bottom: -27px !important; } cass flex>div { display: flex ; gap: 11px; padding: 11px 11px; width:fit-content} casr bd { margin-bottom: 0px !important; } casr ft { margin-top: 11px !important; } casr hd btn { display: block; width: fit-content; padding: 1px 7px; border-radius: 6px; background: var(--b-t22); margin-left: 22px; font-size: 14px; opacity: 0; } casr bd, casr ft { display: block; margin: 44px; } casr bd h4 { font-size: 12px; color: var(--b-t77); opacity: .8; } casr ft btn { display: grid ; grid-template-columns: 22px auto; width: fit-content; border-radius: 11px; align-items: center; backdrop-filter: blur(4px); background: var(--bor); padding: 0px 15px; box-shadow: 0px .5px 0px var(--b-t44, 0px 1.1px 0px var(--b-t44)); font-size: 13px; margin-top: 0px; } casr ft svg { fill: var(--b); transform: rotateZ(270deg); } casr ft i { height: 33px; } casr bg i, casr bg img { height: 100%; width: 100%; object-fit: cover; } casr bg { display: block; height: 100%; width: 100%; inset: 0; } /*cass flex>div cas:first-child { max-width: 755px; min-width: 836px; transition: 99ms; }*/ cass cas.card {transition: min-width 0.5s ease-in-out; max-width: 322px; min-width: 322px; } cass mg>div cas { max-width: 322px; min-width: 322px; } .card.active { max-width: 755px; min-width: 836px; transition:min-width 0.5s ease-in-out;} /* .swiper-slide-active { min-width: 730px !important; max-width: 736px !important; transition: transform 0.9s ease-in-out,min-width 0.9s ease-in-out; } .swiper-slide { width: 322px !important; Fixed width for slides flex-shrink: 0 !important;Prevent shrinkingtransition: transform 0.9s ease-in-out,min-width 0.9s ease-in-out; } */ /* .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; transition: transform 0.9s ease-in-out; } */ saps { display: block; margin-bottom: 66px; } saps main { width: 100%; } saps cass bd mg { display: grid ; grid-template-columns: auto; align-items: center; position: relative; height: auto; max-height: max-content; min-height: auto; overflow: hidden;} @media only screen and (min-width: 999px) { saps feature { display: block; margin: 0px 22px; } } @media only screen and (max-width: 999px) { saps mg { margin: 0px 12px; } } casg flex>div { display: block; transition: 99ms; } casg bd flex, cfag bd flex { display: grid ; grid-template-columns: repeat(auto-fit, minmax(333px, 1fr)); grid-auto-flow: column; grid-template-rows: 103px 103px; width: max-content; overflow-y: visible; scroll-behavior: smooth; gap: 11px; align-items: center; scrollbar-width: none; --shadow-spacing: 8px; } @media only screen and (max-width: 666px) { casg>bd, cfag>bd { display: flex ; overflow: scroll; margin: 7px; } } cass { display: block; margin: 22px 0px; position: relative; } cass flex>i { /*position: absolute;*/ width: 33px; height: 33px; z-index: 9999999999999999; right: 0px; background: var(--c); border-radius: 50%; opacity: 1; transition: 99ms; } cass flex>i img { filter: invert(1); } cass flex>i:first-child { left: 11px; transform: rotate(180deg); min-height: 100%; background: var(--0); position: absolute; opacity: 0;} cass i.swiper-button.nextSwip { position: absolute; height: 100%; top: 0; background: var(--0); right: 11px; opacity: 0;} cass:hover i.swiper-button.nextSwip, cass:hover flex>i:first-child { opacity: 1; }/*h1 { margin-bottom: 30px; font-size: 28px; } .search-box { background: #262626; border-radius: 30px; padding: 10px 20px; display: flex; align-items: center; width: 500px; max-width: 90%; } .search-box input { background: transparent; border: none; outline: none; color: #fff; flex: 1; padding: 10px; font-size: 16px; } .icons { display: flex; gap: 15px; align-items: center; } .icons i { cursor: pointer; font-size: 18px; color: #aaa; } .tools { margin-right: 15px; display: flex; align-items: center; gap: 5px; } .tools i { font-size: 14px; }*/ cast bl dv{ display: flex ; padding: 4px 14px; border-bottom: 1px solid var(--bc); align-items: center; border: 0;border-radius: 10px;} cast bd ddv{ display: flex ; padding: 4px 14px; border-bottom: 1px solid var(--bc); align-items: center; border: 0;border-radius: 10px;} cast bl dv:last-child { border-bottom: none; } cast bl dv i{ display: inline-block; width: 20px; height: 20px; margin-right: 12px; background: var(--bc); padding: 11px 11px; border-radius: 20px; } cast ddv i { display: inline-block; width: 20px; height: 20px; margin-right: 12px; background: var(--bc); padding: 11px 11px; border-radius: 20px; } cast bl img{ width: 100%; height: 100%; } cast bl d { display: flex; flex-direction: column; } cast bl t { font-size: 14px; font-weight: bold; } cast bl p { font-size: 12px; color: var(--c0);margin: 0; } cast bl input { margin-left: auto;display: block;width: 18px;} cast>bl { background: var(--b); border-radius: 8px; padding: 16px; box-shadow: 0 16px 70px var(--aa-t); position: absolute; z-index: 9999; width: 279px; top: -6em;} cast bd ddv d { align-items: baseline; } cast bl dv:hover { background: var(--bc); } cast bl ddv:hover { background: var(--bc); } beso.AS cast { display: block; } cast { display: none;position: relative; } cafao { background: var(--b-t); border-radius: 22px; padding: 22px; width: 444px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); display: flex ; flex-direction: column; align-items: center; gap: 16px; margin: 22px; } cafao hd { display: flex; justify-content: space-between; align-items: center; width: 100%; } cafao i img { width: 60px; } cafao bd { text-align: center; } cafao bd h2 { font-size: 2rem; font-weight: 600; margin-bottom: 8px; color: var(--c); } cafao bd p { font-size: 0.88em; color: var(--c); } cafao ft { width: 100%; } cafao btn { background: var(--aaa); color: var(--b); padding: 12px 20px; border: none; border-radius: 8px; font-size: 0.88em; cursor: pointer; margin: 11px auto; display: grid ; justify-content: center; margin-bottom: 0; } /* Balance : Balance */ cbnco bl {border-radius: 22px;/* background-image: linear-gradient( 201deg,#0ee4d8, #3a98e2, #6a3fea) !important;*/box-shadow: 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 64 / 35%);transition:777ms;transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);} cbnco hd>h3{display: flex;align-items: center;} cbnco h3 img{ width: 30px; height: 30px; display: inline-block; margin-right: 7px;} cbnco bd { min-height:123px;padding-top: 0; } cbnco bd d { display:block;min-height:123px; } cbnco bd trxwallet f { z-index: 8;align-items: center;width: 100%;flex-wrap: wrap; } cbnco bd trxwallet bt { opacity:0;margin: 0 11px; } cbnco bd trxwallet h2 { font-family: system-ui;line-height: 1;margin: auto 4px; } cbnco bd trxwallet balance { font-size: 0.66em; } cbnco bd trxwallet b { letter-spacing: 4px;font-size: 0.66em; } cbnco bd trxwallet address { position: relative;left: 15px;bottom: 0;min-width: 100%;font-style: unset;text-transform: uppercase;letter-spacing: 4px;font-family: system-ui;font-weight: bold;opacity: 0.77;text-shadow: -1px 1px 2px rgb(0 0 0 / 44%); } cbnco bd ethwallet f { z-index: 8;item-aligns:center; } cbnco bd ethwallet h2 { line-height: 1; margin: auto 4px; } cbnco bd ethwallet b { letter-spacing: 4px; } ccba { background-image: linear-gradient(#00000000, #000000cc),url(/-/Base/asset/Best_apps.png); background-size: 100% 100%; color: var(--b); padding: 22px; display: flex ; flex-direction: column; gap: 20px; } ccba { max-width: 450px; min-width: 450px; border-radius: 11px; max-height: 220px; min-height: 220px; position: relative; justify-content: flex-end; box-shadow: 0px 4px 11px -1px #9b9ab9; transition: 99ms; margin: 0.5rem 0.0rem 0.5rem 0.5rem; } ccba:hover { transition: 99ms; } ccba:hover blur { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; backdrop-filter: blur(10px); border-radius: 25px; } ccba:hover bl { display: block; z-index: 2; } ccba t { display: none; transition: 999ms; } ccba:hover t { display: block; transition: 999ms; margin: 13px 0 10px 0; } /* Component : Bot */ card { position:relative; } card d { display: grid; grid-template-columns: 111px auto; position: relative; z-index: 888; margin: auto;margin: 11px; } card d hd dp { display: flex; justify-content: center; align-items: center; height: 111px; width: 111px; box-shadow: var(--bs-ajio); border-radius: 22px; } card d hd dp img { width: 85%; margin: auto; display: block;border-radius: 12px; } card d bd { margin-top: 8px;width: 100%;grid-column-start: 1;grid-column-end: 3;grid-template-columns: 50% 50%; } card d bd va { font-weight: bold; } card dd { display: grid;margin-top: 33px;width: 100%;grid-column-start: 1;grid-column-end: 3;grid-template-columns: 33.33% 33.33% 33.33%;color: rgb(154,160,166); } card dd b { color:var(--c); } smbo ddd { padding: 0 11px; display: grid; grid-template-rows: auto auto; justify-content: flex-start; align-items: center; text-align: center; } smbo dd { margin: 0; } smbo actn { display: grid; grid-template-columns: auto auto; height: 40px; grid-column-gap: 4px; margin: 11px 0;/*width: 55%; */} smbo p { font-weight: bold; margin : 0;} smbo va { font-weight: 100; } smbo bot { grid-column-end: 3; grid-column-start: 1; } smbo wish svg { opacity: 0.44; } @media screen and (max-width: 999px) { smbo actn {width: 100%;} smbo nv h3 { white-space: nowrap; width: 18%; overflow: hidden; text-overflow: ellipsis; } smbo ddd { justify-content: center; } } / Component : Bought / cbuto bd { display: grid; grid-gap: 7px; padding: 7px 0; } /* Component : BrandRelated */ brlp>bl { display: grid ; min-width: 211px; flex: none; padding: 11px; margin: 7px; background: var(--bc); border-radius: 11px; position: relative; overflow: hidden; border: solid 1px var(--bt); grid-template-rows: 188px auto auto; max-width: 333px; } brlp>bl hd { display: block; height: -webkit-fill-available; width: 100%; margin: auto; overflow: hidden; border-radius: 11px; } brlp>bl hd>i img { height: 100%; width: 100%; object-fit: cover; } brlp>bl name { font-size: 0.88em; font-weight: 500; margin: 8px 0; text-align: start; font-family: "Roboto", "Arial", sans-serif; line-height: 1.2em; overflow: hidden; max-height: 4.4em; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; } brlp>bl is { display: flex ; font-size: 15px; align-items: center; font-weight: 600; } brlp>bl is>i { height: 16px; width: 16px; margin-right: 3px; } brlp>bl price { display: block; text-align: start; font-size: 1.11em; font-weight: 700; line-height: 1.77; } brlp>bl price>small { font-size: 0.66em; position: relative; top: -3px; font-weight: bold; right: -4px; } brlp>bl ft { display: grid ; align-items: end; } brlp>bl actn { display: grid ; grid-template-columns: auto 40px; height: 40px; grid-column-gap: 4px; position: relative; z-index: 99; } brlp>bl actn>btn { display: flex ; justify-content: center; align-items: center; font-weight: bold; color: var(--aa); background: var(--aa-t); border-radius: 7px; font-size: 0.88em; } brlp>bl wish { display: flex ; justify-content: center; align-items: center; font-size: 2em; font-family: monospace; background: var(--bc); border-radius: 7px; } brlp>bl hd>i { height: 100%; } brlp>bl bd>span { -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; cursor: pointer; display: grid ; line-height: 16px; padding: 7px; background-color: var(--aa); color: var(--b); width: max-content; font-size: 0.88em; margin: 4px; } brlp>bl ft>a { position: relative; font-size: 0.80em; font-weight: 600; color: var(--a); } /* Component : BrandRelateds */ brls>bl { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } brls>bl bd>d { overflow: scroll; padding: 11px 0; display: flex ; position: relative; margin: unset; width: 100%; } brls>bl reverse, brls>bl next { display: flex ; align-items: center; justify-content: center; height: 44px; width: 44px; position: absolute; top: 0; bottom: 0; right: 0; margin: auto -22px; background: var(--b); box-shadow: 0 0 7px 4px var(--bc); border-radius: 55%; z-index: 999; } brls>bl>bd { display: block; position: relative; } brls>bl reverse { right: unset; left: 0; } brls>bl next { transform: rotate(180deg); } brls>bl hd>h4 { font-size: 1.44em; margin-bottom: 11px; } brls>bl bd>d>i img { height: 100%; width: 100%; object-fit: cover; } brls>bl bd>d>i { height: 100%; min-width: 504px; mask-image: linear-gradient(89deg, #000 91%, transparent); mask-composite: intersect; max-height: 333px; } brls>bl hd>d { display: grid ; grid-template-columns: max-content max-content auto; align-items: center; padding: 11px 0; } brls>bl hd>d>i { max-width: 122px; max-height: 88px; } brls>bl txt>t { display: block; font-weight: 500; font-size: 1em; } brls>bl txt a { font-size: 0.77em; font-weight: 500; color: var(--a); } brls>bl d>hr { height: 100%; width: 2px; margin: auto 22px; } @media (max-width : 999px) { brls>bl hd>d { display: block; } brls>bl hd>h4 { font-size: 1.22em; } brls>bl bd>d>i { display: none; } } /* Component : Business_Analytics */ cbano>hd>d { display: grid ; grid-template-columns: auto 33px; align-items: center; width: max-content; font-size: 1.33em; margin-bottom: 7px; } cbano { display: block; padding: 22px; border-radius: 11px; margin: 4px; background: var(--bt); box-shadow: var(--bt-bx); } cinss>hd { display: block; padding: 11px 0; border-bottom: 2px solid; } cinss>bd { display: grid ; grid-template-columns: 50% 50%; } cinss { display: block; max-width: 1300px; margin: 11px auto; position: relative; padding: 11px; transition: 333ms; overflow: hidden; background: var(--bt); border-radius: 11px; } cbano>bd>i { height: 100%; overflow: hidden; border-radius: 11px; display: block; } cbano>bd>i>img { width: 100%; height: 100%; object-fit: cover; } cbano>bd>i { height: auto; overflow: hidden; border-radius: 11px; display: block; margin-top: 11px; } cbano:nth-child(2) { background: var(--bt); box-shadow: var(--bt-bx); } crcs { display: block; padding: 22px; border-radius: 11px; background: var(--bt); margin: 4px; box-shadow: var(--bt-bx); } @media (max-width : 1333px) { cinss { max-width: 1100px; }} @media (max-width : 1200px) { cinss { max-width: 1010px; }} @media (max-width : 999px) { cinss>bd>i { height: 66%; bottom: 0; top: unset; width: max-content; } cinss>bd { display: block; } } @media (max-width : 999px) { cinss { max-width: 833px; }} @media (max-width : 800px) { cinss { grid-template-columns: auto; }}hii cbas p { display: block; margin-top: 20px; font-size: 0.88em; } cbas svg { width: 100px; height: 100px; } cbas bl { display: block; width: 100%; max-width: 600px; margin: 50px auto; text-align: center; background: var(--b); padding: 22px; border-radius: 22px; } @media screen and (max-width: 999px) { cbas bl { margin: 11px; width: auto; } } cbfs p { display: block; margin-top: 20px; font-size: 0.88em; } cbfs svg { width: 100px; height: 100px; } cbfs bl { display: block; width: 100%; max-width: 600px; margin: 50px auto; text-align: center; background: var(--b); padding: 22px; border-radius: 22px; } @media screen and (max-width: 999px) { cbfs bl { margin: 11px; width: auto; } } cbis p { display: block; margin-top: 20px; font-size: 0.88em; } cbis svg { width: 100px; height: 100px; } cbis bl { display: block; width: 100%; max-width: 600px; margin: 50px auto; text-align: center; background: var(--b); padding: 22px; border-radius: 22px; } @media screen and (max-width: 999px) { cbis bl { margin: 11px; width: auto; } } cbpo { display: flex ; justify-content: center; align-items: center; margin: 22px auto; } cbpo bl { background-color: var(--b); width: 100%; max-width: 666px; border-radius: 11px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); max-height: 90vh; overflow-y: auto; } cbpo hd { padding: 16px; display: flex; justify-content: flex-end; } cbpo hd i { background: var(--bc); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer;padding: 7px; } cbpo blc { display: flex; flex-direction: column; padding: 0 20px 20px; } cbpo blc>i { width: 112px; height: 112px; border-radius: 50%; background-color: var(--bc); display: flex ; justify-content: center; align-items: center; overflow: hidden; } cbpo h1 { margin-top: 12px; font-size: 24px; font-weight: 700; } cbpo blc p { margin-top: 4px; font-size: 15px; } cbpo button.msg { display: grid ; grid-template-columns: 35px auto; justify-content: center; align-items: center; padding: 2px; } cbpo stars { display: flex ; gap: 4px; font-size: 20px; padding: 11px 0; } cbpo stars i { height: 22px; width: 22px; } cbpo h2 { font-size: 17px; font-weight: 600; margin-bottom: 12px; } cbpo .seflr>div { background: var(--bc); border-radius: 9px; border: solid 1px var(--bc); width: auto; display: flex ; align-items: center; margin: auto 0; height: -webkit-fill-available; } cbpo .seflr { display: grid ; grid-template-columns: 44% 27% 27%; gap: 2%; margin-bottom: 20px; } cbpo .seflr button { background: transparent; padding: 0 4px; text-align: center; } cbpo .seflr input { background: transparent;padding: 0; } cbpo .seflr>div.srh { display: grid ; grid-template-columns: 24px auto; align-items: center; padding: 0px 12px; } cbpo no { display: flex; flex-direction: column; align-items: center; padding: 40px 0; color: #65676b; } cbpo no img { width: 112px; height: auto; margin-bottom: 16px; } cbpo .msg i { margin-right: 8px; } cbpo .divider { height: 1px; background: var(--bor); margin: 11px 20px; } cbpo .fbtns { display: flex; gap: 8px; flex-wrap: wrap; } cbpo no i { height: 111px; } @media (min-width: 768px) { cbpo .seflrs { flex-direction: row; align-items: center; } cbpo .fbtns { width: auto; } } @media (max-width: 999px) { cbpo { margin: 11px; } cbpo .seflr>div.srh { grid-template-columns: 24px 0px; width: fit-content; } cbpo .seflr input { display: none; } cbpo .seflr { grid-template-columns: 14% 42% 42%; } cbpo .seflr>div.srh { height: 40px; } } bcld bd div { display: grid ; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 24px; } bcld { width: 100%;text-align: center; } bcld hd>b { padding-block: 10px; display: block; } cldr hd d,cldr bd d { display: flex ; gap: 9px; padding: 5px 7px; } cldr>bl>hd,cldr>bl>bd { display: flex ; border-bottom: solid 1px var(--bor); } cldr hd dv { display: flex ; align-items: center; justify-content: space-between; width: 100%; padding: 2px 5px; } cldr hd dv:nth-child(1) { border-right: solid 1px var(--bor); width: 65%; } cldr bd dv:nth-child(1) { display: block; overflow: scroll; width: 40%; height: 48vh;border-right: solid 1px var(--bor); } cldr ft btns { display: flex ; justify-content: flex-end; padding: 15px 20px; gap: 20px; } cldr btn.bgray { background: 0; color: unset; } cldr btn.bgray:hover { background: var(--bc); } cldr bd dv:nth-child(2) { width: 61%; } cldr ft btn { background: var(--a); justify-content: center; font-weight: 500; color: var(--b1); padding: 8px 22px; display: flex ; border-radius: 6px; } /* Component : Call */ ceco ec { display:block } ceco wt{display: block; padding: 11px 33px; border-radius: 22px; background: #fff6; border: solid 1px #fff; margin-top: 11px;position: relative; overflow: hidden; } ceco ec grid { transition:111ms;grid-template-rows: 66px auto; background: linear-gradient( 45deg , rgb(0 136 218 / 11%),rgb(7 110 194 / 11%),rgb(16 76 161 / 11%),rgb(22 55 140 / 11%),rgb(24 47 133 / 11%),rgb(0 26 63 / 11%)); padding: 11px 22px; border-radius: 11px; margin: 11px 7px; } ceco ec f{align-items: center;position:unset;} ceco ec co input{transform: scale(1.1); height: 44px; width: 44px; margin:0 } ceco ec h7{display: flex; align-items: center;letter-spacing: 0; } ceco ec label { margin-left: 11px;} ceco ec input:after { position: absolute; content: ''; z-index: 88; left: 0; right: 0; top: 0; bottom: 0; } ceco ec grid{position:relative} ceco ec co { margin: 7px; border-radius: 11px; overflow: hidden; position: relative; height: 44px; width: 44px;box-shadow:0 0 0 7px rgb(255 255 255 / 22%); border: solid 2px var(--c); display: flex; justify-content: center; align-items: center; font-family: monospace;font-size: 3em;} ceco ec co:after { z-index: 888; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } ceco ec a { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 8; } ceco ec svg { margin: 22%; height:55%;width:55%} ceco ec grid.this { box-shadow: inset 0 0 0 2px green, var(--bs-b); background: rgb(0 128 0 / 20%); filter: drop-shadow(1px 2px 4px black);} ceco select { width: 88%; margin: 6%; border: unset; border-radius: 7px; padding: 15px 11px; background: linear-gradient( 45deg , rgb(0 136 218 / 11%),rgb(7 110 194 / 11%),rgb(16 76 161 / 11%),rgb(22 55 140 / 11%),rgb(24 47 133 / 11%),rgb(0 26 63 / 11%)); font-weight: bold; margin-bottom: 0;} ceco ec { display:block; } ceco bl { box-shadow:var(--bs-b); } ceco bl hd { padding-bottom:22px;padding-left:11px;padding-top: 11px; } ceco bl hd h3 { display: flex;align-items: center; } ceco bl hd t { margin-left:4px; } ceco bl hd b { fill: #fff; } ceco bl bd { min-height:123px; padding:0; } ceco bl bd form { position:relative;background:var(--b-t);padding: 7px;border-radius: 22px; } ceco bl bd form d { display: grid;grid-template-columns: 50% 50%; display:none } ceco bl ft { display: block; } ceco bl ft aa { position: relative; display: flex; justify-content: center; align-items: center; transition: 77ms; background: linear-gradient( 133deg , #2196f3, rgb(0 255 222), #ffeb3b); border-radius: 50px; height: 50px; box-shadow: var(--bs-b); margin: 22px; } ceco bl ft i { height: 40px;width: 40px; margin-right: 0px; fill: #fff; } ceco bl ft f { font-size: 22; font-weight:bold; letter-spacing: 0; } ceco div { background: var(--b-t); padding: 22px; border-radius: 22px; backdrop-filter: blur(7px); display:none; } /* Component : Call_Setting */ cmcno>bl { position: relative; display: grid ; grid-template-columns: 66px auto 66px; padding: 22px; background: var(--bt); align-items: center; margin: 11px 0; border-radius: 11px; justify-content: space-between; } cmcno svg{height: 30px} cmcno hd { display: flex; justify-content: space-around; text-align: center; align-items: center; } cmcno ft { display: flex; justify-content: space-around; text-align: center; align-items: center; } cmcno bd {display: flex; gap: 11px; justify-content: space-around; text-align: center; align-items: center;} cmcno p { margin: 0; } cmcno a { display: grid; gap: 11px; } smso cmcno btn { display: grid ; justify-content: center; align-items: center; border-radius: 7px; margin: auto; font-weight: 400; white-space: nowrap; text-align: center; grid-template-rows: 55px auto; } cmcno copo btn { grid-template-rows: unset; margin: 4px 0; } cmcno btn>i { width: 44px; background: var(--bc); padding: 6px; margin: auto; margin-bottom: 4px; } cmcno btn.this i { background: var(--aaa); } cmcno btn.this svg { fill: var(--b); } cmcno btn.this { background: var(--00); color: var(--aa); } /* Component : Calls */ calso { background: var(--b-t); margin: 11px; box-shadow: var(--bs-b); border-radius: 22px; padding: 22px;display: block; } calso hd { display: grid; grid-template-columns: 44px auto; } calso hd i { height: 40px; width: 40px; } calso hd h3 { display: flex; align-items: center; padding-left: 1px; } calso bd gbs { grid-template-columns: 55px 222px 222px 222px 222px 222px; width: 100%; overflow: hidden; overflow-x: auto; padding-right: 22px; display: grid; margin: 7px;margin-left: 0;letter-spacing: 1 } calso bd gbs bt { display: flex; justify-content: center; align-items: center; } calso bd gb { display: block; background: linear-gradient( 137deg , rgb(96 229 222 / 33%), rgb(78 173 214 / 33%), rgb(68 135 223 / 33%), rgb(56 89 228 / 33%) ); padding: 22px; margin: 4px; backdrop-filter: blur(11px); box-shadow: var(--bs-b); border-radius: 22px; } calso bd gb p { font-weight: bold; margin: 4px; } calso bd gb hd{background:var(--b-t)} calso bd gb h6{color:green} calso bd gb p{color:gray} bcas bl { display: flex ; align-items: center; padding: 10px 20px; border-radius: 4px; background: var(--b);justify-content: space-between; } bcas blc { display: flex ; align-items: center; background: var(--bc); padding: 4px 17px; border-radius: 36px; margin-right: 8px; } bcas blc i { display: inline-block; margin: 0 4px; width: 16px; height: 16px; } bcas blc btn { background: none; border: none; font-size: 14px; margin-left: 6px; cursor: pointer; } bcas input { flex: 1; padding: 5px 17px; border: none; outline: none; font-size: 13px; background: transparent; } bcas .clear { color: var(--a); text-decoration: none; margin-left: 8px; border: 1px solid var(--bc); border-radius: 4px; padding: 6px 12px; font-size: 14px; display: flex ; cursor: pointer; height: 22px; gap: 1px; } bcas bl hd { display: flex ; } bcas input:hover { display: flex ; align-items: center; background: var(--bc); border-radius: 36px; margin-right: 8px; width: 333px; } bpmo bl { display: flex ; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--b); border-bottom: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } bpmo hd { display: flex; align-items: center; gap: 15px; } bpmo bd { display: flex; align-items: center; gap: 10px; } bpmo ft { display: flex; align-items: center; gap: 15px; } bpmo h3 { font-weight: 600; padding: 5px 10px; border-right: 1px solid var(--bc); } bpmo info { display: flex ; align-items: center; gap: 5px; padding: 8px; position: relative; background: var(--bc); border-radius: 6px; } bpmo i { height: 20px; width: 20px; } bpmo p { margin: 0; } bpmo score b { width: 20px; height: 20px; } bpmo .updated { font-size: 13px; } bpmo btn { border: 1px solid var(--bc); border-radius: 4px; padding: 6px 12px; font-size: 14px; display: flex ; cursor: pointer; height: 22px; gap: 1px; } bpmo bld { display: flex ; align-items: center; padding: 10px 4px; margin-top: 5px; background: var(--aat); border-radius: 6px; gap: 2%; } bpmo blc { display: none; align-items: flex-start; padding: 10px; margin-top: 5px; background: var(--b); border-radius: 6px; } bpmo bld b { font-size: 14px; } bpmo input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid var(--a); border-radius: 6px; font-size: 13px; box-sizing: border-box; } bpmo blc i { margin-right: 10px; margin-top: 4px; } bpmo blc p { font-size: 10px; } bpmo bld input { height: 15px; width: 16px; } bpmo info.acr:hover blc { display: block; position: absolute; top: 37px; } ccps bl { display: flex ; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--b); border-bottom: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } ccps hd { display: flex; align-items: center; gap: 15px; } ccps bd { display: flex; align-items: center; gap: 10px; } ccps ft { display: flex; align-items: center; gap: 15px; } ccps h3 { font-weight: 600; padding: 5px 10px; border-right: 1px solid var(--bc); } ccps info { display: flex ; align-items: center; gap: 5px; padding: 8px; position: relative; background: var(--bc); border-radius: 6px; } ccps i { height: 20px; width: 20px; } ccps p { margin: 0; } ccps score b { width: 20px; height: 20px; } ccps .updated { font-size: 13px; } ccps btn { border: 1px solid var(--bc); border-radius: 4px; padding: 6px 12px; font-size: 14px; cursor: pointer; height: 22px; } ccps bld { display: flex ; align-items: center; padding: 10px 4px; margin-top: 5px; background: var(--aat); border-radius: 6px; gap: 2%; } ccps blc { display: none; align-items: flex-start; padding: 10px; margin-top: 5px; background: var(--b); border-radius: 6px; } ccps bld b { font-size: 14px; } ccps input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid var(--a); border-radius: 6px; font-size: 13px; box-sizing: border-box; } ccps blc i { margin-right: 10px; margin-top: 4px; } ccps blc p { font-size: 10px; } ccps bld input { height: 15px; width: 16px; } ccps info.acr:hover blc { display: block; position: absolute; top: 37px; background: var(--b); z-index: 99;}ccpao bl { display: block; width: 100%; max-width: 550px; background: var(--b); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; } ccpao hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bc); } ccpao bd btns { display: flex ; border: 1px solid var(--bc); border-radius: 4px; overflow: hidden; } ccpao bd btns btn { padding: 8px 16px; font-size: 14px; background: var(--b);; border: none; cursor: pointer; } ccpao bd btn:nth-child(1) { background: var(--bc); font-weight: 500; } ccpao bd slt { display: flex ; align-items: center; padding: 8px 16px; background: var(--b); border: 1px solid var(--bc); border-radius: 4px; font-size: 14px; cursor: pointer; } ccpao bd trc { display: flex ; justify-content: space-between; align-items: center; margin-bottom: 20px; } ccpao bd p { font-size: 14px; color: var(--c0); max-width: 300px; margin: 0 auto; } ccpao ft { display: flex; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--bc); } ccpao hd>btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c0); cursor: pointer; background: var(--b); border: 1px solid var(--bc); border-radius: 4px; } ccpao bd { display: block; padding: 20px; } ccpao controls { display: flex; justify-content: space-between; margin-bottom: 20px; } ccpao bd chart h3 { font-weight: 600; font-size: 16px; margin-bottom: 8px; } ccpao bd chart { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; padding: 30px 0; text-align: center; } ccpao hd h4 { font-weight: 600; font-size: 16px; } ccpao ft btn { display: flex; align-items: center; padding: 8px 16px; background: var(--b); border: 1px solid var(--bc); border-radius: 4px; font-size: 14px; cursor: pointer; } ccpao bd slt i { height: 20px; width: 20px; } ccpao bd slt i:nth-child(1) { margin-right: 8px; } ccpao ft btn i { height: 20px; width: 20px; margin-right: 7px; } ccpao bd chart i { width: 60px; height: 40px; margin-bottom: 20px; opacity: 0.5; } ccpao bd trc h4 { font-weight: 600; font-size: 14px; } @media only screen and (max-width: 999px) { ccpao bl { display: block; width: 100%; margin: 0; } } bcdo bl { display: block; margin: 0px auto; background: var(--b); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-top: solid 1px solid var(--bc); } bcdo hd { display: flex; padding: 15px; border-bottom: 1px solid var(--bc); } bcdo btns { display: flex; flex: 1; gap: 10px; } bcdo btn { border: 1px solid var(--bc); border-radius: 4px; padding: 6px 12px; font-size: 14px; display: flex ; cursor: pointer; height: 22px; gap: 1px; } bcdo btn.this { background: var(--aa); color: var(--b); } bcdo btn i { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } bcdo bd { display: block; padding: 15px; } bcdo blc { display: flex ; margin-bottom: 15px; gap: 10px; justify-content: space-between; } bcdo btns.df { display: inline-flex ; flex: inherit; } bcdo tr { background: var(--b); } bcdo ft { display: block; } bcdo .data-table { width: 100%; border-collapse: collapse; } bcdo th { padding: 0px 15px; text-align: left; border: 1px solid var(--bc); font-size: 14px; } bcdo td { padding: 0px 15px; text-align: left; border: 1px solid var(--bc); font-size: 14px; } bcdo .data-table th { font-weight: 500; position: relative; } bcdo .icon { margin-left: 5px; font-size: 10px; } bcdo .checkbox { width: 18px; height: 18px; border: 1px solid var(--bc); border-radius: 3px; } am btn:hover { background: var(--bc); }bcto table { border-collapse: collapse; width: 100%; font-size: 14px; } bcto th, td { border: 1px solid var(--bc); padding: 8px 12px; text-align: left; white-space: nowrap; } bcto th { font-weight: bold; padding: 0px 15px; text-align: left; border: 1px solid var(--bc); font-size: 14px; } bcto tr:hover { background-color: var(--b-t); } bcto a { color: var(--at); text-decoration: none; } bcto .checkbox { width: 18px; height: 18px; border: 1px solid var(--bc); border-radius: 3px; } bcto tr { background: var(--b); } bcto th i { width: 20px; height: 20px; display: flex ; align-items: center; justify-content: center; } bcto th span.icon { margin-left: 5px; font-size: 10px; } bcto th { font-weight: 500; position: relative; } bcto { display: block; overflow: scroll; } bcto td i { width: 20px; height: 20px; margin-left: 7px; } bcto td.results { display: flex ; } /* Component : Cart */ cmcto>bl { grid-template-columns: 100px auto auto; width: auto; gap: 2%; margin: 7px 0; background: var(--b); padding: 22px; border-radius: 22px; display: grid ; box-shadow: var(--bs-b); position: relative; } /* Component : Cart_Select */ czso {display: grid ; grid-template-rows: 66px auto; text-align: center; min-width: 88px; max-width: 88px; background: var(--bt); border-radius: 11px; margin: 5px; padding: 22px; position: relative;} czso>hd>i { height: 44px; width: 37px; margin: auto; margin-top: 7px; } cayo>bl { padding: unset; } clfo div { padding: 16px 16px; border: solid 1px var(--bor); border-radius: 6px; font-size: 16px; transition: border-color 0.2s ease; display: flex ; flex-direction: column; margin-bottom: 20px; } clfo div:hover { border: solid 1px; } clfo bd dv { display: flex ; justify-content: space-between; } clfo dv i { width: 20px; } cayo input[type="radio"] {display: none;} cayo bd label { display: flex ; padding: 7px 9px; padding-left: 33px; } cayo hd d { display: flex ; align-items: center; gap: 13px; font-weight: 500; } cayo bd>div { display: flex ; flex-direction: column; border: unset; padding: unset; } clfo bd div:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 2px var(--a-t); } clfo.cy span {color: var(--a);} body:has(#radio-tools:checked) clfo div dv tx::after { content: "Tools"; } body:has(#radio-furniture:checked) clfo div dv tx::after { content: "Furniture"; } body:has(#radio-household:checked) clfo div dv tx::after { content: "Household"; } body:has(#radio-garden:checked) clfo div dv tx::after { content: "Garden"; } body:has(#radio-appliances:checked) clfo div dv tx::after { content: "Appliances"; } /*body:has(#radio-Video:checked) clfo div dv tx::after { content: "Video Games"; }*/ body:has(#radio-Books:checked) clfo div dv tx::after { content: "Books, films & music"; } body:has(#radio-Bags:checked) clfo div dv tx::after { content: "Bags & luggage"; } body:has(#radio-Women:checked) clfo div dv tx::after { content: "Women's clothing & shoes"; } body:has(#radio-Men:checked) clfo div dv tx::after { content: "Men's clothing & shoes"; } body:has(#radio-Jewellery:checked) clfo div dv tx::after { content: "Jewellery and accessories"; } body:has(#radio-Health:checked) clfo div dv tx::after { content: "Health & beauty"; } body:has(#radio-Pet:checked) clfo div dv tx::after { content: "Pet supplies"; } body:has(#radio-Baby:checked) clfo div dv tx::after { content: "Baby & children"; } body:has(#radio-Toys:checked) clfo div dv tx::after { content: "Toys and games"; } body:has(#radio-computers:checked) clfo div dv tx::after { content: "Electronics & computers"; } body:has(#radio-Mobile:checked) clfo div dv tx::after { content: "Mobile phones"; } body:has(#radio-Bicycles:checked) clfo div dv tx::after { content: "Bicycles"; } body:has(#radio-Arts:checked) clfo div dv tx::after { content: "Arts & crafts"; } body:has(#radio-Sport:checked) clfo div dv tx::after { content: "Sport and outdoors"; } body:has(#radio-Car:checked) clfo div dv tx::after { content: "Car parts"; } body:has(#radio-sale:checked) clfo div dv tx::after { content: "Garage sale";} body:has(#radio-Miscellaneous:checked) clfo div dv tx::after { content: "Miscellaneous"; } ccgn>bl { display: block; position: absolute; z-index: 100000; max-height: 250px; top: 0rem; box-sizing: border-box; background: var(--b); border-radius: 4px; width: 305px; padding: 8px 12px; box-shadow: 0 16px 70px var(--aa-t); overflow: scroll; } ccgn { position: relative; display: none; } clfo.cy ccgn { display: block; } bfui { display: block; padding: 22px; } bfui bl { max-width: 600px; margin: auto;background: var(--b); box-shadow: var(--bs); padding:22px; text-align: center; border-radius: 22px; } bfui bd {display: block; } bfui i { display: grid ; background: var(--a); padding: 7px; border-radius: 44px; margin: auto; margin-bottom: 11px; width: 44px; height: 44px;} bfui i svg { width: 33px; height: 33px; fill:var(--b); } bfui h3 { font-size: 18px; font-weight: bold; color: var(--c); margin-bottom: 6px; } bfui p { font-size: 14px; color: #666; } cclto { display: none; } cclto bl {background: var(--b); width: 400px; border-radius: 11px; box-shadow: 0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1), inset 0 0 0 1px rgb(255 250 250 / 50%); padding: 22px; position: relative; display: grid ; grid-template-rows: 55px auto 77px; gap: 2%;} cclto hd { display: grid ; align-items: center; grid-template-columns: auto 33px; border-bottom: 1px solid var(--bor); padding-bottom: 14px; } cclto i { width: 24px; height: 24px; background: var(--bc); padding: 3px; border-radius: 22px; margin: auto; } cclto aa { display: grid ; justify-content: start; align-items: center; height: 42px; border-radius: 5px; font-weight: 400; grid-template-columns: 35px auto 0px; padding: 7px; box-shadow: 0 0 0 1px var(--bc); margin: 11px 0;} cclto h4 { display: flex ; flex-direction: column; font-weight: 400; padding-left: 11px; } cclto span { font-size: 0.77em; } cclto aa i { background: transparent; } cclto h2 { margin: 0; font-size: 18px; } cclto input, cclto select { width: 100%; border-radius: 5px; font-size: 14px; font-weight: 400; margin: 0; padding: 0;height: auto; } cclto .map { margin-top: 15px; width: 402px; height: 300px; /*background: url(/-/Base/asset/Location.png)*/ no-repeat center; background-size: cover; border-radius: 5px; position: relative; } cclto btn { width: 22%; padding: 10px; background: var(--a); border: none; color: var(--b); font-size: 0.88em; border-radius: 5px; cursor: pointer; text-align: center; } cclto btn:hover { background: var(--at); } cclto ft { display: flex ; justify-content: end; align-items: center; border-top: 1px solid var(--bor); } cclto .map i { background: var(--b); width: 50px; border-radius: 5px; position: absolute; right: 2px; top: 3px; } cclto .aa{display: flex ; flex-direction: column; justify-content: center; align-items: flex-start;} cclto .aa span {padding-left: 5px;} cclto .map{width: 360px; height: 300px} .cltn popups { opacity: 1; visibility: visible; } .cltn cclto { display: block ; margin:11px } @media only screen and (max-width: 999px) { cclto bl {width: auto; margin:11px ;padding: 11px;} } .leaflet-container .leaflet-overlay-pane svg, .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, .leaflet-container img.leaflet-image-layer, .leaflet-container .leaflet-tile { max-width: none; max-height: none; width: 430px; height: 360px; } /* Component : Changelog */ ccgo { display: block; background: var(--b-t); border-radius: 11px; margin: 7px; padding: 22px; } ccgo hd { display: flex ; align-items: center; padding: 24px; border: 1px solid var(--bor); border-left: 4px solid var(--aat); background: var(--aat); } ccgo hd span { font-size: 1em; font-weight: bold; } ccgo hd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccgo bd { display: block; margin-top: 22px; } ccgo bd d { display: block; margin: 11px 0; } ccgo bd d h3 { font-size: 1em; font-weight: 500; } ccgo bd d ul { padding-left: 22px; line-height: 28px; } ccgo bd d ul li { font-size: 0.88em; font-weight: 500; } /* Component : Channel */ cleco>bl { display: grid ; grid-template-columns: 44px auto 60px; height: auto; width: auto; justify-content: unset; background: var(--0); gap: 2%; align-items: center; border: solid 1.6px var(--bc); margin: 7px 0; border-radius: 7px; padding: 11px; } cleco hd { background: var(--bc); width: 44px; height: 44px; border-radius: 44px; align-content: center; } cleco hd i { display: flex ; width: 24px; height: 24px; margin: auto; } cleco bd name { font-size: 0.88em; font-weight: 500; } schn bd h7 { display: flex ; font-weight: 400; } cleco bd span { display: inline-grid ; vertical-align: middle; padding-left: 6px; } schn h7 i { height: 16px; width: 16px; } cleco ft { display: block; text-align: center; } cleco ft btn { font-size: 0.88em; font-weight: 500; padding: 7px; } /* Component : ChannelNoVideo */ cnco {display: flex; flex-direction: column; position: relative;} cnco hd i img { width: 48%; } cnco bd { display: grid; } cnco bd t { font-size: 28px; font-weight: 500; } cnco bd p { font-size: 26px; margin: 22px 0; } cnco ft { display: grid; justify-content: center; } cnco ft btn { background: var(--btn); color: var(--b); padding: 11px 38px; border-radius: 44px; font-size: 22px; } chpc {display: block; height: max-content; width: 100%; max-width: 200px; min-width: 188px; max-height: 100%; position: relative; padding: 11px; background: var(--b-t22);} chpc i { height: 100%; width: 100%; } chpc img { height: 100%; width: 100%; border-radius: 16px; } chpc bd h3 {font-weight: 500; font-size: 1rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 7px;} chpc bd {display: grid; padding: 0 4px; height: fit-content; justify-content: space-between; align-items: start;} chpc bd btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } chpc bd btn svg { height:18px; width:18px; } chpc chp {position: absolute; height: 100%; top: -4px; bottom: 0; z-index: -1; background-color: #1c4c7a; width: calc(100% - 16px); left: 8px; right: 8px; border-radius: 12px;} chpc chpp {position: absolute; height: 100%; top: -8px; bottom: 0; z-index: -2; background-color: #f77d6d; opacity: 50%; width: calc(100% - 24px); left: 12px; right: 12px; border-radius: 12px;} chpc hd { position: relative; } chnlpst { position: relative; display: grid; width: auto; height: auto; padding: 11px; border-radius: 11px; text-align: center; margin: auto; max-width: 777px; min-width: 333px; } chnlpst hd { display: grid; height: fit-content; } chnlpst hd i { display: flex; height: 44px; width: 44px; margin: auto; background: var(--bc); padding: 11px; border-radius: 44px; } chnlpst hd i svg { height: 80%; width: 80%; } chnlpst bd { display: grid; margin-top: 16px; } chnlpst bd h3 { font-size: 1.22rem; font-weight: 500; } chnlpst ft p { font-size: 1rem; font-weight: 500; } /* Component : ChannelShorts */ sidebar csrv { min-width: 133px; } csrv {display: block; max-height: fit-content; min-width: 210px; position: relative; margin: 0 2px;} csrv hd { display: grid; } csrv hd i {max-height: 315px; margin: 0; border-radius: 7px; overflow: hidden;} csrv hd img { height: 100%; width: 100%;object-fit: cover; display: grid; } csrv bd h3 {font-weight: 500; font-size: 1rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} csrv btn { display: flex; width: 14px; height: 14px; transform: rotate(90deg); justify-content: center; margin-top: 4px; align-items: start; } csrv btn:hover { background: var(--hover); } csrv bd {display: grid ; align-items: center; justify-content: space-between; padding-top: 7px; height: fit-content; grid-template-columns: auto 22px;} csrv ft d { font-size: 0.77rem; font-weight: 500; color: var(--c0); } /* Component : ChannelSubscribe */ skrb {display: grid; max-width: 222px; width: 100%; min-width: 200px; text-align: center; position: relative; padding: 16px 0; background: var(--bc); border-radius: 11px; box-shadow: var(--bs); justify-content: center; margin: 7px;} skrb ft { display: grid;margin: auto; } skrb bd h3 { margin-top: 7px; } skrb bd p { font-size: 0.88em; font-weight: 400; margin: 5px 0; } skrb hd i { margin: auto; border-radius: 50%; height: 111px; width: 111px; box-shadow: var(--bs-bt); overflow: hidden; } csubskrb { display: grid; grid-auto-flow:column;border-bottom:1px solid var(--bc);margin-top:11px;overflow: scroll; width: 100%; padding-bottom: 7px;gap:11px; } skrb btn {padding: 7px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; position: relative; z-index: 99999; transition: 222ms;} skrb btn:hover { transform: scale(0.95); background: linear-gradient(222deg, var(--a), var(--aa)); } @media only screen and (max-width: 999px){ skrb {max-width: 188px; min-width: 166px; margin: 0 11px;} } /* Component : ChannelVideo */ ccnv { display: block; height: max-content; width: 100%; min-width: 304px; position: relative; padding: 11px; border-radius: 11px; transition: 222ms; } ccnv>bl{display: grid ;} ccnv hd i { height: 100%; width: 100%; } ccnv img { height: 100%; width: 100%; border-radius: 11px; } ccnv bd h3 {font-weight: 500; font-size:14px;overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} ccnv:hover { background: var(--bt); } ccnv ft btn:hover { background: var(--hover); } ccnv bd { display: grid ; grid-template-columns: auto 28px; padding: 0 7px; padding-top: 7px; height: fit-content; justify-content: space-between; align-items: center; } ccnv ft btn {display: flex; height: 22px; width: 22px; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; padding: 4px;} ccnv ft btn svg { height:16px; width:16px; } ccnv bd span:nth-child(2){ margin-left:5px;} ccnv bd btn { margin: auto; transform: rotate(90deg); padding: 7px; border-radius: 22px; transition: 333ms; } ccnv bd btn:hover { background: var(--bc); } ccnv bd i { width: 14px; height: 14px; } ccnv ft { display: block; padding: 0 7px; } ccnv ft span { font-size: 0.88em; font-weight: 500; } ccvt {display: block; height: max-content; width: 100%; min-width: 222px; min-height: 100%; position: relative;} ccvt bl {display: grid; grid-template-columns: 147px auto 30px;} ccvt i { height: 100%; width: 100%; } ccvt img { height: 100%; width: 100%; border-radius: 11px; } ccvt bd h3 {font-weight: 500; font-size:0.88rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} ccvt bd {display: grid; padding: 0 11px; padding-top: 7px; height: fit-content; justify-content: space-between;align-items: start;} ccvt ft btn { display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; cursor: pointer; align-items: center; border-radius: 44px; } ccvt ft btn svg { height:18px; width:18px; } /* Component : Channel_About */ ccab bd { display: block; margin: 7px 0; border-bottom: 1px solid var(--bc); } ccab bd mb { display: grid ; grid-auto-flow: column; justify-content: start; column-gap: 7px; } ccab a { display: block; padding: 7px; } ccab bd a.this { border-bottom: 2px solid; color: var(--a); } /* Component : Channel_Basicinfo */ basc>bl { display: block; padding: 22px; background: var(--b); border-radius: 22px; margin: 7px; } basc hd { display: block; } basc hd h3 { font-size: 1em; font-weight: 500; } basc hd p { font-size: 0.88em; font-weight: 500; margin: 7px 0; } basc hd span { display: inline-grid ; vertical-align: middle; margin-left: 7px; } basc hd p i { width: 16px; height: 16px; } basc hd input { font-size: 0.88em; font-weight: 500; border: 1px solid var(--bc); padding: 11px; height: auto; border-radius: 7px; margin: 11px 0; } basc hd input:first-child { box-shadow: 0px 0px 0px 1.5px var(--c0); } basc hd btn { display: flex ; align-items: center; background: var(--btn); color: var(--b); font-size: 0.88em; font-weight: 500; width: max-content; padding: 7px 11px; border-radius: 22px; column-gap: 7px; } basc hd btn>i { width: 18px; height: 18px; } basc hd btn path { fill: var(--b); } basc bd { display: block; margin: 11px 0; } basc bd h3 { font-size: 1em; font-weight: 500; } basc bd p { font-size: 0.88em; font-weight: 400; margin: 7px 0; } basc bd span { display: inline-grid ; vertical-align: middle; padding-left: 6px; } basc bd i { width: 16px; height: 16px; } basc bd d { display: grid ; padding: 7px; border: 1px solid var(--bc); border-radius: 3px; margin: 11px 0; background: var(--bc); grid-template-columns: auto 33px; align-items: center; font-size: 0.88em; font-weight: 500; margin-bottom: 11px; overflow: hidden; } basc ft { display: block; } basc ft d { display: none ; grid-template-columns: 33px auto 33px; column-gap: 7px; align-items: center; margin-bottom: 11px; } basc ft d i { width: 28px; height: 27px; } basc ft dt { display: grid ; grid-template-columns: 35% 64%; column-gap: 7px; } basc ft b { display: grid ; padding: 7px; box-shadow: 0px 0px 0px 1.5px var(--bor); border-radius: 4px; } basc ft h5 { font-size: 0.88em; font-weight: 500; } basc ft b>input { font-size: 0.88em; font-weight: 500; height: auto; padding: 0; } basc ft d i:last-child { width: 18px; height: 18px; opacity: 0; transition: 333ms; padding: 7px; border-radius: 22px; } basc ft btn { display: flex ; background: var(--btn); width: max-content; color: var(--b); font-size: 0.88em; font-weight: 500; padding: 7px 11px; border-radius: 22px; column-gap: 7px; align-items: center; margin-bottom: 11px; } basc ft btn>i { width: 18px; height: 18px; } basc ft btn path { fill: var(--b); } basc ft h3 { font-size: 1em; font-weight: 500; } basc ft p { font-size: 0.88em; font-weight: 400; margin: 7px 0; } basc ft span { display: grid ; padding: 7px; border: 1px solid var(--bc); border-radius: 7px; margin-top: 11px; width: 44%; } basc ft h4 { font-size: 0.88em; font-weight: 500; } basc ft input { padding: 0; font-size: 0.88em; font-weight: 500; height: auto; } .lnk basc ft d { display: grid ; } basc ft d:hover i:last-child { opacity: 1; } basc ft d i:last-child:hover { background: var(--bc); } @media only screen and (max-width: 999px) { basc>bl { margin-bottom: 22%; } } /* Component : Channel_Branding */ scnb>bl { display: block; background: var(--bt); padding: 22px; border-radius: 22px; margin: 7px; } scnb bd i img { height: 120px; width: 120px; border-radius: 100px; } scnb bl>bd { display: grid; grid-template-columns: 270px auto; } scnb bl>bd i { height: auto; background: var(--bc); margin: 11px; padding: 11px; width: auto;} scnb bd t h4 { padding: 7px 17px; background: var(--bc); font-weight: 500; border-radius: 44px; position: relative; z-index: 99999; width: 37px; align-items: center; justify-content: center; display: grid; margin-top: 7px; } @media only screen and (max-width: 999px) { scnb>bl { margin-bottom: 22%; } scnb bl>bd { display: block; } } /* Component : Channel_Footer */ chnt { display: block; margin: 11px; } chnt hd { display: grid; margin: 11px; } chnt bd { display: grid ; grid-auto-flow: column; grid-template-columns: 40% auto auto; align-items: center; padding: 0 11px; } chnt bd>i { height: 122px; width: 122px; margin: auto; border-radius: 88px; overflow: hidden; } chnt bd d { font-weight: 500; margin: 0px; margin-bottom: 7px; } chnt bd btn { padding: 10px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; } /* Component : Channel_Orders */ schn.fld aa.fe, .all aa.al, .scs aa.su, .pnd aa.pe { border-bottom: solid; } schn.all all.al { display: block; } schn.scs succes.su { display: block; } schn.pnd pending.pe { display: block; } schn.fld Failed.fe { display: block; } schn hd h2 { padding: 0; } schn gp d { display: block; padding-top: 11px; } schn gp { margin: 0; } schn>bl { display: block; background: var(--bt); padding: 22px; border-radius: 22px; margin: 7px; } schn gp h6 { color: var(--c0); } schln mg a { display: flex; justify-content: center; align-items: center; position: relative; font-weight: 400; height: 50px; } schln mg hd { display: grid; gap: 11px; grid-template-columns: 77px 77px 77px; } schln mg { display: grid ; align-items: center; justify-content: space-between; padding-top: 22px; grid-template-columns: auto auto; } schln mg btns { display: grid ; gap: 11px; grid-template-columns: 124px 81px 80px; } schln mg btns btn { display: grid ; padding: 7px 14px; background: var(--bc); border-radius: 22px; align-items: center; color: var(--c0); font-weight: 500; } schn trc { display: grid; grid-template-columns: unset; align-items: center; border-radius: 7px; padding: 11px; max-width: 100%; position: relative; margin: 7px 0; width: auto; border: solid 1.6px var(--bc); } schn trc bl { display: grid; grid-template-columns: 44px auto 60px; height: auto; width: auto; justify-content: unset; background: var(--0); gap: 2%; align-items : center;} all trc hd>i { background: var(--bc); width: 45px; height: 45px; border-radius: 44px; } schn all trc>bd { display: flex; gap: 11px; justify-content: unset; } schn trc hd i svg { height: 25px; width: 25px; } schn h7 i { height: 16px; width: 16px; } schln .aerea { justify-content: start; padding-top:22px;} schn stn { display: grid ; align-items: center; padding: 11px; grid-template-columns: auto 130px; gap: 7px; } schn stn btn i svg { fill: var(--b); } schn stn bd btn { display: grid; grid-template-columns: 34px auto; margin: 0; padding: 3px 0px; } schn asn { display: none; } schn bd>i { height: 36px; width: 24px; } schn scn { display: grid; border-radius: 7px; padding: 11px; margin: 7px 0; border: solid 1.6px var(--bc); } schn scn hd { display: grid; grid-template-columns: 44px auto; justify-content: unset; background: var(--0); gap: 2%; align-items: center; } schln { display: grid; background: var(--b); } schln h>d { padding: 22px 22px 0px 22px; border-bottom: solid 1px var(--bor); } scn hd bd h7 { display: flex ; } schn bd d { display: grid ; grid-template-columns: auto 14%; align-items: center; margin: 11px 0; } schn bd h7 { display: flex ; font-size: 0.88em; font-weight: 400; column-gap: 7px; } schn bd d>btn { display: flex ; justify-content: center; column-gap: 7px; } schn bd btn i { width: 24px; height: 24px; } schn bd t { font-size: 0.88em; font-weight: 500; } @media only screen and (max-width: 999px) { schn>bl { margin-bottom: 24%; } } /* Component : Channel_Profile1 */ ccal>bl { display: block; margin: 11px; } ccal hd { display: block; } ccal hd i { width: 100%; height: 100%; border-radius: 11px; overflow: hidden; } ccal>bl>bd { display: grid ; grid-template-columns: 18% auto; align-items: center; margin: 11px 0; } ccal bd>i { width: 144px; height: 144px; border-radius: 55%; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 4%), 0 6px 20px rgb(0 0 0 / 20%); padding: 7px; margin: auto; } ccal bd d { display: block; } ccal bd name { display: flex ; align-items: center; column-gap: 7px; } ccal bd h2 { font-size: 1.88em; font-weight: bold; } ccal bd name>i { width: 24px; height: 24px; } ccal bd h5 { display: grid ; opacity: 0.77; font-weight: bold; margin: 7px 0; } ccal bd b { font-size: 0.88em; font-weight: 500; } ccal bd b>a { color: var(--a); } ccal bd sp { margin-left: 4px; font-weight: bold; } /* Component : Channel_Sections */ scno>bl { display: grid ; grid-template-columns: 33px auto; align-items: center; column-gap: 11px; border-radius: 7px; padding: 11px; margin: 7px 0; border: solid 1.6px var(--bc); } scno hd { display: grid; grid-template-columns: 44px auto; justify-content: unset; background: var(--0); gap: 2%; align-items: center; } scno bd name { font-size: 0.88em; font-weight: 500; } /* Component : Channel_Short */ ccht {display: block; max-width: 131px; min-height: 100%; height: 100%; min-width: 131px; position: relative; max-height: 100%; margin: 0 7px;} ccht hd i {height: 100%; position: relative; min-height: 210px;} ccht hd img { height: 100%; width: 100%; border-radius:7px; object-fit: cover; display: grid; } ccht bd {display: grid; align-items: center; justify-content: space-between; padding: 7px;padding-bottom: 0;height: fit-content; grid-template-columns: auto 28px;position: relative;} ccht bd h3 {font-weight: 500; font-size: 1rem; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} ccht bd btn { display: flex ; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; align-items: start; padding: 7px; border-radius: 22px; transition: 333ms; } ccht bd btn:hover { background: var(--bc); } ccht bd i { width: 14px; height: 14px; } ccht ft span { font-size: 0.88em; font-weight: 500; } .ccspp bd d {display: block;} ccht bd d {display: none; position: absolute; background: var(--b); border-radius: 12px;right: 43px; z-index: 999999; box-shadow: 0 0 3px var(--bor);width: 100%; min-width: 170px;top: -172px;} ccht bd f {display: flex ; gap: 6px; align-items: center; padding: 8px 12px;} ccht bd f:hover { background: var(--bc-t); } ccht d i { width: 28px; height: 24px; } /* Component : Channel_Short */ shos>bl { display: block; } shos hd { display: flex ; align-items: center; column-gap: 7px; margin-bottom: 11px; } shos>bl>hd>i { width: 24px; height: 24px; } shos>bl>bd { display: flex ; overflow: hidden; overflow-x: scroll; padding-bottom: 11px; border-bottom: 1px solid var(--bc); position: relative; } /* Component : Channels_Today */ chdo>bl { display: block; } chdo>bl>hd { display: flex ; justify-content: space-between; align-items: center; margin-bottom: 11px; } chdo hd h4 { font-size: 1.33em; font-weight: bold; } chdo >bl>hd>i { width: 24px; height: 24px; } chdo >bl>hd path { fill: var(--a); } chdo >bl>bd { display: grid ; grid-auto-flow: column; align-items: center; column-gap: 11px; overflow-x: scroll; } /* Component : Channels_Today */ ccna>bl { display: block; padding: 22px; padding-bottom: 0; border-bottom: 1px solid var(--bc); } ccna hd { display: block; margin-bottom: 11px; } ccna hd h2 { font-size: 1.44em; font-weight: bold; } ccna bd { display: flex ; justify-content: space-between; } ccna bd mg { display: flex ; column-gap: 7px; } ccna bd a { display: block; padding: 11px; font-size: 0.88em; font-weight: 500; } ccna bd a.this { border-bottom: 2px solid; color: var(--a); } ccna bd btns { display: flex ; align-items: center; column-gap: 7px; } ccna bd btn { font-size: 0.88em; font-weight: 500; padding: 7px 14px; background: var(--bc); border-radius: 22px; } @media only screen and (max-width: 999px) { ccna bd { display: grid ; row-gap: 11px; } } ctbs btns { display: flex ; align-items: center; } ctbs bl { padding: 22px; padding-bottom: 0; } @media only screen and (min-width: 999px) { ctbs btns btn { font-size: 0.875rem; padding: 0.25rem 1rem; border-radius: 9999px; margin-right: 0.5rem; margin-bottom: 1rem; } ctbs btns btn:first-child { background: var(--a); color: var(--b); font-weight: 600; } ctbs btns btn:not(:first-child) { border: 1px solid var(--bc-t);} } @media only screen and (max-width: 999px) { ctbs btns btn {display: block; text-align: center; padding: 11px 16px; padding-top: 0; font-size: 16px; font-weight: 500; position: relative; width: max-content; white-space: nowrap;} ctbs btns btn:first-child { color: var(--a);} ctbs btns btn:first-child:after {content: ''; position: absolute; bottom: -3px; left: 22%; height: 6px; border-radius: 11px; width: 55%; margin: auto; background: var(--a);} } /* Component : Conversations */ cnvs>bl { display: grid ; grid-template-rows: 66px auto max-content; height: 100%; } cnvs>bl hd>div { display: grid; grid-template-columns: 55px auto auto; align-items: center; padding: 11px; box-shadow: 0 1px 7px var(--bc); } cnvs>bl hd>div>hd { display: block; height: 44px; width: 44px; overflow: hidden; border-radius: 55%; } cnvs>bl hd>div>hd>i { height: 100%; } cnvs>bl hd>div>hd>i>img { object-fit: cover; height: 100%; width: 100%; } cnvs>bl hd>div>ft { display: flex; justify-content: end; } cnvs>bl hd>div btn { height: 33px; width: 33px; display: flex; align-items: center; justify-content: center; margin: 4px; border-radius: 55%; padding: 1px; } cnvs>bl hd>div btn:hover { background: var(--hover); } cnvs>bl hd>div>ft>btns { display: flex; } cnvs>bl cnvrsstion>p { text-align: center; margin: 0; } cnvs>bl cico { display: flex; padding: 22px; margin: 11px; justify-content: end; flex-direction: column; align-items: center; margin-bottom: 0; } cnvs>bl cnvrsstion { display: block; height:auto; } @media screen and (min-width: 999px) { cnvs>bl bd { display: block; overflow-y: scroll; transition: 333ms; margin-right: 6px;} cnvs>bl>bd { display: block; overflow: hidden; overflow-y: scroll; scrollbar-width: thin;max-height: 73vh; } } @media screen and (max-width: 999px) { chat>bl { margin: 0; } chat>bl bd { display: block; overflow-y: scroll; transition: 333ms; margin-right: 6px;} } ccis bl { margin:11px 0px;} ccis hd { display: block; padding: 12px 16px; border-bottom: 1px solid var(--bc); position: relative; } ccis hd img { width: 32px; height: 32px; border-radius: 50%; vertical-align: middle; } ccis hd i { background: none; border: none; font-size: 18px; cursor: pointer;height: auto; width: auto; } ccis bd { display: block; height: calc(100vh - 180px); overflow-y: auto; padding: 16px; } ccis profile { display: block; text-align: center; padding: 16px 0; } ccis profile img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 8px; } ccis btns { display: flex; justify-content: center; gap: 24px; margin-top: 16px; } ccis btn { display: flex; flex-direction: column; align-items: center; font-size: 12px; } ccis btn icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--bc); border-radius: 50%; margin-bottom: 4px; } ccis status { display: block; font-size: 12px; margin: 16px 0; text-align: center; } ccis status a { color: var(--a); text-decoration: none; } ccis message { display: block; margin-top: 8px; } ccis message bubble { display: inline-block; padding: 8px 12px; background: var(--aaa); color: var(--b); border-radius: 18px; max-width: 80%; float: right; } ccis message status { display: block; text-align: right; font-size: 11px; margin-top: 4px; clear: both; } ccis bl ft { display: block; border-top: 1px solid var(--bc); padding: 0; padding-top: 11px; } ccis ft d { display: flex ; } ccis hd d { display: grid ; grid-template-columns: 44px auto 25px; align-items: center; } ccis hd span { margin: 0; font-weight: 500; vertical-align: middle; font-size: 0.88em; width: 88%; } ccis svg { height: 20px; } ccis { display: none; } .nch ccis { display: block; } /* Component : Chat_List */ cclo>bl { display: block; background: var(--b); padding: 20px; border-radius: 10px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); width: 888px; margin:11px auto;} ccli bl:last-child { border-bottom: none; } ccli bl:hover { background: var(--bc); } ccli img { width: 60px; height: 60px; border-radius: 9px; vertical-align: middle; object-fit: cover; } cclo hd { font-size: 18px; font-weight: 500; display: block; margin-bottom: 10px; } ccli bl { display: grid ; padding: 10px; border-bottom: 1px solid var(--bor); position: relative; width: auto; grid-template-columns: 88px auto 77px; border-radius: 11px; } cclo ft { font-size: 12px; text-align: right; display: block; margin-top: 5px; } cclo .dot { width: 8px; height: 8px; background: var(--a); border-radius: 50%; display: inline-block; margin-right: 5px; } cclo p { margin: 3px 0; } ccli ft { align-items: center; display: flex ; justify-content: end; } Inbox cndo { display: none; } Inbox cclo { display: none; } .buyy bctf hd { margin: 0; border: none; } .buyy bctf bl { padding-bottom: 0; } Inbox.buyy bctf bd { display: none; } Inbox.buyy bctf ft { display: none; } Inbox.sell cndo { display: block; } Inbox.buyy cclo { display: block; } Inbox .aerea { flex-direction: row; } @media only screen and (max-width: 999px) { cclo>bl { width: auto; margin: 11px; } } ccms>bd>time { text-align: center; display: block; font-size: 0.77em; padding: 11px; margin: 11px; margin-top: 0; } ccms seen {margin: 0 5px; display: flex ; font-size: 0.77em; justify-content: end; margin-bottom: 11px; margin-right: 11px; } ccms ciso { display: grid; grid-template-columns: auto auto 0; align-items: center; padding: 0 5px; margin-bottom: 2px; justify-content: end; } ccms ciso:hover hd>btns { height: 100%; opacity: 0.7; z-index: 99; } ccms inputchats ciso:last-child sms { border-radius: 22px 5px 22px 22px; } ccms coso bl{ display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 0 5px; margin-bottom: 2px; justify-content: start; } ccms coso sms { display: block; background: var(--bc); font-weight: 500; padding: 6px 11px; font-size: 0.88em; width: fit-content; border-radius: 5px 22px 22px 5px; } ccms coso>ft>btns { align-items: center; display: flex; transition: 99ms; position: relative; z-index: -1; height: 0; opacity: 0; } ccms coso>ft>btns>btn { display: flex; height: 30px; width: 30px; justify-content: center; align-items: center; margin: 0 5px; border-radius: 55%; } ccms coso>ft>btns>btn:hover { background: var(--hover); } ccms coso:hover coso>ft>btns { height: 100%; opacity: 0.7; z-index: 99; } ccms coso:hover btns { height: 100%; z-index: 99; opacity: 0.7; } ccms coso:first-child sms { border-radius: 22px 22px 22px 5px; } ccms coso>hd>i { height: 100%; display: none; } ccms coso:last-child>hd>i { display: block; } ccms coso:last-child sms { border-radius: 5px 22px 22px 22px; } ccms ciso sms t { word-break: break-all; } /* js Css */ ccms react {display: flex; background: #ffffff; position: relative; z-index: 99999999999999999; box-shadow: 0px 0px 7px #929292; border-radius: 18px; padding: 2px; width: fit-content; } cafm {display: grid ; align-items: center; padding: 7px; border-radius: 7px; cursor: pointer; position: relative; overflow: hidden;} cafm bl{display: grid ; align-items: center; gap: 12px; grid-template-columns: 49px auto auto;} cafm:hover { background: #f0f2f5 } cafm[active=true] { background: #f0f2f5 } cafm hd {display: grid ; width: 46px; height: 46px; overflow: hidden; border-radius: 50%; border: 1px solid var(--bor); padding: 0;pointer-events: none;} cafm hd i { height: 100%; } cafm bd h3 { font-size: 14px; font-weight: 500 } cafm bd p { font-size: 12px; color: #65676b;margin:0; } cafm btn {background: transparent; cursor: pointer; padding: 0;} cafm btn:hover { color: #1c1e21 } cafm btn svg { width: 18px; height: 18px } /*cafm.this { padding-left: 16px; background: var(--bc); } cafm.this:before { content: ''; position: absolute; inset: 0; background: var(--aaa); width: 8px; height: 70%; border-radius: 22px; margin: auto 0; } cafm.this:after { content: ''; position: absolute; inset: 0; background: var(--a); width: 16%; filter: blur(28px); height: 70%; left: unset; border-radius: 22px; margin: auto 0; }*/ /* Component : ChooseGIF */ cgeo { display: none ; background: var(--b); width: 388px; height: 555px; border-radius: 11px; margin: 22px; backdrop-filter: blur(22px); box-shadow: var(--bs-bt); overflow: hidden; margin: auto; } cgeo hd { display: grid ; grid-template-columns: 33px auto; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } cgeo hd i { width: 18px; height: 18px; background: var(--bc); padding: 7px; border-radius: 22px; } cgeo hd h3 { font-size: 1.22em; font-weight: bold; text-align: center; } cgeo bd { display: block; padding: 11px; } cgeo bd t { display: flex ; align-items: center; background: var(--bc); padding: 0 11px; border-radius: 22px; } cgeo bd t i { width: 24px; height: 24px; } cgeo bd t input { background: transparent; padding: 0 11px; } cgeo ft { display: block; overflow-y: scroll; max-height: 435px; } cgeo ft mg { display: grid ; } cgeo ft mg i { width: 100%; height: 100%; } .GIF cgeo { display: block; } /* Component : ChooseProfile_Picture */ cpuo { display: grid ; background: var(--b); border-radius: 11px; overflow: hidden; position: absolute; max-width: 666px; inset: 0; margin: auto; height: fit-content; transition: var(--tr-a); opacity: 0; transform: scale(.95); visibility: hidden; } .Profile_DP cpuo { opacity: 1; transform: scale(1); visibility: visible; } cpuo>bl>hd { display: grid ; grid-template-columns: auto 33px; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); text-align: center; position: relative; } cpuo hd h3 { font-size: 1.22em; font-weight: bold; text-align: center; } cpuo hd exit { display: block; margin: auto; } cpuo hd i { width: 24px; height: 24px; background: var(--bc); padding: 5px; border-radius: 22px; } cpuo bd { display: block; padding: 11px; } cpuo bd btns { display: grid ; grid-template-columns: auto auto 55px; align-items: center; column-gap: 11px; } cpuo bd btns btn { display: flex ; justify-content: center; padding: 9px 11px; background: var(--bc); border-radius: 7px; column-gap: 5px; align-items: center; position: relative; overflow: hidden; } cpuo bd btns btn>input { position: absolute; inset: 0; z-index: 99; width: auto; opacity: 0; } cpuo bd btns i { width: 18px; height: 18px; } cpuo bd btns t { font-size: 14px; font-weight: 500; } cpuo ft { display: block; padding: 22px; overflow-y: scroll; scrollbar-width: thin; max-height: 484px; padding-bottom: 0; } cpuo ft d { display: block; padding: 11px 0; } cpuo ft d h3 { font-size: 1em; font-weight: 500; margin-bottom: 11px; } cpuo ft d mg { display: flex ; align-items: center; justify-content: start; border-radius: 11px; overflow: hidden; flex-wrap: wrap; } cpuo ft d mg i { width: 104px; height: 104px; margin: 0 7px 7px 0; } cpuo ft d mg i:first-child { border-radius: 11px 0 0 11px; overflow: hidden; } cpuo ft d mg i:nth-child(6) { border-radius: 0 11px 11px 0; overflow: hidden; } cpuo ft d mg i:last-child { border-radius: 0 11px 11px 0; overflow: hidden; } @media (max-width : 999px) { cpuo { margin: auto 7px; } } /* Component : Close_Friends */ cfco { display: block; width: 548px; height: auto; background: var(--b); border-radius: 11px; opacity: 0; visibility: hidden; } cfco hd { display: grid ; grid-template-columns: auto 44px; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } cfco hd h3 { font-size: 1.22em; font-weight: bold; text-align: center; } cfco hd ext { position: relative; margin: 0; } cfco hd i { width: 34px; height: 28px; } cfco bd { display: grid ; padding: 11px; padding-bottom: 0; } cfco bd sl { display: flex ; padding: 0 11px; height: 44px; border-radius: 22px; } cfco bd sl i { width: 24px; height: 24px; } cfco bd input { padding: 0 7px; font-size: 0.88em; font-weight: 500; } cfco bd input:focus { box-shadow: unset; } cfco bd d { display: grid ; overflow-y: scroll; height: 90%; scrollbar-width: thin; margin-top: 11px; } cfco bd div { display: grid ; grid-template-columns: 44px auto 24px; align-items: center; padding: 7px; border-radius: 7px; transition: 333ms; } cfco bd div:hover { background: var(--bc); } cfco bd d i { width: 36px; height: 36px; border-radius: 44px; overflow: hidden; } cfco bd d i:last-child { width: 24px; height: 24px; } cfco bd div:hover path { fill: var(--a); } cfco bd h4 { font-size: 0.88em; font-weight: 500; } cfco ft { display: grid; padding: 11px; padding-top: 0; row-gap: 11px; } cfco ft sp { display: none ; row-gap: 11px; padding: 7px; border: 2px solid var(--bc); border-radius: 7px; overflow-y: scroll; max-height: 70px; scrollbar-width: thin; } cfco ft sp span { font-size: 1em; font-weight: 500; } cfco ft sp btns { display: grid ; grid-template-columns: auto auto; justify-content: start; gap: 11px; } cfco ft btc { display: flex ; align-items: center; padding: 7px; border-radius: 7px; background: #ebf5ff; column-gap: 7px; } cfco ft btc i { width: 20px; height: 20px; border-radius: 22px; overflow: hidden; } cfco ft btc t { font-size: 0.88em; font-weight: 500; color: var(--a); } cfco ft btc path { fill: var(--a); } cfco ft btns { display: flex ; justify-content: space-between; } cfco ft btn { font-size: 0.88em; font-weight: 500; border-radius: 7px; transition: 333ms; } cfco ft btn:first-child { padding: 7px 11px; color: var(--a); } cfco ft btn:first-child:hover { background: var(--bc); } cfco ft btn:last-child { padding: 7px 28px; background: var(--a); color: var(--b); }cfco ft btn:last-child { padding: 7px 28px; background: var(--a); color: var(--b); } .addfird cfco { opacity: 1; visibility: visible; } cfco .this i:last-child { background: var(--a); } cfco .this i:last-child path { fill: var(--b); } coee { display: block; max-width: 548px; overflow: scroll; padding: 20px 0px;border-radius: 11px; height: 37vh; } coee hd input { border-radius: 0; height: 22px; padding: 0; margin: 0; font-weight: 400; background: unset;font-size: 17px; } coee blc { display: flex ; justify-content: space-between; border-radius: 30px; padding: 6px; align-items: center; } coee blc>i { height: 25px; width: 25px; background: unset; } coee bl bd { border: solid 1px var(--bor); padding: 15px; border-radius: 10px; } coee bd img { object-fit: scale-down; } coee bd dv:nth-child(1) { flex-direction: unset; } coee bd dv {display: flex;flex-direction: column;gap: 4px;} coee bd dv span { font-size: 13px; color: var(--c0); } coee bd dv b { font-size: 15px; } coee bd dv p { display: flex ; align-items: center; font-size: 13px; color: var(--c0); margin: 0; } coee bd dv:nth-child(1) i { height: 33px; width: 33px; border-radius: 26px; padding: 2px 2px; } coee bd dv d { flex-direction: column; gap: 0; } coee bd dv p svg { height: 12px; width: 12px; margin: 0; } coee bd div dv:nth-child(1) { flex-direction: column; } coee bd div { display: flex ; justify-content: space-between; background: var(--bc-t); padding: 14px 20px; border-radius: 10px; } coee bd btn { display: flex ; align-items: center; padding: 10px 10px; border-radius: 6px; background-color: var(--bc); font-size: 13px; font-weight: 600; gap: 6px; height: 20px; color: var(--a); margin-top: 6%; }/* Collapsible_Panel */ ccppo hd { display: block; font-size: 18px; font-weight: bold; padding: 15px 0; border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; } ccppo bd { display: block; background: white; border-radius: 8px; padding: 15px; margin-bottom: 20px; } ccppo ft { display: block; text-align: center; padding: 15px; color: #666; font-size: 14px; border-top: 1px solid #e0e0e0; margin-top: 20px; } /* Rule elements */ ccppo rl { display: block; margin-bottom: 15px; padding-bottom: 15px; } ccppo h3 { display: inline-block; width: 25px; font-weight: bold; } ccppo t { font-weight: bold; margin-bottom: 5px; } ccppo p { display: none; color: #666; font-size: 14px; margin-left: 25px; margin-top: 5px; } ccppo i { width: auto; height: auto; } ccppo svg { width: 20px; height: 20px; } ccppo btn { display: grid ; grid-template-columns: 24px auto 23px; } ccppo { display: flex ; width: 100%; background: var(--b); border-radius: 15px; } ccppo bl { display: grid ; width: 100%; padding: 2px 20px; } .csba ccppo p{display: flex;} clno bd flex { display: flex ; gap: 10px; align-items: center; } cwac {display: grid ; grid-template-columns: 55px auto; background: var(--b); padding: 11px; border-radius: 11px; margin: 7px 11px;} cwac hd {display: flex ; gap: 7px; padding: 0; height: 44px; width: 44px;} cwac hd img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--a); } cwac bd { display: flex ; align-items: center; } cwac bd input { background: var(--0); font-size: 14px; padding: 5px; height: 22px; font-weight: 500; } cwac ccf i {background-image: url('/-/ID/asset/icons.png');background-position: 1px -201px; background-size: auto; width: 22px; height: 16px; background-repeat: no-repeat; display: grid ; margin: 0 2px;} cwac ft btn { display: grid ; height: 22px; opacity: 0.44; } cwac ccf { display: grid ; background: var(--bc); padding: 7px; border-radius: 22px; } cwac ft { display: none; justify-content: space-between; align-items: center; margin-top: 8px; } cwac cim { display: flex ; } cwac cim i:nth-child(1) { background-position: 1px -201px; } cwac cim i:nth-child(2) { background-position: 1px -286px; } cwac cim i:nth-child(3) { background-position: 1px -252px; } cwac cim i:nth-child(4) { background-position: 1px -303px; } cwac cim i:nth-child(5) { background-position: 1px -388px; } ccnt { width: 100%; max-width: 500px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 15px; } ccnt bl { display: flex; flex-direction: column; gap: 15px; } ccnt hd { display: flex; justify-content: space-between; align-items: center; } ccnt hd div { display: flex; align-items: center; gap: 10px; } ccnt hd div div { display: flex; flex-direction: column; } ccnt hd img { width: 40px; height: 40px; border-radius: 50%; } ccnt hd span:first-child { font-weight: bold; } ccnt hd button { background: none; border: none; cursor: pointer; } ccnt bd { display: flex; flex-direction: column; gap: 10px; } ccnt bd p { font-size: 14px; color: #333; } ccnt bd a { color: #1877f2; text-decoration: none; font-weight: bold; } ccnt bd a:hover { text-decoration: underline; } ccnt ft { display: flex; align-items: center; gap: 15px; } ccnt ft button { display: flex; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; font-size: 14px; color: #555; } ccnt ft button:hover { color: #1877f2; } ccms { display: block; background: var(--b); margin: 11px; border-radius: 11px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; } ccms> bl { display: block; margin: 11px; border-radius: 11px; overflow: hidden; } ccms> hd { display: block; padding: 11px; border-bottom: 1px solid var(--bc); } ccms hd h2 { font-size: 20px; font-weight: 600; margin-bottom: 16px; } ccms sl { display: flex ; align-items: center; background-color: var(--bc); border-radius: 6px; padding: 8px 12px; margin-bottom: 16px; height: 44px; } ccms input { border: none; background: transparent; outline: none; font-size: 14px; width: 100%; padding: 0px; } ccms btns { display: flex; gap: 8px; opacity: 0; transition: 0.3s;} ccms coso bl:hover ccms btns { opacity: 1; } ccms> btn { display: flex ; align-items: center; gap: 6px; background: var(--bc); border: none; border-radius: 6px; padding: 8px 12px; font-size: 14px; cursor: pointer; } ccms btn.this { color: var(--a); } ccms i { width: 18px; height: 18px; display: flex ; align-items: center; justify-content: center; } ccms hd i { width: 39px; height: 39px; border-radius: 55%; overflow: hidden; } ccms btns svg { height: 18px; } ccms>bl>bd { display: block; padding: 20px;} ccms sl input:focus { box-shadow: unset; border-radius: 11px; } bcrt hd div { display: flex ; align-items: center; justify-content: space-between; font-weight: bold; font-size: 16px; } bcrt hd { display: block; padding: 0px 8px 6px; border-bottom: 1px solid var(--bor); } bcrt hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } bcrt bd { display: block; padding: 16px; } bcrt bd strong { font-size: 18px; margin-bottom: 5px; display: block; } bcrt bd span { font-size: 15px; margin-bottom: 12px; display: block; } bcrt bd a { color: var(--a); text-decoration: none; display: inline-block; margin-bottom: 16px; font-size: 16px; } bcrt bd btn { background: var(--a); padding: 10px; font-weight: bold; border-radius: 6px; font-size: 14px; justify-content: center; display: flex ; color: var(--b); } bcrt>bl { display: block; max-width: 500px; padding: 20px 0px; border: solid 1px var(--aa-t); position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } bcrt { display: none; } seso.CR bcrt { display: block; } ccfr h1 { font-size: 24px; } ccfr hd { display: flex ; justify-content: space-between; } ccfr .filter-box { display: flex ; align-items: center; gap: 10px;padding: 11px 0; } ccfr select { background: var(--bc); border: none; padding: 10px; border-radius: 5px; width: calc(100% - 58px); max-width: 133px;margin: 0; } ccfr .reset-btn { background: var(--aa); color: var(--b); border: none; padding: 10px 15px; border-radius: 5px; cursor: not-allowed;width: fit-content; } ccfr .filter-btn { color: var(--b); border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; background: var(--aa); } ccfr { display: block; padding: 22px; background: var(--b); margin: 11px; border-radius: 11px; transition: 333ms; overflow: hidden; } ccfr bd { display: block; gap: 22px; padding: 22px 0; height: 0; transition: 333ms; padding: 0; overflow: hidden; opacity: 0; visibility: hidden; } ccfr.ftr bd { transition: 333ms; padding: 22px 0; height: 77%; visibility: visible; opacity: 1;padding-bottom: 0; } /* Component : Company */ compo { font-size: 0.77em; display: block; padding: 22px;z-index: 2;position: relative;} compo .links a { border-right: 1px solid #d2d2d7; margin-right: 7px; padding-right: 10px; display: inline-block; margin-top: 5px; white-space: nowrap;cursor:pointer; color: #515154; text-decoration: none;transition:333ms; } compo a:hover{color: #fff !important;} compo div { margin-bottom: 7px;padding-bottom: 8px;border-bottom: 1px solid #515154; } compo div { margin-bottom: 7px;padding-bottom: 8px;border-bottom: 1px solid #515154; } compo div a { color: #06c; cursor:pointer; transition:333ms; } compo div { float: right; margin-top: 5px; position: relative; top: -3px; z-index: 2; white-space: nowrap; } compo div { margin-right: 30px; float: left; margin-top: 5px; } ccao .card img { width: 100%; border-radius: 10px; } ccao .card-content { padding: 10px 0; } ccao .title { font-size: 1.1em; font-weight: 500; } ccao .rating { display: flex ; align-items: center; gap: 5px; margin: 5px 0; font-size: 0.77em; } cao .free-badge { background: var(--aa); padding: 3px 12px; border-radius: 5px; font-size: 0.8em; float: right; color: var(--b-t); } ccao .category { font-size: 0.9em; color: #bbb; } ccao .description { margin-top: 10px; font-size: 0.85em; } ccao bl { display: grid ; grid-template-columns: 62px auto auto; gap: 2%;align-items: self-start; } ccao .card { width: 350px; background: var(--b); border-radius: 11px; overflow: hidden; padding: 15px; margin: 11px 0; } ccao bl i { height: 100%; } ccao hd img {height: 77px; width: 56px !important; border-radius: 6px !important; object-fit: cover;} ccao span.free-badge { background: var(--aa); color: var(--b); border: none; padding: 7px 15px; border-radius: 5px; cursor: not-allowed; width: initial; justify-content: center; display: flex ; font-size: 0.77em;} ccas { display: flex ; gap: 1%;overflow-x: scroll; } scpo sidebar { display: none; } scpo main { width: 100%; } ccao .card:hover { transform: scale(1.05); transition: background-color 1s ease-in-out, transform 1s ease-in-out, opacity 1s ease-in-out 0.3s, transform 1s ease-in-out 0.3s; } .hover-block { position: relative;overflow: hidden; } .preview-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; } .play-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 20px; font-size: 16px; font-weight: bold; border-radius: 5px; opacity: 0; transition: opacity 0.3s ease; } .hover-block:hover .preview-video { opacity: 1; } .hover-block:hover .play-text { opacity: 1; } ccao:hover .preview-video { opacity: 1; z-index: 1; transform: scale(1.1); } ccao:hover img.thumbnail { z-index: 0; } ccao:hover .hover-block { overflow: auto; } @media screen and (max-width: 480px) { ccao .card { width: auto; margin: 11px; } ccas { display: block; } } ccfn>bl { display: block; max-width: 500px; padding: 20px 0px; border: solid 1px var(--aa-t); position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } ccfn hd i { height: 27px; width: 27px;margin: auto;} ccfn hd div { text-align: center; display: flex ; flex-direction: column; gap: 8px; } ccfn hd btns { display: flex ; justify-content: center;gap: 8px;} ccfn hd btn { display: flex ; justify-content: center; font-size: 16px; background: var(--a-t); border-radius: 7px; padding: 1px 11px; align-items: anchor-center; color: var(--aaa); } ccfn bd { display: flex; padding: 9px;gap: 20px; } ccfn bd dot { background: var(--aa); display: block; width: 6px; height: 6px; border-radius: 20px;z-index: 999; } ccfn bd dv { display: flex ; flex-direction: column; gap: 5rem; } ccfn bd dv::before { content: " "; position: absolute; width: 2px; height: 41%; background: var(--bor); left: 11px; } ccfn ft { display: flex ; justify-content: center; padding: 16px;border-top: solid 1px var(--bor); } ccfn ft btn { display: flex ; width: 100%; justify-content: center; padding: 9px; background: var(--a); border-radius: 9px; font-weight: 500; color: var(--b); font-size: 17px; } ccfn div d { display: flex ; flex-direction: column;margin-bottom: 5px; } ccfn bd b { font-weight: 600; font-size: 17px; } ccfn bd span { font-size: 15px; } ccfn hd h2 { font-size: 19px; } ccfn { display: none; } seso.CN ccfn { display: block; }ccho .container { display: flex ; justify-content: space-between; max-width: 1200px; margin: 50px auto; padding: 20px; align-items: baseline; background: var(--b); border-radius: 22px; padding: 22px; } ccho .left { flex: 1; font-size: 46px; font-weight: 700; } ccho .right { flex: 1;} ccho .right h3 { font-size: 1.5rem; font-weight: 700; } ccho .right p { font-size: 1rem; } @media (max-width: 768px) { ccho .container { flex-direction: column; text-align: center;margin: 11px; } ccho .left { font-size: 24px; text-align: left;} ccho .right h3 { font-size: 1rem; text-align: left; margin-top: 11px; } ccho .right p { font-size: 0.88em; text-align: left; } } /* Component : Connect_WhatsApp */ cwwo { display: none ; width: 411px; height: auto; backdrop-filter: blur(22px); box-shadow: var(--bs-bt); background: var(--b); border-radius: 11px; margin: auto; } cwwo hd { display: grid ; grid-template-columns: 33px auto; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } cwwo hd i { width: 18px; height: 18px; background: var(--bc); padding: 7px; border-radius: 44px; } cwwo hd h3 { font-size: 1.22em; font-weight: bold; text-align: center; } cwwo bd { display: block; padding: 11px; } cwwo bd d { display: grid ; grid-template-columns: max-content auto; column-gap: 11px; align-items: center; } cwwo bd sl { background: transparent; border: 2px solid var(--bc); } cwwo bd select { background: var(--bc); width: auto; height: 50px; padding: 7px; } cwwo bd sl:focus-visible { outline: unset; } cwwo ft { display: block; padding: 11px; } cwwo ft btn { display: flex ; justify-content: center; width: 100%; background: var(--bc); padding: 11px 0; border-radius: 7px; } cwwo ft btn t { font-size: 0.88em; font-weight: 500; } .cow cwwo { display: block; } cein { display: grid ; background: var(--b); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px var(--bor); min-width: 175px; max-width: 175px; margin: 0 5px; } cein hd { position: relative; }  cein hd img { width: 100%; height: 100%; object-fit: cover; } cein button { position: absolute; top: 5px; right: 5px; background: rgba(0, 0, 0, 0.6); border: none; width: 25px; height: 25px; border-radius: 50%; font-size: 14px; text-align: center; cursor: pointer; padding: 0px; } cein bd { padding: 5px 12px; } cein bd h4 { font-size: 18px; } cein bd p { font-size: 14px; color: var(--bor); margin: 4px 0; } cein ft { padding: 10px; border-top: 1px solid var(--bor) } cein ft btn { display: flex ; align-items: center; justify-content: center; gap: 10px; background: var(--aat); color: var(--a); padding: 8px 10px; border-radius: 5px; font-size: 18px; } cein ft btn i { width: 20px; height: 20px; } cein ft img { width: 14px; height: 14px; } cein hd svg {fill:var(--b);} cein ft svg { fill: var(--a); }cpkn { display: block; overflow: scroll; padding: 10px; border: solid 1px var(--bor); border-radius: 12px; background: var(--b); margin: 20px 0; } cpkn>hd { display: flex ; justify-content: space-between; margin-bottom: 12px; } cpkn>hd b { display: flex ; color: var(--swiper-theme-color); } cpkn>bd { display: flex ; } cpkn>bd div { display: flex ; gap: 5px; }scto sidebar { display: none; } ccifo .contact-container { display: flex ; gap: 5%; justify-content: center; background: var(--b); padding: 22px; border-radius: 22px; margin: 11px auto; max-width: 1200px; } ccifo .contact-card { background: var(--bc); padding: 22px; width: 250px; text-align: center; border-radius: 22px; transition: 0.3s ease-in-out; } ccifo .contact-card i { height: 44px; padding: 10px; border-radius: 50%; width: 44px; margin: auto; } ccifo .contact-card h3 { font-size: 20px; margin-top: 10px; font-weight: 600; } ccifo .contact-card p { font-size: 0.88em; margin-top: 11px; } ccifo .contact-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 999px) { ccifo .contact-card { background: var(--b); width: auto; margin: 11px 0; } ccifo .contact-container { display: block; background: unset; margin: 11px; padding: 0; } }ccsso .contact-section { background: var(--aa); color: var(--b); text-align: center; padding: 40px; border-radius: 22px; max-width: 1200px; margin: 11px auto; } ccsso .contact-section h2 { margin-bottom: 15px; } ccsso .contact-section p { font-size: 18px; line-height: 1.75em; max-width: 88%; margin: auto; } ccsso .contact-btn { display: inline-block; background: var(--b); padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 20px; margin-top: 15px; transition: 0.3s ease; } @media screen and (max-width: 999px) { ccsso .contact-section { margin: 11px; padding: 23px; } ccsso .contact-section p { font-size: 0.88em; max-width: 100%; } } ccds bl { display: block; max-width: 900px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; } ccds hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--bor); } ccds hd h2 { font-size: 20px; font-weight: 600; } ccds hld { display: flex; gap: 10px; align-items: center; } ccds btn { background: var(--aaa); color: var(--b); border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; display: grid ; align-items: center; gap: 6px; height: 20px; grid-template-columns: 22px auto;} ccds btn1 { background: var(--bc); border: none; border-radius: 6px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; display: grid ; align-items: center; gap: 6px; height: 20px; grid-template-columns: auto 22px; } ccds bd { display: block; padding: 0; } ccds blc { display: flex; padding: 16px 20px; border-bottom: 1px solid var(--bor); align-items: center; } ccds blc:last-child { border-bottom: none; } ccds i { width: 60px; height: 60px; border-radius: 4px; overflow: hidden; margin-right: 16px; background: var(--bc); } ccds i img { width: 88%; height: 88%; object-fit: cover; } ccds fl { flex: 1; } ccds h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; } ccds p { font-size: 13px; margin: 0; } ccds stats { display: flex; gap: 20px; text-align: center; } ccds h3 { min-width: 60px; display: flex ; flex-direction: column; } ccds t { font-size: 12px; margin-bottom: 4px; } ccds b { font-size: 14px; font-weight: 500; } ccds ft p { display: block; padding: 16px 20px; border-top: 1px solid var(--bc); text-align: center; font-size: 14px; } ccds btn1 svg { height: 14px; } @media screen and (max-width: 999px) { ccds bl { margin: 11px; width: auto; } ccds btn1 { display: none; } ccds blc { display: grid ; grid-template-columns: 63px auto 0px; gap: 2%; } ccds stats { display: none; } } /* Component : Conversation */ cnvrs { display: block; height: 90vh; } cnvrs>bl { display: grid ; grid-template-rows: max-content auto max-content; background: var(--bt); border-radius: var(--br); margin: 11px; height: 100%; overflow: hidden; } cnvrs>bl>hd { display: grid ; grid-template-columns: 55px auto max-content; align-items: center; padding: 11px; box-shadow: 0 1px 7px var(--bc); } cnvrs>bl>hd>i { display: block; height: 44px; width: 44px; overflow: hidden; border-radius: var(--br-xl); background: var(--bc); } cnvrs>bl>hd>i img { object-fit: cover; height: 100%; width: 100%; } cnvrs>bl>hd btns { display: flex ; align-items: center; } cnvrs>bl>hd btn { height: 33px; width: 33px; display: flex ; align-items: center; justify-content: center; margin: 4px; border-radius: 55%; padding: 1px; } cnvrs>bl>hd btn:hover { background: var(--hover); } cnvrs>bl bd pf>i { display: block; height: 55px; width: 55px; overflow: hidden; border-radius: var(--br-xl); } cnvrs>bl pf>i img { object-fit: cover; height: 100%; width: 100%; } cnvrs>bl pf { display: flex ; flex-direction: column; margin: 11px; align-items: center; } cnvrs>bl pf>name { font-weight: 600; line-height: 2; } cnvrs>bl bd time { text-align: center; display: block; font-size: 0.77em; padding: 11px; margin: 11px; margin-top: 0; } cnvrs>bl>bd { display: grid ; max-height: 81vh; overflow: auto; } cnvrs>bl bd>div { display: flex ; height: -webkit-fill-available; flex-direction: column; justify-content: end; padding-bottom: 22px; } @media (max-width : 999px) { cnvrs { height: 98vh; } cnvrs>bl { margin: 0; border-radius: 0; } cnvrs>bl>bd { max-height: 88vh; } } /* Component : ConversationAccount */ cacc>bl { display: block; background: var(--bt); position: relative; overflow: hidden; border-radius: var(--br); margin: var(--s-m); height: 100%; } cacc>bl hd>i { height: 90px; width: 90px; margin: 11px auto; overflow: hidden; border-radius: var(--br-xl); } cacc>bl hd>i img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } cacc>bl name { display: block; text-align: center; font-weight: bold; } cacc>bl hd>d { display: grid ; grid-template-columns: 22px auto; align-items: center; justify-content: center; padding: 4px 11px; background: var(--bc); border-radius: 44px; font-size: 0.88em; width: fit-content; margin: 11px auto; font-weight: 500; } cacc>bl hd>btns { display: flex ; justify-content: center; align-items: center; margin: 11px; } cacc>bl hd>btns btn { display: grid ; grid-template-rows: 44px auto; align-items: center; text-align: center; justify-content: center; margin: 0 22px; font-size: 0.88em; } cacc>bl hd btn>i { display: block; margin: auto; height: 16px; width: 16px; padding: 11px; background: var(--bc); border-radius: var(--br-xl); } cacc>bl ul { display: block; margin: 11px 0; padding: 0; } cacc>bl ul>li { display: grid ; padding: 2px 11px; margin: 4px; border-radius: 5px; grid-template-columns: auto 33px; align-items: center; font-size: 0.88em; font-weight: 500; } cacc>bl li:hover { background: var(--hover); } /* Component : ConversationMassage */ cnmg>bl { display: flex ; align-items: center; padding: 0px 11px; margin-bottom: 4px; justify-content: start; gap: 7px; } cnmg>bl hd>i { display: block; height: 33px; width: 33px; overflow: hidden; border-radius: 55%; } cnmg>bl hd>i img { object-fit: cover; height: 100%; width: 100%; } cnmg>bl bd>t { display: block; font-weight: 500; font-size: 0.88em; } cnmg>bl btns { align-items: center; display: flex ; position: relative; opacity: 0; transition: var(--t-normal); } cnmg>bl btns>btn { display: flex ; height: 30px; width: 30px; justify-content: center; align-items: center; margin: 0 5px; border-radius: 55%; } cnmg:last-child>bl hd>i { opacity: 1; } cnmg>bl hd>i { display: block; height: 33px; width: 33px; overflow: hidden; border-radius: 55%; opacity: 0; transition: var(--t-normal); } cnmg>bl bd { background: var(--bc); display: block; padding: 7px 11px; border-radius: 5px 22px 22px 5px; transition: var(--t-normal); width: fit-content; } cnmg.from:first-child bd { border-radius: 22px 22px 22px 5px; } cnmg.from:last-child bd { border-radius: 5px 22px 22px 22px; } cnmg>bl:hover btns { opacity: 1; visibility: visible; } cnmg.to>bl { flex-direction: row-reverse; justify-content: end; } cnmg.to:first-child bd { border-radius: 5px 22px 22px 22px; } cnmg.to:last-child bd { border-radius: 22px 5px 22px 22px; } cnmg.to>bl bd { border-radius: 22px 5px 5px 22px; } cnmg.to:first-child bd { border-radius: 22px 22px 5px 22px; } cnmg.to>bl btns { flex-direction: row-reverse; } cnmg.from>bl btns { display: none; } /* Component : ConversationUser */ cacu>bl { display: grid ; grid-template-columns: 55px auto 0px; padding: 11px; margin: 4px 11px; align-items: center; border-radius: 11px; position: relative; } cacu>bl hd>i { height: 48px; width: 48px; border-radius: 55%; overflow: hidden; box-shadow: 0 0 0 1px var(--bc); } cacu>bl hd i>img { object-fit: cover; height: 100%; width: 100%; } cacu>bl bd p {margin: 4px 0; font-weight: 400; font-size: 0.77em; width: 188px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} cacu>bl name { font-weight: 500; } cacu>bl bd div { display: flex ; align-items: center; color: var(--c0); } cacu>bl bd time { font-size: 0.77em; } cacu>bl:hover { background: var(--hover); } /* Component : Cost */ ccto bl { margin: 7px; box-shadow: unset; background: var(--b); padding: 11px; width: auto; border-radius: 22px; } ccto hd { display: grid ; grid-template-columns: 44px auto; align-items: center; margin: 3px; } ccto img { filter: invert(1); } ccto bd { text-align: center; display: grid; background: var(--b-t); margin-top: 7px; padding: 8px; border-radius: 22px; } ccto bd ccc { font-weight: bold; } cupn {display: grid; height: fit-content; background: var(--b-t); padding: 22px; border-radius: 11px; margin: 22px 0; position: relative; max-width: 777px; min-width: 333px; } cupn { display: grid; width: auto; gap: 22px; } cupn hd i img { height: 100px; width: 100px; display: grid; max-width: unset; max-height: unset; object-fit: cover; } cupn hd i {height: 100px; width: 100px; margin: auto; box-shadow:var(--bs-b); border-radius: 50%; display: grid;} cupn bd { display: grid; text-align: center; margin-top: 33px; } cupn h3 { display: grid; font-size: 1.55rem; font-weight: 500; } cupn up { font-size: 1.88rem; font-weight: 700; color: hsl(138.8deg 70.75% 41.57%); margin-top: 7px; } cupn bd p { font-size: 1.22rem; opacity: 0.88;margin-top: 33px;} cupn bd { display: grid; } cupn btn {display: grid; grid-template-columns: 46px auto; width: 60%; background: #1fb54e0f; margin: auto; align-items: center; justify-content: center; border-radius: 5px; padding: 16px 11px; font-size: 1.33rem; font-weight: 600; gap: 16px; border: dashed 1px #1fb54e;} cupn btn i { height: 38px; width: 38px; } cupn flt {display: grid; grid-template-columns:133px auto 133px;align-items: center; height: max-content; justify-content: center; gap: 22px; } cupn flt i { border: solid 1px var(--bc); background: var(--b-t); } cupn bd .p {font-size: 1.44rem; font-weight: 500; margin-top: 44px;} cupn bd .p span { font-weight: 700; } cupn .loading { display: flex; justify-content: center; align-items: center; margin: 20px 0; } cupn .loading dot { width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; margin: 0 5px;background: #b1b1b1; animation: bounce 1s infinite; } cupn .loading dot:nth-child(1) { animation-delay: -0.33s; } cupn .loading dot:nth-child(2) { animation-delay: -0.22s; } cupn .loading dot:nth-child(3) { animation-delay: 0; } ccss>bd { overflow: scroll; } ctss strs { overflow: scroll; } @keyframes bounce { 0%, 80%, 100% { transform: scale(1); } 40% { transform: scale(1.3);background:var(--a); } } @media screen and (max-width: 999px) { cupn { gap: 11px; } cupn hd i { height: 88px; width: 88px; } cupn hd i img { height: 88px; width: 88px; } cupn h3 { font-size: 1.22rem; } cupn up { font-size: 1.44rem; font-weight: 600; } cupn bd p { font-size: 1rem; } cupn btn { width: 90%; font-size: 1.11rem; grid-template-columns: 33px auto; } cupn btn i { height: 33px; width: 33px; } cupn bd .p { font-size: 1.22rem; } cupn flt { grid-template-columns: 100px auto 100px; } } /* Component : Coupons_Cashback */ ccfro hd { width: 211px; height: 133px; box-sizing: border-box; border-radius: 4px; display: flex; align-items: center; padding: 0 5px; background: var(--bc);} ccfro { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin: 11px 5px; position: relative; max-width: 266px; min-width: 211px; } ccfro bd>d { display: grid; grid-template-columns: 33px auto; align-items: center; padding: 5px 11px; background: #e5fff5; border-radius: 5px; font-weight: 500; margin-top: auto; font-size: 0.88em; white-space: nowrap; } ccfro bd>name { margin: 11px 0px; font-size: 1.11em; } ccfro bd { display: flex; padding: 11px; flex-direction: column; } ccfro bd>d t { text-align: center; } offr {display: grid; background: var(--b-t); padding: 26px; border-radius: 11px; max-width: 188px; height: fit-content; border: solid 1px var(--bc); box-shadow: 4px 3px 6px 0 #e5ebff; margin: 0 7px; min-width: 172px; position: relative;} offr> i { height: 44px; width: fit-content; } offr zol { display: grid; grid-template-columns: 26px auto; align-items: center; } offr bd h3 { margin: 11px 0; font-size: 1.22rem; font-weight: 600; } offr zol i { height: 22px; width: 22px; } offr ft { display: grid; margin-top: 22px; } offr hd> i { height: 44px; width: fit-content; } offr cpbtn { display: grid; } offr cpbtn btn {display: grid; width: 90%; padding: 4px; background: var(--btn); color: var(--b); border-radius: 7px; position: relative; font-size: 0.88rem; font-weight: 500; height: 33px; align-items: center; text-align: center;} offr cpbtn btb {position: absolute; top: 0%; padding: 7px; right: 0px; : 0; border: dashed 1px; z-index: -1; padding-right: 7px; font-size: 1rem; font-weight: 500; height: 25px; background: var(--bc); color: var(--c); border-radius: 6px;} /* Component : Coupons_Increased */ ccbo hd { height: 100%; display: flex; max-height: 180px; justify-content: center; align-items: center; border: 1px solid var(--bc); border-radius: 11px; position: relative; overflow: hidden; } ccbo {display: block; padding: 11px; margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); border-radius: 11px; background: var(--bt); width: fit-content; position: relative; min-width: 234px; } ccbo hd>i { height: 100%; } ccbo hd svg, ctsto>hd img { height: 100%; width: 100%; object-fit: fill; } ccbo ft>d { display: grid; padding: 2px 11px; grid-template-columns: 40px auto; font-size: 0.88em; font-weight: 500; background: #e5fff5; align-items: center; border-radius: 11px; } ccbo bd>p { margin: 5px 0; } ccbo bd { display: block; padding: 11px 5px; } ccbo:hover { box-shadow: 0 0 22px 0 var(--bc); } /* Component : Coupons_Off */ cpoo { display: grid; padding: 22px; border-radius: 5px; border: solid 1px #f4f4f4; background-color: #fff; position: relative; transition: all ease 0.5s; box-shadow: 0 0 10px 0 var(--bc); margin: 5px; width: fit-content; height: 222px; grid-template-rows: 55px auto 44px; min-width: 206px; } cpoo:hover { background: var(--aat); } cpoo hd { width: 99px; height: 44px; display: block; margin-bottom: 3px; } cpoo hd>i { height: 100%; } cpoo hd>i>img { height: 100%; width: 100%; border-radius: 5px; } cpoo bd>d { display: grid; padding: 2px 0; grid-template-columns: 38px auto; font-size: 0.88em; font-weight: 500; align-items: center; border-radius: 11px; white-space: nowrap; margin-top: 11px; } cpoo ft>btn { display: block; text-align: center; padding: 11px; background: var(--aaa); color: var(--b); font-weight: 500; border-radius: 5px; } /* Component : Coupons_Offer */ ccro hd { height: 100%; max-height: 164px; border-radius: 11px 11px 0 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } ccro bx>hd>i { height: 40px; width: 95px; border-radius: 6px; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08); display: flex; justify-content: center; align-items: center; padding: 5px; background: var(--b); } ccro bx>hd { margin-top: -22px; display: block; } ccro bx>bd>p { margin: 11px 0; margin-top: 11px; font-weight: 500; letter-spacing: 0.1px; } ccro ft>d { display: flex; width: fit-content; align-items: center; padding: 6px 11px; background: #e5fff5; border-radius: 5px; } ccro ft>d>i { height: 22px; width: 22px; border-radius: 55%; overflow: hidden; padding: 4px; } ccro ft>d>t { font-weight: 500; margin-left: 5px; } ccro hd>i { height: 100%; } ccro hd>i>img { height: 100%; width: 100%; object-fit: fill; } ccro bd { display: block; padding: 11px; padding-bottom: 0; } ccro ft { display: block; padding: 11px; } ccro ft>p { margin: 0; font-size: 0.66em; } ccro ft>t { display: flex; align-items: center; margin: 11px 0; } ccro ft>t>h5 { margin-left: 6px; text-decoration: line-through; color: var(--bor); font-weight: 500; } ccro { display: block; border-radius: 11px; box-shadow: 0 0 0 1px var(--bc); margin: 8px; overflow: hidden; background: var(--b); width: fit-content; transition: transform 0.8s; min-width: 246px; } cbco { border-radius: 10px; transform: rotateY(180deg); background: var(--b-t); display: flex; flex-direction: column; justify-content: center; text-align: center; backface-visibility: hidden; transition: transform 0.8s; position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; backdrop-filter: blur(20px); box-shadow: inset 0 0 0px 4px var(--bc); } cbco bx { display: flex; flex-direction: column; } cbco bx>btn { background: var(--bt); padding: 11px; display: block; text-align: center; margin: 0 22px; border-radius: 5px; font-weight: bold; margin-bottom: 11px; } cbco bx a { font-weight: 500; text-decoration: underline; color: var(--b); } card { position: relative; display: inline-block; } card:hover ccro { transform: rotateY(180deg); backface-visibility: hidden; } card { position: relative; display: inline-block; } card:hover cbco { transform: rotateY(0deg); } /* Component : Coupons_Offers */ cscs { display: block; position: relative; } cscs>bl>hd { display: block; margin-bottom: 11px; } /* Component : Coupons_Rewards */ ctsto bd>t { text-align: center; letter-spacing: 0.36px; margin-top: 11px; display: block; font-size: 1.22em; font-weight: 500; } ctsto {display: block; padding: 11px; margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); border-radius: 11px; background: var(--bt); max-height: 324px; max-width: 333px; min-width: 355px; position: relative;} ctsto hd>i { height: 100%; } ctsto hd svg, ctsto>hd img { height: 100%; width: 100%; object-fit: fill; } ctsto hd { height: 100%; display: flex; max-height: 180px; justify-content: center; align-items: center; border: 1px solid var(--bc); border-radius: 11px; position: relative; overflow: hidden; } ctsto hd>ii { position: absolute; top: 11px; right: 11px; } ctsto ft>d { margin-top: 11px; display: grid; padding: 11px; grid-template-columns: 40px auto; font-size: 1.22em; gap: 5px; color: #0b5b24; font-weight: 500; } /* Component : Coupons_Step */ ccso>bl {display: grid; padding: 22px; grid-template-columns: 77px auto 44px; border: 1px solid var(--bc); border-radius: 11px; margin: 11px; align-items: center; position: relative; background: var(--bt); max-width: 333px; min-width: 322px; } ccso hd { height: 66px; width: 66px; display: flex; align-items: center; justify-content: center; } ccso hd>i { height: 55px; } ccso bd>p { margin: 4px 0; } ccso bd>t { font-weight: 500; } ccso stp { display: flex; padding: 8px; border-radius: 5px; background: var(--aaa); color: var(--b); align-items: center; justify-content: center; height: 11px; width: 11px; position: absolute; top: -6px; right: 16px; } /* Component : Coupons_Steps */ ccss>bl { display: block; padding: 11px; margin: 11px; } ccss ccso>hd { height: 66px; width: 66px; display: flex; align-items: center; justify-content: center; } ccss ccso>hd>i { height: 55px; } ccss bd { display: block; } ccso bd>p { margin: 4px 0; } ccso bd>t { font-weight: 500; } ccso stp { display: flex; padding: 8px; border-radius: 5px; background: var(--aaa); color: var(--b); align-items: center; justify-content: center; height: 11px; width: 11px; position: absolute; top: -6px; right: 16px; } ccss>bl>bd { display: flex; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); margin-top: 11px; } /* Component : Coupons_Upto */ ctsso { padding: 11px; border-radius: 11px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); cursor: pointer; display: inline-block; position: relative; background: var(--bt); margin: 5px; width: fit-content; min-width: 90PX; } ctsso hd bx { display: grid ; grid-template-rows: 60% auto; } ctsso hd { display: grid; } ctsso hd i { height: 80%; } ctsso bx i>img { height: 100%; width: 100%; object-fit: fill; border-radius: 11px; } ctsso:hover bl { height: 100%; opacity: 1; } ctsso bl { position: absolute; height: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--aaa); backdrop-filter: blur(20px); border-radius: 11px; overflow: hidden; transition: all ease 0.5s; opacity: 0; font-size: 0.88em; font-weight: 500; color: var(--b); } ctsso bx>bd>d { display: grid; grid-template-columns: 33px auto; align-items: center; border: 1px solid var(--bc); border-radius: 5px; margin-top: 11px; } /* Component : Coupons_UptoStores */ ctss { display: block; margin: 11px; } ctss strs { display: flex; background: var(--b-t22); border-radius: 22px; box-shadow: 0 0 4px 0px var(--bc); margin-top: 11px; padding: 11px; } ctsto bd>t { text-align: center; letter-spacing: 0.36px; margin-top: 11px; display: block; font-size: 1.22em; font-weight: 500; } ctsto { display: block; padding: 11px; margin: 5px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); border-radius: 11px; background: var(--bt); max-height: 324px; } ctsto hd>i { height: 100%; } ctsto hd svg, ctsto>hd img { height: 100%; width: 100%; object-fit: fill; } ctsto hd { height: 100%; display: flex; max-height: 180px; justify-content: center; align-items: center; border: 1px solid var(--bc); border-radius: 11px; position: relative; overflow: hidden; } ctsto hd>ii { position: absolute; top: 11px; right: 11px; } ctsto ft>d { margin-top: 11px; display: grid; padding: 11px; grid-template-columns: 40px auto; font-size: 1.22em; gap: 5px; color: #0b5b24; font-weight: 500; } ctsso { padding: 11px; border-radius: 11px; box-shadow: 0 0 3px 0 rgba(101, 116, 150, 0.23); cursor: pointer; display: block; position: relative; background: var(--bt); margin: 5px; height: 144px; } ctss bx>bd>d { display: grid; grid-template-columns: 33px auto; align-items: center; border: 1px solid var(--bc); border-radius: 5px; margin-top: 11px; } ctsso bx i>img { height: 100%; width: 100%; object-fit: fill; border-radius: 11px; } ctsso:hover bl { height: 100%; opacity: 1; } ctsso bl { position: absolute; height: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--aaa); backdrop-filter: blur(20px); border-radius: 11px; overflow: hidden; transition: all ease 0.5s; opacity: 0; font-size: 0.88em; font-weight: 500; color: var(--b); } ctsls { display: block; padding: 5px; } ctsls toplist { display: flex; } cuco { position: relative; display: grid ; max-width: 144px; min-width: 144px; height: auto; background: var(--b); padding: 11px; border-radius: 11px; margin: 11px; } cuco hd { display: grid ; margin-bottom: 22px; } cuco hd i { width: 33px; height: 33px; } cuco bd { display: block; } cuco bd h4 { font-size: 14px; font-weight: 500; margin-bottom: 7px; } cuco bd h3 { font-size: 1em; font-weight: bold; } /* Component : CoverDp */ csdpo bl { display: grid; height: auto; border: dashed 2px; padding: 22px; width: auto; text-align: center; margin: 0; gap: 7px; border-radius: 11px;} csdpo hd { justify-content: center; grid-template-columns: 80px; align-items: center; height: auto; } csdpo hd i { height: 44px; width: 40px; margin: auto; } .up_dp cmsdu sl bd { margin: 0px;} csdpo bd h4 { font-weight: 500; } csdpo bd p { background: var(--0); height: auto; } csdpo ft { margin: 0; } csdpo bd spne { color: var(--a); } csdpo ft btn { background: var(--aaa); color: var(--b); font-weight: 600; font-size: 1em; padding: 11px; width: 94%; display: block; border-radius: 7px; } csdpo ft { margin: auto; width: 100%; border-radius: 11px; align-items: center; } csdpo input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; opacity: 0; height: 100%; width: auto; } csdpo { display: block; margin-bottom: 11px; position: relative; } /* Component : CreatePost */ ccpp { max-width: 555px; display: grid ; max-height: max-content; z-index: 999; transition: var(--tr-a); opacity: 0; visibility: hidden; position: absolute; inset: 0; margin: auto; } .Create_Post ccpp { opacity: 1; visibility: visible; } ccpp>bl { display: block; background: var(--b); border-radius: 11px; filter: drop-shadow(2px 4px 6px var(--bc)); margin: 11px; } .post ccpp { opacity: 1; visibility: visible; transform: scale(1); } ccpp hd { display: grid ; grid-template-columns: auto 40px; align-items: center; padding: 11px; border-bottom: 1px solid gainsboro; } ccpp hd h3 { text-align: center; font-size: 1.22em; font-weight: bold; } ccpp hd ext { right: 7px; top: 2px; } ccpp hd .Post_Video i { width: 24px; height: 24px; background: var(--bc); padding: 3px; border-radius: 22px; margin: auto; } ccpp bd { display: grid ; row-gap: 7px; padding: 22px 22px 0px 22px; } .photo ccpp bd { margin: 0; padding-bottom: 0; } ccpp bd d { display: grid ; grid-template-columns: 44px auto; column-gap: 11px; align-items: center; } ccpp bd d>i { width: 40px; height: 40px; border-radius: 55px; overflow: hidden; } ccpp bd d span { display: block; line-height: 24px; } ccpp bd d div { display: flex ; align-items: center; column-gap: 5px; } ccpp bd d div h4 { font-size: 0.88em; font-weight: 500; } ccpp bd d div i { width: 18px; height: 18px; } ccpp bd d btn { display: flex ; width: fit-content; align-items: center; background: var(--bc); padding: 1px 7px; border-radius: 7px; column-gap: 4px; } ccpp bd d btn i { width: 14px; height: 14px; align-items: center; } ccpp bd d btn h4 { font-size: 0.77em; font-weight: 500; } ccpp bd d btn i:nth-child(3) { width: 18px; height: 18px; } /*ccpp>bd t { display: flex ; justify-content: space-between; }*/ .photo ccpp bd t i { opacity: 1; } ccpp ft { display: block; padding: 22px; } ccpp ft>sp { display: flex ; justify-content: space-between; align-items: center; } .photo ccpp ft>sp { display: none; } ccpp ft>sp span i { width: 33px; height: 33px; } .cool ccpp ft>sp span i { display: none; } ccpp ft coo { display: none; grid-auto-flow: column; align-items: center; column-gap: 5px; } ccpp ft coo i { transform: rotate(90deg); background: var(--bc); width: 20px; height: 20px; padding: 5px; } ccpp ft coo co { width: 28px; height: 28px; background: var(--btn); border-radius: 5px; } .cool ccpp ft coo { display: grid ; } ccpp ft>sp i { width: 24px; height: 24px; transition: 99ms; } ccpp ft>sp i:active { transform: scale(.9); } ccpp ft>btn { display: flex ; justify-content: space-between; align-items: center; border: 2px solid var(--bc); padding: 7px 11px; border-radius: 11px; margin: 11px 0; column-gap: 11px; } ccpp ft btn t { font-size: 0.88em; font-weight: 500; } ccpp ft btn ii { display: flex ; column-gap: 5px; } ccpp ft btn ii i { width: 20px; height: 20px; padding: 5px; border-radius: 44px; } ccpp ft btn ii i:hover { background: var(--bc); } ccpp ft>t { display: block; text-align: center; font-size: 0.88em; font-weight: 500; background: var(--bc); padding: 11px 0; border-radius: 11px; } .pst ccpp>bl { opacity: 1; visibility: visible; transform: scale(1); } capoo { width: auto; height: auto; max-height: 444px; overflow: hidden; overflow-y: scroll; scrollbar-width: thin;} capoo hd { display: block; padding: 22px 0; } capoo hd add { display: grid ; border: 2px solid var(--bc); padding: 7px; border-radius: 11px; position: relative; } capoo hd photo { display: grid ; position: relative; background: var(--bc); border-radius: 7px; } capoo hd photo span i { position: absolute; width: 24px; height: 24px; border: 1px solid var(--bor); border-radius: 22px; top: 11px; right: 11px; background: var(--b); z-index: 999; } capoo hd photo dp { width: 40px; height: 40px; margin: auto; background: var(--bc); padding: 5px; border-radius: 44px; display: flex ; justify-content: center; align-items: center; } capoo hd photo h3 { font-size: 1em; font-weight: 700; text-align: center; } capoo hd photo h4 { font-size: 0.88em; font-weight: 500; text-align: center; } capoo hd photo .info { padding: 44px 11px; } capoo hd upload div:first-child {display: flex ; justify-content: center; align-items: center; position: relative;} capoo hd upload div:first-child div { position: absolute; } ccpp bd span div span { display: flex; gap: 5px; align-items: center; } uploading TecMedia i { width: 70px; height: 70px; } .photo capoo { display: block; } capoo hd add span>i { position: absolute; width: 27px; height: 27px; right: 16px; top: 12px; background: var(--b-t95); border-radius: 50%; z-index: 1111111} .chooseFiles > input.selectFile { position: absolute; opacity: 0; bottom:0} capoo>t { display: grid ; grid-template-columns: auto 5%; align-items: center; } capoo t tt { display: flex ; font-weight: 500; justify-content: center; flex-wrap: wrap; align-items: center; border-radius: 11px; text-align: center; overflow: scroll; font-size: 16px; word-break: break-all; padding: 7px; outline: unset; } capoo t i { width: 24px; height: 24px; opacity: 0; margin-top: 17px; } .teg ccpp { display: none; } .feel ccpp { display: none; } .loc ccpp { display: none; } .GIF ccpp { display: none; } .Add ccpp { display: none; } .aud ccpp { display: none; } .leav ccpp { display: none; } .cow ccpp { display: none; } .evnt ccpp { display: none; } .coll ccpp { display: none; } .get ccpp { display: none; } .ThisPost { background: var(--a); color: var(--b); } capoo upload .uploadMedia { width: 100%; height: 100%;} capoo hd photo:hover btns { opacity: 1; transition: 333ms; } capoo btns { display: grid ; grid-template-columns: auto auto; align-items: center; column-gap: 11px; position: absolute; z-index: 999; margin: 14px; opacity: 0; } capoo hd btns btn { display: flex ; align-items: center; background: var(--b); justify-content: center; padding: 7px; border-radius: 7px; } capoo btns btn i { width: 18px; height: 18px; margin-right: 7px; } capoo hd btns t { font-size: 1em; font-weight: bold; } capoo photo btns { display :none} ccpps .post_textData:focus + .post_placeholder, .post_textData:not(:empty) + .post_placeholder { display: none; } ccpps capoo text .post_container { position: relative; width: 100%; max-width: 500px; border-radius: 20px; padding: 12px 16px; } ccpps capoo text .Article {width: 100%; min-height: 24px; border: none; padding: 0; font-size: 16px; font-family: Arial, sans-serif; color: #333; background: transparent; outline: none; word-break: break-all;} ccpps capoo text .post_placeholder { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: #888; pointer-events: none; font-size: 16px; font-family: Arial, sans-serif; } ccpps ccpp .emoji_info h4 { cursor: pointer; text-decoration: none; } ccpps ccpp .emoji_info h4:hover { text-decoration: underline; } capoo upload .uploading { margin-top : 6px; } crmso { display: block; text-align: center; border-radius: 11px; margin: 11px; padding: 22px; border: 1px dashed var(--c); position: relative; max-width: 777px; min-width: 322px; } crmso>bd { position: relative; } crmso>hd>i { display: block; height: 88px; width: 88px; margin: 22px auto; margin-bottom: 11px; } crmso>bd>t { background: var(--aaa); text-decoration: none; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; font-size: 1.22em; } crmso>bd>p { margin: 4px 16px; font-size: 0.77em; line-height: 1.44em; margin-top: 11px; } crmso>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* Component : Create_Event */ cten { display: none; width: 500px; height: auto; backdrop-filter: blur(22px); box-shadow: var(--bs-bt); background: var(--b); border-radius: 11px; margin: 22px auto; overflow: hidden; } cten hd { display: grid ; grid-template-columns: 33px auto; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } cten hd i { width: 18px; height: 18px; background: var(--bc); padding: 7px; border-radius: 44px; } cten hd h3 { font-size: 1.22em; font-weight: bold; text-align: center; } cten bd { display: block; border-bottom: 1px solid var(--bc); margin: 0 11px; padding: 11px 0; padding-bottom: 22px; } cten bd i { width: 100%; min-width: 150px; } cten bd h4 { font-size: 1em; font-weight: bold; text-align: center; } cten bd p { font-size: 0.88em; font-weight: 500; text-align: center; margin: 0; } cten ft { display: block; padding: 11px; } cten ft btns { display: grid ; grid-template-columns: auto auto auto auto; } cten ft btn { display: grid ; width: 100px; height: 100px; margin: auto; border-radius: 7px; transition: 333ms; padding: 7px; } cten ft btn i { width: 32px; height: 32px; margin: auto; } cten ft btn t { font-size: 0.77em; font-weight: 500; text-align: center; } cten ft btn:hover { background: var(--bc); } .evnt cten { display: block; } /* Component : Create_Newlist */ ctwo { display: grid ; background: var(--b); border-radius: 11px; width: 560px; height: fit-content; opacity: 0; visibility: hidden; position: absolute; inset: 0; margin: auto; } ctwo hd { display: grid ; grid-template-columns: auto 44px; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } ctwo hd h3 { text-align: center; font-size: 1.22em; font-weight: bold; } ctwo hd ext { position: relative; margin: 0; padding: 2px; } ctwo hd i { width: 33px; height: 30px; } ctwo bd { display: block; padding: 11px; } ctwo bd p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 11px; } ctwo bd span { font-size: 1em; font-weight: 500; } ctwo bd input { border: 2px solid var(--bc); border-radius: 11px; padding: 0 14px; margin: 4px 0; transition: 333ms; } ctwo bd input:hover { background: var(--bc); } ctwo ft { display: flex ; padding: 11px; justify-content: end; } ctwo ft btns { display: grid ; grid-template-columns: auto auto; column-gap: 7px; } ctwo ft btn { padding: 7px 33px; border-radius: 7px; transition: 333ms; } ctwo ft btn:nth-child(1) { color: var(--a); } ctwo ft btn:nth-child(2) { background: var(--a); color: var(--b); } ctwo ft btn:nth-child(1):hover { background: var(--bc); } ctwo ft t { font-size: 0.88em; font-weight: 500; } .clist ctwo { opacity: 1; visibility: visible; } ccpt { display: none; max-width: 548px;max-height: 710px; padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem;} ccpt>bl>hd { display: block; align-items: center; padding: 0px 10px; border-bottom: 1px solid var(--bc-t); } ccpt hd div { display: flex ; justify-content: space-between; min-height: 46px; } ccpt hd div i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } ccpt h2 { line-height: 1.2; font-size: 1.25rem; } ccpt>bl>bd {padding: 0px 10px; } ccpt bd ul { padding: 0; display: flex ; gap: 1rem; } ccpt bd ul i { height: 50px; width: 50px; } ccpt bd ul img { height: 100%; width: 100%; border-radius: 25px; } ccpt bd d { display: flex ; gap: 1rem; } ccpt bd ul btn { display: flex ; align-items: center; padding: 3px 4px; border-radius: 6px; background-color: var(--bc); font-size: 13px; font-weight: 600; height: 22px; } ccpt bd btn i { height: 16px; width: 16px; margin-right: 4px; } ccpt ft i { height: 25px; width: 25px; } ccpt ft { display: flex ; padding: 0px 10px; flex-direction: column; gap: 1rem; } ccpt ft btn { display: flex ; justify-content: space-between; border: solid 1px var(--bc-t); padding: 18px 20px; border-radius: 10px; } ccpt ft dv { display: flex ; gap: 1rem; } ccpt ft bttn { display: flex ; justify-content: space-between; } ccpt bttn btn { background: var(--a); justify-content: center; font-weight: 500; margin: 11px 0; color: var(--b1); padding: 8px 6px; gap: unset; width: 460px; border-radius: 5px; } ccpt bttn btn:nth-child(2) { width: fit-content; padding: 8px 10px; background: var(--bc); } ccpt bttn btn:nth-child(1):hover { opacity: .7; } ccpt bttn btn:nth-child(2):hover { background: var(--bor); } seso.OP cupp { display: block; } seso.SN csln { display: block; } seso.EF cefg {display: block;} seso.EA ceae {display: block;} seso.EE ceve {display: block;}ccnl bl { display: flex ; flex-direction: column; align-items: center; text-align: center; background: var(--b); padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 666px; margin: 22px auto; } ccnl bd p { font-size: 16px; margin: 10px 0; } ccnl btn { text-decoration: none; color: var(--a); font-weight: 500; cursor: pointer; margin-top: 22px; display: flex ; } ccnl btn a:hover { text-decoration: underline; } @media only screen and (max-width: 999px) { ccnl bl { width: auto; margin: 11px; } } /* Component : Created_playlists */ ccdp hd h3 { margin-top: 11px; margin-bottom: 16px; font-size: 1.11rem; } ccdp>bl>bd { display: flex ; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc); padding-bottom: 11px; } /* Component : Createmeeting */ cmcgo { display: block; width: auto; background: var(--bt); border-radius: 22px; margin-bottom: 11px; overflow: hidden; } cmcgo bd { display: grid; grid-template-columns: 50% 50%; padding: 22px 11px; grid-gap: 0;position:relative;overflow:hidden } cmcgo bd d { display: grid;height: 55px;grid-column-start: 1;grid-column-end: 3;width: -webkit-fill-available;grid-template-columns: 66px auto;align-items: center;margin:7px; } cmcgo bd d i { display: flex;justify-content: center;align-items: center;height: 44px;width: 44px;margin: auto;border-radius: 50%;padding: 3px;background: var(--aaa); } cmcgo bd i img { border-radius: 50%;background: var(--bt); } ccra { background-image: linear-gradient(#00000000, #000000cc),url(/-/Base/asset/Creativity.png); background-size: 100% 100%; color: var(--b); padding: 22px; display: flex ; flex-direction: column; gap: 20px; } ccra { max-width: 450px; min-width: 450px; border-radius: 11px; max-height: 220px; min-height: 220px; position: relative; justify-content: flex-end; box-shadow: 0px 4px 11px -1px #9b9ab9; transition: 99ms; margin: 0.5rem 0.0rem 0.5rem 0.5rem; } ccra:hover { transition: 99ms; } ccra:hover blur { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; backdrop-filter: blur(10px); border-radius: 25px; } ccra:hover bl { display: block; z-index: 2; } ccra t { display: none; transition: 999ms; } ccra:hover t { display: block; transition: 999ms; margin: 13px 0 10px 0; } ccph bl { display: flex; background: var(--b); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 16px 20px; margin: 11px; justify-content: space-between;} ccph hd { display: flex; justify-content: space-between; align-items: center; } ccph blc { display: flex; align-items: center; gap: 10px; } ccph i { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--bc); display: flex; align-items: center; justify-content: center; } ccph i img { width: 100%; height: 100%; object-fit: cover; } ccph h3 { font-weight: 600; display: flex; align-items: center; gap: 5px; } ccph btn span { color: var(--c); } ccph btn { background: var(--bc); border: 1px solid var(--bc); border-radius: 4px; padding: 6px 12px; font-size: 14px; display: flex ; align-items: center; gap: 5px; cursor: pointer; } ccph h3 i { background: transparent; } ccph btn i { background: transparent; } bcfo input[type="radio"] { display: none; } bcfo label { font-size: 14px; display: block; margin-bottom: 6px; font-weight: 500; } bcfo>bl>bd { position: relative; border: 1px solid var(--bor); border-radius: 6px; padding: 10px; } bcfo div[data-display]::after { content: ""; } bcfo #opt-never:checked ~ section div[data-display]::after { content: "Never"; } bcfo #opt-daily:checked ~ section div[data-display]::after { content: "Daily"; } bcfo #opt-weekly:checked ~ section div[data-display]::after { content: "Weekly"; } bcfo #opt-custom:checked ~ section div[data-display]::after { content: "Custom"; } bcfo ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--b); z-index: 10; border-radius: 6px; margin-top: 4px; padding: 0; list-style: none; box-shadow: 0 16px 70px var(--aa-t); } bcfo ul li { padding: 8px 12px; font-size: 14px; font-weight: 500; } bcfo ul li:last-child { border-bottom: none; } bcfo ul li label { cursor: pointer; display: block; } bcfo bd:focus { border: solid 2px var(--a); } bcfo { display: none; padding: 8px; border-radius: 13px; background: var(--bc); } bcfo ft div:hover,bcfo ft dv:hover { background: 0; } bcfo ft div { display: flex ; justify-content: center; gap: 15px; margin-block: 15px; } bcfo ft div dv { display: flex ; padding: 19px 12px; width: 100%; justify-content: flex-start; border-radius: 9px; border: solid 1px var(--bor); background: var(--bg-t); gap: 13px; } bcfo.FY ul { display: block; } ceoo.CF bcfo {display: block;} cclio { display: none; } .locl cclio { display: block; } .locl popups { opacity: 1; visibility: visible; } cclio svg { width: 24px; height: 24px; } cclio i { width: 33px; height: 33px; cursor: pointer; border-radius: 55%; } cclio.st .sort { display: grid ; } cclio label { display: grid ; grid-template-columns: auto 28px; align-items: center; font-size: 0.77em; opacity: 1; } cclio bl { display: block; width: 400px; background: var(--b); padding: 15px; border-radius: 8px; box-shadow: 0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1), inset 0 0 0 1px rgb(255 250 250 / 50%);} cclio hd { font-size: 16px; font-weight: bold; display: block; margin-bottom: 10px; } cclio bd { display: block; margin-bottom: 10px; cursor: pointer; } cclio .srt { border: 1px solid var(--bc); border-radius: 5px; padding: 0 8px; cursor: pointer; display: flex ; justify-content: space-between; align-items: center; font-size: 0.88em; } cclio .sort { display: none; border: 1px solid var(--bc); overflow: scroll; padding: 8px; margin-top: 5px; height: 300px; } cclio input[type="radio"] { margin-right: 5px; } cclio .range { display: flex; gap: 5px; margin-top: 10px; align-items: center} cclio bd input { width: 22px;height: 22px; } cclio input { width: 100%; padding: 8px; border: 1px solid var(--bc); border-radius: 5px; height: auto;} cclio b { font-weight: 400; font-size: 0.88em; margin-bottom: 11px; display: block; }ccmmo { display: none; } .cmmd ccmmo { display: flex; } .cmmd popups { opacity: 1; visibility: visible; } ccmmo svg { width: 24px; height: 24px; } ccmmo i { width: 33px; height: 33px; cursor: pointer; background: var(--bc); border-radius: 55%; } ccmmo { justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } ccmmo bl { display: block; background: var(--b); width: 400px; padding: 20px; border-radius: 8px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } ccmmo hd { display: flex; justify-content: space-between; align-items: center; font-size: 18px; font-weight: 500; margin-bottom: 15px; } ccmmo bd { display: block; font-size: 14px; margin-bottom: 15px; } ccmmo input-field { display: block; padding: 8px; font-size: 14px; border: 1px solid var(--bor); border-radius: 5px; margin-top: 5px; } ccmmo ft { display: flex; justify-content: flex-end; margin-top: 15px; } ccmmo .cnc { background: var(--bc); padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; margin-right: 10px; } ccmmo .sve { background: var(--a); color: var(--b); padding: 8px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; } @media only screen and (max-width: 999px) { ccmmo bl { width: auto; margin:11px; } } /*Custom_Notifications.css*/ bcno { display: none; height: max-content; width: max-content; margin: auto;position: relative; } bcno>bl { background: var(--b); padding: 20px; border-radius: 10px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); max-width: 370px; margin: auto; width: 100%; } bcno hd {position: relative; font-size: 18px; font-weight: 500; display: grid ; margin-bottom: 10px; grid-template-columns: auto 33px; align-items: center; } bcno hd>h2 { padding: 11px 0px; } bcno hd>btn { display: flex ; border-radius: 55%; padding: 7px;border: 1px solid var(--b);} bcno hd>btn:hover { transition: 333ms;border: 1px solid var(--aa-t);} bcno hd btns>btn:hover { background: var(--bc);transition: 333ms; } bcno hd btns>btn { cursor: pointer; font-size: 15px; padding: 4px 11px; border-radius: 11px; font-weight: 500; } bcno bd btns>btn { font-size: 14px; font-weight: 500; } bcno img { width: 100%; height: 100%; border-radius: 55%; object-fit: cover; } bcno p { margin: 0; } bcno bd d>btn { font-size: 14px; margin: 4px; font-weight: 500; } bcno t { font-size: 12px; color: var(--aa); } bcno>bl>ft>btn { display: flex ; align-items: center; width: 100%; justify-content: center; padding: 7px 0px; border-radius: 11px; background: var(--bg); text-align: center; font-size: 14px; font-weight: 500; cursor: pointer;} bcno bd>btns { display: flex ; justify-content: space-between; align-items: center; padding: 11px 0px;} bcno.more dnfs { visibility: visible; opacity: 1; transform: translate(0, -4px);} bcno.all btn.all { color: var(--a); background: var(--aa-t);} bcno.Unread btn.Unread { color: var(--a); background: var(--aa-t);} bcno.New btn.New { color: var(--a); } bcno.see btn.see { color: var(--a); } bcno>rvm { inset: 0; height: 0; } bcno.more rvm { height: 100%;position: absolute; } bcno .all { padding: 4px 11px; background: var(--bg);} .flyouts flayouts { display: block; } .notification bcno { display: block; } @media only screen and (max-width: 999px) { bcno bl { width: auto; margin: 11px; } } /* Component : Custom_TabsFilters */ bctf bl { background: var(--bt); padding: 11px 22px; border-radius: 11px; box-shadow: 0 4px 7px var(--bc); width: 888px; margin: 11px auto; transition: var(--t-fast); overflow: hidden; } bctf hd>mb { display: flex ; border-bottom: 1px solid var(--bc); margin-bottom: 10px; } bctf hd mb>aa { padding: 8px 15px; cursor: pointer; font-weight: 500; opacity: 0.5; } bctf hd mb>aa.this { color: var(--a); border-bottom: 2px solid var(--a); opacity: 1; } bctf bd { display: block; margin-bottom: 10px; font-size: 14px; } bctf ft { display: flex; gap: 10px; flex-wrap: wrap; } bctf ft btn { padding: 8px 22px; border: none; border-radius: 20px; background: var(--bc); cursor: pointer; font-size: 14px; font-weight: 500; } bctf ft btn.this { background: var(--a); color: var(--b); } bctf ft btn:hover { opacity: .77; } @media only screen and (max-width: 999px) { bctf ft btn { flex: none; } bctf bl { width: auto; margin: 11px; } bctf ft { overflow: auto; flex-wrap: nowrap; } } cdtm { display: grid ; max-width: 333px; } /* GENERAL */ cdtm .credit { position: fixed; right: 2rem; bottom: 2rem; color: white; } cdtm .credit a { color: inherit; } /* Main Circle */ cdtm .main-circle { width: 40rem; height: 40rem; border-radius: 100%; background: linear-gradient(40deg, #ff0080, #ff8c00 70%); position: absolute; z-index: 1; left: 50%; -webkit-transform: translate(-50%, -70%); -ms-transform: translate(-50%, -70%); transform: translate(-50%, -70%); } /* Phone */ cdtm .phone { position: relative; z-index: 2; height: 17rem; background-color: inherit; transition: background-color 0.6s; border-radius: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } /* Top */ /* background-color: blue; */ font-size: 80%; opacity: 0.4; padding: 0.8rem 1.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } cdtm .icons { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 0.5rem; } cdtm .battery { width: 0.85rem; height: 0.45rem; background-color: black; } cdtm .network { width: 0; height: 0; border-style: solid; border-width: 0 6.8px 7.2px 6.8px; border-color: transparent transparent black transparent; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin: 0.12rem 0.5rem; } /* Middle */ cdtm .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto; text-align: center; width: 70%; -webkit-transform: translateY(5%); -ms-transform: translateY(5%); transform: translateY(5%); } cdtm .circle { position: relative; border-radius: 100%; width: 8rem; height: 8rem; background: linear-gradient( 40deg, #ff0080, #ff8c00, #e8e8e8, #8983f7, #a3dafb 80% ); background-size: 400%; transition: background-position 0.6s; margin: auto; } cdtm .crescent { position: absolute; border-radius: 100%; right: 0; width: 6rem; height: 6rem; background: #e8e8e8; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.6s; transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.6s; transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.6s; transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.6s; } cdtm label, .toggle { height: 2.8rem; border-radius: 100px; } cdtm label { width: 100%; background-color: rgba(0, 0, 0, 0.1); border-radius: 100px; position: relative; margin: 1.8rem 0 4rem 0; cursor: pointer; } cdtm .toggle { position: absolute; width: 50%; background-color: #fff; -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } cdtm .names { font-size: 90%; font-weight: bolder; color: black; width: 65%; margin-left: 17.5%; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } cdtm .dark { opacity: 0.5; } cdtm .mark { border-radius: 100px; background-color: black; } cdtm.time { color: black; } /* -------- Switch Styles ------------*/ cdtm [type="checkbox"] { display: none; } /* Toggle */ cdtm [type="checkbox"]:checked + .app .toggle { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); background-color: #34323d; } cdtm [type="checkbox"]:checked + .app .dark { opacity: 1; color: white; } cdtm [type="checkbox"]:checked + .app .light { opacity: 1; color: white; } /* App */ cdtm [type="checkbox"]:checked + .app .phone { background-color: #26242e; color: white; } /* Circle */ cdtm [type="checkbox"]:checked + .app .crescent { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); background: #26242e; } cdtm [type="checkbox"]:checked + .app .circle { background-position: 100% 100%; } cdtm [type="checkbox"]:checked + .app .main-circle { background: linear-gradient(40deg, #8983f7, #a3dafb 70%); } cdtm [type="checkbox"]:checked + .time { color: white; } cdtm [type="checkbox"]:checked + .app .body .phone .menu .time { color: white; } cdtm [type="checkbox"]:checked + .app .body .phone .menu .icons .network { border-color: transparent transparent white transparent; } cdtm [type="checkbox"]:checked + .app .body .phone .menu .icons .battery { background-color: white; } cdtm [type="checkbox"]:checked + .app .body { border-radius: 40px; } /* Component : DashboardNote */ cdnt>bl { display: grid ; grid-template-columns: 33px auto max-content; padding: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--bc); } cdnt>bl hd>input { height: 15px; width: 15px; margin: 4px auto; } cdnt>bl bd>t { font-weight: 500; } cdnt>bl bd>p { margin: 0px; white-space: nowrap; width: 88%; overflow: hidden; text-overflow: ellipsis; } cdnt>bl bd>btns { display: flex; padding: 11px 0; } cdnt>bl btns>btn { display: block; padding: 7px 22px; background: var(--aaa); color: var(--b); border-radius: 33px; margin: 4px; font-size: 0.88em; } cdnt>bl time { display: grid; grid-template-columns: 33px auto; align-items: center; } /* Component : DashboardNotes */ cdns>bl { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } cdns>bl>hd { display: flex; justify-content: space-between; align-items: center; } /* Component : DashboardOnboarding */ cono>bl { position: relative; display: block; padding: 22px; background: var(--bt); border-radius: 22px; margin: 5px; } cono>bl hd { display: flex ; justify-content: space-between; align-items: center; margin-bottom: 11px; } csdo>bl { display: grid; grid-template-columns: 66px 22px auto; padding: 11px 0; margin-bottom: 5px; align-items: center; } csdo>bl>hr { display: block; width: 5px; height: 88%; margin: auto 0; border-radius: 11px; } csdo>bl>bd>p { margin: 0; font-size: 0.66em; } csdo>bl>bd>t { font-weight: 500; font-size: 0.88em; } csdo>bl time { font-weight: 600; font-size: 1.22em; } csds>bl>bd>time { display: block; padding: 22px 0; } cono>bl hd>btn { font-weight: 500; font-size: 0.88em; } cono>bl ft { display: grid ; grid-template-columns: 66px 17px auto; padding: 11px 0; margin-bottom: 5px; align-items: center; } cono>bl ft p { margin: 0; font-size: 0.77em; } cono>bl ft t { font-weight: 500; } cono>bl ft hr { display: block; width: 5px; height: 88%; margin: auto 0; border-radius: 11px; } cono>bl ft>time { font-weight: 600; font-size: 1.22em; } cono>bl d { display: block; padding: 11px 0; } cono>bl d>time { display: block; font-weight: 500; opacity: .7; font-size: 0.88em; } /* Component : DashboardOverview */ covo>bl { display: flex; flex-direction: column; justify-content: space-between; background: var(--bt); border-radius: 22px; padding: 22px; margin: 4px; flex: none; position: relative; min-height: 88px; min-width: 233px; } covo>bl hd { display: flex; align-items: center; padding: 11px; padding-top: 0; white-space: nowrap; font-weight: 500; } covo>bl hd>i { height: 22px; width: 22px; margin-right: 7px; } covo>bl ft { display: flex; justify-content: space-between; align-items: center; } covo>bl ft p { color: var(--aa); font-weight: 500; margin: 0; } covo>bl ft>t { display: flex; align-items: center; color: var(--c0); } covo:first-child>bl>ft>t { color: var(--bt); } covo:first-child>bl { background: var(--aaa); color: var(--b); } covo:first-child>bl>ft p { color: var(--b); } covo:first-child>bl hd>i svg { fill: var(--b); height: 18px; width: 18px; } covo>bl hd>i svg { height: 18px; width: 18px; } /* Component : DashboardOverviews */ covs>bl { display: block; max-width: 1400px; margin: 11px auto; } covs>bl bd>d { display: flex ; overflow-y: auto; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(269deg, #000000 99%, transparent), linear-gradient(90deg, #000 99%, transparent); mask-image: linear-gradient(269deg, #000000 99%, transparent), linear-gradient(90deg, #000 99% 99% , transparent); -webkit-mask-composite: source-in, xor; mask-composite: intersect; } @media screen and (max-width: 999px) { covs>bl { margin: 5px; padding: 0; } } /* Component : DashboardWelcome */ cnvo>bl { display: grid ; padding: 22px; margin: 11px auto; grid-template-columns: auto 122px max-content; position: relative; align-items: center; background: var(--bt); border-radius: 11px; max-width: 1355px; } cnvo>bl btns { display: flex; align-items: center; } cnvo>bl btns>btn { display: block; padding: 4px; height: 33px; width: 33px; background: var(--bc); place-content: center; border-radius: 11px; margin: 5px; } cnvo>bl ft { display: grid ; text-align: end; grid-template-columns: auto 66px; align-items: center; gap: 11px; } cnvo>bl ft>i { display: block; height: 55px; width: 55px; border-radius: 55%; overflow: hidden; background: var(--bt); box-shadow: 0 7px 11px 0px var(--bc); } @media screen and (max-width: 999px) { cnvo>bl ft { display: none; } cnvo>bl { display: flex; padding: 11px; margin: 0; justify-content: space-between; } } /* Component : Deposit_Info */ bl.depositinfo { grid-template-columns: 100%; display: grid; gap: 2%; padding: 11px; margin: 0 7px; background: var(--b1); align-items: center; justify-content: space-between; border-radius: 11px; } deposit bl.depositinfo adrs p { width: 100%; display: block; overflow: hidden; margin: auto; overflow-wrap: anywhere; } deposit dinfo { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; margin-bottom: 4px; } deposit dinfo p { margin: unset; font-weight: 500; letter-spacing: 0.22px; } /* Component : Deposit_Network */ deposit bl.Network adrs p { display: block; overflow: hidden; margin: auto; overflow-wrap: anywhere; font-size: 0.77em; margin-top: 5px; opacity: 0.7; font-weight: 600; } cdwo bl { grid-template-columns: 0px auto 22px; display: grid ; padding: 12px; margin: 7px 0px; background: var(--bc); align-items: center; border-radius: 11px; } /* Component : Deposit_New */ .clnw hd { display: grid; margin: 0 6px; } bl.clnw { background: var(--b); } sidebar bl.clnw input { background: var(--bc); border-radius: 11px; height: 50px; margin: 11px 7px; width: -webkit-fill-available;} sidebar bl.clnw btn { display: grid ; grid-template-columns: 44px auto; background: var(--btn); padding: 11px; align-items: center; justify-content: center; border-radius: 22px; margin: 11px 7px; box-shadow: 0px 1px 11px var(--b1); transition: 333ms; color: var(--b); } swhs label h4 { padding: 0 11px; font-weight: 500; } sidebar bl.clnw btn:active { box-shadow: unset; transform: scale(0.9); } bl.clnw mm { right: 11px; top: 11px; bottom: unset; } @media only screen and (min-width: 600px) { bl.clnw { background: var(--b); max-width: 44vh; padding: 11px; margin: 7px; border-radius: 11px; } sidebar bl.clnw btn:hover { box-shadow: unset; transform: scale(0.9); } } swhs form { position: relative; } /* Component : Deposit_QrCode */ cdqo { display: block; background: var(--bt); padding: 11px; margin: 11px; border-radius: 22px; } cdqo bd { padding-top: 0; } cdqo bd img { width: 100%; height: auto; display:none; } cdqo bd input { width:80%; display:none; } cdqo bd p { width:80%; display:none; } cdqo bd div { width: 222px; min-height: 222px; margin: auto; height: auto; } cdqo bd div img { width: 100%; height: 100%; display: block; margin: auto; max-width: 333px; max-height: 333px; } cdqo ft p { display: block; overflow: hidden; margin: auto; text-align: center; overflow-wrap: anywhere; color: var(--c); } /* Component : Deposit_SpotWallet */ cdpwo { grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 11px; margin: 0 0px; background: var(--bc); align-items: center; justify-content: space-between; border-radius: 11px; } cdpwo adrs p { display: block; overflow: hidden; margin: auto; overflow-wrap: anywhere; font-size: 0.77em; margin-top: 5px; opacity: 0.7; font-weight: 600; } cdpwo bd { padding: 0; } cdpwo bd h5 { display: flex; align-items: center; } cdpwo bd i { height: 15px; width: 15px; margin-left: 3px; } /* Component : Deposit_WalletAddress */ deposit bl.Waddress { grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 11px; margin: 0 0px; background: var(--bc); align-items: center; justify-content: space-between; transition: 99ms; border-radius: 11px; } deposit bl.Waddress adrs p { display: block; overflow: hidden; margin: auto; overflow-wrap: anywhere; font-size: 0.77em; margin-top: 5px; opacity: 0.7; font-weight: 600; } deposit bl.Network { grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 12px; margin: 7px 0px; background: var(--bc); align-items: center; justify-content: space-between; border-radius: 11px; } deposit bl.Network bd { padding: 0; } deposit bl.Waddress bd { padding: 0; } cdwso { display: block; background: var(--bc); border-radius: 11px; padding: 11px; } cdwso ft i { width: 24px; height: 24px; } csro { display: grid ; padding: 22px; background: var(--bt); border-radius: 22px; margin-bottom: 11px; } csro hd { display: flex; gap: 2px; line-height: 1.55em; } csro hd h3 { font-size: 14px; font-weight: 500; } csro hd h4 { font-size: 14px; color: var(--c0); font-weight: 400; } csro bd { display: block; } csro bd p {margin: 0; font-size: 14px; font-weight: 400; line-height: 1.55em; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis;} csro bd p aa { font-size: 1.11em; font-weight: 500; } @media screen and (max-width: 999px) { csro { display: none; } } /* Component : Deposits_Crypto */ cdeto hd h1 { font-size: 16px; font-weight: 400; margin: 17px; } cdeto trc { position: relative; grid-template-columns: 66px auto 0; margin: 7px 0; font-size: 9px; align-items:center; padding: 16px; background: transparent; border-bottom: 1px solid var(--bc); border-radius: 0; } cdeto bd>h5 { font-size: 12px; color: var(--ct); margin: 2px; } cdeto ft>h1 { font-size: 14px; font-weight: 100; color: rgb(14, 203, 129); } cdeto trcs>trc>bd { display: flex; flex-direction: column; justify-content: unset; letter-spacing: 0; font-size: 2em; margin-left: 0; } cdeto trc>hd { overflow: hidden; display: flex; justify-content: center; height: 73px; width: 73px; border-radius: 22px; background: unset; align-items: center;} cdeto trcs>trc>ft { display: flex; flex-direction: column; justify-content: center; align-items: center; } cdeto ft h2 { font-size: 14px; font-weight: 100; } cdeto trc img { object-fit: cover; height: 88%; width: 88%; } /* Component : Description */ cdpno { display: grid ; background: var(--b-t); padding: 22px; border-radius: 11px; margin: 7px; } cdpno hd { display: flex ; align-items: center; padding: 24px; border: 1px solid var(--bor); border-left: 4px solid var(--aat); background: var(--aat); } cdpno hd span { font-size: 1em; font-weight: bold; } cdpno hd p { font-size: 0.88em; font-weight: 500; margin: 0; } cdpno bd { display: block; margin: 11px 0; } cdpno bd h3 { font-size: 1.11em; font-weight: 500; margin-bottom: 11px; } cdpno bd p { font-size: 0.88em; font-weight: 500; margin: 0; line-height: 28px; } cdpno bd p a { color: var(--a); text-decoration: underline; } cdpno ft { display: block; } cdpno ft p { margin: 0; font-size: 0.88em; font-weight: 500; line-height: 28px; } cdpno ft h3 { font-size: 1.11em; font-weight: 500; margin: 11px 0; } cdpno ft p a { color: var(--a); text-decoration: underline; } cdpno ft ul { display: block; line-height: 28px; padding-left: 18px; } cdpno ft ul li { font-size: 0.88em; font-weight: 500; } /* Component : DescriptionDetail */ cdnd { position: relative; display: grid ; padding: 22px; background: var(--bt); border-radius: 22px; margin: 11px 0; } cdnd hd { display: block; } cdnd hd det { display: flex; gap: 7px; } cdnd hd det h3 { font-size: 14px; font-weight: 500; } cdnd hd det h4 { font-size: 14px; font-weight: 500; color: var(--c0); } cdnd hd p { font-size: 14px; margin: 0; font-weight: 400; line-height: 1.55em; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; position: relative; } cdnd hd p:after { content: '... more'; position: absolute; right: 0; bottom: 0; background: var(--b); box-shadow: -20px 3px 20px 3px var(--bt); font-size: 15px; font-weight: bold; padding-left: 10px; } cdnd hd p a { font-size: 14px; font-weight: 400; color: var(--a) !important; } cdnd hd p span { display: flex; align-items: center; gap: 7px; line-height: 1.55em; } cdnd hd p span i { width: 14px; height: 14px; } cdnd> bl>bd { display: block; } cdnd str f{display: flex; overflow: scroll;border-bottom: 0.9px solid var(--bc); padding-bottom: 22px;} cdnd { display: flex;overflow: hidden; overflow-x: scroll;padding-bottom: 11px;border-bottom: 1px solid var(--bc);position: relative;} cdnd sl>btn { margin-top: 14vh; } cdnd sl { align-items: unset; } cdnd sl btn { display: grid ; } cdnd sl i { height: 22px; width: 22px; margin: auto; } cdnd btn:hover { background: var(--bc); border: solid 1px var(--bg); transition: 333ms; } cdnd bd str { display: grid; } cdnd bd str h2 { margin-bottom: 14px; } cdnd str>d { display: grid; position: relative;} cdnd >bl>ft{ display: block; } cdnd ft man { display: block; padding: 22px 0px; } cdnd ft pr { display: grid; grid-template-columns: 44px auto; align-items: center; margin-bottom: 14px; } cdnd ft man pr i { height: auto; width: auto; } cdnd ft pr>i { max-width: 44px; max-height: 44px; background: var(--at); border-radius: 28px; overflow: hidden; } cdnd ft man pff { display: grid; margin-left: 11px; } cdnd ft pff h3 { font-size:18px; } cdnd ft pff h5 { font-size: 12px; font-weight: 400; } cdnd ft btns { display: grid; grid-template-columns: 16% 16% auto; margin-bottom: 14px; } cdnd ft btns btn { display: grid; grid-template-columns: auto auto; align-items: center; border: 2px solid var(--bc); margin-right: 11px; padding: 4px 11px; border-radius: 42px; } cdnd ft btns btn i { width: 24px; height: 24px; margin: auto; } cdnd ft btns btn t { text-align: center; font-weight: 700; } cdnd ft gd { display: grid; grid-template-rows: 66px 66px 66px; gap: 11px; } cdnd ft>btn { display: flex; } cdnd ft>btn t { font-size: 1em; font-weight:500; } @media screen and (max-width: 999px) { cdnd{margin: 0 11px;} cdnd ft>man>btns { grid-template-columns: 133px 133px auto; } } cdnd.this hd p:after {display:none;} cdnd.this hd p {overflow: unset; -webkit-line-clamp: unset; } cdnd.this> bl>bd { display: block; } cdnd.this >bl>ft { display: block; } cdno { position: relative; display: grid ; width: fit-content; min-width: 366px; background: var(--b); margin: 0 11px; border-radius: 22px; } cdno hd { display: grid ; position: relative; background-image: url(/0/IMG/masphone.png); background-repeat: no-repeat; background-size: contain; background-position: center; background-color: var(--aat); border-radius: 22px 22px 0 0; width: auto; height: 222px; } cdno hd btn { position: absolute; display: flex ; align-items: center; background: var(--b); padding: 5px 11px; border-radius: 11px; margin: 11px; } cdno hd btn i { width: 20px; height: 20px; } cdno hd btn t { font-size: 0.88em; font-weight: 500; margin-left: 7px; } cdno bd { display: grid ; position: relative; padding: 11px; } cdno bd>i { position: absolute; width: 55px; height: 55px; background: var(--c); border: 2px solid var(--b); border-radius: 44px; overflow: hidden; top: -28px; left: 11px; } cdno bd b { display: flex ; align-items: center; margin-top: 33px; } cdno bd b i { width: 24px; height: 24px; } cdno bd b h4 { font-size: 14px; font-weight: 500; color: var(--a); } cdno bd h2 { font-size: 1.11em; font-weight: 600; } cdno ft { display: grid ; grid-template-columns: auto 44px; align-items: center; padding: 11px; padding-top: 0; } cdno ft d { display: grid ; } cdno ft d bc { display: flex ; align-items: center; margin: 4px 0; column-gap: 7px; } cdno ft d bc i { width: 20px; height: 20px; } cdno ft d bc h3 { font-size: 1em; font-weight: 500; } cdno ft>i { width: 28px; height: 28px; margin: auto; } cdms bl { display: block; padding: 20px; max-width: 800px; margin: auto; background: var(--bt); margin-top: 30px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: relative;} cdms h2 {font-size: 32px; margin-bottom: 20px; font-weight: bold; color: #ff0000; } cdms h2 t { margin-bottom: 1px; display: block; } cdms p { line-height: 1.8; margin: 18px 0; position: relative;} cdms p b:hover { text-decoration: underline;cursor: pointer; } cdms a.a:hover { text-decoration: underline; } cdms>bl bd{text-align: center;} @media screen and (max-width: 999px) { cdms bl { margin: 11px; } } cdie { display: block; background: var(--b); border-radius: 15px; padding: 20px; border: solid 1px var(--aa-t); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); margin-top: 1rem; } cdie hd { padding: 20px; } cdie h2 { font-weight: bold; margin-bottom: 15px; } cdie bd div {display: grid; gap: 8px; } cdie dv { display: flex; gap: 10px; flex-wrap: wrap; } cdie btn { display: flex ; align-items: center; gap: 5px; background-color: var(--bc-t); padding: 8px 15px; border-radius: 10px; border: none; font-size: 14px; } cdie btn i img { width: 16px; height: 16px; } cdie btn:hover { background-color:var(--aa-t); } cdie btn:nth-child(3) { background-color: var(--a-t); color: var(--a); } cdie i{height: 20px; width: 20px;} cdie btn:nth-child(3):hover{ background-color:var(--aa-t); } cdie.EL celn {display: block;} @media(max-width:786px){ cdie bd div { grid-template-columns: 1fr; } cdie { padding: 11px; } cdie hd { padding: 10px; } } @media only screen and (min-width:500px) { cdie bd div{ grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width:768px) { cdie bd div{ grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width:1280px) { cdie bd div { grid-template-columns: repeat(3, 1fr); } } /* Component : Dp */ cdpm bl { display: grid; height: auto; border: dashed 2px; padding: 22px; width: auto; text-align: center; margin: 0; gap: 7px; border-radius: 11px; } cdpm hd { justify-content: center; grid-template-columns: 80px; align-items: center; height: auto; } cdpm hd i { height: 44px; width: 40px; margin: auto; } .up_dp cmsdu sl bd { margin: 0px;} cdpm bd h4 { font-weight: 500; } cdpm bd p { background: var(--0); height: auto; } cdpm bd spne { color: var(--a); } cdpm ft btn { display: block; background: var(--aaa); padding: 11px; font-weight: 600; font-size: 1em; align-content: center; color: var(--b); border-radius: 7px; } cdpm ft { margin: auto; width: 100%; border-radius: 11px; align-items: center; } cdpm input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; opacity: 0; height: 100%; width: auto; } cdpm { display: block; margin-bottom: 11px; position: relative; } /* Component : Dp_Update */ cpeo hd { display: flex; justify-content: space-between; } cpeo bd>pfphto { display: flex; justify-content: center; } cpeo { display: block; padding: 11px; margin: 11px; } cpeo hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cpeo hd>btn:hover { background: var(--bc); } cpeo bd>i { display: flex ; overflow: hidden; height: 133px; width: 133px; border-radius: 55%; border: 1px solid var(--bc); margin: 11px auto; } cpeo bd img { height: 100%; width: 100%; object-fit: cover; } /* Component : Dynamics_Menu */ cdnmo { display: block; position: relative; overflow: auto; height: 100vh; scroll-behavior: smooth; } cdnmo>hd { display: flex ; align-items: center; padding: 7px 0 0 55px; } cdnmo>hd btns>btn { display: flex ; align-items: center; padding: 7px; margin: 0 4px; white-space: nowrap; font-size: 0.88em; border-radius: 7px; } cdnmo>hd btns { display: flex ; } cdnmo btns>btn>i { height: 15px; width: 15px; margin: 0 7px; } cdnmo>hd hr { transform: rotate(90deg); width: 22px; } cdnmo>bd d { display: grid ; align-items: center; padding: 22px 0; grid-template-columns: 55px auto; padding-bottom: 0; } cdnmo>bd d>btn { display: block; padding: 7px; background: var(--b); border-radius: 55%; width: 22px; height: 22px; box-shadow: var(--bt-bx); place-content: center; justify-items: center; margin: 0 4px; } cdnmo>bd links { display: flex ; flex-wrap: wrap; margin: 11px 0 0 55px; } cdnmo bl>label { display: grid ; grid-template-columns: auto 33px; align-items: center; width: max-content; font-weight: 500; opacity: 1; font-size: 0.88em; padding: 0 11px; } cdnmo bl>ul { overflow: hidden; padding: 0; margin: 0; transition: 95ms; height: 0; } cdnmo ul>li { font-size: 0.77em; padding: 3px 11px; color: var(--aa); font-weight: 400; position: relative; margin: 4px 7px; padding-left: 7px; } cdnmo>bd h1 { margin: 0px 0 0 55px; } cdnmo>hd btns>btn.bg { background: var(--bt); border-radius: 7px; box-shadow: var(--bt-bx); overflow: hidden; } .expand>ul { padding: 4px 15px 15px 0; height: fit-content; } cdnmo label>i { transition: 95ms; opacity: 0; height: 22px; width: 22px; margin: 0 7px; } .expand label>i { transform: rotate(-90deg); opacity: 1; } cdnmo>hd h2 { text-transform: uppercase; font-size: 1.33em; margin-right: 4px; } cdnmo>hd { display: flex ; align-items: center; padding: 7px 0 0 55px; width: max-content; } cdnmo>hd btns>btn:first-child { margin-left: 0; padding-left: 0; } cdnmo>hd btns>btn:hover { background: var(--bt); } @media (max-width : 999px) { cdnmo>hd btns>btn:first-child { margin-left: 4; padding-left: 7px; } cdnmo>bd links>list { display: block; padding: 11px; } cdnmo>bd links { display: grid ; grid-template-columns: 50% 50%; margin: 0; } cdnmo>bd h1 { margin: 0px 0 0 22px; font-size: 1.44em; } cdnmo>bd d { padding: 11px 0; } cdnmo>hd { padding: 11px 0; display: block; } cdnmo>hd btns { display: grid ; grid-template-columns: max-content auto max-content; } cdnmo>hd btns>btn { justify-content: center; } } @media (min-width : 1255px) { cdnmo list>bl { display: block; padding: 11px 11px 11px 0; margin-right: 4px; } } /* Component : Edit */ edit { display: block; position: relative; display: block; margin: 11px; box-shadow: var(--bs-b); border-radius: 22px; background: var(--b-t);padding: 22px 11px; } edit input { margin: 7px auto; padding: 7px 22px; border: solid 1px var(--bc); border-radius: 7px; font-size: 1em; } edit form { position: relative; } edit form:after{content:'';position:absolute;z-index:8;top:0;bottom:0;left:0;right:0;display:block;} edit d,edit input,edit label{transition: 333ms;} edit d { display: flex; align-items: center; max-width: 100%; overflow: hidden; padding: 4px 22px; border: solid 1px var(--bc); } edit input { background: transparent; color: var(--c); border: unset; width: -webkit-fill-available; font-size: 15px; } edit label { font-size: 15px; font-weight: bold; } edit .submit { display: none; } edit aa:after { background: #eef; color: #060a10; content: 'Edit Profile'; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-weight: bold; transition: 333ms; border: solid 1px;opacity:0} edit.edit aa:after {opacity:1 } input[readonly] { opacity: 0.4; } edit input[readonly] { opacity:1;font-weight: bold; } edit hd { display: grid; grid-template-columns: 44px auto; } edit hd i { height: 40px; width: 40px; } edit hd h3 { display: flex; align-items: center; padding-left: 1px; } edit bd aa { margin: 22px; display: flex; height: 44px; justify-content: center; align-items: center; border: solid 1px;position:relative } ceap { display: grid ; grid-template-columns: 30% auto 0px; align-items: center; border-radius: 11PX; position: relative; padding: 22px; margin-bottom: 44px; min-height: 355px; padding-left: 44px; } ceap caps { position: absolute; right: 33px; top: 42px; display: grid ; grid-template-columns: auto auto; gap: 11px; } ceap caps i { height: 24px; width: 24px; background: var(--b); border-radius: 55px; } ceap>hd div { display: block; position: relative; color: var(--b); } ceap>hd btn { display: flex ; width: fit-content; border-radius: 4px; align-items: center; backdrop-filter: blur(4px); background: var(--bor); padding: 6px 33px; box-shadow: 0px .5px 0px var(--b-t44, 0px 1.1px 0px var(--b-t44)); font-size: 16px; margin-top: 0px; margin-top: 33px; } ceap bg i { width: 100%; height: 100%; } ceap bg img { width: 100%; } ceap bg { overflow: hidden; border-radius: 11px; } @media only screen and (max-width: 666px) { ceap>bd { display: none; } ceas bd mg, ceap bd mg { overflow: auto; } ceap caps { display: none; } ceap { grid-template-columns: auto 0px 0px; } ceap::before { filter: brightness(0.7); } ceap bg img { filter: brightness(0.5); } ceap { grid-template-columns: auto 0px 0px; padding: 33px; margin: 11px; height: auto; min-height: auto; } } ceda { display: flex ; padding: 22px; position: relative; z-index: 2; overflow: hidden; border-radius: 22px; margin: 7px 0; border: 1px solid var(--bor); } cebd {display: none;} cebd>bl { max-width: 342px; padding: inherit; display: block; position: absolute; z-index: 100000; max-height: 250px; box-sizing: border-box; background: var(--b1); border-radius: 11px; width: 324px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; left: 47rem; right: 0; top: 26rem; bottom: 0; } cebd hd dv { padding: 10px 14px; font-weight: 400; font-size: 14px; color: var(--c0-t); } cebd bl>bd { height: 15vh; overflow: scroll; } cebd bd>dv { display: grid ; grid-template-columns: repeat(8, 1fr); gap: 8px; justify-items: center; align-items: center; } cebd bd span { font-size: 22px; } cebd bd span:hover { transform: scale(1.2); } cebd ft dv { display: flex ; justify-content: space-between; padding: 10px 14px; } cebd ft span { font-size: 20px; opacity: 0.6;} cebd ft span:hover { opacity: 1; transform: scale(1.1); } ceso bl { display: block; max-width: 1200px; width: 100%; background: var(--b); border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); overflow: hidden; margin: auto; } ceso bd { display: flex ; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px; } ceso i { width: 77px; height: 77px; margin: auto; margin-top: 22px; } ceso h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; } ceso p { font-size: 14px; max-width: 400px; line-height: 1.4; } @media screen and (max-width: 99px) { ceso bl { margin: 11px; width: auto; } } cero input[type="radio"] {display: none;} cero hd label,cero bd label,cero ft label { display: flex ; padding: 7px 9px; padding-left: 33px; } cero hd d,cero bd d,cero ft d { display: flex ; align-items: center; gap: 13px; font-weight: 500; } cero hd>dv,cero bd>dv,cero ft>dv { display: flex ; flex-direction: column; border: unset; padding: unset; } cero>bl { padding: unset; } cero bd i,cero ft i { width: 30px; padding: 3px 3px; height: 30px; border-radius: 50%; display: flex ; align-items: center; justify-content: center;background: var(--bc); } @media only screen and (min-width: 999px) { ceao:hover { display: block; background-color: var(--b); border-radius: 11px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); width: 300px; padding: 15px; box-sizing: border-box; min-width: auto; max-width: max-content; height: fit-content;transform: scale(1.05); } ceao:hover hd { display: flex; align-items: center; } ceao:hover hd img { width: unset; height: unset; border-radius: 7px; } ceao:hover hd div { margin-left: 10px; flex-grow: 1; border: unset; padding: 0; border-radius: unset; } ceao:hover hd h2 { margin: 0; font-size: 16px; font-weight: bold; } ceao:hover hd p { margin: 0; font-size: 12px; color: (--c0); } ceao:hover hd btn { display: flex ; align-items: center; background-color: var(--aa); color: var(--b); padding: 2px 15px; border-radius: 4px; text-align: center; font-size: 14px; cursor: pointer; height: fit-content; transition: 333ms; padding-bottom: 5px; margin-bottom: 7px; } ceao:hover bd { display: block; margin-top: 10px; height: auto; opacity: 1; } ceao:hover bd p { font-size: 14px; color: #333; } ceao:hover ft { margin-top: 10px; display: flex ; align-items: center; opacity: 1; height: auto; } ceao:hover ft img { width: 50px; height: 50px; border-radius: 7px; } ceao:hover ft div { margin-left: 10px; } ceao:hover ft p { margin: 0; font-size: 12px; color: (--c0); } ceao:hover hd bgg { display: block; background: var(--0); width: 55px; height: 55px; } ceao:hover hd p t { display: block; } ceao:hover hd p { display: flex ; gap: 7px; } ceao:hover hd div p { justify-content: flex-start; } ceao:hover hd p btn { display: none; } ceao:hover { position: absolute; z-index: 999; height: fit-content; top: 0; margin-left: -55px;} ceao:hover hd div { background: var(--0); } } ceao hd div.loader-line { display: none; position: unset; width: 100%; background: var(--0); margin: 0; animation: transformA 333ms forwards; } ceao.active hd div.loader-line { display: block; } ceao.active hd>btn { display: block; position: absolute; right: 0; transition: 333ms; height: 0px; color: var(--0); padding: 0px; transform: scale(1.2) translate(0px, -34px); animation: transformAnimation 333ms forwards;} ceao .loader-line { width: 200px; height: 3px; position: relative; overflow: hidden; background-color: #ddd; margin: 100px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } ceao .loader-line:before { content: ""; position: absolute; left: -50%; height: 3px; width: 40%; background-color: var(--aa); -webkit-animation: lineAnim 1slinear infinite; -moz-animation: lineAnim 1s linear infinite; animation: lineAnim 1s linear infinite; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } @keyframes lineAnim { 0% { left: -40%; } 50% { left: 20%; width: 80%; } 100% { left: 100%; width: 100%; } } .element { } @keyframes transformAnimation { 0% { transition: 333ms; transform: scale(1.2) translate(-100px, -27px); background: var(--0) } 100% { transition: 333ms; transform: scale(1.2) translate(0px, -34px); width: 100%; background: var(--0) } } @keyframes transformA { 0% { background: var(--0); opacity: 0;} 100% { background: var(--aat); opacity: 1;} } ceas bd flex, ceap bd flex { display: grid ; grid-template-columns: repeat(auto-fit, minmax(166px, 1fr)); grid-auto-flow: column; width: auto; height: 236px; scroll-behavior: smooth; gap: 11px; align-items: center; scrollbar-width: none; --shadow-spacing: 8px; } ceas flex>div:hover { bottom: 3px; } ceas flex>div { display: block; /* position: relative;*/ transition: 99ms;} ceao hd div p { display: flex ; justify-content: space-between; align-items: center; } ceao bd { display: none; margin-top: 10px; height: 0px; opacity: 0; margin: 0; transition: background 0.3s ease-in-out;} ceao>ft { margin-top: 10px; display: flex ; align-items: center; height: 0; opacity: 0; margin: 0; border-top: solid 1px var(--bor); padding-top: 10px; } ceao hd { display: grid ; grid-template-rows: 128px auto 0px; position: relative; height: inherit; } ceao { padding: 0; overflow: hidden; display: block; background-color: var(--b); min-width: 166px; max-width: 166px; box-sizing: border-box; border-radius: 11px; height: 236px; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } ceao hd div h2 { font-size: 15px; font-weight: 500; } ceao hd bgg { display: flex ; align-items: center; justify-content: center; height: 100%; width: 100%; backdrop-filter: blur(8px); position: relative; background: var(--bc); } ceao hd btn { display: none; transition: background 0.3s ease-in-out;} ceao hd p btn { display: block; background: var(--bc); color: var(--c); padding: 2px 7px; border-radius: 4px; } ceao hd img { width: 80px; height: 80px; border-radius: 7px; } ceao hd div { display: flex ; flex-direction: column; justify-content: space-between; padding: 11px; padding-bottom: 9px; border-top: 0px; border-radius: 0px 0px 7px 7px; backdrop-filter: blur(21px); background: var(--b-t); } ceao hd p t { display: none; } ceao bd img ,ceao hd img{ transition: transform 0.3s ease-in-out; } ceap bd { display: flex ; gap: 11px; margin-bottom: 14px;position: relative; } capbl { display: grid ; position: relative; padding: 0px 11px; } capbl bd { display: flex ; gap: 11px; position: relative; margin-bottom: 14px; } capbl bd>mg { display: flex ; gap: 7px; } ceae { display: none; max-width: 548px; overflow: hidden; max-height: 600px;padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } ceae hd { display: block; align-items: center; padding: 0px 10px; border-bottom: 1px solid var(--bc-t); } ceae h2 { line-height: 1.2; font-size: 1.25rem;right: 10rem;position: relative;} ceae hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} ceae hd div { display: flex ; justify-content: space-between; min-height: 50px; } ceae bd { display: flex ; flex-direction: column; padding: 0px 8px; padding-top: 8px; gap: 1rem; } ceae blc { display: grid ; grid-template-columns: 35px auto; background: var(--bc); border-radius: 30px; padding: 6px;width: 516px;} ceae blc i { height: 18px; width: 18px; margin: auto; } ceae bd input { border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: unset; font-weight: 400; } ceae ft i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } ceae ft { display: flex ; flex-direction: column; gap: 1%; padding: 0px 10px; padding-top: 8px; overflow: scroll; height: 25vh; } ceae ft div { display: flex ; align-items: center; gap: 1rem; border-radius: 10px; padding: 6px 6px; justify-content: space-between;} ceae ft dv { display: flex ; align-items: center; gap: 1rem; } ceae ft span { color: var(--c0-t); } ceae bd d { display: flex ; gap: 1rem; height: 50px;} ceae bd b { color: var(--a); font-weight: 500; border-bottom: solid 3px var(--a);padding: 9px 9px; } ceae bd b:nth-child(1) { color: var(--c0-t); border-bottom: none; } ceae ft div:hover { background: var(--bc); } ceae bd b:hover { background: var(--bc); } cecd hd div { display: flex ;padding-bottom: 10px;} cecd>bl>hd { display: block; padding: 0px 12px; border-bottom: solid 1px var(--bor); } cecd hd h2 { display: flex ; width: 100%; justify-content: center; } cecd hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cecd>bl { display: block; max-width: 700px; overflow: hidden; padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 700px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } seso.Calendar cecd { display: block; } cecd { display: none; } cecy bl { width: 278px; overflow: hidden; margin-top: 2rem; border-right: solid 1px var(--bor); border-top: solid 1px var(--bor); height: 679px; } cecy bd { display: block; padding: 12px; font-size: 14px;} cecy ft { display: block; border-top: 1px solid #ddd; padding: 10px; font-size: 14px; } cecy section { margin-bottom: 16px; } cecy details { padding-left: 10px; } cecy summary { font-weight: 600; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; } cecy summary:hover { color: var(--a); } cecy summary dv { display: flex; align-items: center; gap: 6px; } cecy p { font-size: 15px; padding: 12px 8px; border-radius: 10px;} cecy details p:nth-child(1) { background: var(--a-t); } cecy p:hover { background: var(--bc); } cecy bd i { width: 20px; height: 20px; } cecy dv span { font-size: 16px; } cecy .CT { display: none; padding-left: 22px; } cecy details[open] .CT { display: block; } beco>bl {display: block; position: absolute; z-index: 100000;max-height: 849px; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem;} beco hd>i { width: 27px; height: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } beco>bl>hd { display: flex ; justify-content: space-between; padding: 15px 14px; border-bottom: solid 1px var(--bor); } beco hd>h2 { display: flex ; justify-content: center; width: 100%; } beco ft>btn { display: flex ; justify-content: center; background: var(--bc); border-radius: 7px; padding: 6px; font-weight: 500; color:var(--aa-t); } beco>bl>ft { display: block; padding: 20px; } beco div btn { display: flex ; justify-content: end; background: var(--bor); padding: 9px 14px; border-radius: 7px; } beco div i,beco dv i { width: 20px; height: 20px; } beco bd>div { display: flex ; flex-direction: column; position: relative; } beco div>d:nth-child(1) { display: flex ; flex: 1; padding: 6rem; background: var(--bc); } beco div d:nth-child(2) { display: flex ; justify-content: end; padding: 7px; position: absolute; left: 0; right: 0; top: 67%; } beco d>dv { display: none ; flex-direction: column; background: var(--b); border-radius: 8px; padding: 16px; width: 144px; gap: 11px;box-shadow: 0 16px 70px var(--aa-t);} beco dv>p,beco dv>label { display: flex ; margin: 0; gap: 11px; } beco bd>d { display: flex ; justify-content: end; padding: 11px 8px; top: 15rem; position: absolute; bottom: 0; left: 0; right: 0; height: 81px; z-index: 9999; } beco input { display: none; } beco.AD d>dv { display: flex ; } beco>bl>bd { height: 698px; display: block; overflow: scroll; } beco d img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; margin: auto; } seso.EC beco { display: block; } beco { display: none; } cedo bl { display: block; position: absolute; z-index: 100000; max-height: 872px; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 340px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; left: 79px; } cedo { position: relative;display: none; } cedo hd>dv,cedo bd>dv { display: flex ; justify-content: space-between; } cedo hd input,cedo bd input { width: 20px; height: 20px; } cedo>bl>hd{ border-bottom: solid 1px var(--aa-t);padding: 18px 29px;} cedo bd>dv { padding: 8px 22px; } cedo bd i { transform: rotate(-90deg); } cedo bd>dv:nth-child(7) { padding-bottom: 12px; align-items: center; } cedo bl>bd { padding: 0px 6px 8px; } cedo bd>dv { padding: 8px 22px; border-radius: 8px; } cedo bd>dv:hover { background: var(--bc); } cdie.ED cedo { display: block; } bedo hd div { display: flex ; white-space: nowrap; padding: 7px; align-items: center; } bedo hd i,bedo bd i{ width: 20px; height: 20px; background: 0; padding: 0; } bedo hd dv:nth-child(2) { display: flex ; justify-content: end; width: 65%; } bedo bd dv:nth-child(1) { justify-content: space-between; display: flex ; border-right: 0;height: unset; } bedo bd div { display: flex ; justify-content: space-between; padding: 10px; } bedo ft div { display: flex ; justify-content: center; background: var(--bc); padding: 10px; border-radius: 8px; color: var(--a); font-weight: 500;align-items: center; } bedo>bl { padding: 9px; } bedo ft i { width: 16px; height: 13px; background: 0; padding: 0; display: flex ; } bedo hd t { font-weight: 500; font-size: 20px; } bedo>bl>ft { border-bottom: solid 1px var(--bor); display: block; padding-bottom: 20px; } bedo bd dv:nth-child(1) i { width: 20px; height: 20px; display: none; } bedo bd dv:hover{ } cdge { display: none; max-width: 902px; padding: 14px 0px; position: fixed; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 3rem; left: 20rem;} cdge>bl>hd { display: block; align-items: center; padding: 0px 10px; } cdge hd>div { display: flex ; justify-content: space-between; min-height: 50px;border-bottom: 1px solid var(--bc-t); } cdge hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cdge h2 { line-height: 1.2; font-size: 1.25rem; } cdge>bl>bd { display: flex ; flex-direction: column;border-bottom: solid 1px var(--bor);} cdge hd blc { display: flex ; background: var(--bc); border-radius: 30px; padding: 6px; width: 867px; margin-top: 1rem; align-items: center; } cdge blc i { background: var(--bg-t); height: 18px; width: 18px; margin: auto; } cdge hd blc input { border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: var(--bg-t); font-weight: 400; } cdge>bl>ft { display: flex ; gap: 1rem; padding: 12px; justify-content: end; } cdge>bl>ft btn { display: flex ; align-items: center; padding: 10px 10px; border-radius: 6px; background-color: var(--a-t); font-size: 13px; font-weight: 600; gap: 6px; color: var(--b); } cdge>bl>ft btn:nth-child(1) {background: unset; color: var(--a-t); } cdge>bl>ft btn:nth-child(1):hover { background: var(--bc); } ceet {max-width: 548px; display: none; position: fixed; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem;} ceet hd { border-bottom: solid 1px var(--bc); margin-block-end: 1rem; justify-content: end; display: flex ; } ceet hd div { display: flex ; gap: 2rem; height: 50px; padding: 1px 10px; align-items: center; } ceet hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} ceet h2 { line-height: 1.2; font-size: 1.25rem; } ceet bd { display: flex ; flex-direction: column; gap: 1rem; padding: 1px 10px; } ceet bd input[type="radio"] { display: none; } ceet bd label { display: block; padding-left: 2rem; position: relative; font-size: 16px; margin-bottom: 12px; } ceet bd label::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 2px solid var(--bor); border-radius: 50%; } ceet bd input:checked + label[for="opt1"]::after{ content: ""; position: absolute; left: 7px; top: 9px; width: 10px; height: 10px; background: var(--a); border-radius: 50%; } ceet bd #emailbox { display: none; margin-top: 10px; } ceet bd input:checked + label[for="opt2"]::after { content: ""; position: absolute; left: 7px; top: 9px; width: 10px; height: 10px; background: var(--a); border-radius: 50%; } ceet bd input:checked + label[for="opt2"] + #emailbox { display: block; } ceet bd select { width: 100%; padding: 10px; font-size: 14px; border: 1px solid var(--bor); border-radius: 8px; margin: 0; } ceet ft { display: block; padding: 12px 16px; border-top: 1px solid var(--bor); text-align: right; } ceet ft btn:nth-child(1) { background: unset; color: var(--a); } ceet ft btn:nth-child(1):hover { background: var(--bc); color: var(--a); } ceet ft btn { background: var(--a); color: var(--b); font-weight: bold; font-size: 14px; padding: 6px 16px; border: none; border-radius: 6px; } ceet ft div { display: flex ; justify-content: end; gap: 16px; align-items: center; } cefg { display: none; max-width: 548px; overflow: hidden; max-height: 600px;padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } cefg hd { display: block; align-items: center; padding: 0px 10px; border-bottom: 1px solid var(--bc-t); } cefg h2 { line-height: 1.2; font-size: 1.25rem;right: 10rem;position: relative;} cefg hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} cefg hd div { display: flex ; justify-content: space-between; min-height: 50px; } cefg bd { display: flex ; flex-direction: column; padding: 0px 8px; padding-top: 8px; gap: 1rem; } cefg blc { display: grid ; grid-template-columns: 35px auto; background: var(--bc); border-radius: 30px; padding: 6px;width: 516px;} cefg blc i { height: 18px; width: 18px; margin: auto; } cefg bd input { border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: unset; font-weight: 400; } cefg ft i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cefg ft { display: grid ; grid-template-columns: auto auto; gap: 1rem; padding: 0px 10px; padding-top: 8px; overflow: scroll; height: 43vh; } cefg ft div { display: flex ; align-items: center; gap: 1rem; border-radius: 10px; padding: 6px 6px; } cefg ft dv { display: flex ; flex-direction: column; } cefg ft span { color: var(--c0-t); } cefg bd d { display: flex ; gap: 1rem; height: 50px;} cefg bd b { color: var(--a); font-weight: 500; border-bottom: solid 3px var(--a);padding: 9px 9px; } cefg bd b:nth-child(2) { color: var(--c0-t); border-bottom: none; } cefg ft div:hover { background: var(--bor); } cefg bd b:hover { background: var(--bc); } seso.FS bfss { display: block; } cefo>bl { background: var(--b); border-radius: 8px; padding: 16px; box-shadow: 0 16px 70px var(--aa-t); position: absolute; z-index: 9999; width: 217px; top: -6em; } cefo bd div{ display: flex ; padding: 4px 14px; border-bottom: 1px solid var(--bc); align-items: center; border: 0;border-radius: 10px;flex-direction: row;} cefo bl div i{ display: inline-block; width: 20px; height: 20px; margin-right: 12px; background: var(--bc); padding: 11px 11px; border-radius: 20px; } cefo bl div:hover { background: var(--bc); } cefo bl t { font-size: 14px; font-weight: bold; } cefo bd >d { display: flex ; gap: 8px; flex-direction: column; } beso.EF cefo { display: block; } cefo { display: none;position: relative; } ceio { display: none; max-width: 334px; padding: 20px; position: absolute; z-index: 100000; max-height: 872px; box-sizing: border-box; background: var(--b); border-radius: 11px; max-width: 372px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; top: 8rem; left: 51rem; right: 0; } ceio ft dv i:nth-child(3) { left: 1rem; background: unset; } ceio bd { display: block; border-bottom:solid 1px var(--bc);} ceio bd dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } ceio bd dv:hover { background: var(--bc); } ceio ft { display: block; } ceio ft dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } ceio ft dv:hover { background: var(--bc); } ceio bd dv::after { content: ''; margin-left: auto; width: 16px; height: 16px; border: 2px solid var(--bor); border-radius: 50%; display: inline-block; position: relative; } ceio bd dv[selected]::after { border: 5px solid var(--a); box-sizing: border-box; margin-left: 52%; height: 20px; width: 20px; } ceio bd dv[selected]::before { content: ''; position: absolute; margin-left: calc(92% - 23px); width: 6px; height: 6px; background: #1877f2; border-radius: 50%; z-index: 1; } ceio bd i svg { height: 20px; width: 20px; } ceio i { height: 26px; width: 26px; background: var(--bc); border-radius: 20px; padding: 6px 6px; } ceio bd dv:nth-child(1) span { color: var(--a); } ceio bd dv:nth-child(1) img {height: 26px; width: 26px; } seso.EI ceio { display: block; } celt { display: block; border: 1px solid var(--bor); border-radius: 15px; overflow: hidden; } celo { display: block; background: var(--b); border-radius: 15px; padding: 20px; border: solid 1px var(--aa-t); box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } celo hd { display: flex ; justify-content: space-between; align-items: center; } celo h2 { font-size: 20px; display: block; padding-bottom: 2px; } celo hd span { color: var(--a); } celn { display: none; padding: 20px; position: absolute; z-index: 100000; max-height: 872px; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 340px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; } celn bl { display: grid ; gap: 1rem; } celn hd { padding: unset; } celn hd input { width: -webkit-fill-available; border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: transparent; font-weight: 400; } celn blc { display: grid ; grid-template-columns: 35px auto; align-self: center; background: var(--bc); border-radius: 30px; padding: 6px; } celn dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; flex-wrap: unset; } celn bd dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; flex-wrap: unset; border-bottom: solid 1px var(--aa-t); border-radius: 0; } celn bd dv::after { content: ''; margin-left: auto; width: 16px; height: 16px; border: 2px solid var(--bor); border-radius: 50%; display: inline-block; position: relative; } celn bd dv[selected]::after { border: 5px solid var(--a); box-sizing: border-box; margin-left: 46%; height: 20px; width: 20px; } celn bd dv[selected]::before { content: ''; position: absolute; margin-left: calc(100% - 54px); margin-top: 0px; width: 6px; height: 6px; background: #1877f2; border-radius: 50%; z-index: 1; } celn ft dv::after { content: ''; margin-left: auto; width: 16px; height: 16px; border: 2px solid var(--bor); border-radius: 50%; display: inline-block; position: relative; } cemr { max-width: 548px; overflow: hidden; max-height: 600px; display: none; padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } cemr hd { display: block; align-items: center; padding: 0px 10px; border-bottom: 1px solid var(--bc-t); } cemr h2 { line-height: 1.2; font-size: 1.25rem; } cemr bd blc { display: grid ; grid-template-columns: 35px auto; align-self: center; background: var(--bc); border-radius: 30px; padding: 6px; width: 516px; margin-top: 1rem; } cemr bd blc i { background: var(--bg-t); height: 18px; width: 18px; margin: auto; } cemr bd blc input { border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: var(--bg-t); font-weight: 400; } cemr hd div { display: flex ; justify-content: space-between; min-height: 50px; } cemr hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} cemr bd { display: flex ; flex-direction: column; overflow: scroll; height: 40vh; } cemr bd ddiv { display: flex ; flex-direction: column; gap: 1rem; padding-right: 12px; padding-left: 12px; padding-top: 12px; } cemr bd d{ padding: 16px 20px; background: var(--b); border-bottom: 1px solid var(--aa-t); position: relative; } cemr bd d input { width: 100%; padding: 12px 16px 12px 40px; border: 1px solid var(--aa-t); border-radius: 8px; font-size: 16px; background: #f8f9fa; outline: none; } cemr bd d input:focus { border-color: #007bff; background: var(--b); } cemr bd input::placeholder { color: #999; } cemr dv btn { display: flex ; align-items: center; gap: 5px; } cemr dv i { height: 50px; width: 50px; display: block; } cemr dv { display: flex ; align-items: center; justify-content: space-between; padding: 0; border-bottom: none; } cemr dv img { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; } cemr dv b {font-size: 17px;} cemr bd dv input{ width: 18px; height: 18px;} cemr ft { padding: 16px 8px; background: var(--b); border-top: 1px solid var(--aa-t); display: flex ; flex-direction: column; gap: 12px; } cemr ft blc { display: block; background: var(--bc); border-radius: 30px; padding: 10px; width: 516px; } cemr ft input { border-radius: 0; outline: none; height: 22px; padding: 0; background: var(--bg-t); } cemr ft bt { background: var(--bc-t); color: var(--bor); border: none; padding: 12px 24px; border-radius: 8px; font-size: 17px; font-weight: 500; text-align: center; display: flex ; align-items: center; } cemr ft bt i { background: var(--bg-t); height: 18px; width: 18px; } cemr ft d { display: flex ; align-items: center; margin: auto; gap: 5px; } @media (max-width: 480px) { cemr { max-width: 100%; border-radius: 0; max-height: 100vh; } cemr hd { padding: 12px 16px; } cemr bd d { padding: 12px 16px; } cemr dv { padding: 10px 16px; } cemr ft { padding: 12px 16px; } } cevm { display: none; max-width: 334px; padding: 20px; position: absolute; z-index: 100000; max-height: 872px; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 340px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; top: 8rem; left: 60rem; right: 0; } cevm i { height: 26px; width: 26px; } cevm bd { display: block; } cevm bd dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } cevm bd dv:hover { background: var(--bc); } seso.EM cevm { display: block; } seso.ET ceet { display: block; } seso.EG cdge { display: block; } cenn hd { display: block; padding: 0px 14px 12px 13px; border-bottom: 1px solid var(--bor); } cenn hd div { display: flex ; justify-content: space-between;} cenn hd h2 { display: flex ; width: 100%; justify-content: center; } cenn bd { display: block; padding: 12px 16px; } cenn bd form { display: grid; } cenn bd input{ margin-top: 4px;width: 20px; } cenn bd div { display: block; } cenn bd strong { font-size: 15px; } cenn hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cenn bd span { font-size: 13px; display: block; opacity: .8; } cenn>bl { display: block; max-width: 548px; padding: 20px 0px; border: solid 1px var(--aa-t); position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } seso.EN cenn { display: block; } cenn { display: none; } cenn bd label:hover { background: var(--bc); } cenn bd label { display: flex ; align-items: flex-start; justify-content: space-between; padding: 6px 10px; border-radius: 8px; } ceoo bl dv { display: flex ; align-items: center; justify-content: space-between; padding: 10px; border-radius: 10px 10px 2px 2px; } ceoo dv d { display: flex ; gap: 7px; } ceoo bl dv:hover { background: var(--bc); } ceoo>bl { padding: 0px 15px; margin-block: 11px; display: flex ; flex-direction: column; gap: 1px; } ceoo hr { margin: 0; display: block; } ceoo ft input { width: 40px; height: 25px; background: var(--aa); border-radius: 20px; appearance: none; cursor: pointer; position: relative; margin-left: auto; transition: background 0.3s ease;display: block; } ceoo input:checked { background:var(--aa-t); } ceoo input::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--b1); top: 3px; left: 6px; } ceoo input:checked::before { transform: translateX(15px); } ceoo ft div:hover { background: var(--bc); } ceoo ft .list {display: none ; padding: 12px 10px; border-radius: 8px; padding-bottom: 17px; } ceoo.SL .list { display: block; } cflt { display: none; } ceoo.List cflt { display: block; } bepo hd div { display: flex ; justify-content: space-between; padding: 0px 19px; } bepo bd i { width: 20px; height: 20px; } bepo hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } bepo>bl { display: block; max-width: 548px; overflow: hidden; max-height: 600px; padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } bepo bd div { gap: 16px; display: flex ;} bepo bd { padding: 20px; display: flex ; flex-direction: column; gap: 6px; } bepo hd h2 { display: flex ; width: 100%; justify-content: center; } bepo>bl>hd { border-bottom: solid 1px var(--bc); padding-bottom: 8px; } bepo bd span { opacity: .5; font-weight: 400; } bepo bd b { font-weight: 500; } bepo dv:nth-child(1) svg { fill: var(--bc); } bepo bd dv:hover { background: var(--bc); } bepo dv img {opacity: .2; } bepo bd dv { display: flex ; width: 50%; gap: 5px; font-size: 18px; padding: 7px 8px; align-items: center; border-radius: 7px; } bepo { display: none; } seso.Post bepo { display: block; } cepw { display: block;border-radius: 8px; overflow: hidden; border-bottom: solid 2px var(--aa-t); } cepw bl { display: flex; align-items: flex-start; padding: 10px; gap: 10px; } cepw hd { display: block; } cepw hd i img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; } cepw bd { flex: 1; display: block; } cepw bd dv { display: flex; flex-direction: column; gap: 4px; } cepw bd dv span { font-size: 13px; color: var(--c0); } cepw bd dv b { font-size: 15px;} cepw bd dv p { font-size: 13px; color: var(--c0); margin: 0; } cepw ft { display: flex; align-items: center; gap: 8px;} cepw ft btn { display: flex ; align-items: center; padding: 10px 10px; border-radius: 6px; background-color: var(--bc); font-size: 13px; font-weight: 600; gap: 6px; } cepw ft btn i img { width: 20px; height: 20px; } cepw ft btn:nth-child(1) { background: var(--a-t); } cepw ft btn:nth-child(1) span { color: var(--a); } cepw ft span { font-size: 15px; } celt cepw:nth-child(2) { border-bottom: 0; } cepw:hover { background: var(--bc); } seso.SP cshp { display: block; } @media(max-width:999px){ cepw bl { display: block;} } cert hd { display: block; border-bottom: 1px solid var(--bor);padding-bottom: 5px; } cert hd div { display: flex ; align-items: center; gap: 10px; font-size: 16px; font-weight: bold; padding: 0px 5px; } cert bd { display: block; padding: 12px 16px; } cert bd strong { font-size: 21px; } cert bd span { font-size: 17px; color: var(--c0); } cert bd ul { list-style: none; padding: 0; margin: 0; } cert bd li { display: flex; justify-content: space-between; align-items: center; padding: 7px; font-size: 14px; border-radius: 8px; } cert bd li:last-child { border-bottom: none; } cert hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cert hd h2 { display: flex ; width: 100%; justify-content: center; } cert bd i { height: 35px; width: 35px; } cert bd b { font-size: 17px; font-weight: 500; } cert>bl { display: block; max-width: 548px; padding: 20px 0px; border: solid 1px var(--aa-t); position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } cert bd li:hover { background: var(--bg); } cert { display: none; } seso.ERT cert { display: block; } ceve { display: none; max-width: 548px; overflow: hidden; max-height: 600px; padding: 20px 0px; border: solid 1px var(--aa-t); margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 600px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } ceve h2 { line-height: 1.2; font-size: 1.25rem;right: 10rem;position: relative;} ceve hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} ceve hd div { display: flex ; justify-content: space-between; min-height: 50px; padding: 1px 10px;border-bottom: solid 1px var(--bor);} ceve hd d { display: flex ; gap: 1rem; height: 50px;padding: 1px 10px;} ceve hd b { color: var(--a); font-weight: 500; border-bottom: solid 3px var(--a);padding: 9px 9px; } ceve hd b:nth-child(2) { color: var(--c0-t); border-bottom: none; } ceve bd { display: flex ; flex-direction: column; padding: 4px 12px; } ceve bd btn { display: flex ; align-items: center; padding: 10px 10px; border-radius: 14px; border: solid 1px var(--bc); font-size: 13px; font-weight: 600; gap: 6px; width: 254px; } ceve bd dv { display: flex ; justify-content: space-between; gap: 1%; } ceve bd btn i { height: 20px; width: 20px; background: unset; border-radius: 28px; padding: 6px 6px; } ceve bd btn:hover { border: solid 1px var(--bor); } ceve bd p { font-size: .9375rem; } ceve bd input { border: none; outline: none; font-size: 15px; background: none; width: 100%; padding: 0;} ceve ft { display: flex ; gap: 1rem; padding: 0px 10px; padding-top: 8px; } ceve ft btn { display: flex ; justify-content: center; background: var(--bc); border-radius: 10px; padding: 11px 6px; width: 516px; margin-top: 1rem; opacity: .6; } cesr bl>hd { display: flex ; justify-content: space-between; padding: 6px 16px;border-radius: 9px; } cesr hd img { border-radius: 20px; } cesr div>i { width: 44px; height: 44px; } cesr hd>div { display: flex ; align-items: center; gap: 6px; } cesr dv>h3 {font-weight: 500;font-size: 17px;} cesr hd>i { background: 0; } cesr>bl { padding: 7px; } cesr bl hd:hover {background: var(--bg-t);} cesr bd>div { position: relative; margin: 20px; } cesr div input { width: 100%; padding: 15px 6px 10px 10px; font-size: 16px; border:1px solid var(--bor); border-radius: 10px; transition: border-color 0.3s; display: block; height: 30px; } cesr bd label { position: absolute; left: 10px; top: 11px; color: var(--c0); transition: 0.2s ease all; font-size: 18px; padding: 0 4px; } cesr bd span { position: absolute; right: 7px; bottom: 0; font-size: 12px; color: var(--c0); top: 8px; } cesr input[type="text"]:focus + label, input[type="text"]:not(:placeholder-shown) + label { top: 4px; font-size: 12px; color: var(--a); } cesr ft > div { display: flex; align-items: center; border: 1px solid var(--bor); padding: 10px 14px; border-radius: 15px; min-width: 145px; position: relative; } cesr ft > div:focus-within { border-color:var(--a);} cesr ft svg { width: 20px; height: 20px; margin-right: 8px; } cesr ft > div > dv { display: flex; flex-direction: column; } cesr ft label { font-size: 12px; color:var(--c0); margin-bottom: 2px; } cesr ft input { border: none; outline: none; font-size: 15px; background: none; width: 100%;padding: 0;height: 20px; } cesr ft input[type="time"]::-webkit-calendar-picker-indicator, cesr ft input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; left: 0; width: 100%; height: 100%; cursor: pointer; } cesr ft {display: flex;gap: 12px;margin: 20px;} cest { max-width: 548px; display: none;padding: 20px 0px; position: fixed; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; right: 0; top: 13rem; left: 33rem; } cest hd { border-bottom: solid 1px var(--bc); margin-block-end: 1rem; justify-content: end; display: flex ;} cest hd div {display: flex ; gap: 2rem; height: 50px; padding: 1px 10px; align-items: center; } cest h2 { line-height: 1.2; font-size: 1.25rem; } cest bd { display: block; border-bottom:solid 1px var(--bc);} cest bd dv { display: flex ; gap: 1rem; align-items: center; border-radius: 5px;padding: 15px; } cest bd dv:hover { background: var(--bc); } cest ft { display: block;} cest ft dv { display: flex ; gap: 1rem; align-items: center;padding: 8px 8px 8px 8px; border-radius: 5px; justify-content: end;} cest bd dv::after { content: ''; margin-left: auto; width: 16px; height: 16px; border: 2px solid var(--bor); border-radius: 50%; display: inline-block; position: relative; } cest bd dv[selected]::after { border: 5px solid var(--a); box-sizing: border-box; margin-left: 38%; height: 20px; width: 20px; } cest bd dv[selected]::before { content: ''; position: absolute; margin-left: calc(96% - 24px); width: 6px; height: 6px; background: var(--a); border-radius: 50%; z-index: 1; } cest hd i { height: 27px; width: 27px; background: var(--bc); border-radius: 28px; padding: 6px 6px;} cest bd i svg { height: 33px; width: 33px; } cest hd i svg { height: 20px; width: 20px; } cest bd i { height: 44px; width: 44px; background: var(--bc); border-radius: 28px; padding: 6px 6px; } cest bd dv:nth-child(1) img {height: 26px; width: 26px; } cest bd dv d { display: flex ; flex-direction: column; width: 210px; } cest bd img { filter: invert(1); height: 33px; width: 33px; } cest ft btn { display: flex ; align-items: center; padding: 10px 10px; border-radius: 6px; background-color: var(--a); font-size: 13px; font-weight: 600; gap: 6px; width: 6rem; color: var(--b); justify-content: center; } cest ft dv btn:nth-child(1) { background: unset; color: var(--a); width: 3rem; } cest ft dv btn:nth-child(1):hover { background: var(--bc);} seso.ES cest { display: block; } beso hd a { color: var(--a); font-weight: 500; margin-bottom: 9px; display: block; } beso>bl { padding: 1px 13px; } beso bd d { display: flex ; align-items: center;gap: 8px; } beso hd a:hover { text-decoration: underline; } beso bd >dv { display: flex ; justify-content: space-between; padding: 17px; margin-bottom: 10px; border: solid 1px var(--bor); border-radius: 18px; } beso bd>div { position: relative;} beso div input { width: 90%; font-size: 16px; transition: border-color 0.3s; display: block; height: 50px; padding: 15px 29px; margin-bottom: 10px; border: solid 1px var(--bor); border-radius: 18px; } beso bd label { position: absolute; left: 10px; top: 11px; transition: 0.2s ease all; font-size: 18px; padding: 0 4px; } beso input[type="text"]:focus + label, input[type="text"]:not(:placeholder-shown) + label { top: 4px; font-size: 12px; color: var(--a); } cesg { display: block; padding: 15px 11px; margin-top: 1rem; position: absolute; z-index: 100000; box-sizing: border-box; width: 316px; margin-block: 2rem; left: 17rem; border-right: solid 1px var(--bor); border-top: solid 1px var(--bor);height:679px; } cesg hd { display: block; align-items: center; padding: 0px 10px; } cesg h2 { line-height: 1.2; font-size: 1.0625rem; } cesg bd { display: flex ; flex-direction: column; margin-top: 2rem;} cesg bd span { display: flex ; justify-content: center; color: var(--a); font-weight: 500; } cesg bd ddiv { display: flex ; flex-direction: column; gap: 1rem; padding-right: 12px; padding-left: 12px; padding-top: 12px; } cesg bd d{ padding: 16px 20px; background: var(--b); border-bottom: 1px solid var(--aa-t); position: relative; } cesg bd d input { width: 100%; padding: 12px 16px 12px 40px; border: 1px solid var(--aa-t); border-radius: 8px; font-size: 16px; background: #f8f9fa; outline: none; } cesg bd d input:focus { border-color: #007bff; background: var(--b); } cesg bd input::placeholder { color: #999; } cesg dv btn { display: flex ; align-items: center; gap: 5px; } cesg dv i { height: 50px; width: 50px; display: block; } cesg dv { display: flex ; align-items: center; justify-content: space-between; padding: 3px 7px; border-bottom: none; border-radius: 10px; } cesg dv:hover { background: var(--bc); } cesg dv img { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; } cesg dv b {font-size: 15px;} cesg bd dv input{ width: 18px; height: 18px;} @media (max-width: 480px) { cesg { max-width: 100%; border-radius: 0; max-height: 100vh; } cesg hd { padding: 12px 16px; } cesg bd d { padding: 12px 16px; } cesg dv { padding: 10px 16px; } } beao { display: block; padding: 20px; position: absolute; z-index: 100000; box-sizing: border-box; background: var(--b); border-radius: 11px; width: 372px; box-shadow: 0 16px 70px var(--aa-t); margin-block: 19px; top: 14rem; left: 0rem; } beao ft dv i:nth-child(3) { left: 1rem; background: unset; } beao bd { display: block; border-bottom:solid 1px var(--bc);} beao bd dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } beao bd dv:hover { background: var(--bc); } beao ft { display: block; } beao ft dv { display: flex ; gap: 1rem; align-items: center; padding-top: 5px; padding-bottom: 5px; border-radius: 5px; } beao ft dv:hover { background: var(--bc); } beao bd dv::after { content: ''; margin-left: auto; width: 16px; height: 16px; border: 2px solid var(--bor); border-radius: 50%; display: inline-block; position: relative; } beao bd dv[selected]::after { border: 5px solid var(--a); box-sizing: border-box; margin-left: 52%; height: 20px; width: 20px; } beao bd dv[selected]::before { content: ''; position: absolute; margin-left: calc(92% - 23px); width: 6px; height: 6px; background: #1877f2; border-radius: 50%; z-index: 1; } beao bd i svg { height: 20px; width: 20px; } beao i { height: 26px; width: 26px; background: var(--bc); border-radius: 20px; padding: 6px 6px; } beao bd dv:nth-child(1) span { color: var(--a); } beao bd dv:nth-child(1) img {height: 26px; width: 26px; } beio { display: block; padding: 17px; position: absolute; box-sizing: border-box; width: 316px; margin-block: 2rem; left: 65%; border-top: solid 1px var(--bor); height: 680px; background: var(--bc); } beio dv { display: flex ; align-items: baseline; justify-content: space-between; padding: 3px 7px; border-bottom: none; border-radius: 10px; margin-top: 1rem;} beio dv i { height: 30px; width: 30px; display: block; } beio dv btn { display: flex ; align-items: center; gap: 5px; } beio dv img { border-radius: 20px; object-fit: cover; } beio dv i:nth-child(2) { height: 20px; width: 20px; } beio span { padding-left: 3%; font-size: 14px;}cemu>bl { display: block; background: var(--b); padding: 15px; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); overflow-y: auto; } cemu hd { display: flex; align-items: center; justify-content: space-between; font-size: 22px; font-weight: bold; padding-bottom: 10px; } cemu hd svg { width: 20px; height: 20px; cursor: pointer; } cemu bd input { width: -webkit-fill-available; border-radius: 0; outline: none; height: 22px; padding: 0; margin: 0; background: transparent; font-weight: 400; } cemu svg { width: 24px; height: 24px; } cemu i { width: 33px; height: 33px; cursor: pointer; background: var(--bc); border-radius: 55%; } cemu aa { display: grid ; align-items: center; padding: 12px; text-decoration: none; color: var(--c); font-size: 16px; border-radius: 8px; transition: background 0.3s; grid-template-columns: 40px auto; font-weight: 500; gap: 10px;} cemu bd>a,cemu ft>a,cemu bd>d{ display: grid ; align-items: center; padding: 12px; text-decoration: none; color: var(--c); font-size: 16px; border-radius: 8px; transition: background 0.3s; grid-template-columns: 40px auto; font-weight: 500; gap: 10px; } cemu a:hover,cemu d:hover { background: var(--bc); } cemu bd .create { background: var(--a); justify-content: center; font-weight: 500; margin: 11px 0; color: var(--b1); padding: 4px 20px; gap: unset; } cemu bd p { font-size: 14px; color: var(--a); margin-top: 15px; } cemu ft h3 { font-size: 18px; margin-bottom: 10px; } cemu blc { display: grid ; grid-template-columns: 35px auto; align-self: center; background: var(--bc); border-radius: 30px; padding: 6px; } cemu blc i { background: transparent; height: 18px; width: 18px; margin: auto; } cemu bd .create i { background: transparent; filter: invert(1);} cemu a.Location { display: block; } @media only screen and (max-width: 999px) { cemu { display: none; } mp.fill cemu { display: block; } cemu bl { box-shadow: unset; margin: 0; } } beoo bl { background: var(--b); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); display: block; align-items: center; padding: 20px; border-radius: 10px; width: 96%; margin: 20px auto; } beoo hd { font-size: 18px; margin-bottom: 15px; display: block; } beoo bd { display: grid ; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; } beoo blc { margin: 5px 0; display: grid;border-radius: 0.5rem; padding: 1.5rem; border: solid 1px var(--bc);background: var(--bc); } beoo blc img { width: 18px; vertical-align: middle; } beoo t { font-size: 19px; font-weight: 600; margin: 0; } beoo bl hd { display: flex ; justify-content: space-between;align-items: center; } beoo blc strong { font-size: 2rem; font-weight: 700; } beoo blc h4 { padding: 21px 0; font-size: 2rem; } @media screen and (max-width: 999px) { beoo bl { margin: 11px; width: auto; display: block; } beoo hd, beoo ft { max-width: max-content; } beoo bl { margin: 11px; width: auto; } beoo bl hd { font-size: 0.88em; } beoo bl hd p { margin: 0; font-size: 0.77em; } } /* Component : Extension */ cexs { display: block; padding: 22px; background: var(--bt); max-width: 1300px; margin: 11px auto; border-radius: 22px; } cexs hd>p { margin: 0 11px; margin-bottom: 11px; } cexo { display: grid ; max-width: 500px; margin: 7px; background: var(--bt); border-radius: 11px; box-shadow: var(--bt-bx); overflow: hidden;padding: 11px; min-height: 36vh; } cexs exs { display: grid ; grid-template-columns: 33.3% 33.3% 33.3%; } cexo hd { padding: 15px 11px 15px 15px; } cexo hd>i { border-radius: 11px; overflow: hidden; width: 122px; height: 122px; } cexo bd { display: flex ; justify-content: space-between; padding: 11px 15px 15px 0; } cexo bd name { font-size: 0.88em; line-height: 1.44em; overflow: hidden; max-height: 3.4rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; } cexo left>p { font-size: 0.77em; line-height: 1.44em; overflow: hidden; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin: 4px 0; } cexo b { font-weight: 500; } cexo left>p { font-size: 0.77em; line-height: 1.44em; overflow: hidden; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; margin: 7px 0; } cexo left>t { font-style: oblique; font-size: 0.88em; } cexo right btns>btn { display: block; font-size: 0.88em; padding: 5px 22px; border: 2px solid; color: var(--c1); border-radius: 7px; margin: 2px 0; white-space: nowrap; text-align: center; width: max-content; justify-self: end; } cexo right btns>btn:nth-child(2) { border: none; padding: 5px 22px; text-align: end; padding-right: 0; } cexo ft { display: flex ; justify-content: space-between; padding: 0 11px; background: var(--aat); grid-column-start: 1; grid-column-end: 3; font-size: 0.88em; border-top: 1px solid var(--bc); transition: 77ms; height: 0; } cexo cc>rts { display: flex ; align-items: center; padding: 7px 0; } cexo rts>rt { display: block; height: 17px; width: 17px; place-content: center; justify-items: center; margin-left: 4px; } cexo rt>i { height: auto; } cexo ft>cc:nth-child(2) { text-align: end; display: flex ; flex-direction: column; align-items: end; justify-content: space-between; } cexo cc>d>i { width: 22px; height: 22px; display: inline-flex ; margin: 2px; background-size: 88%; background-repeat: no-repeat; background-position: center; } cexo ft c { font-size: 0.88em; white-space: nowrap; } cexo cc>d>t { font-size: 0.93em; } .expand cexo>ft { height: fit-content; padding: 11px 11px; } cexo btn[active] { color: var(--at); } @media (max-width : 999px) { cexs exs { display: block; } cexs { padding: 11px; margin: 7px; } cexo ft { display: block; } cexo { margin: 7px 0; } cexo ft>cc:nth-child(2) { text-align: unset; align-items: unset; } cexo ft>cc:nth-child(2)>d:nth-child(1) { display: flex ; align-items: center; justify-content: space-between; margin: 7px 0; } cexs hd>p { font-size: 0.77em; } } /* Component : Extension_Filter */ cfexo { display: flex ; padding: 11px 22px; background: var(--bt); border-radius: 11px; margin: 11px auto; max-width: 1300px; justify-content: space-between; } cfexo mb { display: flex ; align-items: center; } cfexo mb>a { display: block; padding: 11px 22px; text-align: center; } cfexo mb { display: grid ; align-items: center; grid-template-columns: 25% 20% 32% 23%; position: relative; } cfexo mb>d { position: absolute; background: var(--c1); height: 4px; width: 25%; display: block; bottom: 0px; transition: 333ms; } cfexo srch { display: flex ; align-items: center; } cfexo srch>sl { height: auto; margin: 4px; padding: 4px; width: fit-content; border-radius: 7px; } cfexo srch>sl>select { background: transparent; border: none; width: calc(100% - 11px); transition: 95ms; padding: 7px; } cfexo srch>sl:nth-child(2) { min-width: 333px; height: 33px; } cfexo srch>sl>input { height: auto; padding: 8px; width: 95%; font-weight: 500; font-size: 0.88em; position: absolute; inset: 0; border-radius: 7px; } cfexo srch>sl>input:focus { border-radius: 7px; } cfexo mb>a.this:nth-child(1) ~ d { left: 0%; } cfexo mb>a.this:nth-child(2) ~ d { left: 25%; width: 20%; } cfexo mb>a.this:nth-child(3) ~ d { left: 46%; width: 32%; } cfexo mb>a.this:nth-child(4) ~ d { left: 77%; width: 23%; } @media (max-width : 999px) { cfexo { flex-direction: column-reverse; padding: 11px; } cfexo mb { overflow: auto; } cfexo srch>sl:nth-child(2) { min-width: 70%; } } cfqs #flip { text-align: center; } cfqs div#flip trc { display: grid; grid-template-columns: 111px auto 40px; align-items: center; font-size: 20px; } cfqs carousel { z-index: 8; position: relative; display: block; } cfqs .dds { height: 60vh; } cfqs post { height: 100%; } cfqs post { display: grid; background: var(--bc); grid-template-rows: 50px auto 53px; border-radius: 11px; max-height: 555px; overflow: hidden; } cfqs post >bd { background: var(--b); border-radius: 11px; margin: 4px; } cfqs post hd d { display: grid; grid-template-columns: 42px auto; align-items: center; padding: 8px; } cfqs post hd d bd { display: Block ;text-align: justify; font-size: 0.88em; white-space: nowrap; } cfqs name { font-weight: 600; display: block; } cfqs post ft { display: grid; grid-template-columns: auto auto; } cfqs post>bd>i { max-height: 495px; width: 100%; overflow: hidden; border-radius: 11px; height: 100%; } cfqs post>bd>i>img { height: 100%; width: 100%; object-fit: cover; } cfqs post ft { display: grid; grid-template-columns: auto auto; } cfqs ft btn { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: var(--b-t); border-radius: 11px; margin: 4px; align-items: center; } cfqs btn { cursor: pointer; }