/*$Id : $ */ @font-face { font-family:"PuviRegular"; src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.b610c170049eef34bb97.eot); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.b610c170049eef34bb97.eot?#iefix) format('embedded-opentype'); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.6034dbc4baf61073f12d.otf), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.d0da5c78427e494b8425.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.c267a0f53f8fbc613158.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Regular.7d5a40d266bdec720a7a.woff2) format('woff2'); font-style:normal; font-weight: normal; font-style: normal; } @font-face { font-family:"PuviMedium"; src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.ca62a59bf2dc1c0fcd1c.eot); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.ca62a59bf2dc1c0fcd1c.eot?#iefix) format('embedded-opentype'); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.a15d8a2a0d2c4a4cadcc.otf), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.8311cb179f108bb3eb95.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.2670cb2248f614e6fccf.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Medium.d53d8d4fb46b582da92b.woff2) format('woff2'); font-style:normal; font-weight: normal; font-style: normal; } @font-face { font-family:"PuviSemiBold"; src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.39127dac2b035dd4e442.eot); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.39127dac2b035dd4e442.eot?#iefix) format('embedded-opentype'); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.b084de0689c8f9b3cd0b.otf), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.f457ef7caf4fc5ec15ab.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.ad5e3055d8c1564cefad.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Semibold.7512826fad1e6b231cae.woff2) format('woff2'); font-style:normal; font-weight: normal; font-style: normal; } @font-face { font-family:"PuviBold"; src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.5ea5322e0e9af510362b.eot); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.5ea5322e0e9af510362b.eot?#iefix) format('embedded-opentype'); src: url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.8228828fede067a08eb3.otf), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.a9291c06d8a5a5a445f2.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.0f1ce9bcc7bd9059bcbd.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/Zoho-Puvi-Bold.1aa494a64d4ae93aab26.woff2) format('woff2'); font-style:normal; font-weight: normal; font-style: normal; } @font-face { font-family: 'Public_Sans_Bold'; src: url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Bold.a52885b904d32280b208.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Bold.8c3655e2b925bcad90cd.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Bold.4045385082dfc34c22d7.woff2) format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Public_Sans_Regular'; src: url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Regular.af5c059f36e21e13f39f.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Regular.f32753567f64c1ddeec8.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Regular.e86d2642f412b9493b14.woff2) format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Public_Sans_SemiBold'; src: url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-SemiBold.8e676a7173962c398599.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-SemiBold.04c1d5b2470ec3349883.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-SemiBold.1cb825ff043ef7521574.woff2) format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Public_Sans_Medium'; src: url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Medium.870d42fd45979e9faecb.ttf) format('ttf'), url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Medium.3ca80b4bc61a63c5361b.woff) format('woff'),url(https://static.zohocdn.com/socialtoolkit/fonts/PublicSans-Medium.f6ebd504e3b19c186177.woff2) format('woff2'); font-weight: normal; font-style: normal; } /*Font support*/ @font-face { font-family:"Cabin_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/cabinregular/font.eot"); src:url("//static.zohocdn.com/webfonts/cabinregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cabinregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cabinregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cabinregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cabinregular/font.svg#Cabin-Regular") format("svg");} @font-face { font-family:"Cabin_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/cabinmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/cabinmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cabinmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cabinmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cabinmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cabinmedium/font.svg#Cabin-Medium") format("svg");} @font-face { font-family:"Cabin_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/cabinsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/cabinsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cabinsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cabinsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cabinsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cabinsemibold/font.svg#Cabin-SemiBold") format("svg");} @font-face { font-family:"Cabin_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/cabinbold/font.eot"); src:url("//static.zohocdn.com/webfonts/cabinbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cabinbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cabinbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cabinbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cabinbold/font.svg#Cabin-Bold") format("svg");} @font-face { font-family:"Montserrat_regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/montserratregular/font.eot"); src:url("//static.zohocdn.com/webfonts/montserratregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/montserratregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/montserratregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/montserratregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/montserratregular/font.svg#Montserrat-Regular") format("svg");} @font-face { font-family:"Montserrat_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/montserratmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/montserratmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/montserratmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/montserratmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/montserratmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/montserratmedium/font.svg#Montserrat-Medium") format("svg");} @font-face { font-family:"Montserrat_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/montserratsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/montserratsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/montserratsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/montserratsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/montserratsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/montserratsemibold/font.svg#Montserrat-SemiBold") format("svg");} @font-face { font-family:"Montserrat_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/montserratbold/font.eot"); src:url("//static.zohocdn.com/webfonts/montserratbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/montserratbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/montserratbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/montserratbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/montserratbold/font.svg#Montserrat-Bold") format("svg");} @font-face { font-family:"Asap_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapregular/font.eot"); src:url("//static.zohocdn.com/webfonts/asapregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapregular/font.svg#Asap-Regular") format("svg");} @font-face { font-family:"Asap_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/asapmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapmedium/font.svg#Asap-Medium") format("svg");} @font-face { font-family:"Asap_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/asapsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapsemibold/font.svg#Asap-SemiBold") format("svg");} @font-face { font-family:"Asap_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapbold/font.eot"); src:url("//static.zohocdn.com/webfonts/asapbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapbold/font.svg#Asap-Bold") format("svg");} @font-face { font-family:"Manrope_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/manroperegular/font.eot"); src:url("//static.zohocdn.com/webfonts/manroperegular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/manroperegular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/manroperegular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/manroperegular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/manroperegular/font.svg#Manrope-Regular") format("svg");} @font-face { font-family:"Manrope_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/manropemedium/font.eot"); src:url("//static.zohocdn.com/webfonts/manropemedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/manropemedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/manropemedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/manropemedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/manropemedium/font.svg#Manrope-Medium") format("svg");} @font-face { font-family:"Manrope_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/manropesemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/manropesemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/manropesemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/manropesemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/manropesemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/manropesemibold/font.svg#Manrope-SemiBold") format("svg");} @font-face { font-family:"Manrope_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/manropebold/font.eot"); src:url("//static.zohocdn.com/webfonts/manropebold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/manropebold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/manropebold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/manropebold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/manropebold/font.svg#Manrope-Bold") format("svg");} @font-face { font-family:"Abhaya_Libre_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/abhayalibreregular/font.eot"); src:url("//static.zohocdn.com/webfonts/abhayalibreregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/abhayalibreregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/abhayalibreregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/abhayalibreregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/abhayalibreregular/font.svg#AbhayaLibre-Regular") format("svg");} @font-face { font-family:"Abhaya_Libre_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/abhayalibremedium/font.eot"); src:url("//static.zohocdn.com/webfonts/abhayalibremedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/abhayalibremedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/abhayalibremedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/abhayalibremedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/abhayalibremedium/font.svg#AbhayaLibre-Medium") format("svg");} @font-face { font-family:"Abhaya_Libre_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/abhayalibresemibold/font.svg#AbhayaLibre-SemiBold") format("svg");} @font-face { font-family:"Abhaya_Libre_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/abhayalibrebold/font.eot"); src:url("//static.zohocdn.com/webfonts/abhayalibrebold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/abhayalibrebold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/abhayalibrebold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/abhayalibrebold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/abhayalibrebold/font.svg#AbhayaLibre-Bold") format("svg");} @font-face { font-family:"Expletus_Sans_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/expletussans/font.eot"); src:url("//static.zohocdn.com/webfonts/expletussans/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/expletussans/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/expletussans/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/expletussans/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/expletussans/font.svg#ExpletusSans") format("svg");} @font-face { font-family:"Expletus_Sans_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/expletussansmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/expletussansmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/expletussansmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/expletussansmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/expletussansmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/expletussansmedium/font.svg#ExpletusSans-Medium") format("svg");} @font-face { font-family:"Expletus_Sans_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/expletussanssemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/expletussanssemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/expletussanssemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/expletussanssemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/expletussanssemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/expletussanssemibold/font.svg#ExpletusSans-SemiBold") format("svg");} @font-face { font-family:"Expletus_Sans_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/expletussansbold/font.eot"); src:url("//static.zohocdn.com/webfonts/expletussansbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/expletussansbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/expletussansbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/expletussansbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/expletussansbold/font.svg#ExpletusSans-Bold") format("svg");} @font-face { font-family:"Rajdhani_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/rajdhaniregular/font.eot"); src:url("//static.zohocdn.com/webfonts/rajdhaniregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rajdhaniregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rajdhaniregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rajdhaniregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rajdhaniregular/font.svg#Rajdhani-Regular") format("svg");} @font-face { font-family:"Rajdhani_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/rajdhanimedium/font.eot"); src:url("//static.zohocdn.com/webfonts/rajdhanimedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rajdhanimedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rajdhanimedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rajdhanimedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rajdhanimedium/font.svg#Rajdhani-Medium") format("svg");} @font-face { font-family:"Rajdhani_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rajdhanisemibold/font.svg#Rajdhani-SemiBold") format("svg");} @font-face { font-family:"Rajdhani_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/rajdhanibold/font.eot"); src:url("//static.zohocdn.com/webfonts/rajdhanibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rajdhanibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rajdhanibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rajdhanibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rajdhanibold/font.svg#Rajdhani-Bold") format("svg");} @font-face { font-family:"Inter_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/interregular/font.eot"); src:url("//static.zohocdn.com/webfonts/interregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/interregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/interregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/interregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/interregular/font.svg#Inter-Regular") format("svg");} @font-face { font-family:"Inter_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/intermedium/font.eot"); src:url("//static.zohocdn.com/webfonts/intermedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/intermedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/intermedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/intermedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/intermedium/font.svg#Inter-Medium") format("svg");} @font-face { font-family:"Inter_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/intersemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/intersemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/intersemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/intersemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/intersemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/intersemibold/font.svg#Inter-SemiBold") format("svg");} @font-face { font-family:"Inter_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/interbold/font.eot"); src:url("//static.zohocdn.com/webfonts/interbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/interbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/interbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/interbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/interbold/font.svg#Inter-Bold") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsans/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsans/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsans/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsans/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsans/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsans/font.svg#IBMPlexSans") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsansmedium/font.svg#IBMPlexSans-Medium") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsanssemibold/font.svg#IBMPlexSans-SemiBold") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsansbold/font.svg#IBMPlexSans-Bold") format("svg");} @font-face { font-family:"Poppins_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/poppinsregular/font.eot"); src:url("//static.zohocdn.com/webfonts/poppinsregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/poppinsregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/poppinsregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/poppinsregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/poppinsregular/font.svg#Poppins-Regular") format("svg");} @font-face { font-family:"Poppins_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/poppinsmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/poppinsmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/poppinsmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/poppinsmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/poppinsmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/poppinsmedium/font.svg#Poppins-Medium") format("svg");} @font-face { font-family:"Poppins_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/poppinssemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/poppinssemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/poppinssemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/poppinssemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/poppinssemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/poppinssemibold/font.svg#Poppins-SemiBold") format("svg");} @font-face { font-family:"Poppins_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/poppinsbold/font.eot"); src:url("//static.zohocdn.com/webfonts/poppinsbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/poppinsbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/poppinsbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/poppinsbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/poppinsbold/font.svg#Poppins-Bold") format("svg");} @font-face { font-family:"Oswald_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/oswaldregular/font.eot"); src:url("//static.zohocdn.com/webfonts/oswaldregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/oswaldregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/oswaldregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/oswaldregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/oswaldregular/font.svg#Oswald-Regular") format("svg");} @font-face { font-family:"Oswald_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/oswaldmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/oswaldmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/oswaldmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/oswaldmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/oswaldmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/oswaldmedium/font.svg#Oswald-Medium") format("svg");} @font-face { font-family:"Oswald_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/oswaldsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/oswaldsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/oswaldsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/oswaldsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/oswaldsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/oswaldsemibold/font.svg#Oswald-SemiBold") format("svg");} @font-face { font-family:"Oswald_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/oswaldbold/font.eot"); src:url("//static.zohocdn.com/webfonts/oswaldbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/oswaldbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/oswaldbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/oswaldbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/oswaldbold/font.svg#Oswald-Bold") format("svg");} @font-face { font-family:"Barlow_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/barlowregular/font.eot"); src:url("//static.zohocdn.com/webfonts/barlowregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/barlowregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/barlowregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/barlowregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/barlowregular/font.svg#Barlow-Regular") format("svg");} @font-face { font-family:"Barlow_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/barlowmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/barlowmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/barlowmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/barlowmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/barlowmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/barlowmedium/font.svg#Barlow-Medium") format("svg");} @font-face { font-family:"Barlow_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/barlowsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/barlowsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/barlowsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/barlowsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/barlowsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/barlowsemibold/font.svg#Barlow-SemiBold") format("svg");} @font-face { font-family:"Barlow_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/barlowbold/font.eot"); src:url("//static.zohocdn.com/webfonts/barlowbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/barlowbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/barlowbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/barlowbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/barlowbold/font.svg#Barlow-Bold") format("svg");} @font-face { font-family:"Kanit_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/kanitregular/font.eot"); src:url("//static.zohocdn.com/webfonts/kanitregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kanitregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kanitregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kanitregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kanitregular/font.svg#Kanit-Regular") format("svg");} @font-face { font-family:"Kanit_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/kanitmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/kanitmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kanitmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kanitmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kanitmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kanitmedium/font.svg#Kanit-Medium") format("svg");} @font-face { font-family:"Kanit_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/kanitsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/kanitsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kanitsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kanitsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kanitsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kanitsemibold/font.svg#Kanit-SemiBold") format("svg");} @font-face { font-family:"Kanit_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/kanitbold/font.eot"); src:url("//static.zohocdn.com/webfonts/kanitbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kanitbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kanitbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kanitbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kanitbold/font.svg#Kanit-Bold") format("svg");} @font-face { font-family:"Rasa_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/rasaregular/font.eot"); src:url("//static.zohocdn.com/webfonts/rasaregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rasaregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rasaregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rasaregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rasaregular/font.svg#Rasa-Regular") format("svg");} @font-face { font-family:"Rasa_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/rasamedium/font.eot"); src:url("//static.zohocdn.com/webfonts/rasamedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rasamedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rasamedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rasamedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rasamedium/font.svg#Rasa-Medium") format("svg");} @font-face { font-family:"Rasa_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/rasasemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/rasasemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rasasemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rasasemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rasasemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rasasemibold/font.svg#Rasa-SemiBold") format("svg");} @font-face { font-family:"Rasa_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/rasabold/font.eot"); src:url("//static.zohocdn.com/webfonts/rasabold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/rasabold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/rasabold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/rasabold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/rasabold/font.svg#Rasa-Bold") format("svg");} @font-face { font-family:"Baloo_Thambi_2_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/baloothambi2regular/font.eot"); src:url("//static.zohocdn.com/webfonts/baloothambi2regular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/baloothambi2regular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/baloothambi2regular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/baloothambi2regular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/baloothambi2regular/font.svg#BalooThambi2-Regular") format("svg");} @font-face { font-family:"Baloo_Thambi_2_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/baloothambi2medium/font.eot"); src:url("//static.zohocdn.com/webfonts/baloothambi2medium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/baloothambi2medium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/baloothambi2medium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/baloothambi2medium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/baloothambi2medium/font.svg#BalooThambi2-Medium") format("svg");} @font-face { font-family:"Baloo_Thambi_2_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.eot"); src:url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/baloothambi2semibold/font.svg#BalooThambi2-SemiBold") format("svg");} @font-face { font-family:"Baloo_Thambi_2_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/baloothambi2bold/font.eot"); src:url("//static.zohocdn.com/webfonts/baloothambi2bold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/baloothambi2bold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/baloothambi2bold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/baloothambi2bold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/baloothambi2bold/font.svg#BalooThambi2-Bold") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Condensed_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsanscond/font.svg#IBMPlexSansCond") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Condensed_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsanscondmedium/font.svg#IBMPlexSansCond-Medium") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Condensed_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsanscondsemibold/font.svg#IBMPlexSansCond-SemiBold") format("svg");} @font-face { font-family:"IBM_Plex_Sans_Condensed_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.eot"); src:url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/ibmplexsanscondbold/font.svg#IBMPlexSansCond-Bold") format("svg");} @font-face { font-family:"KoHo_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/kohoregular/font.eot"); src:url("//static.zohocdn.com/webfonts/kohoregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kohoregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kohoregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kohoregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kohoregular/font.svg#KoHo-Regular") format("svg");} @font-face { font-family:"KoHo_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/kohomedium/font.eot"); src:url("//static.zohocdn.com/webfonts/kohomedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kohomedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kohomedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kohomedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kohomedium/font.svg#KoHo-Medium") format("svg");} @font-face { font-family:"KoHo_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/kohosemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/kohosemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kohosemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kohosemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kohosemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kohosemibold/font.svg#KoHo-SemiBold") format("svg");} @font-face { font-family:"KoHo_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/kohobold/font.eot"); src:url("//static.zohocdn.com/webfonts/kohobold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/kohobold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/kohobold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/kohobold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/kohobold/font.svg#KoHo-Bold") format("svg");} @font-face { font-family:"Gothic_A1_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/gothica1regular/font.eot"); src:url("//static.zohocdn.com/webfonts/gothica1regular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/gothica1regular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/gothica1regular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/gothica1regular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/gothica1regular/font.svg#GothicA1-Regular") format("svg");} @font-face { font-family:"Gothic_A1_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/gothica1medium/font.eot"); src:url("//static.zohocdn.com/webfonts/gothica1medium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/gothica1medium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/gothica1medium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/gothica1medium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/gothica1medium/font.svg#GothicA1-Medium") format("svg");} @font-face { font-family:"Gothic_A1_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/gothica1semibold/font.eot"); src:url("//static.zohocdn.com/webfonts/gothica1semibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/gothica1semibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/gothica1semibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/gothica1semibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/gothica1semibold/font.svg#GothicA1-SemiBold") format("svg");} @font-face { font-family:"Gothic_A1_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/gothica1bold/font.eot"); src:url("//static.zohocdn.com/webfonts/gothica1bold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/gothica1bold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/gothica1bold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/gothica1bold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/gothica1bold/font.svg#GothicA1-Bold") format("svg");} @font-face { font-family:"Roboto_Slab_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/robotoslabregular/font.eot"); src:url("//static.zohocdn.com/webfonts/robotoslabregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/robotoslabregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/robotoslabregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/robotoslabregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/robotoslabregular/font.svg#RobotoSlab-Regular") format("svg");} @font-face { font-family:"Roboto_Slab_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/robotoslabmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/robotoslabmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/robotoslabmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/robotoslabmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/robotoslabmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/robotoslabmedium/font.svg#RobotoSlab-Medium") format("svg");} @font-face { font-family:"Roboto_Slab_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/robotoslabsemibold/font.svg#RobotoSlab-SemiBold") format("svg");} @font-face { font-family:"Roboto_Slab_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/robotoslabbold/font.eot"); src:url("//static.zohocdn.com/webfonts/robotoslabbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/robotoslabbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/robotoslabbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/robotoslabbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/robotoslabbold/font.svg#RobotoSlab-Bold") format("svg");} @font-face { font-family:"Fira_Sans_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/firasansregular/font.eot"); src:url("//static.zohocdn.com/webfonts/firasansregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/firasansregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/firasansregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/firasansregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/firasansregular/font.svg#FiraSans-Regular") format("svg");} @font-face { font-family:"Fira_Sans_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/firasansmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/firasansmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/firasansmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/firasansmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/firasansmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/firasansmedium/font.svg#FiraSans-Medium") format("svg");} @font-face { font-family:"Fira_Sans_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/firasanssemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/firasanssemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/firasanssemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/firasanssemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/firasanssemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/firasanssemibold/font.svg#FiraSans-SemiBold") format("svg");} @font-face { font-family:"Fira_Sans_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/firasansbold/font.eot"); src:url("//static.zohocdn.com/webfonts/firasansbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/firasansbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/firasansbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/firasansbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/firasansbold/font.svg#FiraSans-Bold") format("svg");} @font-face { font-family:"Advent_Pro_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/adventproregular/font.eot"); src:url("//static.zohocdn.com/webfonts/adventproregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/adventproregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/adventproregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/adventproregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/adventproregular/font.svg#AdventPro-Regular") format("svg");} @font-face { font-family:"Advent_Pro_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/adventpromedium/font.eot"); src:url("//static.zohocdn.com/webfonts/adventpromedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/adventpromedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/adventpromedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/adventpromedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/adventpromedium/font.svg#AdventPro-Medium") format("svg");} @font-face { font-family:"Advent_Pro_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/adventprosemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/adventprosemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/adventprosemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/adventprosemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/adventprosemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/adventprosemibold/font.svg#AdventPro-SemiBold") format("svg");} @font-face { font-family:"Advent_Pro_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/adventprobold/font.eot"); src:url("//static.zohocdn.com/webfonts/adventprobold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/adventprobold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/adventprobold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/adventprobold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/adventprobold/font.svg#AdventPro-Bold") format("svg");} @font-face { font-family:"Cormorant_Garamond_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.eot"); src:url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cormorantgaramondregular/font.svg#CormorantGaramond-Regular") format("svg");} @font-face { font-family:"Cormorant_Garamond_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cormorantgaramondmedium/font.svg#CormorantGaramond-Medium") format("svg");} @font-face { font-family:"Cormorant_Garamond_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cormorantgaramondsemibold/font.svg#CormorantGaramond-SemiBold") format("svg");} @font-face { font-family:"Cormorant_Garamond_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.eot"); src:url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/cormorantgaramondbold/font.svg#CormorantGaramond-Bold") format("svg");} @font-face { font-family:"Archivo_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/archivoregular/font.eot"); src:url("//static.zohocdn.com/webfonts/archivoregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/archivoregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/archivoregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/archivoregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/archivoregular/font.svg#Archivo-Regular") format("svg");} @font-face { font-family:"Archivo_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/archivomedium/font.eot"); src:url("//static.zohocdn.com/webfonts/archivomedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/archivomedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/archivomedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/archivomedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/archivomedium/font.svg#Archivo-Medium") format("svg");} @font-face { font-family:"Archivo_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/archivosemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/archivosemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/archivosemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/archivosemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/archivosemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/archivosemibold/font.svg#Archivo-SemiBold") format("svg");} @font-face { font-family:"Archivo_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/archivobold/font.eot"); src:url("//static.zohocdn.com/webfonts/archivobold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/archivobold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/archivobold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/archivobold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/archivobold/font.svg#Archivo-Bold") format("svg");} @font-face { font-family:"Asap_Condensed_Regular"; font-weight:400; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapcondensedregular/font.eot"); src:url("//static.zohocdn.com/webfonts/asapcondensedregular/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapcondensedregular/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapcondensedregular/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapcondensedregular/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapcondensedregular/font.svg#AsapCondensed-Regular") format("svg");} @font-face { font-family:"Asap_Condensed_Medium"; font-weight:500; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.eot"); src:url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapcondensedmedium/font.svg#AsapCondensed-Medium") format("svg");} @font-face { font-family:"Asap_Condensed_Semi_Bold"; font-weight:600; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.eot"); src:url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapcondensedsemibold/font.svg#AsapCondensed-SemiBold") format("svg");} @font-face { font-family:"Asap_Condensed_Bold"; font-weight:700; font-style:normal; src:url("//static.zohocdn.com/webfonts/asapcondensedbold/font.eot"); src:url("//static.zohocdn.com/webfonts/asapcondensedbold/font.eot?#iefix") format("eot"), url("//static.zohocdn.com/webfonts/asapcondensedbold/font.woff2") format("woff2"), url("//static.zohocdn.com/webfonts/asapcondensedbold/font.woff") format("woff"), url("//static.zohocdn.com/webfonts/asapcondensedbold/font.ttf") format("truetype"), url("//static.zohocdn.com/webfonts/asapcondensedbold/font.svg#AsapCondensed-Bold") format("svg"); } /*$Id : $ */ .zstk-icon { display: inline-flex; } .zstk-icon--transparent { fill: transparent; } .zstk-icon--red { fill: var(--color-red); } .zstk-icon--white { fill: var(--color-white); } .zstk-icon--grey, .zstk-icon--greyhover { fill: var(--color-grey); } .zstk-icon--black, .zstk-icon--greyhover:hover { fill: var(--color-black); } .zstk-icon--bluegrey { fill: var(--color-darkbluegrey); } .zstk-icon--lightblack { fill: var(--color-lightblack); } .zstk-icon--blue { fill: var(--iconlink-color); } .zstk-icon--primaryblue { fill: var(--primary-color); } .zstk-icon--tomotored { fill: var(--iconmedia-color); } .zstk-icon--darkyellow { fill: var(--iconnetwork-color); } .zstk-icon--green { fill: var(--iconcaption-color) } .zstk-icon--pink { fill: var(--iconothers-color); } .zstk-icon--lightred { fill: var(--icon-color-lightred); } .zstk-icon--orange { fill: var(--icon-color-orange); } .zstk-icon--imageeditor { background-color: var(--icon-bgcolor-lightred); } .zstk-icon--lightgreen { fill: var(--icon-color-lightgreen) } .zstk-icon--darkgreen{fill:var(--icon-color-darkgreen)} .zstk-icon--iggrid { background-color: var(--icon-bgcolor-lightgreen); } .zstk-icon--igregram { background-color: var(--icon-bgcolor-lightyellow); } .zstk-icon--utmbuilder { background-color: var(--icon-bgcolor-lightorange); } .zstk-icon--bgred { background-color: var(--iconmedia-bg); } .zstk-icon--tflink{background-color: var(--icon-bgcolor-lightblue);} .zstk-icon--placeholder { fill: var(--placeholder-color); } .zstk-icon--jade-s20 { fill: var(--success-color); } .zstk-icon--cyan{fill:var(--icon-color-cyan)} .zstk-icon--remixlink{background-color:var(--icon-bgcolor-lightgreenremix)} ._6px { width: 0.6rem; height: 0.6rem; } ._7px { width: 0.7rem; height: 0.7rem; } ._8px { width: 0.8rem; height: 0.8rem; } ._9px { width: 0.9rem; height: 0.9rem; } ._10px { width: 1rem; height: 1rem; } ._11px { width: 1.1rem; height: 1.1rem; } ._12px { width: 1.2rem; height: 1.2rem; } ._13px { width: 1.3rem; height: 1.3rem; } ._14px { width: 1.4rem; height: 1.4rem; } ._15px { width: 1.5rem; height: 1.5rem; } ._16px { width: 1.6rem; height: 1.6rem; } ._17px { width: 1.7rem; height: 1.7rem; } ._18px { width: 1.8rem; height: 1.8rem; } ._19px { width: 1.9rem; height: 1.9rem; } ._20px { width: 2rem !important; height: 2rem !important; } ._22px { width: 2.2rem !important; height: 2.2rem !important; } ._24px { width:2.4rem; height:2.4rem; } ._25px { width: 2.5rem; height: 2.5rem; } ._28px { width: 2.8rem; height: 2.8rem; } ._30px { width: 3rem !important; height: 3rem !important; } ._32px { width:3.2rem; height:3.2rem; } ._36px { width:3.6rem; height:3.6rem; } ._35px{width: 3.5rem;height: 3.5rem;} ._45px{width: 4.5rem;height: 4.5rem;} ._50px { width: 5rem; height: 5rem; } ._55px { width: 5.5rem; height: 5.5rem; } ._60px { width: 6rem; height: 6rem; } ._65px { width: 6.5rem; height: 6.5rem; } ._70px { width: 7rem; height: 7rem; } ._80px { width: 8rem; height: 8rem; } ._100px { width: 10rem; height: 10rem; } ._120px { width: 12rem; height: 12rem; } .w5px { width: 0.5rem; } .h9px { height: 0.9rem; } /*$Id : $ */ :root{ --layout-font-size: 0.66845vw; --font-regular: "PuviRegular"; --font-medium: 'PuviMedium'; --font-semibold: 'PuviSemiBold'; --font-bold: 'PuviBold'; --tooltip-bg: #353739; --nav-bgcolor: #121C29; --nav-list--hoverbg: #2C3C51; --nav-selectedbar-clr:#f07b61; --icon-color-grey: #738FB4; --layoutsection-bgcolor: #f0f2f5; --color-lightblue: #E1EEFF; --header-tab-color: #e7ebf1; --color-blackblue: #2B3F58; --primary-color: #2274F0; --primary-light-color: #CEDEFB; --primary-btn-hovercolor: #1360d6; --secondary-btn-color: #EAF2FF; --red-btn-hovercolor: #cb3131; --border-grey: #DDE3ED; --skeletonanim-grey:#eaeaeb; --skeletonanim-bluegrey:#d8dee7; --placeholder-color: #A5AEBE; --color-white: #FFFFFF; --color-black: #000000; --color-lightblack: #3C4551; --color-darkbluegrey: #C6CEDB; --light-txtgrey:#a0a0a0; --greybtn-hover: #e5ebf5; --color-grey: #697689; --color-red: #DC5858; --color-redorange: #ED6F54; --color-divideborder: #DBE2ED; --iconlink-bg: #DDEBFF; --iconmedia-bg: #FFDCDC; --iconnetwork-bg: #FCEDC7; --iconcaption-bg: #DEF4DA; --iconothers-bg: #FCE6F0; --iconlink-color: #1A69DF; --iconmedia-color: #DD5353; --iconnetwork-color: #C58C07; --iconcaption-color: #4CA13C; --iconothers-color: #D66397; --color-bluegrey: #DEE4EE; --innertab-header-bgcolor: #DCE1EA; --panel-icon-color: #CBD1DC; --panel-bgcolor: #F4F7FB; --panel-hover-bgcolor: #EDF3FF; --panel-selected-bgcolor: #F9FBFF; --panel-badge-bgcolor: #DBE2EC; --panel-selected-badge-bgcolor: #D9E3F9; --icon-bgcolor-lightred: #FFEDED; --icon-color-lightred: #EB6262; --icon-color-orange:#F27232; --icon-color-cyan:#2F89B3; --icon-color-darkgreen:#2CA798; --icon-bgcolor-lightgreen: #E5FAE2; --icon-color-lightgreen: #4D8A42; --icon-bgcolor-lightyellow: #FFF2D1; --icon-bgcolor-lightorange:#FFF3ED; --icon-bgcolor-lightblue:#EBF9FF; --header-sepearator-border: #C4CAD4; --icon-bgcolor-lightgreenremix:#E9F6F5; --light-cider: #CB8136; --light-cider-border: #F7CEA6; --light-cider-bgcolor: #FFF6ED; --gridpanel-bgcolor: #E6EBF2; --color-candyblue: #D2DBE8; --highlight-line-color: #FF4B4B; --dark-grey: #858F9F; --frame-color: rgba(0, 0, 0, 0.5); --color-ghostwhite: #A8B0BE; --color-darkgrey: #DDE3ED; --color-dodgerblue: #2274F0; --color-lightghostwhite: #DEE4EE; --color-darkgray-3: #738FB4; --color-saddlebrown: #78492B; --color-lightslategrey: #7F8EA3; --color-darkgray-5: #8EA2BE; --color-darkblue: #223752; --color-lightorange: #FF8450; --color-royalblue: #1A69DF; --color-violet: #495BFF; --color-lightgrey-3: #B5C0D0; --color-green: #237A60; --color-bisque: #F2DBAF; --color-lightseagreen: #8C97A9; --color-teal: #F2DBAF; --color-seagreen: #127171; --color-gold: #FFF279; --color-darkslategrey: #386168; --color-coral: #ED6F54; --color-darkcyan: #528D9F; --color-mediumpurple: #9F93E2; --color-darkred: #E32327; --color-mildmred:#dc5859; --color-darkroyalblue: #216DB3; --color-aqua: #25F4EE; --color-blueviolet: #8150B1; --color-lavender: #E7DAF4; --color-peachbuff: #FFB49C; --color-yellowgreen: #91A573; --success-color: #04A757; --success-bgcolor: #effff2; --fail-color: #D24949; --fail-bgcolor: #FFF6F6; --tab-color-yellow: #FFF5E2; --yellowtab-close-clr:#f2e2c3; --infoblock-goldcolor: #F8AA13; --infoblock--goldbg: #FFFCF6; --infoblack--bordergold: #ECBD61; --errborder-clr:#ec6c6c; --timegrey-clr: #A5AEBE; --mandatory-sym-clr:#CC4B37; --cardhover-bg-clr:#f5f5f5; --infomsg-txt-clr:#6F6F6F; --color-grey-f4: #F4F4F4; --color-orange:#EB905C; } /*Reset css starts here*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; box-sizing: border-box; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: flex; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*Reset css ends here*/ *, *::after, *::before { box-sizing: border-box; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-background-clip: text; -webkit-text-fill-color: var(--color-black); box-shadow: 0 0 3rem var(--color-white) inset; transition: background-color 5000s ease-in-out 0s; } .zstk-fontregular { font-family: var(--font-regular) !important; } .zstk-fontmedium { font-family: var(--font-medium) !important; } .zstk-fontsemibold { font-family: var(--font-semibold) !important; } .zstk-fontbold { font-family: var(--font-bold) !important; } .w100 { width: 100%; } .wauto { width: auto !important; } .w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w75 { width: 75%; } .w58 { width: 58%; } .w85 { width: 85%; } .w90 { width: 90% !important; } .max-w90 { max-width:90%; } .w19px{width: 1.9rem !important;} ._wid30px{width: 3rem;} .w48px { width: 4.8rem; } .w50px { width: 5rem; } .w80px { width: 8rem; } .w100px { width: 10rem; } .w115px { width: 11.5rem; } .w125px { width: 12.5rem; } .w135px { width: 13.5rem; } .w160px { width: 16rem; } .w180px { width: 18rem; } .w200px { width: 20rem; } .w225px { width: 22.5rem; } .w285px { width: 28.5rem; } .w325px { width: 32.5rem; } .w400px { width: 40rem; } .w460px { width: 46rem; } .w530px { width: 53rem; } .w535px { width: 53.5rem; } .w540px { width: 54rem; } .w550px { width: 55rem; } .w765px { width: 76.5rem; } .wid150px { width: 150px; } .wid165px { width: 165px; } .max-w100px { max-width: 10rem !important; } .max-w105px { max-width: 10.5rem; } .max-w170px { max-width: 17rem !important; } .min-w400px { min-width: 40rem; } .h100 { height: 100%; } .h4px { height: 0.4rem } .h16px { height: 1.6rem } .h25px { height: 2.5rem } .h45px { height: 4.5rem } .h55px { height: 5.5rem } .h60px { height: 6rem } .h80px { height: 8rem; } .h85px { height: 8.5rem } .h90px { height: 9rem } .h115px { height: 11.5rem } .h135px { height: 13.5rem } .h150px { height: 15rem } .h400px { height: 40rem; } .max-hunset { max-height: unset !important; } .max-h50px {max-height: 5rem;} .max-h115px { max-height: 11.5rem; } .max-h200px { max-height: 20rem; } .max-h450px { max-height: 45rem; } .min-h145px { min-height: 14.5rem; } .min-h200px { min-height: 20rem; } a, a:hover { outline: none; box-shadow: none; text-decoration: none; } .tacenter { text-align: center; } .uppercase { text-transform: uppercase; } .noborder { border: none !important; } .bordergrey { border: 0.1rem solid var(--border-grey); } .tgreyborder { border-top: 0.1rem solid var(--border-grey); } .rgreyborder { border-right: 0.1rem solid var(--border-grey); } .bgreyborder { border-bottom: 0.1rem solid var(--border-grey); } .lgreyborder { border-left: 0.1rem solid var(--border-grey); } .bradius3 { border-radius: 0.3rem; } .bradius5 { border-radius: 0.5rem; } .bradius8 { border-radius: 0.8rem; } .bradius10 { border-radius: 1rem; } .bradius50 { border-radius: 50%; } .bgcolor-transparent { background-color: transparent !important; } .bgcolor-white { background-color: var(--color-white) !important; } .bgcolor-black { background-color: var(--color-black); } .bglayoutcolor { background-color: var(--layoutsection-bgcolor); } .bgcolor-candyblue { background-color: var(--color-candyblue); } .colorblack { color: var(--color-black); } .colorprimary { color: var(--primary-color); } .zstk-greytxt--hover, .colorgrey { color: var(--color-grey); } .zstk-greytxt--hover:hover { color: var(--color-black); text-decoration: underline; } .tdunderline, .tdunderline:hover, .ahover:hover { text-decoration: underline; } .breakword{word-break: break-word;} .f11 { font-size: 1.1rem !important; } .f12 { font-size: 1.2rem !important; } .f13 { font-size: 1.3rem !important; } .f14 { font-size: 1.4rem !important; } .f15 { font-size: 1.5rem !important; } .f16 { font-size: 1.6rem !important; } .f18 { font-size: 1.8rem !important; } .f20 { font-size: 2rem !important; } .f24 { font-size: 2.4rem !important; } .lh18 { line-height: 1.8rem; } .lh20 { line-height: 2rem; } .lh48 { line-height: 4.8rem; } .p0 { padding: 0 !important; } .p5 { padding: 0.5rem !important; } .p10 { padding: 1rem !important; } .p12 { padding: 1.2rem !important; } .p15 { padding: 1.5rem !important; } .p16 { padding: 1.6rem !important; } .p20 { padding: 2rem !important; } .p25 { padding: 2.5rem !important; } .p30 { padding: 3rem !important; } .p35 { padding: 3.5rem !important; } .p50 { padding: 5rem !important; } .pt0 { padding-top: 0rem !important; } .pt4 { padding-top: 0.4rem !important; } .pt5 { padding-top: 0.5rem !important; } .pt8 { padding-top: 0.8rem !important; } .pt10 { padding-top: 1rem !important; } .pt12{padding-top:1.2rem !important} .pt14 { padding-top: 1.4rem !important; } .pt15 { padding-top: 1.5rem !important; } .pt20 { padding-top: 2rem !important; } .pt25 { padding-top: 2.5rem !important; } .pt30 { padding-top: 3rem !important; } .pt35 { padding-top: 3.5rem !important; } .pt50 { padding-top: 5rem !important; } .pt70 { padding-top: 7rem !important; } .pr0 { padding-right: 0 !important; } .pr5 { padding-right: 0.5rem !important; } .pr10 { padding-right: 1rem !important; } .pr12 { padding-right: 1.2rem !important; } .pr14 { padding-right: 1.4rem !important; } .pr15 { padding-right: 1.5rem !important; } .pr20 { padding-right: 2rem !important; } .pr25 { padding-right: 2.5rem !important; } .pr30 { padding-right: 3rem !important; } .pr35 { padding-right: 3.5rem; } .pr100 { padding-right: 10rem !important; } .pb0 { padding-bottom: 0 !important; } .pb4 { padding-bottom: 0.4rem !important; } .pb5 { padding-bottom: 0.5rem !important; } .pb8{padding-bottom: 0.8rem !important;} .pb10 { padding-bottom: 1rem !important; } .pb14 { padding-bottom: 1.4rem !important; } .pb15 { padding-bottom: 1.5rem !important; } .pb16 { padding-bottom: 1.6rem !important; } .pb20 { padding-bottom: 2rem !important; } .pb25 { padding-bottom: 2.5rem !important; } .pb30 { padding-bottom: 3rem !important; } .pb50 { padding-bottom: 5rem !important; } .pl0 { padding-left: 0 !important; } .pl5 { padding-left: 0.5rem !important; } .pl10 { padding-left: 1rem !important; } .pl12 { padding-left: 1.2rem !important; } .pl15 { padding-left: 1.5rem !important; } .pl20 { padding-left: 2rem !important; } .pl25 { padding-left: 2.5rem !important; } .pl30 { padding-left: 3rem !important; } .pl35 { padding-left: 3.5rem; } .pl50 { padding-left: 5rem !important; } .pl100 { padding-left: 10rem !important; } .pl5per { padding-left: 5% !important; } .mauto { margin: 0 auto !important; } .mall-auto ,.mallauto{ margin: auto !important; } .mYauto { margin: auto 0 !important; } .mlauto{margin-left:auto !important} .m0{margin: 0 !important;} .m30 { margin: 3rem !important; } .mt0 { margin-top: 0 !important; } .mt3 { margin-top: 0.3rem !important; } .mt5 { margin-top: 0.5rem !important; } .mt7 { margin-top: 0.7rem !important; } .mt8 { margin-top: 0.8rem !important; } .mt10 { margin-top: 1rem !important; } .mt15 { margin-top: 1.5rem !important; } .mt16{margin-top:1.6rem !important} .mt20 { margin-top: 2rem !important; } .mt25 { margin-top: 2.5rem !important; } .mt30 { margin-top: 3rem !important; } .mt40 { margin-top: 4rem !important; } .mr0 { margin-right: 0!important; } .mr2 { margin-right: 0.2rem!important; } .mr5 { margin-right: 0.5rem!important; } .mr7 { margin-right: 0.7rem!important; } .mr8 { margin-right: 0.8rem!important; } .mr10 { margin-right: 1rem!important; } .mr12 { margin-right: 1.2rem!important; } .mr15 { margin-right: 1.5rem!important; } .mr16px { margin-right: 16px; } .mr20 { margin-right: 2rem!important; } .mr25 { margin-right: 2.5rem!important; } .mr30 { margin-right: 3rem!important; } .mb0 { margin-bottom: 0!important; } .mb10 { margin-bottom: 1rem!important; } .ml0 { margin-left: 0 !important; } .ml2 { margin-left: 0.2rem !important; } .ml5 { margin-left: 0.5rem !important; } .ml7 { margin-left: 0.7rem!important; } .ml8 { margin-left: 0.8rem!important; } .ml10 { margin-left: 1rem!important; } .ml12 { margin-left: 1.2rem!important; } .ml15 { margin-left: 1.5rem!important; } .ml20 { margin-left: 2rem!important; } .ml25 { margin-left: 2.5rem!important; } .ml30 { margin-left: 3rem!important; } .mb5 { margin-bottom: 0.5rem!important; } .mb10 { margin-bottom: 1rem!important; } .mb15 { margin-bottom: 1.5rem!important; } .mb16 { margin-bottom: 1.6rem!important; } .mb20 { margin-bottom: 2rem!important; } .mb25 { margin-bottom: 2.5rem!important; } .mb30 { margin-bottom: 3rem!important; } .zstk-scroller { height: 100%; overflow-x: hidden; overflow-y: auto; } .dnone { display: none!important; } .dgrid { display: grid; } .dblock { display: block; } .zstk-gridgap-05{grid-gap:0.5rem !important} .flexcenter { display: flex; align-items: center; } .dflex { display: flex; } .dinline-flex { display: inline-flex; } .flexgrow-1 { flex-grow: 1; } .flexshrink-0 { flex-shrink: 0; } .aicenter { align-items: center; } .fdrow { flex-direction: row; } .fdcolumn { flex-direction: column; } .aiflexend { align-items: flex-end; } .aiflexstart { align-items: flex-start; } .jcflexstart { justify-content: flex-start !important; } .jcflexend { justify-content: flex-end; } .jccenter { justify-content: center; } .jcspacebtwen { justify-content: space-between; } .jcspaceevenly { justify-content: space-evenly; } .flexflow-wrap { flex-flow: wrap; } .asflexstart{align-self: flex-start;} .flexwrap{flex-wrap: wrap;} .chelp { cursor: help; } .cp { cursor: pointer; } .posrel { position: relative; } .posabs { position: absolute; } .posfix {position: fixed !important;} .zstk-possticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 2; } .ofhidden { overflow: hidden; } .ofauto { overflow: auto; } .ofyauto { overflow-y: auto; } .ofxauto{overflow-x: auto;} .usnone { user-select: none; } .ofcontain { object-fit: contain; } .ofcover { object-fit: cover; } .ofyunset{overflow-y: unset;} .ellipsis { text-overflow: ellipsis; white-space: nowrap; max-width: 100%; overflow: hidden; } .ws-prewrap{white-space: pre-wrap;} .zstk-fadeout { opacity: 0; visibility: hidden; transition: all 0.25s; } .bg-repeat-no{background-repeat: no-repeat;} .bg-cover{background-size: cover;} .bgcolor-darkgrey{ background-color: var(--color-darkgrey); } .bgcolor-ghostwhite { background-color: var(--color-ghostwhite); } .bgcolor-dodgerblue { background-color: var(--color-dodgerblue); } .bgcolor-dimgrey { background-color: var(--color-grey); } .bgcolor-lightghostwhite { background-color: var(--color-lightghostwhite); } .bgcolor-darkgray-3 { background-color: var(--color-darkgray-3); } .bgcolor-saddlebrown { background-color: var(--color-saddlebrown); } .bgcolor-darktomato { background-color: var(--color-red); } .bgcolor-lightslategrey { background-color: var(--color-lightslategrey); } .bgcolor-darkgray-5 { background-color: var(--color-darkgray-5); } .bgcolor-darkblue { background-color: var(--color-darkblue); } .bgcolor-lightorange { background-color: var(--color-lightorange); } .bgcolor-royalblue { background-color: var(--color-royalblue); } .bgcolor-violet { background-color: var(--color-violet); } .bgcolor-lightgrey-3 { background-color: var(--color-lightgrey-3); } .bgcolor-green { background-color: var(--color-green); } .bgcolor-bisque { background-color: var(--color-bisque); } .bgcolor-lightseagreen { background-color: var(--color-lightseagreen); } .bgcolor-teal { background-color: var(--color-teal); } .bgcolor-seagreen { background-color: var(--color-seagreen); } .bgcolor-gold { background-color: var(--color-gold); } .bgcolor-darkslategrey { background-color: var(--color-darkslategrey); } .bgcolor-coral { background-color: var(--color-coral); } .bgcolor-darkcyan { background-color: var(--color-darkcyan); } .bgcolor-mediumpurple { background-color: var(--color-mediumpurple); } .bgcolor-red { background-color:var(--color-mildmred) ; } .bgcolor-darkred{background-color: var(--color-darkred);} .bgcolor-darkroyalblue { background-color: var(--color-darkroyalblue); } .bgcolor-aqua { background-color: var(--color-aqua); } .bgcolor-blueviolet { background-color: var(--color-blueviolet); } .bgcolor-lavender { background-color: var(--color-lavender); } .bgcolor-peachbuff { background-color: var(--color-peachbuff); } .bgcolor-yellowgreen { background-color: var(--color-yellowgreen); } .bgcolor-lightblue { background-color: var(--color-lightblue); } .bgcolor-grey-f5{background-color: #f5f5f5;} .zstk-spinnerloading { position: relative; } .zstk-spinnerloading::before { content: ""; display: inline-flex; width: 100%; height: 100%; border-style: solid; border-width: 0.2rem; border-color: var(--primary-color); border-top-color: transparent; border-radius: 50%; animation: loaderSpin 0.65s infinite forwards linear; } @keyframes loaderSpin { to { transform: rotate(360deg); } } .zstk-verticaldivider { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; z-index: 2; } .zstk-verticaldivider::after { content: ""; position: absolute; top: 0; left: 50%; width: 0.1rem; height: 100%; background-color: var(--header-sepearator-border); transform: translateX(-50%); z-index: -1; } .zstk-verticaldivider > span { padding: 1rem; background-color: var(--color-white); } .zstk-divider{width: 1px;height: 25px;background-color: #DDE3ED;} /*loader css*/ .zstk-spinner-grey::before{border-color: var(--light-txtgrey);border-top-color: transparent;} .zstk-spinner-white::before{border-color: var(--color-white);border-top-color: transparent;} .zstk-spinner-thin::before{border-width: 0.1rem;} .zstk-spinner-grey::before { border-color: var(--color-grey); border-top-color: transparent; } /*Loader css*/ .zstk-moresload { display:flex; align-items:center; justify-content:center; padding: 1rem 0; } .zstk-moresload i { width: 10px; height: 10px; margin: 2px; background-color: #8c8e8c; border-radius: 100%; display: inline-block; animation: moreloaderanim 1s infinite ease-in-out both; } .zstk-moresload i:first-child { animation-delay: -0.6s; } .zstk-moresload i:nth-child(2) { animation-delay: -0.4s; } .zstk-moresload i:nth-child(3) { animation-delay: -0.2s; } .zstk-moresload i:last-child { animation-delay: 0s; } .zstk-loadercont-greybg{background-color: var(--skeletonanim-grey);} .zstk-skeleton-loader-bluegrey{background-color: var(--skeletonanim-bluegrey) !important;} .zstk-skeleton-loader{animation:zstk-skeletonanim 1s cubic-bezier(1,0,0,1) infinite;background-color: var(--skeletonanim-grey);} @keyframes moreloaderanim { 0%, 80%, 100% { transform: scale(0); opacity: 0; } 40% { transform: scale(1); opacity: 1; } } .zstk-newtabloading { position: relative; } .zstk-newtabloading .zstk-newspinner-cont { background: rgb(255 255 255 / 50%); position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; } .zstk-newtabloading .zstk-newtab-blur { filter: blur(3px); } /*Loader css*/ /*error message css*/ .zstk-errfield .zstk-input--cont{ border: 0.1rem solid var(--errborder-clr);animation: zstk-errshakeAnim 0.3s 1; -webkit-animation: zstk-errshakeAnim 0.4s 1 linear; -moz-animation: zstk-errshakeAnim 0.4s 1 linear; -o-animation: zstk-errshakeAnim 0.4s 1 linear; } [data-container="zstk-errfield__msg"] > span{font-size: 1.2rem;color:var(--color-grey);padding-left: 0.5rem;} .zstk-errfield [data-container="zstk-errfield__msg"] {display: flex !important;} .zstk-greytime{color:var(--timegrey-clr)} .zstk-mandatorysym{color:var(--mandatory-sym-clr);font-size: 1.4rem;} .zstk-errfield .zstk-errfield__msg { display: flex; } .zstk-errfield__msg { align-items: center; padding-top: 1rem; } .zstk-errfield__msg > span{font-size: 1.2rem;color:var(--color-grey);padding-left: 0.5rem;} @keyframes loaderSpin { to { transform: rotate(360deg); } } @keyframes zstk-errshakeAnim { 0% {transform: translate(0.5rem);} 20% {transform: translate(-0.5rem);} 40% {transform: translate(0.2rem);} 60% {transform: translate(-0.2rem);} 80% {transform: translate(0.1rem);} 100% { transform: translate(0rem); } } @-webkit-keyframes zstk-errshakeAnim { 0% { -webkit-transform: translate(0.5rem); } 20% { -webkit-transform: translate(-0.5rem); } 40% { -webkit-transform: translate(0.2rem); } 60% { -webkit-transform: translate(-0.2rem); } 80% { -webkit-transform: translate(0.1rem); } 100% { -webkit-transform: translate(0rem); } } @-moz-keyframes zstk-errshakeAnim { 0% { -moz-transform: translate(0.5rem); } 20% { -moz-transform: translate(-0.5rem); } 40% { -moz-transform: translate(0.2rem); } 60% { -moz-transform: translate(-0.2rem); } 80% { -moz-transform: translate(0.1rem); } 100% { -moz-transform: translate(0rem); } } @-o-keyframes zstk-errshakeAnim { 0% { -o-transform: translate(0.5rem); } 20% { -o-transform: translate(-0.5rem); } 40% { -o-transform: translate(0.2rem); } 60% { -o-transform: translate(-0.2rem); } 80% { -o-transform: translate(0.1rem); } 100% { -o-origin-transform: translate(0rem); } } @keyframes zstk-skeletonanim { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } /*error message css*/ .zstk-errpage-layout{ height: 100vh; display: flex; flex-direction: column; } .zstk-liststyle-disc{list-style-type: disc;} .zstk-gridimg-prev { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; } /*dropzone*/ .zstk-dropzone-cont { border: 2px dashed var(--border-grey); padding: 2rem 0; background-color: var(--panel-bgcolor); width: 100%; position: absolute; height: 100%; z-index: 9; display: flex; align-items: center; justify-content: center; color: var(--color-grey); font-size: 1.6rem; border-radius: 5px; } .zstk-zoom-disable{ pointer-events: none;cursor: auto; opacity: 0.5;} .zstk-clickable-link{transition: all 0.3s;cursor: pointer;color: var(--primary-color);} .zstk-clickable-link:hover,.hoverunderline:hover{text-decoration: underline;} /*web fonts starts here*/ .zstk-publicsans--font { --font-regular: "Public_Sans_Regular"; --font-medium: 'Public_Sans_Medium'; --font-semibold: 'Public_Sans_SemiBold'; --font-bold: 'Public_Sans_Bold'; } .zstk-cabins--font { --font-regular: "Cabin_Regular"; --font-medium: 'Cabin_Medium'; --font-semibold: 'Cabin_Semi_Bold'; --font-bold: 'Cabin_Bold'; } .zstk-montserrat--font { --font-regular: "Montserrat_regular"; --font-medium: 'Montserrat_Medium'; --font-semibold: 'Montserrat_Semi_Bold'; --font-bold: 'Montserrat_Bold'; } .zstk-asap--font { --font-regular: "Asap_regular"; --font-medium: 'Asap_Medium'; --font-semibold: 'Asap_Semi_Bold'; --font-bold: 'Asap_Bold'; } .zstk-manrope--font { --font-regular: "Manrope_regular"; --font-medium: 'Manrope_Medium'; --font-semibold: 'Manrope_Semi_Bold'; --font-bold: 'Manrope_Bold'; } .zstk-abhaya_libre--font { --font-regular: "Abhaya_Libre_regular"; --font-medium: 'Abhaya_Libre_Medium'; --font-semibold: 'Abhaya_Libre_Semi_Bold'; --font-bold: 'Abhaya_Libre_Bold'; } .zstk-expletus_sans--font { --font-regular: "Expletus_Sans_regular"; --font-medium: 'Expletus_Sans_Medium'; --font-semibold: 'Expletus_Sans_Semi_Bold'; --font-bold: 'Expletus_Sans_Bold'; } .zstk-rajdhani--font { --font-regular: "Rajdhani_regular"; --font-medium: 'Rajdhani_Medium'; --font-semibold: 'Rajdhani_Semi_Bold'; --font-bold: 'Rajdhani_Bold'; } .zstk-inter--font { --font-regular: "Inter_regular"; --font-medium: 'Inter_Medium'; --font-semibold: 'Inter_Semi_Bold'; --font-bold: 'Inter_Bold'; } .zstk-ibm_plex_sans--font { --font-regular: "IBM_Plex_Sans_regular"; --font-medium: 'IBM_Plex_Sans_Medium'; --font-semibold: 'IBM_Plex_Sans_Semi_Bold'; --font-bold: 'IBM_Plex_Sans_Bold'; } .zstk-poppins--font { --font-regular: "Poppins_regular"; --font-medium: 'Poppins_Medium'; --font-semibold: 'Poppins_Semi_Bold'; --font-bold: 'Poppins_Bold'; } .zstk-oswald--font { --font-regular: "Oswald_regular"; --font-medium: 'Oswald_Medium'; --font-semibold: 'Oswald_Semi_Bold'; --font-bold: 'Oswald_Bold'; } .zstk-barlow--font { --font-regular: "Barlow_regular"; --font-medium: 'Barlow_Medium'; --font-semibold: 'Barlow_Semi_Bold'; --font-bold: 'Barlow_Bold'; } .zstk-kanit--font { --font-regular: "Kanit_regular"; --font-medium: 'Kanit_Medium'; --font-semibold: 'Kanit_Semi_Bold'; --font-bold: 'Kanit_Bold'; } .zstk-rasa--font { --font-regular: "Rasa_regular"; --font-medium: 'Rasa_Medium'; --font-semibold: 'Rasa_Semi_Bold'; --font-bold: 'Rasa_Bold'; } .zstk-baloo_thambi_2--font { --font-regular: "Baloo_Thambi_2_regular"; --font-medium: 'Baloo_Thambi_2_Medium'; --font-semibold: 'Baloo_Thambi_2_Semi_Bold'; --font-bold: 'Baloo_Thambi_2_Bold'; } .zstk-ibm_plex_sans_condensed--font { --font-regular: "IBM_Plex_Sans_Condensed_regular"; --font-medium: 'IBM_Plex_Sans_Condensed_Medium'; --font-semibold: 'IBM_Plex_Sans_Condensed_Semi_Bold'; --font-bold: 'IBM_Plex_Sans_Condensed_Bold'; } .zstk-koho--font { --font-regular: "KoHo_regular"; --font-medium: 'KoHo_Medium'; --font-semibold: 'KoHo_Semi_Bold'; --font-bold: 'KoHo_Bold'; } .zstk-gothic_a1--font { --font-regular: "Gothic_A1_regular"; --font-medium: 'Gothic_A1_Medium'; --font-semibold: 'Gothic_A1_Semi_Bold'; --font-bold: 'Gothic_A1_Bold'; } .zstk-roboto_slab--font { --font-regular: "Roboto_Slab_regular"; --font-medium: 'Roboto_Slab_Medium'; --font-semibold: 'Roboto_Slab_Semi_Bold'; --font-bold: 'Roboto_Slab_Bold'; } .zstk-fira_sans--font { --font-regular: "Fira_Sans_regular"; --font-medium: 'Fira_Sans_Medium'; --font-semibold: 'Fira_Sans_Semi_Bold'; --font-bold: 'Fira_Sans_Bold'; } .zstk-advent_pro--font { --font-regular: "Advent_Pro_regular"; --font-medium: 'Advent_Pro_Medium'; --font-semibold: 'Advent_Pro_Semi_Bold'; --font-bold: 'Advent_Pro_Bold'; } .zstk-cormorant_garamond--font { --font-regular: "Cormorant_Garamond_regular"; --font-medium: 'Cormorant_Garamond_Medium'; --font-semibold: 'Cormorant_Garamond_Semi_Bold'; --font-bold: 'Cormorant_Garamond_Bold'; } .zstk-archivo--font { --font-regular: "Archivo_regular"; --font-medium: 'Archivo_Medium'; --font-semibold: 'Archivo_Semi_Bold'; --font-bold: 'Archivo_Bold'; } .zstk-asap_condensed--font { --font-regular: "Asap_Condensed_regular"; --font-medium: 'Asap_Condensed_Medium'; --font-semibold: 'Asap_Condensed_Semi_Bold'; --font-bold: 'Asap_Condensed_Bold'; } .zstk-roboto--font { --font-regular: "Roboto_Regular"; --font-bold: 'Roboto_Bold'; } .zstk-baloothambi--font{ --font-regular: "Baloo_Thambi_Regular";} .zstk-expletussans--font { --font-regular: "Expletus_Sans_Regular"; --font-bold: 'Expletus_Sans_Bold'; } .zstk-lobster--font { --font-regular: "Lobster_Two_Regular"; --font-bold: "Lobster_Two_Bold";} .zstk-publicsans--font{ --font-regular: "Public_Sans_Regular"; --font-bold: 'Public_Sans_Bold'; } .zstk-igdefault-font{font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;} /*web fonts ends here*/ /*emoji css starts here*/ .zstk-dropdown--emojidd{width: 26rem;height: 25.8rem;overflow-y: auto;color: #000;background-color: #FFFFFF;border: 1px solid var(--border-grey);box-shadow: 0 6px 12px rgba(0, 0, 0, .175);border-radius:5px;flex-direction: column;} .zstk-dropdown--emojidd .zstk-input--lhsicon{border: none;border-bottom: 0.1rem solid var(--border-grey);border-radius: 0;padding: 1.5rem;} .zstk-dropdown--emojidd .zstk-input--lhsicon .zstk-input{padding: 0 0 0 0.8rem;} .zstk-dropdown--emojidd .zstk-input--lhsicon > i{position: unset;} .smiley-groups-heading {padding: 1.5rem;} .smiley-groups span{display:inline-flex;font-size: 2rem;margin: 0.4rem;cursor: pointer;box-shadow: 0 0 0 transparent;transition: all 0.3s;border-radius: 50%;transform: scale3d(1,1,1);transform-origin: center center;transition: all 0.3s;} .smiley-groups span:hover{ transform: scale3d(1.15,1.15,1.15); } .smiley-bottom-finder {display: flex;align-items: center;justify-content: center;padding:1rem 1.5rem;background-color: var(--color-grey-f4);} .smiley-bottom-finder .zstk-icon{padding: 0.7rem;cursor: pointer;transform: scale(1);transition: all 0.3s;} .smiley-bottom-finder .zstk-icon:hover,.smiley-bottom-finder .zstk-icon.selected{transform: scale(1.2);} .smiley-bottom-finder .zstk-icon:hover svg,.smiley-bottom-finder .zstk-icon.selected svg{fill:#000} .smiley-groups-body { padding: 0rem 1.5rem 1rem 1.5rem; } /*emoji css ends here*/ /*border dropdown button changes*/ .zstk-groupbtn-ddbtn { width: 100%; padding: 1rem; border: 1px solid var(--border-grey); } .zstk-groupbtn-ddbtn .zstk-icon{ transform:rotate(0deg); transition:all 0.3s; } .zstk-groupbtn-ddbtn.is-selected .zstk-icon{ transform:rotate(180deg) } .hoverunderline:hover{text-decoration: underline;} /*skeleton loading starts here*/ .zs-skeleton { background-color:var(--skeleton-clr,#f5f5f5);-webkit-animation:linkprevloader 1s cubic-bezier(1,0,0,1) infinite; animation:linkprevloader 1s cubic-bezier(1,0,0,1) infinite; -moz-animation:linkprevloader 1s cubic-bezier(1,0,0,1) infinite; } ._hei250px{height: 25rem;} .zstk-h7px{height: 0.7rem;} /*skeleton loading ends here*/ .zstk-msg-info { background-color: var(--layoutsection-bgcolor); color: var(--infomsg-txt-clr); line-height: 1.9rem; } /*$Id : $ */ html { font-size:62.5%; } body { font-size: 1.4rem; font-family: var(--font-regular),sans-serif; color: var(--color-black); margin: 0 auto; padding: 0; overflow: hidden; -webkit-font-smoothing: subpixel-antialiased; text-rendering: optimizeLegibility; } /* .zstk-section--container { display: flex; flex-direction: column; height: calc(100vh - 0.1rem); background-color: var(--layoutsection-bgcolor); } */ .zstk-initloading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; } .zstk-initloader { display: inline-flex; width: 30rem; height: 30rem; } .zstk-root-cont{position: absolute;top:0;bottom:0;left:0;right: 0;z-index: 9;} /*Tooltip CSS starts here*/ [data-tooltip-val] > * { pointer-events: none; cursor: pointer; } .zstk-tooltip { position: fixed; padding: 0.4rem 1rem; font-size: 1.4rem; line-height: 2rem; background-color: var(--tooltip-bg); color: var(--color-white); border-radius: 0.5rem; opacity: 0; visibility: hidden; z-index: 999; } @keyframes toolTipTop { from { opacity: 0; visibility: hidden; transform: translateY(0); } to { opacity: 1; visibility: visible; transform: translateY(0.5rem); } } /*Tooltip CSS ends here*/ /*Nav side bar CSS starts here*/ .zstk-navcontainer {height: 100%;flex-shrink: 0;width: 6.4rem;display: flex;background-color: var(--nav-bgcolor);flex-direction: column; padding: 1.5rem 0; overflow-y: auto;} .zstk-navbaranim { animation: showNavBar 0.35s 1 forwards ease; } @keyframes showNavBar { from { margin-left: -5rem; } to { margin-left: 0; } } .zstk-navexpand.zstk-navcontainer { width: 23rem; z-index: 1000; animation: expandnavbar 0.35s 1 forwards ease; } .zstk-navminimise.zstk-navcontainer { animation: minimisenavbar 0.35s 1 forwards ease; } @keyframes expandnavbar { from { width: 5rem; } to { width: 23rem; } } @keyframes minimisenavbar { from { width: 23rem; } to { width: 5rem; } } .zstk-navlist--container {display: flex;flex-direction: column;} .zstk-navlist {border-left: 0.2rem solid transparent;margin-bottom: 1.5rem;display: flex;} .zstk-navbtn {flex-grow:1;display: flex;flex-direction: column;align-items: center;padding: 1rem 0.2rem;background-color: transparent;color: var(--color-white);transition: 0.3s;transition-property: background-color, color;} .zstk-navlist:hover .zstk-navbtn, .zstk-navlist.is-selected .zstk-navbtn { background-color: var(--nav-list--hoverbg); color: var(--color-white); } .zstk-navbtn > i svg {fill: var(--color-white);transition: fill 0.3s;} .zstk-navlist:hover .zstk-navbtn > i svg, .zstk-navlist.is-selected .zstk-navbtn > i svg { fill: var(--color-white) } .zstk-navbtn--title {padding-left: 0;font-size: 0.9rem;display: block;word-break: break-word;padding-top: 1rem;text-align: center;line-height: 1.2rem;} .zstk-navexpand .zstk-navbtn--title { display: block; } .zstk-navlist.is-selected { border-color: var(--primary-color); } /*Nav side bar CSS ends here*/ /*Topbar CSS starts here*/ .zstk-topbar--container { display: flex; align-items: center; height:4.8rem; background-color: var(--color-white); } .zstk-logoname { font-size: 1.8rem; font-family: var(--font-regular); color: var(--color-black); } .zstk-topbar--rhs_link { display: inline-flex; align-items: center; justify-content: center;padding:0.8rem;border-radius: 0.5rem;transition: background-color 0.25s ease; } .zstk-topbar--rhs_link:hover,.zstk-topbar--rhs_link.is-selected { background-color: #f5f5f5; } /*Topbar CSS ends here*/ /*Layout cont CSS starts here*/ .zstk-maincontainer { display: flex; height: calc(100vh - 4.8rem); position: relative; } .zstk-maincontainer .zstk-section--container { width: 100%; height: 100%; } .zstk-showleftnav.zstk-section--container {width: calc(100% - 7rem); animation: layoutAnim 0.35s 1 forwards ease; } @keyframes layoutAnim { from { width: 100%; left: 0; } to { width: calc(100% - 5rem); left: 5rem; } } .zstk-bodycontainer { flex-grow: 1; display: flex; flex-direction: column; height: 100%; overflow-y: auto; } .zstk-section--container { flex-grow: 1; display: flex; flex-direction: column; height: 100%; overflow-y: auto; background-color: var(--layoutsection-bgcolor); } /*Layout cont CSS ends here*/ /*Button CSS starts here*/ .zstk-button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; padding: 0.7rem 1.5rem; border: 0.1rem solid; border-radius: 0.5rem; background-color: var(--color-white); color: var(--color-black); font-size: 1.4rem; font-family: var(--font-regular); outline: none; box-shadow: none; user-select: none; cursor: pointer; transition: all 0.25s ease; } .zstk-button[disabled], .zstk-button.disabled,a.disabled,.disabled{ opacity: 0.5; pointer-events: none; cursor: auto; } .zstk-button > i > svg { transition: fill 0.25s ease; } .zstk-button--link { height: auto; padding: 0; background-color: transparent; color: var(--color-grey); border: none; } .zstk-button--link.zstk-button--linkprimaryblue, .zstk-button--link.zstk-button--linkprimaryblue:hover { color: var(--primary-color); } .zstk-button--link.zstk-button--linkprimaryblue > i > svg { fill: var(--primary-color); } .zstk-button--link:hover { color: var(--color-black); } .zstk-button--large { height: 4rem; } .zstk-button.zstk-button--small { padding: 0 1.2rem; height: 2.8rem; } .zstk-button--primary { border-color: var(--primary-color); background-color: var(--primary-color); color: var(--color-white); } .zstk-button--primary i svg { fill: var(--color-white); } .zstk-button--primary:hover { background-color: var(--primary-btn-hovercolor); border-color: var(--primary-btn-hovercolor); } .zstk-button--stroke.zstk-button--primary { background-color: var(--color-white); color: var(--primary-color); } .zstk-button--stroke.zstk-button--primary:hover { background-color: var(--primary-color); color: var(--color-white); border-color: var(--primary-color); } .zstk-button--stroke.zstk-button--primary i svg, .zstk-button--secondary i svg { fill: var(--primary-color); } .zstk-button--stroke.zstk-button--primary:hover i svg, .zstk-button--secondary:hover i svg { fill: var(--color-white); } .zstk-button--colorred { border-color: var(--color-red); background-color: var(--color-red); color: var(--color-white); } .zstk-button--colorred i svg { fill: var(--color-white); } .zstk-button--colorred:hover { border-color: var(--red-btn-hovercolor); background-color: var(--red-btn-hovercolor); } .zstk-button--secondary { border-color: var(--secondary-btn-color); background-color: var(--secondary-btn-color); color: var(--primary-color); } .zstk-button--secondary:hover { border-color: var(--primary-color); background-color: var(--primary-color); color: var(--color-white); } .zstk-button--grey { border-color: var(--color-bluegrey); background-color: var(--color-bluegrey); color: var(--color-black); } .zstk-button--grey:hover { background-color: var(--greybtn-hover); border-color: var(--greybtn-hover); } .zstk-button--grey i svg { fill: var(--color-black); } .zstk-button--stroke.zstk-button--grey { background-color: var(--color-white); color: var(--color-black); } .zstk-button--stroke.zstk-button--grey:hover { background-color: var(--color-bluegrey); color: var(--color-black); } .zstk-button--white { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-black); } .zstk-button--white i svg { fill: var(--color-black); } .zstk-button--hovericonshow i { position: absolute; top: 0.3rem; right: -2rem; opacity: 0; visibility: hidden; transition: all 0.25s ease; } .zstk-button--hovericonshow:hover i { opacity: 1; visibility: visible; } .zstk-button--rightarrowanim:hover i { animation: rightShake 1s 0s infinite both linear; } @keyframes rightShake { from, to { -webkit-transform: translateX(-0.2rem); -moz-transform: translateX(-0.2rem); -o-transform: translateX(-0.2rem); transform: translateX(-0.2rem); } 50% { -webkit-transform: translateX(0.3rem); transform: -moz-translateX(0.3rem); -o-transform: translateX(0.3rem); transform: translateX(0.3rem); } } .zstk-button--attachment { position: relative; overflow: hidden; } .zstk-attachinput { position: absolute; inset: -0.1rem -0.1rem -0.1rem -0.1rem; cursor: pointer; opacity: 0; } .zstk-button .zstk-attachinput { position: fixed; left: 0; top: 0; z-index: -9; width: 1px; height: 1px;} /*Button CSS ends here*/ /*Group button CSS starts here*/ .zstk-groupbtn--cont { display: inline-flex; align-items: center; /*padding: 0.5rem 0;*/ border-radius: 0.5rem; background-color: var(--color-white); } .zstk-groupbtn--listcont { padding: 0.5rem; position: relative; } .zstk-groupbtn--list { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 1.4rem; color: var(--color-black); border-radius: 0.5rem; position: relative; transition: background-color 0.25s;max-width: 20rem; } .zstk-groupbtn--list:hover { background-color: var(--panel-bgcolor); } .zstk-groupbtn--list.zstk-groupbtn--list-nohover:hover { background-color: transparent; cursor: auto; } .zstk-groupbtn--list.is-selected { background-color: var(--layoutsection-bgcolor); } .zstk-groupbtn--listcont::after { content: ""; position: absolute; right: 0; width: 0.1rem; height: calc(100% - 1rem); background-color: var(--border-grey); } .zstk-groupbtn--listcont:last-child::after, .zstk-groupbtn--listcont.no-divider::after { content: none; } .zstk-groupbtn--list.is-disabled { opacity: 0.4; pointer-events: none; cursor: auto; } /*Group button CSS ends here*/ /*Input, textarea css starts here*/ .zstk-input--cont { display: flex; align-items: center; width: 100%; border: 0.1rem solid var(--border-grey); border-radius: 0.5rem; overflow: hidden; position: relative; transition: box-shadow 0.25s ease-out;} .zstk-input--cont.zstk-focus { box-shadow: 0 0 1rem 0.1rem rgb(209 227 255 / 50%); } .zstk-input { width: 100%; padding: 0.825rem 1.2rem; font-size: 1.4rem; font-family: var(--font-regular); color: var(--color-black); border: none; outline: none; box-shadow: none; } .zstk-input::-moz-placeholder, .zstk-textarea::-moz-placeholder { color: var(--placeholder-color); } .zstk-input::placeholder, .zstk-textarea::placeholder { color: var(--placeholder-color); } .zstk-input--lhsicon .zstk-input { padding: 0.9rem 1.2rem 0.9rem 2.5rem; } .zstk-input--rhsicon .zstk-input { padding: 0.9rem 2.5rem 0.9rem 1.2rem; } .zstk-input--rhsicon > i { position: absolute; right: 1rem; top: 1rem; color: var(--color-bluegrey); cursor: help; } .zstk-input--lhsicon > i { position: absolute; left: 1rem; } .zstk-textarea--cont { display: flex; align-items: flex-end; position: relative; } .zstk-textarea { flex-grow: 1; width: 100%; padding: 0.9rem 1.2rem; font-size: 1.4rem; font-family: var(--font-medium); color: var(--color-black); margin-bottom: 0rem; border: none; resize: none; box-shadow: none; outline: none; overflow-y: auto; transition: box-shadow 0.25s ease-out; } .zstk-textarea--footer { padding: 1rem; display: flex; align-items: center; justify-content: flex-end; } .zstk-textarea--footer-opt { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; color: var(--color-grey); margin-right: 0.5rem; border-radius: 50%; transition: all 0.35s cubic-bezier(0.42, 0.92, 0.49, 1.04) 0s; } .zstk-textarea--footer-opt:last-child { margin-right: 0; } .zstk-textarea--footer-opt:hover, .zstk-textarea--footer-opt.zstk-selected { background-color: var(--border-grey); } .zstk-textarea--footer-opt:hover .zstk-icon, .zstk-textarea--footer-opt.zstk-selected .zstk-icon { fill: var(--color-black); } .zstk-textcount--cont { position: absolute; left: 90%; flex-shrink: 0; display: inline-flex; font-size: 1.1rem; color: var(--color-grey); margin-left: 1rem; } .zstk-togglebtn--input { display: none; } .zstk-togglebtn { display: inline-block; width: 2.5rem; height: 1.5rem; background-color: #d2d2d2; border-radius: 5rem; cursor: pointer; position: relative; transition: background-color 0.4s; } .zstk-togglebtn::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; display: inline-block; width: 1.2rem; height: 1.2rem; background-color: var(--color-white); border-radius: 50%; transition: margin-left 0.4s; } .zstk-togglebtn--input:checked + .zstk-togglebtn { background-color: var(--primary-color); } .zstk-togglebtn--input:checked + .zstk-togglebtn::after { margin-left: 1rem; } .zstk-toggle--switchbtncont { width: 7.8rem; height: 3.5rem; border: 0.1rem solid var(--border-grey); border-radius: 0.5rem; color: var(--color-black); overflow: hidden; cursor: pointer; position: relative; } .zstk-toggle--switchinput { position: absolute; top: 0; left: 0; opacity: 0; } .zstk-toggle--switchlabel { display: block; height: 100%; font-size: 1.4rem; text-transform: uppercase; background-color: var(--color-white); position: relative; } .zstk-toggle--switchlabel::after, .zstk-toggle--switchlabel::before { position: absolute; top: 50%; transform: translateY(-50%); } .zstk-toggle--switchlabel::after { content: attr(data-pm); right: 1rem; } .zstk-toggle--switchlabel::before { content: attr(data-am); left: 1rem; } .zstk-toggle--switchhandle { position: absolute; top: 0; left: 0; height: 3.3rem; width: 3.6rem; background-color: var(--border-grey); border: 0.1rem solid var(--border-grey); border-radius: 0.3rem 0.5rem 0.5rem 0.3rem; transition: all 0.35s cubic-bezier(0.31, 0.77, 0.35, 1.01); } .zstk-togglebtn--input:checked ~ .zstk-toggle--switchhandle { left: 4rem; border-radius: 0.5rem 0.3rem 0.3rem 0.5rem; } .zstk-toggle--switchhandle::before, .zstk-toggle--switchhandle::after { content: ""; position: absolute; top: 0.8rem; width: 0.1rem; height: 1.5rem; background-color: #9CA6B7; } .zstk-toggle--switchhandle::before { left: 1.25rem; } .zstk-toggle--switchhandle::after { left: 1.95rem; } .zstk-fileupdate { display: none; } .zstk-fileupdate + label { cursor: pointer; } .zstk-fileupdate + label::before { content: attr(data-text-name); } /*Input, textarea css endss here*/ /*Search box css starts here*/ .zstk-searchcont { display: flex; align-items: center; } .zstk-searchcont .zstk-input { padding: 0.825rem 3.5rem; } .zstk-searchbox-searchicon { position: absolute; left: 1rem; color: var(--color-grey); font-size: 1.2rem; } .zstk-searchbox-searchicon > svg { fill: var(--color-grey); } .zstk-searchbox-clearicon { position: absolute; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: var(--border-grey); color: var(--color-grey); cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.35s cubic-bezier(0.42, 0.92, 0.49, 1.04) 0s; } .zstk-input--isactive .zstk-searchbox-clearicon { opacity: 1; visibility: visible; } /*Search box css ends here*/ /*Header tab CSS starts here*/ .zstk-headertab--cont { display: flex; background-color: var(--innertab-header-bgcolor); height: 4.5rem; } .zstk-headertabs { display: inline-flex; align-items: flex-end; padding: 1.5rem 1.5rem 0; } .zstk-headertabs--list { display: inline-flex; align-items: center; padding: 0.8rem 1.25rem; margin-right: 0.1rem; background-color: var(--header-tab-color); border-radius: 0.7rem 0.7rem 0 0; color: var(--color-black); font-size: 1.3rem; line-height: 1.4rem; transition: background-color 0.25s ease; cursor: pointer; flex-shrink: 0;height: 3.6rem;} .zstk-headertabs--list.active { background-color: var(--layoutsection-bgcolor); } .zstk-headertabs--list.zstk-headertabs--list-icon > span { display: none; } .zstk-headertabs--list.zstk-headertabs--list-icon.active > span { display: inline-block; } .zstak-tabadd--btn { display: inline-flex; align-self: flex-end; align-items: center; justify-content: center; min-width: auto; width: 2rem; height: 2rem; padding: 0; margin-bottom: 0.6rem; border-radius: 50%; background-color: var(--layoutsection-bgcolor); } .zstk-headertabs--close,.zstk-headertabs-btn { display: inline-flex; align-items: center; justify-content: center;flex-shrink: 0 ;width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: transparent; margin-left: 0.5rem; transition: all 0.25s; } .zstk-headertabs--close:hover,.zstk-headertabs-btn:hover { background-color: var(--color-bluegrey); } .zstk-headertabs--list.active:hover .zstk-headertabs--close { opacity: 1; visibility: visible; } .active.zstk-headertabs--coloryellow { background-color: var(--tab-color-yellow) } .zstk-headertabs--coloryellow .zstk-headertabs--close:hover{background-color: var(--yellowtab-close-clr);} .zstk-headertabs-btn-hover{opacity: 0;visibility: hidden;} .zstk-headertabs--list:hover .zstk-headertabs-btn-hover{opacity: 1;visibility: visible;} .zstk-highlighttext { background-color: var(--color-bluegrey); outline: none; border: none; padding: 0.3rem 0.5rem; border-radius: 0.4rem; } .zstk-tabheaderlist-txt { flex-grow: 1; overflow: hidden; white-space: nowrap; } /*Header tab CSS ends here*/ /*Common template CSS starts here*/ .zstk-header--seperator { display: flex; align-items: center; justify-content: center; margin: 1rem 0; position: relative; z-index: 2; } .zstk-header--seperator::after { content: ""; position: absolute; width: 100%; height: 0.1rem; background-color: var( --header-sepearator-border); z-index: -1; } .zstk-header--seperator-bordergrey::after { background-color: var(--border-grey); } /* .zstk-home--heading { font-size: 2.4rem; line-height: 4.8rem; font-family: var(--font-bold); text-align: center; } */ .zstk-header--seperator .zstk-home--heading { padding: 0 2rem; background-color: var(--layoutsection-bgcolor); z-index: 2; } .zstk-templatesect { display: flex; flex-direction: column; height: 100%; overflow-y: auto; } .zstk-templatesect.zstk-showcustomise--opt, .zstk-showcustomise--opt .zstk-templatesect--body { height: 100%; overflow-y: auto; } .zstk-templatesect--body { display: flex; flex-direction: column; padding: 1.5rem; } .zstk-templatesect--body.zstk-showcustomise--opt { height: 100%; overflow-y: auto; } .zstk-gridcol-4-gap-20 { grid-gap: 2rem;/* grid-template-columns: repeat(auto-fill, minmax(calc((100% / 4) - 2rem), 1fr));*/grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .zstk-gridcard--list { display: flex; flex-direction: column; padding: 1rem; background-color: var(--color-white); border-radius: 0.5rem; /*cursor: pointer;*/ } .zstk-boxlabel { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border: 0.1rem solid transparent; border-radius: 0.5rem; font-size: 1.4rem; color: var(--color-black); } .zstk-lightcider--label { color: var(--light-cider); border-color: var(--light-cider-border); background-color: var(--light-cider-bgcolor); } .zstk-boxlabel--posbottom { position: absolute; bottom: -1rem; } .zstk-boxlabel--uppercase { text-transform: uppercase; font-size: 1rem; } .zstk-linktext { display: inline-flex; align-items: center; font-size: 1.4rem; color: var(--color-black); } .zstk-linktext:hover > span { text-decoration: underline; } .zstk-button--pos { position: absolute; z-index: 5; } .zstk-pos--top_10 { top: 1rem; } .zstk-button--pos-right, .zstk-pos--right_10 { right: 1rem; } .zstk-bgshadow--pos-right { right: 1rem; } .zstk-bgshadow--pos::after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-image: linear-gradient(to right, transparent, var(--color-white) 70%); z-index: 2; } .zstk-numbercount--cont { display: flex; align-items: center; padding: 0.7rem 1.5rem 0.7rem 1rem; border: 0.1rem solid var(--border-grey); border-radius: 0.5rem; position: relative; } .zstk-numbercount { display: inline-flex; align-items: center; font-size: 1.4rem; min-width: 4.3rem; } .zstk-numbercount > span { outline: none; border: none; box-shadow: none; } .zstk-numbercount--iconcont { position: absolute; top: 0.1rem; right: 0.5rem; display: inline-flex; flex-direction: column; height: calc(100% - 0.2rem); border-radius: 0.3rem; overflow: hidden; } .zstk-numbercount--icon { display: inline-flex; height: 50%; padding: 0.2rem; cursor: pointer; } .zstk-numbercount--icon:hover { background-color: var(--layoutsection-bgcolor); } .zstk-groupbtn--list .zstk-numbercount { min-width: auto; } .zstk-groupbtn--listcont .zstk-numbercount--iconcont { position: initial; height: 1.5rem; margin-left: 1rem; } .zstk-groupbtn--listcont .zstk-numbercount--icon { padding: 0 0.2rem; } .zstk-numbercount--disabled { pointer-events: none; opacity: 0.5; } .zstk-colorpicker--cont { display: flex; align-items: center; border: 0.1rem solid var(--border-grey); border-radius: 0.5rem; color: var(--color-black); padding: 0.7rem 2rem 0.7rem 0.8rem; cursor: pointer; } .zstk-clrpallete--clrbox { flex-shrink: 0; display: inline-flex; width: 1.4rem; height: 1.4rem; border: 0.1rem solid var(--border-grey); border-radius: 0.3rem; margin-right: 1rem; } .zstk-zoomcontrol--wrapper { display: flex; align-items: center; padding: 0.5rem; background-color: var(--color-white); border-radius: 0.5rem; } .zstk-zc--button { display: inline-flex; align-items: center; padding: 0.7rem 1rem; border-radius: 0.5rem; transition: background-color 0.25s; } .zstk-zc--button:hover, .zstk-zc--val:hover, .zstk-zc--val.is-selected { background-color: var(--layoutsection-bgcolor); } .zstk-zc--val { padding: 0.5rem 1.2rem; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.25s; } .zstk-rhs-cont{width: calc(100% - 32.5rem);} /*Common template CSS ends here*/ /*Newtwork image css starts here*/ .zstk-networkimg { width: 1.75rem; height: 1.75rem; flex-shrink: 0; margin-right: 1rem; background-size:contain; background-repeat: no-repeat; background-position: center;} .zstk-fb { background-image: url(https://static.zohocdn.com/socialtoolkit/images/facebook.3074aca4689e4f64bc21.png); } .zstk-x { background-image: url(https://static.zohocdn.com/socialtoolkit/images/x-black.4103adc98dcf9980adfe.png); } .zstk-x-white { background-image: url(https://static.zohocdn.com/socialtoolkit/images/x-white.7c1a247fe1cd02c73ebf.png); } .zstk-lin { background-image: url(https://static.zohocdn.com/socialtoolkit/images/linkedin.2260915926dbd310996a.png); } .zstk-ig { background-image: url(https://static.zohocdn.com/socialtoolkit/images/instagram.332ececb9613c4789d6b.png); } .zstk-igthread { background-image: url(https://static.zohocdn.com/socialtoolkit/images/thread-black.08aa771ca675f62e4caa.png); } .zstk-pin { background-image: url(https://static.zohocdn.com/socialtoolkit/images/pinterest.c468178143ee2ad9d99b.png); } .zstk-tiktok { background-image: url(https://static.zohocdn.com/socialtoolkit/images/tiktok.3041f6ba0374a6ac4b93.png); } .zstk-mastodon { background-image: url(https://static.zohocdn.com/socialtoolkit/images/mastodon.1b3282821b282a3dc752.png); } .zstk-ytube { background-image: url(https://static.zohocdn.com/socialtoolkit/images/youtube.9f3aaf97a03ac4d985e4.png); } .zstk-wapp { background-image: url(https://static.zohocdn.com/socialtoolkit/images/whatsapp.e6bd0cef0cda0d6bfb25.png); } .zstk-dribble { background-image: url(https://static.zohocdn.com/socialtoolkit/images/dribble.e7aaae48b1ec1411a2c5.png); } .zstk-discord { background-image: url(https://static.zohocdn.com/socialtoolkit/images/discord.a2cd5825e4e6f6808f48.png); } .zstk-snap { background-image: url(https://static.zohocdn.com/socialtoolkit/images/snapchat.1ceb1d50faa2f02b6eb9.png); } .zstk-igthread { background-image: url(https://static.zohocdn.com/socialtoolkit/images/thread-black.08aa771ca675f62e4caa.png); } .zstk-igthread-white { background-image: url(https://static.zohocdn.com/socialtoolkit/images/thread-white.262109703fb142dfd66a.png); } .zstk-bluesky { background-image: url(https://static.zohocdn.com/socialtoolkit/images/bluesky.faf789ffeee638febde8.png); } .zstk-gmb { background-image: url(https://static.zohocdn.com/socialtoolkit/images/gmb.8dd077af602fedb5447d.png); } .zstk-channel--list { display: inline-flex; padding: 1rem 0.7rem; margin: 0 1rem; cursor: pointer; position: relative; } .zstk-channel--list::after { content: ""; position: absolute; bottom: -0.1rem; left: 0; width: 4.9rem; height: 0.2rem; background-color: var(--color-grey); transform: scale3d(0.8, 1, 0); transform-origin: center; opacity: 0; visibility: hidden; z-index: -1; transition: all 0.2s; } .zstk-channel--list:hover::after { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; z-index: 1; } .zstk-channelsec { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0.2rem solid transparent; } .is-selected .zstk-channelsec { border-color: var(--color-redorange); } .zstk-channelselect--highlighter { position: absolute; bottom: -0.1rem; left: 1rem; width: 4.9rem; height: 0.2rem; background-color: var(--color-redorange); z-index: 2; transition: left 0.2s; } .zstk-attchment--delete { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.4rem; background-color: var(--color-white); } /*Newtwork image css ends here*/ .zstk-section--title { font-size: 1.8rem; line-height: 2.2rem; font-family: var(--font-bold); color: var(--color-black); text-align: center; } .zstk-subtitle { font-size: 1.2rem; line-height: 1.5rem; text-transform: uppercase; color: var(--color-grey); background-color: var(--color-white); } .zstk-optimise--panellist { display: inline-flex; align-items: center; flex-direction: column; } .zstk-optimise--panel-obj { display: inline-flex; align-items: center; justify-content: center; width: 8rem; height: 8rem; border: 0.1rem solid var(--panel-bgcolor); border-radius: 0.8rem; background-color: var(--panel-bgcolor); transform: translateY(0px); transition: all 0.25s ease; position: relative; overflow: hidden; } .zstk-optimise--panellist:hover .zstk-optimise--panel-obj, .zstk-switchbtn:hover { border-color: var(--panel-hover-bgcolor); background-color: var(--panel-hover-bgcolor); } .zstk-optimise--panellist.is-selected .zstk-optimise--panel-obj, .zstk-switchbtn.is-selected { border-color: var(--primary-color); background-color: var(--panel-selected-bgcolor); color: var(--primary-color); } .zstk-optimise--panel-obj > i svg { fill: var(--panel-icon-color); transition: all 0.25s ease; } .is-selected .zstk-optimise--panel-obj > i svg { fill: var(--primary-color); } .zstk-optimise--panel-name { margin-top: 1.8rem; color: var(--color-grey); font-size: 1.4rem; transition: color 0.25s ease; } .zstk-optimise--panellist:hover .zstk-optimise--panel-name, .is-selected .zstk-optimise--panel-name { color: var(--primary-color); } .zstk-switchbtn { display: flex; align-items: center; padding: 0.8rem 1rem; margin-right: 1.5rem; border: 0.1rem solid var(--border-grey); background-color: var(--color-white); color: var(--color-black); border-radius: 0.5rem; text-align: center; transform: translateY(0px); transition: all 0.25s ease; } .zstk-switchbtn:last-child { margin-right: 0; } .zstk-switchbtn > i { flex-shrink: 0; } .zstk-optimise--panellist .zstk-boxlabel{top: -3rem; bottom: auto;position: absolute; z-index: 9;padding:0.5rem} /*Image attachment css starts here*/ .zstk-img--200px { max-width: 20rem; /*max-height: 20rem;*/ width: 20rem;/* height: 20rem;*/ } /*Image attachment css ends here*/ .zstk-gridline { position: absolute; display: inline-block; background-color: var(--color-white); } .zstk-gridline--vertical { width: 0.1rem; height: 100%; } .zstk-gridline--horizontal { width: 100%; height: 0.1rem; } .zstk-grid-3x3-v1 { left: 30%; } .zstk-grid-3x3-v2 { right: 30%; } .zstk-grid-3x3-h1 { top: 30%; } .zstk-grid-3x3-h2 { bottom: 30%; } /*Center Popup CSS starts here*/ .zstk-centerpopup--bglayer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .4); overflow: hidden; -webkit-animation: PopupBgFadeIn 0.4s both alternate; -moz-animation: PopupBgFadeIn 0.4s both alternate; -o-animation: PopupBgFadeIn 0.4s both alternate; animation: PopupBgFadeIn 0.4s both alternate; z-index: 998; } @keyframes PopupBgFadeIn { 0% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } } .zstk-centerpopup--hidebg { -webkit-animation: PopupBgFadeOut 0.4s both alternate; -moz-animation: PopupBgFadeOut 0.4s both alternate; -o-animation: PopupBgFadeOut 0.4s both alternate; animation: PopupBgFadeOut 0.4s both alternate; } @keyframes PopupBgFadeOut { 0% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } } .zstk-centerpopup--cont { display: flex;flex-direction: column ;background-color: var(--color-white); border-radius: 1rem; overflow: hidden; -webkit-animation: popupOpenScale 0.4s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); -moz-animation: popupOpenScale 0.4s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); -o-animation: popupOpenScale 0.4s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); animation: popupOpenScale 0.4s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); } @keyframes popupOpenScale { 0% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); transform-origin: center; opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .zstk-centerpopup--remove .zstk-centerpopup--cont { -webkit-animation: popupCloseScale 0.3s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); -moz-animation: popupCloseScale 0.3s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); -o-animation: popupCloseScale 0.3s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); animation: popupCloseScale 0.3s both alternate cubic-bezier(0.24, 0.78, 0.43, 0.98); } @keyframes popupCloseScale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); transform-origin: center; opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } } .zstk-centerpopup--cont_header { display: flex; align-items: center; padding: 1.5rem 2rem; } .zstk-centerpopup--cont_header-heading { font-size: 1.8rem; font-family: var(--font-bold); } .zstk-popupclose--icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background-color: var(--color-bluegrey); } .zstk-centerpopup--cont_body { display: flex; flex-direction: column; padding: 1.5rem 2rem;line-height: 1.9rem; max-height: 400px; overflow-y: auto;} .zstk-greyheader { font-size: 1.4rem; color: var(--color-grey); margin-bottom: 1rem; } .zstk-centerpopup--cont_footer { display: flex; align-items: center; padding: 1.5rem; } .zstk-centerpopup--headfootnoborder .zstk-centerpopup--cont_header, .zstk-centerpopup--headfootnoborder .zstk-centerpopup--cont_footer { border: none; } /*Center Popup CSS ends here*/ /*dropdown css starts here*/ .zstk-dropdown--btn { display: flex; align-items: center; padding: 0.9rem 1rem; font-size: 1.4rem; border: 0.1rem solid var( --border-grey); border-radius: 0.5rem; color: var(--color-black); cursor: pointer; } .zstk-dropdown--btn.zstk-dropdown--dropicon { padding: 0.95rem 2.75rem 0.95rem 1rem; position: relative; } .zstk-dropdown--dropicon .zstk-dropicon { position: absolute; top: 1rem; right: 0.5rem; font-size: 1.2rem; transform: rotate(0deg); transform-origin: center; transition: transform 0.35s cubic-bezier(0.31, 0.77, 0.35, 1.01); } .zstk-dropdown--dropicon.is-selected .zstk-dropicon { transform: rotate(180deg); } .zstk-dropdown--btn.zstk-dropdown--btn_bg { background-color: var(--panel-bgcolor) } .zstk-dropdown--btn.zstk-dropdown--btn_small { padding: 0.6rem 1rem; line-height: 1.8rem; } .zstk-dropdown--btn.zstk-dropdown--btn_small.zstk-dropdown--dropicon { padding: 0.6rem 2.75rem 0.6rem 1rem; } .zstk-dropdown--btn-value { flex-grow: 1; padding-left: 0.7rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } [data-drop-btn] > * { pointer-events: none; cursor: pointer; } .zstk-dropdown--main { display: none; position: fixed; background-color: var(--color-white); border-radius: 0.5rem; box-shadow: 0rem 0rem 1.7rem rgba(136, 142, 151, 0.30); z-index: 999; animation: transTop 0.35s 1 forwards cubic-bezier(0, 1.45, 0.2, 1.5) 0s; } @keyframes transTop { from { opacity: 0; visibility: hidden; transform: translateY(0); } to { opacity: 1; visibility: visible; transform: translateY(1rem); } } .zstk-dropdown--showbottom { animation: transBottom 0.35s 1 forwards cubic-bezier(0, 1.45, 0.2, 1.5) 0s; } @keyframes transBottom { from { opacity: 0; visibility: hidden; transform: translateY(0); } to { opacity: 1; visibility: visible; transform: translateY(-1rem); } } .zstk-dropdown--header { display: flex; padding: 1.5rem; } .zstk-dropdown--header-greyheading { color: var(--color-grey); } .zstk-dropdown--header-uppercase { text-transform: uppercase; font-size: 1.2rem; } .zstk-dropdown--body { display: flex; flex-direction: column; padding: 0.5rem; max-height: 30.5rem; overflow-y: auto; } .zstk-dropdown--list { flex-grow: 1; flex-shrink: 0; display: flex; align-items: center; padding: 1rem; font-size: 1.4rem; color: var(--color-black); border-radius: 0.5rem; white-space: nowrap; transition: all 0.25s ease; cursor: pointer;background-color: transparent;transition: all 0.3s; } .zstk-dropdown--list:hover { background-color: var(--panel-bgcolor); } .zstk-dropdown--list > .zstk-icon.zstk-icon--tick { flex-shrink: 0;padding-left:1.5rem } .zstk-dropdown--list > span { flex-grow: 1; font-family: var(--font-regular); } .zstk-action--droplist { padding-right: 3rem; } /*dropdown css ends here*/ .zstk-dropdown--body.zstk-dropdown--list-col2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(100% / 2), 1fr)); } .zstk-dropdown--body.zstk-dropdown--list-col3 { display: grid; grid-template-columns: 7rem 7rem 7rem; grid-template-rows: 9.2rem 9.2rem 9.2rem; grid-gap: 0.5rem; } .zstk-imgfilter--list { padding: 0; flex-direction: column; } .zstk-filterimgcont { padding: 0.5rem; margin-bottom: 0.5rem; border-radius: 0.5rem; transition: background-color 0.25s; } .zstk-imgfilter--list:hover .zstk-filterimgcont, .zstk-imgfilter--list.is-selected .zstk-filterimgcont { background-color: var(--layoutsection-bgcolor); } .zstk-filterimgcont img { width: 6rem; height: 6rem; border-radius: 0.5rem; } .zstk-imgfilter--list > span { font-size: 1.2rem; } .zstk-dropdown--list.zstk-imgfilter--list:hover { background-color: transparent; } /*Rotate progress css starts here*/ .zstk-circularrange--cont { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 1rem); padding: 0 1rem 1rem; margin: 0 0.5rem 1rem; border-bottom: 0.1rem solid var(--border-grey); } .zstk-pregressbar--val { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 2rem; font-size: 1.2rem; background-color: var(--layoutsection-bgcolor); color: var(--color-black); border-radius: 0.5rem; } .zstk-dropdown--list.zstk-adjustdrop--list:hover { background-color: transparent; cursor: auto; } .zstk-circularrange--input { -webkit-appearance: none; width: 9rem; height: 9rem; border-radius: 50%; outline: none; cursor: pointer; } .zstk-rangeinput { -webkit-appearance: none; width: 100%; height: 0.3rem; margin: 0; outline: none; border-radius: 0.5rem; cursor: pointer; } .zstk-rangeinput::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--color-white); border-radius: 50%; background-color: var(--color-bluegrey); box-shadow: 0 0 0.4rem rgba(105, 118, 137, 0.30); cursor: grab; box-sizing: border-box; } .zstk-rangeinput::-moz-range-thumb { width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--color-white); border-radius: 50%; background-color: var(--color-bluegrey); box-shadow: 0 0 0.4rem rgba(105, 118, 137, 0.30); cursor: grab; box-sizing: border-box; } .zstk-rangeinput::-webkit-slider-runnable-track { -webkit-appearance: none; appearance: none; background: transparent; } .zstk-circularrange { flex-shrink: 0; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(closest-side, var(--color-white) 96%, transparent 97% 100%), conic-gradient(var(--primary-color) 0deg, #d3d5df 0); position: relative; cursor: pointer; transform: rotate(90deg); } .zstk-circularrange--dot { position: absolute; left: 50%; width: 0.2rem; height: 50%; background-color: var(--border-grey); transform-origin: center bottom; } .zstk-circularrange--dot::after { content: ""; position: absolute; top: -0.6rem; left: -0.5rem; display: inline-flex; width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--color-white); border-radius: 50%; background-color: var(--color-bluegrey); box-shadow: 0 0 0.4rem rgba(105, 118, 137, 0.30); cursor: grab; } /*Rotate progress css ends here*/ /*Text editor more dropdown css starts here*/ .zstk-headermore--dropdown { display: none; position: fixed; z-index: 999; animation: transTop 0.35s 1 forwards cubic-bezier(0, 1.45, 0.2, 1.5) 0s; } .zstk-headermore--dropdown.zstk-dropdown--showbottom { animation: transBottom 0.35s 1 forwards cubic-bezier(0, 1.45, 0.2, 1.5) 0s } /*Text editor more dropdown css endss here*/ /*Alert popup css starts here*/ .zstk-alertpopup {position: fixed;font-size: 1.4rem;font-family: var(--font-medium);padding: 1.5rem;background-color: var(--color-white);animation: showalert 0.25s 1 forwards ease 0s;border-radius: 0.5rem;opacity: 0;visibility: hidden;box-shadow: 0rem 0rem 1rem 0.1rem rgb(0 0 0 / 20%);z-index: 9999;} .zstk-alertpopup--topcenter { top: 2rem; left: 50%; transform: translateX(-50%) translateY(0px); } .zstk-alertpopup--bottomright { bottom: 2rem; right: 2rem; animation: popDown 0.35s forwards cubic-bezier(0, 1.45, 0.2, 1.5); } .zstk-alertpopup--bottomright.zstk-alertpopup--hide { animation: popDownHide 0.35s forwards cubic-bezier(0.55, -0.38, 0, -0.32); } .zstk-alertpopup.zstk-alertpopup--minimise { padding: 0; box-shadow: none; bottom: 0; animation: minimisePopup 0.35s 1 forwards ease; height: 0.5rem; border-radius: 0; opacity: 1; visibility: visible; background-color: #CEDEFB; transition: all 0.25s ease; } .zstk-alertpopup.zstk-alertpopup--minimise > * { display: none; } .zstk-alertpopup--success > div {color: var(--success-color);border-color:var(--success-color);background-color: var(--success-bgcolor);border-left-width: 0.4rem;border-radius: 0.58rem 0.5rem 0.5rem 0.58rem;padding: 1.2rem 2rem;font-size: 1.4rem;line-height: 2rem;border-radius: 0.5rem;} .zstk-alertpopup--success i > svg { fill: var(--success-color); } .zstk-alertpopup--fail > div { color: var(--fail-color); border-color: var(--fail-color);background-color: var(--fail-bgcolor); } .zstk-alertpopup--fail i > svg { fill: var(--fail-color); } .zstk-alertpopup--toast.zstk-alertpopup--hide > div { animation: hidealert 0.25s 1 forwards ease; } /*toast menu*/ .zstk-alertpopup.zstk-alertpopup--toast { background-color: transparent; padding: 0; opacity: unset; visibility: unset; box-shadow: none; } .zstk-alertpopup.zstk-alertpopup--toast > div {border: 1px solid;border-left-width: 0.4rem;border-radius: 0.58rem 0.5rem 0.5rem 0.58rem;padding: 1.2rem 2rem;font-size: 1.4rem;line-height: 2rem;border-radius: 0.5rem;} @keyframes showalert { to { transform: translateX(-50%) translateY(1.5rem); z-index: 999; }} @keyframes popDown { from { opacity: 0; visibility: hidden; bottom: 0; } to { opacity: 1; visibility: visible; bottom: 2rem; } } @keyframes popDownHide { from { opacity: 1; visibility: visible; bottom: 2rem; } to { opacity: 0; visibility: hidden; bottom: 0; } } @keyframes minimisePopup { 0% { bottom: 2rem; } 100% { bottom: 0; } } @keyframes hidealert { 0% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0) perspective(0.1rem); opacity: 1; visibility: visible; } 100% { transform: scale3d(0.75, 0.75, 0.75) translate3d(0, 0, 0) perspective(0.1rem); opacity: 0; visibility: hidden; } } /*Alert popup css ends here*/ /*Downloading popup css starts here*/ .zstk-progressbar { display: inline-flex; width: 100%; height: 0.5rem; background-color: var(--border-grey); border-radius: 0.5rem; position: relative; overflow: hidden; } .zstk-progressbar--fill { position: absolute; height: 100%; left: 0; width: 23%; background-color: var(--primary-color); transition: width 0.25s linear; } /*Downloading popup css ends here*/ /*Recent work Items CSS starts here*/ .zstk-rwlist--cont { flex-grow: 1; /*display: grid; grid-template-columns: repeat(auto-fill, minmax(calc((100% / 8) - 1rem), 1fr));*/display: flex;overflow-x: auto; } .zstk-rwlist--cont > li { margin: 0 1rem; flex-direction: column; border-radius: 0.5rem; transition: background-color 0.25s ease; /*cursor: pointer;*/ } .zstk-rwlist--cont > li:first-child { margin-left: 0; } .zstk-rwlist--cont > li:hover { background-color: var(--panel-bgcolor); } .zstk-rwlist--cont > li:hover .zstk-fadeout { opacity: 1; visibility: visible; } .zstk-rwlistitem { display: flex; flex-direction: column; padding: 1rem; } .zstk-rwlistitem--img { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.5rem; background-color: var(--panel-bgcolor); overflow: hidden; position: relative; } .zstk-rwlistitem--img img { width: 9.5rem; height: 9.5rem; border-radius: 0.5rem; object-fit: cover; transition: transform 0.2s ease-in-out; } .zstk-rwgrid--layout { position: absolute; width: 9.5rem; height: 9.5rem;border: 1px solid var(--color-white);} .zstk-rwgrid--col, .zstk-rwgrid--row { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-evenly; } .zstk-rwgrid--row { flex-direction: column; } .zstk-rwgrid--col i { display: inline-flex; width: 0.1rem; height: 100%; background-color: var(--color-white); } .zstk-rwgrid--row i { display: inline-flex; width: 100%; height: 0.1rem; background-color: var(--color-white); } .zstk-igrrwlist { border-bottom: 0.1rem solid var(--border-grey);display: flex;align-items: center; } .zstk-igrrwlist:last-child { border-bottom: none; } .zstk-igrrwlist--item { display: flex; align-items: center; padding: 2.5rem 0; color: var(--primary-color);line-height: 1.9rem; word-break: break-word;width: 100%;} .zstk-rwgrid--layout-3x5{ width: 6rem; } .zstk-rwgrid--layout-3x4{ width: 7rem; } .zstk-rwgrid--layout-3x3 { width: 7rem; height: 7rem; } .zstk-rwgrid--layout-3x2 { width: 8rem; height: 5rem; } .zstk-rwgrid--layout-3x1 { width: 8rem; height: 3rem; } .zstk-gridhistory .zstk-rwgrid--layout-3x5 { width: 4rem; } .zstk-gridhistory .zstk-rwgrid--layout-3x4{ width: 4.5rem; } .zstk-gridhistory .zstk-rwgrid--layout-3x3{ width: 4.5rem; height:4.5rem !important; } .zstk-gridhistory .zstk-rwgrid--layout-3x2{ width: 4.5rem; height: 3.5rem !important; } .zstk-gridhistory .zstk-rwgrid--layout-3x1{ width: 5.5rem; height: 2rem !important; } /*Recent work Items CSS ends here*/ /*History table css starts here*/ .zstk-imgeditorhistory--body { padding: 0; height: 100%; } .zstk-history--tbllist { display: flex; padding: 1rem; background-color: var(--color-white); border-radius: 0.5rem; margin-bottom: 1.5rem; cursor: pointer; transition: box-shadow 0.25s ease-in; } .zstk-history--tbllist:last-child {margin-bottom: 0; } .zstk-history--tbllist:hover { box-shadow: 0 0.5rem 0.5rem 0.1rem rgb(0 0 0 / 5%); } .zstk-history--tbllist-col { padding: 0 1rem; display: flex; align-items: center; position: relative; } .zstk-history--tbllist-col:first-child { padding-left: 0; width: 30%; } .zstk-history--tbllist-col:nth-child(2) { width: 18%; } .zstk-history--tbllist-col:nth-child(3) { width: 12%; } .zstk-history--tbllist-col:nth-child(4) { width: 12%; } .zstk-history--tbllist-col:last-child { width: 28%; } .zstk-history--tbllist-col::after { content: ""; position: absolute; top: 50%; right: 0; height: 60%; width: 0.1rem; background-color: var(--border-grey); transform: translateY(-50%); } .zstk-history--tbllist-col:nth-child(n+4):after { content: none; } .zstk-history--tbllist-img { width: 7.5rem; height: 5rem; margin-right: 2.5rem; position: relative;flex-shrink: 0; } .zstk-history--tbllist-img img{object-fit: cover; border-radius: 0.5rem;width: 100%;height: 100%;} .zstk-history--actbtn { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; opacity: 0; visibility: hidden; transition: all 0.25s ease-in; } .zstk-history--tbllist:hover .zstk-history--actbtn, .zstk-history--actbtn.is-selected,.zstk-igrrwlist:hover .zstk-history--actbtn { opacity: 1; visibility: visible; } .zstk-history--actbtn:hover, .zstk-history--actbtn.is-selected { background-color: var(--layoutsection-bgcolor); } .zstk-history--actbtn:not(:last-child) { margin-right: 1.5rem; } .zstk-gridhistory .zstk-history--tbllist-img {position: relative;display:flex;align-items: center;justify-content: center;} .zstk-gridhistory .zstk-rwgrid--layout{height: 100%;} /*History table css ends here*/ /*Info block css starts here*/ .zstk-infoblock { display: flex; align-items: center; font-size: 1.4rem; padding: 1rem; border-radius: 0.5rem; background-color: var(--color-white); color: var(--color-black); } .zstk-infoblock.zstk-infoblock--bordergold { border: 1px solid var(--infoblack--bordergold); } .zstk-infoblock--gold { background-color: var(--infoblock--goldbg); } .zstk-infoblock--gold > i > svg { fill: var(--infoblock-goldcolor); } /*Info block css ends here*/ /*Portal access css starts here*/ .zstk-portallist { background-color: var(--color-white); padding: 1rem 1.5rem; margin-bottom: 2rem; border: 0.1rem solid var(--border-grey); border-radius: 0.5rem; cursor: pointer; } .zstk-portallist:last-child { margin-bottom: 0; } .zstk-portallist--mappingicon { align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: var(--layoutsection-bgcolor); } /*Portal access css ends here*/ /*Download Image preview css starts here*/ .zstk-download--imgprev { display: flex; width: 22rem; height: 22rem;/* border-radius: 0.5rem;*/ overflow: hidden; } .zstk-download--imgprev ul { transition: transform 0.25s; } .zstk-actnbtn--round { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--color-bluegrey); cursor: pointer; transition: box-shadow 0.25s ease; } .zstk-actnbtn--round:hover { box-shadow: 0 0 0.5rem 0.1rem rgb(0 0 0 / 15%); } .zstk-actnbtn--round.disabled { opacity: 0.7; pointer-events: none; cursor: auto; } .zstk-actnbtn--round:hover > i > svg { fill: var(--color-black); transition: fill 0.25s ease; } .zstk-imgslider { width: 22rem; height: 22rem;background-repeat: no-repeat; background-size: cover; position: relative;} /*Download Image preview css ends here*/ /*Feedback css starts here*/ .zstk-feedback--reaction { display: inline-flex; width: 100%; height: 9rem; margin-bottom: 1.5rem; } .zstk-imgattach--cont { display: flex; flex-flow: row wrap; margin-top: 1.4rem; } .zstk-imgattach--list { flex-shrink: 0; width: 6rem; height: 6rem; border-radius: 0.8rem; margin-right: 1rem; margin-bottom: 1rem; position: relative; transition: all 0.25s ease-out; } .zstk-imgattach--list img { width: 100%; height: 100%; border-radius: 0.8rem; object-fit: cover; } .zstk-imgclose-icon { position: absolute; top: 0.3rem; right: 0.3rem; display: inline-flex; justify-content: center; align-items: center; padding: 0.3rem; font-size: 0.6rem; border-radius: 50%; background-color: var(--color-black); color: var(--color-white); cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.35s cubic-bezier(0.49, 0.92, 0.48, 0.92) 0s; } .zstk-imgattach--list:hover .zstk-imgclose-icon { opacity: 1; visibility: visible; } /*Feedback css ends here*/ /*Bento Icon CSS starts here*/ :root { --zicon-stroke-color: #000; --zicon-stroke-active-color: #fff; --zicon-zindex-active: 999999; } .zohoapps { display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0; border: 0; background-color: transparent; } .zohoapps__candybox { position: relative; width: 1.6rem; height: 1.6rem; } .zohoapps__candybox__dots { width: 100%; height: 100%; position: absolute; } .zohoapps__candybox__dots > span { width: 0.4rem; height: 0.4rem; background-color: var(--zicon-stroke-color, #555); display: block; position: absolute; border-radius: 50%; transform-origin: center center; transform: scale(1); transition: 350ms 0.25s cubic-bezier(0.8, 0.5, 0.2, 1.4); opacity: 1; } .zohoapps__candybox__dots > span:nth-child(1) { left: 0; top: 0; } .zohoapps__candybox__dots > span:nth-child(2) { left: 0; right: 0; top: 0; margin: auto; } .zohoapps__candybox__dots > span:nth-child(3) { right: 0; top: 0; } .zohoapps__candybox__dots > span:nth-child(4) { left: 0; top:0.6rem; } .zohoapps__candybox__dots > span:nth-child(5) { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .zohoapps__candybox__dots > span:nth-child(6) { right: 0; top:0.6rem; } .zohoapps__candybox__dots > span:nth-child(7) { left: 0; bottom: 0px; } .zohoapps__candybox__dots > span:nth-child(8) { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .zohoapps__candybox__dots > span:nth-child(9) { right: 0; bottom: 0px; } .zohoapps__candybox__z-icon { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .zohoapps__candybox__z-icon__path1, .zohoapps__candybox__z-icon__path2 { fill: none; stroke: var(--zicon-stroke-color, #555); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; animation: zline0-r .5s .15s linear forwards; transition: opacity .5s .15s ease-in-out; opacity: 0; } .zohoapps__candybox__z-icon__path1 { stroke-dasharray: 600; } .zohoapps__candybox__z-icon__path2 { stroke-dasharray: 300; } .zohoapps:hover .zohoapps__candybox__dots > span, .zohoapps--active .zohoapps__candybox__dots > span { transform: scale(0); opacity: 0; } .zohoapps:hover .zohoapps__candybox__z-icon__path1, .zohoapps--active .zohoapps__candybox__z-icon__path1 { animation: zline0 .5s .15s linear forwards; transition: opacity .5s .15s ease-in-out; opacity: 1; } .zohoapps:hover .zohoapps__candybox__z-icon__path2, .zohoapps--active .zohoapps__candybox__z-icon__path2 { animation: zline1 .5s .15s linear forwards; transition: opacity .5s .15s ease-in-out; opacity: 1; } .zohoapps--active { z-index: var(--zicon-zindex-active, 999999); position: relative; } .zohoapps--active .zohoapps__candybox__z-icon__path1, .zohoapps--active .zohoapps__candybox__z-icon__path2 { stroke: var(--zicon-stroke-active-color, #fff); } @keyframes zline0 { from { stroke-dashoffset: -300; } to { stroke-dashoffset: 0; } } @keyframes zline0-r { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -300; } } @keyframes zline1 { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } } @keyframes zline1-r { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 300; } } /*Bento Icon CSS ends here*/ .zstk-topbar--container ul li:hover .zstk-topbar--rhs_link { background-color:#f5f5f5; } .zstk-topbar--container ul li{height:100%;width:4.8rem;display: flex;align-items: center;justify-content: center;} /* .zstk-networkimg.zstk-ytube { width: 2.2rem !important; margin-top: 0.4rem; } */ .zstk-opac-loader-spinner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgb(0 0 0 / 50%); } .zstk-tabmore-btn { display: flex; align-items: center; justify-content: center; outline: none; border: none; background-color: transparent; cursor: pointer; } .zstk-tabmore-btn-outer { margin-right: 0; } .zstk-dropdown--list:hover { background-color: var(--header-tab-color); } .zstk-logout-btn { display: flex; align-items: center; justify-content: center; width: 100%; font-size: 1.4rem; line-height: 2rem; color: var(--color-red); background-color: rgb(255, 229, 229); box-shadow: none; outline-color: transparent; cursor: pointer; padding: 0.8rem 1.2rem; border-radius: 0.8rem; border:none; } /*zoho apps css*/ /*Slider component css starts here*/ .zstk-slidercomponent { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99; } .zstk-slidercomponent--main { position: absolute; right: 0; width: 45rem; height: 100%; background-color: var(--color-white); box-shadow: 0 0 1rem 0 rgb(0 0 0 / 40%); z-index: 9; animation: sliderOpen 0.4s both alternate; } .zstk-sliderclose--icon { position: absolute; top: 1.7rem; left: -3.3rem; z-index: 10; width: 2.4rem; height: 2.4rem; background-color: var(--color-white); display: inline-flex; justify-content: center; align-items: center; border-radius: 0.5rem; box-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 40%);cursor: pointer;outline: none;border: none;} .zstk-slidercomponent::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); z-index: 1; animation: PopupBgFadeIn 0.4s both alternate; } .zstk-slidercomponent.zstk-slidercomponent--remove::before { animation: PopupBgFadeOut 0.4s both alternate; } .zstk-slidercomponent--remove .zstk-slidercomponent--main { animation: sliderClose 0.3s both alternate; } @keyframes sliderOpen { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes sliderClose { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .zstk-resource--section { display: flex; flex-direction: column; padding: 0 2rem; } .zstk-featureapp--header { position: -webkit-sticky; position: sticky; top: 0; padding: 2rem 0 1rem; font-size: 1.4rem; line-height: 2rem; color: var(--color-grey); text-transform: uppercase; background-color: var(--color-white); z-index: 2; } .zstk-featureapp--listcont { display: flex; flex-flow: row wrap; } .zstk-featureapp--list { width: calc(100% / 2); flex-shrink: 0; display: flex; margin-bottom: 1rem; } .zstk-featureapp--list a { flex-grow: 1; display: inline-flex; align-items: center; padding: 1rem; color: var(--color-black); font-size: 1.4rem; line-height: 2rem; border-radius: 0.5rem; cursor: pointer; transition: background-color 0.25s; } .zstk-featureapp--list a:hover { background-color: var(--layoutsection-bgcolor); } /*Slider component css ends here*/ /*Feature app icon starts here*/ .zstk-featureapp--icon { flex-shrink: 0; display: inline-flex; width: 1.8rem; height: 1.8rem; background-size: 100%; background-repeat: no-repeat; } .zstk-site24x7 { background-image: url(https://static.zohocdn.com/socialtoolkit/images/Zoho-Site24X7.0d80182fd0e68606cc74.png); } /*Feature app icon ends here*/ /*other apps link css starts here*/ .zs-otherapps-card {padding: 1.4rem;background: linear-gradient(36deg, #FFF 64.38%,var(--card-grad2-clr) 142.24%);border-radius:0.5rem;border: 1px solid var(--card-border-clr);box-shadow: 0 0 3.6rem 0 transparent;width: calc(50% - 1rem);cursor: pointer;transform:scale(1) translate3d( 0, 0, 0) perspective(1px);transition: all 0.3s;} .zs-otherapps-card:hover{box-shadow: 0 0 3.6rem 0 rgba(167, 176, 194, 0.30);transform:scale(1.04) translate3d( 0, 0, 0) perspective(1px)} .zs-otherapps-card--tk{--card-border-clr:#DFC588;;--card-grad2-clr:#FFE5A8} .zs-otherapps-card--lt{--card-border-clr:#C5B2D7;--card-grad2-clr:#EEDEFF} .zs-otherapps-card:first-child{margin-right: 2rem;} .zs-otherapps-card--zshare{--card-border-clr:#CEBABA;--card-grad2-clr:#FDD} .zs-otherapps-bg .bgcolor-grey-f5{transition: all 0.3s;} .zs-otherapps-bg .bgcolor-grey-f5:hover{background-color: #e8e8e8;} .zs-otherapps-bg{background-color: #F0F2F6;} .zs-newtab-icon{display: flex;margin-left: auto;width: 1.2rem;height: 1.2rem;opacity: 0;transition: all 0.5s;} .zs-otherapps-card:hover .zs-newtab-icon{opacity: 1;} .zs-newtab-icon:hover{--newtab-icon-clr:#000} /*other apps link css ends here*/ /*Product guide css starts here*/ .zstk-pdtguide-questionmark{ width: 3.2rem; height: 3.2rem; border-radius: 50%; background-color: #1E1E1E; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 2rem; right: 2rem;z-index: 9;transform: scale(1); transition: all 0.3s; } .zstk-pdtguide-questionmark:hover { transform: scale(1.08); } /*Product guide css ends here*/ .zstk-homecontainer { width: 75%; margin: 4rem auto 0; } .zstk-home--heading { font-size: 2.4rem; line-height: 4.8rem; font-family: var(--font-bold); text-align: center; } .zstk-formcreationcont { display: flex; padding: 0.4rem 0; } .zstk-formcreation--cardcont { flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc((100% / 3) - 4rem), 1fr)); grid-gap: 4rem; } .zstk-formcreation--cardlist { display: flex; flex-direction: column; align-items: center; border: 0.1rem solid transparent; border-radius: 1rem; background-color: var(--color-white); padding: 1.5rem; } .zstk-formcreation--icon { display: inline-flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 1rem; margin: 1rem 0; } .zstk-formcreation--title { font-size: 1.8rem; line-height: 2rem; color: var(--color-black); font-family: var(--font-bold); margin: 1rem 0 1.5rem; } .zstk-formcreation--desc { font-size: 1.4rem; line-height: 2rem; color: var(--color-black); text-align: center; margin-bottom: 3rem; } /*$Id : $ */ :root{ --ie-crop--border: #4B9EFF; --frame-grey: #8393AE; --tabheading-color: #8895A8; } .zstk-mtheader { position: -webkit-sticky; position: sticky; top: 0; padding-top: 30px; background-color: var(--layoutsection-bgcolor); z-index: 2; } .zstk-icon--framegrey { fill: var(--frame-grey); } .zstk-imgeditorsect--body { padding: 1.5rem; height: 100%; } .zstk-ietabnav--list { flex-shrink: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 6.4rem; height: 6.4rem; padding: 0 0.8rem; margin-bottom: 0.2rem; font-size: 1.2rem; line-height: 1.8rem; color: var(--color-black); position: relative; z-index: 2; } .zstk-ietabnav--list:hover { background-color: var(--layoutsection-bgcolor); } .zstk-ietabnav--list.is-selected::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--layoutsection-bgcolor); border-left: 0.2rem solid var(--primary-color); z-index: -1; } .zstk-tabheader { display: flex; align-items: center; padding: 0 1rem; border-bottom: 0.1rem solid var(--border-grey); } .zstk-tabheading { display: inline-flex; align-items: center; padding: 1.5rem 1rem; color: var(--tabheading-color); font-size: 1.4rem; font-family: var(--font-medium); position: relative; transition: all 0.25s; } .zstk-tabheading:hover, .zstk-tabheading.is-selected { color: var(--color-black); } .zstk-tabheading.is-selected::after { content: ""; position: absolute; bottom: 0; left: 1rem; display: inline-block; width: calc(100% - 2rem); height: 0.2rem; background-color: var(--primary-color); } .zstk-tabslider { display: flex; flex-direction: column; width: 100%; height: 100%; background-color: var(--color-white); box-sizing: border-box; overflow-y: auto; } .zstk-ieopt--col-1 { grid-gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); } .zstk-ieopt--col-2 { grid-gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(calc((100% / 2) - 1rem), 1fr)); } .zstk-ieopt--col-3 { grid-gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(calc((100% / 3) - 1.5rem), 1fr)); } .zstk-iecollage--opt.zstk-ieopt--col-3 { grid-gap: 0; grid-template-columns: repeat(auto-fill, minmax(calc(100% / 3), 1fr)); } .zstk-ieopt--list { display: flex; align-items: center; padding: 1.4rem 1.5rem; font-size: 1.4rem; line-height: 2rem; color: var(--color-black); border-radius: 0.5rem; cursor: pointer; transition: background-color 0.25s; } .zstk-ieimgopt--cont .zstk-ieopt--list { padding: 0; height: 8rem; justify-content: center; border-radius: 0.5rem; overflow: hidden; position: relative; } .zstk-optlist--removeicon { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.5rem; border-radius: 0.5rem; background-color: var(--color-black); opacity: 0; visibility: hidden; z-index: 1; transition: all 0.25s ease; } .zstk-ieimgopt--cont .zstk-ieopt--list:hover .zstk-optlist--removeicon { opacity: 1; visibility: visible; } .zstk-imghover--scale .zstk-ieopt--list > img { width: 100%; transform: scale3d(1, 1, 1); transition: transform 0.25s cubic-bezier(0.42, 0.92, 0.49, 1.04); } .zstk-imghover--scale .zstk-ieopt--list:hover > img { transform: scale3d(1.075, 1.075, 1.075) translate3d(0, 0, 0) perspective(1rem); } .zstk-iecollage--opt .zstk-ieopt--list { padding: 1rem; margin-bottom: 1.5rem; justify-content: center; } .zstk-ieopt--list:hover, .zstk-ieopt--list.is-selected { background-color: var(--panel-bgcolor); } .zstk-ieopt--font .zstk-ieopt--list { padding: 0; flex-direction: column; } .zstk-ieopt--ffcont { display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; max-height: 5rem; border: 0.1rem solid var(--border-grey); border-radius: 1rem; transform: translateY(0); transition: all 0.25s ease-out; } .zstk-font--text { font-size: 2rem; font-family: var(--font-regular); } .zstk-font--name { font-size: 1.2rem; line-height: 1.4rem; font-family: var(--font-medium); color: var(--color-grey); margin-top: 0.7rem; text-align: center; } .zstk-ieopt--font .zstk-font--name { font-family: var(--font-regular); } .zstk-ieopt--font .zstk-ieopt--list:hover, .zstk-ieopt--font .zstk-ieopt--list.is-selected { background-color: transparent; } .zstk-ieopt--font .zstk-ieopt--list.is-selected { border-color: var(--primary-color); color: var(--primary-color); } .zstk-ieopt--font .zstk-ieopt--list.is-selected .zstk-font--name { color: var(--primary-color); } .zstk-ieframe--opt .zstk-ieopt--list { padding: 1.2rem 1rem; } .zstk-clrpalette--clr { -webkit-appearance: none; display: inline-flex; width: 1.4rem; height: 1.4rem; padding: 0; border: 0.1rem solid var(--border-grey); border-radius: 0.3rem; position: relative; overflow: hidden; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; } .zstk-clrpalette--highlightclr::after { content: ""; width: 0.1rem; height: 140%; position: absolute; top: 0; left: -0.1rem; background-color: var(--highlight-line-color); transform: rotate(-45deg); transform-origin: top left; } .zstk-imgfit--cont { max-width: 50%; display: inline-flex; justify-content: center; position: relative; user-select: none; } .zstk-ieimg { width: 100%; height: 100%; object-fit: contain;} .zstk-layerover--imgcont { position: absolute; top: 50%; left: 50%; width: 40rem; height: 26rem; transform: translate(-50%, -50%); z-index: 2; } .zstk-layerover--cropimgcont { z-index: 3; } .zstk-ie--rotateicon { position: absolute; top: -4rem; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: var(--color-white); border: 0.2rem solid var(--ie-crop--border); border-radius: 50%; transform: translateX(-50%); cursor: all-scroll; } .zstk-ie--layoutfit { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0.2rem solid var(--ie-crop--border); z-index: 10; } .zstk-ie--layoutfit-corner, .zstk-ie--crop-corner { position: absolute; display: inline-flex; width: 1.2rem; height: 1.2rem; border: 0.2rem solid var(--ie-crop--border); border-radius: 5rem; background-color: var(--color-white); } .zstk-lftopleft { top: -0.5rem; left: -0.5rem; cursor: ns-resize; } .zstk-lftopright { top: -0.5rem; right: -0.5rem; } .zstk-lfbottomleft { bottom: -0.5rem; left: -0.5rem; } .zstk-lfbottomright { bottom: -0.5rem; right: -0.5rem; } .zstk-ie--layoutfit-center { position: absolute !important; background-color: var(--color-white); border: 0.2rem solid var(--ie-crop--border); border-radius: 5rem; } .zstk-lftopcenter, .zstk-lfbottomcenter { width: 2.5rem !important; height: 1rem !important; } .zstk-lfrightcenter, .zstk-lfleftcenter { width: 1rem !important; height: 2.5rem !important; } .zstk-lftopcenter { left: 50% !important; transform: translateX(-50%); top: -0.6rem !important; } .zstk-lfrightcenter { top: 50% !important; transform: translateY(-50%); right: -0.6rem !important; } .zstk-lfbottomcenter { left: 50% !important; transform: translateX(-50%); bottom: -0.6rem !important; } .zstk-lfleftcenter { top: 50% !important; transform: translateY(-50%); left: -0.6rem !important; } .zstk-ie--cropfit, .zstk-ie--crop-center, .zstk-ie--crop-corner { border-color: var(--dark-grey); } .zstk-ie--crop-center.zstk-lftopcenter { cursor: ns-resize; } .zstk-ie--crop-center.zstk-lfrightcenter { cursor: ew-resize; } .zstk-ie--crop-center.zstk-lfbottomcenter { cursor: ns-resize; } .zstk-ie--crop-center.zstk-lfleftcenter { cursor: ew-resize; } .zstk-ie--crop-corner.zstk-lftopleft, .zstk-ie--crop-corner.zstk-lfbottomright { cursor: nwse-resize; } .zstk-ie--crop-corner.zstk-lftopright, .zstk-ie--crop-corner.zstk-lfbottomleft { cursor: nesw-resize; } .zstk-ie--crop-corner { width: 1rem !important; height: 1rem !important; border-radius: 0; } .zstk-ie--crop-corner::before, .zstk-ie--crop-corner::after { content: ""; position: absolute; display: inline-block; border: 0.2rem solid var(--dark-grey); background-color: var(--color-white); z-index: 2; } .zstk-ie--crop-corner.zstk-lftopleft { top: -0.6rem; left: -0.6rem; border-right-width: 0; border-bottom-width: 0; } .zstk-ie--crop-corner.zstk-lftopleft::before { top: -0.2rem; left: 0.5rem; width: 1.5rem; height: 1rem; border-left: none; border-radius: 0 0.5rem 0.5rem 0; } .zstk-ie--crop-corner.zstk-lftopleft::after { top: 0.6rem; left: -0.2rem; width: 1rem; height: 1.5rem; border-top: none; border-radius: 0 0 0.5rem 0.5rem; } .zstk-ie--crop-corner.zstk-lftopright { top: -0.6rem; right: -0.6rem; border-bottom-width: 0; border-left-width: 0; } .zstk-ie--crop-corner.zstk-lftopright::before { top: -0.2rem; right: 0.6rem; width: 1.5rem; height: 1rem; border-right: none; border-radius: 0.5rem 0 0 0.5rem; } .zstk-ie--crop-corner.zstk-lftopright::after { top: 0.6rem; right: -0.2rem; width: 1rem; height: 1.5rem; border-top: none; border-radius: 0 0 0.5rem 0.5rem; } .zstk-ie--crop-corner.zstk-lfbottomright { bottom: -0.6rem; right: -0.6rem; border-top-width: 0; border-left-width: 0; } .zstk-ie--crop-corner.zstk-lfbottomright::before { bottom: 0.7rem; right: -0.2rem; width: 1rem; height: 1.5rem; border-bottom: none; border-radius: 0.5rem 0.5rem 0 0; } .zstk-ie--crop-corner.zstk-lfbottomright::after { bottom: -0.2rem; right: 0.6rem; width: 1.5rem; height: 1rem; border-right: none; border-radius: 0.5rem 0 0 0.5rem } .zstk-ie--crop-corner.zstk-lfbottomleft { bottom: -0.6rem; left: -0.6rem; border-right-width: 0; border-top-width: 0; } .zstk-ie--crop-corner.zstk-lfbottomleft::before { bottom: 0.7rem; left: -0.2rem; width: 1rem; height: 1.5rem; border-bottom: none; border-radius: 0.5rem 0.5rem 0 0; } .zstk-ie--crop-corner.zstk-lfbottomleft::after { bottom: -0.2rem; left: 0.6rem; width: 1.5rem; height: 1rem; border-left: none; border-radius: 0 0.5rem 0.5rem 0 } /*.zstk-textadd--inputcont { position: absolute; top: 50%; left: 50%; width: 40rem; transform: translate(-50%, -50%); border: 0.2rem solid var(--ie-crop--border); z-index: 2; }*/ .zstk-textadd--inputcont { position: absolute; top: 50%; left: 50%; width: 40rem; transform: translate(-50%, -50%); z-index: 2; } .zstk-textadd--input { padding: 1rem; font-size: 7.5rem; text-align: center; border: none; outline: none; box-shadow: none; } .zstk-textadd--input:empty::after { content: attr(text-add-placeholder); } .zstk-createimgcont { width: 45rem; height: 45rem; background-color: var(--color-white); box-shadow: 0px 0px 1rem 0px rgba(136, 142, 151, 0.25); position: relative; } .zstk-clrpallete--selectorcont { height: 24rem; border-radius: 0.5rem; position: relative; background-image: linear-gradient(90deg, var(--color-white), rgb(255, 0, 0)); overflow: hidden; cursor: pointer; } .zstk-clrpallete--selectorcont::after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)); border-radius: 0.5rem; z-index: 1; cursor: pointer; } .zstk-clrpallete--clrrange { display: flex; width: 100%; height: 1rem; background-image: linear-gradient(to right, #ff3232 0%, #ff9900 10%, #ffff00 17%, #ccff00 20%, #32ff00 30%, #00ff65 40%, #00ffff 50%, #0065ff 60%, #3300ff 70%, #cb00ff 81%, #ff0098 90%, #ff0004 100%); position: relative; border-radius: 5rem; cursor: pointer; } .zstk-clrpallete--dragpointer { position: absolute; left: 0; top: 0; display: inline-flex; width: 1.5rem; height: 1.5rem; border: 0.2rem solid var(--color-white); border-radius: 50%; background-color: transparent; z-index: 2; box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.25); cursor: pointer; } .zstk-clrpallete--clrrange .zstk-clrpallete--dragpointer { left: -0.1rem; top: 50%; transform: translateY(-50%); } .zstk-clrpallete--gridline { grid-template-columns: repeat(auto-fill, minmax(calc((100% / 9) - 0.7rem), 1fr)); grid-gap: 0.7rem; } .zstk-clrpallete--suggestbox { display: inline-flex; width: 1.7rem; height: 1.7rem; border-radius: 0.3rem; border: 0.1rem solid var(--border-grey); cursor: pointer; } .zstk-createcollage { display: grid; height: 100%; } .zstk-collage--def { padding: 0; } .zstk-grid--collage-1 { grid-template-rows: 25% 50% 25%; grid-template-columns: 25% 50% 25%; } .zstk-grid--1-1 { grid-template: 100% / 100%; } .zstk-grid--2-2 { grid-template-rows: calc(100% / 2) calc(100% / 2); grid-template-columns: calc(100% / 2) calc(100% / 2); } .zstk-grid--3-2 { grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3); grid-template-columns: calc(100% / 2) calc(100% / 2); } .zstk-grid--3-3 { grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3); grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3); } .zstk-grid--templaterow-1 { grid-template-rows: 100%; } .zstk-grid--templaterow-2 { grid-template-rows: calc(100% / 2) calc(100% / 2); } .zstk-grid--templaterow-3 { grid-template-rows: calc(100% / 3) calc(100% / 3) calc(100% / 3); } .zstk-grid--templaterow-4 { grid-template-rows: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4); } .zstk-grid--templatecol-1 { grid-template-columns: 100%; } .zstk-grid--templatecol-2 { grid-template-columns: calc(100% / 2) calc(100% / 2); } .zstk-grid--templatecol-3 { grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3); } .zstk-grid--templatecol-4 { grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4); } .zstk-grid--templaterow-2-2r-col2 { grid-template-rows: calc(100% / 2) calc(100% / 2); grid-template-columns: calc(100% / 2) calc(100% / 2); } .zstk-collage--layout { display: flex; align-items: center; justify-content: center; border: 0.1rem solid var(--border-grey); position: relative; overflow: hidden; } .zstk-grid--row-2-2 { grid-row: 2 / 2; } .zstk-grid--row-1-3 { grid-row: 1 / 3; } .zstk-grid--row-2-3 { grid-row: 2 / 3; } .zstk-grid--row-1-4 { grid-row: 1 / 4; } .zstk-grid--row-2-4 { grid-row: 2 / 4; } .zstk-grid--row-3-5 { grid-row: 3 / 5; } .zstk-grid--row-3 { grid-row: 3; } .zstk-grid--col-2 { grid-column: 2 / 2; } .zstk-grid--col-3 { grid-column: 3; } .zstk-grid--col-1-2 { grid-column: 1 / 2; } .zstk-grid--col-1-3 { grid-column: 1 / 3; } .zstk-grid--col-2-3 { grid-column: 2 / 3; } .zstk-grid--col-1-4 { grid-column: 1 / 4; } .zstk-grid--col-2-4 { grid-column: 2 / 4; } .zstk-framecont { position: absolute; top: 0.3rem; right: 0; bottom: 0.3rem; left: 0; border: 0.2rem solid var(--ie-crop--border); } .zstk-stickerattach--cont { position: absolute; top: 50%; left: 5rem; display: inline-flex; align-items: center; justify-content: center; padding: 1rem; border: 0.2rem solid var(--ie-crop--border); transform: translateY(-50%); } .zstk-stickerattach--cont > img { width: 7.5rem; height: 7.5rem; } .zstk-framecont .zstk-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .zstk-collage--crosslayout { position: absolute; } .zstk-collage--crosslayout:nth-child(2) { clip-path: polygon(100% 0, 0 100%, 100% 100%); } /*$Id : $ */ .zstk-grideditsect--body { padding: 1.5rem; height: 100%; } .zstk-demogrid--frame { display: grid; grid-template-columns: 1.5rem 1.5rem 1.5rem; border: solid #CBD1DC; border-width: 0.1rem 0 0 0.1rem; } .zstk-demogrid--frame > i { display: inline-flex; width: 1.5rem; height: 1.5rem; border: solid #CBD1DC; border-width: 0 0.1rem 0.1rem 0; } .zstk-gridframe--3-5 { grid-template-columns: 1rem 1rem 1rem; } .zstk-gridframe--3-5 > i { width: 1rem; height: 1rem; } .is-selected .zstk-demogrid--frame, .is-selected .zstk-demogrid--frame > i { border-color: var(--primary-color); transition: border-color 0.25s; } .zstk-gridimage--cont { /*width: 40rem; height: 27.5rem;*/ margin: 2.5rem 0; position: relative; } .zstk-gridimage--loadcont { width: 40rem; height: 27.5rem; margin: 2.5rem 0; } .zstk-gridprev--cont { display: flex; flex-direction: column; width: 28.5rem; height: 100%; max-height: 60rem; border: 0.7rem solid var(--color-darkbluegrey); border-radius: 3rem; background-color: var(--gridpanel-bgcolor); overflow-y: auto; } .zstk-igpreview--grid { height: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc((100% / 3) - 0.1rem), 1fr)); grid-gap: 0.1rem; background-color: var(--color-white); } .zstk-igpreview--grid-list { display: flex; align-items: center; justify-content: center; height: 9rem; background-color: var(--gridpanel-bgcolor); position: relative; } .zstk-igpreview--gridimg { display: inline-flex; width: 100%; height: 100%; background-repeat: no-repeat;position: relative; } .zstk-igpreview--gridimg[data-grid-layout="3x1"] { background-size: 27.1rem; } .zstk-igpreview--gridimg[data-grid-layout="3x3"] { background-size: 40rem 27rem; } .zstk-gridframe::after { content: ""; position: absolute; width: 100%; height: 100%; border: 0rem solid var(--frame-color); } .zstk-gridframe--top::after { border-top-width: 0.5rem; top: 0; } .zstk-gridframe--right::after { border-right-width: 0.5rem; right: 0; } .zstk-gridframe--bottom::after { border-bottom-width: 0.5rem; bottom: 0; } .zstk-gridframe--left::after { border-left-width: 0.5rem; left: 0; } /* .zstk-gridspliter--layer { display: grid; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100% } .zstk-gridspliter-3-1 { grid-template-columns: repeat(auto-fill, minmax(calc((100% / 3) - 0.1rem))); } .zstk-gridspliter--layer > i { border-right: 0.1rem solid var(--color-white); } .zstk-gridspliter--layer > i */ .zstk-gridedit--top, .zstk-gridedit--right, .zstk-gridedit--bottom, .zstk-gridedit--left { position: absolute; background-color:transparent; opacity: 0.5; } .zstk-gridedit--top { top: 0; right: auto; bottom: auto; left: 0; width: 100%; } .zstk-gridedit--right { top: 0; right: 0; bottom: auto; left: auto; } .zstk-gridedit--bottom { top: auto; right: auto; bottom: 0; left: 0; width: 100%; } .zstk-gridedit--left { top: 0; left: 0; bottom: auto; right: auto; } .zstk-gridspliter--layer { position: absolute; top: 50%; width: 27rem; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);cursor: move; } .zstk-gridspliter--layer tr td { width: calc(100% / 3); border: 0.1rem solid var(--color-white); } .zstk-gridspliter--layer-1x3 { width: 100%; height: 13rem; } .zstk-gridspliter--layer-3x3 { height: 100%; } .zstk-gridspliter--layer-1x3 tr td { height: 100%; } .zstk-gridspliter--layer-3x3 tr td{ height: calc(100% / 3); } /* .zstk-gridspliter--layer-4x3 tr td{ height: calc(100% / 12); } .zstk-gridspliter--layer-5x3 tr td{ height: calc(100% / 15); } */ /* .zstk-igpreview--grid { display: flex; flex-flow: row wrap; background-color: var(--color-white); } .zstk-igpreview--grid-list { display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; margin: 0 0.1rem 0.1rem 0; background-color: var(--gridpanel-bgcolor); position: relative; } */ /*$Id : $ */ .zstk-optimise--maincont { display: flex; flex-direction: column; padding: 1.5rem; height: 100%; overflow-y: auto; } .zstk-optimise--list { margin: 2rem 0; } .zstk-optimise--list:first-child { margin-top: 0; } .zstk-optimise--panelcont { display: flex; margin: 2.5rem 0; } .zstk-input--lhsicon.zstk-regraminput .zstk-input,.zstk-input--lhsicon.zstk-linkinput .zstk-input { height: 5rem; padding: 1rem 1.5rem 1rem 5rem; font-size: 1.6rem; } .zstk-input--lhsicon.zstk-regraminput > i ,.zstk-input--lhsicon.zstk-linkinput > i{ left: 1.6rem; } .zstk-regramsect--optimisecont { display: none; padding: 0 1.5rem; height: 100%; overflow-y: auto; } .zstk-showcustomise--opt .zstk-regramsect--optimisecont { display: flex;flex-direction: column; } .zstk-demobadge { position: absolute; display: inline-block; width: 1.5rem; height: 1.5rem; border-style: solid; border-color: var(--panel-badge-bgcolor); background-color: var(--panel-badge-bgcolor); } .zstk-demobadge.zstk-demobadge-bottomleft, .zstk-regram--badge.zstk-badge--bottomleft { bottom: 0; left: 0; border-width: 0.1rem 0.1rem 0 0; } .zstk-demobadge.zstk-demobadge-bottomright, .zstk-regram--badge.zstk-badge--bottomright { bottom: 0; right: 0; border-width: 0.1rem 0 0 0.1rem; } .zstk-demobadge.zstk-demobadge-topleft, .zstk-regram--badge.zstk-badge--topleft { top: 0; left: 0; border-width: 0 0.1rem 0.1rem 0; } .zstk-demobadge.zstk-demobadge-topright, .zstk-regram--badge.zstk-badge--topright { top: 0; right: 0; border-width: 0 0 0.1rem 0.1rem; } .is-selected .zstk-demobadge { border-color: var(--primary-color); background-color: var(--panel-selected-badge-bgcolor); } .zstk-regram--previewcont { width: 38rem; margin: 2rem auto; border: 0.1rem solid var(--border-grey); border-radius: 0.7rem; } /* .zstk-regram--previewcont.zstk-empytcontent { overflow: hidden; } */ .zstk-regram--postattachment { /*height: 38rem; border-bottom: 1px solid var(--border-grey);*/ overflow: hidden; position: relative; user-select: none;border-radius: 0 0 0.7rem 0.7rem;} .zstk-regram--badge { position: absolute; display: flex; align-items: center; padding: 0.5rem 0.7rem; font-size: 1rem; border: none !important; z-index: 5; } .zstk-regram--postattachment .zstk-regram--badge { font-size: 1.4rem; padding: 0.7rem 1rem; } .zstk-regram--badge.zstk-badge--topleft { border-radius: 0 0 0.5rem 0; } .zstk-regram--badge.zstk-badge--topright { border-radius: 0 0 0 0.5rem; } .zstk-regram--badge.zstk-badge--bottomleft { border-radius: 0 0.5rem 0 0; } .zstk-regram--badge.zstk-badge--bottomright { border-radius: 0.5rem 0 0 0; } .zstk-regram--badge.zstk-badge--colorwhite { background-color: var(--color-white); color: var(--color-black); } .zstk-regram--badge > i > svg { width: 1.2rem; height: 1.2rem; } .zstk-regram--postattachment .zstk-regram--badge > i > svg { width: 1.7rem; height: 1.7rem } .zstk-regram--badge.zstk-badge--colorwhite > i > svg { fill: var(--color-black); } .zstk-regram--badge.zstk-badge--colorblack { background-color: var(--color-black); color: var(--color-white); } .zstk-regram--badge.zstk-badge--colorblack > i > svg { fill: var(--color-white); } .zstk-regram--badgeprof { display: flex; align-items: center; flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-right: 0.7rem; border-radius: 50%; font-size: 1.4rem; overflow: hidden; } .zstk-regram--postattachment .zstk-regram--badgeprof { width: 2rem; height: 2rem; } .zstk-showcaptionbox { animation: captionBoxSlideDown 0.35s 0s 1 cubic-bezier(0, 0.61, 0.56, 0.87); } .zstk-regram-cta {padding-right: 2rem; } @keyframes captionBoxSlideDown { from { max-height: 0; opacity: 0; visibility: hidden; } to { max-height: 13.5rem; opacity: 1; visibility: visible; } } .zstk-hidecaptionbox { animation: captionBoxSlideUp 0.3s 0s 1 cubic-bezier(0, 0.61, 0.56, 0.87); } @keyframes captionBoxSlideUp { from { max-height: 13.5rem; opacity: 1; visibility: visible; overflow: hidden; } to { max-height: 0rem; opacity: 0; visibility: hidden; overflow: hidden; } } :root{ --utminfo-bg-clr:#F0F2F5; --utminfo-txt-clr:#6F6F6F; --utmres-link-clr:#2274F0; } .zstk-utm-centersection{width: 1200px;max-width: 90%;height: 93%;display: flex;margin: auto;background-color:var(--color-white);border-radius: 1rem;} .zstk-utm-inputsection{flex-direction: column;width: 50%;border-right: 0.1rem solid var(--border-grey);padding:3.5rem 0;overflow-y: auto;} .zstk-utm-infosection,.zstk-utm-ressection{max-width: 100%;color:var(--utminfo-txt-clr);font-size: 1.4rem;padding: 2rem;border-radius: 1rem;} .zstk-utm-ressection{border: 1px solid var(--border-grey);} .zstk-utm-infosection{background-color: var(--utminfo-bg-clr);} .zstk-utm-infosection > p { padding: 1rem 0; line-height: 2.3rem; font-style: italic;word-break: break-word;} .zstk-utm-infosection > p:first-child { padding-top: 0; } .zstk-utm-infosection > p:last-child { padding-bottom: 0; } .zstk-utm-inputsection .zstk-input--lhsicon.zstk-linkinput .zstk-input{height: 3.5rem;padding: 1rem;font-size: 1.4rem;} .zstk-inputparam-name{color:#A5AEBE;font-size: 1.2rem;font-weight: 600;} .zstk-utm-inputsection .zstk-button{align-self: center;margin-top: 2.5rem;} .zstk-utm-ressection {word-break: break-word;line-height: 1.8rem;color:var(--primary-color);text-align: center;} .zstk-allworked-section .zstk-igrrwlist--item{padding: 0;width: 100%;} .zstk-allworked-section .zstk-igrrwlist{border:none;margin-bottom:1.5rem;background-color: var(--color-white);border-radius: 0.5rem;cursor:pointer;padding:1.2rem 1rem;transition: all 0.3s;} .zstk-allworked-section .zstk-igrrwlist:hover { box-shadow:0 0.5rem 1.5rem 0.1rem rgb(0 0 0 / 5%); } [data-toolkit-tab-sect="utm-builder-home"] .zstk-igrrwlist:hover .zstk-hovericon-show, .zstk-allworked-section .zstk-igrrwlist:hover .zstk-hovericon-show{opacity: 1;visibility: visible;} .zstk-utmres-optbtn { display: flex; align-items: center; cursor: pointer; color: #000; padding: 0.8rem 1rem; margin: 0 1rem; border-radius: 0.5rem; background-color: var(--color-white); transition: all 0.3s; } .zstk-utmres-optbtn:hover { background-color: var(--panel-bgcolor); } .zstk-utmres-optbtn.selected{background-color:transparent;cursor: auto;pointer-events: none;} .zstk-utmres-optbtn.selected span{color:var(--primary-color)} .zstk-utmres-optbtn.selected svg{fill:var(--primary-color)} .zstk-utmres-optbtn-cont:not(:last-child) { border-right: 0.1rem solid var(--border-grey); } [data-toolkit-tab-sect="utm-builder-home"] .zstk-allworked-section{ width:100% !important; margin-top: 0 !important; } .zs-tf-editorcont{display: flex;width: 70%;} .zs-tf-editorcont-txtarea{height: 52.5rem;} .zs-tf-editorcont-preview{width:31.8rem;padding: 4rem 2.2rem 2.2rem 2.2rem;height:max-content;} .zstk-tf-editor{height:32.5rem;} .zstk-tf-txtarea {resize: none;padding: 1.6rem;border: none;outline: none;line-height: 2rem;font-size: 1.6rem;height: 220px;overflow-y: auto;word-break: break-word;} .zstk-tf-txtarea div > span{font-size: 1.6rem !important;} .zs-tf-editorcont-preview-img{height: 27.4rem;background-color:var(--color-grey-f4); display: flex;align-items: center;justify-content: center;} .zstk-igpreview-txtcont{width: 100%;display: inline-block;word-break: break-word;line-height: 1.9rem;padding-top: 0.5rem;/* display: flex; */} .zstk-igpreview-txtcont .zstk-tf-txtarea{display: inline-block;height: max-content;transition: all 0.3s;width:100%;padding: 0;font-family:var(--font-medium);font-size: 1.4rem;} .zstk-igpreview-txtcont .zstk-previewtxt-cont--hide{height: 4rem;overflow: hidden;} .zstk-highlight-morebtn{color:var(--primary-color)} .zstk-txtstyle--Bold div{font-family: var(--font-bold) !important; } .zstk-txtstyle--Italic div{font-style: italic;} .zstk-txtstyle--Underline div{text-decoration: underline;} .zstk-txtstyle--TextCase div{text-transform: uppercase;} .zstk-txtstyle--Strikethrough div{text-decoration: line-through;} .zstk-txtstyle--Bulletdot,.zstk-txtstyle--Bulletnumber { margin-left : 1rem; } .zstk-txtstyle--Bulletdot div {display: list-item !important;list-style-type: disc;} .zstk-txtstyle--Bulletnumber div { display: list-item !important;list-style-type: num; } .zstk-igpreview-txtcont .zstk-tf-txtarea{padding:0} .zstk-igpreview-txtcont .zstk-tf-txtarea div > span{font-size: 1.4rem !important;} .zstk-igpreview-txtcont .zstk-txtstyle--Bulletdot,.zstk-igpreview-txtcont .zstk-txtstyle--Bulletnumber {margin-left: 0rem; padding-left: 1.6rem;} .zstk-igpreview-txtcont .zstk-txtstyle--Bulletdot > span, .zstk-igpreview-txtcont .zstk-txtstyle--Bulletnumber > span{margin-left:-1.6rem} .zs-tf-editorcont-txtarea .zstk-groupbtn--list{ padding: 0.5rem; border-radius: 0.3rem;} .zs-tf-editorcont-txtarea .zstk-groupbtn--list span{font-family: var(--font-regular);} .zstk-txtstyle--Strikethrough > *:nth-child(2), .zstk-txtstyle--Underline > *:nth-child(2), .zstk-txtstyle--Bold > *:nth-child(2), .zstk-txtstyle--Italic > *:nth-child(2), .zstk-txtstyle--Textcase > *:nth-child(2),.zstk-txtstyle--nobullet > *:nth-child(2){display: inline;} .zs-tf-editorcont-txtarea .zstk-tf-txtarea:empty:before { content: attr(placeholder); color: #A5AEBE; text-transform:none; } .zstk-igpreview-txtcont .zstk-tf-txtarea span{--font-semibold:'PuviSemiBold'} .zs-tf-editorcont-txtarea .zstk-groupbtn--listcont{padding:0.5rem 1rem} .zs-tf-editorcont-txtarea .zstk-groupbtn--noline{padding: 0 0.5rem;} .zs-tf-editorcont-txtarea .zstk-groupbtn--noline::after{content:none;} .zstk-fill-bluegrey{fill:var(--color-bluegrey)} textarea::placeholder, textarea:-moz-placeholder, textarea::-moz-placeholder, textarea:-ms-input-placeholder, textarea::-webkit-input-placeholder {color:#A5AEBE;font-size: 2rem;} .zstk-ellipsis{ display: -webkit-box; -webkit-line-clamp: var(--linecount, 2); -webkit-box-orient: vertical; overflow: hidden; } .zstk-ellipsis-2{--linecount: 2;} .zstk-txtcount-red { color: var(--color-darkred); } [data-toolkit-tab-sect="remix-home"] .zstk-section--title { width: 55%; margin: auto; line-height: 2.8rem; } .zstk-remix-bgcontainer {display: flex;align-items: center;justify-content: center;/*max-height: 55rem;height: 100%;max-width: 48rem;*/padding: 4rem;position: relative;background-repeat: no-repeat;background-size: cover;margin: auto;/*overflow: hidden;*/width: 54rem;height: 54rem;} .zstk-remix-content-container {z-index: 1;background-color: var(--color-white);display: flex;flex-direction: column;border-radius: 1rem;/*overflow-y: hidden;*/width:46rem;max-height:46rem;} .zstk-remix-contentxt > p {font-size: 1.4rem;line-height: 1.9rem;color: var(--color-black);} .zstk-remix-contentxt > p:not(:first-child) { padding-top: 1.5rem; } .zstk-remix-content-container-body{height: 100%;display: flex;align-items: center;justify-content: center;overflow-y: auto;} /*img editor reuse */ .zstk-ieopt--list { display: flex; align-items: center; padding: 1.4rem 1.5rem; font-size: 1.4rem; line-height: 1.8rem; color: var(--color-black); border-radius: 0.5rem; cursor: pointer; transition: background-color 0.25s; } .zstk-ieimgopt--cont .zstk-ieopt--list { padding: 0; height: 8rem; justify-content: center; border-radius: 0.5rem; overflow: hidden; position: relative; } .zstk-imghover--scale .zstk-ieopt--list > img { width: 100%; transform: scale3d(1, 1, 1); transition: transform 0.25s cubic-bezier(0.42, 0.92, 0.49, 1.04); } .zstk-imghover--scale .zstk-ieopt--list:hover > img { transform: scale3d(1.075, 1.075, 1.075) translate3d(0, 0, 0) perspective(1rem); } .zstk-imghover--scale .zstk-ieopt--list.selected { border: 2px solid var(--primary-color); padding: 0.2rem; } /*layout change css*/ .zstk-remixbg-pattern,.zstk-remixbg-gradient{display: block;padding: 0.5rem 2rem 2rem 2rem;} /*remix -background*/ .zstk-remixbg-pattern .zstk-ieopt--list { height: 10rem; } .zstk-remix-bgopt-section .zstk-groupbtn--list{height:4rem;max-width: 100%;} .zstk-dropdown-remix .zstk-dropdown--list{padding:1.2rem;} .zstk-remix-hover .zstk-ieopt--list {border: 0.15rem solid var(--color-white);padding: 0.2rem;border-radius:0.8rem;transition: all 0.3s;transform: scale(1);} .zstk-remix-hover .zstk-ieopt--list.selected{border: 0.15rem solid var(--primary-color);transform: scale(1.04)} .zstk-remix-hover .zstk-ieopt--list > img{ border-radius: 0.4rem; } .zstk-remix-hover .zstk-ieopt--list:hover{transform: scale(1.04);background-color: transparent;} /*remix - gradient*/ .zstk-grad-lightpink{background:linear-gradient(88deg, #EE9CA7, #FFDDE1)} .zstk-grad-browntoblue{background:linear-gradient(88deg, #B92B27, #1565C0)} .zstk-grad-violettogreen{background:linear-gradient(88deg, #8360C3, #2EBF91)} .zstk-grad-greenyellowpink{background:linear-gradient(88deg, #C6FFDD, #FBD786,#F7797D)} .zstk-grad-lemontodgreen{background:linear-gradient(88deg, #F1F2B5, #135058)} .zstk-grad-orangepurpleblue{background:linear-gradient(88deg, #FEAC5E, #C779D0,#4BC0C8)} /*remix-nobg*/ .zstk-remix-bgcontainer.zstk-remix-nobg{height: max-content;width: max-content;padding: 0;margin: unset;} /* .zstk-remix-bgcontainer.zstk-remix-nobg .zstk-remix-content-container{border-radius: 0;} */ .zstk-centerpopup--remixshare .zstk-remix-bgcontainer.zstk-remix-nobg .zstk-remix-content-container{box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 19%);} /*remix-image*/ .zstk-remixbg-image,.zstk-remix-solidcolor{display: block;} .zstk-remix-solidcolor .zstk-subtitle{display: none;} /*remix - postoption*/ .zstk-button--darkmodebtn ,.zstk-button--lightmodebtn { width: 2.5rem; height: 2.5rem; padding: 1rem; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; border-color: var(--color-bluegrey); background-color: var(--color-bluegrey); transition: background-color 0.3s;} .zstk-button--darkmodebtn > svg,.zstk-button--lightmodebtn > svg{ fill: var(--color-black);} .zstk-button--darkmodebtn.selected, .zstk-button--lightmodebtn.selected{ border-color: var(--primary-color); background-color: var(--primary-color); fill: var(--color-white); } .zstk-modebtn-fill{display: none;} .zstk-modebtn-stroke{display: block;} .zstk-button--darkmodebtn.selected .zstk-modebtn-fill,.zstk-button--lightmodebtn.selected .zstk-modebtn-fill{display: block;} .zstk-button--darkmodebtn.selected .zstk-modebtn-stroke,.zstk-button--lightmodebtn.selected .zstk-modebtn-stroke{display: none;} .zstk-postopt-res{padding: 0.3rem 0.8rem;border-radius: 0.3rem;font-size: 1.2rem;background-color: var(--color-darkgrey);} /*remix-darkmode,lightmode css starts here*/ .zstk-remix-content-container--dark{background-color: #000;--color-black: #fff;--skeleton-clr:#3a3a3a} .zstk-remix-content-container--light{background-color: #fff;--color-white: #000;--skeleton-clr:#f5f5f5} /*remix - nomedia*/ .zstk-remix-content-container.zstk-remix-content-container--nomedia [data-container="zstk-remix-mediacontainer"]{ display: none; } .zstk-remix-recentwork .zstk-history--tbllist-col:first-child,.zstk-allworked-section .zstk-history--tbllist-col:first-child{width: 50%;} .zstk-remix-recentwork .zstk-history--tbllist-col:last-child ,.zstk-allworked-section .zstk-history--tbllist-col:last-child{ width: 18%; margin-left: auto; } .zstk-remix-recentwork .zstk-clickable-link,.zstk-allworked-section .zstk-clickable-link{padding-right: 3rem;} .zstk-remix-recentwork .zstk-history--tbllist:not(:last-child) { border-bottom: 1px solid var(--border-grey); border-radius: 0; } .zstk-remix-recentwork .zstk-history--tbllist:last-child { border-bottom: 1px solid transparent;} .zstk-remix-recentwork .zstk-history--tbllist:hover{box-shadow:0 0rem 0.5rem 0.1rem rgb(0 0 0 / 5%);border-bottom: 1px solid transparent !important;} .zstk-remix-recentwork .zstk-history--tbllist-col{padding:1rem 0} /*remix history*/ .zstk-remix-recentwork .zstk-networkimg,.zstk-allworked-section .zstk-networkimg{width:2rem;height:2rem;} .zstk-remix-recentwork .zstk-history--tbllist-img,.zstk-allworked-section .zstk-history--tbllist-img { border-radius: 0.3rem;width: 7rem; height: 7rem; } .zstk-remix-recentwork .zstk-history--tbllist{width: 100%;} .zstk-history-tbllist-link { width: calc(100% - 11rem); } .zstk-history--tbllist-cont { width: calc(100% - 10rem); display: flex; flex-direction: column; } /*remix-portrait image*/ .zstk-remix-contant-wrapper { display: flex; flex-direction: column; padding: 1.5rem; height: 100%; overflow-y: auto; } .zstk-remix-content-para { display: flex; flex-direction: column; padding-right: 1rem; } .zstk-remix-mediacontainer { width: 100%; padding-top: 1rem; height: 100%; display: flex; flex-direction: column; overflow-y: auto; } /* .zstk-remix-bgcontainer--portrait .zstk-remix-content-container{ width: 85%; } */ .zstk-remix-bgcontainer--portrait .zstk-remix-mediacontainer{ width:60%; } .zstk-remix-content-container .zstk-networkimg { width: 2rem; height: 2rem; } .zstk-remix-recentwork .zstk-history--tbllist-col:nth-child(n+3):after,.zstk-allworked-section .zstk-history--tbllist-col:nth-child(n+3):after { content: none; } /*line case*/ .zstk-remix-content-para div{ display: -webkit-box; -webkit-line-clamp: var(--linecount,6); -webkit-box-orient: vertical; overflow: hidden; word-wrap: break-word;} .zstk-remix-bgcontainer--portrait{--linecount:3} /*share case*/ .zstk-centerpopup--remixshare .zstk-remix-bgcontainer{ transform-origin: top;/*margin: auto;padding:2rem 0;*/} .zstk-centerpopup--remixshare .zstk-remix-content-container-body { max-height: 27rem; overflow: hidden;margin-right: 25rem; } .zstk-remix-bgcontainer.zstk-remix-nobg .zstk-remix-content-container { border-radius: 0; } .zstk-centerpopup--remixshare .zstk-remix-bgcontainer.zstk-remix-nobg { transform-origin: center; } .rcp-root{--rcp-background-color: #121212;--rcp-field-input-color: #ffffff;--rcp-field-input-border-color: #242424;--rcp-field-label-color: #808080}.rcp{display:flex;flex-direction:column;background-color:var(--rcp-background-color);border-radius:10px}.rcp-body{display:flex;flex-direction:column;gap:20px;padding:20px 10px}.rcp-section{display:flex;flex-direction:column;gap:10px}.rcp-interactive{width:100%;height:100%;user-select:none;touch-action:none}.rcp-saturation{cursor:all-scroll;width:100%;position:relative;background-image:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,transparent);border-radius:10px 10px 0 0}.rcp-saturation-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-10px)}.rcp-hue{cursor:ew-resize;position:relative;width:100%;height:12px;background-image:linear-gradient(to right,rgb(255,0,0),rgb(255,255,0),rgb(0,255,0),rgb(0,255,255),rgb(0,0,255),rgb(255,0,255),rgb(255,0,0));border-radius:10px}.rcp-hue-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-alpha{cursor:ew-resize;position:relative;width:100%;height:12px;border-radius:10px}.rcp-alpha-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-fields{display:flex;flex-direction:column;gap:10px}.rcp-fields-floor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.rcp-field{display:flex;flex-direction:column;width:100%}.rcp-field-input{width:100%;font-family:inherit;font-size:14px;text-align:center;color:var(--rcp-field-input-color);background-color:transparent;border:2px solid var(--rcp-field-input-border-color);border-radius:5px;outline:none;padding:5px 0}.rcp-field-label{font-size:14px;text-align:center;color:var(--rcp-field-label-color)} /*.react-resizable {*/ /* position: relative;*/ /*}*/ .react-resizable-handle { position: absolute; width: 20px; height: 20px; background-repeat: no-repeat; background-origin: content-box; box-sizing: border-box; /*background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');*/ background-position: bottom right; padding: 0 3px 3px 0; } .react-resizable-handle-sw { bottom: 0; left: 0; cursor: sw-resize; transform: rotate(90deg); } .react-resizable-handle-se { bottom: 0; right: 0; cursor: se-resize; } .react-resizable-handle-nw { top: 0; left: 0; cursor: nw-resize; transform: rotate(180deg); } .react-resizable-handle-ne { top: 0; right: 0; cursor: ne-resize; transform: rotate(270deg); } .react-resizable-handle-w, .react-resizable-handle-e { top: 50%; margin-top: -10px; cursor: ew-resize; } .react-resizable-handle-w { left: 0; transform: rotate(135deg); } .react-resizable-handle-e { right: 0; transform: rotate(315deg); } .react-resizable-handle-n, .react-resizable-handle-s { left: 50%; margin-left: -10px; cursor: ns-resize; } .react-resizable-handle-n { top: 0; transform: rotate(225deg); } .react-resizable-handle-s { bottom: 0; transform: rotate(45deg); } /*color pallete css change*/ .zstk-imgeditorsect--body .rcp-fields-floor { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .rcp-field-input { pointer-events: none;cursor: auto; } /*! * Cropper.js v1.6.1 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2023-09-17T03:44:17.565Z */ .cropper-container { direction: ltr; font-size: 0; line-height: 0; position: relative; -ms-touch-action: none; touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cropper-container img { backface-visibility: hidden; display: block; height: 100%; image-orientation: 0deg; max-height: none !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; width: 100%; } .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .cropper-wrap-box, .cropper-canvas { overflow: hidden; } .cropper-drag-box { background-color: #fff; opacity: 0; } .cropper-modal { background-color: #000; opacity: 0.5; } .cropper-view-box { display: block; height: 100%; outline: 1px solid #39f; outline-color: rgba(51, 153, 255, 0.75); overflow: hidden; width: 100%; } .cropper-dashed { border: 0 dashed #eee; display: block; opacity: 0.5; position: absolute; } .cropper-dashed.dashed-h { border-bottom-width: 1px; border-top-width: 1px; height: calc(100% / 3); left: 0; top: calc(100% / 3); width: 100%; } .cropper-dashed.dashed-v { border-left-width: 1px; border-right-width: 1px; height: 100%; left: calc(100% / 3); top: 0; width: calc(100% / 3); } .cropper-center { display: block; height: 0; left: 50%; opacity: 0.75; position: absolute; top: 50%; width: 0; } .cropper-center::before, .cropper-center::after { background-color: #eee; content: ' '; display: block; position: absolute; } .cropper-center::before { height: 1px; left: -3px; top: 0; width: 7px; } .cropper-center::after { height: 7px; left: 0; top: -3px; width: 1px; } .cropper-face, .cropper-line, .cropper-point { display: block; height: 100%; opacity: 0.1; position: absolute; width: 100%; } .cropper-face { background-color: #fff; left: 0; top: 0; } .cropper-line { background-color: #39f; } .cropper-line.line-e { cursor: ew-resize; right: -3px; top: 0; width: 5px; } .cropper-line.line-n { cursor: ns-resize; height: 5px; left: 0; top: -3px; } .cropper-line.line-w { cursor: ew-resize; left: -3px; top: 0; width: 5px; } .cropper-line.line-s { bottom: -3px; cursor: ns-resize; height: 5px; left: 0; } .cropper-point { background-color: #39f; height: 5px; opacity: 0.75; width: 5px; } .cropper-point.point-e { cursor: ew-resize; margin-top: -3px; right: -3px; top: 50%; } .cropper-point.point-n { cursor: ns-resize; left: 50%; margin-left: -3px; top: -3px; } .cropper-point.point-w { cursor: ew-resize; left: -3px; margin-top: -3px; top: 50%; } .cropper-point.point-s { bottom: -3px; cursor: s-resize; left: 50%; margin-left: -3px; } .cropper-point.point-ne { cursor: nesw-resize; right: -3px; top: -3px; } .cropper-point.point-nw { cursor: nwse-resize; left: -3px; top: -3px; } .cropper-point.point-sw { bottom: -3px; cursor: nesw-resize; left: -3px; } .cropper-point.point-se { bottom: -3px; cursor: nwse-resize; height: 20px; opacity: 1; right: -3px; width: 20px; } @media (min-width: 768px) { .cropper-point.point-se { height: 15px; width: 15px; } } @media (min-width: 992px) { .cropper-point.point-se { height: 10px; width: 10px; } } @media (min-width: 1200px) { .cropper-point.point-se { height: 5px; opacity: 0.75; width: 5px; } } .cropper-point.point-se::before { background-color: #39f; bottom: -50%; content: ' '; display: block; height: 200%; opacity: 0; position: absolute; right: -50%; width: 200%; } .cropper-invisible { opacity: 0; } .cropper-bg { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC); } .cropper-hide { display: block; height: 0; position: absolute; width: 0; } .cropper-hidden { display: none !important; } .cropper-move { cursor: move; } .cropper-crop { cursor: crosshair; } .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { cursor: not-allowed; }