/* File : 0 */ /* Started App Theme CSS : App:School - Branch:practice.aliens.school */ :root { /* ✨ Primary & Accent Colors */ ---ba:#e8f0fe; ---p1p:#f1f9fe; --or:#ef8f2f; --yy:hsl(34.05deg 60.08% 40.38%); --a5:#ffdead69; --a4:rgb(240 244 249); --p4:#0b57d0; --p3:#4285f4; --p2:#f3e8fd; --p1:#129eaf; --pp:#66bcce45 --ad:#e8f0fe; --ab:#132e54; --a: rgb(111, 43, 255); --aat: rgb(241, 234, 255); --a1: rgb(247, 244, 250); --a2: rgb(208, 186, 255); --a3: rgb(254, 82, 165); --rm: rgb(202, 194, 181); --sm: rgb(167, 221, 201); ---ss: rgb(165, 234, 123); ---sy: rgb(186, 206, 248); --rd: rgb(216, 50, 50); ---gn: rgb(0, 173, 51); --c: rgb(43, 15, 73); --c0: rgb(89, 65, 115); --c1: rgb(0, 0, 136); /* ✨ Transparent / Neutral Colors */ --0: rgba(0, 0, 0, 0%); --b: rgb(255, 255, 255); --b1: rgb(0, 0, 0); --bc: rgba(18, 52, 86, 10%); --bg: rgba(244, 244, 244, 44%); --b-t: rgba(233, 244, 255, 44%); --b-t22: rgba(255, 255, 255, 22%); --b-t44: rgba(255, 255, 255, 44%); --b-t77: rgba(255, 255, 255, 77%); --b-t88: rgba(255, 255, 255, 88%); --b-t95: rgb(255, 255, 255); --bor: rgba(63, 63, 63, 30%); --bb: rgb(248, 208, 185); ---bc: rgb(234, 231, 238); /* ✨ Gradients */ --lgb: linear-gradient(-45deg, rgb(35, 166, 213), rgb(35, 213, 171)); --am: linear-gradient(136.99deg, rgb(255, 250, 241), rgb(255, 239, 210)); --lg: linear-gradient(90deg, rgb(15, 183, 255), rgb(36, 125, 255), rgb(0, 85, 212)); --lg1: linear-gradient(90deg, rgba(0, 255, 255, 0.05), rgba(0, 255, 255, 0.10), rgba(0, 255, 255, 0.05)); --bcc: linear-gradient(310deg, rgba(125, 129, 251, 0.3) 0.01%, rgba(244, 197, 204, 0.3)); --aaa: linear-gradient(333deg, rgb(111, 43, 255), rgb(111, 43, 255)); --lgaa: linear-gradient(333deg, rgb(111, 43, 255), rgb(111, 43, 255)); --hover: linear-gradient(90deg, rgba(0,0,0,0.01), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.04), rgba(0,0,0,0.01)); --tb: linear-gradient(180deg, rgb(230, 230, 230), transparent, transparent); --bccc: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.41)); /* ✨ Button Colors */ --btn1: rgb(131, 66, 255); --btn2: rgb(145, 75, 255); --btn3: rgb(188, 150, 255); --btn4: rgb(254, 82, 165); --btn5: rgb(255, 115, 180); --btn6: rgb(255, 163, 210); --btn7: rgb(255, 255, 255); --btn8: rgb(244, 244, 244); --btn9: rgb(230, 230, 230); --btn10: rgb(200, 200, 200); --btn11: rgb(150, 150, 150); /* ✨ Box Shadows */ --bs: 0px 0px 1px 0px rgba(0, 0, 0, 22%); --bs1: 0px 5px 10px rgba(0, 0, 0, 0.1); --bs2: 1px solid #EAE7EE; --bss: 0 50px 100px -20px rgba(50,50,93,0.25), 0 30px 60px -30px rgba(0,0,0,0.3), inset 0 -2px 6px 0 rgba(10,37,64,0.35); --bs-b: inset 0 -7px 11px 0px rgba(0,0,0,0.02), inset 0 4px 7px 0px rgba(0,0,0,0.02), 0 2px 3px rgba(0,0,0,0.04), 0 -1px 2px rgba(0,0,0,0.04), 1px 0 2px rgba(0,0,0,0.04), -1px 0 2px rgba(0,0,0,0.04); --bs-bb: inset 0 -15px 22px 0px rgba(0,0,0,0.07), inset 0 1px 4px 0px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.11); --bs-bs: inset 0 -7px 11px 0px rgba(0,0,0,0.02), inset 0 1px 4px 0px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.02); --bs-bt: inset 0 0px 4px 0px rgba(0,0,0,0.11), 0 7px 11px rgba(0,0,0,0.11); --bs-bl: inset 0 -4px 7px 0px rgba(0,0,0,0.11), inset 0 1px 7px 0px rgba(0,0,0,0.11), 0 7px 11px rgba(0,0,0,0.11); --bs-br: 0px 4px 7px 0px rgb(215, 215, 215), inset 0px 0px 56px 0px rgb(222, 228, 240); --bxs: 0px -1px 1px rgba(115, 56, 242, 0.8), 0px 0px 0px 1px rgb(111, 44, 255), inset 0px 4px 12px rgba(163, 123, 247, 0.3), inset 0px 1px 0px rgba(150, 105, 245, 0.6); --bxs1: 0px 1px 2px rgba(9, 25, 72, 0.13); --m: 22px; } /** Layout */ /*# Layout */ /*# Base Elements */ /*# Base Elements */ html,body,aliens,dapp,app,.app{display:block;height:100%;width:100%;overflow:hidden} d { display: block; } ib { display: inline-block; } 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 */ } html{position:fixed;height:100%;width:100%;overflow:hidden;color:#eff;font-family:system-ui} body{margin:0;overflow:hidden;background:var(--b);} .splash console{opacity:0} .account content { margin-top: calc(100vh - 22px); } .account menubar { bottom: -55px; } html{color:var(--c);font-family: system-ui;} desktop { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } 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: transparent; font-weight: bold; } select:focus-visible { outline: unset; } label{opacity:0.77} sl, .sl { display: block; border-radius: 11px; margin-bottom: 11px; position: relative; height: 60px; overflow: hidden; background: var(--bc); width: 100%; } sl label { position: absolute; pointer-events: none; left: 20px; top: 18px; transition: 0.2s ease all; font-size: 0.88em;font-weight: bold;} sl input:focus { box-shadow: inset 0 0 0 2px var(--c); border-radius: 11px; } sl input:focus ~ label, sl input:not(:focus):valid ~ label, .edt label { top: 2px; bottom: 10px; left: 11px; font-size: 11px; opacity: 1; font-weight: bold; margin-left: 11px; letter-spacing: 0;opacity:0.77 } sl input { font-size: 14px; width: calc(100% - 44px); margin: 0; background: transparent; border: unset; box-shadow: unset; } sl error { font-size: 0.66em; color: red; display: block; margin-top: 2px; } .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); } svg{fill:none;} 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 !important;} trcs>trc p { margin: 0; } bg { display: block; position: absolute; left: 271px; right: 0px; 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; } 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; } 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%; } screen header { max-width: 100%; margin: 15px 11px 19px;} ::-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); } } @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap'); rvm { left: 0; right: 0; border: 0; top: 0; display: grid; height: 100%; width: 100%; z-index: 9999; height: 0; } /* Gagan student */ @media only screen and (max-width: 1339px) { .dropdown.js-dropdown.drop_js { width: 183px; } .dropdown__head.js-dropdown-head {width: max-content ;margin: 0px;} .sorting__dropdowns { margin: 0px -70px; } } .sorting__line .sorting__search { margin-right: 8px; } .sorting__dropdowns.home { display: flex ; margin: 0px -75px; } .sorting.mobile-show { display: flex ; } .products.products_statement { padding: 79px 0px 0px 0px; } @media only screen and (max-width: 767px) { .sorting__row { display: grid ; } .sorting__col { width: auto; } .sorting__line { display: none; } .sorting__dropdowns { display: grid ; grid-template-columns: 50% 50%; } .dropdown__head.js-dropdown-head {width: 88%; margin: 0px -10px;} .sorting__dropdowns { margin: 2px -22px; } .dropdown.js-dropdown { width: 168px; margin: 0px 0px 0px 24px; } .products__table {padding: 30px 0px 0px 0px;} } @media only screen and (max-width: 999px) { saiw main {margin-bottom:88px;} cawc{max-width:100%;} calwt { overflow-x: scroll; } } csps { gap: 7px; display: grid ; grid-template-columns: 56% 45%; } content{z-index:3} 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:0;} bg>img,bg>photo,bg>.img-box{ max-width: 100%; max-height: 100%;position: absolute;opacity:0} bg.img{ background-image:var(--bg);} bg.color{ background-color:var(--b); } bg.blur{ backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); } bg.bgc{background: linear-gradient(180deg, var(--b), var(--bt), transparent, transparent, transparent, transparent, transparent, transparent, #fff1, var(--b))} bg.bgh { background: linear-gradient(180deg, var(--bt)); } /*#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%; } 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: 0; } .content { margin-top: 0px; } } deposits tabcard { display: grid ; grid-template-columns: 50% 50%; margin: 0; } deposits tabcard>aa>a>hd { width: auto; display: flex; justify-content: center; } deposits tabcard>aa>a>hd>i { height: 55px; width: 55px; padding: 6px; } deposits tabcard>aa { text-align: center; background:rgb(231 227 255); display: grid; border-radius: 7px; align-items: center; font-size: 13px; margin: 4px; font-family: sans-serif; position: relative; padding: 8px; } deposits tabcard>aa>i { height: 44px; width: 44px; padding: 4px; top: 0; display: flex; flex-direction: column; background: url(/0/img/0Gift.png); background-size: 100%; background-repeat: no-repeat; color: var(--c); right: 0; position: absolute; z-index: 99; } deposits tabcard>aa>hd { padding: 0; width: auto; align-items: center; display: grid; } deposits tabcard>aa>hd>i { height: 40px; width: auto; padding: 6px; margin: auto; } deposits tabcard>aa.this { background: var(--lg-b); color: var(--c); } deposits .blan>hd i{ display: flex; height: 20px; width: 20px; } deposits .blan>hd{ display: flex; gap: 4px; color: var(--b); align-items: center; margin-bottom: 11px; } bl.blan { background: #6c5dd3; background-size: 100%; border-radius: 11px; background-repeat: no-repeat; margin: 3px; padding: 22px; } deposits h1>balance { color: var(--b); font-size: 0.8em; font-family: "Unbounded", sans-serif; display: flex ; align-items: center; margin-top: 15px; } deposits balance>i.btn { display: flex ; height: 25px; width: 50px; } @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: 333px; right: 0; top: 0; bottom: 0; } .content{max-width:100%;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);} sidebar>* { padding: 14px; } sats main { width: 100%; max-width: 100%; margin-bottom: 20px;} aprove.aprove { background: #000; padding: 44px 0; } aprove exit{display:none} a.this:hover bt { border-color: transparent; } @media screen and (max-width: 999px) { .cha_logo{display:none;} } } @media only screen and (max-width: 999px) { bg.hd { background: linear-gradient(180deg, var(--b), var(--bt), var(--0)); backdrop-filter: blur(44px); -webkit-backdrop-filter: blur(44px); } console { height: calc(100% - 0px);margin-top: 0px; } nav m a { height: 50px;width: 50px;} nav m a.this { height: 55px;width: 55px;} content{top:0px} extra .extra { bottom: 55px; top: 88px; } header{padding:0} main>* { margin: 0; } sidebar>*{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;} } /* 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 .wekda{display: flex;gap:11px;align-items: center;} 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 bd.onder bl { position: relative; margin: 0px 5px; max-height: 130px; overflow: hidden; border-radius: 11px; margin-bottom: 5px; box-shadow: var(--bs-b); height: 130px; } smso bd.onder hd{position:absolute;height:calc(100% - 22px);width:calc(100% - 22px);z-index:99;top:0;display:grid;padding:11px;} smso .me_mute{display: grid; justify-content: end; height: fit-content;} smso .me_mute i svg{width: 22px; margin: auto;fill: var(--b);} 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 .zayn{grid-template-columns:0px auto;padding:0;margin:0;white-space:nowrap;font-size:10px;width:auto;border-radius:5px;text-align: center;} smso .me_mute i { height: 22px; width: 22px; border-radius: 5px; } 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 bd { 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*/ cmys { display: grid; grid-template-rows: 51px auto; align-items: center; padding: 11px; border-radius: 22px; } cmys trc { display: grid; grid-template-columns: unset; align-items: center; border-radius: 15px; background: var(--b-t); padding: 22px; max-width: 100%; position: relative; margin: 7px 0; width: auto; } cmys trc> hd i { background: var(--bc); width: 45px; height: 45px; border-radius: 44px; } cmys trc> hd i:after{content:'';position:absolute;background:#4dae53;height:10px;width:10px;top:10%;right:5%;border-radius:11px;border:solid 1px var(--b-t);} cmys trc a { position: absolute; height: 100%; } cmys trc> hd i img {border-radius: 44px;object-fit: unset;} cmys> bd { display: grid; align-items: center;} cmys name { font-weight: 600; } cmys trc time { font-size: 11px; color: var(--c); } cmys trc> bd{ display: flex;flex-direction: unset;gap:11px; justify-content: unset; } cmys h7 { display: grid; grid-template-columns: 33px auto; align-items: center; } cmys date { display: grid; align-items: center; position: relative; grid-template-columns: auto auto; height: 100%; padding: 0 11px; background: var(--b-t77); justify-content: start; gap: 11px; border-radius: 11px; box-shadow: var(--bs); } cmys date p { margin: 0; } cmys trcs>trc name { display: unset; } cmys trc>hd>bd { overflow: hidden; text-overflow: ellipsis; width: 100%; font-size: 0.88em; } cmys trc>ft { display: flex; height: 55px; width: 55px; position: absolute; right: 18px; justify-content: center; } /* Replace by Gagan Nayak for MeetingSessionDelete */ cmys trc>hd{display:grid;grid-template-columns: 44px auto 44px; height: auto; width: auto; justify-content: unset; background: var(--0); gap: 2%; } 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*/ cmsdu sl { display: grid; height: auto; border: dashed 2px; padding: 22px; width: auto; text-align: center; margin: 0; gap: 7px; } cmsdu sl hd { justify-content: center; grid-template-columns: 80px; align-items: center; height: auto; } cmsdu sl hd i { height: 44px; } .up_dp cmsdu sl bd { margin: 0px;} cmsdu sl bd h4 { font-weight: 500; } cmsdu sl bd p { background: var(--0); height: auto; } cmsdu sl ft { margin: 0; } cmsdu sl bd spne { color: var(--a); } cmsdu sl ft button { background: var(--0); color: var(--b); font-weight: 600; font-size: 1em; } cmsdu sl ft{margin:auto;width:80%;background:var(--aaa);border-radius:11px;height:50px;align-items:center;display:flex;justify-content:center;} cmsdu sl input { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; } cmsdu { display: grid; margin-bottom: 11px; } msnb bl hd { display: grid; position: relative; z-index: 2; height: 55px; align-items: center; grid-template-columns: 55px auto; margin: 0 11px; } 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 { padding: 16px; grid-template-columns: 78px auto auto; } 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; } /* 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 .wekda { display: flex; gap: 2%; align-items: center; justify-content: space-between; padding-right: 33px; margin-top: 6px; } 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 .me_mute i { display: grid; backdrop-filter: blur(20px); border-radius: 8px; color: var(--b); height: 22px; width: 22px; padding: 11px; background: var(--bor); } smso .zayn {display: grid; grid-template-columns: 33px auto; padding: 9px 11px; align-items: center; border-radius: 8px; color: var(--b); margin: 0 4px; background: var(--bor); width: fit-content; font-weight: 300; font-size: 0.88em; backdrop-filter: blur(20px);} 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 bd.onder hd { position: absolute; width: calc(100% - 12%); z-index: 99; top: 0; display: flex; padding: 11px; justify-content: space-between; flex-direction: column; height: calc(100% - 19%); } 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(--b-t); 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; } smso .zayn>t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; font-size: 0.88em; } @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 bd.onder bl { max-width: 211px; max-height: 166px; flex: none; min-width: 211px; min-height: 166px; } 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 bd.onder bl { position: relative; margin: 0 4px; } smco bd.onder hd{position:absolute;height:calc(100% - 22px);width:calc(100% - 22px);z-index:99;top:0;display:grid;padding:11px;} smco .me_mute{display: grid; justify-content: end; height: fit-content;} smco .me_mute i svg{width: 22px; margin: auto;fill: var(--b);} 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 .wekda { display: flex; gap: 2%; align-items: center; justify-content: space-between; padding-right: 33px; margin-top: 6px; } 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 bd.onder hd { position: absolute; width: calc(100% - 13px); z-index: 99; top: 0; display: flex; padding: 7px; justify-content: space-between; flex-direction: column; height: calc(100% - 12px); } 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 */ schnl 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; } schnl userpff sidebar { width: 50%; } schnl header { position: unset; } schnl friends main { width: 100%; max-width: 100%; } schnl friends { width: 100%; } schnl Photos main { width: 100%; max-width: 100%; } schnl Photos { width: 100%; } schnl Videos main { width: 100%; max-width: 100%; } schnl Videos { width: 100%; } schnl Reels main { width: 100%; max-width: 100%; } schnl Reels { width: 100%; } schnl gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} schnl ccio { width: auto; margin: 0; } schnl ccio { width: 100%; margin: 0; height: 100%; } schnl cpss> d { display: grid;margin: 0 11px;} schnl abouts>main>d.main { padding-bottom: 22px; } schnl btn { cursor: pointer; } schnl grid { margin-top: 11px; } schnl gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} schnl gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } schnl username{font-size: 0.55em; opacity: 0.66;} schnl nv back>i { height: 33px; width: 33px; } schnl cover { display: flex; position: relative; overflow: hidden; } schnl ff>ft>bl op:hover { background: var(--bc); } schnl btn:hover { background: var(--bc); } schnl pffs ff ft expnd:hover { background: var(--bc); } schnl gd:hover { background: var(--bc); } schnl 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; } schnl cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } schnl cover ii img { object-fit: cover; height: 100%; width: 100%; } schnl 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; } schnl ff>bd {position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; padding-top: 22px;} schnl pffs btns>btn:first-child svg { fill: var(--b); } schnl 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;} schnl dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } schnl 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;} schnl mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } schnl ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } schnl ff bd bl:nth-child(1) { display: grid; grid-template-columns: 177px auto; margin-left: 22px; } schnl 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; } schnl h1>name { display: flex; align-items: center; white-space: nowrap;font-size: 2.22rem; } cino dvv { display: grid; grid-template-columns: 33px auto; align-items: center; } cino>bd>d a { display: flex; align-items: center; } cino>bd>d ind { display: grid; grid-template-columns: 33px auto; align-items: center; } cino>bd>d t { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } schnl pffs { display: block; background: var(--bt); margin-bottom: 11px; } schnl pffs ff ft expnd svg { transform: rotate(-90deg); } schnl pffs ff>ft>bl mb {display: flex; margin: 0; align-items: center; gap: 22px;} schnl pfinfo upld h5 { font-weight: 100; } schnl pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } schnl oppffs ff ft op{ display: none; } schnl pffs bd btn h6 { font-weight: 400; } schnl pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } schnl 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%); } schnl mg>a>i { height: auto; width: auto; margin-top: 2px; } schnl 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;} schnl { display: grid; background: var(--b); } schnl 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; } schnl ff mb aa>i { margin-top: 7px; } schnl expnd svg { height: 22px; width: 22px; } schnl 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; } schnl pffs btns i { height: 17px; width: 17px; margin: auto; } schnl ff bl ft op { display: none; } schnl 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; } schnl cover upld h5 { font-weight: 100; } schnl bl op svg { height: 22px; width: 22px; margin: auto; } schnl pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } schnl inf bd b {margin-top: 7px;font-weight: 500;} schnl h1>name i { height: 22px; width: 22px; } schnl ff inf btn {width: auto; border-radius: 44px; padding: 7px 22px; height: auto; display: unset; font-size: 0.88rem;} schnl ff inf btns { margin-top: 11px; } schnl cino bd a img { height: 44px; width: 44px; border-radius: 44px; } schnl cino bd { display: grid; grid-auto-flow: column; width: fit-content; margin-left: auto; gap: 11px; } schnl cino {display: grid; padding: 11px; background: var(--b-t); border-radius: 0; margin-bottom: 11px; grid-template-columns: auto auto; align-items: center; border-bottom: 1px solid var(--bc);} schnl cino hd h3 { font-weight: 500; } schnl 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; } schnl 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;} cchnvis{display: flex; overflow: hidden; overflow-x: scroll; gap: 11px; border-bottom: 1px solid var(--bc);padding-bottom: 11px;} 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;} schnl pffs ff>ft>bl mb { overflow: scroll; width: 100%; padding: 11px 0; } schnl pfmgr { display: grid; } } schnl sho { display: grid; grid-template-columns: 22px auto; font-size: 1.11rem; font-weight: 700; padding: 11px 0; gap: 7px; } schnl footer chnrt {display: grid; grid-auto-flow: column; grid-template-columns: 40% auto auto; align-items: center; padding: 0 11px;} schnl footer h1>name { font-size: 1.22rem; font-weight: 500; margin-bottom: 7px; } schnl chnrt bd p, schnl chnrt bd d { font-weight: 500; margin: 0px; margin-bottom: 7px; display: flex; } schnl chnrt bd a { font-weight: 500; } chnrt ft btn { padding: 10px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; } schnl footer { margin: 0; margin-bottom: 44px; } schnl footer bl { box-shadow: unset; } schnl footer bl > hd { display: grid; margin: 11px; } schnl chnrt hd img { height: 122px; width: 122px; } ccshot btn {display: flex; height: auto; width: auto; transform: rotate(90deg); justify-content: center; margin-top: 4px; align-items: start;} ccshot btn svg { height: 18px; width: 18px; } 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; } ccshot bd {display: grid; align-items: center; justify-content: space-between; padding: 7px;padding-bottom: 0;height: fit-content; grid-template-columns: auto 22px;} @media screen and (min-width: 999px) { schnl .aerea { max-width: unset; margin: auto; display: grid; justify-content: unset;} schnl sidebar { width: auto; position: relative; min-width: unset; } schnl main { width: auto; max-width: unset; } } @media screen and (max-width: 999px) { schnl cpss> d { display: grid; } schnl h1>name { font-size: 1.55rem;margin-top: 11px;} schnl ff bd bl:nth-child(1) {grid-template-rows: auto auto; margin: 0 11px; grid-template-columns: unset;} schnl ff dppic { height: 99px; width: 99px; } schnl cino bd a img { height: 33px; width: 33px; } schnl cino bd { gap: 7px; } schnl footer chnrt { grid-template-rows: 40% auto auto auto ; grid-template-columns: unset; gap: 11px; } schnl ff>bd { padding-top: 11px; } cchnvi { min-width:288px; } ccshot { min-width: 144px; margin: 4px;} } /* Channel */ /* Channels */ channels main { width: 100%; max-width: unset; } 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 hd img {border-radius: 50%; height: 111px; width: 111px; box-shadow: var(--bs-bt);} 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)); } 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;} skrb hd img {height: 88px; width: 88px; } 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: 70% 30%; gap: 16px;margin-top: 11px;} videos main, videos sidebar { max-width: unset; width: auto; } videos iframe {width: 100%; border-radius:16px; height:555px;} .ytp-cued-thumbnail-overlay-image { background-size: contain; } cvidn { display: grid;position: relative; margin-bottom: 11px; } cvidn> hd { display: grid; padding: 11px; padding-bottom: 0; } cvidn hd t { font-size: 1.22rem; font-weight:600; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; } cvidn>hd h5 { font-size: 0.88em; font-weight: 500; } cvidn>hd h5 aa { font-size: 0.88em; font-weight: 700; } cvidn laft { display: grid; grid-template-columns: 44px auto auto; width: fit-content; align-items: center; padding: 11px; gap: 11px; } cvidn laft hd i { height: 40px; width: 40px; } cvidn laft hd img { border-radius: 44px; } cvidn laft bd { display: grid; } cvidn laft bd h3 {font-size: 1rem; font-weight: 500;} cvidn laft bd p { margin: 0; font-size: 0.77rem; font-weight: 500;opacity: 0.77;width:max-content;} cvidn laft ft { display: grid;margin-left:auto; } cvidn laft ft btn {display: grid; background: var(--btn); padding: 11px 22px; border-radius: 44px; color: var(--b); line-height: 1; font-size: 0.88rem;} cvidn right btn i { height:22px; width:22px; } cvidn> bd { display: grid; grid-template-columns: auto auto; justify-content: space-between;align-items: center;} cvidn right btns bttn { display: flex; } cvidn right btns { display: grid; grid-auto-flow: column; align-items: center; gap:11px; } cvidn right btns btn { display: grid; grid-auto-flow: column; align-items: center; } cvidn right btn h3 { font-size: 0.88rem; font-weight:600;margin: 0 4px;} .ytp-cued-thumbnail-overlay-image { background-size: contain; } cvidn right btns bttn {display:flex; background: var(--b-t44); padding: 7px 11px; border-radius: 44px; gap: 7px;} cvidn right btns> btn {display: none; background: var(--b-t44); padding: 7px 11px; border-radius: 44px; gap: 7px;transition: 99ms;} cvidn right btns> .dtn{display: flex;} cvidn right btns .mtn{display: flex;} cyvb {position: absolute; background: var(--b); padding: 11px 0; border-radius: 11px; bottom: -15vh; right: 1%; transform: scale(0); transition: 66ms;z-index: 999999;} cvidn right cyvb btn {padding: 5px 18px; grid-template-columns: 33px auto;} .cyvb cyvb { transform: scale(1); } cvidn right cyvb btn:hover { background: rgb(229 233 242); } cyvbr { height: 100%; width: 100%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: none;z-index: 999;} .cyvb cyvbr { display: block; } cveo bd a.this { background: var(--c); color: var(--b); } cvidn>hd h5 { display: none; } addnewcomment { display: none; } @media screen and (max-width: 999px) { cvidn right btns { padding: 0 11px; width: max-content; } cveo> hd { display: none; } addnewcomment {display: block; } cvidn right btns> btn {display: flex;} videos .aerea { grid-template-columns: unset;gap:0;} cvidn> bd { grid-template-columns: unset; justify-content: unset;} cvidn> bd right { overflow: scroll; width: 100%; } cvidn> bd { grid-template-columns: unset; } videos iframe {border-radius: 0;} cvidn right btns> .dtn{display:none;} cvidn laft { grid-template-columns: 44px auto auto; width: unset; } cvidn>hd h5 { display:block; } /*csro{display:none;} */ } @media screen and (max-width: 555px) { videos iframe { height:333px;} } @media screen and (max-width:444px) { videos iframe { height:222px;} } cvidn right btns> btn:hover { background: var(--b-t44); } cvidn right btns> btn:active { transform: scale(0.9); } /*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; } /* 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>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; } */ .page__nav { display: flex ; margin-bottom: 48px; } .page__nav .page__link:hover, .page__nav .page__link.active { background: #6C5DD3; color: #ffffff; } .page__nav .page__link { padding: 7px 18px; border-radius: 12px; font-weight: 600; color: #808191; transition: all 0.25s; } sgnp .color-red { color: #2c3d4a; } smio .color-red { color: #2c3d4a; } smbi .color-red { color: #2c3d4a; } no { display: grid ; width: 80%; margin: 44px auto; justify-content: center; align-items: center; text-align: center; padding: 22px; background: var(--b-t); border-radius: 22px; } no img { max-width: 344px; height: 211px !important; filter: grayscale(1); opacity: 0.5; } .sidebar__bottom {background: #fff;} button#UserUpdateProfile a { color: #fff; }/*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; } cmbf .oo bo { box-shadow: inset 60px 0px 0px;color: var(--c1);border-radius: 50px;} 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); } cmbf bl.quik mg aa t { font-size: 0.77em; } cmbf right { border-radius: 7px !important; border: solid 1px var(--bc) !important; } cmbf left { border-radius: 7px !important; border: solid 1px var(--bc) !important; } cmbf cmbf { display: block; background: var(--bt); border-radius: 22px;padding: 22px; } cmbf mg aa { border-radius: 6px; width: auto; padding: 11px; border: solid 1px var(--bc); border-radius: 6px; height: 20px; margin: 4px; display: flex; align-items: center; justify-content: center;} cmbf bl { display: block; margin: 0; background: transparent; border-radius: 0; border-bottom: solid 1px var(--bc);padding: 11px 0; } cmbf mg aa i { height: 11px; width: 11px; margin-left: 6px; } cmbf mg { text-align: center; grid-template-columns: auto auto auto ; overflow: hidden; overflow-x: auto; padding: 0; display: grid; margin: auto; align-items: center; } cmbf input { width: -webkit-fill-available; padding: 11px; border: solid 1px var(--bc); border-radius: 11px; height: 25px; background: transparent; } cmbf select { width: 100%; padding: 11px; border: solid 1px var(--bc); border-radius: 6px; background: transparent; margin: 0; height: 50px; } cmbf aa.this { background: var(--aaa); color: var(--b); } cmbf d.sidebar { padding: 0; } cmbf bl.Clear { display: grid; margin: 0; position: static; bottom: 0; z-index: 999999999; width: 100%; background: transparent; border: unset; padding: 0;} cmbf bl.Clear bd { display: flex; align-items: center; justify-content: space-between; } cmbf bl.Clear h4 { text-align: center; } cmbf { grid-column-start: 2; margin: 11px 0; background: var(--b-t); padding: 22px; border-radius: 22px; } cmbf bl bl { border: unset; border-bottom: solid 1 px var(--bc); padding: 11px 0; } @media screen and (max-width: 999px) { cmbf { grid-column-start: 1; } } @media screen and (min-width: 999px) { cmbog { position: sticky; top: 0; z-index: 999; } } /* Meeting Bot Filter Component*/ /* Meeting Bots Filter Component*/ smbs cmbf { grid-column-start: 1; } /* 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 { 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;} 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: 0 11px; margin-top: 22px; } 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*/ /*cpdo svg { opacity: 0.4; filter: grayscale(1); } */ cpdo a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cpdo img { border-radius: 50%; } @media screen and (max-width: 999px) { cpdo i { height: 116px; width: 116px; } cpdo { margin: 11px; } cpdo hd {display: block;} cpdo p { font-weight: 400; max-width: 100%; font-size: 0.88em; } cpdo button { width: 60%; } } /* ProfileDp*/ cpdo svg { opacity: 0.4; filter: grayscale(1); } cpdo a { font-weight: 500; color: var(--aa); font-size: 0.88em; } cpdo img { border-radius: 50%; } cpdo { display: block; padding: 22px; background: var(--bt); border-radius: 22px; text-align: center; } cpdo>hd { display: flex ; align-items: center; justify-content: end; } cpdo>bd>i { position: relative; display: flex ; height: 135px; width: 135px; margin: 11px auto; border-radius: 55%; justify-content: center; align-items: center; background: var(--bc); } cpdo>bd>h2 { font-weight: 400; font-size: 1em; } cpdo>ft>button.jtc { display: block; background: var(--aaa); color: var(--b); border-radius: 5px; width: 100%; margin: 0 auto; } @media screen and (max-width: 999px) { cpdo i { height: 116px; width: 116px; } cpdo { margin: 11px; } cpdo hd {display: block; } cpdo p { font-weight: 400; max-width: 100%; font-size: 0.88em; } cpdo button { width: 60%; } } /* Profileinfo*/ /* Profileinfo*/ /* Accountinfo*/ /* Your Profile*/ /* Account Privacy*/ 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 { margin: 11px; } } /* Account Privacy*/ /*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 { margin: 11px; grid-template-rows: auto auto;} 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 quick { display: grid; grid-template-columns: 25% 25% 25% 25%; padding: 11px; } 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; } cppo quick { grid-template-columns: 50% 50%; } cppo quick { grid-template-columns: auto auto; justify-content: space-around; } } /*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: 50px 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*/ /* 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>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; } 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*/ /* 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*/ 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; } 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>bd { display: grid; grid-template-columns: 50% 50%; } 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) { 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; } } /* 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*/ cmsco {display: block; background: var(--bt); padding: 22px; border-radius: 22px; border: solid 1px var(--b);margin: 4px; } cmsco hd { display: grid; grid-template-columns: auto auto; justify-content: space-between; } cmsco bd {padding-top: 11px;} smco main bl { display: grid; grid-template-columns: 50% 50%; padding: 0; border-radius: 22px; background: unset; margin: 11px 0; } cmsco p { font-size: 0.88em; font-weight: 100; margin: 0; } cmsco h5 { display: grid; grid-template-columns: 100px auto; align-items: center; justify-content: space-between; 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; } cmsco bd { padding: 0 !important; } 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; } cmsco b { font-weight: 500; } cmsp ft { text-align: end; } @media screen and (max-width: 999px) { smco main bl { display: block; } smco main grid { padding: 11px; } cmsco { margin: 7px 0; } cmsp bd p { white-space: nowrap; width: 158px; overflow: hidden; text-overflow: ellipsis; } } @media screen and (max-width: 400px) { cmsp { grid-template-columns: 70px auto 88px; padding: 16px; } } /* Subscriptioncmsco*/ .stepper { display: grid; grid-template-columns: 33px 46px 33px; align-items: center; background: var(--bc); padding: 9px; border-radius: 5px; margin-top: 5px; width: fit-content; } .stepper button { background: transparent; padding: 0;} /* 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 name { font-weight: 600; } 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: 22px; 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);} users>user>hd{position:relative} users>user img{object-fit:cover;width:100%;height:100%;} 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: grid; grid-template-columns:50% 50%; } } @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%; } } /* 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 { display: block; background: var(--b); padding: 22px; border-radius: 22px; height: 100%; 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, textarea, select { 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 { resize: vertical; min-height: 60px; } cmto .meeting-type, .visibility, .schedule { display: flex; align-items: center; gap: 10px; } cmto input[type="checkbox"], 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 */ .page__stat_sm .sorting { top: 32px; right: 0px; } .mobile-show { } .sorting__row { display: flex ; margin: 0 -8px; } .sorting__col { flex: 0 0 calc(50% - 16px); width: calc(50% - 16px); margin: 0 8px; } .sorting__dropdowns { display: flex ; margin: 0 -8px; } .sorting__dropdowns .dropdown { flex: 0 0 calc(50% - 16px); width: calc(50% - 16px); margin: 0 8px; } .dropdown__head { position: relative; display: flex ; align-items: center; height: 56px; padding: 0 46px 0 21px; border: 2px solid transparent; background: rgba(228, 228, 228, 0.3); border-radius: 15px; font-size: 0.88em; font-weight: 400; color: #808191; transition: all 0.25s; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .sorting__col { flex: 0 0 calc(50% - 16px); width: calc(50% - 16px); margin: 0 8px; } .sorting__line { display: flex ; align-items: center; } .sorting__search { position: relative; flex-grow: 1; } .sorting__open { position: absolute; top: 0; left: 0; bottom: 0; width: 55px; font-size: 0; background: 0; } .sorting__input { width: calc(100% - 77px); height: 56px; padding: 0 20px 0 55px; border: none; border-radius: 16px; background: rgba(228, 228, 228, 0.2); font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; color: #1B1D21; } .sorting__actions { display: flex ; align-items: center; } .sorting__open .icon { font-size: 20px; fill: #11142D; transition: fill 0.25s; } .sorting__action { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #ffffff; font-size: 0; transition: box-shadow 0.25s; } /* 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 */ ccshot {display: block; max-width: 131px; min-height: 100%; height: 100%; min-width: 131px; position: relative; max-height: 100%; margin: 0 7px;} cchnvi:hover { background: rgb(235, 223, 221); } 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:7px; 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.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;} schnl pffs ff>ft>bl mb { overflow: scroll; width: 100%; padding: 11px 0; } schnl pfmgr { display: grid; } } schnl sho { display: grid; grid-template-columns: 22px auto; font-size: 1.11rem; font-weight: 700; padding: 11px 0; gap: 7px; } schnl footer chnrt {display: grid; grid-auto-flow: column; grid-template-columns: 40% auto auto; align-items: center; padding: 0 11px;} schnl footer h1>name { font-size: 1.22rem; font-weight: 500; margin-bottom: 7px; } schnl chnrt bd p, schnl chnrt bd d { font-weight: 400; margin: 0px; margin-bottom: 7px; display: flex; font-size: 0.88em; } schnl chnrt bd a { font-weight: 500; } chnrt ft btn { padding: 10px 22px; background: var(--btn); color: var(--b); font-weight: 500; border-radius: 44px; } schnl footer { margin: 0; margin-bottom: 44px; } schnl footer bl { box-shadow: unset; } schnl footer bl > hd { display: grid; margin: 11px; } schnl chnrt hd img { height: 122px; width: 122px; } ccshot btn { display: flex; max-width: 14px; max-height: 14px; transform: rotate(90deg); justify-content: center; margin-top: 4px; align-items: start; } ccshot btn:hover { background: var(--hover); } cchnvi bd {display: grid; padding: 4px 0; padding-top: 11px; height: fit-content; justify-content: space-between; grid-template-columns: auto 33px; align-items: center;} cchnvi bd 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;} cchnvi bd btn svg { height:16px; width:16px; } ccshot bd { display: grid ; align-items: center; justify-content: space-between; padding: 0; padding-bottom: 0; height: fit-content; grid-template-columns: auto 22px; } @media screen and (min-width: 999px) { schnl .aerea { max-width: unset; margin: auto; display: grid; justify-content: unset;} schnl sidebar { width: auto; position: relative; min-width: unset; } schnl main { width: auto; max-width: unset; } } @media screen and (max-width: 999px) { schnl cpss> d { display: grid; } schnl h1>name {margin-top: 11px;} schnl ff bd bl:nth-child(1) {grid-template-rows: auto auto; margin: 0 11px; grid-template-columns: unset;} schnl ff dppic { height: 99px; width: 99px; } schnl cino bd a img { height: 33px; width: 33px; } schnl cino bd { gap: 7px; } schnl footer chnrt { display: grid; grid-auto-flow: column; grid-template-columns: 177px auto auto; align-items: center; padding: 22px; } schnl ff inf btn:first-child { background: var(--aaa); color: var(--b); } schnl ff>bd { padding-top: 11px; } cchnvi { min-width:288px; } ccshot { min-width: 144px; margin: 4px;} } /* Channels */ channels main { width: 100%; max-width: unset; } 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 hd img {border-radius: 50%; height: 111px; width: 111px; box-shadow: var(--bs-bt);} 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)); } 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;} skrb hd img {height: 88px; width: 88px; } 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; } } 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; } } /*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; } camo com hd h2 { font-weight: 600; } /* 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; } /* Files component (Ggroup) */ sgrpo file { width: 100%; } cfls { background: var(--bt); border-radius: 11px; display: block; padding: 11px; margin: 0 11px; } cfls>hd bl>sl { display: grid; grid-template-columns: 55px auto; align-items: center; height: 44px; border-radius: 44px; width: 222px; margin: 0; } cfls>hd bl>sl>input:focus { border-radius: 44px; box-shadow: none; border: 1px solid var(--bor); } cfls>hd bl>sl>btn { display: flex; padding: 6px; place-content: center; position: relative; z-index: 99; } cfls>hd>bx bl>btn { width: 122px; height: 44px; margin-left: 11px; font-weight: 600; justify-content: center; } cfls>hd { border-bottom: 1px solid var(--bc); display: block; margin-bottom: 11px; } cfls mb { display: grid; grid-template-columns: auto 177px 177px; align-items: center; } cfls mb>btn { display: flex; align-items: center; padding: 11px; background: var(--bc); border-radius: 5px; margin: 5px; justify-content: center; font-weight: 500; } cfls mb>btn>i { height: 13px; width: 13px; margin: 5px; display: none; } cfls mb>btn.this>i { display: flex; } cfls>hd bl>sl>input { position: absolute; padding-left: 50px; width: auto; left: 0; top: 0; bottom: 0; right: 0; font-weight: 500; } cfls>hd>bx btn>input { position: absolute; width: auto; top: 0; bottom: 0; right: 0; left: 0; opacity: 0; } cfls>hd bl { display: flex; align-items: center; } cfls medas { display: flex; flex-wrap: wrap; } cfls>hd>bx { display: flex; justify-content: space-between; align-items: center; padding: 11px; } cfls>hd>bx btn:hover { background: var(--hover); } cfls>hd>bx btn { display: flex; align-items: center; padding: 11px; border-radius: 5px; position: relative; } cfls>hd>bx>btns { display: flex; align-items: center; white-space: nowrap; } cfls abvds>aa { margin: 6px; padding: 11px; cursor: pointer; } cfls>hd>bx btn>i { height: 22px; width: 22px; margin: 4px; margin-bottom: 0; } @media only screen and (max-width: 999px){ cfls>hd>bx { display: block; } cfls>hd bl { display: block; } cfls>hd>bx bl>btn { padding: 5px; margin: 4px; border-radius: 5px; } cfls mb { grid-template-columns: 40% 26% 27%; } } /* Peoples component (Group) */ cgpps { display: block; margin: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } cgpps p { margin: 0; } cgpps bl ft t { 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) */ cuspo { display: grid; grid-template-columns: 66px auto 133px; padding: 11px; align-items: center; margin: 5px 0; border-radius: 11px; } cuspo>ft>btn { display: flex; height: 40px; width: 55px; align-items: center; background: var(--bc); padding: 5px 11px; border-radius: 5px; } cgpps>bd>bl>hd { display: block; padding: 5px 0; border-bottom: 1px solid var(--bc); margin-bottom: 11px; } cuspo>hd>i { height: 46px; width: 46px; border-radius: 55%; overflow: hidden; } cuspo:hover { background: var(--hover); } /* Group People (List) Component (Group) */ cpplo { display: grid; grid-template-columns: 66px auto 133px; padding: 11px; align-items: center; margin: 5px 0; border-radius: 11px; } cpplo>ft>btn { display: grid; grid-template-columns: 33px auto; align-items: center; background: var(--bc); padding: 5px 11px; border-radius: 5px; } cpplo name { display: block; } cpplo>bd>bl>hd { display: block; padding: 5px 0; border-bottom: 1px solid var(--bc); } cpplo>hd>i { height: 46px; width: 46px; border-radius: 55%; overflow: hidden; } cpplo:hover { background: var(--hover); } cppls>ft>btn { display: block; padding: 11px; background: var(--aaa); color: var(--b); border-radius: 5px; margin: 22px; } cpplo>bd>t { display: block; font-size: 0.66em; padding: 3px 7px; background: var(--aat); margin: 4px 0; border-radius: 5px; width: fit-content; color: var(--a); } cgpps>hd>p { margin: 5px 0; } cpplo>bd>p { font-size: 0.77em; } @media only screen and (max-width: 999px){ /* Files component (Ggroup) */ sgrpo file { width: 100%; } cfls { background: var(--bt); border-radius: 11px; display: block; padding: 11px; margin: 0 11px; } cfls>hd bl>sl { display: grid; grid-template-columns: 55px auto; align-items: center; height: 44px; border-radius: 44px; width: 222px; margin: 0; } cfls>hd bl>sl>input:focus { border-radius: 44px; box-shadow: none; border: 1px solid var(--bor); } cfls>hd bl>sl>btn { display: flex; padding: 6px; place-content: center; position: relative; z-index: 99; } cfls>hd>bx bl>btn { width: 122px; height: 44px; margin-left: 11px; font-weight: 600; justify-content: center; } cfls>hd { border-bottom: 1px solid var(--bc); display: block; margin-bottom: 11px; } cfls mb { display: grid; grid-template-columns: auto 177px 177px; align-items: center; } cfls mb>btn { display: flex; align-items: center; padding: 11px; background: var(--bc); border-radius: 5px; margin: 5px; justify-content: center; font-weight: 500; } cfls mb>btn>i { height: 13px; width: 13px; margin: 5px; display: none; } cfls mb>btn.this>i { display: flex; } cfls>hd bl>sl>input { position: absolute; padding-left: 50px; width: auto; left: 0; top: 0; bottom: 0; right: 0; font-weight: 500; } cfls>hd>bx btn>input { position: absolute; width: auto; top: 0; bottom: 0; right: 0; left: 0; opacity: 0; } cfls>hd bl { display: flex; align-items: center; } cfls medas { display: flex; flex-wrap: wrap; } cfls>hd>bx { display: flex; justify-content: space-between; align-items: center; padding: 11px; } cfls>hd>bx btn:hover { background: var(--hover); } cfls>hd>bx btn { display: flex; align-items: center; padding: 11px; border-radius: 5px; position: relative; } cfls>hd>bx>btns { display: flex; align-items: center; white-space: nowrap; } cfls abvds>aa { margin: 6px; padding: 11px; cursor: pointer; } cfls>hd>bx btn>i { height: 22px; width: 22px; margin: 4px; margin-bottom: 0; } @media only screen and (max-width: 999px){ cfls>hd>bx { display: block; } cfls>hd bl { display: block; } cfls>hd>bx bl>btn { padding: 5px; margin: 4px; border-radius: 5px; } cfls mb { grid-template-columns: 40% 26% 27%; } } /* Peoples component (Group) */ cgpps { display: block; margin: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } cgpps p { margin: 0; } cgpps bl ft t { 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) */ cuspo { display: grid; grid-template-columns: 66px auto 133px; padding: 11px; align-items: center; margin: 5px 0; border-radius: 11px; } cuspo>ft>btn { display: flex; height: 40px; width: 55px; align-items: center; background: var(--bc); padding: 5px 11px; border-radius: 5px; } cgpps>bd>bl>hd { display: block; padding: 5px 0; border-bottom: 1px solid var(--bc); margin-bottom: 11px; } cuspo>hd>i { height: 46px; width: 46px; border-radius: 55%; overflow: hidden; } cuspo:hover { background: var(--hover); } /* Group People (List) Component (Group) */ cpplo { display: grid; grid-template-columns: 66px auto 133px; padding: 11px; align-items: center; margin: 5px 0; border-radius: 11px; } cpplo>ft>btn { display: grid; grid-template-columns: 33px auto; align-items: center; background: var(--bc); padding: 5px 11px; border-radius: 5px; } cpplo name { display: block; } cpplo>bd>bl>hd { display: block; padding: 5px 0; border-bottom: 1px solid var(--bc); } cpplo>hd>i { height: 46px; width: 46px; border-radius: 55%; overflow: hidden; } cpplo:hover { background: var(--hover); } cppls>ft>btn { display: block; padding: 11px; background: var(--aaa); color: var(--b); border-radius: 5px; margin: 22px; } cpplo>bd>t { display: block; font-size: 0.66em; padding: 3px 7px; background: var(--aat); margin: 4px 0; border-radius: 5px; width: fit-content; color: var(--a); } cgpps>hd>p { margin: 5px 0; } cpplo>bd>p { font-size: 0.77em; } @media only screen and (max-width: 999px){ cpplo { grid-template-columns: 66px auto 55px; } } /* Upcoming events */ cneo { display: grid; grid-template-rows: 144px auto; text-align: center; padding: 22px; margin: 11px; } cneo>i { height: 133px; width: 133px; margin: auto; opacity: 0.7; } /* Upcoming events component (Group) */ cgueo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin: 11px; } cgueo>hd { display: flex; justify-content: space-between; align-items: center; } cgueo>hd btn { display: block; background: var(--bc); border-radius: 5px; padding: 11px 22px; margin: 0 4px; } cgueo>hd btns { display: flex; } cgueo>hd btn.this { background: var(--aaa); color: var(--b); } cgpes { display: block; margin-top: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } @media only screen and (max-width: 999px){ cgueo>hd btn { padding: 11px; } cgueo>hd { display: block; } cgueo>hd btns { margin-top: 11px; } } /* Upcoming event component (Group) */ cevo>hd>i { height: 130px; width: 122px; overflow: hidden; border-radius: 11px; } cevo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cevo time { font-size: 0.88em; font-weight: 500; display: block; } cevo>bd>t { font-size: 1.44em; font-weight: 600; } cevo evid { display: flex; align-items: center; margin: 5px 0; } cevo evid>i { height: 22px; width: 22px; border-radius: 55%; overflow: hidden; margin: 4px; margin-left: 0; } cevo evid p { margin: 0; } cevo evid t { font-weight: 500; } cevo { display: grid; grid-template-columns: 144px auto; background: var(--bt); border-radius: 11px; padding: 11px; margin: 5px 0; box-shadow: var(--bs-b); } cevo btns { display: flex; align-items: center; } cevo btns>btn { display: flex; padding: 11px; height: 40px; width: 55px; background: var(--bc); border-radius: 5px; place-content: center; } cevo btns>btn>i { transform: rotate(90deg); height: 17px; width: 17px; } /* meeting host */ smho userpff 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 btn: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; } smho ccio { height: 100%; width: 100%; margin: 0; } @media screen and (min-width: 999px) { smho sidebar { width: 44%; } smho .aerea { flex-direction: unset; max-width: 1100px; margin: auto; }} /* About component (Group) */ cago { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; margin-top: 0; } cago bl>d>hd>i { height: 19px; width: 19px; opacity: 0.7; margin: 4px; margin-left: 0; } cago bl>d { display: grid; grid-template-columns: 33px auto; margin-bottom: 11px; } cago bl>d p { margin: 0; font-size: 0.78em; } cago bl>d t { font-weight: 500; } cago>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cago>bd { display: block; padding: 11px; } /* Members component (Group) */ cmgo mmbrs { display: flex; align-items: center; padding: 5px 0; } cmgo mmbrs>i { height: 33px; width: 33px; overflow: hidden; border-radius: 55%; margin: 2px; box-shadow: var(--bs-b); } cmgo>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cmgo { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } cmgo>ft>btn { display: block; padding: 11px; text-align: center; margin: 11px; margin-bottom: 0; background: var(--aaa); color: var(--b); border-radius: 7px; } cmgo>bd { display: block; padding: 11px; } cmgo>hd>h4>t { opacity: 0.7; } /* Activity component (Group) */ cgato { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } cgato>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cgato bl>d>hd>i { height: 19px; width: 19px; opacity: 0.7; margin: 4px; margin-left: 0; } cgato bl>d { display: grid; grid-template-columns: 33px auto; margin-bottom: 11px; } cgato bl>d t { font-weight: 500; } cgato>bd { display: block; padding: 11px; } cgato bl>d p { margin: 0; font-size: 0.78em; } smmro goals { display: grid; background: var(--b-t); margin: 11px 0; border-radius: 22px; margin-top: 11px; padding: 11px; grid-template-columns: 50% 50%; } 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; } spfo ccio { width: 100%; height: 100%; } 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; } suso ccio { height: 100%; width: 100%; margin: 0; } @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; } } /*Profile*/ spfo userpff sidebar { width: 50%; } spfo header { position: relative; } spfo friends main { width: 100%; max-width: 100%; } spfo friends { width: 100%; } spfo Photos main { width: 100%; max-width: 100%; } spfo Photos { width: 100%; } spfo Videos main { width: 100%; max-width: 100%; } spfo Videos { width: 100%; } spfo Reels main { width: 100%; max-width: 100%; } spfo Reels { width: 100%; } spfo gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} spfo abouts>main>d.main { padding-bottom: 22px; } spfo btn { cursor: pointer; } spfo grid { margin-top: 11px; } spfo gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} spfo gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } spfo username{font-size: 0.55em; opacity: 0.66;} spfo nv back>i { height: 33px; width: 33px; } spfo cover { display: flex; position: relative; height: 100%; overflow: hidden; } spfo ff>ft>bl op:hover { background: var(--bc); } spfo btn:hover { background: var(--bc); } spfo pffs ff ft expnd:hover { background: var(--bc); } spfo gd:hover { background: var(--bc); } spfo 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; } spfo cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } spfo cover ii img { object-fit: cover; height: 100%; width: 100%; } spfo 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; } spfo ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } spfo 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; } spfo 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; } spfo dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } spfo 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; } spfo mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } spfo ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } spfo ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; margin-left: 22px; } spfo ff bd btn { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 5px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; place-content: center; } spfo ff bd btn.this { background: var(--aaa); color: var(--b); } spfo ff bd btn.this img { filter: invert(1); } spfo ff bd btn.this svg { fill: var(--b); } spfo pffs { display: block; background: var(--bt); margin-bottom: 11px; } spfo pffs ff ft expnd svg { transform: rotate(-90deg); } spfo pffs ff>ft>bl mb { display: flex; margin: 0; } spfo pfinfo upld h5 { font-weight: 100; } spfo pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } spfo oppffs ff ft op{ display: none; } spfo pffs bd btn h6 { font-weight: 400; } spfo pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } spfo 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; } spfo mg>a>i { height: auto; width: auto; margin-top: 2px; } spfo pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } spfo 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; } spfo expnd svg { height: 22px; width: 22px; } spfo 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; } spfo cmopo>d { height: 16px; margin: 0; margin-bottom: 4px; } @media screen and (max-width: 999px) { spfo ff bd btn:last-child { display: flex; } spfo pffs btns { display: grid; margin-top: 22px; grid-template-columns: 40.3% 40.3% 19.3%; } spfo sidebar { width: auto; margin: 11px; z-index: 0; position: relative; } spfo pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } spfo pffs ff>bd { display: block; } spfo ff { grid-template-rows: 163px auto; padding: 0 11px; } spfo ff ft expnd { display: none; } spfo 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; } spfo pffs { display: block; background: var(--b-t); } spfo ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } spfo upld h5 { display: none; } spfo 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; } spfo ff bl ft op { display: none; } spfo 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; } spfo cover upld h5 { font-weight: 100; } spfo bl op svg { height: 22px; width: 22px; margin: auto; } spfo pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } spfo ccio { height: 100%; width: 100%; margin: 0; } @media screen and (min-width: 999px) { spfo sidebar { width: 44%; } spfo .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; } } @media screen and (max-width: 450px) { aa.frns { display: none; } aa.rels { display: none; } } @media screen and (max-width: 300px) { aa.Abt { display: none; } } .Posts a.psts { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Photos a.phts { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .About a.abt { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Friends a.frns { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Videos a.vdos { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Check a.chek { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .More a.mor { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .More .mor a>i>svg { opacity: 1; } /*Totalposts Component*/ ctpo { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin: 11px 0; } 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; } /*Intro Component*/ cino dvv h6 { font-weight: 400; font-size: 0.88em; display: flex; align-items: center; } cino { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin-bottom: 11px; } cino btn { display: flex; justify-content: center; padding: 11px; margin: 11px; background: var(--bc); border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.88em; } /*Check-ins */ cchs { background: var(--bt); border-radius: 11px; display: block; padding: 11px; margin: 0 11px; } cchs>hd>bx { display: flex; align-items: center; justify-content: space-between; } cchs>hd>bx>btn { 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; } cchs bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } spfo checkins { width: 100%; } spfo checkins >main { width: 100%; max-width: 100%; } chkns cemo { display: flex; } /*Totalfriends Component */ cfro { display: block; padding: 11px; background: var(--b-t); border-radius: 11px; margin: 11px 0; } 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; } /*Composer Component */ ccpo>bd { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; width: unset; margin: unset; } ccpo>hd i { display: block; border-radius: 55%; overflow: hidden; height: 40px; width: 40px; } ccpo>hd i img { height: 100%; width: 100%; object-fit: cover; } ccpo>bd btn { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 5px; margin: 4px; align-items: center; padding: 1px; } cmpsr>bd btn:hover { background: var(--bc); border-radius: 6px; } ccpo>hd { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bc); padding-bottom: 11px;} ccpo { display: block; background: var(--b-t); padding: 22px; border-radius: 11px; margin-bottom: 11px; padding-bottom: 0; } born div h6:nth-child(2) { font-weight: 100; } ccpo>hd btn { display: block; padding: 11px; background: var(--bc); border-radius: 24px; } ccpo>btn h5 { font-weight: 500; } @media screen and (max-width: 999px) { ccpo bd btn { min-inline-size: max-content; } } cpino>ft { margin-top: 22px; } caco>ft { margin-top: 22px; } /*Tablist Component*/ tblst aa h5 { font-weight: 600; } ctbo>hd bl btn { white-space: nowrap; display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: var(--bc); border-radius: 5px; margin: 4px; align-items: center; padding: 5px 11px; } ctbo hd i img { height: 100%; width: 100%; object-fit: cover; } tblst aa { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 0; margin: 4px; align-items: center; padding: 1px; margin-bottom: 0; } ctbo>hd bl btn:hover { background: var(--bc); } ctbo>hd bl { display: flex; align-items: center; padding: 0; border-bottom: 1px solid var(--bc); justify-content: space-between; padding-bottom: 6px; } ctbo { display: block; background: var(--b-t); padding: 22px; border-radius: 11px; margin-bottom: 11px; padding-bottom: 0; } tblst { display: grid; grid-template-columns: 50% 50%; place-content: center; align-items: center; justify-content: center; } ctbo>hd bl bd { display: flex; } .listview aa.lstvw { border-bottom: 2px solid var(--c); opacity: 1; } .gridview aa.grdvw { border-bottom: 2px solid var(--c); opacity: 1; } aa.grdvw svg { opacity: 0.8; } .gridview aa.grdvw svg { opacity: 1; } ctbo>hd bl btn h5 { font-weight: 500; } /* 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; } /*Post component*/ cpso btns { cursor: pointer; } cpso time {text-align: unset; } cpso t input { background: unset; } cpso:first-child { margin-top: 0; } cpso ft btn:hover { background: var(--bc); } cpso input { background: unset; width: 100%; font-weight: 400; border: none; padding: 11px; height: auto; } cpso msg { display: none; gap: 2%; padding: 11px 0; } cpso cmt { display: flex; flex-direction: column; } cpso id i { border-radius: 50%; background: var(--bc); } cpso>ft cmt btns { display: flex; justify-content: start; } cpso>bd>i>img { height: 100%; width: 100%; object-fit: cover; } cpso msg bd i { display: block; height: 55px; padding-bottom: 11px; } cpso>ft cmt btns { display: flex; justify-content: start; border: none; margin-left: 22px; } cpso>ft { display: block; padding: 11px; padding-top: 0; } cpso hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } cpso ic svg { height: 20px; } brn { display: block; text-align: center; padding-bottom: 44px; font-size: 1.55em; } brn>hd { display: flex; justify-content: center; } cpso brn hd i { height: 44px; width: 44px; background: var(--a); border-radius: 55%; margin: 6px; } brn bd h5 { font-weight: 500; } cpso { display: block; background: var(--b-t); border-radius: 11px; padding: 0; } 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 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; } cpso>bd>i { height: 100%; } cpso comant { display: none; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } cpso hd ft>i:active { background: var(--bc); } cpso hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } cpso hd d bd { text-align: justify; font-size: 0.88em; } cpso>bd { display: block; border-radius: 0; max-height: 455px; overflow: hidden; } cpso trc ft { display: flex; justify-content: end; } cpso 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; margin-bottom: 0; } cpso ft btn i { height: 23px; width: 23px; } cpso ft t { width: auto; margin: 0; font-size: 0.88em; text-align: center; } cpso p { font-size: 11px; margin: 0; } cpso dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} cpso hd i { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 6px; } cpso trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: center; margin-bottom: 11px; padding: 22px; padding-bottom: 0; } cpso time { display: block; width: auto; float: unset; } cpso name { font-size: 1em; font-weight: 500; } cpso>ft btns { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; width: unset; margin: unset; padding: 0; } cpso comant>bd { display: grid; align-items: center; height: 44px; background: var(--bc); border-radius: 42px; margin: 0; } cpso trc hd>i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; } cpso comant bd d { display: grid; grid-template-columns: 60% auto; gap: 2%; border-radius: 55%; align-items: center; justify-content: normal; } cpso ic { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; justify-content: end; align-items: center; opacity: 0.6; margin-right: 11px; } cpso us { display: grid; grid-template-columns: 40px auto 76px; align-items: center; gap: 1%; border-bottom: solid 1px var(--bc); } cpso id { display: grid; grid-template-columns: 55px auto; padding: 11px 0; align-items: center; width: fit-content; } cpso 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; justify-content: start; gap: 4%; } cpso msg btns { grid-template-columns: auto auto auto; justify-content: flex-start; gap: 4%; padding-bottom: 11px; } cpso ic>i { height: 33px; width: 33px; padding: 5px; } cpso ic>i:last-child { transform: rotate(45deg); } cpso comant>hd i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; cursor: pointer; } comant>hd op { position: absolute; height: 15px; width: 15px; padding: 2px; background: var(--b); border-radius: 55%; transform: rotate(90deg); bottom: -3px; right: 0; } @media screen and (max-width: 999px) { cpso ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } cpso ic i:last-child { display: none; } cpso trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } cpso name { font-size: unset; } cpso time { font-size: 0.77em;} cpso hd i { background: unset; height: auto; width: auto; } cpso comant bd { height: auto; } cpso ic { display: none; } cpso comant bd d { grid-template-columns: 100%; } cpso comant { grid-template-columns: 43px auto; gap: 1%; } cpso ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } cpso gp bb { font-size: 0.88em; } cpso>bd { height: 366px; } cpso us { padding: 0; } cpso msg { padding: 11px; } cpso ft t { text-align: unset; } } /*Born Component*/ cpbo time {text-align: unset; } cpbo t input { background: unset; } cpbo input { background: unset; width: 100%; font-weight: 400; } cpbo ft btn:hover { background: var(--bc); } cpbo cmt { display: flex; flex-direction: column; } cpbo msg { display: grid; gap: 2%;padding: 11px 0; } cpbo ic>i { height: 19px; width: 19px; padding: 5px; } cpbo id i { border-radius: 50%; background: var(--bc); } cpbo>ft cmt btns { display: flex; justify-content: start; } cpbo msg bd i { display: block; height: 77px; padding-bottom: 11px; } cpbo>ft cmt btns { display: flex; justify-content: start; border: none; margin-left: 22px; } cpbo hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } cpbo ic svg { height: 20px; } brn { display: block; text-align: center; padding-bottom: 44px; font-size: 1.55em; } brn>hd { display: flex; justify-content: center; } cpbo brn hd i { height: 44px; width: 44px; background: var(--aaa); border-radius: 55%; margin: 6px; } cpbo brn bd h5 { font-weight: 500; } cpbo { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } 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 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; } cpbo comant { display: grid; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } cpbo hd ft>i:active { background: var(--bc); } cpbo hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } cpbo hd d bd { text-align: justify; font-size: 0.88em; } cpbo >bd { margin: 4px; display: block; background: var(--bc); border-radius: 22px; } cpbo trc ft { display: flex; justify-content: end; } cpbo 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; } cpbo ft btn>i { height: 23px; width: 23px; } cpbo ft t { width: auto; margin: 0; font-size: 0.88em; text-align: center; } cpbo p { font-size: 11px; margin: 0; } cpbo dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} cpbo hd i { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 6px; } cpbo trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: center; margin-bottom: 11px; } cpbo time { display: block; width: auto; float: unset; } cpbo name { font-size: 1em; font-weight: bold; } cpbo>ft btns { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; border-bottom: solid 1px var(--bc); justify-content: space-around; width: unset; margin: unset; padding: 0;} cpbo comant>bd { display: grid; align-items: center; height: 44px; background: var(--bc); border-radius: 42px; margin: 0; } cpbo trc hd>i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; } post comant bd i { display: flex; background: transparent; margin: 4px; border-radius: 55%; height: 33px; width: 33px; } cpbo comant bd d { display: grid; grid-template-columns: 60% auto; gap: 2%; border-radius: 55%; align-items: center; justify-content: normal; } cpbo ic { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; justify-content: end; align-items: center; } cpbo us { display: grid; grid-template-columns: 40px auto 76px; align-items: center; gap: 1%; padding: 11px 0; border-bottom: solid 1px var(--bc); padding-bottom: 0; } cpbo ic i:last-child { transform: rotate(45deg); } cpbo ic { opacity: 0.6; } cpbo id { display: grid; grid-template-columns: 55px auto; padding: 11px 0; align-items: center; } cpbo 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; justify-content: start; gap: 4%; } cpbo msg btns { grid-template-columns: auto auto auto; justify-content: flex-start; gap: 4%; padding-bottom: 11px; } cpbo comant>hd i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; cursor: pointer; } @media screen and (max-width: 999px) { cpbo ic i:last-child { display: none; } cpbo ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } cpbo trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } cpbo name { font-size: unset; } cpbo time { font-size: 0.77em;} cpbo hd i { background: unset; height: auto; width: auto; } cpbo comant bd { height: auto; } cpbo ic { display: none; } cpbo comant bd d { grid-template-columns: 100%; } cpbo ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } cpbo gp bb { font-size: 0.88em; } cpbo { padding: 11px; margin: 11px 0; } cpbo >bd { height: auto; } cpbo us { padding: 0; } cpbo msg { padding: 11px; } cpbo ft t { text-align: unset; } } /*About Component */ cabo bl>bd { padding: 0; display: flex; flex-direction: column; } cabo bl>bd>aa { padding: 6px; border-radius: 5px; margin: 6px 0; font-weight: 500; white-space: nowrap; cursor: pointer; } cabo { display: grid; grid-template-columns: 30% auto; border-radius: 11px; position: relative; padding: 11px; margin: 0 11px; } cabo bd bl { border-left: 1px solid var(--bc); } cabo bd bl aa { display: grid; grid-template-columns: 33px auto; align-items: center; gap: 2%; padding: 6px; color: var(--a); } cabo trc { display: grid; grid-template-columns: 44px auto 77px; align-items: center; } cabo trc btn { width: 33px; display: block; padding: 6px; border-radius: 55%; margin: 2px; } cabo trc btn:last-child { background: var(--bc); } cabo aa>i { height: 33px; width: 33px; } cabo trc btns { display: flex; } cabo aa>i>svg { width: 33px; fill: var(--a); } cabo trc>hd>i { height: 26px; width: 26px; padding: 5px; } cabo bl { background: unset; border-radius: 0; padding: 22px; } cabo trc>bd { padding: 0; display: flex; flex-direction: column; } cabo>bd bl aa:hover { background: var(--bc); text-decoration: underline; } cabo>hd bl>hd { margin: 10px; } spfo abouts main { width: auto; max-width: unset; } spfo abouts { width: 100%; display: block; } @media screen and (max-width: 999px) { cabo { display: block; } cabo bd bl { border-left: none; border-top: 1px solid var(--bc); } } /*Friend Component*/ .Recentlyadded crfo { display: block; } .Alfriends cpfo { display: grid; } .Recentlyadded cpfo { display: grid; } cpfo { display: none; grid-template-columns: 88px auto 55px; border: 1px solid var(--bc); border-radius: 11px; padding: 11px; align-items: center; gap: 2%; margin: 6px;} cpfo t { cursor: pointer; width: fit-content; } cpfo t:hover { text-decoration: underline; } cpfo name { font-weight: 500; cursor: pointer; width: fit-content; } cpfo>bd { display: flex; flex-direction: column; } cpfo>hd { height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 11px; border: 1px solid var(--bc); } cpfo name:hover { text-decoration: underline; } cpfo>hd>i { height: 100%; width: 100%; cursor: pointer; } cpfo>hd>i>img { height: 100%; width: 100%; object-fit: cover; }cpfo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cpfo>ft btn { display: flex; align-items: center; padding: 11px; border-radius: 55%; gap: 2%; height: 19px; width: 19px; justify-content: center; transform: rotate(90deg); cursor: pointer; } /*Aboutfriends */ cfrs>hd bx { display: flex; align-items: center; justify-content: space-between; } cfrs bx btns { display: flex; align-items: center; } cfrs bx btns btn { 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; } cfrs bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } cfrs bx t:hover { background: var(--bc); } cfrs bx t { display: block; margin: 6px; padding: 11px; color: var(--a); font-weight: 400; cursor: pointer; border-radius: 5px; } cfrs aa { margin: 6px; padding: 11px; cursor: pointer; white-space: nowrap; } .Alfriends aa.alfrns { border-bottom: 2px solid var(--a); color: var(--a); } .Recentlyadded aa.rcntadd { border-bottom: 2px solid var(--a); color: var(--a); } .Birthday aa.brthd { border-bottom: 2px solid var(--a); color: var(--a); } .Following aa.fllwng { border-bottom: 2px solid var(--a); color: var(--a); } cfrs aa:hover { background: var(--bc); border-radius: 5px; } .Alfriends aa.alfrns:hover { background: unset; border-radius: 0; } .Recentlyadded aa.rcntadd:hover { background: unset; border-radius: 0; } .Birthday aa.brthd:hover { background: unset; border-radius: 0; } .Following aa.fllwng:hover { background: unset; border-radius: 0; } cfrs>ft btn { display: flex; align-items: center; padding: 11px; border-radius: 6px; background: var(--bc); gap: 2%; justify-content: center; cursor: pointer; margin-top: 22px; } abtfrnds { display: flex; align-items: center; } cfrs { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cfrs>bd frns { display: grid; grid-template-columns: 50% 50%; } @media screen and (max-width: 999px) { abtfrnds { overflow: scroll; } cfrs>bd frns { display: block; } cfrs bx t { display: none; } } /*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%; } phts { display: flex; flex-wrap: wrap; } cfto>hd btn svg { fill: var(--bt); } /*Photos */ cfts>hd bx { display: flex; align-items: center; justify-content: space-between; } cfts bx btns { display: flex; align-items: center; } cfts bx btns btn { 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; } cfts bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } cfts bx t { display: block; margin: 6px; padding: 11px; color: var(--a); font-weight: 400; cursor: pointer; border-radius: 5px; } cfts { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cfts aa { margin: 6px; padding: 11px; cursor: pointer; } .YourPhotos aa.urphts { border-bottom: 2px solid var(--a); color: var(--a); } .Albums aa.albm { border-bottom: 2px solid var(--a); color: var(--a); } abtphts { display: flex; } cfts bx t:hover { background: var(--bc); } cfts aa:hover { background: var(--bc); border-radius: 5px; } .YourPhotos aa.urphts:hover { background: unset; border-radius: 0; } .Albums aa.albm:hover { background: unset; border-radius: 0; } @media screen and (max-width: 999px) { cfts bx t { display: none; } cpto { max-width: 187px; max-height: 186px; } cfts bx t { display: none; } } /* Video Component */ cvdo>hd i { display: block; height: 100%; width: 100%; } cvdo>hd i>img { height: 100%; width: 100%; } cvdo { height: 100%; width: 100%; display: block; position: relative; max-width: 171px; max-height: 241px; border-radius: 11px; overflow: hidden; margin: 3px; cursor: pointer; } cvdo>bd>t { position: absolute; height: 33px; width: 100%; z-index: 999999999; bottom: 0; display: grid; grid-template-columns: 22px auto; color: var(--b); align-items: center; padding: 0 11px; } cvdo>bd>t svg { fill: var(--b); } @media screen and (max-width: 999px) { cvds vdos { display: grid; grid-template-columns: 50% 50%; } } /* Videos Component */ cvds { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cvds aa { margin: 6px; padding: 11px; cursor: pointer; } abvds { display: flex; align-items: center; } .Yourvideos aa.urvds { border-bottom: 2px solid var(--a); color: var(--a); } .Savedvideos aa.svvds { border-bottom: 2px solid var(--a); color: var(--a); } cvds vdos { display: flex; flex-wrap: wrap; } @media screen and (max-width: 999px) { cvdo { max-width: 184px; max-height: 277px; } } /* 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; } } /* Groups Compnent */ cgrs>hd>bx { display: flex; align-items: center; justify-content: space-between; } cgrs { background: var(--bt); border-radius: 11px; display: block; padding: 22px; } cgrs>hd>bx btn { 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; } 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); } cgrs grp { display: grid; grid-template-columns: 50% 50%; } cgrs { margin: 0 11px; } @media screen and (max-width: 999px) { cgrs grp { display: block; } } /* Group Compnent */ sgps main { width: 100%; max-width: 1400px; } cgro { display: grid; grid-template-columns: 98px auto 0; border: 1px solid var(--bc); border-radius: 11px; padding: 11px; margin: 5px; background: var(--bt); align-items: center; } cgro>bd t h6 { display: flex; align-items: center; } cgro>hd { height: 88px; overflow: hidden; width: 88px; border-radius: 11px; } cgro>hd>i { height: 100%; width: 100%; } cgro>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cgro>bd t { display: flex; align-items: center; } cgro>bd i { height: 11px; width: 11px; margin-right: 5px; } cgro name { font-size: 1em; font-weight: 500; margin-bottom: 5px; display: block; } @media screen and (max-width: 999px) { sgps grps { display: block; padding: 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; } } /*Avatar Component*/ cavs>hd { display: flex; justify-content: space-between; } cavs>bd>pfphto { display: flex; justify-content: center; } cavs { display: block; padding: 11px; margin: 11px; } cavs>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cavs>hd>btn:hover { background: var(--bc); } cavs>hd h5 { font-weight: 400; } caio>i { height: 100%; width: 100%; } caio>i>img { height: 100%; width: 100%; } caio>bd btn { color: var(--a); padding: 11px; border-radius: 5px; display: grid; grid-template-columns: 26px auto; justify-content: center; background: var(--bc); margin: 6px auto; cursor: pointer; } caio>bd btn>i { height: 22px; width: 22px; } caio>bd btn>i>svg { fill: var(--a); } caio>hd>i { background-image: url(/0/images/Avatars.png); background-position: 0px 0px; background-size: auto; width: 500px; height: 154px; background-repeat: no-repeat; display: inline-block; } caio>hd { display: flex; justify-content: center; } caio { text-align: center; display: block; } @media screen and (max-width: 999px) { caio>hd>i { background-size: 100%; width: 100%; background-position: 0px 22px; } } } /* Bio Component */ 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; } /* CoverPhoto Component */ ccvo>hd { display: flex; justify-content: space-between; } ccvo>bd>pfphto { display: flex; justify-content: center; } ccvo { display: block; padding: 11px; margin: 11px; } ccvo>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } ccvo>hd>btn:hover { background: var(--bc); } ccio { display: flex; overflow: hidden; border-radius: 11px; border: 1px solid var(--bc); height: 211px; width: 80%; margin: 11px auto; } ccio>i { height: 100%; width: 100%; } ccio>i>img { height: 100%; width: 100%; object-fit: cover; } @media screen and (max-width: 999px) { ccio { width: auto; } } /* Featured Component */ cfeo>hd { display: flex; justify-content: space-between; } cfeo>bd>pfphto { display: flex; justify-content: center; } cfeo { display: block; padding: 11px; margin: 11px; } cfeo>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cfeo>hd>btn:hover { background: var(--bc); } cfeto>hd>i { background-image: url(/0/images/Featured.png); background-position: 0px 0px; background-size: auto; width: 334px; height: 192px; background-repeat: no-repeat; display: inline-block; filter: drop-shadow(0px 0px 3px #7d7d7d9c); } cfeto { display: flex; border-radius: 11px; margin: 11px; flex-direction: column; text-align: center; } @media screen and (max-width: 999px) { cfeto>hd>i { background-size: 100%; width: 100%; } } /* Introedit Component */ cito>hd { display: flex; justify-content: space-between; } cito>bd>pfphto { display: flex; justify-content: center; } cito { display: block; padding: 11px; margin: 11px; } cito>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cito>hd>btn:hover { background: var(--bc); } cinto>d>i { height: 100%; opacity: 0.5; } cinto { display: flex; overflow: hidden; border-radius: 11px; justify-content: center; flex-direction: column; } cinto>d { display: grid; grid-template-columns: 44px auto; align-items: center; white-space: nowrap; padding: 6px 0; margin: 6px 0; gap: 1%; width: fit-content; } cinto>d>t { cursor: text; } /* Pictureedit Component */ 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); } cdio { display: flex; overflow: hidden; height: 133px; width: 133px; border-radius: 55%; border: 1px solid var(--bc); } cdio>i { height: 100%; width: 100%; } /* 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; grid-template-columns: 49% 50%; position: relative; padding: 0; overflow: scroll; } smsn main { max-width: 100%; } smsu bl { display: block; margin: 11px; position: relative; } 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 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; } 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; height: calc(100% - 14px); 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 { display: block; margin: 11px; position: relative; } 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); } smsu .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; } smsu .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%; } smsu .nw>ft>aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smsu .nw>ft f { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } smsu .nw>ft d { text-align: center; font-size: 0.6em; width: 88%; margin: 11px auto; } smsu btns>aa:last-child { background: unset; } smsu form msnb>bl { margin: 0; padding: 11px; background: var(--bt); } smsu .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) { smsu d.aerea { display: grid; } smsu form { display: block; } } /* Zoom Alert*/ .alert alert{ opacity: 1; top: 0; } 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: 1px 5px 13px rgb(81 81 81 / 44%); display: block; max-height: 277px; min-height: unset; height: fit-content; max-width: 433px; position: relative; z-index: 2; overflow: hidden; text-align: center; width: 100%; margin: 11px; padding: 11px 11px; border-radius: 5px; }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; background: rgba(244, 244, 255, 0.22); font-family: monospace; font-size: 36px; border-radius: 7px; background: var(--b-t22); opacity: 0.7; padding: 2px; right: 21px; } alert exit svg { fill: var(--b); } alert exit:hover { opacity: 1; } modal info { display: flex ; flex-direction: column; justify-content: center; } alert info t { display: none; font-size: 1.22em; font-weight: 600; font-family: monospace; letter-spacing: 0; width: 90%; } alert text { font-family: Unbounded, sans-serif; letter-spacing: 0; font-size: 14px; text-align: left; color: var(--b); } modal>bl>ft { display: flex ; 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: 24px; width: 24px; border-radius: 11px; padding: 6px; overflow: hidden; border-radius: 55%; } alert bd { position: relative; display: grid ; grid-template-columns: 55px auto; align-items: center; } alert.success modal>bg { background: var(--c); } alert.failed modal>bg { background: var(--c); } alert modal>bg { background: var(--c); } alert.warning warning svg { fill: 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: 22px; margin-bottom: 44px; border-radius: 4px; border: solid 1px var(--c); box-shadow: -7px 11px 33px rgb(0 0 0 / 44%); padding: 9px 14px; top: 55px; } } /* 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; } /* 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 form { display: grid; grid-template-columns: 49% 50%; 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 { height: 66px; 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 { 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 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) { spfo .aerea { max-width: 1200px; margin: auto; } smps sidebar { width: 100%; max-width: 422px; } } @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 ccio { height: 100%; width: 100%; margin: 0; } 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; } /* Participant header */ cpho { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding-bottom: 11px; } cpho cover { max-height: 166px; border-radius: 11px; } cpho>bd { margin-top: -73px; display: block; padding: 0 22px; } cpho>bd>d { margin: 11px; margin-bottom: 0; } cpho>bd>d h4 { font-size: 1.22em; font-weight: 500; } cpho dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 55%; } cpho 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: 3px; height: 96px; width: 96px; } cpho upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 22px; right: 14px; top: 15px; border-radius: 50%; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px; bottom: 15px; grid-template-columns: 30px auto; width: 22px; overflow: hidden; } cpho>bd>d h6 { font-weight: 400; font-size: 0.88em; opacity: 0.6; } cpho>ft { display: block; padding: 0 22px; margin-top: 16px; } cpho>ft btn { display: flex; justify-content: center; background: var(--bc); border-radius: 5px; margin: 4px; align-items: center; font-size: 0.88em; padding: 8px 16px; font-weight: 400; position: relative; } cpho>ft btns { display: flex; } /* Personal Information */ cpio { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; padding: 22px; } cpio sl { margin: 11px 0; border-radius: 0; position: relative; height: unset; background: unset; } cpio sl select { font-size: 0.88em; font-weight: 400; } cpio sl>label { position: unset; margin-bottom: 4px; display: block; margin-left: 5px; } cpio sl>input { display: block; border-radius: 5px; margin-bottom: 11px; position: relative; overflow: hidden; background: var(--bc); border: 1px solid var(--bc); width: calc(100% - 22px); } cpio sl>input:focus { border-radius: 11px; } @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; } cpio { padding: 11px; margin: 11px; } bio { padding: 11px; } cpino { padding: 11px; } caco { 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); } cpino btns>aa i svg { fill: var(--a); } cpino btns>aa i { height: 18px; width: 18px; } smpcu pffs ff ft expnd:hover { background: var(--bc); } bio { display: block; margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } bio bl { background: var(--bc); padding: 22px; border-radius: 22px; margin-top: 11px; overflow: hidden; } cpino { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } cpino btns>aa { display: flex; width: fit-content; padding: 5px 11px; background: #e8f0f7; color: #4b7fd6; font-weight: 400; border-radius: 44px; align-items: center; justify-content: center; white-space: nowrap; margin-top: 11px; margin-right: 11px; } cpino btns { display: flex; padding: 0px; flex-wrap: wrap; margin: 11px 0; } cpino>ft>btn { white-space: nowrap; display: grid; grid-template-columns: 22px auto; justify-content: center; align-items: center; padding: 11px; border: 1px solid var(--bc); border-radius: 5px; font-size: 1em; font-weight: 400; margin-top: 11px; background: var(--aaa); color: var(--b); } cpino>ft>btn i { height: 22px; width: 22px; } caco aa { display: grid; grid-template-columns: 44px auto; gap: 2px; background: var(--bc); border-radius: 5px; padding: 1px; align-items: center; margin: 6px 0; text-decoration: underline; } caco { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } caco>ft btn { white-space: nowrap; display: grid; grid-template-columns: 33px auto; justify-content: center; align-items: center; padding: 6px; border: 1px solid var(--bc); border-radius: 5px; font-size: 1em; margin: 11px; font-weight: 400; background: var(--aaa); color: var(--b); margin-bottom: 0; } caco aa a { font-weight: 700; font-size: 0.88em; } caco aa svg { height: 44px; width: 44px; opacity: 0.8; } caco>ft btn i svg path { stroke: var(--b); } caco>ft btn i { height: 26px; width: 26px; } @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 ccio { height: 100%; width: 100%; margin: 0; } smpcu header { position: unset; } @media screen and (min-width: 999px) { smpcu .aerea { max-width: 1033px; 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 ccio { width: 100%; margin: 0; background: var(--bc); } 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 ccio { height: 100%; width: 100%; margin: 0; } 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%; gap: 1%; 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 */ sono userpff sidebar { width: 50%; } sono header { position: unset; } sono friends main { width: 100%; max-width: 100%; } sono friends { width: 100%; } sono Photos main { width: 100%; max-width: 100%; } sono Photos { width: 100%; } sono Videos main { width: 100%; max-width: 100%; } sono Videos { width: 100%; } sono Reels main { width: 100%; max-width: 100%; } sono Reels { width: 100%; } sono gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} sono abouts>main>d.main { padding-bottom: 22px; } sono btn { cursor: pointer; } sono grid { margin-top: 11px; } sono gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} sono gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } sono username{font-size: 0.55em; opacity: 0.66;} sono nv back>i { height: 33px; width: 33px; } sono cover { display: flex; position: relative; height: 100%; overflow: hidden; } sono ff>ft>bl op:hover { background: var(--bc); } sono pffs ff ft expnd:hover { background: var(--bc); } sono gd:hover { background: var(--bc); } sono pffs hd btn:hover { transform: scale(0.9); background: var(--a); } sono 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; } sono cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } sono cover ii img { object-fit: cover; height: 100%; width: 100%; } sono cover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 16px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 13px; grid-template-columns: 30px auto; width: unset; } sono ff>bd { margin-top: -76px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; padding-left: 30px; } sono 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; } sono 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; top: unset; } sono dppic ii img { height: 100%; width: 100%; border-radius: 100%; box-shadow: 0 0 0 3px var(--b); } sono inf name { display: grid; grid-template-columns: auto 33px; align-items: end; width: fit-content; } sono ff { grid-template-rows: 370px auto; display: grid; padding: 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } sono mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } sono ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } sono pffs btns btn { display: grid; grid-template-columns: 28px auto; white-space: nowrap; font-size: 1em; align-items: center; padding: 9px 22px; border-radius: 6px; background: var(--bc); gap: 2%; height: 30px; margin: 0 4px; justify-content: center; cursor: pointer; } sono pffs btns btn.this { background: var(--aa); color: var(--b); } sono pffs btns btn.this img { filter: invert(1); } pffs btns btn img { opacity: 0.7; height: 22px; width: 22px; } sono pffs { display: block; } sono pffs ff ft expnd svg { transform: rotate(-90deg); } sono pffs ff>ft>bl mg { display: flex; margin: 0; } sono pfinfo upld h5 { font-weight: 100; } sono pffs ff>ft>bl mg a.this { border-bottom: 2px solid; color: var(--c); } sono oppffs ff ft op { display: none; } sono pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } sono 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%); } sono mg>a>i { height: auto; width: auto; margin-top: 2px; } sono pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } sono ff mg a { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; } sono pffs ff>ft>bl mg b { display: flex; } pffs btns { display: flex; } sono ff>bd bl { display: flex; align-items: end; gap: 2%; white-space: nowrap; } sono 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; } sono pffs bd btn t { display: flex; justify-content: center; align-items: start; margin-bottom: 3px; font-weight: 500; opacity: 0.9; } sono ccio { width: 100%; height: 100%; margin: 0; } sono cino>bd>t { display: flex; justify-content: center; margin-top: 13px; } sono cino>bd>t h5 { font-weight: 400; font-size: 0.88em; } sono cino>ft d { display: grid; grid-template-columns: 26px auto; margin: 6px 0; padding: 6px 0; align-items: center; } sono cino>ft d i { height: 16px; width: 17px; opacity: 0.7; } sono cino>ft d a { font-weight: 500; color: var(--aa); } featured { display: block; padding: 11px; border-radius: 11px; margin-bottom: 11px; background: var(--b-t);} featured>bd { display: grid; overflow: scroll; grid-template-columns: 50% 50% 50% 50% 50%; } featured>hd { display: block; margin: 11px 0; } sono abouts main { width: 100%; max-width: unset; } sono pffs { display: block; background: var(--bt); margin-bottom: 11px; } sono abouts { width: 100%; } /* 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; max-width: 1100px; margin: auto; } } /* 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; } /* Wallet component */ cwlos>h4 { display:flex;} cwlo>hd i { filter: Unset; } cwlo>trc ft p { margin: unset; } cwlotrc ft p amount { color: var(--a); } cwlos cwlo>ft { display: flex; justify-content: end; } cwlo img { object-fit: contain; height: 77%; width: 77%; } cwlos>h4>a.this { background: var(--aaa); color: var(--b); } cwlos>h4>a { display: flex; background: var(--bc); border-radius: 23px; padding: 11px 22px; margin: 6px; font-weight: bold; position: relative; line-height: 1; justify-content: center; } cwlo name { letter-spacing: 0; font-size: 1em; font-weight: bold; overflow: hidden; display: block; white-space: nowrap; } cwlo>hd { height: 55px; width: 55px; border-radius: 15px; background: var(--bc); display: flex; justify-content: center; align-items: center; } cwlo { padding: 22px; box-shadow: var(--bs-bs);width: auto; margin: 7px 0; display: grid; grid-template-columns: 66px auto 111px; background: var(--bt); color: var(--c); border-radius: 14px; position: relative; } /* 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%; } 0 /* 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; } width:cswo>hd tbicon { display: grid; grid-template-columns: 50% 50%; align-items: center; background: var(--b1); height: auto; padding: 7px; border-radius: 11px; width: 8 } 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; } start grid:hover { background: var(--hover); } start { left: 0; right: 0; top: 55px; bottom: 0; position: absolute; overflow: hidden; display: block; transition: 333ms; z-index: 888888888888; backdrop-filter: blur(22px);-webkit-backdrop-filter: blur(22px); height: 0;background: var(--b-t95);} .start start { height: calc(100% - 44px); } .dark start bg{background:#000} .dark start bl{color:#111} .oo bb { background: blue;color:blue } ssts .oo oo { margin-left: 26px; } start aerea { position: absolute; left: 0; right: 0; top: 0px; bottom: 0; overflow: hidden; overflow-y: auto; padding-bottom: 11%; min-height: unset; } start bl { border-radius: 0; background: cersive; border: unset; color: var(--bc); padding: 22px; } start bl hd { color: var(--c); display: flex ; align-items: center; justify-content: space-between; } pinned ed h1 { font-size: 20px; } start bl hd dd { margin: 0; } 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); } start error,start dt{ position: absolute; top:11px; color: var(--c); font-size: 7px; left: 11;margin:0;height:11px; } start grid { min-height: 33px; padding: 11px; grid-template-columns: 60px auto; margin: 3px 0; position: relative; border-radius: 7px; } start grid h6 {font-size: 14px; display: flex; align-items: center;color:var(--c);font-weight: 500;} start code {display: block;padding: 11px;border-bottom:solid 1px var(--bc)} start grid>* { height: 22px;color: var(--c); margin:0} start 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} start .oo value {max-height: 34px;} start value>* { outline: 0; display: flex; align-items: center; } start 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; } start grid.this::before { content: ''; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 4px; background: var(--c); border-radius: 4px; } start grid[disabled]:hover:after{ color: #eef; background: rgba(12,21,31,0.88); } @media only screen and (max-width: 999px) { start aerea::-webkit-scrollbar { display: none; } } @media only screen and (min-width: 999px) { extra.start {max-width: 369px;} /*start { width: 333px; top: 55px; left: -333px;height: 100%; } */ start header { padding: 6px 2px; } start grid { padding: 2px 2px;margin: 3px 1px;} } @media only screen and (max-width: 1368px) { start { left:0px;top:0; } start { width: 252px; } } /* school start */ start bl inpct { display: flex ; align-items: center; padding: 0px 15px; border: 1px solid #EAE7EE; width: 100%; border-radius: 7px; box-shadow: 0px 0px 1px #000000; box-sizing: border-box; margin: 14px 0px 14px 0px; height: 36px; } start bl inpct i { display: flex ; height: 55%; width: fit-content; border-radius: 7px; justify-content: center; align-items: center; } start bl inpct input { color: #594173; font-size: 13px; font-weight: 700; outline: 0; display: block; max-width: 100%; border: 0; width: calc(100% - 58px); height: min-content; padding: 7px 1px; margin-left: 17px; } start bd>linee { display: flex ; align-items: center; padding: 1px 7px; width: 100%; border-radius: 14px; cursor: pointer; box-sizing: border-box; margin: 6px 0px 8px 1px; justify-content: space-between; } start bd>linee st { display: block; font-size: 12px; color: var(--b1); } start bl ft { display: block; } start bl wr { display: flex ; background: #F1EAFF; border-radius: 11px; padding: 12px 7px 16px 7px; flex-direction: column; gap: 9px; } start bl wr> hd { display: flex ; flex-direction: row; justify-content: space-between; color: var(--b1); } start bl wr>bd { display: flex ; flex-direction: column; justify-content: space-between; color: var(--b1); } start wr>bd txs { display: flex ; justify-content: space-between; padding: 1px 13px; } start wr>bd pwrs {width:208px;display:flex;height:8px;background:#BD9DFF;border-radius:11px;position:relative;margin:12px 12px 2px 12px; } start wr>bd pwr { border-radius: 11px; width: 50%; height: 100%; background-color: #6F2BFF; } start bl ft p { font-size: 15px; display: flex ; font-weight: 500; background-color: #fff; border-radius: 7px; padding: 7px 0px; align-items: center; justify-content: center; box-shadow: 1px 1px 4px #ddd; color: var(--b1); margin: 3px 13px; cursor: pointer; } /* 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: 34px; } 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; } setting { margin: 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 { display: block; padding: 11px; margin: 11px; background: var(--bt); border-radius: 11px; } csas bl>hd>i { max-width: 290px; max-height: 107px; width: 100%; height: 100%; margin: 11px; margin-bottom: 22px; } 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 { 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; } chats>ft { display: flex; justify-content: center; align-items: center; padding: 22px; border-top: 1px solid var(--bc); background: var(--bt); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } chats { display: block; background: var(--bt); border-right: 1px solid var(--bc); position: relative; } /* 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 */ /* Dp Photo Component */ dppic { display: block; 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; } dppic>ii>img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } dppic>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; top: unset; } /* Filter function Commponent */ cflfo { display: block; padding: 11px; border-bottom: 1px solid var(--bc); margin-bottom: 0; } cflfo>hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } cflfo>hd btn { display: flex; height: 33px; width: 33px; background: var(--bc); border-radius: 55%; align-items: center; margin: 0 4px; padding: 1px; } cflfo>hd btns { display: flex; } cflfo>bd>sl { display: grid; grid-template-columns: 44px auto; align-items: center; height: 33px; border-radius: 55px; margin: 0; } cflfo sl>i { height: 22px; width: 22px; padding: 5px; margin-left: 5px; } cflfo sl>input { position: absolute; border-radius: 55px; padding: 0 44px; width: auto; left: 0; right: 0; top: 0; bottom: 0; padding-right: 11px; } cflfo btn:hover { background: var(--hover); } cflfo>ft btn { display: block; padding: 11px; font-weight: 500; border-radius: 22px; margin-left: 5px; } cflfo>ft btns { display: flex; } cflfo>ft btn.this { background: var(--at); color: var(--a); } /* Chat user id commponent (Conversation) */ ccuo { display: grid; grid-template-columns: 55px 72% 33px; padding: 11px; margin: 11px; align-items: center; border-radius: 11px; } ccuo>hd { height: 48px; width: 48px; border-radius: 55%; overflow: hidden; box-shadow: 0 0 0 1px var(--bc); } ccuo>hd>img { object-fit: cover; height: 100%; width: 100%; } ccuo>bd>p { margin: 4px 0; font-weight: 400; font-size: 0.77em; white-space: nowrap; width: 99%; overflow: hidden; text-overflow: ellipsis; } ccuo name { font-weight: 500; } ccuo:hover { background: var(--hover); } /* Vonversation */ chat>hd>trc { display: grid; grid-template-columns: 55px auto auto; align-items: center; padding: 11px; box-shadow: 0 1px 7px var(--bc); } chat>hd>trc>hd { display: block; height: 44px; width: 44px; overflow: hidden; border-radius: 55%; } chat { display: block; background: var(--bt); overflow: hidden; height: 265vh; } chat>hd>trc>hd>i { height: 100%; } chat>hd>trc>hd>i>img { object-fit: cover; height: 100%; width: 100%; } chat>hd>trc>ft { display: flex; justify-content: end; } chat>hd>trc btn { height: 33px; width: 33px; display: flex; align-items: center; justify-content: center; margin: 4px; border-radius: 55%; padding: 1px; } chat>hd>trc btn:hover { background: var(--hover); } chat>hd>trc>ft>btns { display: flex; } chat cnvrsstion>p { text-align: center; margin: 0; } chat cico { display: flex; padding: 22px; margin: 11px; justify-content: end; flex-direction: column; align-items: center; margin-bottom: 0; } 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 { grid-template-columns: 366px auto; height: 100%; } chat cnvrsstion { display: block; height: 100%; } scss sidebar { height: 100%; } scss d.sidebar { height: 100%; } scss grid { height: 100%; } /* Chat commponent */ 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.88em; justify-content: end; margin-bottom: 11px; } /* input smss */ ciso>bd>sms { display: block; background: var(--aaa); color: var(--b); font-weight: 500; padding: 6px 11px; border-radius: 22px 5px 5px 22px; font-size: 0.88em; } 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; } ciso>hd>btns { display: flex; transition: 99ms; position: relative; z-index: -1; height: 0; opacity: 0; } ciso>hd>btns>btn { display: flex; height: 30px; width: 30px; justify-content: center; align-items: center; margin: 0 5px; border-radius: 55%; } ciso>hd>btns>btn:hover { background: var(--hover); } ccms inputchats ciso:last-child sms { border-radius: 22px 5px 22px 22px; } ciso:first-child>bd>sms { border-radius: 22px 22px 5px 22px; } cpco { display: block; background: var(--bt); border-left: 1px solid var(--bc); } /* output smss */ ccms coso { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 0 5px; margin-bottom: 2px; justify-content: start; } coso>hd { display: block; height: 33px; width: 33px; overflow: hidden; border-radius: 55%; } coso>hd>i { height: 100%; } 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%; } coso>bd { display: block; width: fit-content; } 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; } /* Send Messege commponent */ csmo { display: grid; padding: 11px; grid-template-columns: 34% 55% 11%; align-items: center; background: var(--bt); backdrop-filter: blur(20px); border-top: 1px solid var(--bc); } csmo btns { display: flex; } csmo btns>btn { display: flex; height: 33px; width: 33px; justify-content: center; align-items: center; border-radius: 55%; margin: 4px; } csmo btns>btn>i { height: 77%; } csmo>ft btn { padding: 4px; height: 25px; width: 25px; } csmo>ft btn:last-child { display: none; } csmo btns>btn:hover { background: var(--hover); } csmo>bd>sl { display: grid; grid-template-columns: auto 33px; align-items: center; height: 33px; border-radius: 22px; margin: 0; } csmo sl>input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0 33px; width: auto; padding-left: 11px; } csmo>bd>sl btn { height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; grid-column-start: 2; border-radius: 55%; padding: 4px; margin: 1px; } csmo>bd>sl btn>i { height: 22px; width: 22px; } 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); } /* Conversation in only Desktop version */ @media screen and (min-width: 999px) { chat>bd { display: block; overflow-y: scroll; } chats>bd { display: block; height: 28.59%; overflow-y: scroll; } } /* Conversation in phone version */ @media screen and (max-width: 999px) { scss sidebar { display: none; } chat { display: block; } chats { display: none; } scss main grid { display: block; } chats>ft { display: none; } scss d.aerea { height: auto; } cflfo>bd>sl { height: 44px; margin: 0 11px; width: auto; } chat>bd { display: block; overflow-y: scroll; } screen#Conversation1 { overflow: hidden; } } /* Coupons steps Commponent */ ccss { display: block; padding: 11px; margin: 11px; } ccss ccso { 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); } 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; } cscs { position: relative; padding: 46px 20px 40px 20px; border-radius: 10px; background-size: 100% 100%; background-repeat: no-repeat; display: block; background-image: url(/0/IMG/Weather.png); margin: 22px; } 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: -23px; } 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; } 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; max-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; } /* Offers commponent (Coupons) */ 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: 133px; 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; } cstr>ccfrs { display: flex; margin: 11px 0; } 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); } 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: 163px; 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; } name { font-weight: 600; display: block; } /* 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; } cmus { display: block; overflow-x: scroll; } @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; } } /* Groups Group component and Groups screen css */ requests>hd { display: block; padding: 11px; } allgroups>hd { display: flex; padding: 11px; justify-content: space-between; align-items: center; } cgrpo { display: block; padding: 11px; box-shadow: var(--bs-b); margin: 5px; background: var(--bt); border-radius: 11px; max-width: 444px; } cgrpo>hd>bl { display: grid; grid-template-columns: 88px auto; align-items: center; } cgrpo hd>i { height: 77px; width: 77px; } cgrpo hd>i>img { height: 100%; width: 100%; object-fit: cover; } cgrpo hd>i { height: 77px; width: 77px; border-radius: 11px; overflow: hidden; } cgrpo name { display: block; } cgrpo bd>t { font-size: 0.88em; } cgrpo btns { display: grid; grid-template-columns: auto 55px; gap: 2%; margin-top: 11px; } cgrpo btns>btn:first-child { background: var(--aaa); color: var(--b); } cgrpo btns>btn { display: block; padding: 5px 11px; background: var(--bc); border-radius: 5px; align-content: center; text-align: center; } sgps grps { display: grid; grid-template-columns: 33% 33% 33%; } @media screen and (max-width: 999px) { sgps grps { display: block; } } /* 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%; } } /* 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; } } /* 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 */ cpvo>hd>btn { display: block; padding: 4px; height: 33px; width: 33px; place-content: center; } cuio>hd { display: flex; align-items: center; } cuio>hd>i { height: 33px; width: 33px; margin-right: 11px; border-radius: 55%; overflow: hidden; background: var(--bt); } cuio>hd>btn { display: block; padding: 8px 22px; text-align: center; margin-left: 11px; box-shadow: var(--bt-bx); border: 1px solid var(--bc); font-size: 0.88em; border-radius: 5px; background: var(--aaa); color: var(--b); } cuio inpt { display: grid; grid-template-columns: 22px auto; padding: 2px 9px; background: var(--b-t22); backdrop-filter: blur(20px); white-space: nowrap; align-items: center; border-radius: 22px; width: auto; overflow: hidden; margin-top: 11px; } cuio>ft { display: grid; gap: 1%; grid-template-columns: 40% 30% 26%; } crelo { display: flex; } crels { display: block; height: 100vh; padding: 22px; margin: 11px; background: var(--bg); border-radius: 22px; max-width: 533px; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scroll-snap-type: x mandatory; scroll-padding: 0; overflow-x: scroll; width: 100%; height: 90%; position: absolute; } cpvo video { display: block; width: 100%; height: 100%; object-fit: cover; } cuio inpt>t { display: block; padding-right: 7px; overflow: hidden; } cpvo>bd>vd { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } crels cpvo { height: 85vh; display: flex; position: relative; flex-direction: column; justify-content: space-between; padding: 22px; width: 90%; color: var(--b); overflow: hidden; border-radius: 7px; margin-bottom: 22px; } cuio tags>bd { display: flex; flex-wrap: wrap; } crelo>bd>btns { display: block; width: 77px; } crelo>bd { display: flex; justify-content: end; flex-direction: column; } crelo>bd>btns>btn { display: grid; grid-template-rows: 44px auto; text-align: center; padding: 5px; padding-bottom: 0; margin-bottom: 11px; } cuio tags>bd>a { color: var(--b); margin: 2px; } cuio inpt svg { fill: var(--b); } cuio videotitle { display: block; height: 56px; overflow: hidden; } cuio videotitle>p { margin: 0; margin-top: 11px; } /* meeting particiapant for dashboard */ cmpco { display: block; text-align: center; margin: 4px; padding: 11px; position: relative; background: var(--bt); border-radius: 11px; box-shadow: var(--bt-bx); } cmpco>hd>i>img { width: 100%; height: 100%; object-fit: cover; } cmpco>hd>i { display: block; height: 66px; width: 66px; margin: auto; border-radius: 55%; overflow: hidden; } cmpco name { display: block; margin: 11px; margin-bottom: 0; } cmpcs users { display: grid; grid-template-columns: 33% 33% 33%; } cmpcs { display: block; padding: 11px; background: var(--bt); margin: 11px; border-radius: 11px; } cmpcs>hd>a>i { height: 20px; width: 15px; } cmpco>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* 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 img { 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; } /* Post component */ cupo d>i { height: 50px; width: 50px; overflow: hidden; border-radius: 55%; } cupo tt { display: flex; align-items: center; justify-content: space-between; } cupo name { font-weight: 600; } cupo>hd>d { display: grid; grid-template-columns: 55px auto; } cupo>hd { display: flex; align-items: center; justify-content: space-between; } cupo>hd>btn { display: flex; padding: 11px; height: 22px; width: 22px; align-items: center; justify-content: center; margin: 4px; } cupo tt>t { flex: none; margin-right: 11px; } cupo bl>gfs { display: flex; align-items: center; margin: 11px 0; } cupo btns>btn:last-child { margin-right: 0; } cupo bl>gfs>gf { display: grid; grid-template-rows: 55px auto; margin: 4px; padding: 4px; justify-content: center; text-align: center; } cupo bl>gfs>gf>i { display: flex; padding: 11px; height: 33px; width: 33px; background: #c9cdf661; border-radius: 55%; font-size: 20px; } cupo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin-top: 11px; } cupo bl>gfs>gf>i:last-child { background: var(--aaa); } cupo bl>gfs>gf>t { display: flex; background: var(--bt); margin: 0 auto; border-radius: 11px; font-size: 0.88em; margin-top: -12px; backdrop-filter: blur(20px); height: 20px; align-items: center; justify-content: center; width: 33px; box-shadow: 0 2px 4px var(--bc); } cupo bl>gfs>gf>i>svg { height: 22px; width: 22px; fill: var(--b); } cupo btns { display: flex; justify-content: end; background: var(--bc); border-radius: 11px; padding: 11px; width: auto; margin: 0; margin-top: 18px; } cupo btns>btn>i { height: 22px; width: 22px; margin-right: 11px; } cupo btns>btn { background: transparent; height: auto; display: flex; margin: 5px 11px; } cupo bl>gfs>gf:first-child { margin-left: 0; padding-left: 0; } cupo d>i>img { height: 100%; width: 100%; object-fit: cover; } cupo btns>btn:hover { background: transparent; } /* 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; } /* 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 Apple Users */ start { -webkit-backdrop-filter: blur(20px); } /* 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; } /* Nav */ cnvo { display: grid; padding: 22px; margin: 11px; grid-template-columns: auto 122px 20%; position: relative; align-items: center; padding-bottom: 0; } cnvo btns { display: flex; align-items: center; } cnvo btns>btn { display: block; padding: 4px; height: 33px; width: 33px; background: var(--bt); place-content: center; border-radius: 11px; margin: 5px; } cnvo>ft>prf { display: grid; text-align: end; grid-template-columns: auto 66px; align-items: center; } cnvo prf>bd>i { display: block; height: 55px; width: 55px; border-radius: 55%; overflow: hidden; background: var(--bt); margin: 11px; } @media screen and (max-width: 999px) { cnvo>ft { display: none; } cnvo { display: flex; padding: 11px; margin: 0; justify-content: space-between; } } /* Dashboard Overview */ covs { display: block; padding: 11px; margin: 11px; padding-bottom: 0; margin-bottom: 0; } covs ovrvs { display: flex; overflow-y: auto; scroll-behavior: smooth; } covo { 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>hd { display: flex; align-items: center; padding: 11px; padding-top: 0; white-space: nowrap; font-weight: 500; } covo>hd>i { height: 22px; width: 22px; margin-right: 7px; } covo>ft { display: flex; justify-content: space-between; align-items: center; } cnvo>ft>prf>hd>t { font-size: 0.88em; color: var(--c0); } covo>ft p { color: var(--aa); font-weight: 500; margin: 0; } covo>ft>t { display: flex; align-items: center; color: var(--c0); } covo:first-child>ft>t { color: var(--bt); } covo:first-child { background: var(--aaa); color: var(--b); } covo:first-child>ft p { color: var(--b); } @media screen and (max-width: 999px) { covs { margin: 5px; padding: 0; } } /* Person Component */ cprso { display: block; background: var(--bt); border-radius: 22px; padding: 22px; margin: 5px; position: relative; } cprso>hd { display: flex; align-items: center; justify-content: space-between; } cprso bl { display: grid; grid-template-columns: 55% 45%; margin-top: 15px; } cprso form { position: relative; padding: 0 5px; } cprso bl>hd { display: block; max-width: 211px; overflow: hidden; border-radius: 22px; position: relative; } cprso bl>hd>i { height: 100%; width: 100%; } cprso bl>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cprso bl>hd>btn { display: grid; grid-template-columns: 33px auto; justify-content: center; max-width: 66%; margin: 22px auto; position: absolute; z-index: 999; bottom: 0; background: var(--bg); backdrop-filter: blur(22px); border-radius: 33px; padding: 7px 22px; align-items: center; color: var(--aa); font-weight: 500; font-size: 0.88em; left: 0; right: 0; } cprso form>sl { display: block; background: transparent; border-bottom: 1px solid var(--bc); border-radius: 0; margin: 0 4px; margin-bottom: 5px; height: auto; } cprso form>sl>label { position: unset; font-size: 0.77em; font-weight: 500; } cprso form>sl>input { font-weight: 500; padding: 11px 0; width: 100%; height: auto; font-size: 0.88em; } cprso form>sl>input:focus { box-shadow: unset; } cprso bl>hd>btn svg { fill: var(--aa); } covo:first-child { background: var(--aaa); color: var(--b); } @media screen and (max-width: 999px) { cprso bl { display: block; } cprso bl>hd { max-width: unset; min-height: 288px; } } /* Ratio component */ crtoo { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } crtoo>hd { display: flex; justify-content: space-between; align-items: center; } crtoo rto { display: flex; height: 166px; width: 166px; position: relative; align-items: center; justify-content: center; text-align: center; margin: 22px auto; padding: 11px; } crtoo rto>i { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; } crtoo rto p { margin: 0; color: var(--c0); font-weight: 500; } crtoo rto h5 { font-size: 1.1em; } crtoo>ft>rgs { display: grid; grid-template-columns: 33% 33% 33%; } crtoo>ft>rgs p { margin: 0; font-size: 0.77em; color: var(--c0); font-weight: 400; } crtoo>ft>rgs>rg { display: grid; grid-template-columns: 22px auto; } crtoo rgs>rg>o { display: block; height: 9px; width: 9px; border-radius: 11px; background: rgb(37 110 244); margin: 4px; } crtoo rg:nth-child(3)>o { background: #f32562; } crtoo rg:nth-child(2)>o { background: rgb(243 169 37); } /* Time Traking */ ctrks { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } ctrks>hd { display: flex; justify-content: space-between; align-items: center; } ctrko { display: grid; grid-template-columns: 55px auto 55px; padding: 11px; margin-bottom: 5px; border-bottom: 1px solid var(--bc); position: relative; align-items: center; } ctrko>hd>i { height: 33px; width: 33px; border: 1px solid var(--bc); border-radius: 55%; padding: 5px; } ctrko>ft>btn { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; border-radius: 11px; } cexfo { display: block; background: var(--bt); box-shadow: var(--bs-b); border-radius: 22px; margin: 22px 11px; overflow: hidden; } cexfo>hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--bc); background: var(--bc); } cexfo>hd>d { display: flex; align-items: center; font-weight: 600; } cexfo>hd>d>i { height: 11px; width: 11px; background: var(--bt); border-radius: 55%; padding: 7px; margin-right: 7px; } cexfo>hd>btn { height: 33px; width: 33px; transform: rotate(90deg); display: flex; align-items: center; justify-content: center; transition: 333ms; } cexfo>bd { display: flex; justify-content: space-between; padding: 22px; align-items: center; height: 0; transition: 333ms; opacity: 0; visibility: hidden; overflow: hidden; padding-top: 0; padding-bottom: 0; } cexfo.expnd>hd>btn { transform: rotate(-90deg); } cexfo>bd>btn { display: flex; height: 33px; width: 33px; background: var(--aaa); border-radius: 11px; padding: 5px; align-items: center; justify-content: center; } cexfo>bd>btn svg { fill: var(--b); } cexfo.expnd>bd { height: auto; visibility: visible; padding-top: 22px; padding-bottom: 22px; opacity: 1; } /* 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 */ 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; } } /* 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; } .desktop { display: none; } } /* 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; } /* 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; } 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 is>i { height: 16px; width: 16px; margin-right: 3px; } 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; } cpdo { display: block; padding: 22px; background: var(--bt); border-radius: 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%; } 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; } 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; } cmbop>bl { background: var(--bt); padding: 22px; border-radius: 22px; } 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; } cpplo { grid-template-columns: 66px auto 55px; } } /* Upcoming events */ cneo { display: grid; grid-template-rows: 144px auto; text-align: center; padding: 22px; margin: 11px; } cneo>i { height: 133px; width: 133px; margin: auto; opacity: 0.7; } /* Upcoming events component (Group) */ cgueo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin: 11px; } cgueo>hd { display: flex; justify-content: space-between; align-items: center; } cgueo>hd btn { display: block; background: var(--bc); border-radius: 5px; padding: 11px 22px; margin: 0 4px; } cgueo>hd btns { display: flex; } cgueo>hd btn.this { background: var(--aaa); color: var(--b); } cgpes { display: block; margin-top: 11px; background: var(--bt); padding: 22px; border-radius: 11px; } @media only screen and (max-width: 999px){ cgueo>hd btn { padding: 11px; } cgueo>hd { display: block; } cgueo>hd btns { margin-top: 11px; } } /* Upcoming event component (Group) */ cevo>hd>i { height: 130px; width: 122px; overflow: hidden; border-radius: 11px; } cevo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cevo time { font-size: 0.88em; font-weight: 500; display: block; } cevo>bd>t { font-size: 1.44em; font-weight: 600; } cevo evid { display: flex; align-items: center; margin: 5px 0; } cevo evid>i { height: 22px; width: 22px; border-radius: 55%; overflow: hidden; margin: 4px; margin-left: 0; } cevo evid p { margin: 0; } cevo evid t { font-weight: 500; } cevo { display: grid; grid-template-columns: 144px auto; background: var(--bt); border-radius: 11px; padding: 11px; margin: 5px 0; box-shadow: var(--bs-b); } cevo btns { display: flex; align-items: center; } cevo btns>btn { display: flex; padding: 11px; height: 40px; width: 55px; background: var(--bc); border-radius: 5px; place-content: center; } cevo btns>btn>i { transform: rotate(90deg); height: 17px; width: 17px; } /* meeting host */ smho userpff 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 btn: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; } smho ccio { height: 100%; width: 100%; margin: 0; } @media screen and (min-width: 999px) { smho sidebar { width: 44%; } smho .aerea { flex-direction: unset; max-width: 1100px; margin: auto; }} /* About component (Group) */ cago { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; margin-top: 0; } cago bl>d>hd>i { height: 19px; width: 19px; opacity: 0.7; margin: 4px; margin-left: 0; } cago bl>d { display: grid; grid-template-columns: 33px auto; margin-bottom: 11px; } cago bl>d p { margin: 0; font-size: 0.78em; } cago bl>d t { font-weight: 500; } cago>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cago>bd { display: block; padding: 11px; } /* Members component (Group) */ cmgo mmbrs { display: flex; align-items: center; padding: 5px 0; } cmgo mmbrs>i { height: 33px; width: 33px; overflow: hidden; border-radius: 55%; margin: 2px; box-shadow: var(--bs-b); } cmgo>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cmgo { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } cmgo>ft>btn { display: block; padding: 11px; text-align: center; margin: 11px; margin-bottom: 0; background: var(--aaa); color: var(--b); border-radius: 7px; } cmgo>bd { display: block; padding: 11px; } cmgo>hd>h4>t { opacity: 0.7; } /* Activity component (Group) */ cgato { display: block; background: var(--bt); padding: 22px; border-radius: 11px; margin: 11px; } cgato>hd { padding-bottom: 22px; display: block; border-bottom: 1px solid var(--bc); } cgato bl>d>hd>i { height: 19px; width: 19px; opacity: 0.7; margin: 4px; margin-left: 0; } cgato bl>d { display: grid; grid-template-columns: 33px auto; margin-bottom: 11px; } cgato bl>d t { font-weight: 500; } cgato>bd { display: block; padding: 11px; } cgato bl>d p { margin: 0; font-size: 0.78em; } smmro goals { display: grid; background: var(--b-t); margin: 11px 0; border-radius: 22px; margin-top: 11px; padding: 11px; grid-template-columns: 50% 50%; } 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; } spfo ccio { width: 100%; height: 100%; } 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; } suso ccio { height: 100%; width: 100%; margin: 0; } @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; } } /*Profile*/ spfo userpff sidebar { width: 50%; } spfo header { position: relative; } spfo friends main { width: 100%; max-width: 100%; } spfo friends { width: 100%; } spfo Photos main { width: 100%; max-width: 100%; } spfo Photos { width: 100%; } spfo Videos main { width: 100%; max-width: 100%; } spfo Videos { width: 100%; } spfo Reels main { width: 100%; max-width: 100%; } spfo Reels { width: 100%; } spfo gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} spfo abouts>main>d.main { padding-bottom: 22px; } spfo btn { cursor: pointer; } spfo grid { margin-top: 11px; } spfo gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} spfo gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } spfo username{font-size: 0.55em; opacity: 0.66;} spfo nv back>i { height: 33px; width: 33px; } spfo cover { display: flex; position: relative; height: 100%; overflow: hidden; } spfo ff>ft>bl op:hover { background: var(--bc); } spfo btn:hover { background: var(--bc); } spfo pffs ff ft expnd:hover { background: var(--bc); } spfo gd:hover { background: var(--bc); } spfo 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; } spfo cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } spfo cover ii img { object-fit: cover; height: 100%; width: 100%; } spfo 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; } spfo ff>bd { margin-top: -44px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; } spfo 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; } spfo 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; } spfo dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } spfo 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; } spfo mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } spfo ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } spfo ff bd bl:nth-child(1) { display: grid; grid-template-columns: 187px auto; align-items: end; margin-left: 22px; } spfo ff bd btn { display: grid; grid-template-columns: 33px auto; margin: 4px; white-space: nowrap; font-size: 1.2em; align-items: center; padding: 5px 11px; border-radius: 6px; background: var(--bc); gap: 2%; height: 33px; cursor: pointer; place-content: center; } spfo ff bd btn.this { background: var(--aaa); color: var(--b); } spfo ff bd btn.this img { filter: invert(1); } spfo ff bd btn.this svg { fill: var(--b); } spfo pffs { display: block; background: var(--bt); margin-bottom: 11px; } spfo pffs ff ft expnd svg { transform: rotate(-90deg); } spfo pffs ff>ft>bl mb { display: flex; margin: 0; } spfo pfinfo upld h5 { font-weight: 100; } spfo pffs ff>ft>bl mb aa.this { border-bottom: 2px solid; color: var(--c); } spfo oppffs ff ft op{ display: none; } spfo pffs bd btn h6 { font-weight: 400; } spfo pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } spfo 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; } spfo mg>a>i { height: auto; width: auto; margin-top: 2px; } spfo pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } spfo 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; } spfo expnd svg { height: 22px; width: 22px; } spfo 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; } spfo cmopo>d { height: 16px; margin: 0; margin-bottom: 4px; } @media screen and (max-width: 999px) { spfo ff bd btn:last-child { display: flex; } spfo pffs btns { display: grid; margin-top: 22px; grid-template-columns: 40.3% 40.3% 19.3%; } spfo sidebar { width: auto; margin: 11px; z-index: 0; position: relative; } spfo pffs ff bd bl:nth-child(1) { display: flex; flex-direction: column; text-align: center; align-items: center; } spfo pffs ff>bd { display: block; } spfo ff { grid-template-rows: 163px auto; padding: 0 11px; } spfo ff ft expnd { display: none; } spfo 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; } spfo pffs { display: block; background: var(--b-t); } spfo ff bd bl:nth-child(2) {display: flex; margin: 11px auto; justify-content: center; } spfo upld h5 { display: none; } spfo 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; } spfo ff bl ft op { display: none; } spfo 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; } spfo cover upld h5 { font-weight: 100; } spfo bl op svg { height: 22px; width: 22px; margin: auto; } spfo pffs hd btn svg { fill: var(--b-t); height: 22px; width: 22px; } spfo ccio { height: 100%; width: 100%; margin: 0; } @media screen and (min-width: 999px) { spfo sidebar { width: 44%; } spfo .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; } } @media screen and (max-width: 450px) { aa.frns { display: none; } aa.rels { display: none; } } @media screen and (max-width: 300px) { aa.Abt { display: none; } } .Posts a.psts { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Photos a.phts { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .About a.abt { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Friends a.frns { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Videos a.vdos { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .Check a.chek { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .More a.mor { border-bottom: 2px solid var(--c); border-radius: 0; opacity: 1; font-weight: 500; } .More .mor a>i>svg { opacity: 1; } /*Totalposts Component*/ ctpo { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin: 11px 0; } 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; } /*Intro Component*/ cino dvv h6 { font-weight: 400; font-size: 0.88em; display: flex; align-items: center; } cino { display: block; padding: 22px; background: var(--b-t); border-radius: 11px; margin-bottom: 11px; } cino btn { display: flex; justify-content: center; padding: 11px; margin: 11px; background: var(--bc); border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 0.88em; } /*Check-ins */ cchs { background: var(--bt); border-radius: 11px; display: block; padding: 11px; margin: 0 11px; } cchs>hd>bx { display: flex; align-items: center; justify-content: space-between; } cchs>hd>bx>btn { 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; } cchs bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } spfo checkins { width: 100%; } spfo checkins >main { width: 100%; max-width: 100%; } chkns cemo { display: flex; } /*Totalfriends Component */ cfro { display: block; padding: 11px; background: var(--b-t); border-radius: 11px; margin: 11px 0; } 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; } /*Composer Component */ ccpo>bd { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; width: unset; margin: unset; } ccpo>hd i { display: block; border-radius: 55%; overflow: hidden; height: 40px; width: 40px; } ccpo>hd i img { height: 100%; width: 100%; object-fit: cover; } ccpo>bd btn { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 5px; margin: 4px; align-items: center; padding: 1px; } cmpsr>bd btn:hover { background: var(--bc); border-radius: 6px; } ccpo>hd { display: grid; grid-template-columns: 44px auto; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bc); padding-bottom: 11px;} ccpo { display: block; background: var(--b-t); padding: 22px; border-radius: 11px; margin-bottom: 11px; padding-bottom: 0; } born div h6:nth-child(2) { font-weight: 100; } ccpo>hd btn { display: block; padding: 11px; background: var(--bc); border-radius: 24px; } ccpo>btn h5 { font-weight: 500; } @media screen and (max-width: 999px) { ccpo bd btn { min-inline-size: max-content; } } cpino>ft { margin-top: 22px; } caco>ft { margin-top: 22px; } /*Tablist Component*/ tblst aa h5 { font-weight: 600; } ctbo>hd bl btn { white-space: nowrap; display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: var(--bc); border-radius: 5px; margin: 4px; align-items: center; padding: 5px 11px; } ctbo hd i img { height: 100%; width: 100%; object-fit: cover; } tblst aa { display: grid; grid-template-columns: 33px auto; justify-content: center; gap: 2%; background: transparent; border-radius: 0; margin: 4px; align-items: center; padding: 1px; margin-bottom: 0; } ctbo>hd bl btn:hover { background: var(--bc); } ctbo>hd bl { display: flex; align-items: center; padding: 0; border-bottom: 1px solid var(--bc); justify-content: space-between; padding-bottom: 6px; } ctbo { display: block; background: var(--b-t); padding: 22px; border-radius: 11px; margin-bottom: 11px; padding-bottom: 0; } tblst { display: grid; grid-template-columns: 50% 50%; place-content: center; align-items: center; justify-content: center; } ctbo>hd bl bd { display: flex; } .listview aa.lstvw { border-bottom: 2px solid var(--c); opacity: 1; } .gridview aa.grdvw { border-bottom: 2px solid var(--c); opacity: 1; } aa.grdvw svg { opacity: 0.8; } .gridview aa.grdvw svg { opacity: 1; } ctbo>hd bl btn h5 { font-weight: 500; } /* 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; } /*Post component*/ cpso btns { cursor: pointer; } cpso time {text-align: unset; } cpso t input { background: unset; } cpso:first-child { margin-top: 0; } cpso ft btn:hover { background: var(--bc); } cpso input { background: unset; width: 100%; font-weight: 400; border: none; padding: 11px; height: auto; } cpso msg { display: none; gap: 2%; padding: 11px 0; } cpso cmt { display: flex; flex-direction: column; } cpso id i { border-radius: 50%; background: var(--bc); } cpso>ft cmt btns { display: flex; justify-content: start; } cpso>bd>i>img { height: 100%; width: 100%; object-fit: cover; } cpso msg bd i { display: block; height: 55px; padding-bottom: 11px; } cpso>ft cmt btns { display: flex; justify-content: start; border: none; margin-left: 22px; } cpso>ft { display: block; padding: 11px; padding-top: 0; } cpso hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } cpso ic svg { height: 20px; } brn { display: block; text-align: center; padding-bottom: 44px; font-size: 1.55em; } brn>hd { display: flex; justify-content: center; } cpso brn hd i { height: 44px; width: 44px; background: var(--a); border-radius: 55%; margin: 6px; } brn bd h5 { font-weight: 500; } cpso { display: block; background: var(--b-t); border-radius: 11px; padding: 0; } 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 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; } cpso>bd>i { height: 100%; } cpso comant { display: none; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } cpso hd ft>i:active { background: var(--bc); } cpso hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } cpso hd d bd { text-align: justify; font-size: 0.88em; } cpso>bd { display: block; border-radius: 0; max-height: 455px; overflow: hidden; } cpso trc ft { display: flex; justify-content: end; } cpso 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; margin-bottom: 0; } cpso ft btn i { height: 23px; width: 23px; } cpso ft t { width: auto; margin: 0; font-size: 0.88em; text-align: center; } cpso p { font-size: 11px; margin: 0; } cpso dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} cpso hd i { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 6px; } cpso trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: center; margin-bottom: 11px; padding: 22px; padding-bottom: 0; } cpso time { display: block; width: auto; float: unset; } cpso name { font-size: 1em; font-weight: 500; } cpso>ft btns { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; justify-content: space-around; width: unset; margin: unset; padding: 0; } cpso comant>bd { display: grid; align-items: center; height: 44px; background: var(--bc); border-radius: 42px; margin: 0; } cpso trc hd>i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; } cpso comant bd d { display: grid; grid-template-columns: 60% auto; gap: 2%; border-radius: 55%; align-items: center; justify-content: normal; } cpso ic { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; justify-content: end; align-items: center; opacity: 0.6; margin-right: 11px; } cpso us { display: grid; grid-template-columns: 40px auto 76px; align-items: center; gap: 1%; border-bottom: solid 1px var(--bc); } cpso id { display: grid; grid-template-columns: 55px auto; padding: 11px 0; align-items: center; width: fit-content; } cpso 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; justify-content: start; gap: 4%; } cpso msg btns { grid-template-columns: auto auto auto; justify-content: flex-start; gap: 4%; padding-bottom: 11px; } cpso ic>i { height: 33px; width: 33px; padding: 5px; } cpso ic>i:last-child { transform: rotate(45deg); } cpso comant>hd i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; cursor: pointer; } comant>hd op { position: absolute; height: 15px; width: 15px; padding: 2px; background: var(--b); border-radius: 55%; transform: rotate(90deg); bottom: -3px; right: 0; } @media screen and (max-width: 999px) { cpso ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } cpso ic i:last-child { display: none; } cpso trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } cpso name { font-size: unset; } cpso time { font-size: 0.77em;} cpso hd i { background: unset; height: auto; width: auto; } cpso comant bd { height: auto; } cpso ic { display: none; } cpso comant bd d { grid-template-columns: 100%; } cpso comant { grid-template-columns: 43px auto; gap: 1%; } cpso ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } cpso gp bb { font-size: 0.88em; } cpso>bd { height: 366px; } cpso us { padding: 0; } cpso msg { padding: 11px; } cpso ft t { text-align: unset; } } /*Born Component*/ cpbo time {text-align: unset; } cpbo t input { background: unset; } cpbo input { background: unset; width: 100%; font-weight: 400; } cpbo ft btn:hover { background: var(--bc); } cpbo cmt { display: flex; flex-direction: column; } cpbo msg { display: grid; gap: 2%;padding: 11px 0; } cpbo ic>i { height: 19px; width: 19px; padding: 5px; } cpbo id i { border-radius: 50%; background: var(--bc); } cpbo>ft cmt btns { display: flex; justify-content: start; } cpbo msg bd i { display: block; height: 77px; padding-bottom: 11px; } cpbo>ft cmt btns { display: flex; justify-content: start; border: none; margin-left: 22px; } cpbo hd ft>i { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 55%; height: 22px; width: 22px; } cpbo ic svg { height: 20px; } brn { display: block; text-align: center; padding-bottom: 44px; font-size: 1.55em; } brn>hd { display: flex; justify-content: center; } cpbo brn hd i { height: 44px; width: 44px; background: var(--aaa); border-radius: 55%; margin: 6px; } cpbo brn bd h5 { font-weight: 500; } cpbo { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } 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 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; } cpbo comant { display: grid; grid-template-columns: 46px auto; gap: 1%; align-items: center; margin: 11px 0; margin-bottom: 0; } cpbo hd ft>i:active { background: var(--bc); } cpbo hd d { display: grid; grid-template-columns: 42px auto; align-items: center;padding: 8px; } cpbo hd d bd { text-align: justify; font-size: 0.88em; } cpbo >bd { margin: 4px; display: block; background: var(--bc); border-radius: 22px; } cpbo trc ft { display: flex; justify-content: end; } cpbo 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; } cpbo ft btn>i { height: 23px; width: 23px; } cpbo ft t { width: auto; margin: 0; font-size: 0.88em; text-align: center; } cpbo p { font-size: 11px; margin: 0; } cpbo dds{display: grid; grid-template-columns: 48% 48%; gap: 1%;} cpbo hd i { display: flex; align-items: center; justify-content: center; padding: 7px; border-radius: 6px; } cpbo trc { display: grid; grid-template-columns: 48px auto 48px; gap: 2%; align-items: center; margin-bottom: 11px; } cpbo time { display: block; width: auto; float: unset; } cpbo name { font-size: 1em; font-weight: bold; } cpbo>ft btns { display: grid; grid-template-columns: 33.3% 33.3% 33.3%; border-bottom: solid 1px var(--bc); justify-content: space-around; width: unset; margin: unset; padding: 0;} cpbo comant>bd { display: grid; align-items: center; height: 44px; background: var(--bc); border-radius: 42px; margin: 0; } cpbo trc hd>i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; } post comant bd i { display: flex; background: transparent; margin: 4px; border-radius: 55%; height: 33px; width: 33px; } cpbo comant bd d { display: grid; grid-template-columns: 60% auto; gap: 2%; border-radius: 55%; align-items: center; justify-content: normal; } cpbo ic { display: grid; grid-template-columns: 33px 33px 33px 33px 33px 33px; justify-content: end; align-items: center; } cpbo us { display: grid; grid-template-columns: 40px auto 76px; align-items: center; gap: 1%; padding: 11px 0; border-bottom: solid 1px var(--bc); padding-bottom: 0; } cpbo ic i:last-child { transform: rotate(45deg); } cpbo ic { opacity: 0.6; } cpbo id { display: grid; grid-template-columns: 55px auto; padding: 11px 0; align-items: center; } cpbo 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; justify-content: start; gap: 4%; } cpbo msg btns { grid-template-columns: auto auto auto; justify-content: flex-start; gap: 4%; padding-bottom: 11px; } cpbo comant>hd i { height: 40px; width: 40px; background: transparent; border: solid 2px; border-radius: 55%; padding: 0; cursor: pointer; } @media screen and (max-width: 999px) { cpbo ic i:last-child { display: none; } cpbo ic { grid-template-columns: 33px 33px 33px 33px 33px; margin: 0 11px; } cpbo trc post hd> i { height: 44px; width: 44px;background: var(--bc); border: unset; } cpbo name { font-size: unset; } cpbo time { font-size: 0.77em;} cpbo hd i { background: unset; height: auto; width: auto; } cpbo comant bd { height: auto; } cpbo ic { display: none; } cpbo comant bd d { grid-template-columns: 100%; } cpbo ft btn { font-size: 0.77em; grid-template-columns: 22px auto; background: transparent; } cpbo gp bb { font-size: 0.88em; } cpbo { padding: 11px; margin: 11px 0; } cpbo >bd { height: auto; } cpbo us { padding: 0; } cpbo msg { padding: 11px; } cpbo ft t { text-align: unset; } } /*About Component */ cabo bl>bd { padding: 0; display: flex; flex-direction: column; } cabo bl>bd>aa { padding: 6px; border-radius: 5px; margin: 6px 0; font-weight: 500; white-space: nowrap; cursor: pointer; } cabo { display: grid; grid-template-columns: 30% auto; border-radius: 11px; position: relative; padding: 11px; margin: 0 11px; } cabo bd bl { border-left: 1px solid var(--bc); } cabo bd bl aa { display: grid; grid-template-columns: 33px auto; align-items: center; gap: 2%; padding: 6px; color: var(--a); } cabo trc { display: grid; grid-template-columns: 44px auto 77px; align-items: center; } cabo trc btn { width: 33px; display: block; padding: 6px; border-radius: 55%; margin: 2px; } cabo trc btn:last-child { background: var(--bc); } cabo aa>i { height: 33px; width: 33px; } cabo trc btns { display: flex; } cabo aa>i>svg { width: 33px; fill: var(--a); } cabo trc>hd>i { height: 26px; width: 26px; padding: 5px; } cabo bl { background: unset; border-radius: 0; padding: 22px; } cabo trc>bd { padding: 0; display: flex; flex-direction: column; } cabo>bd bl aa:hover { background: var(--bc); text-decoration: underline; } cabo>hd bl>hd { margin: 10px; } spfo abouts main { width: auto; max-width: unset; } spfo abouts { width: 100%; display: block; } @media screen and (max-width: 999px) { cabo { display: block; } cabo bd bl { border-left: none; border-top: 1px solid var(--bc); } } /*Friend Component*/ .Recentlyadded crfo { display: block; } .Alfriends cpfo { display: grid; } .Recentlyadded cpfo { display: grid; } cpfo { display: none; grid-template-columns: 88px auto 55px; border: 1px solid var(--bc); border-radius: 11px; padding: 11px; align-items: center; gap: 2%; margin: 6px;} cpfo t { cursor: pointer; width: fit-content; } cpfo t:hover { text-decoration: underline; } cpfo name { font-weight: 500; cursor: pointer; width: fit-content; } cpfo>bd { display: flex; flex-direction: column; } cpfo>hd { height: 80px; width: 80px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 11px; border: 1px solid var(--bc); } cpfo name:hover { text-decoration: underline; } cpfo>hd>i { height: 100%; width: 100%; cursor: pointer; } cpfo>hd>i>img { height: 100%; width: 100%; object-fit: cover; }cpfo>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cpfo>ft btn { display: flex; align-items: center; padding: 11px; border-radius: 55%; gap: 2%; height: 19px; width: 19px; justify-content: center; transform: rotate(90deg); cursor: pointer; } /*Aboutfriends */ cfrs>hd bx { display: flex; align-items: center; justify-content: space-between; } cfrs bx btns { display: flex; align-items: center; } cfrs bx btns btn { 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; } cfrs bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } cfrs bx t:hover { background: var(--bc); } cfrs bx t { display: block; margin: 6px; padding: 11px; color: var(--a); font-weight: 400; cursor: pointer; border-radius: 5px; } cfrs aa { margin: 6px; padding: 11px; cursor: pointer; white-space: nowrap; } .Alfriends aa.alfrns { border-bottom: 2px solid var(--a); color: var(--a); } .Recentlyadded aa.rcntadd { border-bottom: 2px solid var(--a); color: var(--a); } .Birthday aa.brthd { border-bottom: 2px solid var(--a); color: var(--a); } .Following aa.fllwng { border-bottom: 2px solid var(--a); color: var(--a); } cfrs aa:hover { background: var(--bc); border-radius: 5px; } .Alfriends aa.alfrns:hover { background: unset; border-radius: 0; } .Recentlyadded aa.rcntadd:hover { background: unset; border-radius: 0; } .Birthday aa.brthd:hover { background: unset; border-radius: 0; } .Following aa.fllwng:hover { background: unset; border-radius: 0; } cfrs>ft btn { display: flex; align-items: center; padding: 11px; border-radius: 6px; background: var(--bc); gap: 2%; justify-content: center; cursor: pointer; margin-top: 22px; } abtfrnds { display: flex; align-items: center; } cfrs { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cfrs>bd frns { display: grid; grid-template-columns: 50% 50%; } @media screen and (max-width: 999px) { abtfrnds { overflow: scroll; } cfrs>bd frns { display: block; } cfrs bx t { display: none; } } /*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%; } phts { display: flex; flex-wrap: wrap; } cfto>hd btn svg { fill: var(--bt); } /*Photos */ cfts>hd bx { display: flex; align-items: center; justify-content: space-between; } cfts bx btns { display: flex; align-items: center; } cfts bx btns btn { 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; } cfts bx btn svg { transform: rotate(90deg); height: 22px; width: 22px; } cfts bx t { display: block; margin: 6px; padding: 11px; color: var(--a); font-weight: 400; cursor: pointer; border-radius: 5px; } cfts { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cfts aa { margin: 6px; padding: 11px; cursor: pointer; } .YourPhotos aa.urphts { border-bottom: 2px solid var(--a); color: var(--a); } .Albums aa.albm { border-bottom: 2px solid var(--a); color: var(--a); } abtphts { display: flex; } cfts bx t:hover { background: var(--bc); } cfts aa:hover { background: var(--bc); border-radius: 5px; } .YourPhotos aa.urphts:hover { background: unset; border-radius: 0; } .Albums aa.albm:hover { background: unset; border-radius: 0; } @media screen and (max-width: 999px) { cfts bx t { display: none; } cpto { max-width: 187px; max-height: 186px; } cfts bx t { display: none; } } /* Video Component */ cvdo>hd i { display: block; height: 100%; width: 100%; } cvdo>hd i>img { height: 100%; width: 100%; } cvdo { height: 100%; width: 100%; display: block; position: relative; max-width: 171px; max-height: 241px; border-radius: 11px; overflow: hidden; margin: 3px; cursor: pointer; } cvdo>bd>t { position: absolute; height: 33px; width: 100%; z-index: 999999999; bottom: 0; display: grid; grid-template-columns: 22px auto; color: var(--b); align-items: center; padding: 0 11px; } cvdo>bd>t svg { fill: var(--b); } @media screen and (max-width: 999px) { cvds vdos { display: grid; grid-template-columns: 50% 50%; } } /* Videos Component */ cvds { background: var(--bt); border-radius: 11px; display: block; padding: 22px; margin: 0 11px; } cvds aa { margin: 6px; padding: 11px; cursor: pointer; } abvds { display: flex; align-items: center; } .Yourvideos aa.urvds { border-bottom: 2px solid var(--a); color: var(--a); } .Savedvideos aa.svvds { border-bottom: 2px solid var(--a); color: var(--a); } cvds vdos { display: flex; flex-wrap: wrap; } @media screen and (max-width: 999px) { cvdo { max-width: 184px; max-height: 277px; } } /* 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; } } /* Groups Compnent */ cgrs>hd>bx { display: flex; align-items: center; justify-content: space-between; } cgrs { background: var(--bt); border-radius: 11px; display: block; padding: 22px; } cgrs>hd>bx btn { 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; } 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); } cgrs grp { display: grid; grid-template-columns: 50% 50%; } cgrs { margin: 0 11px; } @media screen and (max-width: 999px) { cgrs grp { display: block; } } /* Group Compnent */ sgps main { width: 100%; max-width: 1400px; } cgro { display: grid; grid-template-columns: 98px auto 0; border: 1px solid var(--bc); border-radius: 11px; padding: 11px; margin: 5px; background: var(--bt); align-items: center; } cgro>bd t h6 { display: flex; align-items: center; } cgro>hd { height: 88px; overflow: hidden; width: 88px; border-radius: 11px; } cgro>hd>i { height: 100%; width: 100%; } cgro>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cgro>bd t { display: flex; align-items: center; } cgro>bd i { height: 11px; width: 11px; margin-right: 5px; } cgro name { font-size: 1em; font-weight: 500; margin-bottom: 5px; display: block; } @media screen and (max-width: 999px) { sgps grps { display: block; padding: 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; } } /*Avatar Component*/ cavs>hd { display: flex; justify-content: space-between; } cavs>bd>pfphto { display: flex; justify-content: center; } cavs { display: block; padding: 11px; margin: 11px; } cavs>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cavs>hd>btn:hover { background: var(--bc); } cavs>hd h5 { font-weight: 400; } caio>i { height: 100%; width: 100%; } caio>i>img { height: 100%; width: 100%; } caio>bd btn { color: var(--a); padding: 11px; border-radius: 5px; display: grid; grid-template-columns: 26px auto; justify-content: center; background: var(--bc); margin: 6px auto; cursor: pointer; } caio>bd btn>i { height: 22px; width: 22px; } caio>bd btn>i>svg { fill: var(--a); } caio>hd>i { background-image: url(/0/images/Avatars.png); background-position: 0px 0px; background-size: auto; width: 500px; height: 154px; background-repeat: no-repeat; display: inline-block; } caio>hd { display: flex; justify-content: center; } caio { text-align: center; display: block; } @media screen and (max-width: 999px) { caio>hd>i { background-size: 100%; width: 100%; background-position: 0px 22px; } } } /* Bio Component */ 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; } /* CoverPhoto Component */ ccvo>hd { display: flex; justify-content: space-between; } ccvo>bd>pfphto { display: flex; justify-content: center; } ccvo { display: block; padding: 11px; margin: 11px; } ccvo>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } ccvo>hd>btn:hover { background: var(--bc); } ccio { display: flex; overflow: hidden; border-radius: 11px; border: 1px solid var(--bc); height: 211px; width: 80%; margin: 11px auto; } ccio>i { height: 100%; width: 100%; } ccio>i>img { height: 100%; width: 100%; object-fit: cover; } @media screen and (max-width: 999px) { ccio { width: auto; } } /* Featured Component */ cfeo>hd { display: flex; justify-content: space-between; } cfeo>bd>pfphto { display: flex; justify-content: center; } cfeo { display: block; padding: 11px; margin: 11px; } cfeo>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cfeo>hd>btn:hover { background: var(--bc); } cfeto>hd>i { background-image: url(/0/images/Featured.png); background-position: 0px 0px; background-size: auto; width: 334px; height: 192px; background-repeat: no-repeat; display: inline-block; filter: drop-shadow(0px 0px 3px #7d7d7d9c); } cfeto { display: flex; border-radius: 11px; margin: 11px; flex-direction: column; text-align: center; } @media screen and (max-width: 999px) { cfeto>hd>i { background-size: 100%; width: 100%; } } /* Introedit Component */ cito>hd { display: flex; justify-content: space-between; } cito>bd>pfphto { display: flex; justify-content: center; } cito { display: block; padding: 11px; margin: 11px; } cito>hd>btn { color: var(--a); padding: 6px 11px; border-radius: 5px; cursor: pointer; } cito>hd>btn:hover { background: var(--bc); } cinto>d>i { height: 100%; opacity: 0.5; } cinto { display: flex; overflow: hidden; border-radius: 11px; justify-content: center; flex-direction: column; } cinto>d { display: grid; grid-template-columns: 44px auto; align-items: center; white-space: nowrap; padding: 6px 0; margin: 6px 0; gap: 1%; width: fit-content; } cinto>d>t { cursor: text; } /* Pictureedit Component */ 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); } cdio { display: flex; overflow: hidden; height: 133px; width: 133px; border-radius: 55%; border: 1px solid var(--bc); } cdio>i { height: 100%; width: 100%; } /* 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; grid-template-columns: 49% 50%; position: relative; padding: 0; overflow: scroll; } smsn main { max-width: 100%; } smsu bl { display: block; margin: 11px; position: relative; } 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 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; } 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; height: calc(100% - 14px); 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 { display: block; margin: 11px; position: relative; } 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); } smsu .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; } smsu .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%; } smsu .nw>ft>aa>i { height: 22px; width: 22px; margin-right: 0px; fill: #fff; } smsu .nw>ft f { font-size: 1em; font-weight: 600; letter-spacing: 0; margin-left: 7px; } smsu .nw>ft d { text-align: center; font-size: 0.6em; width: 88%; margin: 11px auto; } smsu btns>aa:last-child { background: unset; } smsu form msnb>bl { margin: 0; padding: 0; background: var(--bt); } smsu .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) { smsu d.aerea { display: grid; } smsu form { display: block; } } /* Zoom Alert*/ .alert alert{ opacity: 1; top: 0; } 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: 1px 5px 13px rgb(81 81 81 / 44%); display: block; max-height: 277px; min-height: unset; height: fit-content; max-width: 433px; position: relative; z-index: 2; overflow: hidden; text-align: center; width: 100%; margin: 11px; padding: 11px 11px; border-radius: 5px; }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; background: rgba(244, 244, 255, 0.22); font-family: monospace; font-size: 36px; border-radius: 7px; background: var(--b-t22); opacity: 0.7; padding: 2px; right: 21px; } alert exit svg { fill: var(--b); } alert exit:hover { opacity: 1; } modal info { display: flex ; flex-direction: column; justify-content: center; } alert info t { display: none; font-size: 1.22em; font-weight: 600; font-family: monospace; letter-spacing: 0; width: 90%; } alert text { font-family: Unbounded, sans-serif; letter-spacing: 0; font-size: 14px; text-align: left; color: var(--b); } modal>bl>ft { display: flex ; 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: 24px; width: 24px; border-radius: 11px; padding: 6px; overflow: hidden; border-radius: 55%; } alert bd { position: relative; display: grid ; grid-template-columns: 55px auto; align-items: center; } alert.success modal>bg { background: var(--c); } alert.failed modal>bg { background: var(--c); } alert modal>bg { background: var(--c); } alert.warning warning svg { fill: 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: 22px; margin-bottom: 44px; border-radius: 4px; border: solid 1px var(--c); box-shadow: -7px 11px 33px rgb(0 0 0 / 44%); padding: 9px 14px; top: 55px; } } /* 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 form { display: grid; grid-template-columns: 49% 50%; 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 { height: 66px; 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 { 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 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) { spfo .aerea { max-width: 1200px; margin: auto; } smps sidebar { width: 100%; max-width: 422px; } } @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 ccio { height: 100%; width: 100%; margin: 0; } 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; } /* Participant header */ cpho { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding-bottom: 11px; } cpho cover { max-height: 166px; border-radius: 11px; } cpho>bd { margin-top: -73px; display: block; padding: 0 22px; } cpho>bd>d { margin: 11px; margin-bottom: 0; } cpho>bd>d h4 { font-size: 1.22em; font-weight: 500; } cpho dppic ii img { object-fit: cover; height: 100%; width: 100%; border-radius: 55%; } cpho 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: 3px; height: 96px; width: 96px; } cpho upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 22px; right: 14px; top: 15px; border-radius: 50%; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px; bottom: 15px; grid-template-columns: 30px auto; width: 22px; overflow: hidden; } cpho>bd>d h6 { font-weight: 400; font-size: 0.88em; opacity: 0.6; } cpho>ft { display: block; padding: 0 22px; margin-top: 16px; } cpho>ft btn { display: flex; justify-content: center; background: var(--bc); border-radius: 5px; margin: 4px; align-items: center; font-size: 0.88em; padding: 8px 16px; font-weight: 400; position: relative; } cpho>ft btns { display: flex; } /* Personal Information */ cpio { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; padding: 22px; } cpio sl { margin: 11px 0; border-radius: 0; position: relative; height: unset; background: unset; } cpio sl select { font-size: 0.88em; font-weight: 400; } cpio sl>label { position: unset; margin-bottom: 4px; display: block; margin-left: 5px; } cpio sl>input { display: block; border-radius: 5px; margin-bottom: 11px; position: relative; overflow: hidden; background: var(--bc); border: 1px solid var(--bc); width: calc(100% - 22px); } cpio sl>input:focus { border-radius: 11px; } @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; } cpio { padding: 11px; margin: 11px; } bio { padding: 11px; } cpino { padding: 11px; } caco { 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); } cpino btns>aa i svg { fill: var(--a); } cpino btns>aa i { height: 18px; width: 18px; } smpcu pffs ff ft expnd:hover { background: var(--bc); } bio { display: block; margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } bio bl { background: var(--bc); padding: 22px; border-radius: 22px; margin-top: 11px; overflow: hidden; } cpino { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } cpino btns>aa { display: flex; width: fit-content; padding: 5px 11px; background: #e8f0f7; color: #4b7fd6; font-weight: 400; border-radius: 44px; align-items: center; justify-content: center; white-space: nowrap; margin-top: 11px; margin-right: 11px; } cpino btns { display: flex; padding: 0px; flex-wrap: wrap; margin: 11px 0; } cpino>ft>btn { white-space: nowrap; display: grid; grid-template-columns: 22px auto; justify-content: center; align-items: center; padding: 11px; border: 1px solid var(--bc); border-radius: 5px; font-size: 1em; font-weight: 400; margin-top: 11px; background: var(--aaa); color: var(--b); } cpino>ft>btn i { height: 22px; width: 22px; } caco aa { display: grid; grid-template-columns: 44px auto; gap: 2px; background: var(--bc); border-radius: 5px; padding: 1px; align-items: center; margin: 6px 0; text-decoration: underline; } caco { display: block; background: var(--b-t); margin: 11px 0; border-radius: 11px; margin-top: 11px; padding: 22px; } caco>ft btn { white-space: nowrap; display: grid; grid-template-columns: 33px auto; justify-content: center; align-items: center; padding: 6px; border: 1px solid var(--bc); border-radius: 5px; font-size: 1em; margin: 11px; font-weight: 400; background: var(--aaa); color: var(--b); margin-bottom: 0; } caco aa a { font-weight: 700; font-size: 0.88em; } caco aa svg { height: 44px; width: 44px; opacity: 0.8; } caco>ft btn i svg path { stroke: var(--b); } caco>ft btn i { height: 26px; width: 26px; } @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 ccio { height: 100%; width: 100%; margin: 0; } smpcu header { position: unset; } @media screen and (min-width: 999px) { smpcu .aerea { max-width: 1033px; 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 ccio { width: 100%; margin: 0; background: var(--bc); } 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 ccio { height: 100%; width: 100%; margin: 0; } 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%; gap: 1%; 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 */ sono userpff sidebar { width: 50%; } sono header { position: unset; } sono friends main { width: 100%; max-width: 100%; } sono friends { width: 100%; } sono Photos main { width: 100%; max-width: 100%; } sono Photos { width: 100%; } sono Videos main { width: 100%; max-width: 100%; } sono Videos { width: 100%; } sono Reels main { width: 100%; max-width: 100%; } sono Reels { width: 100%; } sono gd { display: grid; grid-template-columns: 77px auto; margin: 22px; box-shadow: var(--bs-b); grid-gap: 22px; padding: 11px 33px; border-radius: 22px;} sono abouts>main>d.main { padding-bottom: 22px; } sono btn { cursor: pointer; } sono grid { margin-top: 11px; } sono gd>dp { height: 77px; width: 77px; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-b);background:var(--b)} sono gd>h1 { font-size: 1.23em; display: flex; flex-direction: column; justify-content: center; align-items: unset; } sono username{font-size: 0.55em; opacity: 0.66;} sono nv back>i { height: 33px; width: 33px; } sono cover { display: flex; position: relative; height: 100%; overflow: hidden; } sono ff>ft>bl op:hover { background: var(--bc); } sono pffs ff ft expnd:hover { background: var(--bc); } sono gd:hover { background: var(--bc); } sono pffs hd btn:hover { transform: scale(0.9); background: var(--a); } sono 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; } sono cover ii { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 11px; } sono cover ii img { object-fit: cover; height: 100%; width: 100%; } sono cover upld { position: absolute; z-index: 99999999999; background: var(--b-t); height: 33px; right: 16px; top: unset; border-radius: 6px; display: grid; place-content: center; align-items: center; backdrop-filter: blur(5px); padding: 4px 11px; bottom: 13px; grid-template-columns: 30px auto; width: unset; } sono ff>bd { margin-top: -76px; position: relative; z-index: 99999; display: flex; align-items: end; justify-content: space-between; padding-left: 30px; } sono 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; } sono 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; top: unset; } sono dppic ii img { height: 100%; width: 100%; border-radius: 100%; box-shadow: 0 0 0 3px var(--b); } sono inf name { display: grid; grid-template-columns: auto 33px; align-items: end; width: fit-content; } sono ff { grid-template-rows: 370px auto; display: grid; padding: 11px; align-items: unset; justify-content: unset; text-align: unset; box-shadow: unset; background: unset; } sono mg>a>i>svg { fill: unset; transform: rotate(0); opacity: 0.7; } sono ff bd bl:nth-child(2) { display: flex; gap: 2%; align-items: center; padding: 11px; } sono pffs btns btn { display: grid; grid-template-columns: 28px auto; white-space: nowrap; font-size: 1em; align-items: center; padding: 9px 22px; border-radius: 6px; background: var(--bc); gap: 2%; height: 30px; margin: 0 4px; justify-content: center; cursor: pointer; } sono pffs btns btn.this { background: var(--aa); color: var(--b); } sono pffs btns btn.this img { filter: invert(1); } pffs btns btn img { opacity: 0.7; height: 22px; width: 22px; } sono pffs { display: block; } sono pffs ff ft expnd svg { transform: rotate(-90deg); } sono pffs ff>ft>bl mg { display: flex; margin: 0; } sono pfinfo upld h5 { font-weight: 100; } sono pffs ff>ft>bl mg a.this { border-bottom: 2px solid; color: var(--c); } sono oppffs ff ft op { display: none; } sono pffs opp aa { display: grid; grid-template-columns: 33px auto; gap: 3%; font-size: 1.44em; font-weight: 500; } sono 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%); } sono mg>a>i { height: auto; width: auto; margin-top: 2px; } sono pffs ff>ft>bl { display: flex; justify-content: space-between; align-items: center; position: relative; border-top: 1px solid var(--bc); margin-top: 22px; } sono ff mg a { display: block; padding: 11px; margin: 0 6px; font-weight: 500; opacity: 0.7; align-items: center; transition: 33ms; height: auto; } sono pffs ff>ft>bl mg b { display: flex; } pffs btns { display: flex; } sono ff>bd bl { display: flex; align-items: end; gap: 2%; white-space: nowrap; } sono 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; } sono pffs bd btn t { display: flex; justify-content: center; align-items: start; margin-bottom: 3px; font-weight: 500; opacity: 0.9; } sono ccio { width: 100%; height: 100%; margin: 0; } sono cino>bd>t { display: flex; justify-content: center; margin-top: 13px; } sono cino>bd>t h5 { font-weight: 400; font-size: 0.88em; } sono cino>ft d { display: grid; grid-template-columns: 26px auto; margin: 6px 0; padding: 6px 0; align-items: center; } sono cino>ft d i { height: 16px; width: 17px; opacity: 0.7; } sono cino>ft d a { font-weight: 500; color: var(--aa); } featured { display: block; padding: 11px; border-radius: 11px; margin-bottom: 11px; background: var(--b-t);} featured>bd { display: grid; overflow: scroll; grid-template-columns: 50% 50% 50% 50% 50%; } featured>hd { display: block; margin: 11px 0; } sono abouts main { width: 100%; max-width: unset; } sono pffs { display: block; background: var(--bt); margin-bottom: 11px; } sono abouts { width: 100%; } /* 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; max-width: 1100px; margin: auto; } } /* 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; } /* Wallet component */ cwlos>h4 { display:flex;} cwlo>hd i { filter: Unset; } cwlo>trc ft p { margin: unset; } cwlotrc ft p amount { color: var(--a); } cwlos cwlo>ft { display: flex; justify-content: end; } cwlo img { object-fit: contain; height: 77%; width: 77%; } cwlos>h4>a.this { background: var(--aaa); color: var(--b); } cwlos>h4>a { display: flex; background: var(--bc); border-radius: 23px; padding: 11px 22px; margin: 6px; font-weight: bold; position: relative; line-height: 1; justify-content: center; } cwlo name { letter-spacing: 0; font-size: 1em; font-weight: bold; overflow: hidden; display: block; white-space: nowrap; } cwlo>hd { height: 55px; width: 55px; border-radius: 15px; background: var(--bc); display: flex; justify-content: center; align-items: center; } cwlo { padding: 22px; box-shadow: var(--bs-bs);width: auto; margin: 7px 0; display: grid; grid-template-columns: 66px auto 111px; background: var(--bt); color: var(--c); border-radius: 14px; position: relative; } /* 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%; } /* 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; } start grid:hover { background: var(--hover); } start { left: 0; right: 0; top: 55px; bottom: 0; position: absolute; overflow: hidden; display: block; transition: 333ms; z-index: 888888888888; backdrop-filter: blur(22px);-webkit-backdrop-filter: blur(22px); height: 0;background: var(--b-t95);top:0;} .start start { height: calc(100% - 44px); } .dark start bg{background:#000} .dark start bl{color:#111} .oo bb { background: blue;color:blue } ssts .oo oo { margin-left: 26px; } start aerea { position: absolute; left: 0; right: 0; top:0px; bottom: 0; overflow: hidden; overflow-y: auto; padding-bottom: 11%;min-height: unset; } start bl{border-radius: 0; background: transparent; border: unset; color: var(--bc);padding: 22px;} start bl hd { color: var(--c); display: flex ; align-items: center; justify-content: space-between; } 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); } start error,start dt{ position: absolute; top:11px; color: var(--c); font-size: 7px; left: 11;margin:0;height:11px; } start grid { min-height: 33px; padding: 11px; grid-template-columns: 60px auto; margin: 5px 0; position: relative; border-radius: 7px; } start grid h6 {font-size: 14px; display: flex; align-items: center;color:var(--c);font-weight: 500;} start code {display: block;padding: 11px;border-bottom:solid 1px var(--bc)} start grid>* { height: 30px;color: var(--c); margin:0} start 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} start .oo value {max-height: 34px;} start value>* { outline: 0; display: flex; align-items: center; } start 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; } start grid.this { background: var(--bc); } start grid.this::before { content: ''; position: absolute; left: 7px; top: 7px; bottom: 7px; width: 4px; background: var(--c); border-radius: 4px; } start grid[disabled]:hover:after{ color: #eef; background: rgba(12,21,31,0.88); } @media only screen and (max-width: 999px) { start aerea::-webkit-scrollbar { display: none; } } @media (max-width: 1320px) { start grid h6 {display:none;} start { width: 243px; } start wr>bd pwrs{width:100%;} nav { left: 230px; width: -webkit-fill-available; } content { top: 0;left: 255px; } surs .main { margin-bottom: 28px; min-width: 100%; } saiw .AI_Writer { margin-bottom: 30px; } main>d>scrs { display: flex ; width: 100%; } db main { width: 57%; } csps {grid-template-columns: 91%;} } @media (max-width: 1050px) { content {left: 110px; } } @media only screen and (min-width: 999px) { extra.start {max-width: 369px;} start { width: 333px; top: 0px; left: -333px;height: 100%; } start header { padding: 6px 2px; } start grid { padding: 7px 2px;margin: 3px 1px;} } @media only screen and (max-width: 1320px) { start { width:243px;} } /* 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: 34px; } 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; } setting { margin: 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 { display: block; padding: 11px; margin: 11px; background: var(--bt); border-radius: 11px; } csas bl>hd>i { max-width: 290px; max-height: 107px; width: 100%; height: 100%; margin: 11px; margin-bottom: 22px; } 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 { 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; } chats>ft { display: flex; justify-content: center; align-items: center; padding: 22px; border-top: 1px solid var(--bc); background: var(--bt); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } chats { display: block; background: var(--bt); border-right: 1px solid var(--bc); position: relative; } /* 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 */ /* Dp Photo Component */ dppic { display: block; 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; } dppic>ii>img { object-fit: cover; height: 100%; width: 100%; border-radius: 100%; } dppic>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; top: unset; } /* Filter function Commponent */ cflfo { display: block; padding: 11px; border-bottom: 1px solid var(--bc); margin-bottom: 0; } cflfo>hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; } cflfo>hd btn { display: flex; height: 33px; width: 33px; background: var(--bc); border-radius: 55%; align-items: center; margin: 0 4px; padding: 1px; } cflfo>hd btns { display: flex; } cflfo>bd>sl { display: grid; grid-template-columns: 44px auto; align-items: center; height: 33px; border-radius: 55px; margin: 0; } cflfo sl>i { height: 22px; width: 22px; padding: 5px; margin-left: 5px; } cflfo sl>input { position: absolute; border-radius: 55px; padding: 0 44px; width: auto; left: 0; right: 0; top: 0; bottom: 0; padding-right: 11px; } cflfo btn:hover { background: var(--hover); } cflfo>ft btn { display: block; padding: 11px; font-weight: 500; border-radius: 22px; margin-left: 5px; } cflfo>ft btns { display: flex; } cflfo>ft btn.this { background: var(--at); color: var(--a); } /* Chat user id commponent (Conversation) */ ccuo { display: grid; grid-template-columns: 55px 72% 33px; padding: 11px; margin: 11px; align-items: center; border-radius: 11px; } ccuo>hd { height: 48px; width: 48px; border-radius: 55%; overflow: hidden; box-shadow: 0 0 0 1px var(--bc); } ccuo>hd>img { object-fit: cover; height: 100%; width: 100%; } ccuo>bd>p { margin: 4px 0; font-weight: 400; font-size: 0.77em; white-space: nowrap; width: 99%; overflow: hidden; text-overflow: ellipsis; } ccuo name { font-weight: 500; } ccuo:hover { background: var(--hover); } /* Vonversation */ chat>hd>trc { display: grid; grid-template-columns: 55px auto auto; align-items: center; padding: 11px; box-shadow: 0 1px 7px var(--bc); } chat>hd>trc>hd { display: block; height: 44px; width: 44px; overflow: hidden; border-radius: 55%; } chat { display: block; background: var(--bt); overflow: hidden; height: 265vh; } chat>hd>trc>hd>i { height: 100%; } chat>hd>trc>hd>i>img { object-fit: cover; height: 100%; width: 100%; } chat>hd>trc>ft { display: flex; justify-content: end; } chat>hd>trc btn { height: 33px; width: 33px; display: flex; align-items: center; justify-content: center; margin: 4px; border-radius: 55%; padding: 1px; } chat>hd>trc btn:hover { background: var(--hover); } chat>hd>trc>ft>btns { display: flex; } chat cnvrsstion>p { text-align: center; margin: 0; } chat cico { display: flex; padding: 22px; margin: 11px; justify-content: end; flex-direction: column; align-items: center; margin-bottom: 0; } 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 { grid-template-columns: 366px auto; height: 100%; } chat cnvrsstion { display: block; height: 100%; } scss sidebar { height: 100%; } scss d.sidebar { height: 100%; } scss grid { height: 100%; } /* Chat commponent */ 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.88em; justify-content: end; margin-bottom: 11px; } /* input smss */ ciso>bd>sms { display: block; background: var(--aaa); color: var(--b); font-weight: 500; padding: 6px 11px; border-radius: 22px 5px 5px 22px; font-size: 0.88em; } 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; } ciso>hd>btns { display: flex; transition: 99ms; position: relative; z-index: -1; height: 0; opacity: 0; } ciso>hd>btns>btn { display: flex; height: 30px; width: 30px; justify-content: center; align-items: center; margin: 0 5px; border-radius: 55%; } ciso>hd>btns>btn:hover { background: var(--hover); } ccms inputchats ciso:last-child sms { border-radius: 22px 5px 22px 22px; } ciso:first-child>bd>sms { border-radius: 22px 22px 5px 22px; } cpco { display: block; background: var(--bt); border-left: 1px solid var(--bc); } /* output smss */ ccms coso { display: grid; grid-template-columns: 44px auto auto; align-items: center; padding: 0 5px; margin-bottom: 2px; justify-content: start; } coso>hd { display: block; height: 33px; width: 33px; overflow: hidden; border-radius: 55%; } coso>hd>i { height: 100%; } 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%; } coso>bd { display: block; width: fit-content; } 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; } /* Send Messege commponent */ csmo { display: grid; padding: 11px; grid-template-columns: 34% 55% 11%; align-items: center; background: var(--bt); backdrop-filter: blur(20px); border-top: 1px solid var(--bc); } csmo btns { display: flex; } csmo btns>btn { display: flex; height: 33px; width: 33px; justify-content: center; align-items: center; border-radius: 55%; margin: 4px; } csmo btns>btn>i { height: 77%; } csmo>ft btn { padding: 4px; height: 25px; width: 25px; } csmo>ft btn:last-child { display: none; } csmo btns>btn:hover { background: var(--hover); } csmo>bd>sl { display: grid; grid-template-columns: auto 33px; align-items: center; height: 33px; border-radius: 22px; margin: 0; } csmo sl>input { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 0 33px; width: auto; padding-left: 11px; } csmo>bd>sl btn { height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; grid-column-start: 2; border-radius: 55%; padding: 4px; margin: 1px; } csmo>bd>sl btn>i { height: 22px; width: 22px; } 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); } /* Conversation in only Desktop version */ @media screen and (min-width: 999px) { chat>bd { display: block; overflow-y: scroll; } chats>bd { display: block; height: 28.59%; overflow-y: scroll; } } /* Conversation in phone version */ @media screen and (max-width: 999px) { scss sidebar { display: none; } chat { display: block; } chats { display: none; } scss main grid { display: block; } chats>ft { display: none; } scss d.aerea { height: auto; } cflfo>bd>sl { height: 44px; margin: 0 11px; width: auto; } chat>bd { display: block; overflow-y: scroll; } screen#Conversation1 { overflow: hidden; } } /* Coupons steps Commponent */ ccss { display: block; padding: 11px; margin: 11px; } ccss ccso { 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); } 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; } cscs { position: relative; padding: 46px 20px 40px 20px; border-radius: 10px; background-size: 100% 100%; background-repeat: no-repeat; display: block; background-image: url(/0/IMG/Weather.png); margin: 22px; } 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: -23px; } 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; } 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; max-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; } /* Offers commponent (Coupons) */ 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: 133px; 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; } cstr>ccfrs { display: flex; margin: 11px 0; } 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); } 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: 163px; 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; } name { font-weight: 600; display: block; } /* 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; } cmus { display: block; overflow-x: scroll; } @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; } } /* Groups Group component and Groups screen css */ requests>hd { display: block; padding: 11px; } allgroups>hd { display: flex; padding: 11px; justify-content: space-between; align-items: center; } cgrpo { display: block; padding: 11px; box-shadow: var(--bs-b); margin: 5px; background: var(--bt); border-radius: 11px; max-width: 444px; } cgrpo>hd>bl { display: grid; grid-template-columns: 88px auto; align-items: center; } cgrpo hd>i { height: 77px; width: 77px; } cgrpo hd>i>img { height: 100%; width: 100%; object-fit: cover; } cgrpo hd>i { height: 77px; width: 77px; border-radius: 11px; overflow: hidden; } cgrpo name { display: block; } cgrpo bd>t { font-size: 0.88em; } cgrpo btns { display: grid; grid-template-columns: auto 55px; gap: 2%; margin-top: 11px; } cgrpo btns>btn:first-child { background: var(--aaa); color: var(--b); } cgrpo btns>btn { display: block; padding: 5px 11px; background: var(--bc); border-radius: 5px; align-content: center; text-align: center; } sgps grps { display: grid; grid-template-columns: 33% 33% 33%; } @media screen and (max-width: 999px) { sgps grps { display: block; } } /* 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; } } /* Regiter time Password hidden system */ 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; } /* 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%; } } /* 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; } } /* 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 */ cpvo>hd>btn { display: block; padding: 4px; height: 33px; width: 33px; place-content: center; } cuio>hd { display: flex; align-items: center; } cuio>hd>i { height: 33px; width: 33px; margin-right: 11px; border-radius: 55%; overflow: hidden; background: var(--bt); } cuio>hd>btn { display: block; padding: 8px 22px; text-align: center; margin-left: 11px; box-shadow: var(--bt-bx); border: 1px solid var(--bc); font-size: 0.88em; border-radius: 5px; background: var(--aaa); color: var(--b); } cuio inpt { display: grid; grid-template-columns: 22px auto; padding: 2px 9px; background: var(--b-t22); backdrop-filter: blur(20px); white-space: nowrap; align-items: center; border-radius: 22px; width: auto; overflow: hidden; margin-top: 11px; } cuio>ft { display: grid; gap: 1%; grid-template-columns: 40% 30% 26%; } crelo { display: flex; } crels { display: block; height: 100vh; padding: 22px; margin: 11px; background: var(--bg); border-radius: 22px; max-width: 533px; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scroll-snap-type: x mandatory; scroll-padding: 0; overflow-x: scroll; width: 100%; height: 90%; position: absolute; } cpvo video { display: block; width: 100%; height: 100%; object-fit: cover; } cuio inpt>t { display: block; padding-right: 7px; overflow: hidden; } cpvo>bd>vd { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } crels cpvo { height: 85vh; display: flex; position: relative; flex-direction: column; justify-content: space-between; padding: 22px; width: 90%; color: var(--b); overflow: hidden; border-radius: 7px; margin-bottom: 22px; } cuio tags>bd { display: flex; flex-wrap: wrap; } crelo>bd>btns { display: block; width: 77px; } crelo>bd { display: flex; justify-content: end; flex-direction: column; } crelo>bd>btns>btn { display: grid; grid-template-rows: 44px auto; text-align: center; padding: 5px; padding-bottom: 0; margin-bottom: 11px; } cuio tags>bd>a { color: var(--b); margin: 2px; } cuio inpt svg { fill: var(--b); } cuio videotitle { display: block; height: 56px; overflow: hidden; } cuio videotitle>p { margin: 0; margin-top: 11px; } /* meeting particiapant for dashboard */ cmpco { display: block; text-align: center; margin: 4px; padding: 11px; position: relative; background: var(--bt); border-radius: 11px; box-shadow: var(--bt-bx); } cmpco>hd>i>img { width: 100%; height: 100%; object-fit: cover; } cmpco>hd>i { display: block; height: 66px; width: 66px; margin: auto; border-radius: 55%; overflow: hidden; } cmpco name { display: block; margin: 11px; margin-bottom: 0; } cmpcs users { display: grid; grid-template-columns: 33% 33% 33%; } cmpcs { display: block; padding: 11px; background: var(--bt); margin: 11px; border-radius: 11px; } cmpcs>hd>a>i { height: 20px; width: 15px; } cmpco>ft { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } /* 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 img { 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; } /* Post component */ cupo d>i { height: 50px; width: 50px; overflow: hidden; border-radius: 55%; } cupo tt { display: flex; align-items: center; justify-content: space-between; } cupo name { font-weight: 600; } cupo>hd>d { display: grid; grid-template-columns: 55px auto; } cupo>hd { display: flex; align-items: center; justify-content: space-between; } cupo>hd>btn { display: flex; padding: 11px; height: 22px; width: 22px; align-items: center; justify-content: center; margin: 4px; } cupo tt>t { flex: none; margin-right: 11px; } cupo bl>gfs { display: flex; align-items: center; margin: 11px 0; } cupo btns>btn:last-child { margin-right: 0; } cupo bl>gfs>gf { display: grid; grid-template-rows: 55px auto; margin: 4px; padding: 4px; justify-content: center; text-align: center; } cupo bl>gfs>gf>i { display: flex; padding: 11px; height: 33px; width: 33px; background: #c9cdf661; border-radius: 55%; font-size: 20px; } cupo { display: block; padding: 22px; background: var(--bt); border-radius: 11px; margin-top: 11px; } cupo bl>gfs>gf>i:last-child { background: var(--aaa); } cupo bl>gfs>gf>t { display: flex; background: var(--bt); margin: 0 auto; border-radius: 11px; font-size: 0.88em; margin-top: -12px; backdrop-filter: blur(20px); height: 20px; align-items: center; justify-content: center; width: 33px; box-shadow: 0 2px 4px var(--bc); } cupo bl>gfs>gf>i>svg { height: 22px; width: 22px; fill: var(--b); } cupo btns { display: flex; justify-content: end; background: var(--bc); border-radius: 11px; padding: 11px; width: auto; margin: 0; margin-top: 18px; } cupo btns>btn>i { height: 22px; width: 22px; margin-right: 11px; } cupo btns>btn { background: transparent; height: auto; display: flex; margin: 5px 11px; } cupo bl>gfs>gf:first-child { margin-left: 0; padding-left: 0; } cupo d>i>img { height: 100%; width: 100%; object-fit: cover; } cupo btns>btn:hover { background: transparent; } /* 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; } /* 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 Apple Users */ start { -webkit-backdrop-filter: blur(20px); } /* 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; } /* Nav */ cnvo { display: grid; padding: 22px; margin: 11px; grid-template-columns: auto 122px 20%; position: relative; align-items: center; padding-bottom: 0; } cnvo btns { display: flex; align-items: center; } cnvo btns>btn { display: block; padding: 4px; height: 33px; width: 33px; background: var(--bt); place-content: center; border-radius: 11px; margin: 5px; } cnvo>ft>prf { display: grid; text-align: end; grid-template-columns: auto 66px; align-items: center; } cnvo prf>bd>i { display: block; height: 55px; width: 55px; border-radius: 55%; overflow: hidden; background: var(--bt); margin: 11px; } @media screen and (max-width: 999px) { cnvo>ft { display: none; } cnvo { display: flex; padding: 11px; margin: 0; justify-content: space-between; } } /* Dashboard Overview */ covs { display: block; padding: 11px; margin: 11px; padding-bottom: 0; margin-bottom: 0; } covs ovrvs { display: flex; overflow-y: auto; scroll-behavior: smooth; } covo { 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>hd { display: flex; align-items: center; padding: 11px; padding-top: 0; white-space: nowrap; font-weight: 500; } covo>hd>i { height: 22px; width: 22px; margin-right: 7px; } covo>ft { display: flex; justify-content: space-between; align-items: center; } cnvo>ft>prf>hd>t { font-size: 0.88em; color: var(--c0); } covo>ft p { color: var(--aa); font-weight: 500; margin: 0; } covo>ft>t { display: flex; align-items: center; color: var(--c0); } covo:first-child>ft>t { color: var(--bt); } covo:first-child { background: var(--aaa); color: var(--b); } covo:first-child>ft p { color: var(--b); } @media screen and (max-width: 999px) { covs { margin: 5px; padding: 0; } } /* Person Component */ cprso { display: block; background: var(--bt); border-radius: 22px; padding: 22px; margin: 5px; position: relative; } cprso>hd { display: flex; align-items: center; justify-content: space-between; } cprso bl { display: grid; grid-template-columns: 55% 45%; margin-top: 15px; } cprso form { position: relative; padding: 0 5px; } cprso bl>hd { display: block; max-width: 211px; overflow: hidden; border-radius: 22px; position: relative; } cprso bl>hd>i { height: 100%; width: 100%; } cprso bl>hd>i>img { height: 100%; width: 100%; object-fit: cover; } cprso bl>hd>btn { display: grid; grid-template-columns: 33px auto; justify-content: center; max-width: 66%; margin: 22px auto; position: absolute; z-index: 999; bottom: 0; background: var(--bg); backdrop-filter: blur(22px); border-radius: 33px; padding: 7px 22px; align-items: center; color: var(--aa); font-weight: 500; font-size: 0.88em; left: 0; right: 0; } cprso form>sl { display: block; background: transparent; border-bottom: 1px solid var(--bc); border-radius: 0; margin: 0 4px; margin-bottom: 5px; height: auto; } cprso form>sl>label { position: unset; font-size: 0.77em; font-weight: 500; } cprso form>sl>input { font-weight: 500; padding: 11px 0; width: 100%; height: auto; font-size: 0.88em; } cprso form>sl>input:focus { box-shadow: unset; } cprso bl>hd>btn svg { fill: var(--aa); } covo:first-child { background: var(--aaa); color: var(--b); } @media screen and (max-width: 999px) { cprso bl { display: block; } cprso bl>hd { max-width: unset; min-height: 288px; } } /* Ratio component */ crtoo { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } crtoo>hd { display: flex; justify-content: space-between; align-items: center; } crtoo rto { display: flex; height: 166px; width: 166px; position: relative; align-items: center; justify-content: center; text-align: center; margin: 22px auto; padding: 11px; } crtoo rto>i { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; } crtoo rto p { margin: 0; color: var(--c0); font-weight: 500; } crtoo rto h5 { font-size: 1.1em; } crtoo>ft>rgs { display: grid; grid-template-columns: 33% 33% 33%; } crtoo>ft>rgs p { margin: 0; font-size: 0.77em; color: var(--c0); font-weight: 400; } crtoo>ft>rgs>rg { display: grid; grid-template-columns: 22px auto; } crtoo rgs>rg>o { display: block; height: 9px; width: 9px; border-radius: 11px; background: rgb(37 110 244); margin: 4px; } crtoo rg:nth-child(3)>o { background: #f32562; } crtoo rg:nth-child(2)>o { background: rgb(243 169 37); } /* Time Traking */ ctrks { display: block; padding: 22px; margin: 5px; background: var(--bt); border-radius: 22px; } ctrks>hd { display: flex; justify-content: space-between; align-items: center; } ctrko { display: grid; grid-template-columns: 55px auto 55px; padding: 11px; margin-bottom: 5px; border-bottom: 1px solid var(--bc); position: relative; align-items: center; } ctrko>hd>i { height: 33px; width: 33px; border: 1px solid var(--bc); border-radius: 55%; padding: 5px; } ctrko>ft>btn { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; border-radius: 11px; } cexfo { display: block; background: var(--bt); box-shadow: var(--bs-b); border-radius: 22px; margin: 22px 11px; overflow: hidden; } cexfo>hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--bc); background: var(--bc); } cexfo>hd>d { display: flex; align-items: center; font-weight: 600; } cexfo>hd>d>i { height: 11px; width: 11px; background: var(--bt); border-radius: 55%; padding: 7px; margin-right: 7px; } cexfo>hd>btn { height: 33px; width: 33px; transform: rotate(90deg); display: flex; align-items: center; justify-content: center; transition: 333ms; } cexfo>bd { display: flex; justify-content: space-between; padding: 22px; align-items: center; height: 0; transition: 333ms; opacity: 0; visibility: hidden; overflow: hidden; padding-top: 0; padding-bottom: 0; } cexfo.expnd>hd>btn { transform: rotate(-90deg); } cexfo>bd>btn { display: flex; height: 33px; width: 33px; background: var(--aaa); border-radius: 11px; padding: 5px; align-items: center; justify-content: center; } cexfo>bd>btn svg { fill: var(--b); } cexfo.expnd>bd { height: auto; visibility: visible; padding-top: 22px; padding-bottom: 22px; opacity: 1; } /* 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 */ 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; } } /* Unique Splash */ csplo { display: grid; grid-template-rows: 8vh 422px 22% 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; } bg.ripple { height: 444px; border-radius: 55px; margin: 22px; width: auto; } csplo>hd { position: relative; display: block; height: 100%; } bg.ripple { height: 100%; border-radius: 55px; margin: 22px auto; width: 100%; z-index: 999; } 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; background: url(/0/img/BlurElements.webp); } 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; } 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; height: 100%; grid-template-rows: 39% 155px auto; visibility: hidden; opacity: 0; position: absolute; inset: 0; transition: 999ms; } 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: 66%; width: 66%; margin: 0 auto; } 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; } /* 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; } .desktop { display: none; } } /* 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 */ .quality__item { position: relative; } wallet>bl { border-radius: 22px; } 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 is>i { height: 16px; width: 16px; margin-right: 3px; } 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; } cpdo { display: block; padding: 22px; background: var(--bt); border-radius: 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%; } 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; } 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; } cmbop>bl { background: var(--bt); padding: 22px; border-radius: 22px; } 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; } /*TeacherCard*/ ctco i { width: 20px;height: 20px;} ctco star { display: flex ; } ctco hd svg { fill: var(--b1); } ctco wr { flex: 1; height: 8px; background-color: var(--a2); border-radius: 4px; overflow: hidden; display: flex ; width: 200px; } ctco ss { display: flex ; height: 100%; width: 44%; background: var(--a); border-radius: 8px; transition: width 1s ease; } ctco hd { display: flex ; justify-content: space-between; } /*///////// cawmn ////////*/ cawmn { display: flex ; width: 100%; height: fit-content; position: relative; } cawmn>bl { display: flex ; width: 100%; justify-content: space-between; align-items: center;} cawmn hd>h1 { font-size: 22px; font-family: sans-serif; font-weight: 500; margin: 12px 0px; color: var(--b1); } cawmn hd>t { font-size: 16px; font-weight: 400; font-family: sans-serif; color: var(--c); } cawmn .cbmd { display: flex ; align-items: center; border: 2px solid var(--bc); background-color: var(--b-t95); border-radius: 8px; width: 173px; justify-content: center; height: 36px; } cawmn .cbmd p { font-size: 16px; margin: 0; color: var(--c); padding: 0; } cawmn .cbmd i { width: auto; margin: 0px 2px; } cawmn svg { fill: black; } @media only screen and (max-width: 999px) { cawmn>bl { flex-direction: column; gap: 14px; } cawmn bd { width: 100%; } cawmn .cbmd { width: 100%; } cawmn hd { width: 100%; } } baco hd span {display: flex;} baco bd ul { list-style: none; padding: 0; } baco bd li { margin-bottom: 16px; } baco ul d { padding: 12px; background: var(---p1p); box-shadow: 0 0 1px var(---p1p); border-radius: 4px; display: flex ; flex-direction: column; } baco { display: none; } badn>bl { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 1rem; } badn hd>i { width: 18px; transform: rotate(270deg); } badn>bl>hd { display: flex ; justify-content: space-between; border-bottom: solid 1px var(---bc); padding-bottom: 16px; } badn hd svg { fill: var(--b1); } badn li { margin-bottom: 18px;font-size: 15px; } badn.Process ft { display: block; } badn.Process bd { display: block; } badn>bl>bd,badn>bl>ft { display: none; } badn bd b { font-size: 13px; font-weight: 500; } cedc bl{display: grid ; gap: 11px; padding: 22px; box-shadow: var(--bs1); border-radius: 22px; text-align: center;} cedc hd i { height: 100%; row-gap} cedc hd { display: block; position: relative; width: fit-content; margin: auto; } cedc hd i img { max-width: 188px; border-radius: 11px; object-fit: cover; box-shadow: var(--bs); margin-inline: auto; } cedc hd btn { position: absolute; background: var(---b); backdrop-filter: blur(9px); height: 22px; width: 22px; bottom: 16px; right: 16px; padding: 7px; border-radius: 22px; } cedc hd svg { fill: var(--b1); } cedc bd h3 { margin: 0; font-size: 18px; font-weight: bold; } cedc bd t { font-size: 12px; color: var(--c); line-height: 1.4; display: grid ; grid-template-columns: 16px auto; justify-content: center; align-items: center; text-align: start;} cedc bd d { display: flex; justify-content: space-around; align-items: center; font-size: 14px; color: var(--text); gap: 11px; } cedc bd d d { display: flex; align-items: center; gap: 6px; color: var(--text); } cedc bd d svg { width: 16px; height: 16px; fill: gold; } cedc ft btn { margin-top: 11px; color: var(--accent); font-weight: bold; cursor: pointer; background: none; border: none; padding: 11px; text-decoration: underline; } cedc btn input { padding: 0; position: absolute; inset: 0; height: 33px; width: 33px; opacity: 0; z-index: 99; } @media screen and (max-width: 999px) { cedc bl { margin:11px; } } /*add_teacher*/ .cath cadth { display: grid ;} cadth{ display: grid ; margin: 41px 0; } cadth>bl{ display: flex ; background :var(--b-t22); width: auto; flex-direction: column; border-radius: 16px; padding: 24px; box-shadow: inset 0px 0px 3px 0px var(--bor); justify-content: space-between; margin: 0 10px;} cadth hd { display: flex ; align-items: flex-start; justify-content: space-between; margin-bottom: 5%; } cadth hd h3 { width: 100%; font-size: 24px; font-weight: 600; line-height: 34px; } cadth hd btn { display: block; margin-left: 11px; cursor: pointer; } cadth line { display: flex ; height: 0px; width: 100%; border: 1px dotted var(--bc); } cadth bd { display: flex ; flex-direction: column; justify-content: center; } cadth bd wrs { display: flex ; flex-direction: column; align-items: flex-start; } cadth bd gd { display: grid ; grid-template-columns: 1fr 1fr; column-gap: 16px; } cadth gd img { margin-right: 7px; max-width: 100%; max-height: 100%; } cadth bd bl { display: block; margin: 8px 0; } cadth bd label { display: inline-block; font-size: 15px; line-height: 18px; margin-bottom: 4px; font-weight: 500; } cadth bd sup { color: var(--a2); } cadth bd input { outline: 0; border-radius: 6px; display: block; border: 1px solid var(--bc); height: unset; font-weight: 400; color: var(--b1);width: calc(100% - 43px); height: 47px; padding: 0 18px; font-size: 18px; line-height: 20px; margin-bottom: 19px;} cadth ft { display: flex ; align-items: center; justify-content: space-between; column-gap: 16px; } cadth ft btn { display: flex ; width: 100%; align-items: center; justify-content: center; border: 1px solid var(--bc); border-radius: 8px; padding: 15px 20px; box-shadow: inset 0 0 2px 0 var(--bc); cursor: pointer; font-size: 20px; font-weight: 500; } cadth ft btn:nth-child(2) { background-color: var(--aa); color: var(--b-t95);} cadth bd { display: block; margin: 8px 0; } cadth bd img { margin-right: 7px; max-width: 100%; max-height: 100%; } cadth input#jd[type="date"]::-webkit-calendar-picker-indicator { display: none; } sstt cstco { display: flex ; justify-content: center; width: 100%; gap:13px; } /* Add_AiSpeech */ caas { display: flex ; flex-direction: column; justify-content: center; align-items: center; width: 50%; max-width: 480px; height: 100%; border: 1px solid var(--bor); border-radius: 12px; padding: 12px; } /* hd */ caas hd { display: flex ; flex-direction: column; width: 100%; } caas cast { display: flex ; align-items: center;gap: 6px;margin-bottom: 9px; } caas cast i { background-color: var(--aat); padding: 4px; width: 22px; cursor: pointer;} caas cast t { font-size: 16px; color: var(--b1); font-weight: 500; } caas t { color: var(--c); font-size: 14px; font-weight: 400; } caas hd bl { display: flex ; align-items: center; border: 1px solid var(--bc); border-radius: 8px; padding: 6px; cursor: pointer; margin-top: 10px; } caas bl i { width: auto; margin-right: 6px; } caas bl t { font-size: 15px; font-weight: 500; } /* bd */ caas bd { display: flex ; flex-direction: column; } caas caf i { width: auto; } caas caf svg { width: 49px; height: 49px; } caas bd caf { display: flex ; flex-direction: column; width: 100%; border: 2px dashed #BD9DFF; border-radius: 14px; justify-content: center; align-items: center; padding: 20px 0px; margin-top: 12px; } caas caf h2 { font-weight: 500; color: var(--b1); display: flex ; gap: 6px; } caas caf span { color: var(--aa); cursor: pointer; } caas caf t { font-weight: 400; } caas caf h4 { color: var(--b1); font-weight: 500; } caas label { color: var(--c); font-weight: 500; margin: 10px 0; opacity: 1;} caas bd textarea { background: 0; height: 137px; outline: unset; font-size: 16px; width: 96%; color: var(--b1); resize: none;} /* ft */ caas ft { display: flex ; flex-direction: column;width: 100%;} caas cso i { width: auto; height: auto; } caas cso svg { width: 19px; fill: var(--c); } caas cso { display: flex ; justify-content: space-between; width: 98%; border: 1px solid var(--bor); border-radius: 8px; align-items: center; padding: 6px;cursor: pointer; } caas ft label { margin: 9px 0 3px; } caas ft btn { background-color: var(--aa); justify-content: center; display: flex ; border-radius: 9px; padding: 7px 0; margin: 11px 0 0; } caas cso t { font-size: 16px; font-weight: 400; } @media only screen and (max-width: 1320px) { caas{max-width: 430px;} } @media only screen and (max-width: 1050px) { caas{max-width: 400px;} } @media only screen and (max-width: 999px) { sstt cstco{flex-wrap: wrap;} caas {max-width: 95%; width:100%; } } .cac acses{ display: flex ; } .cac content { position: unset; } .cac bg { background: var(--bor); backdrop-filter: blur(6px); z-index: 9; } acses { display: none ; position: absolute; top: 43px; right: 2%; max-width: 612px; background-color: #fff; width: 100%; flex-direction: column; border-radius: 16px; padding: 24px; box-shadow: inset 0px 0px 3px 0px #EAE7EE; justify-content: space-between; height: fit-content; z-index: 9999; } acses hd { display: flex ;align-items: flex-start; justify-content: space-between; } acses hd h3 { color: var(--b1); font-size: 24px; font-weight: 600; line-height: 34px; } acses hd btn { display: block; margin-left: 11px; cursor: pointer; } acses bd { display: flex ; flex-direction: column; justify-content: center; } acses bd d { display: block; margin: 8px 0; } acses bd d tx { display: inline-block; font-size: 15px; line-height: 18px; margin-bottom: 4px; font-weight: 500; color: var(--b1);} acses bd d tx sup { color: #FF4AA1; } acses bd d>wr { display: flex ; padding: 8px 12px; border: 1px solid #EAE7EE; border-radius: 8px; box-shadow: inset 0 0 2px 0 #EAE7EE; } acses bd d input{ outline: 0; border-radius: unset; display: block; border: 0; height: unset; font-weight: 400; color: var(--c); width: calc(100% - 58px); padding: 0; font-size: 16px; line-height: 20px;} acses bd d:nth-child(3) { display: flex ; justify-content: flex-start; align-items: center; } acses bd d:nth-child(3) i { display: flex ; align-items: center; justify-content: center; width: auto; border-radius: 50%; padding: 20px; background-color: #F7F4FA; height: auto; margin-right: 16px; } acses bd d:nth-child(3) wrs { display: flex ; flex-direction: column; align-items: flex-start;cursor: pointer;} acses bd d:nth-child(3) wrs tx { display: inline-block; font-size: 16px; line-height: 20px; margin-bottom: 0px; } acses bd d:nth-child(3) wrs tx:nth-child(2) {color: #594173; display: inline-block; font-size: 13px; line-height: 20px; margin-bottom: 0px; } acses bd d:nth-child(3) wrs btn { display: flex ; font-size: 12px; line-height: 16px; border: 1px solid #EAE7EE; border-radius: 8px; padding: 7px 20px; align-items: center; margin-top: 8px; } acses bd d textarea { width: 100%; outline: 0; border: 0; height: 160px; resize: none; font-size: 16px; line-height: 20px; font-family: sans-serif; color: #252525; } acses bd gd { display: grid ; grid-template-columns: 1fr 1fr; column-gap: 16px; } acses bd gd d:nth-child(3){ display: block; margin: 8px 0;} acses bd>d { width: 100%; } acses ft { display: flex ; align-items: center; justify-content: space-between; column-gap: 16px; } acses ft btn { display: flex ; width: 100%; align-items: center; justify-content: center; border: 1px solid #EAE7EE; border-radius: 8px; padding: 7px 20px; box-shadow: inset 0 0 2px 0 #EAE7EE;cursor: pointer; color: var(--c); } acses ft btn:nth-child(2) { background-color: #6F2BFF; color: #fff;cursor: pointer; } @media only screen and (max-width: 999px) { acses { width: auto; right: unset; margin: 0 7px; } } cane { background-color: var(--b); box-shadow: 0 0 4px var(---bc); border-radius: 12px;margin: unset; } cane bl hd { padding-bottom: 20px; display: block; } cane h2 { color: var(--b1); font-weight: 600; font-size: 20px; line-height: 24px; } cane b { color: var(--b1); } cane a { color: var(--p4); font-weight: 400;} cane p {color: var(--b1);} cane i { height: 50%; width: 50%; margin-left: auto; margin-right: auto; } cane img { border-radius: 0;} bapo {display: block; border-radius: 12px; padding: 24px; margin: unset; background-color: var(--b); box-shadow: 0 0 4px var(---bc); } baro bl { display: block; background: var(--b); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } baro svg { fill: var(--b1); } baro th { width: 24%; padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b); } baro tbody tr { border-bottom: dashed 2px var(---bc); } baro td:nth-child(1) { border-right: solid 1px var(--bc); display: flex ; align-items: center; } baro ft dv { display: flex ; margin-block: 17px; align-items: center; gap: 5px; } baro i { width: 13px; } baro hd { display: flex ; justify-content: space-between; padding-bottom: 22px;font-size: 13px;} bsdo.Medical baro:nth-child(1) { display: none; } bsdo.Medical baro:nth-child(2) { display: none; } /* Ai_chat */ caich { display: flex ; flex-direction: column; width: 50%; max-width: 425px; border: 1px solid var(--bor); border-radius: 12px 0 0 12px; justify-content: space-between;} caich chets i svg { width: 20px; } caich hd { display: flex ; flex-direction: column; } caich serch i { width: auto; height: auto; } caich serch svg { width: 20px; fill: var(--c); } caich serch { display: flex ; border-bottom: 1px solid var(--bor);padding: 8px 5px; } caich serch bl { display: flex ; justify-content: center; border: 1px solid var(--bor); margin: auto; border-radius: 6px; padding: 7px 7px; height: auto; background: var(--a1); } caich serch input { width: 100%; height: auto; background: 0} caich chets { display: flex ; width: 100%; } caich chets bd { display: flex ; background-color: var(--a1); border-radius: 8px; padding: 9px; margin: auto; width: 82%; align-items: start; gap: 5px; } caich end { display: flex ; flex-direction: column; } caich end h5 { font-size: 16px; color: var(--c); font-weight: 500; } caich end p { color: var(--c); font-size: 14px; font-weight: 400; margin: 0; } caich chets bd i { width: auto; height: auto;margin-top: 12px; } caich ft i{width: auto; height: auto;} caich ft path { stroke: var(--b-t95);width:10px; } caich ft { display: flex ; background-color: var(--aa); border-radius: 12px; margin: 8px; justify-content: center;padding: 13px 0px; } caich ft svg{width: 21px;} caich ft t { font-size: 16px; font-weight: 500; } @media (max-width: 999px){ caich { width: 100%; max-width: 99%; border-radius: 12px; height: 655px; margin: auto; } caich serch { padding: 8px 9px; } caich serch bl { width: 100%;} } /* All_course */ cacs { display: flex ; position: relative; } cacs>bl { display: grid ; grid-template-rows: 9% auto 11%; max-width: 1280px; width: 100%; min-height: 555px; background-color: white;border-radius: 14px;max-height: 555px; } cacs bl>hd { display: grid ; grid-template-columns: 22% 19% 11% 12% 12% 12% 11%; background-color: #F7F4FA; align-items: center; } cacs tds>bl { display: grid ; grid-template-columns: 22% auto 13%; } cacs i { height: auto; width: auto; } cacs tds bd { display: grid ; grid-template-columns:29% 17% 19% 18% 14%; align-items: center; } tds>bl>hd { display: flex ; background-color: white; gap:10px;} cacs t { font-size: 16px; font-weight: 500; } cacs p { font-size: 14px; font-weight: 500; display: flex ; align-items: center; gap: 8px;} cacs h5 { font-size: 14px; font-weight: 600; } cacs ft { display: grid ; grid-template-columns: 31% auto;padding: 0px 34px 0px 13px; } cacs tds ft { display: flex ; justify-content: space-around; } cacs right { display: flex ; justify-content: end; gap: 10px; align-items: center; } cacs .PreviouL { display: flex ; align-items: center; gap: 8px; border-radius: 8px; font-size: 16px; font-weight: 400; padding: 9px 30px 9px 30px; color: #2B0F49; background: 0; border: 1px solid #EAE7EE; } cacs .an1 { font-size: 16px; font-weight: 500; color: #2B0F49; background: 0; border: 1px solid #EAE7EE; border-radius: 6px; padding: 10px 12px 9px 12px; } cacs bd { display: flex ; flex-direction: column; overflow: scroll; } cacs tds { border-bottom: 2px solid #EAE7EE; } cacs .an3 { background-color: 6F2BFF; color: white; } cacs img { cursor: pointer; } cacs button { cursor: pointer; } cacs button.bpld { padding: 5px 17px; background: #1AECD2; width: auto; box-sizing: border-box; color: white; border-radius: 8px; } cacs l { width: 113px; display: flex ; height: 6px; background-color: #EAE7EE; border-radius: 11px; position: relative; } cacs l::after { content: ""; position: absolute; left: 1px; background: blue; width: 20%; height: 100%; border-radius: 11px; } caee { display: block; padding: 20px; position: relative; margin-block: 2rem; } caee hd { display: block; margin-bottom: 20px; } caee dv { display: flex; margin-bottom: 15px; } caee dv strong { display: block; font-weight: 600; color: var(--b1);} caee dv span { font-size: 14px; color: var(--btn11); line-height: 1.6; } caee bd { display: block; min-height: 50px;} bado>bl>hd,bado>bl>bd { display: grid ; grid-template-columns: 50% 50%; } bado>bl>hd {align-items: center; } @media only screen and (max-width: 999px) { bado>bl>hd,bado>bl>bd,bado>bl>ft{grid-template-columns: 100%;padding: 11px;} }cclo { display: flex ;flex-direction: column; padding: 10px; border: 1px solid #eae7ee; border-radius: 15px;margin: 5px 0px 5px 5px;gap: 7px; } cclo hd { display: flex ; align-items: baseline; justify-content: space-between; } cclo hd h3 { color: var(--b1); } cclo hd left { display: flex ; flex-direction: column; gap: 10px; } cclo hd btns { display: flex ; align-items: center; gap: 5px; color: #594173; font-size: 0.88em; } cclo hd btns btn { display: flex ; align-items: center; gap: 5px;} cclo hd button { display: flex ; gap: 5px; align-items: center; padding: 5px 8px; background: white; border: 1px solid #eae7ee; border-radius: 5px; font-size: 0.77em; color: #594173; } cclo hd button svg { width: 13px; fill: var(--c); } cclo hd input[type="radio"] { margin-right: 5px; width: auto; } cclo bd { display: flex ; align-items: center; justify-content: center; padding: 0px 10px; position: relative;} cclo bd>hd { display: flex ; position: absolute; top: -16px; font-size: 0.80em; color: var(--c); justify-content: space-between; align-items: center; width: 100%; } cclo bd>hd>t1 { position: relative; top: 16px; left: 20px; bottom: 0; right: 0; } t2 { position: relative; top: 4px; left: 14px; } t3 { position: relative; top: 12px; left: 12px; } t4 { position: relative; top: 7px; left: 11px; } t5 { position: relative; top: 2; left: -3px; } t6 { position: relative; top: 8px; left:-14px; } cclo bd svg { width: 100%; height: 59px; } cclo ft { display: flex ; align-items: center; justify-content: space-between; padding: 0px 25px; color: #594173; font-size: 0.88em; } @media only screen and (max-width: 999px) { cclo {margin: 5px 0px } } cato { display: flex ; flex-direction: column; gap: 0px; border: 1px solid #eae7ee; border-radius: 15px; padding: 5px; } cato hd { display: flex ; align-items: center; justify-content: space-between; padding: 5px 5px;} cato hd btn { display: grid ; gap: 5px; padding: 3px 5px; border: 1px solid #eae7ee; border-radius: 5px; color: var(--c); font-size: 12px; grid-template-columns: auto 20px; } cato bd { display: flex ; flex-direction: column; gap: 5px; border: 1px solid var(--bc); border-radius: 12px; } cato bd thead { display: flex ; align-items: center; justify-content: space-between; padding: 6px 5px; background: #f7f4fa; border-radius: 15px 15px 0px 0px; } table.course { display: flex ; flex-direction: column;border-radius: 15px; border: 1px solid #eae7ee;} table { border-collapse: collapse; width: 100%; color: var(--c);} td { border-bottom: 1px solid #dddddd; text-align: start; padding: 8px; } cato th { background-color: #F7F4FA; text-align: start; padding: 10px 0 10px 8px;font-size: 16px; font-weight: 500; } table td>ci { display: grid ; justify-content: left; gap: 7px; padding: 0; align-items: center; grid-template-columns: 33px 33px 33px; } table td>ts { display: grid ; justify-content: left; gap: 7px; padding: 0; align-items: center; grid-template-columns: 131px 35px; } cato table cis { display: grid ; justify-content: left; gap: 7px; padding: 0; align-items: center; grid-template-columns: 50px 99px; } @media only screen and (max-width: 999px) { cato {margin: 0px 11px;overflow: auto;} cato th { text-align: start; white-space: nowrap;} cato td { white-space: nowrap; } cato table cis { grid-template-columns: 22px 22px 22px; } cato .baar svg {width: 55%; } } /*date=29/01/2025*/ cato i { display: contents; margin: 0; cursor: pointer; height: 20px; width: 16px; } cato h3 { color: var(--b1); } cato td svg { width: 20px; margin: 0; } cato btn svg { fill: var(--c); } cato .baar svg {width: 100%; } /* /30/1/2025/ */ cato .cacl { border-radius: 11px 0 0 0; } cato .cacr { border-radius: 0 11px 0 0; } cato .cactu svg { width: 47px; } cato td { font-size: 16px; font-weight: 500; } /* Analytics_MonthData */ caldm { display: flex ; flex-wrap: wrap; height: auto; gap: 14px; max-width: 682px; } clmd { display: flex ; flex-direction: column; border: 1px solid var(--bc); border-radius: 14px; padding: 11px; gap: 10px; margin: 4px 4px; } clmd hd { display: grid ; justify-content: space-between; padding: 7px 0; grid-template-columns: auto 25px; } clmd bd { display: flex ; width: 100%; justify-content: space-between; padding: 10px 0; font-size: 10px; } clmd ft { display: grid ; width: 100%; justify-content: space-between; grid-template-columns: auto auto; gap: 15px; align-items: center; } clmd i{width: auto; height: auto;} clmd hd h3{font-size: 16px;color: var(--bt); font-weight: 500;} clmd left { display: flex ;align-items: center;gap: 10px; } clmd right { display: flex ;align-items: center; } clmd right t { font-size: 14px; font-weight: 400; color: var(--c0); } clmd ft t { font-size: 14px; font-weight: 400; color: var(--c); } @media only screen and (max-width: 999px) { clmd { margin: 7px 0; } } @keyframes scan-overlay { 0% { background-position: 0 0; } 100% { background-position: 0 -100%; } } .Animation{ animation: scan-overlay 16s linear infinite; background: linear-gradient(#fbf6c0, #fbf6c0 3px, transparent 0, transparent 9px); background-size: 100% 7px; opacity: .05; } .ClipArt{ -webkit-clip-path: polygon(97.448% .734%, 99.706% 5.532%, 99.706% 5.532%, 99.752% 5.637%, 99.793% 5.747%, 99.83% 5.862%, 99.863% 5.981%, 99.89% 6.104%, 99.913% 6.23%, 99.931% 6.359%, 99.944% 6.491%, 99.952% 6.624%, 99.955% 6.758%, 99.955% 37.888%, 99.955% 37.888%, 99.95% 38.064%, 99.937% 38.238%, 99.914% 38.408%, 99.884% 38.572%, 99.846% 38.73%, 99.799% 38.881%, 99.745% 39.024%, 99.684% 39.158%, 99.616% 39.281%, 99.542% 39.394%, 97.566% 42.09%, 97.566% 42.09%, 97.485% 42.212%, 97.411% 42.347%, 97.344% 42.492%, 97.286% 42.648%, 97.235% 42.812%, 97.193% 42.985%, 97.16% 43.164%, 97.136% 43.348%, 97.122% 43.537%, 97.117% 43.73%, 97.117% 56.042%, 97.117% 56.042%, 97.12% 56.207%, 97.131% 56.369%, 97.149% 56.529%, 97.173% 56.685%, 97.204% 56.837%, 97.242% 56.984%, 97.286% 57.125%, 97.336% 57.26%, 97.392% 57.388%, 97.454% 57.507%, 99.644% 61.413%, 99.644% 61.413%, 99.701% 61.523%, 99.753% 61.64%, 99.799% 61.764%, 99.839% 61.893%, 99.874% 62.028%, 99.903% 62.168%, 99.925% 62.311%, 99.941% 62.458%, 99.951% 62.607%, 99.955% 62.759%, 99.955% 94.175%, 99.955% 94.175%, 99.951% 94.328%, 99.941% 94.48%, 99.924% 94.629%, 99.901% 94.774%, 99.871% 94.916%, 99.836% 95.052%, 99.794% 95.183%, 99.747% 95.308%, 99.694% 95.426%, 99.635% 95.536%, 97.44% 99.357%, 97.44% 99.357%, 97.381% 99.452%, 97.319% 99.538%, 97.254% 99.614%, 97.186% 99.682%, 97.115% 99.739%, 97.042% 99.786%, 96.967% 99.824%, 96.891% 99.851%, 96.814% 99.867%, 96.735% 99.873%, 55.872% 99.873%, 55.872% 99.873%, 55.769% 99.863%, 55.669% 99.835%, 55.571% 99.789%, 55.476% 99.727%, 55.385% 99.647%, 55.299% 99.552%, 55.219% 99.441%, 55.144% 99.316%, 55.076% 99.177%, 55.016% 99.025%, 54.526% 97.654%, 54.526% 97.654%, 54.46% 97.488%, 54.386% 97.337%, 54.305% 97.2%, 54.217% 97.08%, 54.123% 96.976%, 54.024% 96.889%, 53.921% 96.821%, 53.815% 96.771%, 53.705% 96.74%, 53.593% 96.73%, 46.357% 96.73%, 46.357% 96.73%, 46.231% 96.743%, 46.109% 96.781%, 45.99% 96.843%, 45.877% 96.929%, 45.77% 97.036%, 45.67% 97.164%, 45.578% 97.311%, 45.495% 97.478%, 45.421% 97.661%, 45.359% 97.861%, 45.094% 98.833%, 45.094% 98.833%, 45.037% 99.017%, 44.97% 99.186%, 44.893% 99.339%, 44.809% 99.474%, 44.717% 99.592%, 44.618% 99.69%, 44.514% 99.769%, 44.406% 99.826%, 44.293% 99.861%, 44.178% 99.873%, 38.784% 99.873%, 3.426% 99.873%, 3.426% 99.873%, 3.351% 99.867%, 3.276% 99.852%, 3.203% 99.828%, 3.131% 99.793%, 3.061% 99.749%, 2.993% 99.696%, 2.927% 99.634%, 2.863% 99.563%, 2.802% 99.484%, 2.744% 99.396%, .388% 95.539%, .388% 95.539%, .325% 95.428%, .269% 95.308%, .218% 95.181%, .173% 95.047%, .135% 94.906%, .103% 94.76%, .078% 94.61%, .06% 94.456%, .049% 94.298%, .046% 94.139%, .046% 62.794%, .046% 62.794%, .049% 62.637%, .06% 62.482%, .077% 62.33%, .102% 62.181%, .133% 62.037%, .17% 61.899%, .213% 61.766%, .262% 61.639%, .318% 61.52%, .378% 61.409%, 2.701% 57.515%, 2.701% 57.515%, 2.767% 57.394%, 2.827% 57.264%, 2.881% 57.126%, 2.928% 56.982%, 2.969% 56.83%, 3.003% 56.673%, 3.029% 56.512%, 3.048% 56.346%, 3.06% 56.177%, 3.064% 56.006%, 3.064% 43.766%, 3.064% 43.766%, 3.058% 43.567%, 3.043% 43.372%, 3.017% 43.182%, 2.982% 42.998%, 2.938% 42.822%, 2.884% 42.654%, 2.822% 42.496%, 2.752% 42.348%, 2.674% 42.213%, 2.588% 42.091%, .482% 39.39%, .482% 39.39%, .404% 39.278%, .332% 39.153%, .267% 39.018%, .21% 38.873%, .161% 38.719%, .121% 38.556%, .088% 38.388%, .065% 38.213%, .05% 38.034%, .046% 37.852%, .046% 6.793%, .046% 6.793%, .048% 6.652%, .057% 6.514%, .071% 6.377%, .091% 6.243%, .115% 6.112%, .145% 5.985%, .18% 5.862%, .221% 5.743%, .265% 5.631%, .315% 5.524%, 2.734% .692%, 2.734% .692%, 2.794% .58%, 2.859% .48%, 2.928% .389%, 3% .31%, 3.076% .242%, 3.155% .186%, 3.235% .142%, 3.318% .11%, 3.403% .09%, 3.488% .084%, 5.991% .084%, 15.856% .084%, 42.774% .084%, 42.774% .084%, 42.887% .095%, 42.998% .129%, 43.105% .184%, 43.208% .26%, 43.305% .356%, 43.396% .47%, 43.48% .601%, 43.556% .75%, 43.624% .914%, 43.682% 1.093%, 44.179% 2.84%, 44.179% 2.84%, 44.242% 3.035%, 44.315% 3.214%, 44.398% 3.375%, 44.49% 3.519%, 44.589% 3.643%, 44.695% 3.747%, 44.807% 3.829%, 44.923% 3.89%, 45.044% 3.927%, 45.167% 3.939%, 54.978% 3.939%, 54.978% 3.939%, 55.104% 3.926%, 55.227% 3.888%, 55.345% 3.825%, 55.459% 3.74%, 55.566% 3.632%, 55.667% 3.504%, 55.759% 3.355%, 55.842% 3.188%, 55.915% 3.004%, 55.978% 2.803%, 56.43% 1.127%, 56.43% 1.127%, 56.488% .942%, 56.555% .773%, 56.631% .62%, 56.716% .484%, 56.808% .366%, 56.907% .267%, 57.011% .188%, 57.12% .131%, 57.232% .096%, 57.348% .084%, 83.987% .084%, 94.144% .084%, 96.672% .084%, 96.672% .084%, 96.761% .091%, 96.849% .112%, 96.934% .146%, 97.018% .194%, 97.099% .254%, 97.176% .327%, 97.251% .412%, 97.321% .508%, 97.387% .616%, 97.448% .734%); clip-path: polygon(97.448% .734%, 99.706% 5.532%, 99.706% 5.532%, 99.752% 5.637%, 99.793% 5.747%, 99.83% 5.862%, 99.863% 5.981%, 99.89% 6.104%, 99.913% 6.23%, 99.931% 6.359%, 99.944% 6.491%, 99.952% 6.624%, 99.955% 6.758%, 99.955% 37.888%, 99.955% 37.888%, 99.95% 38.064%, 99.937% 38.238%, 99.914% 38.408%, 99.884% 38.572%, 99.846% 38.73%, 99.799% 38.881%, 99.745% 39.024%, 99.684% 39.158%, 99.616% 39.281%, 99.542% 39.394%, 97.566% 42.09%, 97.566% 42.09%, 97.485% 42.212%, 97.411% 42.347%, 97.344% 42.492%, 97.286% 42.648%, 97.235% 42.812%, 97.193% 42.985%, 97.16% 43.164%, 97.136% 43.348%, 97.122% 43.537%, 97.117% 43.73%, 97.117% 56.042%, 97.117% 56.042%, 97.12% 56.207%, 97.131% 56.369%, 97.149% 56.529%, 97.173% 56.685%, 97.204% 56.837%, 97.242% 56.984%, 97.286% 57.125%, 97.336% 57.26%, 97.392% 57.388%, 97.454% 57.507%, 99.644% 61.413%, 99.644% 61.413%, 99.701% 61.523%, 99.753% 61.64%, 99.799% 61.764%, 99.839% 61.893%, 99.874% 62.028%, 99.903% 62.168%, 99.925% 62.311%, 99.941% 62.458%, 99.951% 62.607%, 99.955% 62.759%, 99.955% 94.175%, 99.955% 94.175%, 99.951% 94.328%, 99.941% 94.48%, 99.924% 94.629%, 99.901% 94.774%, 99.871% 94.916%, 99.836% 95.052%, 99.794% 95.183%, 99.747% 95.308%, 99.694% 95.426%, 99.635% 95.536%, 97.44% 99.357%, 97.44% 99.357%, 97.381% 99.452%, 97.319% 99.538%, 97.254% 99.614%, 97.186% 99.682%, 97.115% 99.739%, 97.042% 99.786%, 96.967% 99.824%, 96.891% 99.851%, 96.814% 99.867%, 96.735% 99.873%, 55.872% 99.873%, 55.872% 99.873%, 55.769% 99.863%, 55.669% 99.835%, 55.571% 99.789%, 55.476% 99.727%, 55.385% 99.647%, 55.299% 99.552%, 55.219% 99.441%, 55.144% 99.316%, 55.076% 99.177%, 55.016% 99.025%, 54.526% 97.654%, 54.526% 97.654%, 54.46% 97.488%, 54.386% 97.337%, 54.305% 97.2%, 54.217% 97.08%, 54.123% 96.976%, 54.024% 96.889%, 53.921% 96.821%, 53.815% 96.771%, 53.705% 96.74%, 53.593% 96.73%, 46.357% 96.73%, 46.357% 96.73%, 46.231% 96.743%, 46.109% 96.781%, 45.99% 96.843%, 45.877% 96.929%, 45.77% 97.036%, 45.67% 97.164%, 45.578% 97.311%, 45.495% 97.478%, 45.421% 97.661%, 45.359% 97.861%, 45.094% 98.833%, 45.094% 98.833%, 45.037% 99.017%, 44.97% 99.186%, 44.893% 99.339%, 44.809% 99.474%, 44.717% 99.592%, 44.618% 99.69%, 44.514% 99.769%, 44.406% 99.826%, 44.293% 99.861%, 44.178% 99.873%, 38.784% 99.873%, 3.426% 99.873%, 3.426% 99.873%, 3.351% 99.867%, 3.276% 99.852%, 3.203% 99.828%, 3.131% 99.793%, 3.061% 99.749%, 2.993% 99.696%, 2.927% 99.634%, 2.863% 99.563%, 2.802% 99.484%, 2.744% 99.396%, .388% 95.539%, .388% 95.539%, .325% 95.428%, .269% 95.308%, .218% 95.181%, .173% 95.047%, .135% 94.906%, .103% 94.76%, .078% 94.61%, .06% 94.456%, .049% 94.298%, .046% 94.139%, .046% 62.794%, .046% 62.794%, .049% 62.637%, .06% 62.482%, .077% 62.33%, .102% 62.181%, .133% 62.037%, .17% 61.899%, .213% 61.766%, .262% 61.639%, .318% 61.52%, .378% 61.409%, 2.701% 57.515%, 2.701% 57.515%, 2.767% 57.394%, 2.827% 57.264%, 2.881% 57.126%, 2.928% 56.982%, 2.969% 56.83%, 3.003% 56.673%, 3.029% 56.512%, 3.048% 56.346%, 3.06% 56.177%, 3.064% 56.006%, 3.064% 43.766%, 3.064% 43.766%, 3.058% 43.567%, 3.043% 43.372%, 3.017% 43.182%, 2.982% 42.998%, 2.938% 42.822%, 2.884% 42.654%, 2.822% 42.496%, 2.752% 42.348%, 2.674% 42.213%, 2.588% 42.091%, .482% 39.39%, .482% 39.39%, .404% 39.278%, .332% 39.153%, .267% 39.018%, .21% 38.873%, .161% 38.719%, .121% 38.556%, .088% 38.388%, .065% 38.213%, .05% 38.034%, .046% 37.852%, .046% 6.793%, .046% 6.793%, .048% 6.652%, .057% 6.514%, .071% 6.377%, .091% 6.243%, .115% 6.112%, .145% 5.985%, .18% 5.862%, .221% 5.743%, .265% 5.631%, .315% 5.524%, 2.734% .692%, 2.734% .692%, 2.794% .58%, 2.859% .48%, 2.928% .389%, 3% .31%, 3.076% .242%, 3.155% .186%, 3.235% .142%, 3.318% .11%, 3.403% .09%, 3.488% .084%, 5.991% .084%, 15.856% .084%, 42.774% .084%, 42.774% .084%, 42.887% .095%, 42.998% .129%, 43.105% .184%, 43.208% .26%, 43.305% .356%, 43.396% .47%, 43.48% .601%, 43.556% .75%, 43.624% .914%, 43.682% 1.093%, 44.179% 2.84%, 44.179% 2.84%, 44.242% 3.035%, 44.315% 3.214%, 44.398% 3.375%, 44.49% 3.519%, 44.589% 3.643%, 44.695% 3.747%, 44.807% 3.829%, 44.923% 3.89%, 45.044% 3.927%, 45.167% 3.939%, 54.978% 3.939%, 54.978% 3.939%, 55.104% 3.926%, 55.227% 3.888%, 55.345% 3.825%, 55.459% 3.74%, 55.566% 3.632%, 55.667% 3.504%, 55.759% 3.355%, 55.842% 3.188%, 55.915% 3.004%, 55.978% 2.803%, 56.43% 1.127%, 56.43% 1.127%, 56.488% .942%, 56.555% .773%, 56.631% .62%, 56.716% .484%, 56.808% .366%, 56.907% .267%, 57.011% .188%, 57.12% .131%, 57.232% .096%, 57.348% .084%, 83.987% .084%, 94.144% .084%, 96.672% .084%, 96.672% .084%, 96.761% .091%, 96.849% .112%, 96.934% .146%, 97.018% .194%, 97.099% .254%, 97.176% .327%, 97.251% .412%, 97.321% .508%, 97.387% .616%, 97.448% .734%); } .ClipArt1{ -webkit-clip-path: polygon(92.26% .538%, 99.35% 5.013%, 99.35% 5.013%, 99.435% 5.07%, 99.511% 5.13%, 99.58% 5.191%, 99.639% 5.254%, 99.69% 5.319%, 99.732% 5.385%, 99.765% 5.452%, 99.788% 5.521%, 99.802% 5.59%, 99.807% 5.659%, 99.807% 41.595%, 99.807% 41.595%, 99.799% 41.688%, 99.774% 41.779%, 99.732% 41.868%, 99.675% 41.955%, 99.603% 42.04%, 99.516% 42.121%, 99.414% 42.199%, 99.298% 42.273%, 99.168% 42.343%, 99.025% 42.408%, 93.903% 44.546%, 93.903% 44.546%, 93.737% 44.621%, 93.587% 44.702%, 93.452% 44.788%, 93.334% 44.879%, 93.232% 44.974%, 93.148% 45.072%, 93.082% 45.173%, 93.034% 45.277%, 93.005% 45.383%, 92.995% 45.49%, 92.995% 54.81%, 92.995% 54.81%, 93.007% 54.927%, 93.041% 55.043%, 93.099% 55.155%, 93.178% 55.265%, 93.277% 55.371%, 93.398% 55.472%, 93.537% 55.568%, 93.696% 55.657%, 93.873% 55.741%, 94.067% 55.817%, 98.884% 57.534%, 98.884% 57.534%, 99.052% 57.6%, 99.204% 57.672%, 99.34% 57.749%, 99.461% 57.832%, 99.564% 57.918%, 99.65% 58.009%, 99.718% 58.104%, 99.767% 58.201%, 99.797% 58.3%, 99.807% 58.401%, 99.807% 93.837%, 99.807% 93.837%, 99.803% 93.902%, 99.791% 93.966%, 99.77% 94.029%, 99.742% 94.092%, 99.706% 94.153%, 99.662% 94.214%, 99.611% 94.274%, 99.551% 94.332%, 99.485% 94.388%, 99.411% 94.443%, 92.247% 99.421%, 92.247% 99.421%, 92.106% 99.509%, 91.949% 99.59%, 91.776% 99.662%, 91.589% 99.726%, 91.39% 99.781%, 91.18% 99.827%, 90.962% 99.863%, 90.735% 99.89%, 90.503% 99.906%, 90.266% 99.911%, 69.228% 99.911%, 69.228% 99.911%, 68.993% 99.906%, 68.763% 99.89%, 68.539% 99.864%, 68.322% 99.829%, 68.115% 99.784%, 67.917% 99.73%, 67.732% 99.667%, 67.56% 99.596%, 67.402% 99.518%, 67.261% 99.431%, 61.978% 95.848%, 61.978% 95.848%, 61.814% 95.748%, 61.631% 95.656%, 61.431% 95.574%, 61.215% 95.501%, 60.986% 95.438%, 60.745% 95.386%, 60.493% 95.345%, 60.233% 95.315%, 59.965% 95.296%, 59.693% 95.29%, 49.871% 95.29%, 39.997% 95.29%, 39.997% 95.29%, 39.711% 95.297%, 39.432% 95.317%, 39.16% 95.35%, 38.899% 95.395%, 38.649% 95.452%, 38.413% 95.52%, 38.192% 95.599%, 37.989% 95.689%, 37.806% 95.788%, 37.643% 95.896%, 32.979% 99.39%, 32.979% 99.39%, 32.84% 99.483%, 32.682% 99.568%, 32.507% 99.645%, 32.317% 99.713%, 32.114% 99.772%, 31.899% 99.821%, 31.674% 99.86%, 31.44% 99.888%, 31.2% 99.905%, 30.954% 99.911%, 10.32% 99.911%, 10.32% 99.911%, 10.092% 99.906%, 9.867% 99.891%, 9.648% 99.866%, 9.436% 99.833%, 9.232% 99.79%, 9.038% 99.738%, 8.855% 99.678%, 8.684% 99.61%, 8.527% 99.535%, 8.385% 99.452%, .636% 94.452%, .636% 94.452%, .553% 94.395%, .479% 94.336%, .413% 94.275%, .355% 94.213%, .306% 94.149%, .266% 94.084%, .234% 94.018%, .211% 93.951%, .197% 93.883%, .193% 93.815%, .193% 58.395%, .193% 58.395%, .203% 58.294%, .232% 58.196%, .28% 58.1%, .347% 58.006%, .431% 57.916%, .533% 57.83%, .651% 57.748%, .785% 57.671%, .934% 57.599%, 1.098% 57.534%, 5.824% 55.817%, 5.824% 55.817%, 6.015% 55.74%, 6.189% 55.657%, 6.345% 55.568%, 6.482% 55.472%, 6.6% 55.372%, 6.698% 55.267%, 6.775% 55.159%, 6.831% 55.047%, 6.865% 54.933%, 6.877% 54.816%, 6.877% 45.483%, 6.877% 45.483%, 6.867% 45.377%, 6.839% 45.272%, 6.792% 45.17%, 6.727% 45.07%, 6.645% 44.972%, 6.545% 44.879%, 6.43% 44.789%, 6.298% 44.703%, 6.15% 44.622%, 5.988% 44.547%, .958% 42.407%, .958% 42.407%, .818% 42.343%, .691% 42.273%, .578% 42.2%, .478% 42.122%, .392% 42.042%, .322% 41.958%, .266% 41.872%, .226% 41.783%, .201% 41.693%, .193% 41.602%, .193% 5.683%, .193% 5.683%, .198% 5.609%, .214% 5.536%, .24% 5.464%, .277% 5.394%, .324% 5.324%, .38% 5.256%, .446% 5.19%, .522% 5.126%, .607% 5.064%, .702% 5.005%, 8.377% .507%, 8.377% .507%, 8.519% .431%, 8.675% .362%, 8.842% .3%, 9.02% .246%, 9.207% .199%, 9.403% .16%, 9.606% .129%, 9.815% .107%, 10.029% .093%, 10.246% .089%, 15.856% .089%, 30.974% .089%, 30.974% .089%, 31.217% .095%, 31.454% .111%, 31.686% .139%, 31.908% .177%, 32.122% .225%, 32.323% .282%, 32.512% .349%, 32.686% .424%, 32.844% .508%, 32.984% .6%, 37.641% 3.998%, 37.641% 3.998%, 37.804% 4.104%, 37.987% 4.201%, 38.19% 4.289%, 38.409% 4.366%, 38.643% 4.433%, 38.891% 4.489%, 39.15% 4.533%, 39.419% 4.565%, 39.695% 4.585%, 39.977% 4.591%, 59.713% 4.591%, 59.713% 4.591%, 59.982% 4.585%, 60.246% 4.567%, 60.503% 4.538%, 60.752% 4.498%, 60.991% 4.447%, 61.218% 4.386%, 61.433% 4.314%, 61.632% 4.234%, 61.815% 4.144%, 61.979% 4.046%, 67.257% .558%, 67.257% .558%, 67.399% .473%, 67.556% .396%, 67.728% .327%, 67.912% .266%, 68.108% .213%, 68.313% .169%, 68.528% .135%, 68.749% .109%, 68.976% .094%, 69.208% .089%, 83.986% .089%, 90.339% .089%, 90.339% .089%, 90.565% .094%, 90.788% .108%, 91.004% .133%, 91.214% .166%, 91.416% .208%, 91.609% .258%, 91.791% .317%, 91.961% .383%, 92.118% .457%, 92.26% .538%); clip-path: polygon(92.26% .538%, 99.35% 5.013%, 99.35% 5.013%, 99.435% 5.07%, 99.511% 5.13%, 99.58% 5.191%, 99.639% 5.254%, 99.69% 5.319%, 99.732% 5.385%, 99.765% 5.452%, 99.788% 5.521%, 99.802% 5.59%, 99.807% 5.659%, 99.807% 41.595%, 99.807% 41.595%, 99.799% 41.688%, 99.774% 41.779%, 99.732% 41.868%, 99.675% 41.955%, 99.603% 42.04%, 99.516% 42.121%, 99.414% 42.199%, 99.298% 42.273%, 99.168% 42.343%, 99.025% 42.408%, 93.903% 44.546%, 93.903% 44.546%, 93.737% 44.621%, 93.587% 44.702%, 93.452% 44.788%, 93.334% 44.879%, 93.232% 44.974%, 93.148% 45.072%, 93.082% 45.173%, 93.034% 45.277%, 93.005% 45.383%, 92.995% 45.49%, 92.995% 54.81%, 92.995% 54.81%, 93.007% 54.927%, 93.041% 55.043%, 93.099% 55.155%, 93.178% 55.265%, 93.277% 55.371%, 93.398% 55.472%, 93.537% 55.568%, 93.696% 55.657%, 93.873% 55.741%, 94.067% 55.817%, 98.884% 57.534%, 98.884% 57.534%, 99.052% 57.6%, 99.204% 57.672%, 99.34% 57.749%, 99.461% 57.832%, 99.564% 57.918%, 99.65% 58.009%, 99.718% 58.104%, 99.767% 58.201%, 99.797% 58.3%, 99.807% 58.401%, 99.807% 93.837%, 99.807% 93.837%, 99.803% 93.902%, 99.791% 93.966%, 99.77% 94.029%, 99.742% 94.092%, 99.706% 94.153%, 99.662% 94.214%, 99.611% 94.274%, 99.551% 94.332%, 99.485% 94.388%, 99.411% 94.443%, 92.247% 99.421%, 92.247% 99.421%, 92.106% 99.509%, 91.949% 99.59%, 91.776% 99.662%, 91.589% 99.726%, 91.39% 99.781%, 91.18% 99.827%, 90.962% 99.863%, 90.735% 99.89%, 90.503% 99.906%, 90.266% 99.911%, 69.228% 99.911%, 69.228% 99.911%, 68.993% 99.906%, 68.763% 99.89%, 68.539% 99.864%, 68.322% 99.829%, 68.115% 99.784%, 67.917% 99.73%, 67.732% 99.667%, 67.56% 99.596%, 67.402% 99.518%, 67.261% 99.431%, 61.978% 95.848%, 61.978% 95.848%, 61.814% 95.748%, 61.631% 95.656%, 61.431% 95.574%, 61.215% 95.501%, 60.986% 95.438%, 60.745% 95.386%, 60.493% 95.345%, 60.233% 95.315%, 59.965% 95.296%, 59.693% 95.29%, 49.871% 95.29%, 39.997% 95.29%, 39.997% 95.29%, 39.711% 95.297%, 39.432% 95.317%, 39.16% 95.35%, 38.899% 95.395%, 38.649% 95.452%, 38.413% 95.52%, 38.192% 95.599%, 37.989% 95.689%, 37.806% 95.788%, 37.643% 95.896%, 32.979% 99.39%, 32.979% 99.39%, 32.84% 99.483%, 32.682% 99.568%, 32.507% 99.645%, 32.317% 99.713%, 32.114% 99.772%, 31.899% 99.821%, 31.674% 99.86%, 31.44% 99.888%, 31.2% 99.905%, 30.954% 99.911%, 10.32% 99.911%, 10.32% 99.911%, 10.092% 99.906%, 9.867% 99.891%, 9.648% 99.866%, 9.436% 99.833%, 9.232% 99.79%, 9.038% 99.738%, 8.855% 99.678%, 8.684% 99.61%, 8.527% 99.535%, 8.385% 99.452%, .636% 94.452%, .636% 94.452%, .553% 94.395%, .479% 94.336%, .413% 94.275%, .355% 94.213%, .306% 94.149%, .266% 94.084%, .234% 94.018%, .211% 93.951%, .197% 93.883%, .193% 93.815%, .193% 58.395%, .193% 58.395%, .203% 58.294%, .232% 58.196%, .28% 58.1%, .347% 58.006%, .431% 57.916%, .533% 57.83%, .651% 57.748%, .785% 57.671%, .934% 57.599%, 1.098% 57.534%, 5.824% 55.817%, 5.824% 55.817%, 6.015% 55.74%, 6.189% 55.657%, 6.345% 55.568%, 6.482% 55.472%, 6.6% 55.372%, 6.698% 55.267%, 6.775% 55.159%, 6.831% 55.047%, 6.865% 54.933%, 6.877% 54.816%, 6.877% 45.483%, 6.877% 45.483%, 6.867% 45.377%, 6.839% 45.272%, 6.792% 45.17%, 6.727% 45.07%, 6.645% 44.972%, 6.545% 44.879%, 6.43% 44.789%, 6.298% 44.703%, 6.15% 44.622%, 5.988% 44.547%, .958% 42.407%, .958% 42.407%, .818% 42.343%, .691% 42.273%, .578% 42.2%, .478% 42.122%, .392% 42.042%, .322% 41.958%, .266% 41.872%, .226% 41.783%, .201% 41.693%, .193% 41.602%, .193% 5.683%, .193% 5.683%, .198% 5.609%, .214% 5.536%, .24% 5.464%, .277% 5.394%, .324% 5.324%, .38% 5.256%, .446% 5.19%, .522% 5.126%, .607% 5.064%, .702% 5.005%, 8.377% .507%, 8.377% .507%, 8.519% .431%, 8.675% .362%, 8.842% .3%, 9.02% .246%, 9.207% .199%, 9.403% .16%, 9.606% .129%, 9.815% .107%, 10.029% .093%, 10.246% .089%, 15.856% .089%, 30.974% .089%, 30.974% .089%, 31.217% .095%, 31.454% .111%, 31.686% .139%, 31.908% .177%, 32.122% .225%, 32.323% .282%, 32.512% .349%, 32.686% .424%, 32.844% .508%, 32.984% .6%, 37.641% 3.998%, 37.641% 3.998%, 37.804% 4.104%, 37.987% 4.201%, 38.19% 4.289%, 38.409% 4.366%, 38.643% 4.433%, 38.891% 4.489%, 39.15% 4.533%, 39.419% 4.565%, 39.695% 4.585%, 39.977% 4.591%, 59.713% 4.591%, 59.713% 4.591%, 59.982% 4.585%, 60.246% 4.567%, 60.503% 4.538%, 60.752% 4.498%, 60.991% 4.447%, 61.218% 4.386%, 61.433% 4.314%, 61.632% 4.234%, 61.815% 4.144%, 61.979% 4.046%, 67.257% .558%, 67.257% .558%, 67.399% .473%, 67.556% .396%, 67.728% .327%, 67.912% .266%, 68.108% .213%, 68.313% .169%, 68.528% .135%, 68.749% .109%, 68.976% .094%, 69.208% .089%, 83.986% .089%, 90.339% .089%, 90.339% .089%, 90.565% .094%, 90.788% .108%, 91.004% .133%, 91.214% .166%, 91.416% .208%, 91.609% .258%, 91.791% .317%, 91.961% .383%, 92.118% .457%, 92.26% .538%); } .SoundButton { -webkit-clip-path: polygon(2.815% 2.941%, 96.548% 2.941%, 96.548% 2.941%, 96.73% 3.02%, 96.893% 3.242%, 97.034% 3.586%, 97.151% 4.03%, 97.24% 4.555%, 97.298% 5.137%, 97.324% 5.756%, 97.313% 6.392%, 97.264% 7.022%, 97.173% 7.625%, 82.629% 82.673%, 82.629% 82.673%, 82.073% 85.273%, 81.46% 87.642%, 80.796% 89.769%, 80.085% 91.644%, 79.333% 93.258%, 78.545% 94.6%, 77.726% 95.661%, 76.881% 96.431%, 76.016% 96.9%, 75.134% 97.059%, 22.217% 97.059%, 22.217% 97.059%, 21.268% 96.875%, 20.339% 96.332%, 19.435% 95.443%, 18.563% 94.221%, 17.729% 92.679%, 16.941% 90.831%, 16.202% 88.688%, 15.521% 86.265%, 14.903% 83.574%, 14.355% 80.628%, 2.16% 7.454%, 2.16% 7.454%, 2.082% 6.852%, 2.044% 6.233%, 2.042% 5.616%, 2.073% 5.02%, 2.136% 4.463%, 2.226% 3.966%, 2.342% 3.546%, 2.481% 3.223%, 2.639% 3.015%, 2.815% 2.941%); clip-path: polygon(2.815% 2.941%, 96.548% 2.941%, 96.548% 2.941%, 96.73% 3.02%, 96.893% 3.242%, 97.034% 3.586%, 97.151% 4.03%, 97.24% 4.555%, 97.298% 5.137%, 97.324% 5.756%, 97.313% 6.392%, 97.264% 7.022%, 97.173% 7.625%, 82.629% 82.673%, 82.629% 82.673%, 82.073% 85.273%, 81.46% 87.642%, 80.796% 89.769%, 80.085% 91.644%, 79.333% 93.258%, 78.545% 94.6%, 77.726% 95.661%, 76.881% 96.431%, 76.016% 96.9%, 75.134% 97.059%, 22.217% 97.059%, 22.217% 97.059%, 21.268% 96.875%, 20.339% 96.332%, 19.435% 95.443%, 18.563% 94.221%, 17.729% 92.679%, 16.941% 90.831%, 16.202% 88.688%, 15.521% 86.265%, 14.903% 83.574%, 14.355% 80.628%, 2.16% 7.454%, 2.16% 7.454%, 2.082% 6.852%, 2.044% 6.233%, 2.042% 5.616%, 2.073% 5.02%, 2.136% 4.463%, 2.226% 3.966%, 2.342% 3.546%, 2.481% 3.223%, 2.639% 3.015%, 2.815% 2.941%); background-color: #551c0a; justify-content: center; align-items: center; width: 12.7%; height: 3.3vh; margin-top: 0; margin-left: 1px; display: none; position: absolute; top: 0; width: 33%; height: 4.2vh; margin-left: .5vw; display: flex; margin: auto; left: 0; right: 0; } .details__container, .page__stat, div.sidebar {background:var(--b1) !important} .sidebar__bottom { display: none; } .details__container:before, .page__stat:before, .widget_shadow:before{display:none} .widget_pt0, .page__stat{box-shadow:unset !important; border: unset !important; } .btn_purple, cdtio ft button{background:var(--a) !important} .th1{ text-transform: uppercase; font-family:WT-Skrappa,sans-serif; font-size: 16vh; text-align: center; justify-content: center; display: flex; letter-spacing: 6px;top: 77px; position: relative;} .mobile { background-color: #202020a8; background-image: linear-gradient(#00000080, #00000080), url(https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6697ad024bec6d8386b79e57_back4_def.webp); background-position: 0 0, 50%; background-size: auto, cover; display: block; } .mobile { background-image: linear-gradient(#0000008a, #0000008a), url(https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6697ad024bec6d8386b79e57_back4_def.webp); background-position: 0 0, 50%; background-size: auto, cover; } db d.main, main .page__stat.page__stat_pt32{margin:0 !important} .wonders_bg { background-image: linear-gradient(#00000061, #00000061), url(https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6669c9062e2bbd5dd623df6d_Ai-wonders-bg.webp); background-position: 0 0, 50%; background-size: auto, cover; width: 100%; height: 100vh; margin-left: auto; margin-right: auto; position: absolute; inset: 0%; } cm .products__preview { width: 44PX; height: 44px; } .products__item{color:var(--c)} cm .details__container { margin: unset; box-shadow: unset; } @media only screen and (max-width: 767px) { .products__row { display: flex ; align-items: center; border-top: 1px solid var(--b1) !important;} .products__body { border: 1px solid var(--b1) !important; display: none !important } .products__cell:nth-child(n+3) { display: block !important; } } .dropdown__head{box-sizing: border-box;width: 100% !important;} .dropdown__head.js-dropdown-head{margin:unset !important} @font-face { font-family: 'OffBit [bold]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4a0560cdee3b9d1c69_OffBitTrial-101Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Supply Mono [extra-light]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4a42e9946abda1dfb4_PPSupplyMono-Ultralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Supply Mono [regular]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4ae6ee1b2a9a82bec3_PPSupplyMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal [bold]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4aae44f6b2c0c813d0_PPNeueMontreal-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal [book] '; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4a68c4ce2fbcf00566_PPNeueMontreal-Book.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Neue Montreal [medium]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a2c4aa8927cc68ad5425c_PPNeueMontreal-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'WT Skrappa [condensed]'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665a34f44580d918d15d58be_WTSkrappa-Condensed.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'WT-Skrappa'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/666d8921d0a2e3aee506e4d9_WTSkrappa-Condensed.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PP RADER'; src: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/665c2f887b44d16d4a8d25a7_PPRader-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } caeo { margin: 0 auto; display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 20px; margin-block: 2rem; border: solid 1px var(---bc); } caeo bl { display: flex ; } caeo hd { display: flex; align-items: center; margin-right: 16px;} caeo hd i { width: 40px; height: 40px; background-color: var(--rd); color: var(---bc); border-radius: 50%; display: flex ; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; } caeo bd { flex: 1; display: flex; align-items: center; } caeo bd p { font-size: 15px; font-weight: 400; line-height: 1.4; opacity: .7; } caeo ft { display: flex; align-items: center; margin-left: 16px; flex-shrink: 0; } caeo ft bts { display: flex; } caeo ft bt { padding: 8px; } caeo ft bt i { height: 30px; width: 30px; } caeo ft bt i svg { fill: var(---c); } @media (max-width: 640px) { caeo { padding: 12px 16px; } caeo hd { margin-right: 12px; } caeo hd i { width: 36px; height: 36px; font-size: 16px; } caeo bd p { font-size: 14px; } caeo ft { margin-left: 12px; } } camt hd dv { display: flex ; align-items: center; gap: 8px; margin-bottom: 16px; } camt span { display: flex ; white-space: nowrap; align-items: center; font-size: 14px; opacity: .4; } camt hd i { width: 12px; height: 11px; } camt svg { fill: var(--b1); } camt span:nth-child(3) { opacity: unset; } camt bl { display: block; } camt h2 { font-size: 28px; margin-block: 11px; border-bottom: solid 1px var(---bc); padding-bottom: 16px; color: var(--b1);} camt ft i { width: 36px; height: 32px; background: var(--a1); padding: 13px 15px; border-radius: 8px;} camt ft { flex: 1; display: flex ; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 60px 20px; } camt bd dv { display: flex ; background: var(--a1); padding: 5px 7px; border-radius: 7px; margin: 9px; } camt bd div { display: flex ; } camt dv a:nth-child(1) { background: var(--b); border-radius: 8px; color: var(--p3);} camt a { padding: 7px 20px; color: var(--btn11); } camt p { font-size: 18px; color: var(--btn11); } @media(max-width:999px){ camt hd { display: flex ; } camt hd dv {margin-bottom: unset; } camt bl {padding: 9px; } } bago>bl { width: 171px; background: var(--a4); border: 1px solid var(--bc); border-radius: 8px; box-shadow: 0 2px 8px var(--a4); z-index: 999999999; position: absolute; } bago div i { width: 25px; } bago a { display: flex ; padding: 9px 16px; } bago div { padding: 13px 0px; } bago a { display: flex ; padding: 9px 16px; gap: 9px; font-size: 13px; font-weight: 500; } bago div svg { fill: var(--c); } codo.Assignment bago { display: block; } bago { display: none; } bago a:nth-child(6) { border-top: solid 1px var(---bc);} bago a:hover { background: var(--bc); }cacb { display: flex ; padding: 18px 30px; align-items: center; max-width: 777px; background: var(--b-t95); position: sticky; bottom: 0;width: 100%; } cacb bl { display: flex ; align-items: center; width: 100%; gap: 24px; } cacb bl hd { display: flex ; align-items: center; gap: 12px; cursor: pointer; } cacb bl hd svg { width: 25px; } cacb bl bd { display: flex ; align-items: center; background-color: #F7F4FA; border-radius: 10px; padding: 3px 8px 4px 9px; width: 90%; border: 1px solid #EAE7EE; } cacb bl bd input[type="srarch"] { outline: 0; border-radius: 4px 7px; display: block; max-width: 100%; border: 0; background: transparent; width: calc(100% - 58px); padding: 0px 9px; font-weight: 500; font-size: 13px; color: #594173; letter-spacing: 0px; } cacb bl bd btn#snd { display: flex ; align-items: center; justify-content: center; padding: 11px 23px; background: #6F2BFF; color: #ffff; border-radius: 8px; cursor: pointer; font-size: 12px; box-shadow: inset -1px 0px 5px #f5f5f5; } /* Assistants*/ casnt { display: flex ; flex-direction: column; padding: 13px 16px; border-radius: 12px; border: 1px solid #EAE7EE; position: relative; } casnt hd { display: flex; align-items: center; background: var(--a); min-width: 131px; width: 20%; justify-content: center; padding: 5px 1px; border-radius: 8px; cursor: pointer; box-shadow: var(--bxs); } casnt hd h1 { color: #ffffff; font-size: 16px; font-weight: 400; } casnt bd { display: flex ; align-items: center; justify-content: space-between; } casnt bl { display: flex ; margin: 4px 0px 0px; flex-direction: column; } casnt h2 { margin: 0px 0px 8px 16px; font-size: 18px; font-weight: 500; color: var(--b1); } casnt wd { display: flex ; align-items: center; margin: 4px 0px; cursor: pointer; } casnt cb { display: flex ; align-items: center; justify-content: center; padding: 7px 7px; background: #F1EAFF; border-radius: 21px; margin: 1px 9px; } casnt img.ducument { width: 16px; } casnt p.cst { margin: 0; font-size: 14px; color: #594173; font-weight: 500; } casnt ft { display: flex ; align-items: center; flex-wrap: wrap; } casnt see { display: flex ; align-items: center; justify-content: center; padding: 8px 10px; background: white; border-radius: 17px; cursor: pointer; border: 1px solid #eae7ee; margin: 3px 0px; min-width: 80px; } casnt see svg { width: 20px; } casnt see h5 { min-width: 80px; font-size: 14px; font-weight: 500;color:var(--c)} i#aroww { display: flex ; align-items: center; justify-content: center; background: #6F2BFF; border-radius: 50%; padding: 6px 5px; margin: 0px 11px; height: 10px; width: 10%; } #aroww img { width: 14px; } /* Assistants_ChatHelp */ cacho { display: flex ; flex-direction: column; gap: 5px; font-size: 0.99em;padding: 0px 5px; font-family: sans-serif;} cacho hd { display: flex ; align-items: center; gap: 5px; padding: 8px 0px; } cacho bd { display: flex ; flex-direction: column; gap: 10px; font-size: 15px;} cacho bd p { color: #594173; } cacho bd bl { display: flex ; align-items: center; gap: 5px; } cacho bd bl svg { width: 30px; height: 30px; } cacho bd d { display: flex ; padding: 0px 25px; } cacho bd t { display: flex ; align-items: center; padding: 0px 25px; color: #594173;} cacho bd d>ol { display: flex ; align-items: center; font-size: 15px; } cacho ft { display: flex ; align-items: center; gap: 5px; padding: 0px 25px; } /* Assistants_cotecher */ ccopl { display: flex ; flex-direction: column; padding: 12px 12px; border-radius: 12px; max-width: 375px; box-shadow: 0px 0px 3px 0px #000000a8; align-items: center; text-align: center; gap: 13px; height: fit-content;} ccopl span { font-size: 19px; font-weight: 500;color: var(--b1); } ccopl p { font-size: 16px; color: var(--c); font-weight: 400; } ccopl ln { display: flex ; width: 100%; border: 1px dashed var(--bor); } ccopl btn {display:flex ;align-items:center;background:#F7F4FA;width:100%;border-radius:8px;padding:3px;justify-content:center; gap:5px;cursor:pointer;} ccopl btn>i { background: 0; } ccopl btn img { width: 24px; } ccopl t { font-size: 15px; font-weight: 500; } /* 1/8/2025 */ ccopl i { background: #F1EAFF; border-radius: 30px; display: flex ; align-items: center; justify-content: center; cursor: pointer; width: fit-content; } ccopl a { display: flex ; width: 100%; } sats grid { display: flex ; gap: 21px; flex-wrap: wrap; justify-content: center; } ccopl svg { width: 45px; height: 45px; } ccopl btn t { color: var(--b1); } ccopl hd { display: flex ; width: 100%; flex-direction: column; align-items: center; } ccopl bd{ display: flex ; width: 100%; flex-direction: column;} ccopl ft{ display: flex ; width: 100%; flex-direction: column;} @media only screen and (max-width: 999px){ sats grid { margin-bottom: 105px; } } caro { display: flex ; padding: 18px 30px; align-items: center; justify-content: space-between; margin: 17% auto; max-width: 777px; flex-direction: column;width: 100%;gap: 15px; } caro hd { display: flex ; flex-direction: column; gap: 12px;} caro bl { display: flex ; justify-content: space-between; width: 75%; } caro hd tx { background: #F7F4FA; padding: 11px 15px; border-radius: 8px; color: #2B0F49; cursor: pointer; font-size: 14px; } caro bd { display: flex ; flex-direction: column; gap: 12px; } caro bd bl { display: flex ; flex-direction: column; gap: 16px; } caro bd tx { background: #F7F4FA; padding: 11px 15px; border-radius: 8px; color: #2B0F49; cursor: pointer; font-size: 14px; } caro .cmc t { background: #F7F4FA; padding: 11px 15px; border-radius: 8px; color: #2B0F49; cursor: pointer; font-size: 14px;width: fit-content; text-align: start;max-width: 70%; } caro .cmc{display: flex ; width: 100%;} caro msy.cmc { justify-content: end; text-align: end; } baeo { display: flex; flex-direction: column; width: 100%; } baeo hd { display: flex; align-items: center; padding: 16px 24px 8px 24px; gap: 8px; } baeo hd dv { display: flex ; margin-bottom: 20px; align-items: center; gap: 10px; } baeo hd span { color: var(--btn11); } baeo hd span:nth-child(1) { color: var(--p3); } baeo hd span:nth-child(2) {font-size: 30px;} baeo hd span:nth-child(4) {font-size: 30px;} baeo hd span:nth-child(5) { color: var(--b1); } baeo bd { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px 24px 24px; border-bottom: 1px solid var(--bor);} baeo bd h1 { display: block; font-size: 28px; font-weight: bold; margin-bottom: 20px; color: var(--b1); } baeo bd div { display: flex ; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--p4); border-radius: 12px; font-size: 14px; } baeo bd div span { font-weight: 500;color: var(--p4);} baeo bd svg {fill:var(--p4)} baeo bd i { height: 20px; width: 20px; } baeo ft { display: flex ; flex-direction: column; gap: 2rem; margin-block-end: 2rem; margin-block-start: 2rem; padding: 8px 24px 24px 24px; border: 1px solid var(--bor); border-radius: 13px; } baeo ft dv { display: flex ; justify-content: space-between; color: var(--btn11);} baeo ft div { display: flex ; justify-content: space-between; color: var(--b1);} baeo ft div span:nth-child(2) { background: var(--a5); border-radius: 10px; padding: 3px 6px; color: var(--yy); font-size: 14px; } baeo ft div span:nth-child(3){font-size: 20px;} @media (max-width: 768px) { baeo hd { padding: 12px 16px 6px 16px; } baeo bd { flex-direction: column; align-items: flex-start; gap: 16px; padding: 6px 16px 20px 16px; } baeo bd h1 { font-size: 28px; } baeo bd div { align-self: flex-end; } } @media (max-width: 480px) { baeo hd { padding: 8px 12px 4px 12px; } baeo hd span { font-size: 13px; } baeo bd { padding: 4px 12px 16px 12px; } baeo bd h1 { font-size: 24px; } }/*Attribution*/ cano bl { border: 1px solid var(--b); display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 24px; margin-block: 2rem; } cano hd p { margin: 0; font-size: 14px; font-weight: 500; } cano bd h4 { display: flex ; white-space: nowrap; color: var(--at); font-weight: 400; align-items: center;} cano bd span { font-size: 13px; opacity: .5; } cano ft { display: block; margin-top: 20px; } cano h4 i { width: 10px; } cano ft i { width: 20px; } cano ft div { display: flex ; gap: 7px; font-size: 12px; } cano bd svg { fill: var(--bor); } cano bd { display: flex ; gap: 6px; } cano bd d i { width: 30px; align-items: center; height: 30px; } cano ft svg { fill: var(---bl); } cano hd { margin-bottom: 12px; } cvco h2 { display: flex ; gap: 13px; } cvco h2 i { width: 37px; } cvco>bl { display: block; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px; } cvco bd t { color: var(--p4); } cvco bd d { display: flex ; justify-content: flex-end; }csao { display: flex ; flex-direction: column; margin-left: 7px; border: 1px solid #eae7ee; border-radius: 15px; padding: 15px; min-height: 275px; gap: 12px; } csao t { display: flex ; font-size: 13px; color: #2b0f49; align-items: center; gap: 2px; } csao hd { display: flex ; align-items: baseline; justify-content: space-between; } csao hd left { display: flex ; flex-direction: column; gap: 5px; } csao hd h3 { color: var(--b1); font-weight: 600; } csao hd left text { display: flex ; align-items: center; font-size: 13px; } csao hd butn { display: flex ; align-items: center; gap: 5px; background: white; padding: 3px 7px; border: 1px solid #eae7ee; border-radius: 5px; color: #2b0f49; font-size: 11px;} csao input[type="radio"] { width: auto; } csao hd butn svg { width: 12px; } csao bd { display: flex ; align-items: center; justify-content: space-between; position: relative;} csao bd img { width: 406px; } csao bd dl { display: flex ; flex-direction: column; gap: 5px; } csao bd bl { position: absolute; border: 1px solid #eae7ee; border-radius: 5px; max-width: 120px; top: 12px; left: 241px; background: white; padding: 2px 3px; font-size: 15px; } csao bd bl>pass { display: flex ; align-items: center; justify-content: space-between; color: var(--b1); width: 100px; height: 25px; } csao ft { display: flex ; align-items: center; justify-content: space-between; } @media (max-width: 999px){ csao { max-width: 92%; margin: auto; } } /* Component : Bestseller */ cbsn>bl { display: grid ; row-gap: 11px; margin: 11px auto; max-width: 735px; } cbsn hd btn { display: block; background: var(--a); color: var(--b); width: max-content; padding: 4px 11px; border-radius: 7px; } cbsn hd t { font-size: 0.88em; font-weight: 500; } cbsn bd { display: grid ; row-gap: 11px; } cbsn bd lik { display: flex ; column-gap: 2px; } cbsn bd span { font-size: 0.88em; font-weight: 500; } cbsn bd a { font-size: 0.88em; font-weight: 500; color: var(--a); text-decoration: underline; } cbsn bd d { display: flex ; } cbsn bd dv { display: flex ; align-items: center; column-gap: 7px; } cbsn bd t { font-size: 0.88em; font-weight: 500; } cbsn bd i { width: 16px; height: 16px; } cbsn bd d { display: flex ; column-gap: 11px; } cbsn bd btn { text-decoration: underline; color: var(--a); } cbsn ft { display: grid ; grid-template-columns: 14% 38% 21% 21%; background: var(--b-t95); column-gap: 12px; border: 1px solid var(--bc); border-radius: 7px; } cbsn ft d { display: block; text-align: center; align-content: center; } cbsn ft d>a { font-size: 0.88em; font-weight: 500; } cbsn ft i { width: 24px; height: 24px; } cbsn ft d>i { margin: auto; } cbsn ft st { display: flex ; justify-content: center; column-gap: 5px; } cbsn ft h3 { color: var(--b); font-size: 1em; font-weight: 600; text-align: center; } cbsn ft d:nth-child(1) { padding: 0 11px; background: var(--a); border-radius: 7px 0 0 7px; margin: 1px; } cbsn ft d:nth-child(2) { border-right: 1px solid var(--bc); margin: 11px 0; align-items: center; } cbsn ft d:nth-child(3) { border-right: 1px solid var(--bc); margin: 11px 0; row-gap: 4px; } cbsn ft d:nth-child(3) i { width: 14px; height: 14px; } cbsn ft p { margin: 0; font-size: 0.88em; font-weight: 500; text-align: start; padding: 0 7px; } cbsn ft p>a { color: var(--at); font-size: 0.88em; font-weight: 500; text-decoration: underline; } cbsn ft aa { font-size: 1.44em; font-weight: bold; } @media only screen and (max-width: 999px) { cbsn bd d { display: grid ; row-gap: 11px; } cbsn ft d:nth-child(1) { display: none; } cbsn ft { grid-template-columns: 40% 28% 28%; gap: 7px; } cbsn ft p { font-size: 0.77em; } } /*Campus*/ ccpo { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px;box-shadow: 0 2px 10px var(---bc); position: relative;margin-block: 2rem; } ccpo hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } ccpo hd h3 { font-size: 18px; font-weight: bold; margin: 0; } ccpo hd span { font-size: 14px; opacity: .7; font-weight: 500; } ccpo bd div { display: flex; overflow-x: auto; scroll-behavior: smooth; gap: 10px; margin: 10px 0; } ccpo img { border-radius: 8px; height: 140px; width: 100%; object-fit: cover; } ccpo bd div dv { min-width: 100%; position: relative; height: 100%; } ccpo p { position: absolute; bottom: 8px; left: 8px; background: var(--b1); color: var(--b-t95); font-size: 12px; padding: 2px 6px; border-radius: 4px; } ccpo ft { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } ccpo dots { display: flex; gap: 4px; } ccpo dots dot { width: 6px; height: 6px; background: var(--bor); border-radius: 50%; } ccpo dots dot:nth-child(1){ background:var(--b1); } ccpo ft a { font-size: 13px; color:var(--at) } ccpo arrows i { width: 20px; } ccpo hd i { width: 43px; height: 38px; } ccpo svg { fill: var(--c); width: 21px; margin: 0; } cmps hd span {display: flex;} cmps bd ul { list-style: none; padding: 0; } cmps bd li { margin-bottom: 16px; } cmps ul d { padding: 12px; background: var(---p1p); box-shadow: 0 0 1px var(---p1p); border-radius: 4px; display: flex ; flex-direction: column; } cmps { display: none; } cche { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } cche hd { display: block; } cche hd a { color: var(--p4); font-weight: 500; } cche hd span { color: var(--btn11); font-size: .75rem; line-height: 1.6; } cche bd ul { margin-left: 18px; list-style-type: disc; margin-bottom: 5px; padding: 0; } cche p { font-size: 14px; line-height: 1.3125rem; margin: 4px 0 10px; color: var(--b1); } cche ft i { margin-left: auto; margin-right: auto; height: 70%; width: 70%; } cche hd p:nth-child(3) { line-height: 1.6; width: 307px; background: var(--a5); font-size: 12px; } cche bd li { color: var(--b1); } ccas>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccas>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccas hd h2 { font-size: 24px; font-weight: bold; } ccas hd btn { display: flex; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; } ccas hd t { font-size: 0.88em; font-weight: 500; } ccas>bl>bd { display: block; padding: 22px; } ccas bd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccas bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccas hd select { display: flex ; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; margin: 0 11px; } ccas hd d i { width: 18px; height: 18px; } ccas hd d { display: flex ; gap: 7px; align-items: center; } ccas hd dv { display: flex ; } ccas ft a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } ccas ft { display: block; padding: 22px; } ccas ft>d i { width: 24px; height: 24px; margin: 3px; } ccas ft d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } ccas ft h3 { font-size: 1em; font-weight: 600; } @media only screen and (max-width: 999px) { ccas>bl>hd d { display: none; } }bcao bd div { display: grid ; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-bottom: 32px; } bcao dv i { width: 47px; } bcao bd dv { display: flex ; flex-direction: column; align-items: center; background: var(--b-t95); padding: 20px 16px; border-radius: 12px; box-shadow: 0 2px 8px var(---bc);white-space: nowrap;} bcao h3 i { width: 20px; } bcao bd h3 { font-size: 18px; font-weight: 700; display: flex ; align-items: center; gap: 4px; } bcao bd svg { width: 20px; fill: var(---gn); margin: 0; } btcs bd { display: flex ; justify-content: space-between; } @media(max-width:999px){ btcs bd { gap: 42px; overflow: scroll; } } ccls bl { display: grid ; border-radius: 10px; background-color: var(--a4); padding: 13px; min-width: 253px; min-height: 300px; text-align: center; z-index: unset; position: relative; overflow: hidden; max-width: 277px; grid-template-rows: max-content auto max-content; } ccls { position: relative; border-radius: 22px; } ccls>bl:before { content: ""; background-image: url(https://www.gstatic.com/classroom/themes/img_learnlanguage.jpg); background-repeat: no-repeat; background-size: cover; position: absolute; inset: 0; height: 100px; } ccls hd svg { fill: var(--b); } ccls ft { display: flex ; position: relative; justify-content: space-between; align-items: center; background: var(--b-t95); padding: 7px 11px; border-radius: 11px; backdrop-filter: blur(8px); } ccls ft> btn { padding: 7px 20px; background: var(--b1); border-radius: 7px; color: var(--b-t95); line-height: 1; } ccls hd { display: flex ; align-items: center; justify-content: end; position: relative; z-index: 999; height: fit-content; } ccls hd i { height: 22px; width: 22px; position: absolute; top: 0px; } ccls hd span { display: block; padding: 5px 21px; background: var(--b-t); font-size: 12px; border-radius: 3px; font-weight: 500; backdrop-filter: blur(8px); } ccls dv { display: flex ; align-items: center; gap: 10px; font-size: 13px; margin-top: 6px; } ccls dv t { display: block; width: 1px; height: 15px; background: var(--b1); } ccls bd { position: relative; color: var(--a1); text-align: start; height: fit-content; padding-bottom: 22px; } ccls bd p { margin: 0; } ccls ft t { font-size: 14px; font-weight: 500; } ccls btns { display: flex ; position: relative; } ccls btns svg { fill: var(--b1); } ccls btns btn.this svg { fill: var(--a); } ccls btns i { height: 22px; width: 22px; } ccls btns btn { display: flex ; padding: 0 11px; align-items: center; gap: 7px; } ccls bd h4 { font-weight: 500; } ccls bd span { position: relative; width: fit-content; } ccls bd span[recorded] { color: #7E57C2; text-shadow: 1px 1px 2px #331e59; } ccls bd span[recorded]:after { content: ''; position: absolute; height: 11px; width: 11px; background: #7E57C2; border-radius: 22px; left: -14px; top: 6px; box-shadow: 0px 0px 3px 0px #331e59; } ccls bd span[live] { color: #FF3B30; text-shadow: 1px 1px 2px #331e59; } ccls bd span[live]:after { content: ''; position: absolute; height: 11px; width: 11px; background: #ff3b30; border-radius: 22px; left: -14px; top: 6px; box-shadow: 0px 0px 3px 0px #331e59; } ccls bd >span { position: absolute; bottom: 4px; right: 0px; } @media screen and (max-width: 999px) { ccls bl {width: 100%;background-repeat: no-repeat; background-size: 100% 100%; } ccls{width: 92%; } } a.a:hover { transform: translateY(2px); box-shadow: 0 12px 20px rgba(1, 1, 1, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }bcds bl { display: block; border: 1px solid var(--aat); padding: 22px; border-radius: 7px; } bcds dt>p { display: grid ; background: var(---bc); border-radius: 7px; padding: 11px;border-bottom: 1px solid var(--aa); width: auto; font-size: 14px; font-weight: 600; } bcds hd h3 { font-size: 16px; font-weight: 600; } @media only screen and (max-width: 999px){ bcds { display: grid ; padding: 11px; } }bcdu bl { display: block; border: 1px solid var(--bc); padding: 22px; border-radius: 7px; } bcdu dt>p { display: grid ; background: var(--bc); border-radius: 7px; padding: 11px;border-bottom: 1px solid var(--bc); width: auto; font-size: 14px; font-weight: 600; } bcdu hd h3 { font-size: 16px; font-weight: 600; } @media only screen and (max-width: 999px){ bcdu { display: grid ; padding: 11px; } }bcgo>bl { display: grid ; border: 1px solid var(--b); border-radius: 7px; padding: 22px; margin-top: 11px; } bcgo hd { padding: 22px 0px; border-bottom: 1px solid var(--b); } bcgo>bl h3 { font-size: 18px; font-weight: 600; padding: 11px 0px; } bcgo>bl t { font-size: 15px; font-weight: 600; } bcgo>bl p { font-size: 15px; font-weight: 600; } bcgo>bl a { color: var(--aa); } bcgo bd { padding: 22px 0px; border-bottom: 1px solid var(--b); } bcgo bd d { display: flex ; align-items: center; justify-content: space-between; } bcgo hd d btn { display: grid ; grid-template-columns: auto 33px; align-items: center; padding: 7px 0px;} bcgo d path { fill: var(--b1); } bcgo bd>d>btn { display: grid ; grid-template-columns: auto 33px; align-items: center; background: var(---bc); border-bottom: 1px solid var(--aa);padding: 15px 7px;} bcgo bd dt>btn { display: flex ; width: 35px; height: 15px; border-radius: 15px; border: 1px solid; padding: 3px; align-items: center; justify-content: start; background: var(---bc); } bcgo ft>h3 { display: grid ; grid-template-columns: 60px 33px; align-items: center; } bcgo ft>d { display: flex ; align-items: center; justify-content: space-between; } bcgo bd>dt { display: flex ; align-items: center; justify-content: space-between; } bcgo ft pp { display: grid ; grid-template-columns: 33px auto; margin: 7px 0px; } bcgo dt>btn>t { display: flex ; border-radius: 50%; border: 1px solid; width: 15px; height: 15px; } bcgo>bl i { width: 20px; height: 20px; } @media only screen and (max-width: 999px){ bcgo d {display: block !important; } bcgo { display: grid ; padding: 11px; } }bcuo>bl { display: grid ; border: 1px solid var(--bc); border-radius: 7px; padding: 22px; margin-top: 11px; } bcuo hd { padding: 22px 0px; border-bottom: 1px solid var(--bc); } bcuo>bl h3 { font-size: 18px; font-weight: 600; padding: 11px 0px; } bcuo>bl t { font-size: 15px; font-weight: 600; } bcuo>bl p { font-size: 15px; font-weight: 600; } bcuo>bl a { color: var(--aa); } bcuo bd { padding: 22px 0px; border-bottom: 1px solid var(--bc); } bcuo bd d { display: flex ; align-items: center; justify-content: space-between; padding: 7px 0px;} bcuo hd d btn { display: grid ; grid-template-columns: auto 33px; align-items: center; padding: 7px 0px;} bcuo d path { fill: var(--b1); } bcuo bd>d>btn { display: grid ; grid-template-columns: auto 33px; align-items: center; background: var(--bc); border-bottom: 1px solid var(--bc);padding: 15px 7px;} bcuo bd dt>btn { display: flex ; width: 35px; height: 15px; border-radius: 15px; border: 1px solid; padding: 3px; align-items: center; justify-content: start; background: var(--bc); } bcuo ft>h3 { display: grid ; grid-template-columns: 60px 33px; align-items: center; } bcuo ft>d { display: flex ; align-items: center; justify-content: space-between; } bcuo bd>dt { display: flex ; align-items: center; justify-content: space-between; } bcuo ft pp { display: grid ; grid-template-columns: 33px auto; margin: 7px 0px; } bcuo dt>btn>t { display: flex ; border-radius: 50%; border: 1px solid; width: 15px; height: 15px; } bcuo>bl i { width: 20px; height: 20px; } @media only screen and (max-width: 999px){ bcuo d {display: block !important; } bcuo { display: grid ; padding: 11px; } }acmo>bl { display: grid ; border: 1px solid var(--aat); border-radius: 7px; padding: 22px; margin-top: 11px; } acmo>bl hd { padding: 22px 0px; border-bottom: 1px solid var(--b); } acmo>bl>hd>btn { display: block; max-width: 160px; width: 100%; background: var(---bc); padding: 5px; border-bottom: 1px solid var(--aa);} acmo>bl h3 { font-size: 18px; font-weight: 600; padding: 11px 0px; } acmo>bl btn>d { display: flex ; align-items: center; justify-content: space-between;background: none; } acmo>bl t { font-size: 15px; font-weight: 600; } acmo>bl p { font-size: 15px; font-weight: 600; display: flex ; align-items: center; gap: 5px; } acmo>bl p>btn { display: flex ; border: 1px solid var(--bc); border-radius: 7px; padding: 0px 5px; font-size: 14px; color: var(--aa); } acmo>bl bd { padding: 22px 0px; border-bottom: 1px solid var(--b); } acmo>bl>hd>d { display: grid ; align-items: center; justify-content: space-between; grid-template-columns: auto 40px; } acmo hd d>btn { display: flex ; width: 35px; height: 15px; border-radius: 15px; border: 1px solid; padding: 3px; align-items: center; justify-content: start; background: var(---bc); } acmo>bl d>btn>r { display: flex ; border-radius: 50%; border: 1px solid; width: 15px; height: 15px; } acmo>bl>bd>d { display: flex ; align-items: center; justify-content: space-between; } acmo>bl>bd d>btn {padding: 11px 5px 11px 5px; display: grid ; max-width: 160px; width: 100%; background: var(---bc); border-bottom: 1px solid var(--aa); grid-template-columns: auto 33px; align-items: center; } acmo>bl a { color: var(--aa); font-size: 15px; font-weight: 600; } acmo>bl bd btn>i { transform: rotate(180deg); } @media only screen and (max-width: 999px){ acmo { display: grid ; padding: 11px; } acmo>bl>hd>btn { max-width: -webkit-fill-available; } acmo>bl>bd>d { display: block; } acmo>bl>bd d>btn { max-width: -webkit-fill-available;margin: 11px 0px;} }dcmo>bl { display: grid ; border: 1px solid var(--bc); border-radius: 7px; padding: 22px; margin-top: 11px; } dcmo>bl hd { padding: 22px 0px; border-bottom: 1px solid var(--bc); } dcmo>bl>hd>btn { display: block; max-width: 160px; width: 100%; background: var(--bc); padding: 5px; border-bottom: 1px solid var(--bc);} dcmo>bl h3 { font-size: 18px; font-weight: 600; padding: 11px 0px; } dcmo>bl btn>d { display: flex ; align-items: center; justify-content: space-between;background: none; } dcmo>bl t { font-size: 15px; font-weight: 600; } dcmo>bl p { font-size: 15px; font-weight: 600; display: flex ; align-items: center; gap: 5px; } dcmo>bl p>btn { display: flex ; border: 1px solid var(--bc); border-radius: 7px; padding: 0px 5px; font-size: 14px; color: var(--aa); } dcmo>bl bd { padding: 22px 0px; border-bottom: 1px solid var(--bc); } dcmo>bl>hd>d { display: grid ; align-items: center; justify-content: space-between; grid-template-columns: auto 40px; } dcmo hd d>btn { display: flex ; width: 35px; height: 15px; border-radius: 15px; border: 1px solid; padding: 3px; align-items: center; justify-content: start; background: var(--bc); } dcmo>bl d>btn>r { display: flex ; border-radius: 50%; border: 1px solid; width: 15px; height: 15px; } dcmo>bl>bd>d { display: flex ; align-items: center; justify-content: space-between; } dcmo>bl>bd d>btn {padding: 11px 5px 11px 5px; display: grid ; max-width: 160px; width: 100%; background: var(--bc); border-bottom: 1px solid var(--bc); grid-template-columns: auto 33px; align-items: center; } dcmo>bl a { color: var(--aa); font-size: 15px; font-weight: 600; } dcmo>bl bd btn>i { transform: rotate(180deg); } @media only screen and (max-width: 999px){ dcmo { display: grid ; padding: 11px; } dcmo>bl>hd>btn { max-width: -webkit-fill-available; } dcmo>bl>bd>d { display: block; } dcmo>bl>bd d>btn { max-width: -webkit-fill-available;margin: 11px 0px;} } ccae { display: none; background: var(---b); border-radius: 8px; box-shadow: 0 2px 10px var(---bc); max-width: 700px; margin: 0 auto; border: 1px solid var(---bc); } scso.at ccae { display: block; } ccae hd { display: block; padding: 24px 24px 16px 24px; } ccae hd > div:first-child { display: flex; align-items: center; margin-bottom: 20px; } ccae hd span:first-child {opacity: .7;font-size: 14px; margin-right: 16px; } ccae hd select { background: unset; border: 1px solid var(--bor); border-radius: 4px; padding: 8px 12px; margin-right: 16px; font-size: 14px; opacity: .7; min-width: 100px; } ccae hd div:first-child > span:last-child { color: var(--at); border: 1px solid var(--bor); border-radius: 27px; padding: 8px 5px; display: flex ; align-items: center; width: 9.75rem; } ccae hd div:first-child > span:last-child i {display: block;width: 50px;} ccae hd p { color: var(--at); font-size: 14px} ccae bd { display: block; margin-bottom: 1.5rem; padding: 0 1.5rem; } ccae bd div:first-child { padding: 8px 24px; display: flex; gap: 4px; } ccae bd btn { background: none; border: none; padding: 8px; opacity: .7; border-radius: 4px; font-weight: bold; font-size: 1.5rem; width: 32px; height: 32px; display: flex ; align-items: center; justify-content: center; text-decoration: underline; font-style: italic; } ccae bd div:last-child { padding: 16px 24px; display: flex ; border-bottom: solid 1px var(--b1); } ccae bd textarea { width: 100%; border: none; resize: none; font-size: 16px; background: var(--0); min-height: 80px; font-weight: 400; line-height: 0.25rem; font-family: "Roboto", Helvetica, Arial, sans-serif; } ccae ft { display: block; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; } ccae hd div span svg { fill: var(--at); } ccae ft div:first-child { display: flex; gap: 8px; } ccae ft div:first-child btn { background: none; border: none; width: 36px; height: 36px; border-radius: 4px; color: #5f6368; display: flex; align-items: center; justify-content: center; } ccae ft div:last-child btn:first-child { background: none; border: none; color: var(--at); padding: 8px 16px; border-radius: 4px; font-size: 14px;} ccae ft div:last-child btn:last-child { background: none; border: none; opacity: .7; border-radius: 4px; display: flex ; align-items: center; justify-content: center; } ccae bl svg { fill: var(---c); height: 25px; width: 25px;} ccae ft div i { border-radius: 20px; block-size: 40px; border: 1px solid var(--bor); } ccae ft div:last-child { display: flex ; align-items: center; gap: 8px; right: 2rem; position: relative; } ccae ft dv btn:nth-child(1) { color: var(--at); } ccae ft dv btn:nth-child(2) { display: flex ; background: var(---bc); padding: 0px 22px; border-radius: 20px; } ccae ft span { display: flex ; align-items: center; border-right: solid 2px var(--b); padding: 7px 0px; } ccae ft dv i { padding: 7px 0px; } ccae ft dv { display: flex ; align-items: center; gap: 1rem; } @media (max-width: 768px) { ccae { margin: 0; border-radius: 0; border-left: none; border-right: none; } ccae hd, ccae bd div:last-child, ccae ft { padding-left: 16px; padding-right: 16px; } } ccba { max-width: 1000px; box-sizing: border-box; margin: 0 auto; display: none; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 20px; margin-block: 2rem; border: solid 1px var(---bc); } ccba bl { display: flex ; align-items: center; gap: 1rem;} ccba hd { display: block; margin-bottom: 20px; } ccba hd h1 { font-size: 28px; margin: 0; } ccba hd span { font-size: 16px; color: var(--b1); } ccba ft { display: block; } ccba bd mg { margin-bottom: 12px; display: flex ; align-items: center; flex-direction: column;} ccba bd mg b { display: inline-block; margin-right: 10px; } ccba bd mg span {color: var(--btn11); font-weight: 500; font-style: normal; padding: 4px 8px; border-radius: 5px; } ccba ft mg { display: flex; gap: 10px; flex-wrap: wrap;} ccba ft mg div { padding: 8px 14px; border-radius: 10px; font-size: 14px; opacity: .6; } ccba hd svg { fill: var(--b1); } ccba hd i { height: 20px; width: 20px; } ccba hd d { display: flex ; align-items: center; } ccba ft svg { fill: var(--b); } ccba ft i { height: 34px; width: 34px; left: 1rem; background: var(--rd); padding: 10px 10px; border-radius: 17px; } ccba ft a { display: block; color: var(--btn11); font-weight: 500; } ccba a:nth-child(1) i { background: var(--rd);} ccba a:nth-child(2) i { background: var(--a2);} ccba a:nth-child(3) i { background: var(--rm);} ccba a:nth-child(4) i { background: var(---sy);} ccba a:nth-child(5) i { background: var(---ss);} ccba a:nth-child(6) i { background: var(--sm);} ccba b { color: var(--btn11); font-weight: 500; } @media (max-width: 999px) { ccba { padding: 12px 16px; } ccba bl { display: grid ; } ccba ft {overflow: scroll; } ccba ft mg {gap: unset; flex-wrap: unset;} ccba bd { display: flex ; } ccba bd mg {flex-direction: unset; } } scso.Stream ccba { display: block; } /*Class_Code*/ bcdo bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 20px; margin-block: 2rem; border: solid 1px var(---bc);width: 10.125rem;} bcdo svg { margin: 0; fill:var(--p3); } bcdo hd { display: flex ; justify-content: space-between; align-items: center; } bcdo i { width: 25px; } bcdo hd span { font-size: 18px; opacity: .8; } bcdo bd { display: flex ; margin-top: 8px;gap: 8px; } bcdo bd b { font-size: 23px; color: var(--p3); } bcdo bd svg { fill: var(--p3); } bcdo hd i { border-radius: 19px; padding: 6px 6px; } bcdo hd i:hover { background: var(--b);} /*Class_Cods*/ clds { display: flex ; gap: 20px; max-width: 1000px; margin: auto; } @media(min-width:999px){ clds>bl { display: flex ; gap: 19px;width: 100%; } clds>bl>bd { width: 100%; } } @media(max-width:999px){ clds {padding: 8px; } clds>bl>hd { display: none; } } csho { display: block; padding: 10px 16px;} csho bl { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } csho hd, csho bd, csho ft { display: flex ; align-items: center; gap: 10px; border-radius: 28px; } csho hd, csho bd{ background: var(--ba1);} csho hd btn, csho bd btn, csho ft btn { padding: 9px 15px; border-radius: 25px; font-size: 16px; color: var(--b1); } csho bd btn:first-child { background-color: #6F2BFF; color: var(--b); padding: 10px 25px; } csho ft btn { border: 1px solid var(---bc); display: flex ; align-items: center; gap: 10px;} csho ft svg { fill: var(--b1); width: 20px; height: 20px; } csho hd btn:first-child { background-color: #6F2BFF; color: var(--b); padding: 10px 25px; } csho hd svg { fill: var(--b); width: 20px; height: 20px; } csho hd btn:nth-child(2) svg { fill: var(--b1); } @media screen and (max-width: 999px) { csho bl { display: flex ; justify-content: start; align-items: center; flex-wrap: wrap; gap: 19px; } } scso.Marks bcmo { display: block; } bcmo { display: none;text-align: center; } bcmo bl { margin: 0 auto; max-width: 47.5rem; padding: 20px 20px; } bcmo i { width: 20%; } bcmo bl hd { display: flex ; justify-content: center; margin: 7rem 0 1rem; } bcmo bl bd { display: grid ; margin: 2rem auto .25rem; width: 20rem; } bcmo bd svg { fill: var(--p3); } bcmo bd i { height: 17px; width: 17px; } bcmo bl btn { display: flex ; justify-content: center; align-items: center; gap: 5px; margin-block-start: 16px; border-radius: 20px; padding: 5px 19px; font-size: 12px;} bcmo bd dv { display: flex ; justify-content: center; } bcmo bl btn span {color: var(--p3);} bcmo bl btn:hover {background: var(---bc);} @media (max-width: 768px) { bcmo i { width: 60%; } } ccpe { display: block; font-family: sans-serif; padding: 20px; } ccpe bl {border-bottom: 1px solid var(--bor); } ccpe hd { display: flex ; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bor); height: 4.5rem; margin-bottom: .25rem; } ccpe bd { display: flex ; align-items: center; padding: .5rem; margin-top: 1rem; } ccpe bd i { display: inline-block; background: var(--rd); color: var(---bc); border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; margin-right: 10px; font-style: normal; padding: 10px 10px; font-size: 23px; } ccpe bd span { font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: .875rem; font-weight: 500; line-height: 1.25rem; } ccpe ft { display: flex ; justify-content: space-between; align-items: center; padding: 10px 0; margin-bottom: 1rem; margin-block-start: 2rem; } ccpe i { height: 30px; width: 30px; } ccpe svg { fill: var(---c); } ccpe { display: block; font-family: sans-serif; margin: 0 auto; max-width: 47.5rem; padding: 20px 20px; } ccpe bl h2 { font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: 2rem; font-weight: 400; line-height: 2.5rem; color: var(--b1); } scso bcps { display: none; } scso.People bcps { display: block; } /* COmponent : Class_RecordFile */ ccrf>bl { display: grid ; grid-template-columns: 26% auto max-content; align-items: center; padding: 11px; } ccrf>bl hd { display: grid ; grid-template-columns: 33px auto; align-items: center; font-weight: 500; } ccrf>bl hd svg { fill: var(--a); } ccrf>bl bd { display: grid ; grid-template-columns: 36% auto; font-weight: 500; } ccrf>bl ft>btn { font-size: 0.88em; padding: 7px 25px; display: block; font-weight: 500; border-radius: 7px; background: var(--a); color: var(--b); } @media (max-width : 999px) { ccrf>bl { white-space: nowrap; overflow: auto; grid-template-columns: 222px auto max-content; } ccrf>bl bd { display: grid ; grid-template-columns: 122px auto; font-weight: 500; } ccrf>bl ft>btn { margin-left: 22px; } ccrg>bl>hd { grid-template-columns: 222px 120px 129px 79px 77px !important; overflow: auto; } } ccrg { display: block; padding: 20px; } ccrg>bl { border: 1px solid var(--bor); border-radius: 10px; overflow: hidden; } ccrg>bl>hd { display: grid ; grid-template-columns: auto auto auto auto; padding: 11px 15px; } ccrg>bl>hd span:last-child { text-align: end; } scso.Stream csms { display: block; } scso csms { display: none; } cctg { display: block; max-width: 1000px; margin: auto; } cctg bl {display: flex;flex-direction: column;width: 100%;min-height: 200px;background: linear-gradient(135deg, #4f6bd6 0%, #2940a8 100%);position: relative;overflow: hidden;height: 15rem;background-image: url(-/School/asset/learnlanguage.png);border-radius: 10px 12px 0px 0px;} cctg bl hd { display: flex ; align-items: end; padding: 24px 32px; position: relative; z-index: 2; justify-content: end; } cctg bl ft { display: flex ; justify-content: space-between; padding: 1rem 1.5rem; align-items: end; top: 2rem;position: relative;} cctg bl ft h1 { color: var(---bc); font-size: 36px; font-weight: 600; margin: 0; line-height: 1.2; } cctg bl ft tx { color: rgba(255, 255, 255, 0.9); font-size: 24px; font-weight: 300; margin: 4px 0 0 0; display: block; } cctg bl hd dv { display: flex; } cctg bl hd d {background: var(---bc); color: var(--at); border: none; padding: 4px 20px; border-radius: 25px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex ; align-items: center;} cctg bl hd d i { font-size: 12px; } cctg bl hd svg { fill: var(--at); height: 36px; width: 36px; } cctg bl ft svg { fill: var(--aat);} cctg ft i { width: 25px; height: 25px; } @media (max-width: 768px) { cctg { padding: 12px 16px; } cctg bl ft h1 { font-size: 28px; } } cmlo{display:none;} scso.cm cmlo { display: block; } cmlo bl { box-shadow: 0 2px 10px var(---bc); background: var(--b); border-radius: 12px; padding: 20px; margin-block: 2rem; border: solid 1px var(---bc); width: 648px; margin: auto; display: block; position: absolute; z-index: 100000; top: 30rem;left: 9rem;} cmlo hd i { width: 30px; padding: 6px 4px; height: 23px; border-radius: 20px; } cmlo hd svg { fill: var(--bt); } cmlo hd i:hover { background: var(--b); } cmlo>bl>hd { display: flex ; justify-content: space-between; } cmlo ft i { width: 20px; } cmlo ft { display: flex ; align-items: center; justify-content: space-between; } cmlo ft dv { display: flex ;align-items: center;} cmlo dv:nth-child(2) span { display: flex ; gap: 4px; align-items: center; color: var(--p3); margin-right: 20px; padding: 6px 11px; border-radius: 20px; } cmlo h2 { font-size: 8rem; text-align: center; padding: 17px 0px; } cmlo ft span:nth-child(2) { padding-left: 1.5rem; } cmlo dv:nth-child(2) span:hover { background: var(--b); } cmlo hd span { font-size: 20px; opacity: .8; } cmlo ft svg { fill: var(--p3); } cmlo ft span { font-size: .875rem; font-weight: 500; line-height: 1.25rem; opacity: .8; } @media(max-width:999px){ cmlo bl { display: none; } }ccss flex { display: flex; overflow: scroll; gap: 22px; flex-wrap: wrap;} ccss flex { display: flex; gap: 22px; } ccss>bl>hd span { display: flex; background: var(--bo1); padding: 0px 8px; border-radius: 7px; font-size: 12px; align-items: center; justify-content: center; } ccss hd t { font-weight: 500; opacity: .7; } ccss>bl { DISPLAY: FLEX; flex-direction: column; gap: 15px; } ccss>bl>bd { margin-left: 9px; } ccss bl div { display: flex; gap: 11px; } cgrk { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } cgrk hd i{width: 30px; height: 30px; } cgrk svg {fill:var(--bor);} cgrk h2 { font-size: 16px; font-weight: 700; line-height: 24px; } cgrk hd dv { display: flex ; flex-direction: column; } cgrk span { font-size: 13px; color: #888; display: block; margin-bottom: 4px; } cgrk bd { display: block; padding-top: 10px; } cgrk bd p { color: var(--btn11); margin-bottom: 12px; font-weight: 600; font-size: 16px; line-height: 20px; } cgrk bd table { width: 100%; border-collapse: collapse; font-size: 14px; } cgrk bd table thead { background-color: var(---ba); } cgrk bd table th { text-align: left; padding: 12px 10px; border-bottom: 1px dashed var(--bor); font-weight: 600; color: var(--b1); } cgrk bd table td { text-align: left; padding: 12px 10px; border-bottom: 1px dashed var(--bor); color: var(--btn11); } cgrk bd table th:nth-child(2){ text-align: right;} cgrk bd table td:nth-child(2) { text-align: right;} bcco { display: flex ; flex-direction: column; width: 320px; background: var(--b-t88); border-radius: 12px; border: 1px solid var(---bc);margin: 12px 0 20px 36px; } bcco bl { border-radius: 12px; padding: 16px 12px; background: #fff; } bcco bl hd { display: flex ; flex-direction: column; justify-content: space-between; } bcco bl strong { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--b1); padding-right: 16px; } bcco bl hd div i { width: 42px; height: 42px; border-radius: 12px; border: 1px solid #dfdfdf; padding: 3px; } bcco bl hd div { display: flex ; gap: 1rem; align-items: center; } bcco bl hd svg { fill: var(--c); height: 28px; width: 28px; margin: unset; } bcco bl hd dv i { display: block; } bcco bl hd dv { display: grid ; grid-template-columns: 10% auto; align-items: center; } bcco bl bd { display: flex ; justify-content: space-between;} bcco bl bd div { display: grid ; } bcco bl ft { display: flex ; align-items: center; justify-content: end; gap: 8px; } bcco bl ft svg { fill: var(--c); height: 24px; width: 24px; margin: unset; } bcco bl ft btn {display: flex ; justify-content: center;align-items: center;color: var(---bc); border-radius: 50px; background: var(---gn); font-size: 12px; font-weight: 600; padding: 8px 16px; width: 127px; top: 10px;} bcco bl ft i { justify-content: center; width: 34px; height: 34px; padding: 8px; border-radius: 50%; border: 1px solid var(--bor); top: 11px; } bcco bl ft btn i svg { fill: var(--b); } bcco bl ft btn svg { fill: var(--b); } @media only screen and (max-width: 999px) { bcco {margin: 12px 0 12px 0px; } } ccyo { display: block; max-width: 700px; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px;padding: 20px; } ccyo hd { display: block;} ccyo hd div { display: flex; align-items: center; gap: 15px; } ccyo hd dv { display: block; } ccyo hd h1 { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--b1); } ccyo hd span { font-size: 14px; color: var(--btn11); } ccyo bd { display: block;} ccyo bd dv { display: block;} ccyo bd h3 { margin: 0; color: var(--b1); border-radius: 4px; position: relative; display: flex ; justify-content: space-between; border-bottom: 1px solid var(--bor); font-weight: 600; font-size: 14px; line-height: 22px; opacity: .7; padding: 16px 0px 18px; } ccyo bd h3::after { content: ''; position: absolute; top: 50%; right: 1rem; width: 6px; height: 6px; border: solid var(--b1); border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(45deg); opacity: .7; } ccyo i { width: 45px;height: 45px; } cpao>bl{display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); } cpao h2 { padding: 12px 16px; border-bottom: 1px solid var(--bor); display: block;font-size: 17px;} cpao>bl>bd { padding: 20px; display: block; } cmpr>bl{display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); } cmpr h2 { padding: 12px 16px; border-bottom: 1px solid var(--bor); display: block;font-size: 17px;} cmpr>bl>bd { padding: 20px; display: block; }/*Comparison*/ bcno hd { display: flex ; justify-content: space-between; background: var(--b); padding: 13px 15px; border-radius: 14px 14px 1px 1px; } bcno { display: block; padding: 0px 0px 12px 0px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 1rem; } cmco bd { Display:none;} cmco hd i { width: 30px; } cmco>bl>hd { display: flex ; justify-content: space-between; } cmco hd div { display: flex ; gap: 5px; } cmco { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc);margin-block: 1rem;} cmco hd i:nth-child(2) { width: 24px; } bccs hd a { color: var(--p3); font-weight: 400; } cmco.ct bd { display: block; } bcto th { width: 24%; padding: 12px 23px; background: var(--a4); font-size: 13px;font-weight: 700;white-space: nowrap; } bcto tbody tr { border-bottom: dashed 2px var(---bc);font-size: 15px; } bcto td:nth-child(1) { border-right: solid 1px var(--bc); } bcto td:nth-child(2) { border-right: solid 1px var(--bc); } bcto td a { font-weight: 400; color: var(--p3); font-size: 16px; } bcto table { margin-block: 2rem; } bcto ft em { font-size: 15px; } bcto hd>p { font-size: 14px; opacity: .8; } @media(max-width:999px){ bcto>bl>bd {display: block; overflow: scroll;} bcto ft em { font-size: 13px; } } bsno bl { display: flex ; justify-content: space-between; align-items: center; border-radius: 6px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border: 1px solid var(--bor); margin-block: 20px; } bsno btn { background: var(--p3); color: var(--b); padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 600; display: inline-block; } bsno hd a { display: flex ; justify-content: center; } bsno h3 { font-size: 15px; } @media(max-width:999px){ bsno bl {padding: 9px;} }/*Contactinfo*/ cnio { display: block;background: var(--lg-bl); border-radius: 12px; padding: 24px;box-shadow: 0 2px 10px var(---bc);; position: relative; margin-block: 2rem; } cnio hd { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; } cnio bd {display: flex;margin-bottom: 20px;gap: 20px;} cnio bd t { font-size: 13px; opacity: .7; } cnio bd div { font-size: 15px; font-style: normal; line-height: 1.4; font-weight: 600; } cnio ft a { display: flex ; justify-content: center; padding: 6px 19px; border: 1px solid var(--c); border-radius: 25px; align-items: center; } cnio ft { display: flex ; text-align: center; flex-direction: column;gap: 16px; } cnio ft btn { display: flex ; justify-content: center; padding: 10px 19px; border-radius: 25px; background: var(--at); color: var(--b-t95); } cnio ft i { width: 30px; } cnio ft svg { fill: var(--c); } cnio hd span { font-size: 14px;opacity: .7;font-weight: 500;} cnio hd svg { fill: var(--p3); } cnio hd i { width: 40px; } ctmo { display: none; background: var(--b); position: absolute; z-index: 100000; max-height: 876px; bottom: 17rem; box-sizing: border-box; border-radius: 6px; width: 200px; padding: 6px 0px; overflow-x: auto; left: 21rem; } ctmo bd i { width: 21px; } ctmo bd svg { fill: var(--c); } ctmo bd a { display: flex ; white-space: nowrap; padding: 12px 7px;gap: 15px;} ctmo bd span { font-size: 13px; } ctmo bd a:hover {background: var(--bc);} scso.bc ctmo { display: block; } @media(max-width:999px){ ctmo>bl { display: none; } } ccge { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } ccge hd { display: flex; justify-content: space-between; padding: 20px;} ccge hd h2 { font-size: 16px; font-weight: 600; margin: 0; } ccge bd { display: block; padding: 20px; padding-top: 10px; } ccge bd p { font-size: 14px;margin-bottom: 16px; line-height: 1.6; } ccge bd h3 { font-size: 15px; margin-bottom: 12px; font-weight: 600; } ccge bd table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; } ccge bd table thead { background-color: var(--ba); } ccge bd table th { padding: 12px 10px; text-align: left; color:var(--b1); font-weight: 600; border-bottom: 1px dashed var(--btn11); } ccge bd table td { padding: 12px 10px; border-bottom: 1px dashed var(--btn11); color:var(--btn11); vertical-align: middle; } ccge bd table td:nth-child(2) { display: flex; align-items: center; gap: 6px; } ccge bd table td:nth-child(2)::before { content: ''; display: inline-block; width: 16px; height: 16px; background-size: 16px; } ccge bd table td:nth-child(2) span { background: var(--p2); color: var(--rd); font-size: 12px; padding: 2px 6px; border-radius: 4px; font-weight: 500; } ccge bd i { width: 20px; height: 20px; } ccge bd svg {fill:var(--b1);} bcpo>bl { display: block; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px; margin-block: 20px; } bcpo hd i { width: 20px; height: 20px; } bcpo hd svg { fill: var(---b1); } bcpo>bl>hd { display: flex ;align-items: center; } bcpo hd dv { display: flex ; } bcpo hd span { font-size: 13px; opacity: .7; } bcpo a,bnio a { color: var(--p3); font-weight: 400; } cnco span,cnss span{ color: var(--rd); font-weight:400; } bnio span,cnss span { background: var(--a5); font-size: 13px; font-weight: 400; } clno>bl {margin-top: 11px; } clno bd { display: flex ; align-items: center; justify-content: space-between; padding: 7px; } clno hd { border-radius: 11px; display: flex ; } clno video { width: 100%; border-radius: 11px; } clno bd i { width: 25px; align-items: center; display: flex ; gap: 2px; } clno bd path { fill: var(--bb); } clno bd t {font-size: 0.99em; font-weight: 600; } clno bd>p {margin: 0;} @media only screen and (max-width: 999px) { clno>bl { padding: 11px; } } /* Component : CourseNew_Accessibility */ caby { display: none; } .Accessibility caby { display: block; } caby>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin-bottom: 11px; } caby>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } caby hd h2 { font-size: 24px; font-weight: bold; } caby bd i { width: 24px; height: 24px; margin: 3px; } caby bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } caby bd { display: block; padding: 22px; } caby bd d p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } caby bd d p a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } caby bd>h3 { margin-top: 22px; } caby bd>p { margin: 7px 0; } caby ft { display: block; padding: 22px; } caby ft>d>dv { display: flex ; justify-content: space-between; padding: 11px 0; } caby ft>d>dv i { transform: rotate(180deg); height: 20px; width: 20px; } caby ft p a { font-size: 1em; font-weight: 500; color: var(--a); } caby ft d label { display: flex ; align-items: center; column-gap: 7px; } caby ft d label input { height: 15px; width: 15px; } caby ft div { display: none; } .acces caby ft>d>dv i { transform: rotate(0deg); } .acces caby ft>d>div { display: block; } caby ft>dv { display: grid; margin-top: 44px; row-gap: 4px; } caby ft>dv a { font-size: 0.88em; font-weight: 500; color: var(--a); } caby ft ul { padding-left: 22px; } /* Component : CourseNew_Basics */ ccnb { display: none; } .Basics ccnb { display: block; } ccnb>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin-bottom: 11px; } ccnb hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } ccnb hd h2 { font-size: 24px; font-weight: bold; } ccnb bd { display: block; padding: 22px; } ccnb bd p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } ccnb bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccnb bd h3 { font-size: 1em; font-weight: 600; margin-top: 11px; } ccnb bd d { display: flex ; justify-content: space-between; border: 1px solid var(--bc); align-items: center; padding: 0 7px; border-radius: 7px; margin: 7px 0; } ccnb bd input { padding: 0 11px; font-size: 0.88em; font-weight: 500; } ccnb bd aa { font-size: 0.88em; font-weight: 500; } ccnb bd span { font-size: 0.77em; font-weight: 500; } ccnb bd div { display: block; border: 1px solid var(--bc); border-radius: 7px; margin: 7px 0; } ccnb bd btns { display: flex ; border-bottom: 1px solid var(--bc); padding: 7px; } ccnb bd i { width: 20px; height: 20px; } ccnb bd path { fill: var(--b1); } ccnb bd fild { display: grid ; grid-template-columns: auto auto auto; gap: 11px; margin: 7px 0; } ccnb bd select { margin: 0; background: transparent; padding: 11px; } ccnb bd select:last-child { grid-column-start: 3; grid-column-end: 4; } ccnb bd f { display: grid ; row-gap: 11px; } ccnb bd sp { display: flex ; align-items: center; column-gap: 7px; } ccnb bd f i { width: 20px; height: 20px; margin-top: 16px; } ccnb bd f input { border: 1px solid var(--bc); padding: 0 11px; width: 55%; height: 44px; border-radius: 7px; } ccnb bd bnb { display: grid ; grid-template-columns: 49% 49%; column-gap: 14px; margin: 7px 0; } ccnb bnb i { width: 100%; height: 100%; border: 1px solid var(--bc); } ccnb bd b { display: block; } ccnb bnb p { font-size: 0.88em; font-weight: 500; margin-bottom: 14px; } ccnb bd label { display: grid ; grid-template-columns: auto 33%; column-gap: 7px; } ccnb label input { opacity: 0; height: 0; } ccnb label dv { display: block; border: 1px solid var(--bc); padding: 11px; border-radius: 7px; font-size: 0.88em; font-weight: 500; } ccnb label btn { display: block; border: 1px solid var(--bc); border-radius: 7px; align-content: center; text-align: center; font-size: 0.88em; font-weight: 500; } ccnb ft { display: block; padding: 22px; } ccnb ft h3 { font-size: 1em; font-weight: 600; } ccnb ft div { display: grid ; grid-template-columns: 33px auto; border: 1px solid var(--rd); padding: 11px; column-gap: 7px; border-radius: 11px; margin: 11px 0; } ccnb ft div i { width: 32px; height: 32px; margin: 2px; } ccnb ft div path { fill: var(--rd); } ccnb ft h4 { font-size: 1em; font-weight: 600; } ccnb ft div p { font-size: 0.88em; font-weight: 500; margin: 0; margin-top: 7px; } ccnb ft d { display: flex ; column-gap: 7px; align-items: center; margin: 11px 0; } ccnb ft d>i { width: 24px; height: 24px; } ccnb ft d>i:nth-child(2) { background: var(--b1); padding: 7px; border-radius: 22px; } ccnb ft t { font-size: 0.88em; font-weight: 500; color: var(--a); } ccnb ft dv { display: block; border: 1px solid var(--rd); padding: 11px; border-radius: 11px; } ccnb ft p { font-size: 0.88em; font-weight: 500; margin: 7px 0; } ccnb ft a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } @media only screen and (max-width: 999px) { ccnb bd bnb { grid-template-columns: 100%; row-gap: 11px; } ccnb bd fild { grid-template-columns: auto auto; } ccnb bd select:nth-child(3) { grid-column-start: 1; grid-column-end: 3; } ccnb bd select:nth-child(4) { grid-column-start: 1; grid-column-end: 3; } } /* Component : CourseNew_Captions */ ccas { display: none; } .Captions ccas { display: block; } ccas>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccas>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccas hd h2 { font-size: 24px; font-weight: bold; } ccas hd btn { display: flex; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; } ccas hd t { font-size: 0.88em; font-weight: 500; } ccas bd { display: block; padding: 22px; } ccas bd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccas bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccas hd select { display: flex ; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; margin: 0 11px; } ccas hd d i { width: 18px; height: 18px; } ccas hd d { display: flex ; gap: 7px; align-items: center; } ccas hd dv { display: flex ; } ccas ft a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } ccas ft { display: block; padding: 22px; } ccas ft i { width: 24px; height: 24px; margin: 3px; } ccas ft d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } ccas ft h3 { font-size: 1em; font-weight: 600; } @media only screen and (max-width: 999px) { ccas hd d { display: none; } } /* Component : CourseNew_Curriculum */ ccum { display: none; } .Curriculum ccum { display: block; } ccum>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccum>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccum hd h2 { font-size: 24px; font-weight: bold; } ccum hd btn { display: flex; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; transition: 333ms; } ccum hd btn:hover { background: rgb(111 43 255 / 11%); } ccum hd t { font-size: 0.88em; font-weight: 500; } ccum>bl>bd { display: block; padding: 22px; } ccum bd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccum bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccum>bl>ft { display: block; padding: 22px; } ccum ft>btn { display: flex ; align-items: center; width: max-content; column-gap: 11px; padding: 5px 11px; border: 1px solid; color: var(--a); border-radius: 5px; margin-top: 11px; transition: 333ms; } ccum ft i { width: 20px; height: 20px; } ccum ft t { font-size: 0.88em; font-weight: 500; } ccum ft>btn:hover { background: rgb(111 43 255 / 11%); } /* Component : CourseNew_Intended */ citn { display: none; } .Intended citn { display: block; } citn>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin-bottom: 11px; } citn hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } citn hd h2 { font-size: 24px; font-weight: bold; } citn bd { display: block; padding: 22px; padding-bottom: 0; } citn bd p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } citn bd a { font-size: 0.88em; font-weight: 500; color: var(--a); text-decoration: underline; } citn bd h3 { font-size: 1em; font-weight: 600; margin-bottom: 11px; } citn bd d { display: flex ; justify-content: space-between; align-items: center; padding: 0 7px; border: 1px solid var(--bc); margin: 7px 0; border-radius: 7px; } citn bd input { padding: 0; font-size: 0.88em; font-weight: 500; } citn bd aa { font-size: 0.88em; font-weight: 500; } citn ft { display: block; padding: 22px; } citn ft btn { display: flex ; align-items: center; width: max-content; padding: 7px; border-radius: 4px; transition: 333ms; column-gap: 7px; margin-top: 11px; } citn ft btn:hover { background: #0055d442; } citn ft i { width: 20px; height: 20px; } citn ft t { font-size: 0.88em; font-weight: 500; color: var(--a); } citn ft d { display: flex ; justify-content: space-between; align-items: center; padding: 0 7px; border: 1px solid var(--bc); margin: 7px 0; border-radius: 7px; } citn ft input { padding: 0; font-size: 0.88em; font-weight: 500; } citn ft h3 { font-size: 1em; font-weight: 600; margin: 11px 0; } citn ft p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } citn ft a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } /* Component : CourseNew_Messages */ ccnm { display: none; } .Messages ccnm { display: block; } ccnm>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccnm hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } ccnm hd h2 { font-size: 24px; font-weight: bold; } ccnm bd { display: block; padding: 22px; padding-bottom: 0; } ccnm bd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccnm ft { display: block; padding: 22px; } ccnm ft h3 { font-size: 1em; font-weight: 600; margin-top: 11px; margin-bottom: 7px; } ccnm ft d { display: block; border: 1px solid var(--bc); border-radius: 7px; } ccnm ft div { display: flex ; justify-content: space-between; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } ccnm ft btns { display: flex ; column-gap: 7px; } ccnm ft i { width: 20px; height: 20px; } ccnm ft path { fill: var(--b1); } ccnm ft aa { font-size: 0.88em; font-weight: 500; } ccnm ft input { font-size: 0.88em; font-weight: 500; padding: 0; padding: 0 11px; } /* Component : CourseNew_Plan */ ccnw>bl { display: block; padding: 22px; padding-left: 0; } ccnw hd { display: none; } ccnw bd { display: block; } ccnw bd d { display: block; margin-top: 14px; } ccnw bd h3 { font-size: 1em; font-weight: bold; padding: 7px 0; padding-left: 22px; } ccnw bd grid { display: grid ; grid-template-columns: 22px auto; align-items: center; padding: 7px 22px; column-gap: 7px; transition: 333ms; } ccnw bd grid.this { border-left: 5px solid; border-radius: 0; padding-left: 18px; } ccnw bd grid:hover { background: var(--bc); } ccnw bd i { width: 10px; height: 10px; border: 1px solid; border-radius: 14px; padding: 4px; } ccnw bd h6 { font-size: 0.88em; font-weight: 500; } ccnw bd h6 { font-size: 0.88em; font-weight: 500; } ccnw ft { display: block; margin-top: 11px; } ccnw ft btn { display: block; background: var(--a); color: var(--b); text-align: center; padding: 7px 0; border-radius: 7px; } ccnw ft t { font-size: 0.88em; font-weight: 500; } ccnw ft i { display: none; } @media (max-width: 999px){ ccnw>bl { margin: 7px; padding: 0; } ccnw hd { display: flex ; justify-content: space-between; border-bottom: 1px solid var(--bc); padding-bottom: 11px; } ccnw hd i { width: 33px; height: 33px; } ccnw hd path { fill: var(--a); } ccnw hd btn { background: var(--a); padding: 7px 11px; color: var(--b); border-radius: 4px; } ccnw hd t { font-size: 0.88em; font-weight: 500; } ccnw bd { display: none ; grid-template-columns: 50% 50%; } ccnw ft { display: none; } .inten ccnw bd { display: grid ; } } /* Component : CourseNew_Pricing */ cpng { display: none; } .Pricing cpng { display: block; } cpng>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } cpng>bl>hd { display: flex ; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } cpng hd h2 { font-size: 24px; font-weight: bold; } cpng>bl bd { display: block; padding: 22px; padding-bottom: 0; } cpng bd i { width: 24px; height: 24px; margin: 3px; } cpng bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--rd); padding: 14px; border-radius: 11px; column-gap: 11px; margin-bottom: 22px; } cpng bd d p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } cpng bd>h3 { margin-top: 22px; } cpng bd>p { margin: 7px 0; } cpng bd btn { display: inline-block; border: 1px solid; color: var(--rd); padding: 7px 11px; border-radius: 5px; margin-top: 11px; font-weight: bold; } cpng ft h4 { color: var(--b1); display: block; margin-bottom: 4px; } cpng ft d { display: flex ; column-gap: 22px; } cpng ft select { margin: unset; padding: 11px; border-radius: 4px; } cpng ft btn { display: inline-flex ; color: var(---bc); padding: 7px 22px; border-radius: 5px; background: var(--a); margin-top: 22px; opacity: 0.6; } cpng ft { padding: 22px; display: block; } /* Component : CourseNew_Promotions */ cpns { display: none; } .Promotions cpns { display: block; } cpns>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } cpns>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } cpns hd h2 { font-size: 24px; font-weight: bold; } cpns bd i { width: 24px; height: 24px; margin: 3px; } cpns bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } cpns bd { display: block; padding: 22px; } cpns bd>dv { display: grid ; border: 1px solid var(--bc); padding: 14px; border-radius: 7px; margin-top: 22px; } cpns bd p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } cpns bd label { display: grid ; border: 1px solid var(--b1); align-items: center; max-inline-size: 48rem; border-radius: 4px; grid-template-columns: 92% 8%; } cpns bd input { width: auto; border-right: 1px solid var(--b1); border-radius: 7px 0px 0px 7px; background: transparent; } cpns bd btn { display: grid ; align-items: center; justify-content: center; height: 100%; width: auto; border-radius: 0 7px 7px 0;} cpns a { font-size: .88em; font-weight: 500; text-decoration: underline; color: var(--a); } cpns bd t { display: block; font-size: 0.88em; font-weight: 500; color: var(--a); } cpns bd btn:hover { background: var(--aat); } cpns bd label:hover { background: var(--bc); } cpns ft { display: block; padding: 22px; } cpns ft d { display: grid ; border: 1px solid var(--bc); padding: 14px; margin-top: 4px; } cpns ft>dv>d { justify-content: center; } cpns ft label { display: flex ; justify-content: space-between; margin-top: 22px; opacity: unset; } cpns p a { font-size: 1em; } @media only screen and (max-width: 999px) { cpns bd label { border: unset; grid-template-columns: unset; } cpns bd input { border: 1px solid var(--b1); border-radius: 7px; margin-bottom: 7px; } } /* Component : CourseNew_Structure */ ccst { display: none; } .Structure ccst { display: block; } ccst>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin-bottom: 11px; } ccst hd { display: block; } ccst hd>h2 { font-size: 24px; font-weight: 600; padding: 22px; border-bottom: 1px solid var(--bc); } ccst hd grid { display: grid ; grid-template-columns: auto 44%; padding: 22px; background: var(--a1); column-gap: 11px; align-items: center; } ccst div h2 { font-size: 24px; font-weight: 600; margin-bottom: 22px; } ccst hd p { font-size: 0.88em; font-weight: 500; margin: 14px 0; } ccst hd dv { display: block; background: var(--b-t95); padding: 22px; box-shadow: 0 2px 10px var(---bc); margin-left: 22px; text-align: center; } ccst hd i { width: 120px; height: 90px; margin: auto; margin-bottom: 22px; } ccst hd h3 { font-size: 1em; font-weight: 600; } ccst hd btn { display: block; border: 1px solid; padding: 7px 0; color: var(--a); width: 50%; margin: auto; border-radius: 4px; transition: 333ms; } ccst hd btn:hover { background: rgb(111 43 255 / 11%); } ccst hd t { font-size: 0.88em; font-weight: 500; } ccst bd { display: block; padding: 22px; padding-bottom: 0; } ccst bd h2 { font-size: 24px; font-weight: bold; } ccst bd h3 { font-size: 1em; font-weight: 600; margin-top: 22px; margin-bottom: 11px; } ccst bd p { font-size: 0.88em; font-weight: 500; } ccst bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccst ft { display: block; padding: 22px; padding-top: 0; } ccst ft h2 { font-size: 24px; font-weight: bold; margin-top: 33px; } ccst ft ul { display: block; padding-left: 22px; } ccst ft li { font-size: 0.88em; font-weight: 500; } ccst ft a { font-size: 0.88em; font-weight: 500; color: var(--a); text-decoration: underline; } ccst ft h2 { font-size: 24px; font-weight: bold; margin-top: 33px; } ccst ft h3 { font-size: 1em; font-weight: 600; text-decoration: underline; color: var(--a); margin-top: 22px; margin-bottom: 11px; } ccst ft p { font-size: 0.88em; font-weight: 500; margin: 0; } @media only screen and (max-width: 999px) { ccst hd grid { display: block; } ccst hd dv { margin: 0; } } /* Component : CourseUpdate_Accessibility */ ccua { display: none; } .Accessibility ccua { display: block; } ccua>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } ccua>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccua hd h2 { font-size: 24px; font-weight: bold; } ccua bd i { width: 24px; height: 24px; margin: 3px; } ccua bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } ccua bd { display: block; padding: 22px; } ccua bd d p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } ccua bd d p a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } ccua bd>h3 { margin-top: 22px; } ccua bd>p { margin: 7px 0; } ccua ft { display: block; padding: 22px; } ccua ft>d>dv { display: flex ; justify-content: space-between; padding: 11px 0; } ccua ft>d>dv i { transform: rotate(180deg); height: 20px; width: 20px; } ccua ft p a { font-size: 1em; font-weight: 500; color: var(--a); } ccua ft d label { display: flex ; align-items: center; column-gap: 7px; } ccua ft d label input { height: 15px; width: 15px; } ccua ft div { display: none; } .acces ccua ft>d>dv i { transform: rotate(0deg); } .acces ccua ft>d>div { display: block; } ccua ft>dv { display: grid; margin-top: 44px; row-gap: 4px; } ccua ft>dv a { font-size: 0.88em; font-weight: 500; color: var(--a); } ccua ft ul { padding-left: 22px; } /* Component : CourseUpdate_Basics */ ccub { display: none; } .Basics ccub { display: block; } ccub>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccub hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } ccub hd h2 { font-size: 24px; font-weight: bold; } ccub bd { display: block; padding: 22px; } ccub bd p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } ccub bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccub bd h3 { font-size: 1em; font-weight: 600; margin-top: 11px; } ccub bd d { display: flex ; justify-content: space-between; border: 1px solid var(--bc); align-items: center; padding: 0 7px; border-radius: 7px; margin: 7px 0; } ccub bd input { padding: 0 11px; font-size: 0.88em; font-weight: 500; } ccub bd aa { font-size: 0.88em; font-weight: 500; } ccub bd span { font-size: 0.77em; font-weight: 500; } ccub bd div { display: block; border: 1px solid var(--bc); border-radius: 7px; margin: 7px 0; } ccub bd btns { display: flex ; border-bottom: 1px solid var(--bc); padding: 7px; } ccub bd i { width: 20px; height: 20px; } ccub bd path { fill: var(--b1); } ccub bd fild { display: grid ; grid-template-columns: auto auto auto; gap: 11px; margin: 7px 0; } ccub bd select { margin: 0; background: transparent; padding: 11px; } ccub bd select:last-child { grid-column-start: 3; grid-column-end: 4; } ccub bd f { display: grid ; row-gap: 11px; } ccub bd sp { display: flex ; align-items: center; column-gap: 7px; } ccub bd f i { width: 20px; height: 20px; margin-top: 16px; } ccub bd f input { border: 1px solid var(--bc); padding: 0 11px; width: 55%; height: 44px; border-radius: 7px; } ccub bd bnb { display: grid ; grid-template-columns: 49% 49%; column-gap: 14px; margin: 7px 0; } ccub bnb i { width: 100%; height: 100%; border: 1px solid var(--bc); } ccub bd b { display: block; } ccub bnb p { font-size: 0.88em; font-weight: 500; margin-bottom: 14px; } ccub bd label { display: grid ; grid-template-columns: auto 33%; column-gap: 7px; } ccub label input { opacity: 0; height: 0; } ccub label dv { display: block; border: 1px solid var(--bc); padding: 11px; border-radius: 7px; font-size: 0.88em; font-weight: 500; } ccub label btn { display: block; border: 1px solid var(--bc); border-radius: 7px; align-content: center; text-align: center; font-size: 0.88em; font-weight: 500; } ccub ft { display: block; padding: 22px; } ccub ft h3 { font-size: 1em; font-weight: 600; } ccub ft div { display: grid ; grid-template-columns: 33px auto; border: 1px solid var(--rd); padding: 11px; column-gap: 7px; border-radius: 11px; margin: 11px 0; } ccub ft div i { width: 32px; height: 32px; margin: 2px; } ccub ft div path { fill: var(--rd); } ccub ft h4 { font-size: 1em; font-weight: 600; } ccub ft div p { font-size: 0.88em; font-weight: 500; margin: 0; margin-top: 7px; } ccub ft d { display: flex ; column-gap: 7px; align-items: center; margin: 11px 0; } ccub ft d>i { width: 24px; height: 24px; } ccub ft d>i:nth-child(2) { background: var(--b1); padding: 7px; border-radius: 22px; } ccub ft t { font-size: 0.88em; font-weight: 500; color: var(--a); } ccub ft dv { display: block; border: 1px solid var(--rd); padding: 11px; border-radius: 11px; } ccub ft p { font-size: 0.88em; font-weight: 500; margin: 7px 0; } ccub ft a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } @media only screen and (max-width: 999px) { ccub bd bnb { grid-template-columns: 100%; row-gap: 11px; } ccub bd fild { grid-template-columns: auto auto; } ccub bd select:nth-child(3) { grid-column-start: 1; grid-column-end: 3; } ccub bd select:nth-child(4) { grid-column-start: 1; grid-column-end: 3; } } /* Component : CourseUpdate_Captions */ cctu { display: none; } .Captions cctu { display: block; } cctu>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } cctu>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } cctu hd h2 { font-size: 24px; font-weight: bold; } cctu hd btn { display: inline-flex; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; } cctu hd t { font-size: 0.88em; font-weight: 500; } cctu>bl>bd { display: block; padding: 22px; } cctu bd p { font-size: 0.88em; font-weight: 500; margin: 0; } cctu bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } cctu>bl>hd select { display: flex ; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; margin: 0 11px; } cctu>bl>hd d i { width: 18px; height: 18px; } cctu>bl>hd d { display: flex ; gap: 7px; align-items: center; } cctu>bl>hd dv { display: flex ; } cctu ft a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } cctu ft { display: block; padding: 22px; } cctu ft>d i { width: 24px; height: 24px; margin: 3px; } cctu ft d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } cctu ft h3 { font-size: 1em; font-weight: 600; } @media only screen and (max-width: 999px) { cctu>bl>hd d { display: none; } cctu>bl>hd { display: block; } cctu hd btn { margin-top: 7px ; } } /* Component : CourseUpdate_Curriculum */ ccuc { display: none; } .Curriculum ccuc { display: block; } ccuc>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } ccuc>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccuc hd h2 { font-size: 24px; font-weight: bold; } ccuc hd btn { display: flex; border: 1px solid; color: var(--a); padding: 7px 11px; border-radius: 5px; transition: 333ms; } ccuc hd btn:hover { background: rgb(111 43 255 / 11%); } ccuc hd t { font-size: 0.88em; font-weight: 500; } ccuc>bl>bd { display: block; padding: 22px; } ccuc bd p { font-size: 0.88em; font-weight: 500; margin: 0; } ccuc bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccuc>bl>ft { display: block; padding: 22px; } ccuc ft>btn { display: flex ; align-items: center; width: max-content; column-gap: 11px; padding: 5px 11px; border: 1px solid; color: var(--a); border-radius: 5px; margin-top: 11px; transition: 333ms; } ccuc ft i { width: 20px; height: 20px; } ccuc ft t { font-size: 0.88em; font-weight: 500; } ccuc ft>btn:hover { background: rgb(111 43 255 / 11%); } /* Component : CourseUpdate_Intended */ ccui { display: none; } .Intended ccui { display: block; } ccui>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } ccui hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } ccui hd h2 { font-size: 24px; font-weight: bold; } ccui bd { display: block; padding: 22px; padding-bottom: 0; } ccui bd p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } ccui bd a { font-size: 0.88em; font-weight: 500; color: var(--a); text-decoration: underline; } ccui bd h3 { font-size: 1em; font-weight: 600; margin-bottom: 11px; } ccui bd d { display: flex ; justify-content: space-between; align-items: center; padding: 0 7px; border: 1px solid var(--bc); margin: 7px 0; border-radius: 7px; } ccui bd input { padding: 0; font-size: 0.88em; font-weight: 500; } ccui bd aa { font-size: 0.88em; font-weight: 500; } ccui ft { display: block; padding: 22px; } ccui ft btn { display: flex ; align-items: center; width: max-content; padding: 7px; border-radius: 4px; transition: 333ms; column-gap: 7px; margin-top: 11px; } ccui ft btn:hover { background: #0055d442; } ccui ft i { width: 20px; height: 20px; } ccui ft t { font-size: 0.88em; font-weight: 500; color: var(--a); } ccui ft d { display: flex ; justify-content: space-between; align-items: center; padding: 0 7px; border: 1px solid var(--bc); margin: 7px 0; border-radius: 7px; } ccui ft input { padding: 0; font-size: 0.88em; font-weight: 500; } ccui ft h3 { font-size: 1em; font-weight: 600; margin: 11px 0; } ccui ft p { font-size: 0.88em; font-weight: 500; margin: 0; margin-bottom: 22px; } ccui ft a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } /* Component : CourseUpdate_Messages */ cctm { display: none; } .Messages cctm { display: block; } cctm>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } cctm hd { display: block; padding: 22px; border-bottom: 1px solid var(--bc); } cctm hd h2 { font-size: 24px; font-weight: bold; } cctm bd { display: block; padding: 22px; padding-bottom: 0; } cctm bd p { font-size: 0.88em; font-weight: 500; margin: 0; } cctm ft { display: block; padding: 22px; } cctm ft h3 { font-size: 1em; font-weight: 600; margin-top: 11px; margin-bottom: 7px; } cctm ft d { display: block; border: 1px solid var(--bc); border-radius: 7px; } cctm ft div { display: flex ; justify-content: space-between; align-items: center; padding: 11px; border-bottom: 1px solid var(--bc); } cctm ft btns { display: flex ; column-gap: 7px; } cctm ft i { width: 20px; height: 20px; } cctm ft path { fill: var(--b1); } cctm ft aa { font-size: 0.88em; font-weight: 500; } cctm ft input { font-size: 0.88em; font-weight: 500; padding: 0; padding: 0 11px; } /* Component : CourseUpdate_Plan */ ccup>bl { display: block; padding: 22px; padding-left: 0; } ccup hd { display: none; } ccup bd { display: block; } ccup bd d { display: block; margin-top: 14px; } ccup bd h3 { font-size: 1em; font-weight: bold; padding: 7px 0; padding-left: 22px; } ccup bd grid { display: grid ; grid-template-columns: 22px auto; align-items: center; padding: 7px 22px; column-gap: 7px; transition: 333ms; } ccup bd grid.this { border-left: 5px solid; border-radius: 0; } ccup bd grid:hover { background: var(--bc); } ccup bd i { width: 10px; height: 10px; border: 1px solid; border-radius: 14px; padding: 4px; } ccup bd h6 { font-size: 0.88em; font-weight: 500; } ccup bd h6 { font-size: 0.88em; font-weight: 500; } ccup ft { display: block; margin-top: 11px; } ccup ft btn { display: block; background: var(--a); color: var(--b); text-align: center; padding: 7px 0; border-radius: 7px; } ccup ft t { font-size: 0.88em; font-weight: 500; } ccup ft i { display: none; } @media (max-width: 999px){ ccup>bl { margin: 7px; padding: 0; } ccup hd { display: flex ; justify-content: space-between; border-bottom: 1px solid var(--bc); padding-bottom: 11px; } ccup hd i { width: 33px; height: 33px; } ccup hd path { fill: var(--a); } ccup hd btn { background: var(--a); padding: 7px 11px; color: var(--b); border-radius: 4px; } ccup hd t { font-size: 0.88em; font-weight: 500; } ccup bd { display: none ; grid-template-columns: 50% 50%; } ccup ft { display: none; } .inten ccup bd { display: grid ; } } /* Component : CourseUpdate_Pricing */ ccpu { display: none; } .Pricing ccpu { display: block; } ccpu>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } ccpu>bl>hd { display: flex ; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } ccpu hd h2 { font-size: 24px; font-weight: bold; } ccpu>bl bd { display: block; padding: 22px; padding-bottom: 0; } ccpu bd i { width: 24px; height: 24px; margin: 3px; } ccpu bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--rd); padding: 14px; border-radius: 11px; column-gap: 11px; margin-bottom: 22px; } ccpu bd d p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } ccpu bd>h3 { margin-top: 22px; } ccpu bd>p { margin: 7px 0; } ccpu bd btn { display: inline-block; border: 1px solid; color: var(--rd); padding: 7px 11px; border-radius: 5px; margin-top: 11px; font-weight: bold; } ccpu ft h4 { color: var(--b1); display: block; margin-bottom: 4px; } ccpu ft d { display: flex ; column-gap: 22px; } ccpu ft select { margin: unset; padding: 11px; border-radius: 4px; } ccpu ft btn { display: inline-flex ; color: var(---bc); padding: 7px 22px; border-radius: 5px; background: var(--a); margin-top: 22px; opacity: 0.6; } ccpu ft { padding: 22px; display: block; } /* Component : CourseUpdate_Promotions */ cctp { display: none; } .Promotions cctp { display: block; } cctp>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } cctp>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } cctp hd h2 { font-size: 24px; font-weight: bold; } cctp bd i { width: 24px; height: 24px; margin: 3px; } cctp bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } cctp bd { display: block; padding: 22px; } cctp bd>dv { display: grid ; border: 1px solid var(--bc); padding: 14px; border-radius: 7px; margin-top: 22px; } cctp bd p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } cctp bd label { display: grid ; border: 1px solid var(--b1); align-items: center; max-inline-size: 48rem; border-radius: 4px; grid-template-columns: 92% 8%; } cctp bd input { width: auto; border-right: 1px solid var(--b1); border-radius: 7px 0px 0px 7px; background: transparent; } cctp bd btn { display: grid ; align-items: center; justify-content: center; height: 100%; width: auto; border-radius: 0 7px 7px 0;} cctp a { font-size: .88em; font-weight: 500; text-decoration: underline; color: var(--a); } cctp bd t { display: block; font-size: 0.88em; font-weight: 500; color: var(--a); } cctp bd btn:hover { background: var(--aat); } cctp bd label:hover { background: var(--bc); } cctp ft { display: block; padding: 22px; } cctp ft d { display: grid ; border: 1px solid var(--bc); padding: 14px; margin-top: 4px; } cctp ft>dv>d { justify-content: center; } cctp ft label { display: flex ; justify-content: space-between; margin-top: 22px; opacity: unset; } cctp p a { font-size: 1em; } cctp bd t { display: block; font-weight: bold; color: var(--a); } @media only screen and (max-width: 999px) { cctp bd label { border: unset; grid-template-columns: unset; } cctp bd input { border: 1px solid var(--b1); border-radius: 7px; margin-bottom: 7px; } cctp bd btn { border: 1px solid var(--a); border-radius: 4px; } cctp bd t { padding: 7px; } } /* Component : CourseUpdate_Structure */ ccus { display: none; } .Structure ccus { display: block; } ccus>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); margin: 11px 0; } ccus hd { display: block; } ccus hd>h2 { font-size: 24px; font-weight: 600; padding: 22px; border-bottom: 1px solid var(--bc); } ccus hd grid { display: grid ; grid-template-columns: auto 44%; padding: 22px; background: var(--a1); column-gap: 11px; align-items: center; } ccus div h2 { font-size: 24px; font-weight: 600; margin-bottom: 22px; } ccus hd p { font-size: 0.88em; font-weight: 500; margin: 14px 0; } ccus hd dv { display: block; background: var(--b-t95); padding: 22px; box-shadow: 0 2px 10px var(---bc); margin-left: 22px; text-align: center; } ccus hd i { width: 120px; height: 90px; margin: auto; margin-bottom: 22px; } ccus hd h3 { font-size: 1em; font-weight: 600; } ccus hd btn { display: block; border: 1px solid; padding: 7px 0; color: var(--a); width: 50%; margin: auto; border-radius: 4px; transition: 333ms; } ccus hd btn:hover { background: rgb(111 43 255 / 11%); } ccus hd t { font-size: 0.88em; font-weight: 500; } ccus bd { display: block; padding: 22px; padding-bottom: 0; } ccus bd h2 { font-size: 24px; font-weight: bold; } ccus bd h3 { font-size: 1em; font-weight: 600; margin-top: 22px; margin-bottom: 11px; } ccus bd p { font-size: 0.88em; font-weight: 500; } ccus bd a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ccus ft { display: block; padding: 22px; padding-top: 0; } ccus ft h2 { font-size: 24px; font-weight: bold; margin-top: 33px; } ccus ft ul { display: block; padding-left: 22px; } ccus ft li { font-size: 0.88em; font-weight: 500; } ccus ft a { font-size: 0.88em; font-weight: 500; color: var(--a); text-decoration: underline; } ccus ft h2 { font-size: 24px; font-weight: bold; margin-top: 33px; } ccus ft h3 { font-size: 1em; font-weight: 600; text-decoration: underline; color: var(--a); margin-top: 22px; margin-bottom: 11px; } ccus ft p { font-size: 0.88em; font-weight: 500; margin: 0; } @media only screen and (max-width: 999px) { ccus hd dv { margin-left: unset; } ccus hd grid { display: block; } } /* Course_BusinessManagement*/ cabmo { position: relative; display: flex ; flex-direction: column; margin: 2% auto; padding: 11px 0; gap: 12px; background: #ffffff; border-radius: 12px; max-width: 735px; } cabmo hd { display: flex ; } cabmo hd h1 { margin: 0; font-size: 21px; color: var(--bt); font-weight: 600;} cabmo bd p { margin: 0; color: #594173; } cabmo ft { display: flex ; justify-content: space-between; border-top: 1px dashed #EAE7EE; padding: 12px 2px; border-bottom: 1px dashed #EAE7EE; flex-wrap: wrap; } cabmo ft bl { display: flex ; align-items: center; gap: 11px; } cabmo ft bl wr { display: flex ; align-items: center; gap: 2px; } cabmo img.dp { min-width: 22px; } cabmo img.clock { min-width: 16px; } cabmo img.rateing { min-width: 16px; } cabmo p.date { color: var(--c); font-size: 14px; font-weight: 400; } cabmo bl>p { color: var(--c); } cabmo bl>h4 { color: var(--c); } /*Course_Card01*/ cabmo bl { position: relative; display: flex ; flex-direction: column; padding: 12px; gap: 12px; background: #ffffff; border-radius: 12px; max-width: 735px; } cabmo hd { display: flex ; } cabmo hd h1 { margin: 0; font-size: 21px; color: var(--bt); font-weight: 600;} cabmo bd p { margin: 0; color: #594173; } cabmo ft { display: flex ; justify-content: space-between; border-top: 1px dashed #EAE7EE; padding: 12px 2px; border-bottom: 1px dashed #EAE7EE; flex-wrap: wrap; } cabmo ft dv { display: flex ; align-items: center; gap: 11px; } cabmo ft dv wr { display: flex ; align-items: center; gap: 2px; } cabmo img.dp { max-width: 50px;border-radius: 50%;min-width: 22px;} cabmo img.clock { min-width: 16px; } cabmo img.rateing { min-width: 16px; } cabmo p.date { color: var(--c); font-size: 14px; font-weight: 400; } cabmo dv>p { color: var(--c); } cabmo dv>h4 { color: var(--c); } /* Course_Completion*/ /* Component : Course_Completion */ ccrcp { display: flex ; position: relative; max-width: 420px; justify-content: center; } ccrcp>bl { display: flex ; flex-direction: column; width: fit-content; height: fit-content; border: 2px solid #EAE7EE; background: white; border-radius: 12px; padding: 15px 15px; box-sizing: border-box;gap:19px; max-width: 394.38px;} ccrcp>bl>hd { display: flex ; flex-direction: column; color: var(--b1);} ccrcp hd>lv { display: flex ; justify-content: space-between; } ccrcp lv>p { font-size: 14px; font-weight: 400; } ccrcp hd lw { display: flex ; } ccrcp lw>cp { display: flex ; width: 32%; height: 6px; background: #EAE7EE; margin: auto; border-radius: 12px; } ccrcp lw>.cb { background: #6F2BFF; } ccrcp>bl>ft { display: flex ;gap:14px; } ccrcp ls { display: flex ; flex-direction: column; } ccrcp .l1 { width: 35px; height: 35px; border: 2px solid #EAE7EE; border-radius: 22px; display: flex ; align-items: center; justify-content: center; font-size: 16px; font-weight: 500;color: var(--b1); } ccrcp .lc { background: #6f2bff; border-color: #6f2bff; color: white; } ccrcp lr { width: 2px; height: 122px; background: #eae7ee; margin: auto; } ccrcp clb { display: flex ; flex-direction: column;gap: 14px; } ccrcp ccb { display: flex ; flex-direction: column; background: #6F2BFF; border-radius: 12px; padding: 8px 13px; color: var(--b-t95);} ccrcp ccb>bl { display: flex ; flex-direction: column; } ccrcp ccb>bl>hd { display: flex ; } ccrcp .cen { width: 26px; height: 26px; } ccrcp i { width: auto; height: auto; } ccrcp ccb bd { display: flex ; align-items: center; gap: 5px;} ccrcp ccb p { font-size: 16px; font-weight: 400; color: white; margin: 8px 0px;} ccrcp ccb aa { font-size: 16px; font-weight: 900; margin: 0px 6px; } ccrcp ccb ft>t { display: flex ; justify-content: space-between; } ccrcp ft>tp { width: 100%; display: flex ; background: #BD9DFF; height: 6px; border-radius: 12px;position: relative; } ccrcp ccb hd>h5 { font-size: 16px; font-weight: 500; color: white; } ccrcp .cw { background: white; border: 2px solid #EAE7EE; } ccrcp .cw p {color: var(--c);} ccrcp .cw h5 { color: black; } ccrcp ccd { display: flex ; border: 2px solid #EAE7EE; border-radius: 11px; padding: 10px 13px; } ccrcp ccd>bl { display: flex ; justify-content: space-between; width: 100%; } ccrcp ccd hd>l { display: flex ; gap: 6px;align-items: center; } ccrcp l p { font-size: 16px; margin: auto 0; color: #2B0F49; } ccrcp ccd t { margin: auto 0; font-size: 16px; font-weight: 400; color: #4f3a6b; } ccrcp ccd hd { display: flex ; flex-direction: column; gap: 11px; } ccrcp ccd bd { display: flex ; flex-direction: column; gap: 6px; } ccrcp .cw tp::after { width: 50%; content: ""; position: absolute; left: 0; height: 100%; background: #6F2BFF; border-radius: 15px; } ccrcp ft>tp::after { content: ""; width: 41%; height: 100%; background: white; border-radius: 8px; } /* Component : Course_Contents */ ccuco { position: relative; display: flex ; flex-direction: column; margin: 2% auto; padding: 11px 0; gap: 12px; background: #ffffff; border-radius: 12px; max-width: 888; width: 98%; } ccuco h1 { font-size: 22px; color: var(--b1); } ccuco hd { display: flex ; flex-direction: column; } ccuco hd bl { display: flex ; flex-direction: column; border: 1px solid var(--bc); border-radius: 10px; padding: 5px 0px; gap: 10px; } ccuco hd bl t { padding: 1px 24px; color: var(--b1); font-weight: 400; } ccuco hd bl wr { border-top: 1px solid #EAE7EE; } ccuco hd bl tx { display: flex ; align-items: center; gap: 6px; padding: 1px 18px; } ccuco hd bl i { height: auto; width: auto; cursor: pointer; } ccuco hd img { max-width: 100%; max-height: 100%; } ccuco hd bl h4 { font-size: 16px; font-weight: 500; color: var(--bt); } ccuco hd input[type="radio"] { margin-left: auto; cursor: pointer; width: 19px; } /*bd*/ ccuco bd { display: flex ; flex-direction: column; } ccuco bd bl { display: flex ; flex-direction: column; border: 1px solid var(--bc); border-radius: 10px; padding: 5px 0px; gap: 10px; } ccuco bd bl t { padding: 1px 24px; color: var(--b1); font-weight: 400;} ccuco bd bl wr { border-top: 1px solid #EAE7EE; } ccuco bd bl tx { display: flex ; align-items: center; gap: 6px; padding: 1px 18px; } ccuco bd bl i { height: auto; width: auto; cursor: pointer; } ccuco bd img { max-width: 100%; max-height: 100%; } ccuco bd bl h4 { font-size: 16px; font-weight: 500; color: var(--bt); } ccuco bd input[type="radio"] { margin-left: auto; cursor: pointer; width: 19px; } /*ft*/ ccuco ft { display: flex ; flex-direction: column; } ccuco ft bl { display: flex ; flex-direction: column; border: 1px solid var(--bc); border-radius: 10px; padding: 5px 0px; gap: 10px; } ccuco ft bl t { padding: 1px 24px; color: var(--b1); font-weight: 400; } ccuco ft bl wr { border-top: 1px solid #EAE7EE; } ccuco ft bl tx { display: flex ; align-items: center; gap: 9px; padding: 1px 15px; } ccuco ft bl i { height: auto; width: auto; cursor: pointer; } ccuco ft img { max-width: 100%; max-height: 100%; } ccuco ft bl h4 { font-size: 16px; font-weight: 500; color: var(--bt); } ccuco ft input[type="radio"] { margin-left: auto; cursor: pointer; width: 19px; } bufo bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); padding: 20px 0; } bufo hd { padding: 0px 12px; display: block; border-bottom: solid 1px var(--bc); } bufo h2 { font-size: 18px; font-weight: 600; margin-bottom: 16px; } bufo bd d { display: flex ; gap: 16px; flex-direction: column; } bufo bd { margin-block: 20px; display: block; padding: 0px 20px; } bufo input { padding: unset; height: 20px; } bufo bd div { display: flex ; flex-direction: row; gap: 10px; margin-block: 20px; } bufo tags { display: flex ; flex-wrap: wrap; gap: 8px; align-items: center; } bufo bd tag { padding: 5px 14px; border: 1px solid var(--b1); font-size: 13px; gap: 4px; font-weight: 500;border-radius: 4px; } bufo bd a { font-weight: 500; color: var(--p4); } bufo tag span { opacity: .4; } bufo ft div { display: flex ; gap: 12px; white-space: nowrap; align-items: center; } bufo ft { padding: 16px 20px; border-top: 1px solid var(---bc); display: block; } bufo ft btn { padding: 10px 26px; font-size: 13px; border-right: 1px solid var(--c1); flex: 1; } bufo ft btns { display: flex ;border-radius: 4px; border: 1px solid var(--c1); } bufo bd tag:hover { background: var(---ba); border: solid 1px var(---sy); } bufo bd i { width: 20px; height: 20px; } bufo bd svg { fill: var(--btn11); } bufo bd inp { display: flex ; width: 200px; padding: 8px 12px; padding-right: 35px; border: 1px solid var(--c); border-radius: 4px; justify-content: space-between; } bufo btn.this { background: var(--c1); color: var(--b); } @media(max-width:999px){ bufo bd tag { overflow: hidden; text-overflow: ellipsis; display: flex ; white-space: nowrap; } bufo tag span { opacity: .4; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; } bufo bd div { flex-direction: column; } bufo ft div { display: block; } bufo ft btns { flex-direction: column; } bufo ft btn { border-bottom: 1px solid var(--c1); } } ccte th { width: 24%; padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b);text-align: justify; } ccte td:nth-child(1) { border-right: solid 1px var(--bc); display: flex ; align-items: center;white-space: nowrap;} ccte tbody tr { border-bottom: dashed 2px var(---bc); } ccte a { color: var(--p3); font-weight: 400; } ccte p { font-size: 15px; } cvco.Table bcts { display: block; } bcts { display: none; } ccte>bl>bd { display: block; overflow: scroll; }/* Course_card*/ ccurs>bl>hd a { display: flex ; background-image: url(/-/School/asset/download31.jpg); background-repeat: no-repeat; height: 155px; background-size: cover; border-radius: 12px; } main>d>scrs { display: flex ; width: 97%; } ccurs bl>bd h1 { margin: 0; font-size: 21px; color: var(--bt); font-weight: 600; } ccurs { display: flex ; flex-direction: column; position: relative; border: 1px solid var(--bo1); border-radius: 12px; padding: 15px 17px; background: var(--b-t95); min-width: 310px; color: var(--b1); margin: 11px; } ccurs>bl { display: flex ; flex-direction: column; } ccurs bl>bd { display: flex ; flex-direction: column; align-items: baseline; margin: 11px 0; gap: 4px; } ccurs bl bd>h4 { font-size: 18px; font-weight: 500; margin: 1px 0px; } ccurs bl bd>p { margin: 0; font-size: 14px; } ccurs bl active { display: flex ; align-items: center; gap: 12px; } ccurs ft>d { display: flex ; justify-content: space-between; align-items: center; color: var(--b1); } ccurs ft>d h6 { font-size: 14px; font-weight: 500; } ccurs ft>lnn { display: flex ; align-items: center; height: 6px; width: 100%; margin: 2px 1px 4px 1px; background: var(--ba1); border: 1px solid var(--ba1); border-radius: 9px; } ccurs ft #starr { display: none; } ccurs ft .label {font-size: 19px; color: var(--c0); cursor: pointer; } ccurs ft lnn ln { display: flex ; background: var(--aa); width: 70%; height: 100%; border-radius: 9px; } ccurs dash { display: flex ; width: 97%; border: 1px dashed var(---bc); margin: 2px 1px 1px 1px; } ccurs ft end { display: flex ; align-items: center; justify-content: space-between; } ccurs ft end>d { display: flex ; align-items: center} ccurs end hd>img.net { width: 17px; margin: 1px 5px; } ccurs end d>p { margin: 0; color: var(--b1); font-weight: 300; cursor: pointer; } ccurs end d>h4 { color: var(--b1); font-weight: 100; margin: 1px 6px; } img.net { margin: 1px 3px; } ccurs active .date { font-size: 16px; font-weight: 400; color: var(--c); } ccurs bl ft dv { display: flex ; align-items: center; gap: 11px; justify-content: space-between; } ccurs bl ft>dv:nth-child(1) { justify-content: space-around; } ccurs bl ft dv d { display: flex ; align-items: center; gap: 7px; } ccurs bl ft dv p { color: var(--c); } ccurs img.dp { max-width: 48px; height: 38px; border-radius: 50%; } ccdo { display: flex ; flex-direction: column; border-right: 2px dotted #dcd7e4; min-width: 157px; padding: 2px 21px 11px 21px; } ccdo bl>hd { display: flex ; width: 100%; align-items: center; justify-content: space-between; } ccdo hd>h2 { font-size: 16px; font-weight: 400; color: #2B0F49; } ccdo hd>cci { display: flex ; align-items: center; cursor: pointer; } ccdo hd>cci>p { margin-left: 3px; } ccdo ft>h1 { font-size: 18px; font-weight: 600; color: var(--b1);} ccdo:last-child { border-right: unset; } ccds { display: flex ; margin: 0; padding: 0; position: relative; z-index: 1; overflow: scroll;} ccds>bl>hd { display: flex ; width: auto; height: auto; border: 2px solid #EAE7EE; box-shadow: 0px 0px 1px 0px #aba4b4; padding: 0px 9px 0px 0px; border-radius: 7px; } /* Course_popup*/ .nn alcrs { display: block; } alcrs { display: none; position: absolute; flex-direction: column; border: 1px solid var(--bcc); border-radius: 5px; box-shadow: var(--bs-bt); top: 45px; z-index: 999; background-color: var(--b-t95); color: var(--bt); } alcrs bl { display: flex ; flex-direction: column; width: 520px; height: 670px; justify-content: space-between; padding: 15px; font-size: 20px; font-weight: 400; } alcrs bl i { display: flex ; width: 20px;height:24px; } alcrs bl h6 { display: flex ; align-items: center; margin: 0px 5px; padding: 4px 0px; background: #f7f4fa; border-radius: 5px;} alcrs bl t { display: flex ; align-items: center; padding: 8px; gap: 8px; margin: 0; border-radius: 8px; } alcrs t:hover { background-color: #F7F4FA; } .pp alcrs { display: flex ; } alcrs svg { fill: black; } /*Course_video*/ bcvo { position: relative; display: flex ; flex-direction: column; margin: 2% auto; background: #ffffff; border-radius: 35px; max-width: 744px; height: 100%; max-height: 405px; } bcvo bl { display: flex ; align-items: center; width: 100%; overflow: hidden; padding: 0px 0px; border-radius: 30px; height: 100%; } bcvo video { width: 100%; } ccno { display: flex ; position: relative; align-items: center; width: 100%; margin: 18px 0px; } ccno>bl { display: flex ; justify-content: space-between; width: 100%; align-items: center; padding: 1px 6px; } ccno bd { display: flex ; align-items: center; gap: 7px; } ccno btn.ccm { padding: 0px 11px 0px 11px; } ccno btn.ncc { background: var(---bc); } ccno btn.flts { gap: 6px; background: 0; padding: 0px 11px 0px 11px; } ccno btn.rndt { gap: 9px; width: auto; background: 0; } ccno btn.acrs { color: var(--b); background-color: var(--aa); border: 2px solid var(--aa); } ccno bd btns { display: flex ; gap: 7px; } ccno btn i { height: 17px; } ccno btn { border-radius: 9px; padding: 8px; cursor: pointer; display: flex ; align-items: center; justify-content: center; border: 2px solid var(---bc); } ccno .ccm svg { width: auto; } ccno .ncc svg { width: auto; } ccno .rndt img { width: 11px; } ccno hd h1 { font-size: 24px; font-weight: 500; color: var(--b1); } ccno .rndt>.crp { font-size: 14px; font-weight: 500; padding: 0; border: 0; background: 0; } ccno>bl ft { display: none; } @media only screen and (max-width: 999px) { ccno>bl { display: grid ; justify-content: unset; gap: 11px; } ccno bl>bd { display: grid; gap: 11px; } ccno bd>btns:nth-child(2) { display: grid ; gap: 11px; } ccno btn.flts { width: -webkit-fill-available; } ccno btn.flts i { width: 18px; } } cceo { display: none; background: var(---b); border-radius: 8px; box-shadow: 0 2px 10px var(---bc); max-width: 800px; margin: 0 auto; border: 1px solid var(---bc); } scso.ct cceo { display: block; } cceo bl { display: block; padding: 20px 24px 20px 24px; font-family: "Google Sans", Roboto, Arial, sans-serif;} cceo bd svg { fill:var(--at); } cceo bd i { height: 24px; width: 24px; } cceo hd img { border-radius: .25rem; } cceo bd { display: flex ; align-items: center; margin-top: 2rem;justify-content: space-between; } cceo bd dv { display: flex ; gap: 1rem; } cceo bd btn { display: flex ; background: var(---sy); padding: 5px 12px; border-radius: 20px; color: var(--at); align-items: center; } cceo h2 {color: var(--bor); padding: 0 0px 9px; line-height: 1.5rem; font-size: 1rem; letter-spacing: .00625em; font-weight: 500; padding-bottom: 13px; } cceo bd span { letter-spacing: .0178571429em; font-size: .875rem; font-weight: 500; line-height: 1.25rem; color: var(--bor); } cceo ft { display: block; margin-block-start: 2rem;} cceo ft dv span:nth-child(1) { color: var(--p3); } cceo ft dv { display: flex ; justify-content: end; gap: 1rem; margin-top: 18px; font-size: 13px; } cceo ft dv span { opacity: .7; } cceo ft svg { fill:var(--p3); width: 29px; } cceo ft i { display: flex ; height: 50px; font-style: normal; width: 50px; } cceo ft div { display: flex ; flex-wrap: wrap; gap: 20px; justify-content: space-between; margin-top: 20px; } cceo ft b { display: block; width: 50px; height: 50px; background: var(--b); border-radius: 38px; border: solid 2px var(--p3); } cceo bd btn:hover { box-shadow: 0 1px 10px var(--at); } cceo bd dv span { color: var(--at); } cceo ft span { color: var(--bor); } cceo b:nth-child(1) { background: var(--ad);} cceo b:nth-child(2) { background: var(--a1); border: solid 2px var(---gn); } cceo b:nth-child(3) {background: var(--btn6); border: solid 2px var(--a3);} cceo b:nth-child(4){ background: var(--bb); border: solid 2px var(--rd);} cceo b:nth-child(5) { background: var(--pp);border: solid 2px var(--p1);} cceo b:nth-child(6) { background: var(--p2); border: solid 2px var(--btn1); } cceo b:nth-child(7) { background: var(--p2); border: solid 2px var(--p3); } cceo b:nth-child(8) { background: var(--b); border: solid 2px var(--b1); } ccpl { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } ccpl hd { display: block; align-items: center; } ccpl hd>div { display: flex ; justify-content: space-between; align-items: center; } ccpl hd div dv { display: flex ; gap: 6px;} ccpl hd dv i { display: block; background-image: url(/-/School/asset/uilplcon12.png); width: 42px; height: 42px; border-radius: 6px; background-size: contain; } ccpl hd i{width: 30px; height: 30px; } ccpl svg {fill:var(--bor);} bccn>bl>hd { display: flex ; justify-content: space-between; border-bottom: solid 1px var(---bc); margin-bottom: 24px; background: var(---ba); padding: 14px; } bccn>bl { display: block; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; margin-block: 20px; } bccn d { display: flex ; justify-content: end; } bccn t { color: var(--p4); } bccn strong { font-weight: 500; } bccn>bl>bd { padding: 0px 20px; display: block; } bccn>bl>ft { padding: 0px 20px; display: block; } @media(max-width:999px){ bccn h2 { font-size: 17px; } ccpl hd i { width: 53px; height: 53px; } } acso { display: block; max-width: 700px; margin: 40px auto; border-radius: 8px; overflow: hidden; } acso hd { display: block; background: var(--b); padding: 12px 2px; } acso hd div { justify-content: space-between; align-items: center; display: flex ; gap: 16px; } acso hd dv { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #222; font-size: 15px; } acso hd p { font-size: 14px; color: var(--b1); font-weight: 600; line-height: 20px; } acso bd table { width: 100%; border-collapse: collapse; font-size: 15px; } acso bd th { text-align: left; padding: 12px 16px; background: var(---ba); font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; } acso bd td { text-align: left; padding: 12px 16px;font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; color: var(--btn11);} acso i { height: 20px; width: 20px; } acso hd div svg { fill: var(--p4); } acso hd div span { color: var(--p4); font-size: 14px; } crlag ft { display: flex ; align-items: center; flex-wrap: wrap; } sae { display: flex ; align-items: center; justify-content: center; padding: 8px 16px; background: white; border-radius: 28px; cursor: pointer; border: 1px solid #eae7ee; margin: 3px 0px; min-width: 116px; height:26px; } sae h5 { font-size: 16px; font-weight: 500; } sae i#yr { display: flex ; align-items: center; justify-content: center; background: #6F2BFF; border-radius: 50%; padding: 6px 5px; margin: 0px 11px; height: 10px; width: 10%; } #yr img { width: 14px; } crlag dtmn { display: flex ; justify-content: space-between; align-items: center; } crlag dt { display: flex ; justify-content: center; align-items: center; gap: 10px; } crlag mn {width: 18px;} crlag p { color: #74608a; font-size: 16px; } crlag { display: block; max-width: 320px; min-width: 300px; margin: 10px; } crlag btn { border: 1px solid #eae7ee; padding: 5px 10px; border-radius: 11px; font-size: 18px; color: #ff4aa1; background: #ffedf6; font-weight: 500; } crlag bl { box-shadow: 0px 0px 2px 0px #000000a8; display: flex ; flex-direction: column; padding: 10px 19px; justify-content: center; border: 1px solid #eae7ee; border-radius: 11px; position: relative; background: white; } crlag bd { display: block;} crlag divider { width: 100%; display: flex ; border: 1px dashed #eae7ee; } crlpg ft { display: flex ; align-items: center; flex-wrap: wrap; } saa { display: flex ; align-items: center; justify-content: center; padding: 8px 16px; background: white; border-radius: 28px; cursor: pointer; border: 1px solid #eae7ee; margin: 3px 0px; min-width: 116px; } saa h5 { font-size: 16px; font-weight: 500; } saa i#yr { display: flex ; align-items: center; justify-content: center; background: #6F2BFF; border-radius: 50%; padding: 6px 5px; margin: 0px 11px; height: 10px; width: 10%; } #yr img { width: 14px; } crlpg dtmn { display: flex ; justify-content: space-between; align-items: center; } crlpg dt { display: flex ; justify-content: center; align-items: center; gap: 10px; } crlpg mn {width: 18px;} crlpg p { color: #74608a; font-size: 16px; } crlpg { display: block; max-width: 320px; min-width: 300px; margin: 10px; } crlpg btn { border: 1px solid #eae7ee; padding: 5px 10px; border-radius: 11px; font-size: 18px; color: #ffb74a; background: #fff8ed; font-weight: 500; } crlpg bl { box-shadow: 0px 0px 2px 0px #000000a8; display: flex ; flex-direction: column; padding: 10px 19px; justify-content: center; border: 1px solid #eae7ee; border-radius: 11px; position: relative; background: white; } crlpg bd { display: block;} crlpg divider { width: 100%; display: flex ; border: 1px dashed #eae7ee; }seae { display: flex ; align-items: center; justify-content: center; padding: 8px 16px; background: white; border-radius: 28px; cursor: pointer; border: 1px solid #eae7ee; margin: 3px 0px; min-width: 116px; height: 26px; } seae i#your { display: flex ; align-items: center; justify-content: center; background: #6F2BFF; border-radius: 50%; padding: 6px 5px; margin: 0px 11px; height: 10px; width: 10%; } #your img { width: 14px; } crlst dtmn { display: flex ; justify-content: space-between; align-items: center; } crlst dt { display: flex ; justify-content: center; align-items: center; gap: 10px; } crlag mn {width: 18px;} crlst p { color: var(--c); font-size: 14px; margin: 0; } crlst { display: block; max-width: 320px; min-width: 300px; margin: 10px; } crlst btn { border: 1px solid #eae7ee; padding: 5px 10px; border-radius: 11px; font-size: 18px; color: #6f2bff; background: #f1eaff; font-weight: 500; } crlst bl { box-shadow: 0px 0px 2px 0px #000000a8; display: flex ; flex-direction: column; padding: 10px 19px; justify-content: center; border: 1px solid #eae7ee; border-radius: 11px; position: relative; background: white; } crlst bd { display: block;} crlst divider { width: 100%; display: flex ; border: 1px dashed #eae7ee; } cdee { display: block; max-width: 800px; margin: 20px auto; background: var(--0); border: 1px solid var(--bor); box-shadow: 0 1px 3px var(---bc); } cdee hd { display: block;border-bottom: none; box-shadow: 0 4px 24px var(---bc);} cdee hd h2 {padding: 12px 16px; margin: 0; font-size: 18px; font-weight: 600; color:var(--b1); line-height: 1.4; } cdee hd ul { display: flex; border-bottom: 1px solid var(--bor);margin:0;padding: 0px 20px;} cdee hd ul li { display: block; padding: 8px 0; margin-right: 32px; font-size: 14px; color: var(--btn11); position: relative; text-decoration: none; } cdee ft { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--bor);} cdee ft dv { display: flex; align-items: center; gap: 12px; } cdee ft dv tx { font-size: 14px; color: var(--btn11); font-weight: 600; margin-right: 12px; } cdee ft dv btn { display: flex; gap: 8px; } cdee ft dv bt { display: flex ; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; color: var(--btn11); } cdee ft dv bt i { font-size: 12px; } cdee ft div { display: flex; gap: 7px; } cdee ft div bt { display: flex; align-items: center; gap: 6px; background: none; border: none; font-size: 14px; color:var(--btn11);} cdee ft div bt i { font-size: 14px; } cdee svg { fill: var(--b1); } cdee i {height:20px; width:20px} cdee ft bt.bc { border-radius: 20px; padding: 10px 10px; border: 1px solid var(--bor); } cdee ft bt.bc:hover { background: var(---gn); } cdee ft dv btn bt.bc:nth-child(2):hover { background: var(--rd); } cdee.Placements hd li:nth-child(1) { color: var(--p4); border-bottom: solid 1px var(--p4); } cdee.Infrastructure hd li:nth-child(2) { color: var(--p4); border-bottom: solid 1px var(--p4); } cdee.Faculty hd li:nth-child(3) { color: var(--p4); border-bottom: solid 1px var(--p4); } cdee.Other hd li:nth-child(4) { color: var(--p4); border-bottom: solid 1px var(--p4); } @media (max-width: 768px) { cdee { margin: 10px 16px; border-radius: 4px; } cdee hd { padding: 0px 0px 10px 0px; overflow: scroll; } cdee ft bt.bc {padding: 3px 6px; height: 28px; } cdee hd h2 { font-size: 16px; } cdee hd ul li { margin-right: 20px; font-size: 13px; } cdee ft { flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px 20px; } } /*Discussion*/ cdno { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } cdno>bl>ft { display: flex ; justify-content: center;margin: 10px 0;} cdno>bl>ft>btn { border-radius: 100px; padding: 4px 16px; color: #2f1238; border: solid 1px var(--c); font-size: 0.875rem; align-items: center; display: flex ; line-height: 32px; } @media only screen and (max-width: 999px) { cdno { padding: 16px; } } .tabs {overflow: scroll; display: flex; gap: 10px; } .tab { display: flex ; align-items: center; gap: 5px; padding: 6px 12px; border: 2px solid var(--bor); border-radius: 10px; color: var(--bt); font-size: 16px; font-weight: 500; cursor: pointer; transition: 0.3s;min-width: fit-content; } .tab .icon { font-size: 16px; width: auto; height: auto;} .tab:hover { background: #e9e3f8; } .tab.active { background: var(--aa); color: var(--b-t95); border: none; font-size: 16px; font-weight: 500; } cdto .icon svg { width: 23px; } dtcs { display: flex; align-items: center; flex-direction: column; gap: 10px; border: 1px solid #eae7ee; border-radius: 10px; padding: 11px; position: relative; color: var(--b1); } dtcs h1 { display: flex ; font-size: 15px; color: var(--b1); font-weight: 600; } dtcs p { display: flex ; font-size: 15px; margin: 0;color:var(--c)} dtcs hd { display: flex ; align-items: center; justify-content: space-between; width: 100%; } dtcs btns { display: flex ; align-items: center; gap: 10px; } dtcs btns btn { border: 1px solid #eae7ee; padding: 3px 15px; border-radius: 10px; font-size: 14px; gap: 5px; display: flex ; } dtcs bd { display: grid ; align-items: center; border: 1px solid #eae7ee; border-radius: 15px; padding: 11px; width: 100%; grid-template-columns: auto 30%; } dtcs bd left { display: flex ; align-items: center; } dtcs t{ display: flex ; flex-direction: column;margin: 0px 11px; } dtcs my { display: flex ; align-items: center; color:var(--c)} dtcs bd right { display: flex ; align-items: center; gap: 9px; width: 100%; justify-content: end; } dtcs bd { display: grid ; align-items: center; border: 1px solid #eae7ee; border-radius: 15px; padding:11px; width: 100%; grid-template-columns: auto 30%;} dtcs bd left { display: flex ; align-items: center; } dtcs bd right { display: flex ; align-items: center; gap: 9px; width: 100%; justify-content: end;} dtcs bd { display: grid; align-items: center; border: 1px solid #eae7ee; border-radius: 15px; padding: 11px; width: -webkit-fill-available; grid-template-columns: auto 30%; } dtcs bd left { display: flex ; align-items: center; } dtcs bd left i { display: flex ; width: 43px; height: 39px; border-radius: 10px; } dtcs bd left .ibp{ background: #FF4AA1;} dtcs bd right { display: flex ; align-items: center; gap: 9px; width: 100%; justify-content: end; } dtcs ft { display: flex ; background: #edf2fa; width: 100%; border-radius: 10px; justify-content: center; color: #7737ff; padding: 7px;} dtcs ft btn { display: flex ; font-size: 16px;font-weight: 500;} dtcs right>i { width: auto; } dtcs btn.bdt { padding: 3px; border-radius: 7px; } @media only screen and (max-width:430px) { dtcs bd left i { padding: 1px 10px; } } @media only screen and (max-width:1320px) { dtcs { width: 90%; padding: 10px 25px; margin-bottom: 10px;} } /* Documents_Add */ cmds { display: flex ; flex-direction: column; align-items: center; margin: auto; position: relative; top: 147px; gap: 12px; } cmds bd h1 { font-size: 27px; color: var(--b1); font-weight: 500; } cmds bd p { display: flex ; font-size: 17px; color: var(--c); margin: auto; text-align: center;padding: 5px 0px; } cmds ft btn { display: flex ; border: 1px solid #eae7ee; border-radius: 5px; padding: 7px 0; font-size: 15px; color: var(--b1); width: 118px; justify-content: center; font-weight: 400; } cmds bd { display: grid ; } /* General Table Styling */ cdmlo.table-container { background: white; border-radius: 10px; width: 100%; display: flex ; flex-direction: column; border: 1px solid var(--bor); padding-bottom: 11px; max-width: 1280px; margin: auto; margin-top: 48px; overflow: scroll; } cdmlo table { width: 100%; border-collapse: collapse; } cdmlo th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--bo1); } cdmlo th { background: var(--ba1); color: #555; } cdmlo td img { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; } /* Badge Colors */ cdmlo .badge { display: inline-block; padding: 8px 10px; font-size: 12px; border-radius: 5px; color: white; } cdmlo .purple { background: var(--bl); width: 100%; align-items: center; display: flex ; justify-content: center; } cdmlo .pink { background: #ff61a6; } cdmlo .blue { background: #1e90ff; } /* Action Buttons */ cdmlo .actions btn { background: none; border: none; font-size: 18px; cursor: pointer; margin: 0 5px; } cdmlo .star:hover { color: gold; } cdmlo .delete:hover { color: red; } cdmlo .more:hover { color: black; } /* Pagination */ cdmlo .pagination { margin-top: 15px; text-align: center; display: flex ; justify-content: end; gap: 8px;padding-right: 10px; } cdmlo .pagination btn { padding: 6px 12px; margin: 3px; border-radius: 5px; cursor: pointer; background: var(--b-t95); color: #555; border: 1px solid var(--bor); } cdmlo .pagination .active { background: var(--bl); color: white; } cdmlo .pagination btn:hover { background: #ddd; } cdmlo .pagination .prev, .pagination .next { font-weight: bold; } cdmlo .actions i { width: auto; height: auto; } cdmlo .actions svg { width: auto; height: auto; } cdmlo cis { display: flex ; gap: 13px; width: 100%; justify-content: center; } cdmlo .ciff { width: auto; height: auto; } cdmlo th.cttl { border-radius: 11px 0 0 0; } cdmlo th.cttr { border-radius: 0 11px 0 0; } cdmlo .cdhd>cis { justify-content: start;} cdsmn { align-items: center; display: flex ; justify-content: space-between; width: 100%; } cdsmn t { color: var(--b1); font-size: 25px; font-weight: 600; } cdsmn btn { border: 1px solid var(--bor); border-radius: 5px; padding: 5px 0px; width: 125px; display: flex ; color: var(--b1); justify-content: center; gap: 4px; font-size: 16px; font-weight: 500; } cdsmn btn.bcn { background-color: var(--aa); color: var(--b); } cdsmn ft { display: flex ; gap: 16px; } cdsmn aa { font-size: 21px; margin: -5px 0 0px; text-align: center; } @media only screen and (max-width: 999px) { cdsmn { flex-direction: column; justify-content: start; align-items: start; } cdsmn ft { flex-direction: column; width: 100%; align-items: center;margin-top: 21px; } cdsmn btn{width: 100%;font-weight: 500;} d.Teachers { margin-bottom: 95px; } } cdyo { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } cdyo hd { display: block; } cdyo p { font-size: 0.875rem; line-height: 1.3125rem; margin: 4px 0 10px; color: var(--b1); } cdyo h2 { color: var(--b1); font-size: 0.875rem; line-height: 1.3125rem; } cdyo h3 { color: var(--b1); font-size: 0.875rem; line-height: 1.3125rem; } ceno>bl { border-bottom: solid 1px var(--bor); padding-block: 37px; } ceno i { width: 33px; } ceno dv { display: flex ; gap: 10px; } ceno hd div { display: flex ; justify-content: space-between; align-items: center; flex: 1 0 43%; background: var(--a1); padding: 14px; gap: 6px; border-radius: 8px; } ceno>bl>hd { display: flex ; border-radius: 12px; background: linear-gradient(135deg,var(--a4),var(---sy)); padding: 16px; gap: 16px; flex-wrap: wrap;margin-bottom: 32px; } ceno bd div { display: flex ; gap: 6px; line-height: 20px; margin: 0 0 16px;align-items: center; } ceno bd ul { list-style: disc; display: grid ; row-gap: 16px; font-size: 14px; line-height: 16px; margin: 0 0 0 18px; padding: 0; }/* Events_AugustToday */ ceatb { display: flex ; flex-direction: column; width: 100%; margin: auto; border: 1px solid var(--aat); border-radius: 12px; margin-bottom: 24px;} ceatb hd { display: flex ; justify-content: space-between;padding: 16px; } ceatb hd>left { display: flex ; } ceatb hd>Right { display: flex ; } ceatb>hd btn { display: flex ; color: var(--c); font-size: 16px; font-weight: 500; border: 1px solid var(--aat); justify-content: center; border-radius: 9px; padding: 4px; } ceatb>hd btns { display: flex ; gap: 6px; } ceatb>hd right { display: flex ; gap: 6px; } ceatb>hd btn svg { width: 20px; fill: var(--c); } ceatb>hd btn i { width: auto; height: auto; } ceatb>hd right svg { fill: none; } ceatb>hd btns btn { border: 0; padding: 7px 14px; } ceatb>hd right btn:hover { background-color: var(--lg-bl); } ceatb>hd btns { display: flex ; gap: 6px; background-color: var(--aat); padding: 2px 7px; border-radius: 9px; } ceatb>hd right btn { padding: 6px 10px;position: relative; } ceatb>hd btn.ceclf { rotate: 180deg; padding: 7px 9px; border-radius: 0; } ceatb>hd btn.cecrg { padding: 7px 9px; border-radius: 0 8px 8px 0; } ceatb>hd btn.cecag { padding: 5px 11px; border-radius: 8px 0 0 8px; } ceatb>hd btn.cectb { padding: 6px 23px; } ceatb bd { display: flex ; overflow: scroll; width: 100%; } ceatb ceds>div>t { font-weight: bold; font-size: 14px; } ceatb ceads {position: sticky; left: 0; z-index: 9999; display: grid ; width: 150px; min-width: 150px; border: 1px solid var(--aat); height: 100%; grid-template-rows: 38px 87px 87px 87px 87px 87px 87px; background: var(--b-t95); color: var(--bt); align-items: center; justify-content: center; } ceatb>hd right input.cebi { width: 117px; height: 21px; position: absolute; rotate: 177deg; background: 0; z-index: 22; opacity: 0; } ceatb ceds {display: grid ; width: 150px; min-width: 150px; border-right: 1px solid var(--aat); height: 100%; grid-template-rows: 38px 87px 87px 87px 87px 87px 87px; color: var(--bt); } ceatb ceds >div { display: flex ; justify-content: center; font-size: 16px; align-items: center;border-top: 1px solid var(--aat);position: relative; } ceatb ceds.ccedo { grid-template-rows: 38px auto; height: auto; } ceatb .ccedo catdo {background-image: url('/-Brand/School/asset/Tue_Day2.png');background-size: 105% 100%; background-repeat: no-repeat; width: 100%; background-position: -3px 0px;position: relative; display: flex ; justify-content: center;} ceatb .ccedo btn { border: 1px solid var(--aat); } @media only screen and (max-width: 999px) { ceatb { width: 95%; margin: 11px; } ceatb>hd right { display: none; } } /* Events_TodayCard */ cetdc { display: flex ; flex-direction: column; width: 90%; max-width: 172px; border: 1px solid rgb(170 89 74); border-radius: 12px; background-color: #e7eaee; color: var(--aa); max-height: 186px; justify-content: space-between; position: absolute; height: 129px; top: 28px; z-index: 999; }cetdc ft img { width: 23px; border: 1px solid var(--b-t95); border-radius: 16px; } cetdc ft i { width: auto; height: auto; margin-right: -4px; } cetdc ft { display: flex ; width: fit-content; background-color: var(--b-t95); align-items: center; border-radius: 21px; height: fit-content; padding: 4px; margin: 0 0 3px 7px; } cetdc ft t { font-size: 11px; } cetdc ft btn { display: flex ; background: var(--a1); border-radius: 12px; width: 25px; height: 25px; justify-content: center; align-items: center; } cetdc bd { display: flex ; height: 100%; padding: 9px 0 0 9px; } cetdc hd { background-color: var(--a2); border-radius: 11px 12px 0 0; padding: 7px; border-bottom: 2px dashed; } cetdc bd t { font-size: 14px; font-weight: 600; } cetdc hd t { font-size: 12px; } cetdc.yello hd { background: linear-gradient(181deg, #FFF2DF, #FFE9C8, #FFD596); } cetdc.yello { border: 1px solid #FFE9C7; color: #FFB74A; background: #FFF8ED;} cetdc.red hd {background: linear-gradient(181deg, #FFDAEC, #FCBDDB, #FEB0D5); } cetdc.red { border: 1px solid #FFC7E2; color:#FF4AA1; background: #FFEDF6; } /* Component : Explore */ cxpr>bl { display: block; margin: 22px auto; max-width: 735px; } cxpr hd { display: block; margin-bottom: 22px; } cxpr hd t { font-size: 0.88em; font-weight: 500; } cxpr hd h2 { font-size: 1.22em; font-weight: bold; margin-bottom: 11px; } cxpr hd btns { display: flex ; align-items: center; column-gap: 11px; } cxpr hd btn { padding: 7px; border: 1px solid var(--bc); border-radius: 7px; } cxpr bd { display: block; } cxpr bd h2 { font-size: 1.22em; font-weight: bold; margin-bottom: 11px; } cxpr bd d { display: grid ; grid-template-columns: 49% 49%; gap: 14px; } cxpr bd dv { display: flex ; align-items: center; column-gap: 11px; } cxpr bd i { width: 16px; height: 16px; } cxpr bd t { font-size: 0.88em; font-weight: 500; } @media only screen and (max-width: 999px) { cxpr bd d { grid-template-columns: 100%; } cxpr hd t { font-size: 0.77em; } } tx:hover { background: var(--bcc); } tx:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } tx { transition: transform 0.3s ease, box-shadow 0.3s ease; } cfao bl { display: block; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px; } cfao bd i { width: 15px; } cfao bd dv { border-radius: 4px; position: relative; display: flex ; justify-content: space-between; border-bottom: 1px solid var(--bor); padding: 16px 0px 18px; } cfao svg { fill: var(--b1); transform: rotate(91deg);opacity: .5; } cfao hd h2 { border-bottom: solid 4px var(--bc); padding-bottom: 19px; } cfao bd h3 { color: var(--b1); display: flex ; font-weight: 600; font-size: 14px; line-height: 22px; opacity: .7; } cfse { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; border: solid 1px var(--bor);} cfse hd { display: block; } cfse h2 { border-bottom: 1px solid var(--bor); background: var(--b); line-height: 1.6; font-size: 1rem; } cfse bd ul { list-style: none; padding: 0; margin: 0; } cfse bd li:nth-child(1) { margin: 16px 0; display: flex ; align-items: flex-start; padding: 12px 0; left: 3rem; position: relative; gap: 3rem; } cfse bd li:nth-child(1) div { display: flex ; flex-direction: column; gap: 6px; } cfse bd li:nth-child(2) { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bor); } cfse bd li:nth-child(2) div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } cfse li span { font-size: 13px; color: var(--b1); font-weight: 500; } cfse bd i { height: 40px; width: 40px; } cfyo bd { display: block; padding: 20px 24px; } cfyo bd dv { display: block;} cfyo bd dv h3 { display: block; align-items: center; margin: 0 0 -2px 0; font-size: 16px; font-weight: 600; color: var(--b1); } cfyo bd dv ul { padding: 0px 20px; margin: 0; } cfyo bd dv li {margin-bottom: 12px;} cfyo bd dv p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--b1); } cfyo bd dv span { font-size: 12px; color: var(--btn11); margin-left: 4px; } cfyo bd div { display: flex ; font-size: 12px; color: var(--btn11); line-height: 1.6; padding: 4px 0 12px; align-items: center; } cfyo bd dv div::before { display: block; width: 12px; height: 12px; content: ""; border-radius: 50px; margin-right: 6px; line-height: 1.6; background: var(--rd); top: 2px; position: relative;} cfyo bd dv:nth-child(1) div::before{background:var(---gn);} cdee.Faculty cfyo { display: block; } cfyo { display: none; } @media (max-width: 768px) { cfyo bd { padding: 16px 20px; } } bfdo svg { fill: var(---b1); } bfdo hd>i { width: 30px; height: 30px; } bfdo>bl>hd { display: flex ; } bfdo hd p { margin: 0; } bfdo bd p { font-size: 16px; } bfdo { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } bfto bd td, bfto bd th { border: 1px solid var(--bor); padding: 8px 10px; text-align: left; font-size: 14px; line-height: 2.4; opacity: .7;} bfto bd th { text-align: center; color: var(--b1); background: var(--bc); } bfto bd th:nth-child(1) { text-align: unset; } /*Fee_Structure*/ cfso hd span { display: flex ; justify-content: flex-end; font-size: 15px; color: var(--p3); } cfso td:nth-child(1) { border-right: solid 1px var(--bc); } cfso th { width: 24%; padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b); } cfso tbody tr { border-bottom: dashed 2px var(---bc); } cfso:nth-child(2) hd { display: none; } cfso bl { margin-block: 2rem; } cfso ft svg { fill: var(--c); } cfso ft a { display: flex ; justify-content: center; padding: 6px 19px; border: 1px solid var(--c); border-radius: 25px; align-items: center; font-size: 15px; white-space: nowrap; } cfso>bl>ft { display:block;} cfso ft i { width: 20px; } cfso ft div { display: flex ; justify-content: space-between; border-radius: 9px; border: solid 1px var(--a4); padding: 14px 9px; background: var(---sy); margin-bottom: 18px; } cfso ft span { display: flex ; align-items: center; } cfso ft span:nth-child(2) { color: var(--at); } cfso ft btn { display: flex ; justify-content: center; } cfso ft em { margin-block: 8px; padding: 2px 24px; opacity: .5; font-size: 12px; display: flex ; }/*Fee_Structure*/ bfso hd span { display: flex ; justify-content: flex-end; font-size: 15px; color: var(--at); } bfso td:nth-child(1){ border-right: solid 1px var(--bc); } bfso td:nth-child(2){ border-right: solid 1px var(--bc); } bfso th { width: 24%; padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b-t95); } bfso tbody tr { border-bottom: dashed 2px var(---bc); } bfso:nth-child(2) hd { display: none; } bfso bl { margin-block: 2rem; } bfso ft svg { fill: var(--c); } bfso ft a { display: flex ; justify-content: center; padding: 6px 19px; border: 1px solid var(--c); border-radius: 25px; align-items: center; font-size: 15px; white-space: nowrap; } bfso>bl>ft { display: block ; } bfso ft i { width: 20px; } bfso ft span { display: flex ; align-items: center; } bfso td a { font-size: 14px; font-weight: 400; } bfso td a:nth-child(2) { color: var(--at); display: flex ; align-items: center; } bfso th:nth-child(1) { width: 20px; } bfso bd { display: block; padding: 9px; overflow: scroll;} bfso ft btn { display: flex ; justify-content: center; } bfso ft em { margin-block: 8px; padding: 2px 24px; opacity: .5; font-size: 12px; display: flex ; } bfso bd i { width: 11px; } bfso bd svg { fill: var(--at); }/*Forum_Card*/ cfco { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } cfco bl { margin: -12px -16px 24px; background: var(--am); padding: 24px; border-radius: 8px; } cfco bl hd {display: block ; } cfco bl hd div { display: flex ; gap: 10px;align-items: center; margin-bottom: 24px; } cfco bl hd i { display: block; height: 50px; width: 50px; } cfco bl bd { display: flex ; flex-direction: column; padding: 32px 28px; background: var(--b); border: 1px solid var(---bc); border-radius: 12px; gap: 1rem; } cfco bl bd div { display: flex ; align-items: center;} cfco bl bd i { display: block; } cfco bl bd i { display: block; width: 4%; height: 4%; } cfco bl bd dv { border-bottom: solid 1px var(---bc); } @media only screen and (max-width: 999px) { cfco { padding: 16px; } } } /* --a:#008; --b:rgb(249 249 249); --b-t:rgb(32 33 36 / 44%); --c:#fff; --c0:#65676b; --c1:#008; --bc:rgb(111 111 111 / 10%); --a:#008; --b:#e2ae24; --b-t:rgb(226 174 36 / 44%); --c:#333; --c0:#65676b; --c1:#008; --bc:rgb(18 52 86 / 10%); --lg:linear-gradient(90deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); --lgb:linear-gradient(-45deg,#23a6d5,#23d5ab); --lg1:linear-gradient(177deg, #f0c635, #f0c635, #f0c635, #f0c63522, rgb(187 117 17 / 10%)); --lg-bl:transparent; */ console>bg{background-image: url(/0.jpg);filter: blur(11px);background-size: cover;} content>svg{opacity:0} nav>bg{background:var(--lg1);filter: blur(11px);} nav price{background:transparent} news h4{background:transparent} news marquee{background:transparent;box-shadow:unset} quick{display:none} tr{background:unset} /* Gagan_chohan */ shms chcs { display: grid ; grid-template-columns: 49% 49%; gap: 14px; } scals csals { display: flex ; gap: 13px; margin: 0; } sdls main { width: 100%; } /*(min-width: 999px) */ @media only screen and (min-width: 999px) { .sast { display: grid ; width: 100%; height: 100%; } .sast hm { display: grid ; height: 100%; width: 100%; } .sast aerea { display: grid ; height: 100%; } .sast sidebar { height: 97%; /*position: relative; left: -32px;top: -11px;*/} .sast d.sidebar { height: 74%; } .sast d.main { height: 100%; display: flex ; flex-direction: column; justify-content: space-between; align-items: center; } .sast main { max-width: 928px; } } @media only screen and (max-width: 1320px) { shms chcs{flex-direction: column;} start { width: 243px; } /* /31/1/2025/ */ scals csals { flex-direction: column; height: 100%; } cclo bd>hd{ top: -23px;} cclo bd svg { width: 100%; height: 71px; } cato bd{overflow: scroll;} } cascs{display: flex ; flex-direction: column;width: 100%;overflow-y: scroll; } cgay { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; }db header>h grid { grid-template-columns: 100%; } .details__container { position: relative; padding: 0px 0px 0px; background: #ffffff; border-radius: 0px; } .btn_black { background: var(--a); color: var(--c); } .btn_purple, cdtio ft button { box-shadow: 0 0 5px var(--at); } .sidebar__item.active { background: var(--a); } sound d { font-family: monospace; } .details__container, .page__stat, div.sidebar { backdrop-filter: blur(22px);background: var(--b-t) !important;} .sidebar__close .icon { font-size: 20px; fill: var(--a); } .sidebar__caption { color: var(--a); } .sidebar__item .sidebar__text {color: var(--c); } .sidebar__item svg { fill: var(--c); } .sidebar__item svg { fill: none; } .sidebar__icon .icon { font-size: 21px; fill: var(--c); opacity: 1;} .quality__item { background: var(--b1); padding: 11px; } .widget_stat .widget__title { margin-bottom: 12px; color: var(--c); font-size: 2.5em; font-family: var(--ff3); } .title_md { font-family: var(--ff1); } .bg-blue-light { background: var(--b1); } .title { font-size: 11px;} aa.jrac { color: var(--a) !important; } clgno>ft>aa>spain { color: var(--a); } .dropdown__body { background: var(--b-t22); box-shadow: unset; } .dropdown__title { color: var(--c); } .dropdown__title:before { filter: invert(1); } cwado, deposit main grid bl.active { background: var(--b1); box-shadow: unset; } .dropdown.active .dropdown__head { border-color: var(--a); background: var(--c); color: var(--a); } .sidebar__profile { display: block; background: var(--at); padding: 0px 11px; border-radius: 11px; } .popup .mfp-close { position: absolute; top: 20px; right: 35px; width: 44px; height: 44px; border-radius: 50%; line-height: normal; opacity: 1; font-size: 0; background: ; transition: box-shadow 0.25s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #000; font-size: 33px; padding: 0; display: flex ; align-items: center; justify-content: center; background: var(--aa); color: var(--c); font-family: var(--ff3); } .popup__form > .popup__btn { margin: 11px 0; } .popup__btns { display: grid ; margin: 22px 0 11px; grid-template-columns: 100%; gap: 11px; } .popup__btns .popup__btn { min-width: calc(100% - 0px); } .popup { background: transparent; } .products__payment { font-size: 0.77em; } bl.bl_invest { background: var(--b1); } .card-corner { position: revert !important; } .card-corner::before, .card-corner::after, .card-corner::before, .card-corner::after { left: 1px; padding: 14px; position: relative; right: 0; top: 0; bottom: 0; content: ''; position: absolute; background: url(https://cdn.prod.website-files.com/6654d3c…/666301b…_corner-path.svg) no-repeat; background-repeat: no-repeat; background-size: 40px 40px; background-position: top left, top right, bottom left, bottom right; background-image: url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/666301b9565bc943edac3106_corner-path.svg'), url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6663035da9df92c312bca5fd_corner-path-r.svg'), url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6663035dc75e4face043c32e_corner-path-b-l.svg'), url('https://cdn.prod.website-files.com/6654d3c17b8020f4b7ba121d/6663035dcdcc515bf5ac7a30_corner-path-b-r.svg'); } @media only screen and (max-width: 767px) { .products__cell:nth-child(n+3) { display: block; } .sidebar__logo .sidebar__pic { width: 99px; filter: hue-rotate(137deg); } .dropdown.js-dropdown { width: 168px; margin: 0px 0px 0px 11px;margin-bottom: 0px; } .popup .mfp-close { right: 20px; box-shadow: 0 0px 16px var(--aa); } } chlo { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } chlo hd { display: block; margin-bottom: 0; } chlo hd p { background: var(---ba); padding: 10px 15px; margin: 0 0 25px 0; font-size: 13px; line-height: 1.4; color: var(--b1); border-left: 3px solid var(--p3); } chlo hd h3 { font-size: 15px; font-weight: 600; color: var(--b1); margin: 0 0 5px 0; } chlo hd tx { display: block; font-size: 13px; color: var(--btn11); margin: 0 0 15px 0; } chlo bd { display: block; } chlo bd table th { background: var(---ba); padding: 10px 12px; text-align: left; font-weight: 600; color: var(--b1); border: 1px solid var(--bor); font-size: 12px; } chlo bd table th:nth-child(2){ text-align: center; } chlo bd table th:nth-child(3) { text-align: center; } chlo bd table td { padding: 12px; border: 1px solid var(--bor); vertical-align: top; font-size: 13px; line-height: 1.4; } chlo bd table td:nth-child(1) { color: var(--p4); font-weight: normal; } chlo bd table td:nth-child(2) { text-align: center; color: var(--b1); } chlo bd table td:nth-child(3) { color: var(--btn11); font-size: 12px; } chfs { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } chfs bl hd { display: flex ; justify-content: center; background: var(---ba); padding: 10px 20px; border: solid 1px var(--bor); } chfs bd td { border: 1px solid var(--bor); padding: 8px 10px; text-align: left; font-size: 14px; line-height: 2.4; color: var(--btn11);} chfs bd tbody tr:nth-child(even) { background-color: var(--ba); } chfe { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } chfe bl hd { padding: 0 0 16px 0; margin: 0; } chfe bl hd h2 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color:var(--b1); } chfe bl hd p { margin: 0 0 16px 0; color: var(--btn11); font-size: 14px; line-height: 1.5; } chfe bl bd { padding: 0; margin: 0; } chfe bl bd table { border: 1px solid var(--bor); font-size: 14px;} chfe bl bd table thead tr { background-color: var(---ba); } chfe bl bd table th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--b1); border-right: 1px solid var(--bor); border-bottom: 1px solid var(--bor); font-size: 14px; } chfe bl bd table th:last-child { border-right: none; } chfe bl bd table td { padding: 12px 16px; border-right: 1px solid var(--bor); border-bottom: 1px solid var(--bor); color: var(--b1); font-size: 14px; vertical-align: top; } chfe bl bd table td:last-child { border-right: none; } chfe bl bd table td:first-child { color: var(--p4); } chfe bl bd table tbody tr:last-child td { border-bottom: 1px solid var(--bor); } chfe bl ft { padding: 0; margin: 0; } @media (max-width: 768px) { chfe bl bd { overflow-x: auto; } chfe bl bd table { min-width: 600px; } chfe bl bd table td { padding: 10px 12px; font-size: 13px; } chfe bl bd table th { padding: 10px 12px; font-size: 13px; } }/*:root{ --b:rgb(233 244 255); --b-t:rgb(233 244 255 / 44%); --bs-bl: 0 0 0 0px rgb(200 218 242 / 100%); --lg-bl:#fff; --bs-b:inset 0 0px 4px 0px rgb(0 0 0 / 11%), 0 7px 11px rgb(132 170 254); } */ news{display:none} content>svg{display:none} #CCCCard { background:#6291fe;box-shadow: 0 22px 44px rgb(0 0 0 / 22%);border: solid 1px #bed2ee; border-radius: unset;border-bottom-left-radius: 44px;} #CCCCard svg { display: none; } #CCCCard i svg { display: block; } wallet b { display: unset; font-size: 0.33em !important; } address { text-shadow: unset !important; } header .header { display: none; } quick { display: none; } #Invite{box-shadow: unset; border: solid 4px ; background: transparent; border-radius: unset;} .inviting { border-radius: unset; } #AirdropTask { display: none; } #Buy{background: transparent; box-shadow: unset; border: solid 4 px ; border-radius: unset;} wc>f { box-shadow: unset; background: var(--b); border-radius: unset; } #Sell{background: unset; box-shadow: unset; border-radius: unset; border: solid 4 px ;} wt { border-radius: unset; background: #ebf5ff; border: solid 1px #6291fe;} #wfw { display: grid; grid-template-columns: 49% 49%; grid-gap: 2%; } .zero { box-shadow: unset; border-radius: unset; background: unset; border: unset; text-align: center; justify-content: center; } #Hello { display: flex; font-size: 1em; padding: unset; justify-content: center; margin: unset; } /*grid bl { border-radius: unset;border: solid 1px #bed2ee;}*/ grid .airdrop::before{display:none} @media only screen and (max-width: 999px){ content { top:99px ; } menubar { backdrop-filter: blur(11px); top:44px ; height:40px} } bito { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } bito hd { display: flex ; padding: 16px 20px; background: var(---ba); border-bottom: 1px solid var(--bor); justify-content: space-between; } bito hd h2 { font-size: 16px; font-weight: 600; margin: 0; } bito bd p { font-size: 14px; color: var(--btn11); margin-bottom: 14px; line-height: 1.6; } bito bd { display: block; padding: 20px; padding-top: 10px; } bito bd table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; } bito bd table thead { background-color:var(---ba); } bito bd table th { padding: 12px 10px; text-align: left; color:var(--b1); font-weight: 600; border-bottom: 1px dashed var(--btn11); } bito bd table td { padding: 12px 10px; border-bottom: 1px dashed var(--btn11); color:var(--btn11); vertical-align: middle; } bito bd table td:nth-child(2) { display: flex; align-items: center; } bito bd table td span { background: var(---ba); color: var(--p4); font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-left: 10px; font-weight: 500; } bito ft { display: flex; justify-content: center; padding: 20px; } bito ft btn { padding: 8px 20px; font-size: 14px; font-weight: 500; border: 1px solid var(--b1); border-radius: 24px;display: flex; align-items: center; gap: 8px; } bito ft btn i { height: 20px; width: 20px; } bito ft btn svg { fill: var(--b1); } bipo { display: block; min-width: 213px; border: 1px solid var(--aat); border-radius: 12px; padding: 20px 16px 32px; margin-block: 20px; } bipo hd svg { width: 16px; height: 16px; } bipo>bl>hd { display: flex ; align-items: center; gap: 6px; } bipo bd p { margin-block-end: 0; } bips bd>div { display: flex ; gap: 20px;overflow: scroll;} bips ft i { width: 20px; } bips ft span { display: flex ; justify-content: end; color: var(--p4); opacity: unset; } bips ft svg { fill: var(--p4); } cifo bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); } cifo hd { padding: 12px; display: block; border-bottom: solid 1px var(--bor); } cifo h2 { font-size: 18px; font-weight: 600; } cifo bd { margin-block: 20px; display: block; padding: 0px 20px; } cifo bd div { display: flex ; flex-direction: column; gap: 4px; } cifo a { color: var(--p4); font-weight: 400; } @media(max-width:999px){ cifo a {font-size: 14px;} } cico>bl>hd { padding: 20px 24px 0 24px; display: block; } cico hd h1 { font-size: 18px; font-weight: 600; margin-bottom: 16px; line-height: 1.4; } cico hd div { display: flex ; gap: 16px; border-bottom: 1px solid var(--bc); } cico hd div span { padding: 12px 0px; font-size: 14px; } cico.Opportunities hd div span:nth-child(1):nth-child(1) { color: var(--p4); border-bottom: solid 2px var(--p4); } cico>bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); } cico bd i { width: 25px; } cico svg { fill: var(---b); } cico>bl>bd { padding: 20px; display: block; } cico bd btn { display: flex ; border: solid 1px var(--p4); padding: 11px 14px; color: var(--p4); font-size: 15px; align-items: center; font-weight: 500; } cico bd more { display: flex ; justify-content: center; margin-block: 3rem; } cico ft div { display: flex ; justify-content: space-between; align-items: center; } cico ft dv { display: flex ; align-items: center; gap: 12px; font-size: 14px; } cico ft d { display: flex ; gap: 16px; align-items: center; } cico ft { padding: 16px 24px; border-top: 1px solid var(---bc); border-radius: 0 0 8px 8px; display: block; } cico ft d btn { display: flex ; align-items: anchor-center; } cico ft dv btn,cico ft dv bt { border-radius: 20px; padding: 7px 8px; border: 1px solid var(--bor); } cico ft dv bt:hover { background: var(--or); } cico ft dv btn:hover { background: var(---gn); } cico dv span:nth-child(1) { font-weight: 500; opacity: unset; } cico dv span {opacity: .5;} cico bd btn svg { fill: var(--p4); } cico bd btn i { transform: rotate(92deg); } cico bd li:nth-child(2) d { background: var(--a5); } cico ft btns { display: flex ; align-items:center; gap: 6px; } cico.Campus01 cmps { display: block; } cico.Campus01 hd span:nth-child(2) { color: var(--p4); border-bottom: solid 1px var(--p4); } cico.Culture hd span:nth-child(3) { color: var(--p4); border-bottom: solid 1px var(--p4); } cico.Academic hd span:nth-child(4) { color: var(--p4); border-bottom: solid 1px var(--p4); } cico.Security hd span:nth-child(5) { color: var(--p4); border-bottom: solid 1px var(--p4); } cico.Opportunities coto { display: block; } cico.Culture csce { display: block; } cico.Academic baco { display: block; } cico.Security csuo { display: block; } coto { display: none; } @media(max-width:999px){ cico hd div { overflow: scroll; } cico div span { white-space: nowrap; } cico ft btns {gap: 4px; } cico ft dv { align-items: flex-start; flex-direction: column; } cico ft d { gap: unset; } } cipl d { display:flex; justify-content:end; } cipl t.jtc { color: var(--p4); } bmco { display: none; } cipl.more bmco { display: block; } cieo { display: none; border-radius: 11px; padding: 0; } cieo bd { display: block;padding: 20px 24px; } cieo bd span { color: #666; font-size: 12px; } cieo ft { display: block; font-size: 11px; color: var(--btn11); padding-top: 5px; border: none;} cieo bd dv div::before { display: block; width: 12px; height: 12px; content: ""; border-radius: 50px; margin-right: 6px; line-height: 1.6; background: var(---gn);} cieo bd ul { padding: 0px 20px; margin: 0; } cieo bd div { display: flex ; font-size: 12px; line-height: 1.6; padding: 4px 0 4px; align-items: center;} cieo ft p { padding: 4px 0 12px; font-size: 12px; line-height: 1.6; margin: 0; } cieo bd p { color: var(--b1); font-size: 14px; line-height: 1.6; } cieo bd li { margin-bottom: 12px; } cdee.Infrastructure cieo {display: block;} cifq { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } cifq hd h2 { padding: 0px 16px; background: var(--b); font-size: 1rem; margin: 6px 0px 4px; color: var(--b1); font-weight: 600; } cifq bd { display: flex; flex-direction: column; gap: 12px; padding: 16px; } cifq bd dv { display: flex ; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--b); border: 1px solid var(--bor); border-radius: 8px; } cifq bd h3 { display: flex ; font-size: 14px; margin: 0; font-weight: 500; color: var(--b1); } cifq bd dv::after { content: '+'; font-size: 18px; font-weight: bold; color: color: var(--btn11);; } cips hd i { width: 30px; } cips>bl>hd { display: flex ; align-items: center; gap: 8px; } cips span { font-size: 13px; opacity: .6; } cips hd h4 { font-weight: 500; } cips ft svg { fill: var(---b1); width: 20px;} cips ft div { display: flex ; justify-content: space-between; background: var(---sy); padding: 11px; align-items: center; border-radius: 6px; } cips>bl>ft { margin-block: 21px; display: block; } cips btns { display: flex ; align-items: center; gap: 9px; } cipo>bl { display: block; max-width: 700px; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px; } cipo hd>i { width: 20px; /*transform: rotate(265deg);*/ } cipo svg { fill: var(--b1); } cipo>bl>hd { display: flex ; justify-content: space-between; border-bottom: 1px solid var(--bor); padding-bottom: 22px; } cipo hd span { display: flex ; align-items: center; gap: 4px; font-size: 16px; opacity: .7; } cipo hd b { display: block; width: 6px; height: 7px; background: var(--b1); border-radius: 20px; } cipo ft btns { display: flex ; justify-content: center; gap: 21px; } cipo ft i { width: 22px; height: 22px; } cipo ft btn.Green { background: var(---gn); color: var(--b); border:0; } cipo ft { border-top: solid 1px var(--bor); display: block; padding-top: 2rem; } cipo ft svg { fill: var(--b); } cipo ft btn { display: flex ; white-space: nowrap; align-items: center; border-radius: 20px; border: solid 1px var(--b1); padding: 8px 5px; } ciro>bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); } ciro h2 { padding: 12px 16px; border-bottom: 1px solid var(--bor); display: block; } ciro bd>div { padding: 16px; display: flex ; justify-content: space-between; } ciro ft i { width: 12px; } ciro ft p { display: flex ; margin: 0; } ciro ft span { display: flex ; color: var(---gn); } ciro>bl>ft { padding: 16px 20px; border-top: 1px solid var(---bc); display: block; } @media(max-width:999px){ ciro { padding: 8px; display: block; } ciro bd>div { display: block; } } cisc>bl { flex-wrap: wrap; gap: 16px; padding: 16px; display: flex ; box-shadow: 0 2px 10px var(---bc); background: var(--lg-bl); border: 1px solid var(--bor); } cisc hd>i { height: 100px; width: 100px; border: solid 1px var(--bor); padding: 12px; } cisc bd i { width: 20px; height: 20px; } cisc bd svg { fill:var(--or); } cisc bd d { display: flex ; align-items: center; gap: 6px; margin: 0; } cisc bd stars {display: flex ; gap: 1px; } cisc>bl>bd { display: flex ; align-items: center; flex: 1; gap: 20px; } cisc bd b { background: var(--b1); color: var(--b); width: 36px; height: 36px; border-radius: 21px; display: flex ; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } cisc bd dv { display: flex ; flex-direction: column; align-items: center; justify-content: center; min-width: 100px; height: 60px; border: 2px dashed var(--bor); padding: 15px; } cisc ft btn { background: var(--or); padding: 7px 21px; color: var(--b); border-radius: 2px; } cisc bd h3 { font-size: 16px; font-weight: 500; } cisc>bl>ft { display: flex ; align-items: center; } @media(max-width:999px){ cisc>bl>bd { align-items: unset;flex-direction: column; } } cice>bl { background: var(---b); border: 1px solid var(--bor); border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px var(---bc); } cice bd i { height: 100px; width: 100px; border: solid 1px var(--bor); padding: 12px 20px; margin: auto; border-radius: 0; } cice bd d { display: flex ; align-items: center; gap: 6px; margin: 0;justify-content: center; } cice bd stars { display: flex ; gap: 1px; } cice d i { width: 20px; height: 20px; border: 0; padding: 0; } cice bd svg { fill: var(--or); } cice bd b { background: var(--b1); color: var(--b); width: 36px; height: 36px; border-radius: 21px; display: flex ; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; } cice bd h3 { font-size: 11px; } cice bd div { flex: 1; text-align: center; font-size: 12px; } cice>bl>bd { display: flex ; flex: 1; } cice ft btn { background: var(--or); padding: 7px 21px; color: var(--b); border-radius: 2px; } cice bl a { display: flex ; align-items: center; justify-content: center;margin-block: 18px;} cice bd b { background: var(--b1); color: var(--b); width: 36px; height: 36px; border-radius: 21px; display: flex ; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; top: 36px; position: relative; } bics>bl>bd { display: grid ; grid-template-columns: 1fr 1fr; gap: 20px; } @media(max-width:999px){ bics>bl>bd { display: block; overflow: scroll; } cice>bl {max-width: 380px; min-width: 380px;margin-block: 20px; } } ciis { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); } ciis h2 { font-size: 1rem; font-weight: 600; line-height: 22px; color: var(--b1); } ciis ul { margin-top: 10px; padding: 0; list-style: unset; } ciis ul li { list-style: none; margin-bottom: 7px; } ciis ul a { color: var(--p1); font-size: 14px; line-height: 21px; font-weight: 400; } ciqo bl { margin-block: 1rem; display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); } ciqo i { width: 20px; height: 20px; } ciqo svg { fill: var(--b1); } ciqo hd div { display: flex ; justify-content: space-between; padding: 10px 0 0; margin-bottom: 13px; } ciqo hd { display: block; padding-bottom: 20px; border-bottom: solid 2px var(--bc); } ciqo hd d,ciqo dv a{ display: flex ;gap: 14px;} ciqo bd { display: flex ; gap: 20px; padding-block: 20px; } ciqo bd div { display: flex ; flex-direction: column; } ciqo bd dv { display: flex ; gap: 17px; align-items: center; } ciqo ft a { font-weight: 400; opacity: .5; } ciqo ft { display: flex ; justify-content: center; border-top: solid 2px var(--bc); padding-top: 18px; } ciqo bd a { text-transform: uppercase; font-weight: 500; font-size: 14px; } ciqo ft a:hover { text-decoration: underline; } ciqo hd btn { border: solid 1px var(--bor); padding: 4px 18px; } ciqo span { font-size: 13px; opacity: .8; } ciqo d i { border: solid 1px var(--bor); padding: 5px 7px; border-radius: 0; } ciqo hd a { font-weight: 500; } ciqo bd b { font-size: 23px; font-weight: 500; background: var(---bc); height: 30px; padding: 12px 18px; } /* Component : Introduction */ cido>bl { display: block; border: 1px solid var(--bc); padding: 11px; border-radius: 7px; } cido hd { display: grid ; grid-template-columns: 12% 16% auto; align-items: center; transition: 333ms; margin-bottom: 22px; } cido hd h3 { font-size: 1em; font-weight: 600; } cido hd:hover b i { opacity: 1; } cido hd b i { opacity: 0; } cido path { fill: var(--b1); } cido hd i { width: 18px; height: 18px; } cido hd span { display: flex ; align-items: center; column-gap: 7px; } cido hd b { display: flex ; justify-content: space-between; } cido hd ii { display: flex ; column-gap: 7px; margin-left: 7px; } cido bd { display: block; } cido bd d { display: flex ; border-radius: 7px; } cido bd i { width: 18px; height: 18px; } cido bd d { display: grid ; grid-template-columns: 15% 18% auto; align-items: center; border: 1px solid var(--bc); padding: 11px; transition: 333ms; } cido bd f { display: flex ; align-items: center; column-gap: 7px; } cido bd span { display: flex ; align-items: center; column-gap: 7px; } cido bd b { display: flex ; justify-content: space-between; align-items: center; } cido bd ii { display: flex ; column-gap: 7px; } cido bd dv { display: flex ; justify-content: space-between; align-items: center; column-gap: 7px; } cido bd dv btn { display: flex ; align-items: center; border: 1px solid; color: var(--a); padding: 7px 11px; column-gap: 7px; border-radius: 5px; transition: 333ms; } cido bd dv btn:hover { background: rgb(111 43 255 / 11%);; } cido bd sp { display: block; width: 24px; height: 24px; } cido bd>btn { display: flex ; width: max-content; column-gap: 11px; padding: 7px 11px; border: 1px solid; color: var(--a); border-radius: 4px; margin-top: 11px; transition: 333ms; } cido bd>btn:hover { background: rgb(111 43 255 / 11%);; } cido bd b ii>i { opacity: 0; } cido bd dv>i { opacity: 0; } cido bd d:hover ii>i { opacity: 1; } cido bd d:hover dv>i { opacity: 1; } @media (max-width: 999px){ cido bd d { grid-template-columns: auto 55%; } cido bd span { grid-column-start: 1; grid-column-end: 2; } cido hd { display: block; line-height: 24px; margin: 0; } } bino { display: block;text-align: center; } bino bl { margin: 0 auto; max-width: 47.5rem; padding: 20px 20px; } bino i { width: 22%; } bino bl hd { display: flex ; justify-content: center; margin: 7rem 0 1rem; } bino bl bd { display: grid ; margin: 2rem auto .25rem; width: 20rem; } bino bd svg { fill: var(--p3); } bino bd i { height: 17px; width: 17px; } bino bl btn { display: flex ; justify-content: center; align-items: center; gap: 5px; margin-block-start: 16px; border-radius: 20px; padding: 5px 19px; font-size: 12px;} bino bd dv { display: flex ; justify-content: center; } bino bl btn span {color: var(--p3);} bino bl btn:hover {background: var(---bc);} @media (max-width: 768px) { bino i { width: 60%; } } bico { display: block; max-width: 456px; margin: 40px auto; font-family: Arial, sans-serif; border-radius: 8px; box-shadow: 0 -2px 12px -1px var(--btn10); padding: 20px; } bico hd {display: block; margin-bottom: 20px; } bico hd p { font-size: 16px; margin: 0;} bico bd { display: block; } bico bd p { font-size: 13px; top: 9rem; position: relative; opacity: .7; } bico bd div:nth-of-type(2) { height: 80px; margin-bottom: 20px; } bico ft { display: flex ; justify-content: flex-end; gap: 20px; margin-top: 10rem; border-top: solid 1px var(--bor); } bico ft span{ font-size: 14px;margin-block: 15px; opacity: .7;} bico ft span:nth-child(1) { color: var(--p3); } bico bd input {font-weight: 100; width: 100%; font-size: 14px; padding: 8px 0; border: none; border-bottom: 1px solid var(--bor); outline: none; border-radius: unset; bottom: 1rem; position: relative;} bico bd div { height: 80px; margin-bottom: 20px; } @media (max-width: 640px) { bico {margin: 8px; } } blno hd,blno bd,blno ft { display: block; } blno div { display: flex ; justify-content: space-between;} blno b { width: 5px; height: 5px; display: block; background: var(--b1); border-radius: 21px; align-items: center; } blno d { display: flex ; align-items: center; gap: 6px; } blno img { border-radius: unset; } blno i {width: 100px;height: 69px;} blno hd>dv,blno bd>dv,blno ft>dv { padding: 9px 7px; display: block; } blno a { font-size: 13px; } blno span { opacity: .4; font-size: 14px; } crld { display: flex; flex-direction: column; gap: 14px; } crld hd { display: flex ; justify-content: space-between; align-items: center; color: var(--b1); } crld btn { border: 1px solid #eae7ee; padding: 5px 12px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; } crld d { display: block; } crld h3 { font-weight: 500; font-size: 16px; } crld bd { display: flex ; gap:22px; overflow: scroll; } crlst ft { display: flex ; align-items: center; flex-wrap: wrap; } seae { display: grid; grid-template-columns: auto 17px; align-items: center; padding: 4px 5px; gap: 8px; height: auto; min-width: auto; padding-left: 13px; } seae h5 { font-size: 16px; font-weight: 500;color:var(--c) } seae i#your { display: flex ; align-items: center; justify-content: center; background: #6F2BFF; border-radius: 50%; padding: 2px; margin: 0px 11px; height: 15px; width: 15px; } crlst { display: block; max-width: 320px; min-width: unset; margin: 10px; } crlst dtmn { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } crlst dt { display: flex ; justify-content: center; align-items: center; gap: 10px; } crlag mn {width: 18px;} crlst bd>p { color: var(--c); font-size: 14px; margin: 1px 0 14px 0px; } crlst { display: block; max-width: 320px; min-width: 300px; margin: 0px; } crlst btn {border:1px solid #eae7ee;padding:5px 10px;border-radius:11px;font-size:13px;color:#6f2bff;background:#f1eaff;font-weight:500;} crlst bl { box-shadow: var(--bxs1); display: flex; flex-direction: column; padding: 10px 9px; justify-content: center; border: var(--bs2); border-radius: 11px; position: relative; } crlst bd { display: block; margin: 5px 0px; } crlst divider { width: 100%; display: flex ; border: 1px dashed #eae7ee; } crlst ft { display: flex ; align-items: center; } #your img { width: 50%; margin: auto; } crlst seae>i { width: auto; height: auto; } @media only screen and (max-width:430px) { crlst bl { max-width: unset; } crlst { width: 100%; max-width: 374px; } crlst seae { width: 100%;padding: 2px 16px; } crlst dtmn { margin: 6px 0px; } } /* Component : Learn */ clrn>bl { display: block; padding: 22px; border: 1px solid var(--bc); margin: 22px auto; max-width: 688px; border-radius: 7px; } clrn hd { display: block; margin-bottom: 11px; } clrn hd h2 { font-size: 1.22em; font-weight: 600; } clrn bd { display: grid ; grid-template-columns: 49% 49%; gap: 11px; } clrn bd d { display: flex ; column-gap: 11px; } clrn bd i { width: 14px; height: 14px; } clrn bd t { font-size: 0.88em; font-weight: 500; } @media only screen and (max-width: 999px) { clrn bd { grid-template-columns: 100%; } } lrsd {display: flex ; border: 1px solid #EAE7EE; border-radius: 11px; position: relative; padding: 17px; color: var(--b1);} lrsd bl { display: flex ; flex-direction: column;width: 100%; } lrsd hd { display: flex ; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 15px;} lrsd hd h1 { font-size: 16px; font-weight: 500; } lrsd cbmi p { font-size: 14px; margin: auto; font-weight: 500; margin-right: 4px; } lrsd cbmi button { display: flex ; align-items: baseline; padding: 6px 8px; border: 1px solid #EAE7EE; border-radius: 8px;cursor: pointer; position: relative;} lrsd cbmi { display: flex ; align-items: center; height: auto; } lrsd bd { display: flex ; flex-direction: column; } lrsd ccy { display: flex ; justify-content: space-between; padding-bottom: 9px; } lrsd h2 { font-size: 16px; font-weight: 500; } lrsd cddt { display: flex ;padding-bottom: 14px; } lrsd cdy { display: flex ; flex-direction: column; align-items: center; margin-left: 7%; transition: all 0.3s ease;} lrsd cdy p { font-size: 16px; font-weight: 400;margin: 3px 0px; } lrsd cdy h3 { font-size: 16px; font-weight: 500;width: 22px; border-radius: 17px; padding: 4px 4px; display: flex ; justify-content: center; } lrsd blr { display: flex ; gap:7px; } lrsd cdy.leftt{transform: translateX(10px); opacity: 0;} lrsd cdy.rightt{transform: translateX(-10px); opacity: 0;} /*hover*/ lrsd cdy h3:hover { background-color: #6F2BFF; color: white; cursor: pointer;} lrsd cdy h3.active {background-color: #6F2BFF; color: white; cursor: pointer;} lrsd ft { display: flex ; flex-direction: column; } lrsd tody { display: flex ; align-items: center; padding-bottom: 9px} lrsd tody h4 { font-size: 14px; font-weight: 400; } lrsd tody cdc { border: 1px dotted #EAE7EE; width: 92%; } lrsd fdvs { display: flex ; width: 100%; background-color: #F7F4FA; margin: auto; border-radius: 5px; box-shadow: 0px 0px 1px #0000006b; padding: 6px 0px 6px 2px; position: relative; } lrsd dcyi { display: flex ; align-items: center; } lrsd ydn { display: flex ; flex-direction: column;align-items: start; gap:3px;} lrsd ydn h6 { font-size: 14px; font-weight: 500; margin: auto; } lrsd ydn p { font-size: 11px; margin: 0; color: #594173; } lrsd dcyi img { width: 22px; height: 39px; } lrsd ydn yi { display: flex ; } lrsd yi img { width: 18px; height: 31px; } lrsd yi img.yimg { margin-left: -5px; } lrsd button#btjoin { display: flex ; background-color: var(--a); color: white; margin: auto; border-radius: 12px; width: 46px; height: 30px; font-size: 12px; align-items: center; justify-content: center;cursor: pointer;cursor: pointer; outline: unset; border: 0; } lrsd fdvs::after { content: ''; display: flex ; width: 5px; position: absolute; background: #6F2BFF; left: 1; height: 100%; border-radius: 12px 0px 0px 22px;top:0; } lrsd .btnlf { cursor: pointer; height: fit-content; } lrsd .btnlf i { width: auto; border: 1px solid var(--bor); } lrsd .btnrt { background: #F1EAFF; border-radius: 4px; cursor: pointer; height: fit-content; } lrsd .btnlf svg { fill: black; width: 29px; } lrsd .btnrt svg { width: 31px; height: 32px; fill: black; } /* 21/01/2025 */ lrsd #clander { position: absolute; top: 0; left: 0; height: 29px; width: 50px; z-index: 11; opacity: 0; } bmco strong { font-weight: 500; } dnvbr { position: relative; display: flex; } dnvbr gg { width: 100%; display: flex ; justify-content: space-between; align-items: center; padding: 9px 11px;border-bottom: 1px solid #bfb3b3; background-color: #fff;color: #000000;} nav hd { display: flex ; align-items: center; gap: 11px; } dnvbr gg bl { display: flex ; align-items: center;} dnvbr gg logo.mnu { display: none; } .mnu svg { width: 27px; } dnvbr gg ac { position: absolute; display: flex ; height: 7px; background: #ff0000eb; width: 7px; border-radius: 50%; top: 4px; right: -2px; border: 2px solid #ffffff; z-index: 1;} dnvbr gg hd h2 { font-size: 24px; line-height: 120%; font-weight: 500; } dnvbr gg bl bd { display: grid ; grid-template-columns: 22px auto 44px 45px; align-items: center; background-color: #F7F4FA; border-radius: 10px; padding: 8px 8px 8px 14px; } dnvbr gg tx { display: inline-block; font-size: 16px; } dnvbr gg input[type="srarch"] { outline: 0; border-radius: 4px 7px; display: block; max-width: 100%; border: 0; background: transparent; width: calc(100% - 58px); padding: 0 9px; font-weight: 400; height: 100%; color: #000000; } dnvbr gg bl svg { width: 27px; fill: var(--b1);} dnvbr line { display: flex ; width: 1px; background-color: #a9a9a9; height: 32px; margin: 0 20px; } dnvbr ft { display: flex ; align-items: center; gap: 7px; } dnvbr gg bl bd a { display: flex ; border-radius: 7px; align-items: center; justify-content: center; } dnvbr gg bl bd a svg { width: 39px; height: 40px; } dnvbr .csbs svg { fill: var(--bg); } dnvbr gg wr { display: flex ; align-items: center; } dnvbr gg wr img { width: 28px; height: 28px; } dnvbr a { height: auto; width: 55px; margin: auto; } dnvbr gg ft hd svg { height: 36px; width: 36px; } dnvbr gg ft bd { display: block; background-color: transparent; padding: unset; border-radius: unset; } dnvbr gg ft bd h4 { font-size: 16px; font-weight: 500; line-height: 120%; } dnvbr gg ft bd tx { display: inline-block; font-size: 14px; } dnvbr gg bl ft logo img { width: 18px; height: 18px; } dnvbr gg bl ft a { text-decoration: none; margin-left: 11px; } gg i { width: fit-content; height: fit-content; } dnvbr img { width: 33px; } /* dnvbr///////@media only screen and (max-width:999px) { */ @media only screen and (max-width:999px) { dnvbr gg bl bd { display: none; } dnvbr gg { padding: 8px 11px 8px 16px; width: 100%; } dnvbr gg logo.mnu {display: flex;} dnvbr gg hd h2 {display: none;} dnvbr gg wr a { margin: 0px 4px 0px 4px;} dnvbr gg wr /*{align-items: unset;}*/ dnvbr line { display: flex ; height: 26px; margin: 3px 11px; } line.iln { display: none; } nav {left: 0; } content { position: relative; left: 0; } } /* 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; } /*Incomes*/ @media screen and (min-width: 999px) { main cdtio bd div cpwco:nth-child(4) { grid-column-start: 2; grid-column-end: 4; } main cdtio bd div cpwco:nth-child(5) { grid-column-start: 1; grid-column-end: 3; } main cdtio bd div cpwco:nth-child(8) { grid-column-start: 2; grid-column-end: 4; } main cdtio bd div cpwco:nth-child(9) { grid-column-start: 1; grid-column-end: 4; } } withdraw out withdraww bl { background: var(--bt); } buy transactions trcs> h4 { font-size: 1.33em; font-weight: 700; } Transactions trc>hd { height: 44px; width: 44px; background: var(--b1); border-radius: 55%; padding: 5px; } .invest transactions div trc { padding:16px 22px;align-items: center;grid-template-columns: 66px auto auto; } Transactions trc img { filter: hue-rotate(45deg); } in trcs>trc>bd h4 symbol { font-size: 14px; font-weight: bold; } .invest transactions div trc h4 { margin: 2px 0; } .invest transactions div trc h6 { margin: 2px 0; } community refered trc.user { background: var(--bt); box-shadow: unset; } refered trc>hd img { border-radius: 11px; } .D trcs>trc { padding: 22px; } cm sidebar grid bl { background: var(--b1); } /*refered*/ community sidebar { top: 55px !important; } crdo { display: grid; background: var(--lg); padding: 22px; border-radius: 11px; color: var(--c); } crdo hd { display: grid; margin-bottom: 11px; } crdo hd i { width: 66px; height: 66px; margin: auto; margin-bottom: 11px; } crdo hd h3 { font-size: 1em; font-weight: bold; text-align: center; } crdo bd { display: grid; } crdo bd btns { display: flex ; overflow-x: scroll; column-gap: 11px; margin-top: 11px; } crdo>hd>h2>cc { font-weight: 400; font-size: 0.66em; opacity: 0.7; letter-spacing: 0.44px; } crdo>hd>p { margin: 2px 0; font-weight: 400; opacity: 0.7; } crdo>hd>h2>b { font-family: "Rajdhani", serif; line-height: 0.66em; font-size: 1.11em; text-transform: uppercase; background: linear-gradient(3deg, var(--at), var(--a)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } crdo bd btns btn { display: grid; } crdo bd btns btn i { width: 18px; height: 18px; margin: auto; background: var(--b1); padding: 11px; border-radius: 44px; margin-bottom: 11px; } crdo bd btns btn>i>svg { fill: var(--b); } crdo bd btns btn t { font-size: 0.55em; font-weight: 500; width: max-content; margin: auto; } ctmo b h3 { font-size: 0.77em; text-align: center; margin-top: 5px; font-weight: 500; } ctmo b { background: var(--a1); padding: 11px; border-radius: 9px; color: var(--b); } ctmo aa { text-align: center; display: block; font-size: 2.44em; font-weight: 500; line-height: 1.44em; } @media only screen and (max-width: 1344px) { stos d.aerea { flex-flow: wrap-reverse; } stos sidebar, stos main { min-width: 100%; width: 100%; } } /* Deposit */ cccs>bd>bl { display: none; } cccs { display: block; transition: 333ms; background: var(--b1); box-shadow: 0 0px 0px 0px var(--b1); border-radius: 0px; position: relative; margin: 7px; padding: 11px; } cccs>bd { margin-bottom: 44px; } cccs mg { display: flex; height: 55px; padding: 0 11px; align-items: center; } cccs mg aa { display: block; padding: 7px 22px; font-size: 0.88em; font-weight: 400; transition: 333ms; margin-right: 5px; } cccs mg aa h4 { padding: 7px; } cccs pbl { display: grid; background: var(--b1); padding: 11px; border-radius: 11px; grid-template-columns: 70% 30%; align-items: center; } cccs pbl p { margin: 7px 0; color: var(--a); } cccs histry hd { height: 44px; margin-top: 11px; display: flex!important; align-items: center; justify-content: space-between; } cccs trdng { margin-top: 22px; display: block; } cccs trdng bd,cccs histry bd { display: flex !important; gap: 7px; padding: 11px 0 !important; } cccs trdng a,cccs histry a{ background: var(--b1); padding: 4px 11px; border-radius: 7px;font-weight: 100; } coins cpt { display: grid ; grid-template-columns: 77px auto 111px; color: var(--c); position: relative; margin: 11px 0; padding: 5px 0; background: #ffff; } cdwlo>p { margin: 4px 11px; font-size: 0.77em; } cdwlo { display: block; padding: 11px 0px; position: relative; margin-bottom: 22px; border-radius: 22px; } coins cpt>hd { height: 55px; width: 55px; border-radius: 15px; background: var(--c0); margin: auto; display: flex; align-items: center; justify-content: center; } coins cpt>hd img { object-fit: contain; height: 66%; width: 66%; } coins cpt>bd { display: flex; flex-direction: column; justify-content: center; } coins cpt>ft { display: flex; flex-direction: column; justify-content: center; align-items: end; } cccs .cashs next svg { fill: var(--b); } cdwlo:hover { background: #6C5DD3; color: #ffffff; } cdwlo:before { content: ""; position: absolute; top: 100%; left: 24px; right: 24px; height: 0; border-radius: 0 0 8px 8px; background: #CFC8FF; transition: height 0.25s; } cdwlo img.quality__pic { height: 66%; width: 66%; } cdwlo:hover .title { color: #ffffff; } cdwlo:hover svg.icon.icon-arrow-right { fill: #ffffff; } cdwlo:hover:before { height: 6px; } cdwlo a.quality__item { margin-bottom: 0 !important; } cdwlo:hover .quality__info { color: #ffffff; } .cryptos bl.cryptos { border-radius: unset; background: transparent; padding: 11px 0; position: relative; display: block; } .cashs bl.cashs { position: relative; transition: 333ms; padding: 11px; display: block; } cccs .cashs inrpp { display: block; position: relative; border-radius: 0; margin: 7px 0; } inrpp a.files__item .files__details { width: auto; flex: 0 0 calc(88% - 48px); } cccs .cashs inrpp hd { height: 55px; width: 55px; border-radius: 15px; margin: auto; display: flex ; align-items: center; justify-content: center; } cccs inrpp hd img { object-fit: contain; height: 77%; width: 77%; } cccs .cashs inrpp bd { display: flex !important; flex-direction: column; justify-content: center; } cccs .cashs inrpp ft { display: flex; flex-direction: column; justify-content: center; align-items: end; } cccs .cashs next { display: flex; height: 33px; width: 33px; align-items: center; justify-content: center; background: var(--a); border-radius: 555px; padding: 1px; } cash csh { display: grid; grid-template-columns: 66px auto 111px; color: var(--c); border-radius: 11px; position: relative; margin: 11px 0; padding: 11px; background: var(--b1-t44); } cash csh>hd { height: 55px; width: 55px; border-radius: 15px; background: var(--c0); margin: auto; display: flex; align-items: center; justify-content: center; } cash csh>hd img { object-fit: contain; height: 66%; width: 66%; } cash csh>bd { display: flex; flex-direction: column; justify-content: center; } cash csh>ft { display: flex; flex-direction: column; justify-content: center; align-items: end; } cccs mg aa.this { background: var(--b-t22); border-radius: 11px; } deposit main grid bl.active { box-shadow: 0 0px 12px 2px rgba(227, 230, 236, 0.6); border-radius: 22px; padding: 22px; background: #ffffff; } cwado adrs p { width: 100%; display: block; overflow: hidden; margin: auto; overflow-wrap: anywhere; } bl.depositinfo.active:active { transform: unset; } cwado {grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 11px; align-items: center; justify-content: space-between; transition: 99ms; margin: 0;} deposit bl.Network { grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 11px; align-items: center; justify-content: space-between; margin: 0; transition: 99ms; } deposit bl.Spotwallet { grid-template-columns: auto 22px; display: grid; gap: 2%; padding: 11px; align-items: center; justify-content: space-between; margin: 0; transition: 99ms;} bl.depositinfo { grid-template-columns: 100%; display: grid; gap: 2%; padding: 11px; margin: 0; align-items: center; justify-content: space-between; border-radius: 11px; } deposit main grid { padding: 11px; gap: 11px; } bl.active:active { transform: scale(0.9); } screen#depositUSDT main { min-height: unset; } coins cpt>ft>btn { font-size: -webkit-xxx-large; height: 44px; width: 44px; place-content: center; } cccs>hd { display: flex ; align-items: center; justify-content: space-between; background: var(--at); padding: 4px 0px; border-radius: 11px; } cccs>hd>btns { display: flex ; align-items: center; } cccs btns>.btn { min-width: auto; height: 44px; width: 44px; padding: 0; border-radius: 55%; margin: 4px; place-content: center; } cccs btns>.btn:hover { box-shadow: 0 5px 10px rgba(227, 230, 236, 0.6); } /* QR Component */ cpqro { box-shadow: unset; border-radius: 7px; padding: 22px; background: var(--b1); display: block; } cpqro>hd { display: block; color: var(--c); padding: 22px; padding-top: 0; padding-left: 0px; } cpqro>bd>qr { margin-bottom: 22px; max-height: 227px; height: auto; width: auto; background: var(--b1); display: grid ; object-fit: cover; padding: 22px; border-radius: 22px; min-height: 227px; place-content: center; } cpqro>bd>qr>img { margin: auto; display: block; height: 95%; width: 95%; } cpqro>ft>p { width: 100%; display: block; overflow: hidden; margin: auto; text-align: center; overflow-wrap: anywhere; opacity: 0.66; color: var(--c); } @media only screen and (max-width: 999px) { cpqro { margin: 11px; } } /* Copy Wallet Address component */ cwado { display: block; padding: 22px; transition: 99ms; margin: 0; background: #ffff; box-shadow: 0 3px 10px rgba(227, 230, 236, 0.6); border-radius: 22px; } cwado>hd { display: grid ; grid-template-columns: auto 55px; align-items: center; } cwado>hd>.btn { min-width: auto; height: 33px; width: 33px; border-radius: 55%; padding: 5px; place-content: center; margin: auto; } cwado>hd>.btn:hover { box-shadow: 0 5px 10px rgba(227, 230, 236, 0.6); } cwado>hd>.btn:active { background: rgb(108, 93, 211); } cwado>bd>adrs { display: block; padding: 11px 0; font-weight: bold; font-size: 1.44em; color: rgb(108, 93, 211); white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } cwado>hd>.btn:active svg { fill: #ffff; } /* Fiat component */ cfato { display: block; padding: 22px; background: #ffff; margin: 22px auto; box-shadow: 0 5px 10px rgba(227, 230, 236, 0.6) !important; border-radius: 22px; } cfato>hd>d { display: grid ; grid-template-columns: 44px auto; align-items: center; height: 44px; } cfato d>i { margin: auto; } cfato>bd>input { padding: 7px 0; font-size: 2em; font-weight: bold; font-family: system-ui; background: var(--bc); text-align: center; color: rgb(108, 93, 211); grid-column-end: 3; grid-column-start: 1; width: 100%; border-radius: 11px; margin: 4px 0; border: solid 1px var(--aat); margin-bottom: 11px; } cfato>ft mthds>div { display: flex ; padding: 11px 22px; justify-content: space-between; } cfato bl>div>p { font-size: 0.77em; margin-top: 7px; display: block; text-align: center; } cfato>bd>p { font-family: monospace; } cfato f>aa { background-image: url(); background-size: 100% 100%; background-position: 50%; position: absolute; width: 35%; left: 0; top: 25%; bottom: 25%; display: flex ; justify-content: center; align-items: center; transition: 77ms; } #INRDepositSubmit svg { fill: var(--b); max-height: 77%; max-width: 77%; } invoice gd { display: grid; grid-template-columns: auto 99px; height: 44px; align-items: center; border-bottom: solid 0.5px var(--bc); padding: 0 22px; width: calc(100% - 44px); } invoice gd { font-family: monospace; } cfato>bd>f>aa:nth-child(2) { font-size: 1.23em; font-weight: bold; color: var(--b); height: 55px; display: flex ; justify-content: center; align-items: center; background: rgb(108, 93, 211); border-radius: 11px; width: 95%; margin: auto; margin-top: 22px; position: unset; } cfato>ft>bl d { margin: auto; display: grid ; grid-template-columns: 44px auto; margin-top: 22px; margin-bottom: 11px; align-items: center; width: max-content; } csh { display: block; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--bc); } /* TOTAL BALANCE */ cwtbo { display: block; background:var(--b1); margin-bottom: 5px; overflow: hidden; } cwtbo d>b { font-weight: 500; font-size: 0.77em; } cwtbo balance { height: auto; display: flex ; align-items: center; gap: 1%; font-size: 1.33em; } cwtbo>bd>p { margin: 4px 0; } cwtbo>balance>b { font-weight: 500; font-size: 1.33em; } cwtbo>ft { display: grid ; grid-template-columns: 40% 40% auto; padding: 22px; background:var(--a); backdrop-filter: blur(22px); } cwtbo>ft p { margin: 4px 0; font-size: 0.66em; } cwtbo ac1 { margin: auto; } cwtbo ac1>bb {width: 55px; height: 26px; color: #ffff; overflow: hidden; position: relative; box-shadow: unset;} cwtbo bo { transition: 777ms; } cwtbo oo { background: #ffff; height: 18px; width: 18px; } cwtbo>hd>btns>.btn { min-width: auto; height: 33px; display: block; width: 33px; border-radius: 55%; place-content: center; padding: 4px; position: relative; margin: 4px; } cwtbo>hd>btns>.btn:hover { top: -5px; } cwtbo>hd>btns { display: flex ; align-items: center; justify-content: end; } cwtbo>hd { display: flex ; margin-bottom: 0px; padding: 7px 22px; align-items: center; justify-content: space-between; } cwtbo>hd btn svg { fill: #fff; } .HideBalance oo {margin-left: 30px; box-shadow: -2px 1px 10px rgb(151 177 229 / 96%); background: #7c76d3; } cwtbo.HideBalance bo { background: #ffffff; } cwtbo.HideBalance blc { -webkit-text-security: circle; letter-spacing: 1px; filter: blur(1px); } cwtbo blc>h4 { font-weight: 500; font-size: 1.44em;font-family: "OffBit [bold]", sans-serif; } cwtbo>bd { display: block; padding: 22px; height: auto; } @media only screen and (max-width: 999px) { cwtbo { margin: 11px; } cwtbo>ft { padding: 33px 22px; font-size: 1.22em; } cwtbo>hd { padding: 22px; } } /*Trancation*/ .dropdown.js-dropdown { width: 355px; } input.sorting__input { display: none; } @media only screen and (max-width: 999px) { .dropdown.js-dropdown { width: 177px; } } /* Wallet spot */ cwlso { display: block; padding: 7px; background: var(--b1); border-radius: 22px; margin: 11px; } cwlso p { margin: 0; } cwlso h3 { display: flex; gap: 2px; font-weight: 400; } cwlso h3>i { height: 22px; width: 33px; } cwlso balance { display: flex ; gap: 2px; font-size: 1.3em; align-items: center; padding: 11px; font-weight: 600; } cwlso balance inr { font-weight: 700; } cwlso btns>btn.btn { display: block; min-width: auto; height: auto; padding: 11px; background: var(--a); color: var(--c); font-weight: 500; text-align: center; border-radius: 7px; margin-top: 11px; font-family: var(--ff1); } cwlso>bl>bd { text-align: center; padding: unset; } /* Himanshu */ @media only screen and (min-width: 999px){ db d.main .widget__body { display: grid ; grid-template-columns: 50% 50%; } } @media only screen and (max-width: 999px){ db d.main .widget__flex:nth-child(even) .widget__desc { grid-column-end: 2; display: grid ; grid-column-start: 2; grid-row-start: 1; } db d.main .widget__flex:nth-child(even) { display: grid ; } } db d.main .widget__body { height: fit-content; } /* Dashboard */ db grid { grid-template-columns: 49% 49%; gap: 2%; } db grid .widget { height: auto; max-height: 400px; margin: 0; margin-top: 44px; } ssdo .details__container { margin: 11px; } db main .page__stat.page__stat_sm { margin: 0; margin-top: 11px; } db header>h>.header { min-width: auto; position: relative; max-width: unset; display: block; margin: 11px; height: auto; padding: 0; border: none; } db .page__col { padding: 1px 0px 0px; } screen home header { position: relative; backdrop-filter: unset; max-width: 100%; margin: 0 auto; } @media only screen and (max-width: 999px) { screen home header { max-width: 100%; margin: 0; } .header { height: auto; display: block; } db .header { display: flex; height: 96px; margin: 0 -16px; padding: 0 32px; } } @media only screen and (min-width: 999px) { .owl-carousel.owl-drag .owl-item { width: 646px; } db main { width: 88%; max-width: 744px; backdrop-filter: unset !important; overflow: visible; } db d.main { padding: 11px; } db d.sidebar { padding: 11px; } /*db sidebar { max-width: 415px; min-width: 400px; }*/ } @media only screen and (max-width: 999px) { db grid { grid-template-columns: 100%; gap: 0; } .owl-carousel.owl-drag .owl-item { width: 424px; } .page__widgets:not(:last-child) { display: block; } .page__widgets { display: block; } db d.main { margin: 0 11px; } db d.sidebar { margin: 0 11px; padding: 11px 0; padding-bottom: 0; margin-bottom: 0; } } @media only screen and (max-width: 999px) { .widget_shadow .widget__body { mask-image: unset; } .widget__head { height: 44px; } .widget_shadow .widget__body { height: 292px; } db grid .widget { max-height: 400px; margin-top: 11px; } } nfbtn { margin-right: 25px; } .sidebar__item svg { fill: #808191; height: 22px; width: 22px; } .sidebar__item:hover svg { fill: #6C5DD3 !important; } .sorting__action:hover { box-shadow: 0 5px 10px rgba(227, 230, 236, 0.6) !important; } stos .details__container { margin: 11px; } /* Community Template */ cm .page__nav { margin: 0; padding: 44px; } cm .details__container { margin: 11px; box-shadow: 0 10px 20px rgba(227, 230, 236, 0.6); } .products__table .products__row { box-shadow: 0px 1px 0px 0px #00000012; } cm .sorting__input { width: calc(100% - 0px); } cm .sorting__action:hover { box-shadow: 0 5px 10px rgba(227, 230, 236, 0.6) !important; } cm .products__preview { border-radius: 55%; width: 66px; height: 66px; place-content: center; justify-items: center; } cm .products__preview>img.products__pic { height: 77%; width: 77%; } @media only screen and (max-width: 999px) { cm .widget { margin: 11px; } cm .page__nav { border-bottom: 1px solid var(--bc); padding: 15px 22px; box-shadow: 0 22px 6px rgb(227 230 236 / 22%); } .field__input, .field__textarea { width: calc(100% - 0px); } } @media only screen and (max-width: 999px) { .field__input, .field__textarea { width: calc(100% - 44px); } } /* Wallet Template */ ssdo .sorting__input { width: 100%; } ssdo d.aerea { max-width: 100%; } @media only screen and (min-width: 999px) { wallet sidebar { padding: 11px 22px; } wallet main { padding: 11px 22px; } } /*Transactions*/ .widget__chart_items { display: grid ; justify-content: center; } .title_md { font-size: 2em; } @media only screen and (max-width: 999px) { strs d.header { display: block; height: 66px; } strs header gg { display: grid ; grid-template-columns: 55px 44px 50% 55px 44px; } .widget__chart_items>svg { height: auto; width: auto; } .products_statement .products__col:first-child { flex: 0 0 33%; } .products__body { margin: 22px; } } @media only screen and (max-width: 999px) { .ForDesktop { display: none; } .ForPhone { display: block; } } @media only screen and (min-width: 999px) { .ForDesktop { display: block; } .ForPhone { display: none; } } /* Withdraw New Component */ cwdro { display: block; background: var(--b1); box-shadow: 0 0px 21px var(--b1); overflow: hidden; border-radius: 22px; padding: 22px; position: relative; } cwdro>hd>d { display: grid ; grid-template-columns: 44px auto; align-items: center; height: 44px; } cwdro wlt { display: block; min-height: 123px; } cwdro wlt>f { display: block; margin: 11px 0; } cwdro wlt h2 { display: flex ; align-items: center; } cwdro wlt h2>b { letter-spacing: 2px; font-size: 0.77em; opacity: 0.7; } cwdro wlt h2 trx { font-size: 1.44em; } cwdro wlt>f>t { text-transform: uppercase; font-weight: 500; font-size: 0.788em; } cwdro>bd>sl { border: unset; position: relative; margin: 22px 0; overflow: visible; } cwdro>bd>sl>label { top: -33px; position: absolute; left: 15px; pointer-events: none; transform: translateY(1rem); transition: 150ms cubic-bezier(0.4,0,0.2,1); z-index: 99999; border-radius: 11px; padding: 7PX 11PX; font-size: 0.88em; font-weight: 500; } cwdro>bd>sl>input { padding: 9px 0; font-weight: bold; font-family: system-ui; text-align: center; grid-column-end: 3; grid-column-start: 1; width: 100%; border-radius: 11px; margin: 4px 0; border: solid 1px rgb(255 255 255 / 11%); background: var(--b-t22); } cwdro adrs { 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%); display: flex ; } cwdro>ft>btn { font-weight: 500; color: var(--c); height: 48px; display: flex ; justify-content: center; align-items: center; background: var(--a); border-radius: 11px; width: 88%; margin: 0 auto; margin-top: 11px; } cwdro>ft>btn svg { fill: var(--b); max-height: 77%; max-width: 77%; } cwdro bg { opacity: 0.22; filter: blur(11px); } cwdro bg img { opacity: 1; transform: scale(0.88); filter: hue-rotate(212deg); height: 100%; } /* Total Withdraw */ cttwo>d { display: grid ; grid-template-columns: 44px auto; align-items: center; height: 44px; } cttwo>d>i { margin: auto; } cttwo { display: block; padding: 22px; border-radius: 22px; background: var(--c0); box-shadow: 0 0px 10px var(--c0); margin-top: 11px; } cttwo>d t h3 { font-size: 1.22em; font-weight: 500; } @media only screen and (max-width: 999px) { cwdro { margin: 11px; } cttwo { margin: 11px; } } /*Stake*/ grid bl { display: grid ; box-shadow: 0 0px 14px var(--b); border-radius: 22px; padding: 22px; margin: 7px 11px; position: relative; } .bl_invest bg { opacity: 0.22; z-index: -1; filter: blur(11px); justify-content: center; } .bl_invest bg img { opacity: 1; transform: scale(0.88); filter: hue-rotate(212deg); } grid bl hd { display: flex ; align-items: center; } grid bl hd i { width: 24px; height: 24px; display: inline-block; margin-right: 11px; } grid bl bd { display: block; padding: 11px; } grid bl bd h4 { font-size: 0.88em; font-weight: bold; } grid bl bd p { font-size: 0.88em; font-weight: 500; margin: 7px 0; } grid bl bd f trx { font-size: 2em; font-weight: bold; } grid bl bd f t { font-size: 0.88em; font-weight: 500; margin-left: 11px; } grid bl bd bt { display: none; } aa#StakeNow { background: var(--a); } BuyOne input { padding: 7px 0; font-size: 2em; color: var(--c); font-weight: bold; font-family: system-ui; background: #fff6; text-align: center; grid-column-end: 3; grid-column-start: 1; width: 100%; border-radius: 11px; margin: 4px 0; border: solid 1px #fff; margin-bottom: 11px; } #StakeNow { font-size: 1.23em; font-weight: bold; color: var(--b); font-family: system-ui; height: 55px; display: flex; justify-content: center; align-items: center; background: linear-gradient( 133deg, var(--a), var(--a1)); border-radius: 11px; width: 95%; margin: auto; margin-top: 11px; } #StakeNow svg { fill: var(--b); max-height: 77%; max-width: 77%; } in new wc>f { align-items: center; background: var(--c0); margin: 0 7px; border: solid 2px #fff; border-radius: 11px; box-shadow: var(--bs-b); margin:4px;display: grid; grid-template-columns: 44px auto;font-weight: bold;height:40px} in new wc>f>input { height: 77%; } /* Withdraw */ cwtrs trcs>trc { grid-template-columns: 66px auto 111px; background: rgb(255 255 255 / 4%); border-radius: 0; border-bottom: 1px solid var(--bc); margin-bottom: 22px; } cwtrs trc>hd { height: 55px; width: 55px; border-radius: 15px; } cwtrs { display: block; padding: 11px; margin: 11px; background: #fffffF; box-shadow: 0 0px 21px rgba(227, 230, 236, 0.6); border-radius: 22px; } .sidebar__burger{background: #ffffff;} bnso>bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); padding: 20px; border-radius: 15px; } bnso hd h2 { font-size: 14px; margin-block: 6px; } bnso hd btn { display: block; padding: 7px 14px; border-radius: 24px; border: solid 1px var(--b1); font-size: 14px; } bnso hd div { display: flex ; gap: 19px; } bnso ft btn { display: flex ; white-space: nowrap; padding: 7px 11px; border-radius: 20px; border: solid 1px var(--b1); font-size: 14px;align-items:center;} bnso ft a { display: flex ; justify-content: center; } bnso ft svg { fill: var(--b1); } bnso.Latest hd btn:nth-child(1) { background: var(--b-t); border: solid 1px var(--b1); } bnso.Popular hd btn:nth-child(2) { background: var(--b-t); border: solid 1px var(--b1); } bnso.Latest blns { display: block; } blns { display: none; } bpns { display: none; } bnso.Popular bpns { display: block; }/*NewsUpdates*/ cnuo { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } cnuo>bl>hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } cnuo bd btn { padding: 4px 23px; border: 1px solid var(---bc); font-size: 15px; border-radius: 20px; } cnuo bd btns { display: flex ; gap: 12px; } cnuo ft a { display: flex ; justify-content: center; padding: 6px 19px; border: 1px solid var(--c); border-radius: 25px; align-items: center;font-size: 15px; } cnuo ft svg { fill: var(--c); } cnuo ft i { width: 30px; } cnuo bd btn:nth-child(1) { background: var(--b-t); border: 1px solid var(--b1); } cnuo ft { margin-block: 1rem 16px ; display: block; } cnuo ft a:hover { background: var(--b1); color: var(--b-t95); } cnuo hd i { width: 40px; }/*News_List*/ cnlo>bl>hd { display: flex ; padding-bottom: 16px; justify-content: space-between; padding-top: 20px; flex-direction: column; gap: 7px;border-bottom: 1px solid var(---bc); } cnlo hd a { font-size: 14px; font-weight: 500; } cnlo bl span { font-size: 14px; opacity: .4; font-weight: 500; } cnlo bd dv { display: flex ; justify-content: space-between; flex-direction: column; gap: 7px; } cnlo bd a { font-size: 14px; font-weight: 500; } cnlo bd div{ padding-bottom: 16px; padding-top: 20px; border-bottom: 1px solid var(---bc); display: flex ; } cnlo bd img { border-radius: 6px; object-fit: cover; } cnbo hd dv { display: flex ; align-items: center; gap: 8px; margin-bottom: 16px; } cnbo span { display: flex ; white-space: nowrap; align-items: center; font-size: 14px; opacity: .4; } cnbo hd i { width: 12px; height: 11px; } cnbo svg { fill: var(--b1); } cnbo span:nth-child(3) { opacity: unset; } cnbo bl { display: block; } cnbo h2 { font-size: 28px; margin-block: 11px; color: var(--b1);} cnbo bd { display: block; border-bottom: solid 1px var(---bc); } cnbo ft i { width: 36px; height: 32px; background: var(--a1); padding: 13px 15px; border-radius: 8px;} cnbo ft { flex: 1; display: flex ; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 60px 20px; } cnbo p { font-size: 18px; color: var(--btn11); } @media(max-width:999px){ cnbo hd { display: flex ; } cnbo hd dv {margin-bottom: unset; } cnbo bl {padding: 9px; } } codo { display: none; } scso.Classwork codo { display: block; } codo>bl { margin: 0 auto; max-width: 47.5rem; padding: 20px 20px; } codo btn i { width: 20px; height: 20px; } codo btn svg { fill: var(--b); } codo hd dv { display: flex ; padding: 7px 11px; } codo btn { padding: 8px 14px; display: flex ; background: var(--p4); border-radius: 20px; box-shadow: 0 1px 2px 0 var(--0), 0 2px 6px 2px var(--bor); color: var(--btn7); align-items: center; } codo hr { display: flex ; margin-block: 20px; } codo bd dv { display: flex ; justify-content: center; margin: 7rem 0 1rem; } codo i { width: 30%; } codo bd p { text-align: center; margin-block-start: 0; margin-block-end: 5px; font-size: 12px; font-weight: 400; line-height: 1.25rem; opacity: .8; } @media(min-width:999px){ codo bd p:nth-child(3) { margin: 0 auto 2rem; max-width: 36%; } } @media(max-width:999px){ codo bd p {font-size: 14px;} } coto hd span {display: flex;} coto bd ul { list-style: none; padding: 0; } coto bd li { margin-bottom: 16px; } coto ul d { padding: 12px; background: var(---p1p); box-shadow: 0 0 1px var(---p1p); border-radius: 4px; display: flex ; flex-direction: column; } core { display: none;border-radius: 11px; padding: 0; } core bd { display: block;padding: 20px 24px; } core bd span { color: #666; font-size: 12px; } core ft { display: block; font-size: 11px; color: var(--btn11); padding-top: 5px; border: none;} core bd dv div::before { display: block; width: 12px; height: 12px; content: ""; border-radius: 50px; margin-right: 6px; line-height: 1.6; background: var(---gn);} core bd ul { padding: 0px 20px; margin: 0; } core bd div { display: flex ; font-size: 12px; line-height: 1.6; padding: 4px 0 4px; align-items: center;} core ft p { padding: 4px 0 12px; font-size: 12px; line-height: 1.6; margin: 0; } core bd p { color: var(--b1); font-size: 14px; line-height: 1.6; } core bd li { margin-bottom: 12px; } cdee.Other core { display: block; } coro bd i {width: 20px;} coro bd d { display: flex ;justify-content: center; } coro bd svg { fill:var(--or); } coro bd dv { display: block; margin-top: 15px;text-align: center;} coro bd span { font-size: 38px; } coro hd span:nth-child(1) {font-size: 19px;font-weight: 500;} coro p { font-size: 15px; opacity: .4; } coro hd span:nth-child(2) { opacity: .4; } @media(max-width:999px){ coro bd dv {text-align: unset;} coro bd d { display: flex ; justify-content: flex-start; } } coso>bl { display: block; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px;margin-block: 20px; } coso>bl>hd { display: flex ; justify-content: space-between; border-bottom: solid 1px var(---bc); padding-bottom: 20px; margin-bottom: 24px; } coso hd i { width: 20px; height: 20px; } coso hd svg { fill: var(--b1); transform: rotate(89deg); } cipl { display: none; } coso.IP cipl { display: block; } cple { display: block; border-radius: 8px; overflow: hidden; max-width: 700px; margin: 40px auto; } cple hd { display: block;padding: 12px 16px;} cple hd div { display: flex ; justify-content: space-between; } cple hd dv { display: flex; align-items: center; gap: 8px; } cple hd dv:nth-child(2) svg { fill: var(--p4); } cple hd dv:nth-child(2) span { color: var(--p4); } cple hd span {font-weight: 500; font-size: 14px; line-height: 20px; opacity: unset; } cple bd th:nth-child(1) { text-align: left; font-weight: 600; padding: 12px 16px; } cple bd table { width: 100%; border-collapse: collapse; font-size: 14px; } cple bd th { color: var(--b1);text-align: left; font-weight: 600; padding: 12px 16px; } cple bd td { padding: 12px 16px; border-top: 1px dashed var(--bor); vertical-align: top; } cple tag { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--b); padding: 2px 8px; font-weight: 600; background: var(--p3); border: 1px solid var(--p4); border-radius: 4px; } cple bd b { color: var(--b1); font-weight: 500; } cple bd td:nth-child(2) {color:var(--btn11); } cple i { width: 20px; height: 20px; } plcr { display: flex ; justify-content: center; align-items: center; border: 1px solid #EAE7EE; padding: 16px 16px; border-radius: 13px; box-shadow: var(--bs-bs); position: relative; background-color: var(--b-t95);color: var(--c);} plcr bl { display: flex ; flex-direction: column; } plcr hd { display: flex ; flex-direction: column; } plcr h1 { font-size: 16px; color: var(--b1); font-weight: 500; margin: 0px 0px 7px 0px; } plcr ctm { display: flex ; } plcr ctm p { font-size: 13px; font-weight: 500; color: #594173; gap: 4px; display: flex ; margin: 2px 0px; } plcr ctm aa { color: black; font-weight: 600; } plcr bd { display: flex ; flex-direction: column; } plcr bs { display: flex ; gap: 10px; width: 100%; position: relative; padding: 0; justify-content: start; } plcr cbg { width: 20%; height: 13px; background-color: #6F2BFF; border-radius: 5px; } plcr hra { background-color: #1AECD2; width: 30%; border-radius: 4px; height: 13px; } plcr ni { width: 40%; height: 13px; background: #22ACFF; border-radius: 4px; } plcr cb { display: flex ; gap: 16px; padding: 10px 2px; } plcr cbp { display: flex ; } plcr cba { display: flex ; } plcr cbe { display: flex ; } plcr cbp c { width: 15px; border: 2px solid #6F2BFF; border-radius: 18px; height: 15px; } plcr cba c { width: 15px; border: 2px solid #22ACFF; border-radius: 18px; height: 15px; } plcr cbe c { width: 15px; border: 2px solid #1AECD2; border-radius: 18px; height: 15px; } plcr cbe p { font-size: 13px; margin: auto; margin-left: 6px; color: #594173; } plcr cba p { font-size: 13px; margin: auto; margin-left: 6px; color: #594173; } plcr cbp p { font-size: 13px; margin: auto; margin-left: 6px; color: #594173; } plcr ft p { font-size: 15px;margin: auto; } cmcna hd ft { display: block; position: relative; font-size: 14px; } /* Personalized ///////@media only screen and (max-width:13) { */ @media only screen and (max-width:1320px) { plcr { max-width: 420px;} } cpte bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem;padding: 24px;} cpte hd { display: block; } cpte hd h2 { margin: 0; font-size: 20px; font-weight: bold;} cpte hd p {color: var(--btn11); font-weight: 400; line-height: 1.375rem; } cpte bd { display: block; border-top: 1px solid var(--bor); padding-top: 10px; } cpte bd dv { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 15px; font-weight: 500; } cpte bd dv p { margin: 0; color: var(--btn11); } cpte i{width: 24px;} cpte svg{fill :var(--b1);} cpmo>bl { display: block; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px; } cpmo h2 i { width: 37px; } cpmo h2 {display: flex;gap: 13px;} cpmo a { font-weight: 400; color: var(--p3); } cpmo span { font-weight: 400; color: var(--b1); } cpmo p { font-size: 14px; font-weight: 300; } cprt {display: block; margin: 30px auto; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; padding: 20px;} cprt>bl>hd { display: block; } cprt hd div { display: flex ; align-items: center; position: relative; margin-bottom: 8px; gap: 12px; } cprt hd div span { font-size: 18px; font-weight: 600; color: #2d0c45; } cprt hd p { font-size: 14px; color: var(--btn11); } cprt>bl>bd { display: block; padding: 10px 12px; position: relative; } cprt bd t { display: block; position: absolute; right: 0; color: var(--p4); } cprt>bl>ft { display: block; margin-block-start: 2rem; background: var(---ba); padding: 10px 15px; border-radius: 8px; } cprt ft btn { display: flex; justify-content: space-between; align-items: center; } cprt ft btn span { font-size: 14px; color: var(--btn11); } cprt ft btn dv { display: flex; gap: 10px; } cprt svg { fill: var(--b1); } cprt hd i { display: block; background-image: url(/-/School/asset/uilplcon12.png); width: 42px; height: 42px; border-radius: 6px; background-size: contain; } cprt ft i {height: 18px; width: 18px;} cprt.Statistics ctse { display: block; } cpto th { width: 24%; padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b); text-align: justify; } cpto tbody tr { border-bottom: dashed 2px var(---bc); } cpto td:nth-child(4) { border-right: 0; } cpto td{ border-right: solid 1px var(--bc);} cpto ft span { display: flex ; justify-content: space-between; align-items: center; flex: 1 0 43%; padding: 14px; } cpto ft div { display: flex ; border-radius: 7px; flex-wrap: wrap; margin-bottom: 32px; background: var(--a5); border-bottom: dashed 2px var(--bor); } cpto ft span:nth-child(1) {border-right: dashed 1px var(--bor); } cpto ft strong { font-weight: 500; } cpto>bl>bd { overflow: scroll; display: block; } cpse bd { display: block; padding: 20px 24px; } cpse bd dv { display: block;} cpse bd dv h3 { display: block; align-items: center; margin: 0 0 -2px 0; font-size: 16px; font-weight: 600; color: var(--b1); } cpse bd dv ul { padding: 0px 20px; margin: 0; } cpse bd dv li {margin-bottom: 12px;} cpse bd dv p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--b1); } cpse bd dv span { font-size: 12px; color: var(--btn11); margin-left: 4px; } cpse bd div { display: flex ; font-size: 12px; color: var(--btn11); line-height: 1.6; padding: 4px 0 12px; align-items: center; } cpse bd dv div::before { display: block; width: 12px; height: 12px; content: ""; border-radius: 50px; margin-right: 6px; line-height: 1.6; background: var(--rd); top: 2px; position: relative;} cpse bd dv:nth-child(1) div::before{background:var(---gn);} cdee.Placements cpse { display: block; } cpse { display: none; } @media (max-width: 768px) { cpse bd { padding: 16px 20px; } } /*Polls*/ cpol { display: block; padding: 16px; background: var(---sy); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 1rem; } cpol bd input[type="checkbox"] { width: 15px; } cpol bd dv { display: flex ; justify-content: space-between; margin-block: 12px;} cpol bd { min-height: 250px; display: flex ; flex-direction: column; justify-content: center; border-bottom: dashed 1px var(--at); } cpol bd div { display: flex ; align-items: center; background: var(--b-t95); margin-bottom: 6px; border-radius: 6px; justify-content: space-between; border: 2px solid var(---sy); padding: 2px 12px; height: 31px;} cpol bd span { font-size: 14px; } cpol hd p { font-size: 20px; } cpol hd dv { display: flex ; } cpol hd i { width: 22px; height: 20px; } cpol bd d { display: flex ; gap: 8px; background: 0; align-items: center; } cpol bd btn { display: flex ; background: var(--c); color: var(--b); padding: 6px 48px; border-radius: 20px; width: 100px; margin: auto; justify-content: center;margin-bottom: 20px; } cpol ft dv:nth-child(1) { display: flex ; align-items: center; } cpol dv i { width: 20px; } cpol ft p { font-size: 13px; font-weight: 500; } cpol ft dv:nth-child(2) { display: flex ; background-color: var(--b-t95); border-radius: 20px; padding: .5rem 8px 1rem; } cpol ft input { height: 20px; } cpol bd span:nth-child(3) b { width: 11px; height: 11px; display: block; background: var(--b); border-radius: 20px; } cpol bd span:nth-child(3) { background: var(--rd); color: var(--b); padding: 7px 16px; border-radius: 20px; display: flex ; gap: 5px; align-items: center; } cpol ft svg { fill: var(--c0); } cpol ft d { display: flex ; background: 0; justify-content: center; gap: 20px;} cpol ft d span { display: flex ; align-items: center; margin-top: 15px;font-size: 12px;} cpol d span:nth-child(1) i { transform: rotateZ(181deg); } cpol d i { width: 20px; height: 22px;} bpno hd,bpno bd,bpno ft { display: block; } bpno div { display: flex ; justify-content: space-between;} bpno b { width: 5px; height: 5px; display: block; background: var(--b1); border-radius: 21px; align-items: center; } bpno d { display: flex ; align-items: center; gap: 6px; } bpno img { border-radius: unset; } bpno i {width: 100px;height: 69px;} bpno hd>dv,blno bd>dv,blno ft>dv { padding: 9px 7px; display: block; } bpno a { font-size: 13px; } bpno span { opacity: .4; font-size: 14px; }/* Dashboard Only Desktop css */ @media only screen and (min-width: 999px) { } /* Dashboard Only phone css */ @media only screen and (max-width: 999px) { crld { padding: 0px; width: 100%; } crlst { max-width: 407px; margin: 11px 0px;} dtcs { width: 87%; } dtcs poat dt { justify-content: space-between; gap: 2px;} dtcs smte dt { justify-content: space-between; gap: 2px;} dtcs atge dt { justify-content: space-between; gap: 2px;} /* AI_Writer Only phone css */ saiw .AI_Writer { margin: 0px } cawmn ft { display: flex ; align-items: center; } stcs {grid-template-columns: auto; padding: 0px; justify-content: center;} stcs cawc { max-width: 88%; } /* Teachers# Only phone css */ tsnt { overflow: scroll; gap: 15px; } tsnt hd a {width: max-content; justify-content: center; } tsnt bd { padding: 6px 12px; } ctch hd>a { height: 17px; width: 17px; margin-right: 6px; } ctchs { max-width: 405px; } /* Course Only phone css */ ccds { padding: 0px; } main>d>scrs {justify-content: center; width: 100%} main>d>scrs ccurs { min-width: 321px; } } cpbio { display: block; } cpbio bl {display: grid ; padding: 22px; border-radius: 22px; box-shadow: 0px 0px 10px 3px var(--bc); margin: 11px;} cpbio hd, cbio bd, cbio ft { margin-bottom: 22px; } cpbio h3 { margin-bottom: 16px; font-size: 18px; color: var(--c); } cpbio p { font-size: 13px; line-height: 1.6; border: solid 1px var(--bc); padding: 11px; border-radius: 11px; } cpbio btn { display: inline-block; background: #00337e17; color: var(--a); border-radius: 11px; padding: 8px 16px; margin: 6px 6px 0 0; font-size: 13px; } cpbio ft d { display: flex; flex-direction: column; gap: 11px; } cpbio bd>d { display: flex ; flex-flow: wrap; } cpbio ft d d { display: grid ; grid-template-columns: 22px auto; align-items: center; box-shadow: 0px 0px 0px 1px rgb(232 232 232); padding: 8px 11px; border-radius: 11px; } cpbio ft d i svg { fill: var(--b1); } cpbio ft d input { background: transparent; font-size: 13px; height: 22px; font-weight: 600; } cpbio ft d i { height: 22px; } cpbio btn.btn { display: block; background: var(--0); color: var(--c); text-align: center; box-shadow: 0px 0px 0px 1px rgb(232 232 232); border-radius: 7px; margin: 11px 0; } cpbio btn { display: grid ; background: #00337e17; color: var(--a); border-radius: 11px; padding: 8px 16px; margin: 6px 6px 0 0; font-size: 13px; grid-template-columns: auto 22px; align-items: center; } cpbio bd btn i { height: 22px; width: 22px; } cpbio bd btn i svg { fill: var(--a); } cpbu { display: block; } cpbu bl {display: grid ; padding: 22px; border-radius: 22px; box-shadow: 0px 0px 10px 3px var(--bc); margin: 11px;} cpbu hd, cbio bd, cbio ft { margin-bottom: 22px; } cpbu h3 { margin-bottom: 16px; font-size: 18px; color: var(--c); } cpbu p { font-size: 13px; line-height: 1.6; border: solid 1px var(--bc); padding: 11px; border-radius: 11px; } cpbu ft d { display: flex; flex-direction: column; gap: 11px; } cpbu bd>d { display: flex ; flex-flow: wrap; } cpbu ft d d { display: grid ; grid-template-columns: 22px auto; align-items: center; box-shadow: 0px 0px 0px 1px rgb(232 232 232); padding: 8px 11px; border-radius: 11px; } cpbu ft d i svg { fill: var(--b1); } cpbu ft d input { background: transparent; font-size: 13px; height: 22px; font-weight: 600; } cpbu ft d i { height: 22px; } cpbu btn.btn { display: block; background: var(--0); color: var(--c); text-align: center; box-shadow: 0px 0px 0px 1px rgb(232 232 232); border-radius: 7px; margin: 11px 0; } cpbu bd btn { display: grid ; background: #00337e17; color: var(--a); border-radius: 11px; padding: 8px 16px; margin: 6px 6px 0 0; font-size: 13px; grid-template-columns: auto 22px; align-items: center; } cpbu bd btn i { height: 22px; width: 22px; } cpbu bd btn i svg { fill: var(--a); } cpbu btns { display: grid ; grid-template-columns: auto auto; width: fit-content; margin-top: 22px; } cpbu btns btn { display: grid ; padding: 7px 16px; background: var(--lgaa); margin-right: 11px; border-radius: 7px; font-size: 13px; color: var(--b); } cpbu btns btn:nth-child(1) { background: var(--bor); } bpso { display: block; max-width: 800px;} bpso row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bor); padding: 8px 0; } bpso b { width: 30px; } bpso span { flex: 1; color: var(--p4);} bpso bar { flex: 1; background: #eee; height: 6px; border-radius: 4px; margin: 0 10px; position: relative; overflow: hidden; } bpso fill { display: block; height: 100%; background: var(--p4); border-radius: 4px; } bpso bl hd { display: block; border: 0; } bpso hd row:nth-child(1) fill { width: 100%; } bpso hd row:nth-child(2) fill { width: 69%; } bpso hd row:nth-child(3) fill { width: 20%; } bpso hd row:nth-child(4) fill { width: 13%; } bpso hd row:nth-child(5) fill { width: 12%; } bpso hd row:nth-child(6) fill { width: 10%; } bpso hd row:nth-child(7) fill { width: 9%; } bpso hd row:nth-child(8) fill { width: 8%; } bpso hd row:nth-child(9) fill { width: 7%; } bpso hd row:nth-child(10) fill { width: 4%; } bpso score { width: 30px; text-align: right; font-size: 14px;} bpso bl bd { padding-top: 10px; text-align: center; } bpso bl ft { display: flex ; justify-content: center; bottom: 1rem; position: relative; } bpso ft dv { display: flex ; align-items: center; gap: 8px; border-radius: 4px; padding: 4px 8px; font-size: 14px; } cpns>bl { display: block; background: var(--b-t95); border-radius: 7px; box-shadow: 0 2px 10px var(---bc); } cpns>bl>hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bc); padding: 22px; } cpns hd h2 { font-size: 24px; font-weight: bold; } cpns bd i { width: 24px; height: 24px; margin: 3px; } cpns bd d { display: grid ; grid-template-columns: 28px auto; border: 1px solid var(--bc); padding: 14px; border-radius: 11px; column-gap: 11px; } cpns bd { display: block; padding: 22px; } cpns bd>dv { display: grid ; border: 1px solid var(--bc); padding: 14px; border-radius: 7px; margin-top: 22px; } cpns bd p { margin: 7px 0; font-size: 0.88em; font-weight: 500; } cpns bd label { display: grid ; border: 1px solid var(--b1); align-items: center; max-inline-size: 48rem; border-radius: 4px; grid-template-columns: 92% 8%; } cpns bd input { width: auto; border-right: 1px solid var(--b1); border-radius: 7px 0px 0px 7px; background: transparent; } cpns bd btn { display: grid ; align-items: center; justify-content: center; height: 100%; width: auto; border-radius: 0 7px 7px 0;} cpns a { font-size: .88em; font-weight: 500; text-decoration: underline; color: var(--a); } cpns bd t { display: block; font-weight: bold; color: var(--a); } cpns bd btn:hover { background: var(--aat); } cpns bd label:hover { background: var(--bc); } cpns ft { display: block; padding: 22px; } cpns ft d { display: grid ; border: 1px solid var(--bc); padding: 14px; margin-top: 4px; } cpns ft>dv>d { justify-content: center; } cpns ft label { display: flex ; justify-content: space-between; margin-top: 22px; opacity: unset; } cpns p a { font-size: 1em; } @media only screen and (max-width: 999px) { cpns bd label { border: unset; grid-template-columns: unset; } cpns bd input { border: 1px solid var(--b1); border-radius: 7px; margin-bottom: 7px; } cpns bd btn { border: 1px solid var(--a); border-radius: 4px; } } /*Question_card*/ bqco { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } bqco bl hd { display: block; font-weight: bold; font-size: 18px; margin-bottom: 10px; } b bqco d { display: block;border-radius: 8px; padding: 12px; } bqco bd span { display: block; font-size: 12px; margin-bottom: 6px; } bqco bd p { font-size: 14px; line-height: 1.5; margin: 0; } bqco bd b { color: var(--at); font-weight: normal; font-size: 14px; display: inline-block; margin-top: 8px; } bqco bl ft { display: block; margin-top: 10px; } bqco bl ft { display: block; margin-top: 12px; } bqco ft div { display: flex; align-items: center; gap: 10px; } bqco ft span:first-child { display: inline-flex; justify-content: center; align-items: center; background-color: #e0e0e0; color: #444; font-weight: bold; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; flex-shrink: 0; } bqco dv { display: block; } bqco dv b { display: block; font-size: 14px; color: #222; margin-bottom: 2px; } bqco dv span { display: block; font-size: 12px; color: #666; margin: 0; line-height: 1.3; } @media only screen and (max-width: 999px) { bqco { padding: 16px; } } crte hd btns { display: flex ; gap: 8px; flex-wrap: wrap; align-items: center; } crte btn>i { width: 20px; height: 20px; } crte svg { fill: var(--b1); } crte bd th{ padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b); } crte bd div { margin-block: 20px; } crte h3 { padding-bottom: 15px; font-weight: 500; font-size: 18px; } crte ft btns { display: flex ; justify-content: center; } crte ft svg { fill: var(--b); } crte ft btn { display: flex ; align-items: center; background: var(---gn); border-radius: 20px; padding: 6px 9px; color: var(--b); font-size: 16px; } crte hd btn { display: flex ; border: solid 1px var(--b1); padding: 4px 17px; align-items: center; border-radius: 20px; background: var(--bc); } crte hd btn:nth-child(1) i { width: 11px; margin-right: 9px; } crts ft th { padding: 12px 23px; background: var(--a4); border-right: solid 2px var(--b); } crts h3 { padding-bottom: 15px; font-weight: 500; font-size: 18px; } crts bd div { margin-block: 20px; } crts>bl>ft { margin-block: 20px; display: block; } @media(max-width:999px){ crte hd btns {flex-wrap: nowrap; overflow: scroll; } crte>bl>bd,crts>bl>ft{ overflow: scroll;display: block; } crte td:nth-child(1),crts td:nth-child(1) { font-size: 14px; color: var(--p3); } } /*Rating*/ brto{ display: block ; align-items: center; justify-content: space-between; background: var(---ba); padding: 20px; border-radius: 12px; margin-block: 14px; } brto bl { display: flex ; justify-content: space-between; } brto hd svg,brto bd svg { fill: var(---gn); width: 18px; height: 17px; } brto hd dv { display: flex ; align-items: center; } brto hd div { display: flex ; flex-direction: column; } brto bd div{ display: flex ; align-items: center;gap: 6px; } brto i { width: 20px; } brto b { height: 6px; background: var(---bc); border-radius: 3px; overflow: hidden; width: 200px; } brto bd { display: flex ; flex-direction: column; } /* brto bar { display: block; height: 100%; background: var(--p4); border-radius: 4px; } brto bd div:nth-child(1) bar { width: 35%; } brto bd div:nth-child(2) bar { width: 27%; } brto bd div:nth-child(3) bar { width: 23%; } brto bd div:nth-child(4) bar { width: 10%; } */ brto fill { display: block; background: var(--a); height: -webkit-fill-available; width: 0; border-radius: 22px; } @media(max-width:999px){ brto bl { display: block; } brto bd div { gap: 4px; } brto b { height: 6px; width: 146px; } brto b::before { width: 72px; height: 6px; } } crbd bl bd,crbd bl hd { display: flex ; flex-direction: column; gap: 8px; } crbd bd b,crbd hd b { flex: 1; height: 8px; background-color: var(--bc); border-radius: 4px; overflow: hidden; display: flex ;width: 200px; } crbd bd d,crbd hd d { background-color:var(--or); overflow: hidden; display: flex ; border-radius: 20px; } crbd hd div:nth-child(1) d { width: 55%; } crbd hd div:nth-child(2) d { width: 15%; } crbd bd div,crbd hd div { display: flex ; align-items: center; gap: 12px; font-size: 12px;padding: unset;} crbd { display: flex ; align-items: center; } crbd hd span:nth-child(1) { color: var(--a); } crbd bd span:nth-child(1) { opacity: .4; } crpo>bl>bd { background: var(---sy); display: block; padding: 14px; border-radius: 8px; margin-top: 34px; } crpo bl i {width: 20px;} crpo bd svg { fill:var(--or); } crpo p { margin: 0; font-size: 15px; opacity: .5; } crpo bd dv { display: flex ; gap: 5px;align-items: center; } crpo ft svg { fill: var(---b1); } crpo ft div { display: flex ; justify-content: space-between; background: var(---sy); padding: 11px; align-items: center; border-radius: 6px; } crpo>bl>ft { margin-block: 21px; display: block; } crpo ft btns { display: flex ; align-items: center; gap: 7px; } crpo bd div { display: flex ; flex-direction: column; gap: 4px; background: var(--b); box-shadow: 0 0 4px var(---bc); padding: 13px; border-radius: 8px; } brso bd i { width: 20px; } brso bd svg {fill: var(--or); } brso div d { display: flex ; } brso bd dv { display: flex ; align-items: anchor-center; } brso bd div { display: flex ; justify-content: space-between; align-items: center; padding: 8px 0; gap: 21px;} brso bd span { font-size: 12px; } brso hd span:nth-child(1) {font-size: 19px;font-weight: 500;} brso hd span:nth-child(2) { opacity: .4; } crge { display: block; padding: 20px; } crge hd { display: block; align-items: center; font-size: 14px; margin-bottom: 20px; } crge hd span { color: var(--btn11);white-space: nowrap;} crge hd b { color: var(--b1); font-weight: 600; } crge bd { display: flex ; align-items: center; justify-content: space-between; } crge h2 { display: block; font-size: 28px; font-weight: bold; margin-bottom: 20px; color: var(--b1); } crge hd dv { display: flex ; margin-bottom: 20px; align-items: center; gap: 10px; } crge dv input { padding: 10px; border-radius: 8px; border: none; font-size: 14px; font-weight: 100; height: 14px; background: 0; } crge div { display: flex ; gap: 10px; } crge div btn { padding: 10px 12px; border: none; border-radius: 8px; background: var(--bc); cursor: pointer; font-size: 18px; display: inline-block; } crge hd span:nth-child(2) { font-size: 30px; } crge hd span:nth-child(4) { font-size: 30px; } crge svg {fill:var(--b1);} crge i{width:20px; height:20px;} crge bd dv { display: flex ;align-items: center; background: var(--a4); padding: 3px 18px; border-radius: 6px; } @media(max-width:999px){ crge div { display: none; } crge hd dv {gap: 4px; } ccrg hd span { white-space: nowrap; } }/*Review_Card*/ crco { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); border: solid 1px var(---bc); margin-block: 1rem; }crco hd p { margin: 0; } crco hd div:nth-child(1) { display: flex ; gap: 16px; } crco hd span { background: var(--bb); padding: 9px 16px; border-radius: 22px; font-size: 20px; font-weight: 500; } crco hd div:nth-child(2) { display: flex ; background: var(---gn); padding: 4px 6px; font-weight: 600; align-items: center; border-radius: 6px;color: var(--b-t95); } crco hd svg { fill: var(--b); } crco bd svg{ fill: var(---gn); } crco ft svg{ fill: var(--c); } crco bd i,crco hd i { width: 15px; height: 14px; } crco bd dv { display: flex ; gap: 6px; border: solid 1px var(--c); border-radius: 5px; padding: 2px 3px; align-items: center; } crco bd div { display: flex ; gap: 14px; } crco>bl>hd { display: flex ; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; } crco bd h2 { font-weight: 500; line-height: 24px; padding: 16px 0; } crco bd p { font-size: 15px; margin: 0; } crco ft dv:nth-child(1) { justify-content: space-between; font-weight: 400; font-size: 13px; line-height: 14px; display: flex ; align-items: center; border-bottom: 1px dashed var(--bor); padding-bottom: 16px; margin-bottom: 24px; opacity: .7; } crco ft dv { display: flex ; justify-content: end;gap: 10px; } crco ft i{ width: 20px;} crco dv span:nth-child(2) { font-size: 14px; color: var(--p3); } crco hd h3 { display: flex ; align-items: center; } crco ft a { display: flex ; justify-content: center; padding: 6px 19px; border: 1px solid var(--c); border-radius: 25px; align-items: center; font-size: 15px; } crco ft btn { display: flex ; justify-content: center; } brco {margin-block: 2rem;} cuso { display: none; } crco.rt cuso { display: block; } @media(max-width:999px){ crco hd span { height: 27px; } crco bd div { display: flex ; gap: 14px; flex-direction: column; } crco bd dv { justify-content: center; } } brfo h2 { font-size: 18px; font-weight: 600;margin-bottom: 16px; } brfo dv { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } brfo dv tg { display: inline-flex ; align-items: center; padding: 6px 12px; background: var(--bg); border: 1px solid var(--bc); border-radius: 16px; font-size: 13px; white-space: nowrap; gap: 6px; } brfo dv tg::before { content: ''; width: 6px; height: 6px; background:var(---gn); border-radius: 50%; display: inline-block; } brfo dv tg:hover { background:var(---ba); border-color: var(--p3); color: var(--p3); } brfo a { color:var(--p3); font-size: 13px; text-decoration: none; font-weight: 500; margin-left: 8px; } brfo div { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding :12px 20px; border-top: 1px solid var(--bc);} brfo div span { display: flex; align-items: center; gap: 6px; font-size: 13px; } brfo div span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; } brfo div span.vp::before { background: var(---gn); } brfo div span.pos::before { background: var(---gn); } brfo div span.neu::before { background: var(--or); } brfo div span.neg::before { background: var(--or); } brfo div span.vn::before { background: var(--rd); } @media (max-width: 768px){ brfo dv { gap: 6px; margin-bottom: 16px; } brfo dv tg { font-size: 12px; padding: 5px 10px; } brfo div { gap: 12px; padding: 12px 20px; } brfo div span { font-size: 12px; } } brfo bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); margin-block: 2rem; border: 1px solid var(--bor); padding: 20px 0px; } brfo hd { padding: 0px 12px; display: block; border-bottom: solid 1px var(--bc); } brfo bd { margin-block: 20px; display: block; padding: 0px 20px; }/*Review_Section*/ crso>bl { display: flex ; flex-direction: column; gap: 20px;} crso dv { display: flex ; align-items: center; justify-content: space-between; margin-bottom: 8px; } crso h4 { display: flex ; align-items: center; gap: 8px;} crso a { color:var(--p3); text-decoration: none; font-size: 14px; font-weight: 500; } crso p { margin-block-end: 0; font-size: 16px; opacity: .7; } crso span { font-size: 14px; opacity: .6; } crso b { width: 17px; height: 16px; background: var(---gn); border-radius: 4px; } crso b:nth-child(2) { background: var(---gn);} /*Reviews*/ brvo>bl>hd { display: flex ; align-items: center; padding: 20px 24px 16px;var(--c);gap: 14px; } brvo hd i { width: 40px; } brvo { display: block; background: var(--lg-bl); border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px var(---bc); position: relative; margin-block: 2rem; } brvo ft btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--bc); border-radius: 20px; font-size: 14px; } brvo ft btns { margin-block: 1rem; display: block; } brvo ft btn { display: inline-block; padding: 8px 16px; border: 1px solid var(--bc); border-radius: 20px; font-size: 14px; } brvo ft btn.this { background: var(--bc); border: 1px solid var(--c); } @media(max-width:999px){ brvo ft btns { margin-block: 1rem; display: flex ; flex-direction: column; gap: 20px; } brvo ft btn {justify-content: center; display: flex ; } } bseo { display: block; border-radius: 8px; overflow: hidden; max-width: 700px; margin: 40px auto; } bseo hd { display: block;padding: 12px 16px;} bseo hd div { display: flex ; justify-content: space-between; } bseo hd dv { display: flex; align-items: center; gap: 8px; } bseo i{height: 20px; width: 20px;} bseo hd dv:nth-child(2) svg { fill: var(--p4); } bseo hd dv:nth-child(2) span { color: var(--p4); } bseo hd span {font-weight: 500; font-size: 14px; line-height: 20px; opacity: unset; } bseo bd th:nth-child(1) { text-align: left; font-weight: 600; padding: 12px 16px; border-right: 1px solid var(--bor); } bseo bd table { width: 100%; border-collapse: collapse; font-size: 14px; } bseo bd th { color: var(--b1);text-align: left; font-weight: 600; padding: 12px 16px; } bseo bd td { padding: 12px 16px; border-top: 1px dashed var(--bor); vertical-align: top; } bseo bd td:nth-child(1) { border-right: solid 1px var(--bor); } bseo tag { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--b); padding: 2px 8px; font-weight: 600; background: var(--p3); border: 1px solid var(--p4); border-radius: 4px; } bseo bd b { color: var(--b1); font-weight: 500; } bseo bd td:nth-child(2) {color:var(--btn11); } cspe { display: none; border-radius: 6px; max-width: 800px; margin: 30px auto; box-shadow: 0 2px 10px var(---bc); } cspe hd { display: block; margin-bottom: 20px; } cspe hd dv { display: block; } cspe hd dv ul { margin: 12px 0 12px 30px; padding: 0; list-style-type: disc; } cspe hd dv ul li { margin: 0 0 10px; font-weight: 400; font-size: 0.875rem; line-height: 1.25rem;} cspe b { font-size: 0.875rem; line-height: 1.375rem; color: var(--b1); font-weight: 500; } cspe hd dv p { font-weight: 400; font-size: 0.875rem; line-height: 1.375rem; color: var(--btn11); } cspe hd dv p:nth-child(4) { margin-top: 20px; font-size: 0.875rem; color: var(--b1); font-weight: 600; } cspe bd { display: block; } cspe bd table { width: 100%; border-spacing: 0; } cspe bd table tr td { padding: 14px 10px;text-align: left; border-bottom: 1px dashed var(--bor);} cspe bd table tr td a { text-decoration: none; color: var(--p4); font-size: 0.875rem; display: block; padding-left: 24px; position: relative; font-weight: 400; line-height: 1.375rem; } cspe bd table tr td a::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url('https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg') no-repeat center center; background-size: contain; } cspe bd table tr td:nth-child(2) { border-left: 1px dashed var(--bor); } cspe bd table tr td:nth-child(3) { border-left: 1px dashed var(--bor); } cssc bl{ display: block; padding: 16px; background: var(--b-t95); box-shadow: 0 2px 10px var(---bc); margin-block: 20px; border: solid 1px var(--bor); }cssc svg { fill: var(---gn); } cssc hd h3 { display: flex ; align-items: center; font-size: 15px; color: var(--p3); font-weight: 500; } cssc i{ width: 20px; height: 20px; } cssc th:nth-child(1) { border-left: solid 1px var(---bc); } cssc th:nth-child(3) { border-right: solid 1px var(---bc); } cssc ft a { display: flex ; font-size: 14px; font-weight: 400; color: var(--p3); } cssc em { font-size: 16px; } cssc strong { color: var(--ab); } cssc bd p { font-size: 15px; } cssc hd p { margin: 0; opacity: .6; font-size: 13px; } cssc th { padding: 8px 10px; background: var(---ba); color: var(--p3); font-weight: 400; border-top: solid 1px var(---bc); } cssc td { padding: 12px 23px; border: 1px solid var(--bc); font-size: 14px; font-weight: 400; text-align: justify; opacity: .7; } @media(max-width:999px){ cssc td { padding:13px;} } bsso>bl { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 1rem; } bsso>bl>hd { display: flex ; justify-content: space-between; border-bottom: solid 1px var(---bc); padding-bottom: 16px; } bsso hd svg { fill: var(--b1); } bsso h2 { font-weight: 600; font-size: 20px; line-height: 24px; } bsso hd>i { width: 18px; transform: rotate(270deg); } bsso.Scholarships cspe { display: block; } bsso.Scholarships ccyo { display: block; } csnp hd img { display: block; width: 100%; height: 363px; max-height: 100%; object-fit: cover; border-radius: 12px 12px 24px 24px; } csnp hd i { height: 100%; margin: 0 22px; width: auto; } csnp btn t { color: var(--b); font-size: 13px; white-space: nowrap; } csnp bd img {width: 100px; height: 100px; object-fit: cover; border-radius: 13px; box-shadow: -1px 2px 7px 0px var(--b1); } csnp btn{background: var(--a2); display: flex ; border-radius: 22px; align-items: center; justify-content: center;} csnp bd {display: flex ; justify-content: space-between; width: auto; margin-top: -80px; padding: 0 40px; position: relative;} csnp>bl{display: grid ; width: 100%;} csnp{display: flex ;margin-bottom: 55px; } csnp bd>i{width: auto; position: absolute; height: auto; top:24px; background: var(--a1);} .cath cadth { display: grid ;} cslu{ display: grid ; margin: 22px 0; } cslu>bl{ display: flex ; background :var(--b-t22); width: auto; flex-direction: column; border-radius: 22px; padding: 22px; box-shadow: inset 0px 0px 3px 0px var(--bor); justify-content: space-between; } cslu hd { display: flex ; align-items: flex-start; justify-content: space-between; margin-bottom: 5%; } cslu hd h3 { width: 100%; font-size: 24px; font-weight: 600; line-height: 34px; } cslu hd btn { display: block; margin-left: 11px; cursor: pointer; } cslu bd { display: flex ; flex-direction: column; justify-content: center; } cslu bd wrs { display: flex ; flex-direction: column; align-items: flex-start; } cslu bd gd { display: grid ; grid-template-columns: 1fr 1fr; column-gap: 16px; } cslu gd img { margin-right: 7px; max-width: 100%; max-height: 100%; } cslu bd bl { display: block; margin: 8px 0; } cslu bd label { display: inline-block; font-size: 15px; line-height: 18px; margin-bottom: 4px; font-weight: 500; } cslu label b { color: var(--a3); } cslu bd input { outline: 0; border-radius: 6px; display: block; border: 1px solid var(--bc); height: unset; font-weight: 400; color: var(--b1);width: calc(100% - 43px); height: 47px; padding: 0 18px; font-size: 18px; line-height: 20px; margin-bottom: 19px;} cslu ft { display: flex ; align-items: center; justify-content: space-between; column-gap: 16px; } cslu ft btn { display: flex ; width: 100%; align-items: center; justify-content: center; border: 1px solid var(--bc); border-radius: 8px; padding: 15px 20px; box-shadow: inset 0 0 2px 0 var(--bc); cursor: pointer; font-size: 20px; font-weight: 500; } cslu ft btn:nth-child(2) {background-color: var(--a); color: var(--a4);} cslu bd { display: block; margin: 8px 0; } cslu bd img { margin-right: 7px; max-width: 100%; max-height: 100%; } cslu input#jd[type="date"]::-webkit-calendar-picker-indicator { display: none; } bsao { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px;} sslo.Fee bsao { display: block;} bsao bl hd dv { display: flex ; gap: 12px; align-items: center; } bsao bl hd dv { display: flex ; } bsao bl hd { display: block;} bsao bl hd dv i { display: inline-block; width: 42px; height: 42px; border-radius: 6px; } bsao bl hd div { display: flex ; justify-content: space-between; } bsao bl hd div i { width: 24px; height: 24px; } bsao bl bd { display: none; } bsao bl ft { display: none ; justify-content: center; } bsao bl bd li { display: none; } bsao bl bd dv { display: flex ; justify-content: end; color: var(--at); } bsao bl ft i { height: 24px; width: 24px; filter: brightness(0) invert(1); } bsao bl ft btn {display: flex ; align-items: center; background: var(--at); border-radius: 60px; justify-content: center; font-size: 14px; font-weight: 600; padding: 10px 20px; gap: 4px; max-width: 200px; color: var(---bc);} bsao.School bd { display: block; }/*School_Banner*/ bsbo div img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: cover; border-radius: 12px 12px 24px 24px; } bsbo div i { height: 100%; } bsbo bd { position: relative; height: 100%; display: block; } bsbo dv span { color: var(--b); font-size: 13px; white-space: nowrap; } bsbo bd dv { border-radius: 16px; width: auto; justify-content: space-between; position: absolute; inset: 0; display: none ; align-items: center; padding: 1px 20px; top: 8rem; z-index: 999; height: 74%; } bsbo bd dv mg { display: flex ; border-radius: 21px; } bsbo bd dv img { width: 100px; height: 100px; object-fit: cover; border-radius: 13px; box-shadow: 47px 22px 43px var(--bc); } bsbo bd dv i { display: block; } bsbo bd btn i { filter: invert(1); width: 14px; height: 14px; } bsbo bd btn { display: flex ; background: var(--b1); padding: 4px 8px; gap: 4px; border-radius: 4px; } @media only screen and (min-width: 1600px) { bsbo bd dv{top: 15rem; height: 11rem;} bsbo bd div { height: 555px; } }/*School_Card*/ sslo hero { padding: 20px; display: block; } bsco bl { border: 1px solid var(--bc); border-radius: 22px; position: static; } bsco bd dv { display: flex ; align-items: center;gap: 11px;} bsco div d { display: flex ; white-space: nowrap; align-items: center; gap: 6px; } bsco a { font-size: 14px; font-weight: 600; } bsco bd dv:nth-child(2) { justify-content: space-between; align-items: center; } bsco h2 { padding: 22px 22px 0; font-size: 22px; font-weight: 500; color: var(--b1); opacity: 0.8; } bsco btns { display: flex ; gap: 10px; } bsco bd { padding: 0px 22px; display: block; margin-bottom: 20px; } bsco bd btn:nth-child(3) { background:var(--a); border: solid 0; color: var(--a1); width: max-content; padding: 9px 16px; font-weight: 600; font-size: 14px; line-height: 20px; } bsco div a { color: var(--at); font-weight: 400; font-size: 16px; } bsco dv span { background: var(---bc); padding: 3px 8px; font-size: 14px; color: var(--c); border-radius: 3px;font-weight: 500; } bsco ft mg { display: grid ; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 4rem; transition: transform .25s ease-in-out; overflow: scroll; padding: 22px; background: var(--a1); border-radius: 0 0 22px 22px; } bsco ft { border-top: 1px solid var(--bc); display: block; } bsco svg { fill: var(--b); } bsco bd btn { border-radius: 20px; border: solid 1px var(--c); padding: 8px 26px; display: flex ; white-space: nowrap; align-items: center; gap: 4px; } bsco bd btn i { width: 16px; height: 16px; } @media(max-width:999px){ bsco bd dv:nth-child(2) { flex-direction: column; } bsco btns { display: flex ; gap: 10px; flex-direction: column; width: 100%; justify-content: center; } bsco bd btn:nth-child(3) { width: unset; } bsco bd dv:nth-child(1) { gap: 17px; overflow: scroll; } bsco hd h2 { padding: 0px 13px; } bsco bd btn { justify-content: center; } } csce hd span {display: flex;} csce bd ul { list-style: none; padding: 0; } csce bd li { margin-bottom: 16px; } csce ul d { padding: 12px; background: var(---p1p); box-shadow: 0 0 1px var(---p1p); border-radius: 4px; display: flex ; flex-direction: column; } csce { display: none; } /*School_Explore*/ cseo { display: block; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; border-radius: 12px; background: var(--bcc); margin: 20px 0; min-height: 455px; } cseo>bl>hd { display: block; padding: 36px 36px 0; } cseo>bl>hd btn { border-radius: 4px; background: #a687d6; color: #fff; font-size: 12px; font-weight: 500; line-height: 16px; padding: 4px 12px; } cseo>bl>ft i { width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--a1); border-radius: 100px; border: 1px solid var(--bc); cursor: pointer; margin: 0 0 0 12px; } cseo>bl>ft { display: block; border-radius: 0 0 12px 12px; background: var(--bccc); padding: 12px 20px; height: 56px; } cseo>bl>ft div { display: flex ; align-items: center; justify-content: center; } cseo>bl>ft dv { display: flex ; } cseo>bl>ft i svg { fill: var(--b1); height: 20px; width: 20px; } cseo>bl>bd { display: flex ; overflow: scroll; padding: 20px 0; } @media only screen and (max-width: 999px) { cseo {padding: 16px; } cseo>bl>hd {padding: 20px 0px 0; } cseo>bl>bd {gap: 1rem; } } /* School_Filter */ csflt>bl{ position: relative;display: flex ; flex-direction: column; background: var(--a1); border-radius: 8px; overflow: hidden; border: 1px solid var(---bc); } csflt a { font-weight: unset; } csflt hd { background: var(--lgaa); color: var(--b-t95); padding: 16px 20px; text-align: center; box-shadow: var(--bt-bx); } csflt hd h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--b-t95); } csflt bd { height: 92vh; overflow: scroll; padding: 0; background: var(--bc); } csflt fls { display: flex; flex-direction: column; } csflt fl { position: relative; background: var(--ba1); border-bottom: 1px solid var(--bo1); } csflt fl ops op.this { background: var(--aa); color: var(--b-t95); font-weight: 500; } csflt fl lb { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--bt); gap: 8px; } csflt fl lb i { font-size: 12px; color: var(--bor); height: 13px; width: 13px; } csflt fl ops { display: block; background: var(--b-t95); max-height: 200px; overflow-y: auto; border-top: 1px solid var(--bo1); box-shadow: var(--bs); } csflt op { display: block; padding: 10px 20px; cursor: pointer; font-size: 14px; color: var(--b1); border-bottom: 1px solid var(--bc); transition: 333ms; } csflt op:hover { background: var(--hover); color: var(--bl); } csflt op[selected] { font-weight: 500; background: var(--a); color: var(--b); } csflt fl ar {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--bor); pointer-events: none; } csflt ops::-webkit-scrollbar { width: 6px; } csflt ops::-webkit-scrollbar-track { background: var(--bc); } csflt ops::-webkit-scrollbar-thumb { background: var(--a2); border-radius: 3px; } csflt ops::-webkit-scrollbar-thumb:hover { background: var(--aa); } csflt ft { padding: 0; background: var(--a1); } @media (max-width: 999px) { csflt { margin: 7px; display: block; } csif>bl { max-width: unset !important; width: auto !important; margin: 7px !important; } csflt hd h2 { font-size: 16px; } csflt flt lbl { padding: 10px 14px; font-size: 13px; } csflt opt { padding: 8px 18px; font-size: 13px; } csif ft { display: grid ; grid-column-start: 1; grid-column-end: 3; } csif>bl { grid-template-columns: 77px auto 0px;align-items: flex-start; } csif bd inf h2 { font-size: large; } csif bd inf met div { text-align: left; } csif bd i { justify-content: normal; } } /* School_Information */ csif { margin: 6px 0px; display: grid ; } csif>bl {position: relative; display: grid ; border: 1px solid var(--bo1); border-radius: 8px; padding: 16px; margin: 0 auto; box-shadow: var(--bxs1); align-items: center; gap: 16px; width: 98%; grid-template-columns: 77px auto 148px;} csif hd { display: flex; flex-direction: column; align-items: center; min-width: 80px; text-align: center; } csif hd h1 { font-size: 48px; font-weight: 700; color: var(--b1); line-height: 1; } csif hd tx { font-size: 14px; color: var(--bt); margin-top: 4px; } schl bd { display: flex; flex: 1; gap: 16px; align-items: center; } csif bd img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bo1);max-width: 80px; max-height: 80px; } csif bd inf { flex: 1; } csif bd inf h2 { font-size: 24px; font-weight: 600; color: var(--b1); margin-bottom: 8px; } csif bd inf rat { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } csif bd inf rat i { color: var(--aa); font-size: 16px; } csif bd inf rat span { font-size: 14px; color: var(--bt); } csif bd inf loc { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; } csif bd inf loc i { color: var(--bt); font-size: 14px; } csif bd inf loc span { font-size: 14px; color: var(--bt); } csif bd inf met { display: flex ; gap: 8px; margin-bottom: 12px; flex-direction: column;} csif bd inf h3 { font-size: 20px; font-weight: 400; color: var(--b1); } csif bd inf met div span { font-size: 12px; color: var(--bt); display: block; } csif bd inf lnk { display: flex; gap: 16px; } csif bd inf lnk a { color: var(--at); text-decoration: none; font-size: 14px; font-weight: 500; } csif bd inf lnk a:hover { text-decoration: underline; color: var(--aa); } csif bd i { align-items: center; } csif bd tyt { display: flex ; align-items: center; gap: 22%; } csif ft { display: flex; flex-direction: column; gap: 8px; min-width: 120px; } csif ft bts { display: flex; flex-direction: column; gap: 8px; } csif ft bts bt { padding: 12px 24px; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.2s ease; text-decoration: none; display: block; } csif ft bts bt:first-child { background: var(--a); color: var(--b-t95); box-shadow: var(--bt-bx); } csif ft bts bt:first-child:hover { background: var(--a); transform: translateY(-1px); box-shadow: var(--bss); } csif ft bts bt:last-child { background: var(--a); color: var(--b-t95); box-shadow: var(--bt-bx); } csif bd { display: grid ; grid-template-columns: 100px auto; gap: 7px;} csif bd a { display: flex ; justify-content: center; align-items: center; } @media (max-width: 768px) { csif { flex-direction: column; text-align: center; gap: 16px; } csif bd { flex-direction: column; text-align: center; } csif bd inf met { justify-content: center; } csif ft { width: 100%; } csif ft bts { flex-direction: row; justify-content: center; } csif ft bts bt { flex: 1; max-width: 150px; } } @media only screen and (max-width: 999px) { csif { display: flex; flex-direction: column; gap: 16px; margin: 0; } csif> bl { display: flex; flex-direction: column; gap: 16px; padding: 16px; grid-template-columns: none; max-width: 100%; } csif hd { flex-direction: row; justify-content: center; align-items: center; text-align: center; gap: 12px; } csif hd h1 { font-size: 32px; } csif bd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } csif bd img { width: 72px; height: 72px; } csif bd inf met { flex-direction: column; align-items: center; } csif ft { width: 100%; align-items: center; } csif ft bts { flex-direction: row; justify-content: center; gap: 12px; width: 100%; } csif ft bts bt { flex: 1; max-width: 150px; } csif bd lnk { flex-direction: row; gap: 8px; justify-content: center;} csif bd inf met div { text-align: center; } csif bd tyt { display: grid ; } csflt bd { display: none;} csifs hd h2 { margin-left: 9px; } csif bd inf met div span { margin-top: 2%; } } @media (max-width: 1400px) { csif>bl {grid-template-columns: 100%; } csif bd tyt { flex-direction: column; align-items: unset; gap: 11px; } } /* School_Informations */ /*School_Notification */ csno { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc);} csno bl { display: block; } csno hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } csno hd h2 { font-size: 16px; font-weight: bold; margin: 0; } csno bd { display: block; } csno bd p { display: block; padding: 10px 0; color: var(--p3); font-size: 14px; border-bottom: 1px solid var(---bc); line-height: 1.4; font-weight: 500; } csno bd p:last-child { border-bottom: none; } csno i { width: 45px; } bsto { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px;} bsto bl hd dv { display: flex ; gap: 12px; align-items: center; } bsto bl hd dv { display: flex ; } bsto bl hd { display: block;} bsto bl hd div { display: flex ; justify-content: space-between; } bsto bl hd div i { width: 24px; height: 24px; } bsto bl bd { display: none; } bsto.st bd { display: block; } bsto bl ul { padding-bottom: 24px; padding-inline-start: unset; } bsto bl li { list-style: none; padding: 8px 24px; } bsto bl li { list-style: none; padding: 8px 24px; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--p3); } csuo hd span {display: flex;} csuo bd ul { list-style: none; padding: 0; } csuo bd li { margin-bottom: 16px; } csuo ul d { padding: 12px; background: var(---p1p); box-shadow: 0 0 1px var(---p1p); border-radius: 4px; display: flex ; flex-direction: column; } csuo { display: none; } bslo { display: none; box-sizing: border-box; height: 400px; max-height: 100%; max-width: 100%; background: var(--b); border-radius: 12px;margin-block: 2rem; border: solid 1px var(---bc); width: 648px; margin: auto; position: absolute; z-index: 100000; top: 30rem; left:24rem;} bslo hd svg { fill: var(--b1); } bslo hd i { width: 24px; } bslo hd { display: flex ; justify-content: space-between;padding: 10px 20px; } bslo bd dv{ display: flex ; flex-direction: row; margin-top: -.5rem; padding: 10px 12px; } bslo bd span:nth-child(1),bslo bd d{ flex-basis: 53%; padding-right: 20px; } bslo bd span:nth-child(2) { flex-basis: 29%; padding-right: 20px; } bslo bd span:nth-child(3) { flex-basis: 20%; padding-right: 20px; } bslo bd d { display: flex ; gap: 10px;align-items: center;background:0; } bslo bd dv:nth-child(2) { border-top: solid 1px var(---bc); } bslo bd dv:nth-child(1) { margin-bottom: 15px; } bslo bd span { font-size: 12px; } bslo bd div { display: flex ; flex-direction: column; } scso.st bslo { display: block; } bslo b { background: var(--p4); color: var(--b); padding: 6px 12px; border-radius: 20px; } bslo bd dv:nth-child(2):hover { background: var(--bg); } @media(max-width:999px){ bslo {left: 0; top: 73rem; width: 331px; max-width: unset; margin: 10px 7px 6px 8px; } } cstmo::before { content: ""; display: block; position: absolute; background-image: url(/-/CarDekho/asset/Original.jpg); background-position: center; inset: 0; filter: hue-rotate(218deg); } cstmo { position: relative; display: block; padding: 22px; border-radius: 11px; overflow: hidden; color: var(--b-t95); transition: 99ms; border: var(--bs); background: var(--a2); } cstmo bl { z-index: 999; position: relative; display: grid; justify-content: center; } cstmo hd i { height: 100%; width: 47px; margin: auto; } cstmo hd { display: block; } cstmo:hover { transform: scale(1.04); } cstmo:active { transform: scale(.97); } cstms flex { display: flex; flex-wrap: wrap; margin: var(--m); gap: 7px; } @media screen and (max-width: 999px) { cstms { display: block; margin: 11px; } } csdn { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin: 22px 15px 0; } csdn bl hd { display: flex; position: relative; justify-content: space-between; } csdn bl hd h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; line-height: 1.3; opacity: .8; } csdn hd dv { display: grid; } csdn hd p { font-size: 20px; margin: 0 0 8px 0; opacity: .7; } csdn hd divv { display: flex; gap: 5px; align-items: center; } csdn bl hd span { font-size: 16px; opacity: .7; } csdn hd btn { background: var(--or); color: var(--b); font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 7px; } csdn star { align-items: center; display: flex; justify-content: end; font-weight: 600; font-size: 17px; } csdn dots { padding: 0 6px; border: solid 1px var(--aat); font-size: 24px; display: flex; align-items: center; justify-content: center; } csdn bl bd { display: block;} csdn bd p { color: var(--b1); font-size: 14px; line-height: 1.5; margin-bottom: 24px; } csdn p span { opacity: .7; font-weight: 500; } csdn bd filters { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--bor); padding-top: 20px; } csdn filters div { display: flex; align-items: center; gap: 12px; } csdn filters span { font-size: 14px; color: var(--btn11); font-weight: 500; } csdn filters select { border: 1px solid var(--bor); padding: 8px 32px 8px 12px; border-radius: 4px; font-size: 14px; color: var(--btn11); background: var(--b); background-position: right 8px center; background-repeat: no-repeat; background-size: 16px; appearance: none; min-width: 140px; } csdn filters select:focus { outline: none; border-color: var(--p4); box-shadow: 0 0 0 3px var(---bc); } csdn ft { display: block; } @media (max-width: 768px) { csdn { margin: 10px; border-radius: 6px; } csdn bl hd { padding: 20px; padding-right: 20px; } csdn bl hd h1 { font-size: 18px; margin-bottom: 40px; } csdn bl bd { padding: 16px 20px; } csdn bd filters { flex-direction: column; gap: 16px; align-items: stretch; } csdn bd filters div { justify-content: space-between; } csdn bd filters select { min-width: 120px; } } csse { display: block; max-width: 800px;} csse row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bor); padding: 8px 0; } csse b { width: 30px; } csse span { flex: 1; color: var(--p4);} csse bar { flex: 1; background: #eee; height: 6px; border-radius: 4px; margin: 0 10px; position: relative; overflow: hidden; } csse fill { display: block; height: 100%; background: var(--p4); border-radius: 4px; } csse bl hd { display: block; border: 0; } csse hd row:nth-child(1) fill { width: 100%; } csse hd row:nth-child(2) fill { width: 54%; } csse hd row:nth-child(3) fill { width: 50%; } csse hd row:nth-child(4) fill { width: 47%; } csse hd row:nth-child(5) fill { width: 37%; } csse hd row:nth-child(6) fill { width: 37%; } csse hd row:nth-child(7) fill { width: 26%; } csse hd row:nth-child(8) fill { width: 24%; } csse hd row:nth-child(9) fill { width: 20%; } csse hd row:nth-child(10) fill { width: 18%; } csse score { width: 30px; text-align: right; font-size: 14px;} csse bl bd { padding-top: 10px; text-align: center; } csse bl ft { display: flex ; justify-content: center; bottom: 1rem; position: relative; } csse ft dv { display: flex ; align-items: center; gap: 8px; border-radius: 4px; padding: 4px 8px; font-size: 14px; } /* Speech_AddFile */ csafo { display: flex ; flex-direction: column; border: 1px solid var(--bor); border-radius: 12px;width: 50%; max-width: 650px; } csafo hd { display: flex ; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--bor);padding: 11px;} csafo hd input { border: 1px solid var(--bor); padding: 0 0 0px 14px; width: 50%; max-width: 248px; border-radius: 8px; color: var(--c); font-size: 16px; font-weight: 500; } csafo hd right { display: flex ;gap: 8px; } csafo hd btn { border: 1px solid var(--bor); border-radius: 8px; display: flex ; align-items: center; justify-content: center;padding: 5px; } csafo hd i { width: auto; height: auto; } csafo hd .bbc { background-color: var(--aa); } csafo bd { display: flex ; gap: 8px;padding: 11px; } csafo bd i { width: auto; height: auto; } csafo ft { display: flex ; align-items: center; width: 100%; height: 100%; justify-content: center; color: var(--c); font-size: 17px; font-weight: 400; } @media only screen and (max-width: 1320px) { csafo { max-width: 451px; } } @media only screen and (max-width: 999px) { csafo {max-width: 95%; width:100%; height: 70vh;} } csfe { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); margin-block: 20px; } csfe hd { display: block; } csfe hd a { display: flex ; align-items: end; gap: 1px; line-height: 1.6; font-size: 14px; font-weight: 700; color: var(--p4); margin-right: 5px; } csfe hd span { color: var(--btn11); font-size: .75rem; line-height: 1.6; } csfe hd i { height: 18px; width: 14px; } csfe bd p { font-size: 14px; line-height: 1.3125rem; margin: 4px 0 10px; color: var(--b1); } csfe ft i { margin-left: auto; margin-right: auto; height: 70%; width: 70%; } csrg { display: block; max-width: 800px; margin: 20px auto; padding: 20px; border-radius: 10px; border: 1px solid var(--bor); box-shadow: 0 2px 10px var(---bc); } csrg hd dv { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } csrg hd h3 { font-size: 16px; font-weight: 600; margin: 0; color:var(--b1); } csrg stars { display: inline-block; direction: rtl; unicode-bidi: bidi-override; font-size: 22px; color: var(--b1); letter-spacing: 5px; } csrg bd dv { display: flex; justify-content: space-between; align-items: center; } csrg bd span { font-size: 14px; color: var(--btn11); } csrg stars input { display: none; } csrg stars label { font-size: 24px; color: var(--bor); padding: 0 2px; } csrg stars label:hover{ color: var(--or); } stars label:hover ~ label { color: var(--or); } csrg stars input:checked ~ label { color: var(--or); } ctse{ display: none; max-width: 700px; background: var(--b); overflow: hidden; box-shadow: 0 0 4px var(---bc); border-radius: 12px; } ctse bd { display: block; overflow-x: auto; margin-block-start: 2rem; } ctse bd table { font-size: 14px; color: var(--b1); } ctse bd table thead tr { background-color: var(---ba); } ctse bd table th { text-align: left; padding: 12px 10px; border-bottom: 1px dashed var(--btn11); line-height: 1.375rem; font-weight: 400; } ctse bd table td { text-align: left; padding: 12px 10px; border-bottom: 1px dashed var(--btn11); } ctse ft { display: block; margin-top: 20px; font-size: 14px; } ctse ft p { margin: 8px 0; } ctse ft p:first-child { color: var(--rd); position: relative; padding-left: 22px; } ctse ft p:first-child::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url(https://upload.wikimedia.org/wikipedia/commons/8/87/PDF_file_icon.svg) no-repeat center center; background-size: contain; } ctse ft p:first-child a { color: var(--rd); text-decoration: none; } ctse ft p:last-child span { font-weight: bold; color: var(--b1); margin-right: 5px; } ctse ft p:last-child a { color: var(--p4); text-decoration: none; } ctse bd table tr td:nth-child(1){ border-right: 1px dashed var(--btn11); } ctse bd table tr td:nth-child(2) { border-right: 1px dashed var(--btn11); } bsmo { display: block ; width: 100%; background: var(---b); border-bottom: 1px solid var(---bc); padding: 0; align-items: center; } bsmo bl { display: flex ; } bsmo hd { display: flex; align-items: center; padding: 0 24px; flex: 1; } bsmo bd { flex: 1; } bsmo ft { display: flex; align-items: center; padding: 0 24px; } bsmo hd div { display: flex; align-items: center; gap: 32px; } bsmo hd dv{line-height: 28px; } bsmo ft dv {padding: 8px; border-radius: 6px;} bsmo ft svg { fill: var(--c);height: 27px; width: 27px; } bsmo hd dv:hover { color: var(---c); } @media (max-width: 768px) { bsmo hd {padding: .125rem 1rem 0 1rem; height: 3rem;} bsmo ft { padding: 0 16px; gap: 12px; } bsmo hd div { gap: 24px; } bsmo hd dv { font-size: 13px; } bsmo ft dv { font-size: 16px; padding: 6px; } } @media (max-width: 480px) { bsmo hd div { gap: 2rem; } bsmo hd dv { padding: 12px 0; font-family: "Google Sans", Roboto, Arial, sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: 0; } bsmo ft { gap: 8px; } } scso.Stream bsmo hd dv:nth-child(1) { border-bottom: solid 4px var(--p3);color: var(--p3); } scso.Classwork bsmo hd dv:nth-child(2) { color: var(--p3); border-bottom: solid 4px var(--p3); line-height: 28px; } scso.People bsmo hd dv:nth-child(3) { color: var(--p3); border-bottom: solid 4px var(--p3); line-height: 28px; } scso.Marks bsmo hd dv:nth-child(4) { color: var(--p3); border-bottom: solid 4px var(--p3); line-height: 28px; } /*Stream01*/ bsro bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 20px; margin-block: 2rem; border: solid 1px var(---bc); } bsro>bl>bd { display: flex ; } bsro ft i { width: 24px; } bsro ft svg { fill: var(--p3); } bsro ft span {color: var(--p3); } bsro ft { display: flex ; justify-content: end; } bsro ft btn { display: flex ; border-radius: 19px; border: solid 1px var(--c); padding: 7px 10px;font-weight: 400; } bsro ft i { width: 24px; height: 22px; } bsro bd h2 { font-size: 30px; display: block; font-weight: 400; } bsro bd p { font-size: 16px; opacity: .7;} @media(min-width:999px){ bsro bd i { width: 26%; padding: 14px 15px; } } @media(max-width:999px){ bsro bd h2 { font-size: 15px; margin-top: 20px; } bsro bd svg { width: 60%; } bsro bd p { font-size: 14px; opacity: .7; text-align: center; } bsro ft { justify-content: center; } bsro>bl>bd { display: block; } } .fdf cstf { display: flex ; } cstf hd>gd { display: grid ; grid-template-columns: 21px auto 50px; padding: 0 22px; align-items: center; border-bottom: 1px solid var(---bc); } cstf hd h4{font-size: 16px; font-weight: 400; margin-left: 20px;} cstf hd gr { display: grid ; grid-template-columns: 33px auto; padding: 8px; align-items: center; border: 1.9px solid var(--bc); background: var(--0); border-radius: 12px; font-size: 16px; } cstf hd i {width: auto} cstf hd svg {fill: var(--b1);} cstf {display: none ; background: var(--aat); width: 100%; max-width: 900px; border-radius: 22px; padding: 4px; position: absolute; top: 135px; right: 40px; overflow: hidden; z-index: 0;} cstf>bl { display: grid ; border: 1px solid var(--bc); border-radius: 22px; width: 100%;background: var(--b) ; } cstf hd>f>t{font-size: 16px; font-weight: 500; color: var(--b1); opacity: 0.7; padding: 14px 36px; margin-left: 27px; } cstf hd>f>t:nth-child(1){color: var(--b1); border-bottom: 1.9px solid var(--b1); } cstf hd d {padding: 11px 22px 17px; border-bottom: 2px solid var(---bc);} cstf hd>f { display: flex ; border-bottom: 2px solid var(--bc); } cstf hd input{background: 0; padding: 0; height: auto;font-size: 16px; font-weight: 500;} cstf g {display: grid ; grid-template-rows: 30px auto;} cstf bd>gr { display: grid ; grid-template-columns: 48% 48%; padding: 22px; gap: 16px; } cstf bd f{border: 1px solid var(---bc); border-radius: 12px; display: flex ; justify-content: space-between;padding: 0 11px;align-items: center;} cstf bd input[type="checkbox"] {width: 18px;} cstf select {background: 0; width: 100%; padding: 16px 9px; margin: 0;font-size: 18px; font-weight: 300; color: var(--bor);} cstf input[type="text"] { border: 1px solid var(--bc); padding: 2px 13px; width: auto; border-radius: 8px; } cstf g:nth-child(5){grid-column: 1 / 3;} cstf ft{display: flex ; justify-content: space-between; padding: 22px 22px; background: var(--a1); border-radius: 0 0 22px 22px; } cstf ft btn {border: 1px solid var(---bc); background: var(--b); padding: 16px 25px; border-radius: 12px;font-size: 18px; font-weight: 500; color: var(--ab); opacity: 0.9; } cstf ft btn:nth-child(2){background: var(--a);color: var(---bc);opacity: 1;} cstf g>t { font-size: 16px; font-weight: 500; } cstf d>t { font-size: 16px; font-weight: 500; opacity: 1; padding: 12px 0; display: flex ; } cspr img { border-radius: 51px; height: 100px; width: 100px; } cspr>bl { background: var(--b-t77); border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px var(--bc); backdrop-filter: blur(8px); } cspr>bl>hd { display: flex ; flex-direction: column; text-align: center; } cspr bd d {display: flex;white-space: nowrap;margin-top: 15px;gap: 18px;} cspr d i { width: 25px; } cspr bd svg {fill: var(--b);} cspr d i { width: 21px; background: var(--or); padding: 4px 6px; } csia>bl>hd { display: flex ; justify-content: space-between; } csia bd { display: flex ; margin-block: 14px; gap: 10px; } csia bd i { width: 70px; height: 70px; } csia bl { background: var(--ab); padding: 13px 8px; border-radius: 15px; color: var(--b); } /* Component : StudentMinat */ bsms>bl { background: #ffffffcc; border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.05); backdrop-filter: blur(8px); display: block; width: auto; } bsms hd { display: flex ; justify-content: space-between; } bsms i { width: 29px; } csbm>bl bd>d { display: flex ; flex-direction: column; font-size: 0.9rem; margin-bottom: 11px; } csbm>bl bd>d span { margin-bottom: 4px; } csbm>bl bd>d b { display: block; height: 8px; background: var(--bc); border-radius: 8px; position: relative; overflow: hidden; } csbm>bl bd>d b>l {display: flex ;height: 100%; width: 44%; background: var(---sy); border-radius: 8px; transition: width 1s ease; } csbm>bl hd { display: flex ; align-items: center; justify-content: space-between; } bsms>bl hd>btn { display: flex ; align-items: center; justify-content: center; height: 33px; width: 33px; background: var(--bc); border-radius: 11px; } bsms>bl btn svg { fill: var(--c); } csbm>bl d:nth-child(2)>b { --clr: #181848; } csbm>bl d:nth-child(3)>b { --clr: #f7d279; } csbm>bl d:nth-child(4)>b { --clr: #f86040; } csbm>bl d:nth-child(5)>b { --clr: #b2b8f7; } cswb>bl bd { position: relative; } /*cswb>bl ft d:nth-child(1) spain { background: rgb(251, 197, 169); } cswb>bl ft d:nth-child(2) spain { background: rgb(244, 108, 55); }*/ cswb>bl bd>i { height: 161px; width: 144px; margin: 11px auto; } cswb>bl bd>d { position: absolute; display: flex ; flex-direction: column; text-align: center; inset: 0; background: transparent; align-items: center; justify-content: center; } cswb>bl { background: var(--b-t77); border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); backdrop-filter: blur(8px); } cswb>bl ft { display: flex ; align-items: center; justify-content: space-between; gap: 7px; font-size: 0.88em; } cswb>bl ft>d { display: grid ; grid-template-columns: 17px auto; } cswb>bl ft>d spain { height: 11px; width: 11px; border-radius: 55%; margin: auto; } cswb>bl .underlay { stroke-width: 11px; fill: transparent; stroke-linecap: round; stroke-linejoin: round; stroke: #fbc5a9; } cswb>bl #circle-graph-1 { stroke: url(#gradient-1); stroke-width: 11px; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } cswb>bl .chart-circle { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } #circle-graph-2 { stroke: url(#gradient-2); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } cswb>bl .charts-container { padding: 20px; width: 100%; max-width: 1024px; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } cswb>bl .chart { color: #4a667a; text-align: left; position: relative; height: auto; background-color: #1e2730; display: inline-block; float: left; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 10px; padding: 15px 20px 65px 20px; } cswb>bl.chart.circle { padding: 15px 20px 40px 20px; } @media screen and (max-width: 700px) { cswb>bl .chart { width: calc(100% - 20px); } } @media screen and (min-width: 700px) { cswb>bl .chart { width: calc(50% - 20px); } } cswb>bl .title { font-size: 22px; margin-bottom: 12px; } cswb>bl .chart-circle { display: inline-block; position: relative; } cswb>bl .chart-svg { position: relative; } cswb>bl .circle-percentage { position: absolute; color: white; font-size: 48px; left: 50%; top: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 480px) { cswb>bl .circle-percentage { font-size: 32px; } } cswb>bl .align-center { text-align: center; } cswb>bl .chart-line { width: 80%; } cswb>bl .valueX { font-size: 14px; } cswb>bl .chart-values { text-align: right; font-size: 18px; position: absolute; right: 0; bottom: 0; padding: 15px; } cswb>bl .h-value { -moz-transition: ease-in-out 700ms; -o-transition: ease-in-out 700ms; -webkit-transition: ease-in-out 700ms; transition: ease-in-out 700ms; opacity: 0; } cswb>bl .h-value.visible { opacity: 1; } cswb>bl .percentage-value { -moz-transition: ease-in-out 700ms; -o-transition: ease-in-out 700ms; -webkit-transition: ease-in-out 700ms; transition: ease-in-out 700ms; color: #48c15e; margin-top: 2px; opacity: 0; } cswb>bl .percentage-value.negative { color: #ef6670; } cswb>bl .percentage-value.visible { opacity: 1; } cswb>bl .total-gain { color: white; font-size: 48px; } cswb>bl .triangle { width: 0; height: 0; border-style: solid; border-width: 28px 0 0 28px; position: absolute; left: 0; bottom: 0; } cswb>bl .triangle.red { border-color: transparent transparent transparent #ef6670; } .triangle.green { border-color: transparent transparent transparent #48c15e; } cswb>bl .horizontal, .vertical { stroke-width: 0.1; stroke: #4a667a; } cswb>bl .cf:before, cswb>bl .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } canvas { width: 224px; height: 216px; } ccpp { display: block; margin: auto; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 10px 3px var(--bc); } ccpp bl { display: grid ; } ccpp hd { display: grid ; align-items: center; gap: 22px; position: relative; } ccpp hd>i { height: fit-content; width: fit-content; position: absolute; top: 62px; left: 22px; } ccpp hd> i img { width: 88px; height: 88px; border-radius: 33px; object-fit: cover; border: solid 2px var(--b-t95); } ccpp cover { display: grid ; height: 111px; } ccpp cover i { height: 100%; } ccpp cover img { width: 100%; height: 111px; object-fit: cover; } ccpp hd d h2 { margin: 0; font-size: 20px; } ccpp hd d t { display: block; margin: 5px 0 11px; font-size: 14px; color: #666; } ccpp hd d btn { background: var(--lgaa); color: var(--b); padding: 11px 22px; margin-right: 11px; border-radius: 11px; font-size: 14px; } ccpp bd { display: grid ; padding: 22px; } ccpp bd h3 { margin-bottom: 22px; font-size: 18px; color: var(--c); } ccpp bd d { margin-bottom: 16px; } ccpp bd t { display: block; margin-bottom: 5px; font-size: 14px; color: #555; } ccpp bd i svg { width: 20px; height: 20px; fill: var(--ct); } ccpp d { background: var(--0); } ccpp hd div { display: grid ; padding: 22px; padding-top: 33px; } ccpp div d { display: grid ; grid-template-columns: auto auto; width: fit-content; padding: 11px 0; } ccpp cin {display: grid ; gap: 8px; padding-bottom: 16px; } ccpp cin label { font-size: 14px; font-weight: 600; } ccpp input { padding: 7px 11px; border-radius: 7px; box-shadow: 0px 0px 0px 1px rgb(232 232 232); height: 22px; background: var(--0); width: -webkit-fill-available; } ccpp cover btn { position: absolute; background: var(---b); backdrop-filter: blur(9px); height: 22px; width: 22px; top: 16px; right: 16px; padding: 7px; border-radius: 22px; } cover svg { fill: var(--c); } ccpp cover input { padding: 0; position: absolute; inset: 0; height: 33px; width: 33px; opacity: 0; z-index: 99; } @media screen and (max-width: 999px) { ccpp { margin: 0 11px; } } /* Component : StudentReward */ csrw>bl { width: 100%; background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } csrw>bl hd>t { font-size: 18px; font-weight: bold; color: #111; } csrw>bl hd>p { font-size: 13px; color: #777; margin-top: 6px; } csrw>bl>bd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; } csrw>bl bd>i { width: 32px; height: 32px; } csrw>bl bd>i img { width: 100%; height: 100%; object-fit: contain; } csrw>bl d { display: flex ; align-items: center; } csdr bl d { display: flex ; align-items: center; } cspp>bl hd { display: flex ; align-items: center; justify-content: space-between; } cspp>bl hd>btn { display: flex ; align-items: center; justify-content: center; height: 33px; width: 33px; background: var(--bc); border-radius: 11px; } cspp>bl btn svg { fill: var(--c); } cspp>bl bd>d { display: grid ; grid-template-columns: 14px auto 33px; margin-bottom: 7px; padding: 7px; align-items: center; } cspp>bl d p { margin: 0; font-size: 0.77em; } cspp>bl d>span { height: 100%; width: 4px; background: rgb(24, 24, 72); border-radius: 11px; } cspp>bl d:nth-child(3)>span { background: rgb(247, 210, 121); } cspp>bl d:nth-child(4)>span { background: rgb(244, 108, 55); } /* Component : StudentSchedule */ cscr>bl { background: var(--b-t77); border-radius: 22px; padding: 22px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); backdrop-filter: blur(8px); width : auto;} cscr>bl hd { display: flex ; align-items: center; justify-content: space-between; } cscr>bl hd>btn { display: flex ; align-items: center; justify-content: center; height: 33px; width: 33px; background: var(--bc); border-radius: 11px; } cscr>bl btn svg { fill: var(--c); } cscr>bl bd>d { display: grid ; grid-template-columns: 14px auto 33px; margin-bottom: 7px; padding: 7px; align-items: center; } cscr>bl d p { margin: 0; font-size: 0.77em; } cspp>bl d>span { height: 100%; width: 4px; border-radius: 11px; } cspp d:nth-child(1)span { background: var(--or);} cspp d:nth-child(2) span{ background: var(---gn);} cspp d:nth-child(3)span { background: var(--or);} /* Component : StudentSkill */ cssk>bl { background: var(--b-t77); border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px var(--bc); backdrop-filter: blur(8px); } cssk>bl bd>i { display: flex; justify-content: center; } cssk>bl hd>btn { display: flex ; align-items: center; justify-content: center; height: 33px; width: 33px; background: var(--bc); border-radius: 11px; } cssk>bl btn svg { fill: var(--c); } cssk>bl hd { display: flex ; align-items: center; justify-content: space-between; } cssk>bl img{width :166px; height : 166px ;} cssk>bl bd> csns bd { display: flex ; justify-content: center; } .softSkillChart { width: 300px; height: 300px; } /* Component : StudentTeacher */ csrh>bl { background: #fff; border-radius: 16px; padding: 20px; width: auto; box-shadow: 0 4px 16px rgba(0,0,0,0.05); } csrh>bl hd>t { font-size: 1.2rem; font-weight: bold; color: #111; } csrh>bl hd>p { font-size: 0.85rem; color: #777; margin-bottom: 15px; } csrh>bl bd>f { display: flex; gap: 15px; flex-wrap: wrap; } csrh>bl bd>d { display: flex; flex-direction: column; align-items: center; width: 70px; } csrh>bl bd>d img { width: 100%; height: 100%; object-fit: cover; } csrh>bl bd>d>t { margin-top: 7px; font-size: 0.8rem; text-align: center; } csrh>bl d>i { height: 66px; width: 66px; overflow: hidden; border-radius: 55%; } csrh>bl hd { display: flex ; align-items: center; justify-content: space-between; } csrh>bl hd>btn { display: flex ; align-items: center; justify-content: center; height: 33px; width: 33px; background: var(--bc); border-radius: 11px; } csrh>bl btn svg { fill: var(--c); } csup { display: block; margin: auto; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 10px 3px var(--bc); } csup bl { display: grid ; } csup hd { display: grid ; align-items: center; gap: 22px; position: relative; } csup cdp i { height: fit-content; width: fit-content; position: absolute; top: -66px; left: 22px; } csup cdp i img { width: 88px; height: 88px; border-radius: 33px; object-fit: cover; border: solid 2px var(--b-t95); } csup cover { display: grid ; height: 111px; } csup cover i { height: 100%; } csup cover img { width: 100%; height: 111px; object-fit: cover; } csup hd d h2 { margin: 0; font-size: 20px; } csup hd d t { display: block; margin: 5px 0 11px; font-size: 14px; color: #666; } csup bd { display: grid ; padding: 22px; } csup bd h3 { margin-bottom: 22px; font-size: 18px; color: var(--c); } csup bd d { margin-bottom: 16px; } csup bd t { display: block; margin-bottom: 5px; font-size: 14px; color: #555; } csup bd i svg { width: 20px; height: 20px; fill: var(--ct); } csup d { background: var(--0); } csup hd div { display: grid ; padding: 22px; padding-top: 33px; } csup div d { display: grid ; grid-template-columns: auto auto; width: fit-content; padding: 11px 0; } csup cin {display: grid ; gap: 8px; padding-bottom: 16px; } csup cin label { font-size: 14px; font-weight: 600; } csup input { padding: 7px 11px; border-radius: 7px; box-shadow: 0px 0px 0px 1px rgb(232 232 232); height: 22px; background: var(--0); width: -webkit-fill-available; } csup cdp { position: relative; } csup cdp btn.file { left: 82px; top: 0; } csup btn.file { position: absolute; background: var(---b); backdrop-filter: blur(9px); height: 22px; width: 22px; top: 16px; right: 16px; padding: 7px; border-radius: 22px; } csup btn.file svg { fill: var(--c); } csup btn.file input { padding: 0; position: absolute; inset: 0; height: 33px; width: 33px; opacity: 0; z-index: 99; } @media screen and (max-width: 999px) { csup { margin: 0 11px; } } bsdo>bl {display: block;background: var(--lg-bl);border-radius: 12px;padding: 24px;box-shadow: 0 2px 10px var(---bc);position: relative;margin-block: 2rem;} bsdo>bl>hd { display: flex ; justify-content: space-between; padding: 12px 0px; border-bottom: solid 1px var(---bc); } bsdo hd i { width: 16px; } bsdo hd svg { fill: var(---b1); transform: rotate(-95deg); } bsdo>bl>bd { display: block; background: var(---ba); padding: 20px; } bsdo bd dv { display: flex ; gap: 11px; } bsdo bd btn { display: block; padding: 6px 26px; border-radius: 24px; border: solid 1px var(--bc); font-size: 14px; } bsdo.Overall bars { display: block; } bsdo.Medical bars { display: block; } bars { display: none; } bsdo.Overall btn:nth-child(1) { background: var(--bc);border: solid 1px var(--b1); } bsdo.Medical btn:nth-child(2) { background: var(--bc);border: solid 1px var(--b1); } cssh bl { display: flex; justify-content: space-between; align-items: center; width: 100%;} cssh {display: flex ; margin: auto; } cssh hd t { font-size: 22px; font-weight: 600; color: var(--c);} cssh ft { display: flex; gap: 12px; } cssh btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; user-select: none; } cssh btn:last-child { background: var(--aa); color: var(--b-t95); border: 1px solid var(--btn10);} cssh btn:first-child svg { width: 16px; height: 16px; } cssh i {width: auto; height: auto;} cssh btn:first-child {border: 1px solid var(--bor);color: var(--c);} @media screen and (max-width: 999px) { cssh hd t { font-size: 0.88em; } } cstsl>bl { display: block; border: 1px solid var(--ba1); border-radius: 12px;width: 100%; } cstsl bd { display: block; border-top: 1px solid #eee; } cstsl>bl>bd { overflow: scroll;} cstsl table {border-collapse: collapse; font-size: 14px; color: var(--b1); width: 100%;} cstsl thead tr { background-color: var(--a1); display: flex ; } cstsl tr { border-bottom: 1px solid var(--ba1) ; } cstsl th { padding: 12px 16px; border-bottom: 0; font-weight: 600; text-align: center; width: -webkit-fill-available; } cstsl td i { display: flex; align-items: center; gap: 8px; } cstsl td { border-bottom: 0; padding: 13px 0; text-align: center; width: -webkit-fill-available; } cstsl img { width: 32px; height: 32px; border-radius: 50%; } cstsl .status { padding:4px 29px; background: var(--aa); color: var(--b-t95); border-radius: 12px; font-size: 16px; text-align: center; display: inline-block; } cstsl tr { border-bottom: 1px solid var(--ba1); display: flex ; justify-content: space-between; } cstsl .actions { display: flex; gap: 10px; font-size: 16px; cursor: pointer; } cstsl .actions span:hover { color: #6c5ce7; } cstsl svg {width: 25px; height: 25px; } cstsl f { display: flex ; gap: 4%; align-items: center; } cstsl td:first-child i {width: auto; } cstsl td:last-child i {width: 42px; } cstsl th:last-child{border-radius: 0 12px 0 0;} cstsl th:first-child{border-radius: 12px 0 0 0;} cstsl th:last-child f {justify-content: center;} cstsl f:last-child {padding: 0 0 0 21px;} cstsl ft { display: grid ; grid-template-columns: 31% auto;padding: 0px 34px 12px 13px; } cstsl right { display: flex ; justify-content: end; gap: 10px; align-items: center; } cstsl ft btn { font-size: 16px; font-weight: 500; color: var(--b1); background: 0; border: 1px solid var(---bc); border-radius: 6px; padding: 5px 11px; } cstsl right svg { width: 27px; fill: var(--aa); height: 16px; } cstsl ft .PreviouL { display: flex ; align-items: center; gap: 8px; border-radius: 8px; font-size: 16px; font-weight: 400; padding: 9px 30px 9px 30px; color: #2B0F49; background: 0; border: 1px solid #EAE7EE; } cstsl right btn:nth-child(1) i{rotate: 357deg; width: 27px; height: 30px;} cstsl .an3 { background-color: 6F2BFF; color: white; } cstsl { display: flex ; } cstsl d { display: grid ; width: 100%; min-width: 1221px;} csol tr { position: relative; overflow: hidden; } csol a{ transition:99ms; } csol a:hover { background: var(--bcc); } csol td t { font-weight: bold; } cymo hd dv { display: flex ; align-items: center; gap: 8px; margin-bottom: 16px; } cymo span { display: flex ; white-space: nowrap; align-items: center; font-size: 14px; opacity: .4; } cymo hd i { width: 12px; height: 11px; } cymo svg { fill: var(--b1); } cymo span:nth-child(3) { opacity: unset; } cymo bl { display: block; } cymo h2 { font-size: 28px; margin-block: 11px; color: var(--b1);} cymo bd { display: block; border-bottom: solid 1px var(---bc); } cymo ft i { width: 36px; height: 32px; background: var(--a1); padding: 13px 15px; border-radius: 8px;} cymo ft { flex: 1; display: flex ; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; padding: 60px 20px; } cymo bl { display: block; margin-block: 2rem; } cymo p { font-size: 18px; color: var(--btn11); } @media(max-width:999px){ cymo hd { display: flex ; } cymo hd dv {gap:3px; } cymo bl {padding: 9px; } } /* Component : SubmitReview */ csvw>bl { display: block; background: var(--b-t95); border-radius: 11px; box-shadow: 0 2px 10px var(---bc); padding: 22px; width: 600px; height: auto; margin: 7px; } csvw hd { display: flex ; justify-content: space-between; align-items: center; } csvw hd h3 { font-size: 1em; font-weight: bold; } csvw hd i { width: 12px; height: 12px; padding: 11px; transition: 333ms; border-radius: 7px; } csvw hd i:hover { background: var(--btn3); opacity: 0.6; } csvw hd path { fill: var(--b1); } csvw bd { display: block; } csvw bd p { font-size: 0.88em; font-weight: 500; margin: 0; } csvw bd ul { padding-left: 22px; } csvw bd li { font-size: 0.88em; font-weight: 500; margin-top: 7px; } csvw bd span { font-size: 1em; font-weight: 500; } csvw bd a { font-size: 1em; font-weight: 500; text-decoration: underline; color: var(--a); } csvw ft { display: block; margin-top: 11px; } csvw ft span { font-size: 0.88em; font-weight: 500; } csvw ft a { font-size: 0.88em; font-weight: 500; text-decoration: underline; color: var(--a); } ctco bl { border: 1px solid var(---bc); border-radius: 7px;padding: 12px; width: 100%;} ctco hd { padding: 11px 0px;display: flex ; justify-content: space-between;} ctco hd>a { align-items: center;display: grid ; grid-template-columns: auto 33px; color: var(--at); } ctco hd>h3 { display: flex ; align-items: center; font-size: 15px; font-weight: 700; } ctco bd { display: flex ; justify-content: space-around; background: var(--a1); border-radius: 7px; padding: 7px; gap: 7px;} ctco wr { position: relative;display: flex ; width: 100%; height: 7px; border-radius: 7px; background-color: #BD9DFF; } ctco ss::after {position: absolute; border-radius: 11px; content: ""; width: 50%; height: 100%; background-color: #6F2BFF; } ctco dt.left { width: fit-content;text-align: center; } ctco dt>d { background: none;display: grid ; align-items: center; background: none; grid-template-columns:100px 60px 25px; gap: 5px;} ctco star { align-items: center;display: grid ; grid-template-columns: 10px 10px 10px 10px 10px; justify-content: center; gap: 5px; padding: 12px 0px; } ctco d>i { width: 100px; height: 100px; border-radius: 50%; } ctco star>i { width: 15px; height: 15px; } dt.left p { font-size: 11px; font-weight: 600; opacity: 0.44;} ctco ft>d { display: grid ; align-items: center; grid-template-columns: auto auto auto; padding: 11px; } ctco ft d svg { width: 80px; height: 125px; } ctco div { display: flex ; flex-direction: column; text-align: center; } ctco ft d>p { font-size: 15px; font-weight: 400; } ctco ft>p { font-size: 14px; font-weight: 600; margin: 0; padding: 5px; opacity: 0.44;} ctco span { font-size: 12px; font-weight: 500; opacity: 0.44; padding: 3px 0px; } ctco name { font-weight: 600; display: block; margin-left: 22px; } ctco hd path { fill: var(--at); } ctco hd i { width: 34px; height: 34px; } ctco d img { width: 100px; border-radius: 50%; border: solid 4px var(--bc); box-shadow: var(--bs-br); } @media only screen and (max-width: 999px) { ctco dt>d {grid-template-columns:100px 90px 25px; } ctco bl{margin: auto; width: 385px;} } atno>bl { margin-bottom: 11px; display: block; border: 1px solid var(--aat); border-radius: 7px; padding: 11px; } atno hd { display: grid ; grid-template-columns: 100px 150px auto; } atno hd>i { width: 100px; height: 100px; } atno hd bio { display: block; height: 27px; width: 234px; margin: 0; padding: 11px; } atno hd h2 { display: flex ; align-items: center; font-size: 18px; font-weight: 700; } atno h2>i { width: 9px; height: 9px; } atno p {opacity: 0.44; margin: 0; padding: 5px 0px; font-size: 15px; font-weight: 600; } atno bd>d { background: none;display: grid ; grid-template-columns: 33px auto 33px;align-items: center; font-size: 15px; font-weight: 600; margin: 0; padding: 0; } atno btns { display: flex ; align-items: center; gap: 5px; } atno hd btn { padding: 2px 5px; border-radius: 9px; border: 1px solid ; font-size: 13px; font-weight: 600; } atno hd btn:nth-child(2) { padding: 2px 5px; border-radius: 9px; border: 1px solid; font-size: 13px; font-weight: 600; display: grid ; grid-template-columns: 11px auto; align-items: center; } atno hd btn:hover { background: var(--c); color: var(--b); } atno img { width: 100px; height: 100px; border-radius: 50%; border: solid 4px var(--bc); box-shadow: var(--bs-br); } @media only screen and (max-width: 999px) { atno bl {margin: 11px;} atno hd { display: flex ; flex-direction: column; gap: 44px; } }btno { display: flex ; position: relative; align-items: center; justify-content: space-between; padding: 11px;background-color: #fff;} btno>bl hd { overflow: scroll; } btno>bl { display: grid ; grid-template-columns: auto 106px 0px; } btno mg { margin: 0px 11px 0px 0px;display: flex ; align-items: center; overflow: scroll; gap: 5px; } btno hd a { display: flex ; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--bc); font-size: 12px; line-height: 16px; font-weight: 400; column-gap: 6px; min-width: fit-content} btno hd a:nth-child(1) { background: var(--a); color: var(--b); border: var(--a);} btno bd { display: flex ; align-items: center; padding: 8px 12px; border: 1px solid var(--bc); border-radius: 6px; } btno bd btn { display: block; } btno bd btn img { width: 16px; height: 16px; } btno bd>input[type="search"] { outline: 0; border-radius: 4px 7px; display: block; border: 0; padding: 0px 5px; height: unset; font-weight: 400; width: 66px; color: #594173; } btno i { width: auto; } btno bd svg { width: 18px; fill: var(--c); } ctso btns { display: flex ; align-items: center; gap: 11px; } ctso bd>btns {padding: 7px;} ctso hd btn { border-radius: 10px; padding: 4px 11px; font-size: 15px; font-weight: 500; border: 1px solid var(---bc);} ctso hd btn:hover { border: 1px solid; color: var(--aa); } ctso bt {padding: 11px;display: flex ; align-items: center; justify-content: space-between; } ctso bt>btn { border-radius: 10px; padding: 0px 11px; font-size: 15px; font-weight: 500; border: 1px solid var(---bc); margin: 11px 0px; display: grid ; align-items: center; grid-template-columns: 33px auto;} ctso bd btn:hover {border: 1px solid; color: var(--aa); } ctso bd btn path {fill: var(--b1); } ctso h4 { font-size: 20px; font-weight: 500; } ctso bd { display: flex ; flex-direction: column; border-radius: 7px; padding: 11px 7px; background: var(--a1); margin: 11px 0px; } ctso btns btn { border-radius: 10px; padding: 4px 11px; font-size: 15px; font-weight: 500; border: 1px solid var(---bc); } @media only screen and (max-width: 999px){ ctso bl { padding: 11px; } } ctue bl { display: grid ; gap: 22px; padding: 22px; border-radius: 22px;box-shadow: 0px 0px 6px 1px var(--bc); } ctue hd { display: grid; gap: 11px; text-align: center; } ctue hd d:first-child { display: grid ; justify-content: space-between; align-items: center;} ctue i img { width: 66px; height: 66px; border-radius: 50%; box-shadow: var(--bs); } ctue ft btn { padding: 11px 22px; border-radius: 11px; background: var(--bor); color: var(--b-t95); } ctue form { display: grid ; gap: 22px; } ctue cin { display: grid; gap: 8px; } ctue input { padding: 7px 11px; border-radius: 7px; box-shadow: 0px 0px 0px 1px rgb(232 232 232); height: 22px; background: var(--0); width: -webkit-fill-available; } ctue ft { display: flex; justify-content: flex-end; gap: 11px; padding-top: 11px; } ctue cin > select { padding: 11px; border-radius: 11px; box-shadow: 0px 0px 0px 1px var(--bc); background: var(--0); margin: 0; border: unset; } ctue d {background:var(--0);} ctue cin d { display: flex ; border-radius: 11px; box-shadow: 0px 0px 0px 1px var(--bc); align-items: center; padding: 0 11px; } ctue cin d select { background: var(--0); border: unset; margin: 0; padding: 11px; } ctue cin d input { box-shadow: unset; } ctue cin label { font-size: 14px; font-weight: 600; } ctue p { text-align: start; opacity: 0.66;margin-bottom:0; } ctue ft btn.this { background: var(--lgaa); color: var(--aat);} @media (max-width: 999px) { ctue bl { margin: 22px 11px; } } dtco { display: flex ; flex-direction: column; position: relative; border: 1px solid #d9d9d9; border-radius: 12px; padding: 15px 17px; background: #ffffff; max-width: 360px; gap: 7px; min-width: 360px; width: 100%; flex-wrap: wrap; } dtco>bl { display: flex ; flex-direction: column; gap: 11px; } dtco hd i { max-width: 60px; max-height: 60px; border-radius: 50%; overflow: hidden; } dtco hd { display: flex ; align-items: center; margin: 3px 3px; } dtco hd pro { height: auto; width: auto; margin-right: 14px; } dtco hd pro svg.pro { width: 56px; } dtco hd t h4 { font-size: 16px; color: #140722; } dtco hd t p { margin: 0; color: var(--c); font-size: 16px; font-weight: 400; } dtco bd { display: flex ; align-items: center; } dtco bd p { margin: 0; background: #F7F4FA; font-size: 14px; padding: 7px 10px; border-radius: 10px; color: #594173; } dtco ft { display: flex ; justify-content: space-between; align-items: center; padding: 4px; } dtco bd { display: flex ; align-items: center; margin-top: 3px; } dtco mid { display: flex ; width: 2px; height: 21px; background: #EAE7EE; } dtco img.rateing { width: 20px; } dtco ft left t { font-size: 15px; color: #594173; } dtco img.clock { width: 17px; margin-top: 0px; } dtco ft left svg { width: 18px; } dtco ft i { width: auto; height: auto; } dtco right{display: flex;align-items: center;} dtco left{display: flex;align-items: center;} ctgo { border-radius: 15px; font-family: sans-serif; background: var(---bc); display: block; margin-bottom: 1.5rem; width: 18.75rem; } ctgo bl { display: flex ; flex-direction: column; background: var(--b); height: 18.375rem; border-radius: 10px; border: 1px solid var(--bor); } ctgo hd { background-image: url(-/School/asset/learnlanguage.png); color: var(---bc); padding: 12px; min-height: 70px; border-radius: 10px 10px 0px 0px; background-size: cover; } ctgo hd h3 { font-size: 1.375rem; font-weight: 400; line-height: 1.75rem; } ctgo hd p { margin: 4px 0 0; font-size: 13px; } ctgo bd { flex-grow: 1; } ctgo ft { display: flex ; justify-content: end; align-items: center; padding: 8px 12px; border-top: 1px solid var(--bor); flex-shrink: 0; gap: 1rem; } ctgo hd dv { display: flex ; justify-content: space-between; } ctgo hd i{height:30px;width:30px;} ctgo hd svg { fill: var(---bc); filter: drop-shadow(1px 4px 6px black); } ctgo ft svg {fill:var(---c);} ctgo ft i{height:20px;width:20px;} ctgo hd h3:hover { text-decoration: underline; } ctgo hd p:hover { text-decoration: underline; } @media(max-width:999px){ ctgo { width: unset; } } ctcs {display: none;max-width: 1000px;margin: auto;} scso.ct ctcs { display: block; } ctcs bl {display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 0px 0px 20px 20px; padding: 24px; border: solid 1px var(---bc);} ctcs hd i { height: 20px; width: 20px; left: .5rem;} ctcs hd svg { fill: var(---c); } ctcs hd dv { display: flex ; font-weight: 500;} ctcs hd b { margin-right: .5rem; } ctcs bd p:hover { color: var(--b1); } @media (max-width: 999px) { ctcs { padding: 12px 16px; } ctcs bl { padding: 12px 16px; bottom: 25px; } } btso{display: block; max-width: 1000px; margin: auto;} btso bd { display: flex ; gap: 2rem; } @media (max-width: 768px) { btso { padding: 12px 16px; } btso bd { display: block; } } btto hd { display: block; padding: 24px 32px 16px; border-bottom: 1px solid var(---bc); } btto hd dv { display: flex ; align-items: center; gap: 8px; margin-bottom: 16px; } btto h2 { font-size: 28px; margin-block: 11px; color: var(--b1);} btto bd {display: block;padding: 24px 32px} btto bd table thead th { padding: 16px 12px; text-align: center; font-size: 14px; font-weight: 600; border: 1px solid var(---bc); background: var(--btn8); } btto bd table tbody tr:hover {background: var(--btn8);} btto th span { display: flex ; justify-content: end; } btto bd table tbody td { padding: 20px 12px; border: 1px solid var(---bc); text-align: center; font-size: 14px; vertical-align: middle; } btto bd table tbody td:first-child { font-weight: 600; text-align: left; padding-left: 16px; background: var(--btn8); } btto bd table tbody td.empty-state { color: var(--btn11); font-style: italic; background: var(--btn8); } btto hd i { width: 12px; height: 11px; } btto svg { fill: var(--b1); } btto hd span { display: flex ; white-space: nowrap; align-items: center; font-size: 14px; opacity: .4; } btto hd span:nth-child(3) { opacity: unset; } btto bd table thead th:first-child { text-align: left; display: flex ; flex-direction: column; padding: 7px 5px; color: var(--btn11); } @media (max-width: 768px) { btto bl { overflow: scroll; } btto hd { padding: 16px 20px 12px; } btto hd h2 { font-size: 24px; } btto bd { padding: 16px 20px; overflow-x: auto; } btto bd table { min-width: 700px; } btto bd table thead th, btto bd table tbody td { padding: 12px 8px; font-size: 12px; } } btpo bl { width: 200px; background:var(--b-t95); border: 1px solid var(--bc); border-radius: 8px; box-shadow: 0 2px 8px var(--a4); z-index: 999999999; position: absolute; padding: 12px; border-radius: 9px;} btpo bd dv { display: flex ; background: var(--bc); } btpo bd input { height: 20px; background: 0; } btpo bd dv { display: flex ; background: var(--bc); padding: 4px 11px; font-size: 12px; border-radius: 10px 10px 0px 0px; border-bottom: solid 1px var(--b1);color: var(--rd); } btpo bd span:nth-child(2) { display: flex ; justify-content: end; font-size: 12px; color: var(--rd); } btpo hd { margin-bottom: 9px; display: block; } btpo ft { display: flex ; justify-content: end; gap: 9px; font-size: 13px; margin-top: 18px; } btpo ft span:nth-child(1) { padding: 2px 12px; opacity: unset; border-radius: 20px; } btpo ft span { opacity: .4; } btpo ft span:nth-child(1):hover{ background: var(---sy);} scso.ag btpo { display: block; } btpo { display: none; } ctge { display: block;border: 1px solid var(--bor); background: var(--b); max-width: 800px; margin: 20px auto; } ctge hd { display: block; border-bottom: 1px solid var(--bor);padding: 12px 16px;} ctge strong { color: var(--b1); font-size: 16px; display: block; margin-bottom: 4px; } ctge hd p { font-size: 14px; color: var(--btn11); margin-top: 0; } ctge bd { display: block; margin-top: 15px;padding: 12px 16px; } ctge bd dv { display: flex; gap: 10px; margin-bottom: 10px; } ctge dv btn { display:block; padding: 8px 14px; font-size: 14px; border: 1px solid var(--bor); color: var(--b1); border-radius: 4px; position: relative; user-select: none; } ctge div { display: block; max-width: 340px; border: 1px solid var(--bor); border-radius: 4px; font-size: 14px; line-height: 14px; padding: 10px 12px; margin: 8px 0 0; position: relative; } ctge div input { display: none; } ctge div label { display:block; } ctge div btn { display: block; padding: 8px 16px; font-size: 14px; color: var(--b1); border-radius: 4px; position: relative; user-select: none; } ctge div label btn::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border-left: 6px solid var(--0); border-right: 6px solid var(--0); border-top: 6px solid var(--b1); } ctge div menu { display: none; position: absolute; left: 0; background: var(--b); border: 1px solid var(--bor); border-radius: 6px; box-shadow: 0 4px 10px var(---bc); z-index: 1; padding: 0; margin: 0; min-width: 363px; top: 51px; } ctge div input:checked + label + menu { display: block; } ctge menu item { display: block; padding: 10px 15px; font-size: 14px;} ctge menu hr { margin: 0; border: none; border-top: 1px solid var(--bor); } ctge.Specializations csse { display: block; } csse { display: none;} bpso {display: none;} ctge.Programs bpso { display: block; } ctge.Specializations bd dv btn:nth-child(1) { background-color: var(--p4); color: var(--aat); border-color: var(--p4); } ctge.Programs dv btn:nth-child(2) { background-color: var(--p4); color: var(--aat); border-color: var(--p4); } btao a { color: var(--p3); font-weight: 400; } btao { display: none; } bccn.TC btao { display: block; }/*Upcoming*/ buco bl { display: block; box-shadow: 0 2px 10px var(---bc); position: relative; background: var(--lg-bl); border-radius: 12px; padding: 20px; border: solid 1px var(---bc); } buco hd span { font-size: 20px; } buco p { font-size: 14px; opacity: .7; } buco ft { display: flex ; justify-content: flex-end; } buco ft a { color: var(--p3);padding: 6px 19px} buco ft a:hover { background: var(--b); border-radius: 20px; } bvpo hd svg {fill: var(--p4); } bvpo hd i { width: 26px; } bvpo hd { display: flex ;padding-bottom: 20px; } bvpo bd img { border-radius: 0px; object-fit: cover; width: 100%; } bvpo bd div { display: flex ; flex-direction: column;flex: 0 0 34%;gap: 12px;} bvpo>bl>bd { display: flex ; gap: 20px; } bvpo bd b { font-size: 15px; font-weight: 500; } bvpo bd d { font-size: 13px; opacity: .5; color: var(---b); } bvpo d span:nth-child(2):before { content: ""; display: inline-block; width: 2px; height: 2px; background-color: var(--b1); border-radius: 50%; margin: 0 4px; } @media(max-width:999px){ bvpo bd div { margin-bottom: 20px; } bvpo>bl>bd { display: block; } }/*Video_Stories*/ cvss { display: block; padding: 16px; background: var(--b-t95); border-radius: 12px; box-shadow: 0 2px 10px var(---bc); } cvss hd div { display: flex ; gap: 12px; align-items: center; } cvss hd i { width: 40px; height: 40px; } cvss hd { display: flex ; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--a1); margin-bottom: 24px; } cvss bd{display:none;} cvss.vt bd { display: block; } cvss bd div{ display: grid ; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 16px; margin-left: 24px;} cvss bd ul { list-style-type: none; display: flex ; align-items: flex-start; gap: 7px; margin: 0 -24px; padding: 0;} cvss bd li {text-align: center; overflow: hidden; transition: transform .3s linear; width: 84px; } cvss bd dv { border-radius: 100px; display: inline-flex ; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 16px 0 8px; cursor: pointer; background: none; padding: 2px; position: relative; } cvss bd dv:before { content: " "; display: inline-block; height: 16px; width: 120%; position: absolute; background: var(---b); transform: rotate(45deg) translateY(50px); box-shadow: 0 0 16px 2px var(---b); z-index: 2; opacity: 0; animation-name: _4b0f; animation-delay: 2s; animation-duration: 4s; animation-timing-function: linear; animation-fill-mode: forwards; animation-iteration-count: infinite; } cvss dv i { width: 100%; height: 100%; overflow: hidden; background-color: var(---bc); border-radius: 100px; display: inline-flex ; align-items: center; justify-content: center; } cvss b i { width: 24px; height: 24px; } cvss dv img { max-width: 90%; min-width: 42%; min-height: 90%; position: relative; border-radius: 50px; z-index: 4;} cvss dv svg { fill: none; stroke: var(--aa); stroke-linecap: round; stroke-width: 2px; stroke-dasharray: 1; stroke-dashoffset: 0; position: absolute; width: 84px; height: 84px; } @keyframes _4b0f{ 0% {opacity: 0;transform: rotate(45deg) translateY(50px);} 10% {opacity: 1;transform: rotate(45deg) translateY(0);} 20% {opacity: 1;transform: rotate(45deg) translateY(-50px);} 100% {opacity: 0;transform: rotate(45deg) translateY(-100px);}} @media(max-width:999px){ cvss bd ul { width: auto; overflow-x: scroll; overscroll-behavior-x: contain; padding: 1px; } cvss bd div { display: grid ; grid-auto-flow: column; grid-auto-columns: max-content; column-gap: 16px; transition: transform .25s ease-in-out; margin-left: 20px; } }/* Voiceover_Header */ cvho { display: flex ; justify-content: space-between; align-items: center; width: 100%; max-width: 1280px; margin: auto; } cvho bd { display: flex ; align-items: center; gap: 13px;} cvho bd btn { display: flex ; color: var(--b1); border: 1px solid var(--bor); border-radius: 7px; padding: 7px; } cvho i { width: auto; height: auto; } cvho bd btn.cvao { background-color: var(--aa); color: var(--lg-bl);gap: 7px; align-items: center; } cvho svg { width: 12px; fill: var(--aat); } cvho hd t { font-size: 20px; color: var(--b1); font-weight: 500; } /* Voiceover_Speeches */ cvso { display: flex ; flex-direction: column; width: 97%; max-width: 1280px; border: 1px solid var(--bor); border-radius: 12px; padding: 12px; margin: auto; margin-top: 26px;} cvso hd { display: flex ; justify-content: space-between; align-items: center; margin: 0px 0px 18px 0; } cvso hd btn { display: flex ; background-color: var(--aat); border-radius: 11px; color: var(--c); font-size: 16px; font-weight: 500; padding: 11px; align-items: center; gap: 4px; } cvso hd i { width: auto; height: auto; } cvso hd svg{width: 12px; fill: var(--b1);} cvso bd bl { display: flex ; width: 100%; } cvso bd { display: flex ; flex-direction: column; } cvso bl btn { display: flex ; width: 89%; height: auto; border: 1px solid var(--bor); border-radius: 9px; justify-content: space-between; padding: 9px;color: var(--c); } cvso bl i { width: auto; height: auto; } cvso bl form { width: 25%; } cvso bl svg { width: 20px; fill: var(--c); } cvso bl label { color: var(--b1); font-size: 16px; font-weight: 500; } cvso icons { display: flex ; justify-content: end; gap: 6px; align-items: center;margin: 8px 0 11px 0;;} cvso icons i { width: auto; cursor: pointer;} cvso icons svg { width: 27px; } cvso ft { display: flex ; flex-direction: column; } cvso ft i { width: auto; } cvso ft label { font-size: 16px; color: var(--b1); font-weight: 500; } cvso ft btn { display: flex ; justify-content: space-between; color: var(--c); font-size: 16px; border: 1px solid var(--bor); border-radius: 9px; padding: 9px; } cvso ft textarea { background: 0; border: 1px solid var(--bor); margin-bottom: 18px; outline: unset; resize: none;} cvso ft btn.cgrt { width: fit-content; border: 0; background-color: var(--aa); color: var(--lg-bl); padding: 9px 34px; } cvso hd>t { font-size: 17px; color: var(--b1); font-weight: 500; } @media (max-width: 999px){ cvso bl btn{width:95%;} cvso bd bl { flex-direction: column;} cvso bl form { width: 100%; } cvso{width: 94%;} } /* Voiceover_VoiceList */ cvvl { display: flex ; width: 100%; max-width: 1280px; margin: auto; margin-top: 37px; } cvvl table { width: 100%; border-collapse: collapse; background: var(--b-t95); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } cvvl th, td { padding: 12px; text-align: left; border-bottom: 1px solid var(--bo1); } cvvl th { background: var(--aat); color: var(--b1); font-size: 16px; font-weight: 500; } cvvl tr:hover { background: #f1f1f1; } cvvl .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } cvvl cis { display: flex ; align-items: center; gap: 6px;} cvvl i { width: auto; height: auto;cursor: pointer; } cvvl td { font-size: 16px; font-weight: 500; } @media (max-width: 999px){ cvvl{overflow: scroll;} cvvl table{min-width: 1111px} } cawc{ display: flex ; border: 2px solid #EAE7EE; border-radius: 8px;padding: 15px 16px;max-width: 287px;} cawc bd>p { font-size: 14px; font-family: system-ui; color: #594173; margin: 14px 0px;} cawc bl { display: flex ; flex-direction: column; } cawc btn { padding: 8px; margin: 0; background: #6F2BFF; border: 0; border-radius: 8px; } cawc hd { display: flex ; align-items: center;font-family: system-ui; } cawc hd>p { font-size: 16px; font-weight: 600; margin: 0px 11px;color: #2B0F49; } calwt { display: flex ; align-items: center; overflow: scroll; padding: 0 12px; } calwt hd { display: flex ; align-items: center; gap: 10px; margin: 15px 0px 0px 0px; width: max-content;} calwt .all1 { display: flex ; align-items: center; box-shadow: 0px 0px 2px; border-radius: 5px; background: #702dff; color: white; font-size: 14px; padding: 6px 8px; border: 1px solid #eae7ee;} calwt btn { display: flex ; border-radius: 5px; box-shadow: 0px 0px 2px; font-size: 14px; align-items: center; gap: 5px; color: #594173; padding: 5px 8px; background: white; border: 1px solid #eae7ee;} calwt btn i { width: auto; } width: max-content; @media only screen and (max-width: 999px) { calwt hd{width: max-content;} } /* chat_box*/ cchb { display: flex ; flex-direction: column; border: 1px solid var(--bor); justify-content: space-between; padding: 15px 5px; background: white; border-radius: 0 10px 10px 0; width: 77%; max-width: 852px; } cchb bl { display: flex ; flex-direction: column; height: 100%; } cchb hd { display: flex ; align-items: center; justify-content: space-between; padding: 0px 10px;} cchb hd h6 { font-size: 14px; color: var(--bt); font-weight: 500; } cchb hd left { display: flex ; align-items: center; gap: 10px; font-size: 12px; } cchb i { display: flex ; width: 40px; } cchb hd right { display: flex ; align-items: center; gap: 15px; } cchb btn.rt { display: flex ; align-items: center; border-radius: 5px; border: 1px solid var(--bc); box-shadow: 0px 0px 2px; padding: 6px 6px; gap: 5px; min-width: 151px; } cchb btn.rt r1 { display: flex ; border-radius: 9px; width: 30px; height: 20px;box-shadow: 0px 0px 2px;align-items: center; padding: 0px 3px; background: #eae7ee; } cchb btn.rt r2 { display: flex ; box-shadow: 0px 0px 2px; border-radius: 20px; width: 12px; height: 12px; background: var(--b-t95); position: relative;} cchb btn.dc { border: 1px solid var(--bc); border-radius: 5px; box-shadow: 0px 0px 2px; padding: 6px 6px; } cchb chets { display: block; align-items: center; overflow: scroll; height: 60vh; } cchb bl bd { display: flex ; align-items: center; justify-content: space-between; gap: 70px; padding: 0px 10px; overflow: scroll; overflow-y: hidden; } cchb bd btn { background: none; } cchb bd left { display: flex ; gap: 10px; align-items: end; } cchb bd p { background: var(--a1); padding: 20px 10px; border-radius: 5px; color: var(--c); font-weight: 500; font-size: 12px; } cchb bd left i { display: flex ; width: fit-content; } cchb ft { align-items: center; display: flex ; justify-content: center; } cchb ft txt { display: flex ; align-items: center; border: 1px solid; border-radius: 10px; width: 100%; height: 30px; background: var(--a1); justify-content: space-between; } ft icons { display: flex ; align-items: center; gap: 20px; width: 100%; justify-content: space-between; border-top: 1px solid var(--bc); padding: 10px 0 0 0; } icons left { display: flex ; align-items: center; gap: 10px; } icons right { display: flex ; width: 100%; justify-content: end; } cchb input[type="text"] { display: flex ; width: 100%; border: hidden; outline: unset; background: 0; }txt se { border-radius: 7px; background: #702dff; padding: 5px 10px; color: white; } cchb btn.rt r2::after { content: ''; display: flex ; position: absolute; width: 6px; border-radius: 10px; background-color: var(--aat); top: 3px; left: 3px; height: 6px; } cchb .dc>i { width: 19px; } cchb .rt t { color: var(--c); font-size: 15px; font-weight: 400; } cchb left t { font-size: 11px; color: var(--c); font-weight: 500; } cchb ft left i { width: 20px; } cchb bd right i { width: 20px; } cchb hd img { width: 40px; } cchb bd img { width: 42px; } @media (max-width: 999px){ cchb { border-radius: 14px; width: 100%; max-width: 98%; margin: auto; margin-top: 19px; } cchb bd img{ width:64px;} cchb btn.rt{width:100%;} cchb hd right{width:100%;} cchb hd left{width:100%;margin-bottom: 12px;} cchb hd{flex-direction: column;} } /* Vikas Nayak All css */ cwtbo ctbu { display: grid ; grid-template-columns: 50% 50%; gap: 1px; margin-top: 1px; } cwtbo ctbu btn { background: var(--a); display: flex ; justify-content: center; align-items: center; padding: 11px 7px; } cwtbo oo { box-shadow: unset; } cdmn { display: flex ; position: relative; margin: 20px 0px 8px 14px; } cdmn bl { display: flex; gap: 12px; overflow: auto; padding: 3px; } cdmn btn { display: flex; align-items: center; height: 37px; padding: 0px 14px; border-radius: 28px; border: 2px solid var(--bc); box-shadow: var(--bxs1); } cdmn i { width: auto; } cdmn p { color: #594173; margin-left: 10px; } cdmn img { width: 16px;height: 16px; } cdmn btn.this { background: var(--a); min-width: fit-content; cursor: pointer; border: 2px solid var(--a); box-shadow: var(--bxs); } cdmn btn.this p{ color: #ffffff;} cdmn btn.this svg{ filter: invert(1);} cdmn btn.cma { min-width: fit-content; cursor: pointer;} cdmn btn.cbas { min-width: fit-content; cursor: pointer;} cdmn btn.cbyp { min-width: fit-content;cursor: pointer; } cdmn btn.cbf { min-width: fit-content;cursor: pointer; } cdmn btn.cbr { min-width: fit-content;cursor: pointer; } cdmn btn.cbt { min-width: fit-content; cursor: pointer;} cdmn btn.cbo { min-width: fit-content;cursor: pointer; } cdmn btn.cbd { min-width: fit-content;cursor: pointer; } cdmn .cbr{fill: var(--c);} @media only screen and (max-width:430px) { cdmn btn { border-radius: 6px; background: unset; } } csrch { display: flex; flex-direction: column; padding: 16px; background: linear-gradient(166.15deg, rgba(231, 245, 253, 0.7) 0%, rgba(232, 226, 254, 0.7) 33.33%, rgba(252, 226, 240, 0.7) 66.67%, rgba(252, 235, 224, 0.7) 100%); box-shadow: var(--bs); position: relative; border: 1px solid #EAE7EE; border-radius: 12px; gap: 11px; } csrch h1 { color: #140722; font-size: 18px; font-weight: 600; } csrch bl { display: flex; align-items: center; padding: 3px 6px 3px 15px; border-radius: 39px; background: var(--a1); } bl input#srarch { border: 0; width: 100%; font-size: 12px; background: #f7f7f7; letter-spacing: 1px; font-weight: 600; color: #594173; height: fit-content; outline: unset; } csrch ft { display: flex ; align-items: center; flex-wrap: wrap; column-gap: 8px; } csrch ft it { display: flex ; align-items: center; justify-content: center; color: #594173; padding: 9px 19px; background: white; border-radius: 28px; cursor: pointer;margin-bottom: 9px; } csrch it h5 { font-weight: 500; font-size: 12px; } csrch bl a { width: 48px; } csrch img.bt { width: 78%; cursor: pointer; } /*shyochand*/ bg.bgc { position: relative; } /*main*/ d { display: block; background: var(--b-t95); } db d.main { padding: 11px; border-right: unset; display: flex ; flex-direction: column; gap: 12px; } sdsb { display: grid ; grid-template-columns: 57% auto; gap: 16px; } stcs { display: grid ; flex-wrap: ; gap: 10px; width: 100%; grid-template-columns: auto auto auto auto; } satc {display: flex ; width: 100%; } sens .main>grid {display: flex ;} scals {display: flex ; flex-wrap: wrap; gap: 7px 17px; width: 89%;margin:auto; } saiw stcs { gap: 16px; } sstt stcs { gap: 16px; } savcr stcs { gap: 16px; } @media only screen and (max-width: 999px) { stcs { grid-template-columns: auto; padding: 0px; } } 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; } 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; } strs main { width: 100%; max-width: 100%; } sens main { width: 100%; max-width: 100%; } saiw main { width: 100%; max-width: 100%; } surs main { width: 100%; max-width: 100%; } sstt main { width: 100%; max-width: 100%; } savcr main{width: 100%; max-width: 100%; margin: 0 29px;} surs .main {width: 100%; } surs scrs { display: flex ; flex-wrap: wrap; gap: 20px; } /*start*/ start aerea { top: 0 !important; } start { top: 0; border-right: 1px solid #bfb3b3; } start grid { padding: 2px 2px; margin: 3px 1px; } n { width: 100%; display: flex ; position: relative; } dnvbr { position: relative; display: flex ; width: 100%; } content { background: var(--b); left:275px; top: 0; } /* header */ strs header{ height: auto; } sens header{ height: auto; } surs d.main { min-width: 100%; margin-bottom: 18px;} surs d.aerea { justify-content: start; } /* aerea */ saiw .aerea { width: 100%; } sstt .aerea { width: 100%;margin: 0; } savcr .aerea{ width: 100%;margin: 0; } @media only screen and (min-width: 1320) { start grid h6 {background-color: azure;} } @media only screen and (max-width: 1320px) { start grid h6 {display:none;} surs scrs { justify-content: center; } } /* nav///////@media only screen and (max-width:430px) { */ @media only screen and (max-width:430px) { content { position: relative; left: 0; top: 0; } db d.sidebar { width: 87%; } sdsb { grid-template-columns: 100%; } } @media only screen and (max-width:999px) { savcr main{margin: 0 0px;} satc{flex-direction: column;} } /*social*/ cslo { position: relative; display: flex ; flex-direction: column; margin: 11px; padding: 16px 20px; gap: 12px; background: var(--b-t95); border-radius: 12px; border: 1px solid var(---bc); color: var(--b1); } cslo bl { display: flex ; flex-direction: column; align-items: center; gap: 16px; } cslo bl h4 { margin: 0; font-weight: 500; font-size: 18px; } cslo bl bd { display: flex ; width: 78%; align-items: center; gap: 10px; } cslo bd i { position: relative; height: 36px; } @media(max-width:999px){ cslo {margin: 8px;} } /*startbar*/ start { position: absolute; height: 100vh; width: 272px; top: 0; z-index: 9999; color: var(--b); background-color: var(--b-t95); } csbr { display: flex ; flex-direction: column; padding: 19px 0px 0px 0px; border-right: 1px solid silver; overflow-y: scroll; } csbr hd { display: flex ; flex-direction: column; } csbr hd m1 { display: flex ; align-items: center; padding: 1px 17px; } csbr dd { margin: 0; cursor: pointer; } csbr img.dds { width: 47px; margin: 0px 4px; } csbr ed h1 { margin: 0px 5px 10px 5px; font-size: 26px; } csbr backk { display: flex ; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; } csbr img.bc { width: 28px; } csbr hd m2 { display: flex ; align-items: center; padding: 0px 7px; border: 1px solid #EAE7EE; width: 82%; border-radius: 7px; box-shadow: 0px 0px 1px #000000; align-self: center; box-sizing: border-box; margin: 18px 0px 10px 0px; height: 36px; } csbr input#mipt { color: #594173; font-size: 13px; font-weight: 700; outline: 0; display: block; max-width: 100%; border: 0; width: calc(100% - 58px); height: min-content; padding: 7px 1px; margin-left: 17px; } csbr img.edit { width: 21px; } csbr hd m3 { display: flex ; align-items: center; padding: 4px 7px; border: 1px solid #ffffff; width: 82%; border-radius: 14px; box-shadow: 0px 0px 1px #000000; align-self: center; box-sizing: border-box; margin: 10px 0px 5px 0px; cursor: pointer; background: linear-gradient(125deg, #22acff30, #1ecce92e, #1aecd287, #4688E9, #6f2bff54); color: #000000; } csbr img.dash { width: 24px; } csbr spann { font-size: 15px; font-weight: 500; margin: 1px 0px 4px 17px; cursor: pointer; } csbr m4 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m5 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m6 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m7 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m8 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m9 {display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m10{display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m11{display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr m12{display:flex;align-items:center;padding:7px 7px;width:82%;border-radius:14px;align-self:center;cursor:pointer;box-sizing:border-box;} csbr linee { display: flex ; align-items: center; padding: 4px 7px; width: 82%; border-radius: 14px; align-self: center; cursor: pointer; box-sizing: border-box; margin: 6px 0px 8px 1px; justify-content: space-between; } st { display: block; font-size: 12px;color: var(--b1); } csbr>ft { display: block; padding: 0 16px; } csbr ft>bl { display: flex ; background: #F1EAFF; border-radius: 11px; padding: 12px 16px 16px 16px; flex-direction: column; gap: 8px; } csbr ft>bl>hd { display: flex ; flex-direction: row; justify-content: space-between; color: var(--b); } csbr bl>hd { color: var(--b); } csbr ft>bl>bd>txs { display: flex ; justify-content: space-between; align-items: flex-start; color: var(--b); } csbr ft>bl>pwrs { margin-top: 11px; display: flex ; width: 100%; height: 11px; border-radius: 7px; background-color: #BD9DFF; } csbr>ft>bl>ft>a { display: flex ; font-weight: 500; text-align: center; background-color: #fff; border-radius: 7px; padding: 7px 0px; align-items: center; justify-content: center; box-shadow: 1px 1px 4px #ddd; color: var(--b);} csbr ft m13 { display: flex ; align-items: center; padding: 7px 7px; width: 82%; border-radius: 14px; align-self: center; cursor: pointer; box-sizing: border-box; } csbr ft m14 { display: flex ; align-items: center; padding: 7px 7px; width: 82%; border-radius: 14px; align-self: center; cursor: pointer; box-sizing: border-box; } csbr pwrs { width: 208px; display: flex ; height: 8px; background: #BD9DFF; border-radius: 11px; position: relative; margin: 5px 0px; } csbr pwrs::after { border-radius: 11px; content: ""; width: 50%; height: 100%; background-color: #6F2BFF; left: 0; } cspo { display: flex ; flex-direction: column; gap: 4px; padding: 15px; border: 1px solid #eae7ee; border-radius: 15px; font-size: 13px; margin: 5px 5px 5px 0px; } cspo hd btn { color: var(--c); border: 1px solid #eae7ee; display: grid ; align-items: center; grid-template-columns: auto 25px; padding: 0 5px; border-radius: 7px; } cspo btn svg { fill: var(--c); height: 30px; width: 20px; } cspo t { font-size: 12px; color: #594173; } cspo hd { display: flex ; align-items: center; justify-content: space-between; } cspo hd h3 {color: var(--b1); font-size: 20px; } cspo hd select { display: flex ; align-items: center; border: 1px solid #eae7ee; border-radius: 5px; padding: 2px 2px; outline: unset; } cspo bd { display: flex ; align-items: end; justify-content: space-between; gap: 10px;} cspo bd svg { width: 100%; height: 114px;} cspo bd bl { display: flex ; flex-direction: column; gap: 10px; } cspo ft { display: flex ; align-items: center; justify-content: space-between; } cspo i { width: 100%; height: 100%; } cunck { display: flex ; flex-direction: column; padding: 16px 16px; border-radius: 12px; border: 1px solid #EAE7EE; box-shadow: 0px 0px 3px 0px #EAE7EE; position: relative; color: var(--c);} cunck h1 { color: #140722; font-size: 16px; font-weight: 600; } cunck bd { display: flex ; align-items: center; justify-content: space-between; margin-top: 12px; } cunck bl { display: flex ; flex-direction: column; row-gap: 8px; } cunck bl us { display: flex ; align-items: center; gap: 8px; } cunck us svg.good { width: 16px; cursor: pointer; } cunck p.usp {min-width: 120px; font-size: 14px; font-weight: 400; cursor: pointer; margin: 0; } cunck ft { display: flex ; align-items: center; flex-wrap: wrap; margin-top: 11px; } cunck see { display: flex ; padding: 7px 9px 8px 12px; border-radius: 20px; cursor: pointer; border: 1px solid #eae7ee; column-gap: 8px; align-items: center; } cunck see h5 { min-width: 80px; font-size: 16px; font-weight: 500; } cunck i#aroww { display: flex ; background: #6F2BFF; border-radius: 50%; padding: 5px; justify-content: center; align-items: center; height: 12px; width: 12px; margin: 0; } cunck #aroww img { width: 8px; height: 10px; } /* Account */ account { display: block; overflow-y: auto; position: absolute; width: 100%; left: 0; right: 0; border: solid 1px var(--bc); bottom: unset; height: auto; margin: auto; top: 0; transition: 333ms; height: 100%; background: #000000a1;place-content: end; opacity: 0; visibility: hidden; } saco { display: block; padding: 22px; background: unset; position: relative; border-radius: 0; overflow: hidden; max-width: 444px; margin: 0 auto; margin-bottom: 15px; } saco>d>hd>h4 { margin: 0; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; letter-spacing: 1px; font-size: 1.28em; } #account { display: block; position: relative; z-index: 2;overflow:hidden } app.account account { z-index: 999999; opacity: 1; visibility: visible; } app.account.forgot register { display:none; } app.account.forgot login { display:none; } app.account.login register { display:none; } app.account.login forgot { display:none; } app.account.register login { 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%; } #account>bd { display: block; overflow: hidden; overflow-y: hidden; } saco .wrapper { position: relative; } saco input { -webkit-border: solid 1px var(--bc); padding: 11px 33px; font-size: 1em; 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; z-index: 99; position: absolute; inset: 0; height: auto; width: auto; } 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; } saco .btn { background: var(--a); border: unset; color: var(--b); height: 55px; font-size: 1em; font-weight: bold; box-shadow: var(--bs-b); border-radius: 7px; margin: 11px; padding: 0; display: block; text-align: center; place-content: center; width: auto; } saco .btn:hover { background: var(--at); } saco .gf { grid-column-start: 1; grid-column-end: 3; display: grid; } saco .gf>p { margin: 0; } gds>btns>btn { display: block; position: relative; overflow: hidden; border-radius: 11px; margin: 4px; } gds>btns>btn>label { display: grid ; grid-template-columns: 33px auto 22px; border: 1px solid var(--bc); border-radius: 11px; margin: 0; align-items: center; font-size: 0.88em; padding: 11px; height: 33px; position: relative; box-shadow: var(--bs-bt); font-weight: 500; z-index: 99; } gds btn>input:checked ~ bg { background: var(--lg-b); } gds btn>input:checked ~ label { color: var(--b); } saco sl {/* box-shadow: var(--bs-bt); */} gds>btns>btn>input { opacity: 0; z-index: 999; } gds btn>input:checked ~ label svg { fill: var(--b); } gds btn>label>ck { opacity: 0; transition: 99ms; } gds btn>input:checked ~ label ck { opacity: 1; } gds btn>input:checked ~ bg { background: var(--lg-b); } gds btn i { height: 16px; width: 16px; } saco form sl>input::placeholder { color: var(--v); opacity: 0.7; } gds>btns { display: grid ; grid-template-columns: 50% 50%; } saco .form-group.gds { height: auto; } gds>btns>btn:last-child { grid-column-start: 1; grid-column-end: 3; } 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: auto; margin-right: 0; } account hd exit i{width:33%; height: 33%;} @media only screen and (max-width: 999px){ account { top: 0; border: unset; max-height: unset; bottom: 0; } #account>bg { opacity: 0; } } 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; margin-bottom: 44px; } account steps>step { height: 7px; width: 7px; border-radius: 11px; border: 2px solid #000; transition: 333ms; opacity: 0.5; } account.verifying steps>step:nth-of-type(1) { border: 1px solid #000; width: 22px; background: #000; } account.verified steps>step:nth-of-type(1) { border: 1px solid #000; width: 22px; background: #000; } account.verified steps>step:nth-of-type(2) { border: 1px solid #000; width: 22px; background: #000; } .register account steps { z-index: 2; background: transparent; opacity: 1; position: relative; top: unset; } .account content{ margin-top:unset } account label { font-weight: 500; letter-spacing: 0.44px; margin-bottom: 7px; display: block; opacity: 1; margin-left: 7px; font-size: 0.88em; } .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; } 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; 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: auto 66px; overflow: hidden; align-items: center; } saco>d>hd>i { height: 55%; width: 55%; display: block; margin: auto; } login steps { display: none; } /* 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; } /* Login */ clgno form { position: relative; } login out>i>svg { fill: var(--b); } clgno form sl { display: flex; align-items: center; background: transparent; border: 1px solid var(--bor); height: 55px; border-radius: 33px; } clgno form sl>input { position: absolute; height: auto; top: 0; bottom: 0; width: auto; left: 0px; right: 0px; margin: 0; background: rgba(228, 228, 228, 0.3); font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; padding: 11px 22px; padding-right: 44px; border: 0px solid var(--bc); } account sl>label { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; height: auto; margin: auto 0; padding: 22px; letter-spacing: 0.44px; transition: 333ms; font-size: 0.88em; } account sl>input:focus ~ label, account sl>input:valid ~ label { opacity: 0; } 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.5; position: absolute; top: 0; bottom: 0; right: 11px; margin: auto; } clgno form sl .btn:hover { background: transparent; } saco sl>input:focus { border-radius: 33px; transform: unset; } 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 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; text-align: center; align-items: center; font-size: 1em; font-weight: 600; letter-spacing: 0.88px; padding: 11px; margin: 0px 5px; border-radius: 0; background: var(--c); color: var(--b); } clgno>ft btn>i>svg { fill: var(--b); } clgno>ft btns { display: grid; padding: 11px 0; grid-template-columns: 50% 50%; } 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: 22px 11px; } 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; } .eyelogo form sl .btn:after { content: " "; height: 28px; position: absolute; width: 3px; background: var(--c); top: 20%; bottom: 0; transform: rotate(45deg); right: 48%; border-radius: 22px; } clgno bl p { font-weight: 400; letter-spacing: 0.33px; text-align: center; } clgno>hd>d { display: block; text-align: center; } clgno>hd { display: block; text-align: center; margin: 11px; margin-bottom: 44px; } clgno>hd>p { margin: 11px 0; font-size: 0.88em; } 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; } login>hd>i>svg { fill: var(--b); } clgno { display: block; border-radius: 22px 22px 0 0; position: relative; max-width: 100%; padding-top: 22px; } clgno>* { position: relative; z-index: 99; } clgno>ft>aa { display: block; text-align: center; padding: 11px; } clgno>ft>aa>spain { color: #000; font-weight: 600; font-size: 1.11em; margin-left: 5px; } saco login { transition: 333ms; } saco login logo { margin: 22px; padding: 22px; color: var(--b); width: auto; text-align: center; display: block; border-radius: 11px; } saco login logo>h1 { margin: 0; color: var(--b); width: auto; text-align: center; display: block; font-family: "Rajdhani", serif; font-weight: bold; font-variant-caps: all-petite-caps; background: linear-gradient(45deg, var(--b), var(--a)); -webkit-background-clip: text; text-align: center; background-size: 200% auto; display: inline; -webkit-text-fill-color: transparent; text-fill-color: transparent; transform: translateZ(0); -webkit-box-decoration-break: clone; animation: shine 4s linear infinite; font-size: 3em; line-height: 0.66em; } login>hd { display: block; padding: 22px; text-align: center; margin: 11px; } login>hd>btn.btn { height: auto; padding: 11px; font-weight: 400; border-radius: 7px; width: auto; margin: 0; margin-left: 11px; } clgno:after { contentt: ""; position: absolute; top: -11px; left: 0; right: 0; height: 14px; width: 90%; background: var(--bt); display: block; margin: 0 auto; z-index: -1; border-radius: 44px 44px 0 0; box-shadow: 0 -2px 7px var(--b); opacity: 0.5; } saco .form-group { display: block; width: auto; position: relative; margin-bottom: 11px; background: transparent; } /* Regiter time Password hidden system */ crgso sl { display: block; border-radius: 33px; padding: 0 11px; width: auto; background: transparent; border: 1px solid var(--bc); } crgso sl>input { position: absolute; border: none; height: auto; top: 0; bottom: 0; width: auto; left: 0px; right: 0px; margin: 0; background: rgba(228, 228, 228, 0.3); font-family: "Karla", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; padding: 11px 22px; padding-right: 55px; } crgso 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.5; position: absolute; top: 0; bottom: 0; right: 11px; margin: auto; } crgso sl>.btn:hover { background: transparent; } /* 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; } cento { display: grid; height: 100%; } #account { display: block; position: relative; z-index: 2; overflow: hidden; } 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: 50% auto; scroll-behavior: smooth; position: relative; height: 100vh; overflow: auto; } cwaco { display: block; max-width: 333px; margin: auto; text-align: center; color: var(--b); } .enter enter { display: grid; } ext { display: block; height: 44px; width: 44px; padding: 5px; place-content: center; position: absolute; right: 0; margin: 11px; z-index: 999; } enter>ext svg { fill: var(--b); } ext>i { height: 44px; width: 44px; margin: auto; } enter out>i>svg { fill: var(--b); } enter>hd>cvr { display: block; background: var(--lg); margin: 11px; border-radius: 22px; 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; place-content: end; } cento>bd>p { margin: 0; font-size: 0.88em; } enter>hd>cvr>bg { background: url(/0/IMG/Noise.webp); background-size: 100%; } enter>hd>cvr>i { height: 100%; } enter>hd>cvr>i>img { animation: oscillate 6s infinite ease-in-out; object-fit: cover; position: relative; z-index: 99; } enter>hd>cvr>i:after { content: ""; position: absolute; height: 18%; width: 25%; background: url(/0/IMG/Trangle.png); background-size: 100%; z-index: 0; filter: blur(2px); left: 3%; animation: jellovertical 6s infinite ease-in-out; } enter>hd>cvr>i:before { content: ""; position: absolute; height: 16%; width: 22%; background: url(/0/IMG/Ring.png); background-size: 100%; z-index: 0; filter: blur(2px); right: 17%; animation: float 6s infinite ease-in-out; bottom: 13%; } enter>hd>bg>img { height: 100%; width: 100%; } enter ext svg { height: 19px; width: 19px; fill: var(--b); } cento btns>.btn { border: unset; height: 55px; font-size: 1em; font-weight: bold; background: var(--bt-b); 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(--bt-b); } cento btns>.btn>i { transform: rotate(180deg); } cento btns>btn:first-child { background: var(--lg-b); color: var(--b); } cento>bd>h2 { font-size: 1.33em; line-height: 1.55em; margin: 7px 0; font-weight: 500; } cento>bd>b { font-size: 1.22em; font-weight: 600; color: var(--at); letter-spacing: 0.88px; } @media screen and (min-width: 999px) { cento>bd>i { height: 55%; width: 55%; } cento { display: block; place-content: end; height: 98%; } enter { height: 87vh; grid-template-rows: 60% auto; } login { border-radius: 22px; overflow: hidden; } register { border-radius: 22px; } } /* 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; } crgso>hd>p { font-size: 0.88em; } crgso>hd>h2 { margin: 0; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; font-size: 1.88em; letter-spacing: 1px; color: var(--c); } register { overflow-y: auto; scroll-behavior: smooth; } gds gd>btn>label { margin: 0; opacity: 1; font-weight: 400; } register>bg { background: #ffffff; z-index: -1; } register>bg>bi { position: absolute; z-index: 999; inset: 0; height: 100%; width: 100%;/* background: url(/0/IMG/Noise.webp);*/ background-size: 100%; background-position: 25% 55%; } register>hd { display: block; padding: 22px; text-align: center; margin: 11px; } register>hd>btn.btn { height: auto; padding: 11px; font-weight: 400; border-radius: 7px; width: auto; margin: 0; margin-left: 11px; } crgso { display: block; position: relative; } crgso:after { contentt: ""; position: absolute; top: -11px; left: 0; right: 0; height: 14px; width: 90%; background: var(--bt); display: block; margin: 0 auto; z-index: -1; border-radius: 44px 44px 0 0; box-shadow: 0 -2px 7px var(--b); opacity: 0.5; } saco login { transition: 333ms; display: block; } saco register logo { margin: 22px; padding: 22px; color: var(--b); width: auto; text-align: center; display: block; border-radius: 11px; } saco register logo>h1 { margin: 0; color: var(--b); width: auto; text-align: center; display: block; font-family: "Rajdhani", serif; font-weight: bold; font-variant-caps: all-petite-caps; background: linear-gradient(45deg, var(--a), var(--a1)); -webkit-background-clip: text; text-align: center; background-size: 200% auto; display: inline; -webkit-text-fill-color: transparent; text-fill-color: transparent; transform: translateZ(0); -webkit-box-decoration-break: clone; animation: shine 4s linear infinite; font-size: 3em; line-height: 0.66em; } @media screen and (max-width: 999px) { saco hd>exit { height: 44px; width: 44px; background: var(--at); border-radius: 55%; box-shadow: 0 0 10px var(--a); position: absolute; top: 0; right: 0; margin: 11px; } register>ft>cvr { position: absolute; top: -179px; opacity: 0.06; } register>ft>cvr>img { height: 100%; width: 100%; object-fit: cover; } } @media screen and (min-width: 999px) { register>bg { background: #ffffff; z-index: -1; border-radius: 33px; } 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; } account.verified steps>step:nth-of-type(1) { border: 1px solid var(--c1); width: 22px; background: var(--c1); border-radius: 13px; height: 7px; } account.verified steps>step:nth-of-type(2) { border: 1px solid var(--c1); width: 22px; background: var(--c1); border-radius: 13px; height: 7px; } account.verifying steps>step:nth-of-type(1) { border: 1px solid var(--c1); width: 22px; background: var(--c1); border-radius: 13px; height: 7px; } } /* 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; } cafgo sl { border-radius: 33px; } @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) { saco { height: 88vh; overflow-y: auto; background: var(--b); } account { overflow: hidden; top: 0; place-content: center; } #account { border-radius: 22px; display: block; padding: 7px; margin: 4px; position: relative; z-index: 2; overflow: hidden; } cento .phone { display: none; } saco login { border-radius: 33px; overflow: hidden; } 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; } cafgo { display: block; max-width: 444px; margin: 0 auto; } cafgo>hd>h2 { margin: 0; font-family: "Roboto", sans-serif; font-weight: 700; font-style: normal; font-size: 1.88em; letter-spacing: 1px; color: var(--c); } cafgo a { text-decoration: underline; text-underline-offset: 3px; } 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%; } saco register logo>h1 { color: var(--c); } .register account steps { padding-top: 33px; } } @media screen and (max-width: 999px) { crgro>cvr { display: none; } } /* Unique Splash */ csplo { display: grid; grid-template-rows: 8vh 422px 22% 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; } bg.ripple { height: 444px; border-radius: 55px; margin: 22px; width: auto; } csplo>hd { position: relative; display: block; height: 100%; } bg.ripple { height: 100%; border-radius: 55px; margin: 22px auto; width: 100%; z-index: 999; } 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; background: url(/0/img/BlurElements.webp); } 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; } 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; height: 100%; grid-template-rows: 39% 155px auto; visibility: hidden; opacity: 0; position: absolute; inset: 0; transition: 999ms; } 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: 66%; width: 66%; margin: 0 auto; } 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; } /* 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; } .desktop { display: none; } } /* Animations */ @keyframes shine { 100% { background-position: 200% center; will-change: background-position; } } /* 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); } } @keyframes float { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(-20px) translateX(20px) rotate(20deg); } 100% { transform: translateY(0) translateX(0) rotate(0deg); } } /* Every Buggs */ wallet>bl { border-radius: 22px; } 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 is>i { height: 16px; width: 16px; margin-right: 3px; } 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%; } 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; } 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; } cmbop>bl { background: var(--bt); padding: 22px; border-radius: 22px; } 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; } /* Defult CSS */ .dn { display: none !important; } sl, .sl { display: block; border-radius: 11px; margin-bottom: 11px; position: relative; height: 55px; overflow: hidden; background: var(--bc); width: 100%; } i { position: relative; display: flex ; height: 55%; width: 100%; border-radius: 7px; justify-content: center; align-items: center; }start { -webkit-backdrop-filter: blur(20px); } out { display: block; height: 33px; width: 33px; padding: 3px; place-content: center; margin: 5px; } /* Divider */ divider { display: grid ; position: relative; grid-template-columns: auto min-content auto; width: 80%; margin: auto; } divider>d { height: 1px; background: var(--c); } divider>* { display: flex ; justify-content: center; align-items: center; margin: auto 0; font-weight: bold; } divider>t { padding: 0 11px; } /* Nav */ @media only screen and (max-width: 999px){ db header>h grid { grid-template-columns: 100%; } cusdo>bd>i { margin-right: 0; } } h7 { font-size: 0.7em; } nav>bg{background: linear-gradient( 90deg , rgb(96 229 222), rgb(78 173 214), rgb(68 135 223), rgb(56 89 228) );} nav { position: sticky; top: 0; left: 0; z-index: 9999; width: 100%; } nav nt { height: 44px; display: grid; background: #499cda; width: 100%; grid-template-columns: 66px 44px auto 77px; } nav pf { height: 44px; width: 100%; } nt>* { display: flex; justify-content: center; align-items: center; } pf>d { display: block; height: 70%; padding: 4px; box-shadow: inset 0 0 0 2px var(--b-t); border-radius: 25%; } srch>f { color: var(--b-t); width: 88%; height: 56%; display: flex; align-items: center; box-shadow: 0 1px 0 0; padding-left: 22px; } nt>aa svg { transition: 333ms; } .start srch>f { opacity: 0; } @media only screen and (max-width: 430px){ nav { position: sticky; top: 0; left: 0px; z-index: 9999; width: 100%; } } .bootinggg nav {width:100vw;height:100vh;} .bootinggg nav nt {opacity:0;background:transparent;} logo:before { content: ''; transition: 1s; opacity: 0; position: fixed; } .bootingggg nav:before { position: absolute; background: var(--lg-bl); content: ''; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; transition: 1s; z-index: 7777777; backdrop-filter: blur(11px); } nifo>* { display: flex; justify-content: center; align-items: center; } srch form{display:none} .start 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(--b-t); margin: 0; padding: 0; width: 100%; padding-left: 22px; background: rgb(255 255 255 / 22%); border: solid 2px rgb(255 255 255 / 22%); height: calc(100% - 7px); margin-top: 1px; border-radius: 4px; font-size: 1em; } .start nt>aa svg { transform: rotate(90deg); } @media only screen and (min-width: 999px) { nav nt{background:unset;} nifo{display:none !important} nav srch { max-width: 323px; margin-left: 0; background: var(--b-t22); border-radius: 9px; border: solid 1px var(--b-t); } srch>f { box-shadow: unset; } nt>aa { opacity: 0; } #Search { margin: 0; height: 100%; } } /* User component */ cusdo { display: grid ; grid-template-columns: 60% 40%; } cusdo>bd>i { height: 111px; width: 111px; border-radius: 55%; box-shadow: 0 0px 21px rgba(227, 230, 236, 0.6); overflow: hidden; padding: 2px; border: 1px solid var(--bc); margin: 0 auto; } cusdo>hd>d { display: flex ; align-items: center; justify-content: space-between; } @media only screen and (max-width: 999px) { cusdo { align-items: center; grid-row: 1; margin: 11px; margin-bottom: 22px; grid-template-columns: 34% auto; } cusdo>hd { grid-column-start: 2; } cusdo>bd { grid-column-start: 1; grid-row-start: 1; } cusdo>bd>i { margin-left: 0; } } /* Dashboard */ @media only screen and (min-width: 2053px) { screen home header { max-width: 78%; } .page__row { max-width: 78%; } } db .sidebar .widget { margin: 0; } db .widget__body { height: fit-content; display: grid ; grid-template-columns: 50% 50%; } button.products__btn.btn.btn_black {padding: 0 44px; } .widget__flex, button.products__btn.btn.btn_black, btn { position: relative;cursor: pointer; } .widget_stat > .widget__text { max-width: 185px; margin: 0 auto 18px; color: #11142D; font-size: 14px; } db .widget { background: var(--b1); margin: 11px 0; position: relative; padding: 22px 22px; } cdtio { display: block; padding: 22px; background: var(--b1); margin: 0px; position: relative; border-radius: 24px; } @media only screen and (min-width: 1544px) { .page__row { max-width: 81%; } } /* Himanshu */ @media only screen and (min-width: 999px){ db d.main .widget__body { display: grid ; grid-template-columns: 50% 50%; } } @media only screen and (max-width: 999px){ db d.main .widget__flex:nth-child(even) .widget__desc { grid-column-end: 2; display: grid ; grid-column-start: 2; grid-row-start: 1; } db d.main .widget__flex:nth-child(even) { display: grid ; } } db d.main .widget__body { height: fit-content; } /* Dashboard */ db grid { grid-template-columns: 49% 49%; gap: 2%; } db grid .widget { height: auto; max-height: 400px; margin: 0; margin-top: 44px; } ssdo .details__container { margin: 11px; } db main .page__stat.page__stat_sm { margin: 0; margin-top: 11px; } db header>h>.header { min-width: auto; position: relative; max-width: unset; display: block; margin: 11px; height: auto; padding: 0; border: none; } db .page__col { padding: 1px 0px 0px; } db header>h grid { grid-template-columns: 65% auto; gap: 1%; } screen home header { position: relative; backdrop-filter: unset; max-width: 100%; margin: 0 auto; } @media only screen and (max-width: 999px) { screen home header { max-width: unset; margin: 0; } .header { height: auto; display: block; } db .header { display: flex; height: 96px; margin: 0 -16px; padding: 0 32px; } } @media only screen and (min-width: 999px) { .owl-carousel.owl-drag .owl-item { width: 646px; } db main { width: 88%; max-width: 744px; backdrop-filter: unset !important; overflow: visible; } db d.main { padding: 11px; } db d.sidebar { padding: 11px; } /*db sidebar { max-width: 415px; min-width: 400px; }*/ } @media only screen and (max-width: 999px) { db grid { grid-template-columns: 100%; gap: 0; } .owl-carousel.owl-drag .owl-item { width: 424px; } .page__widgets:not(:last-child) { display: block; } .page__widgets { display: block; } db d.main { margin: 0 11px; } db d.sidebar { margin: 0 11px; padding: 11px 0; padding-bottom: 0; margin-bottom: 0; } } /* @media only screen and (max-width: 999px) */ @media only screen and (max-width: 999px) { .widget_shadow .widget__body { mask-image: unset; } .widget__head { height: 44px; } .widget_shadow .widget__body { height: 292px; } db grid .widget { max-height: 400px; margin-top: 11px; } } @media only screen and (max-width: 1330px) { db main { width: 64%; } csps {grid-template-columns: 100%;} } /* Stake */ .products__row { display: grid ; align-items: center; grid-template-columns: 33px 20% 19% 17% 21% 18%; } /* Ratio Card */ .card { background-color: #1e1e1e; color: #fff; padding: 22px; border-radius: 24px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); text-align: center; width: 250px; position: relative; max-height: max-content; } .card .info-icon { position: absolute; top: 17px; right: 17px; font-size: 16px; cursor: pointer; } .gauge { position: absolute; width: 213px; height: 146px; margin: 1px auto; } .gauge svg { width: 100%; height: 100%; } .gauge text { font-size: 18px; font-weight: bold; } .value { font-size: 36px; margin-top: 85px; font-weight: bold; } .status { font-size: 16px; margin-top: 5px; } .footer { background: #333; padding: 10px; border-radius: 8px; font-size: 12px; margin-top: 10px; } .footer span { font-weight: bold; } /* columns */ .steps-card { background: #ffffff; border-radius: 22px; padding: 11px 11px; box-shadow: 0 0px 21px rgba(227, 230, 236, 0.6); display: flex ; align-items: center; gap: 10px; margin-bottom: 5px; } .steps-card:nth-child(Even) { display: grid ; grid-template-columns: auto 66px; } .steps-card:nth-child(Even) .progress-circle { grid-column-start: 2; } .steps-card:nth-child(Even) .steps-info { grid-row-start: 1; text-align: end; } .progress-circle svg:nth-child(2) { position: absolute; top: 0; bottom: 0; height: 45%; left: 0; right: 0; transform: rotate(0deg); margin: auto; } .progress-circle { position: relative; width: 60px; height: 60px; } .progress-circle svg { transform: rotate(-90deg); } .progress-circle .background { stroke: rgb(108, 93, 211); stroke-width: 6; fill: none; } .progress-circle .progress { stroke: rgb(108, 93, 211); stroke-width: 6; stroke-linecap: round; fill: none; stroke-dasharray: 141; stroke-dashoffset: 30; } .footstep-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .steps-info { display: flex; flex-direction: column; justify-content: center; } .steps-info .steps-count { font-size: 20px; font-weight: bold; margin: 0; } .steps-info .steps-target { font-size: 12px; color: #888; margin: 0; } /* Ended App Theme CSS : App:School - Branch:practice.aliens.school */ /* File : 0 Ended*/