From c625a7d576330b2deeb19baca47d9f749e29b633 Mon Sep 17 00:00:00 2001 From: Johnny Almonte Date: Tue, 18 Jan 2022 14:28:19 -0400 Subject: [PATCH 1/4] chore(deps): update to latest component-relay --- package.json | 4 ++-- yarn.lock | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 0861028..2ccb206 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "@babel/cli": "^7.12.10", "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.11", - "@standardnotes/component-relay": "2.0.3", - "codemirror": "^5.59.2", + "@standardnotes/component-relay": "2.2.0", + "codemirror": "5.59.2", "copy-webpack-plugin": "^7.0.0", "css-loader": "^5.0.1", "eslint": "^7.18.0", diff --git a/yarn.lock b/yarn.lock index 615e359..be8ab0e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -902,10 +902,10 @@ dependencies: execa "^0.2.2" -"@standardnotes/component-relay@2.0.3": - version "2.0.3" - resolved "https://registry.yarnpkg.com/@standardnotes/component-relay/-/component-relay-2.0.3.tgz#bdf9ccbc2cfe9bfd6dcb1f478202c19e38a4b1fc" - integrity sha512-Gx8L1GEdR4UnGkP464/fyRxQ+SPxucBqItRsvJCZm0JgGxrfaQKJrI0DOSQs/Hn5bpgQOo00Fxe3428pSkXcPA== +"@standardnotes/component-relay@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@standardnotes/component-relay/-/component-relay-2.2.0.tgz#3b51e1047997e624594c8bce00c38e73d49cfb8f" + integrity sha512-cJMSnT/fREYK1zq/U6aSfxWPiLPhzI1sLNDUMhmZnJ2npBKFeqE7qQj7NGdp4Q5f72yk4Oqevg5O2BxWDKpYHA== "@stroncium/procfs@^1.0.0": version "1.2.1" @@ -1486,7 +1486,7 @@ clone-deep@^4.0.1: kind-of "^6.0.2" shallow-clone "^3.0.0" -codemirror@^5.59.2: +codemirror@5.59.2: version "5.59.2" resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.59.2.tgz#ee674d3a4a8d241af38d52afc482625ba7393922" integrity sha512-/D5PcsKyzthtSy2NNKCyJi3b+htRkoKv3idswR/tR6UAvMNKA7SrmyZy6fOONJxSRs1JlUWEDAbxqfdArbK8iA== From eb49cc99ab5eb2f838b7a26033abb4a68483f9d0 Mon Sep 17 00:00:00 2001 From: Johnny Almonte Date: Tue, 18 Jan 2022 14:28:42 -0400 Subject: [PATCH 2/4] chore: increment version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2ccb206..5f538a2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sn-code-editor", - "version": "1.3.8", + "version": "1.3.9", "description": "A code editor for Standard Notes", "main": "dist/main.js", "author": "Standard Notes ", From c5853f01816b015ea496138c5456962f56785287 Mon Sep 17 00:00:00 2001 From: Johnny Almonte Date: Tue, 18 Jan 2022 14:28:55 -0400 Subject: [PATCH 3/4] chore: build --- dist/lib/component-relay.js | 2 +- dist/stylekit.css | 4070 ++++++++++++++++++++++++++++++++++- 2 files changed, 4068 insertions(+), 4 deletions(-) diff --git a/dist/lib/component-relay.js b/dist/lib/component-relay.js index 6dd94bf..bdd5a53 100644 --- a/dist/lib/component-relay.js +++ b/dist/lib/component-relay.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ComponentRelay",[],t):"object"==typeof exports?exports.ComponentRelay=t():e.ComponentRelay=t()}(self,(function(){return(()=>{"use strict";var e={175:(e,t,s)=>{let n,i,o;var a;s.d(t,{default:()=>w}),function(e){e.SetSize="set-size",e.StreamItems="stream-items",e.StreamContextItem="stream-context-item",e.SaveItems="save-items",e.SelectItem="select-item",e.AssociateItem="associate-item",e.DeassociateItem="deassociate-item",e.ClearSelection="clear-selection",e.CreateItem="create-item",e.CreateItems="create-items",e.DeleteItems="delete-items",e.SetComponentData="set-component-data",e.InstallLocalComponent="install-local-component",e.ToggleActivateComponent="toggle-activate-component",e.RequestPermissions="request-permissions",e.PresentConflictResolution="present-conflict-resolution",e.DuplicateItem="duplicate-item",e.ComponentRegistered="component-registered",e.ActivateThemes="themes",e.Reply="reply",e.SaveSuccess="save-success",e.SaveError="save-error"}(n||(n={})),function(e){e[e.Web=1]="Web",e[e.Desktop=2]="Desktop",e[e.Mobile=3]="Mobile"}(i||(i={})),function(e){e.Any="*",e.Item="SF|Item",e.RootKey="SN|RootKey|NoSync",e.ItemsKey="SN|ItemsKey",e.EncryptedStorage="SN|EncryptedStorage",e.Note="Note",e.Tag="Tag",e.SmartTag="SN|SmartTag",e.Component="SN|Component",e.Editor="SN|Editor",e.ActionsExtension="Extension",e.UserPrefs="SN|UserPreferences",e.Privileges="SN|Privileges",e.HistorySession="SN|HistorySession",e.Theme="SN|Theme",e.Mfa="SF|MFA",e.ServerExtension="SF|Extension",e.FilesafeCredentials="SN|FileSafe|Credentials",e.FilesafeFileMetadata="SN|FileSafe|FileMetadata",e.FilesafeIntegration="SN|FileSafe|Integration",e.ExtensionRepo="SN|ExtensionRepo"}(o||(o={}));var r=new Uint8Array(16);function m(){if(!a&&!(a="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return a(r)}const c=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,l=function(e){return"string"==typeof e&&c.test(e)};for(var d=[],p=0;p<256;++p)d.push((p+256).toString(16).substr(1));const h=function(e,t,s){var n=(e=e||{}).random||(e.rng||m)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){s=s||0;for(var i=0;i<16;++i)t[s+i]=n[i];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=(d[e[t+0]]+d[e[t+1]]+d[e[t+2]]+d[e[t+3]]+"-"+d[e[t+4]]+d[e[t+5]]+"-"+d[e[t+6]]+d[e[t+7]]+"-"+d[e[t+8]]+d[e[t+9]]+"-"+d[e[t+10]]+d[e[t+11]]+d[e[t+12]]+d[e[t+13]]+d[e[t+14]]+d[e[t+15]]).toLowerCase();if(!l(s))throw TypeError("Stringified UUID is invalid");return s}(n)},g=e=>{var t;const s={[i.Web]:"web",[i.Desktop]:"desktop",[i.Mobile]:"mobile"};return null!==(t=s[e])&&void 0!==t?t:s[i.Web]},u=()=>{};class v{static get isSupported(){return!(!window.console&&!console)}static get info(){return v.isSupported&&this.enabled?console.log.bind(console):u}static get error(){return console.error.bind(console)}}var f,S,b;function y(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),s.push.apply(s,n)}return s}function I(e){for(var t=1;t0&&(this.initialPermissions=s),(null==n?void 0:n.coallesedSaving)&&(this.coallesedSaving=n.coallesedSaving),(null==n?void 0:n.coallesedSavingDelay)&&(this.coallesedSavingDelay=n.coallesedSavingDelay),(null==n?void 0:n.acceptsThemes)&&(this.component.acceptsThemes=null===(o=null==n?void 0:n.acceptsThemes)||void 0===o||o),i&&(this.onReadyCallback=i),v.enabled=null!==(t=null==n?void 0:n.debug)&&void 0!==t&&t}deinit(){this.onReadyCallback=void 0,this.component={acceptsThemes:!0,activeThemes:[]},this.messageQueue=[],this.sentMessages=[],this.lastStreamedItem=void 0,this.pendingSaveItems=void 0,this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0,this.messageHandler&&(this.contentWindow.document.removeEventListener("message",this.messageHandler),this.contentWindow.removeEventListener("message",this.messageHandler))}registerMessageHandler(){this.messageHandler=e=>{if(v.info("Components API Message received:",e.data),document.referrer&&new URL(document.referrer).origin!==new URL(e.origin).origin)return;if(this.component.origin){if(e.origin!==this.component.origin)return}else this.component.origin=e.origin;const{data:t}=e,s=(e=>{if("string"!=typeof e)return!1;try{const t=JSON.parse(e),s=Object.prototype.toString.call(t);return"[object Object]"===s||"[object Array]"===s}catch(e){return!1}})(t)?JSON.parse(t):t;s?this.handleMessage(s):v.error("Invalid data received. Skipping...")},this.contentWindow.document.addEventListener("message",this.messageHandler,!1),this.contentWindow.addEventListener("message",this.messageHandler,!1),v.info("Waiting for messages...")}handleMessage(e){switch(e.action){case n.ComponentRegistered:this.component.sessionKey=e.sessionKey,e.componentData&&(this.component.data=e.componentData),this.onReady(e.data),v.info("Component successfully registered with payload:",e);break;case n.ActivateThemes:this.activateThemes(e.data.themes);break;default:{var t;if(!e.original)return;const s=null===(t=this.sentMessages)||void 0===t?void 0:t.filter((t=>{var s;return t.messageId===(null===(s=e.original)||void 0===s?void 0:s.messageId)}))[0];if(!s)return void v.error("This extension is attempting to communicate with Standard Notes, but an error is preventing it from doing so. Please restart this extension and try again.");s.callback&&s.callback(e.data);break}}}onReady(e){this.component.environment=e.environment,this.component.platform=e.platform,this.component.uuid=e.uuid,this.initialPermissions&&this.initialPermissions.length>0&&this.requestPermissions(this.initialPermissions);for(const e of this.messageQueue)this.postMessage(e.action,e.data,e.callback);this.messageQueue=[],v.info("Data passed to onReady:",e),this.activateThemes(e.activeThemeUrls||[]),this.onReadyCallback&&this.onReadyCallback()}getSelfComponentUUID(){return this.component.uuid}isRunningInDesktopApplication(){return this.component.environment===g(i.Desktop)}isRunningInMobileApplication(){return this.component.environment===g(i.Mobile)}getComponentDataValueForKey(e){if(this.component.data)return this.component.data[e]}setComponentDataValueForKey(e,t){if(!this.component.data)throw new Error("The component has not been initialized.");if(!e||e&&0===e.length)throw new Error("The key for the data value should be a valid string.");this.component.data=I(I({},this.component.data),{},{[e]:t}),this.postMessage(n.SetComponentData,{componentData:this.component.data})}clearComponentData(){this.component.data={},this.postMessage(n.SetComponentData,{componentData:this.component.data})}postMessage(e,t,s){if(!this.component.sessionKey)return void this.messageQueue.push({action:e,data:t,api:b.Component,callback:s});const n={action:e,data:t,messageId:this.generateUUID(),sessionKey:this.component.sessionKey,api:b.Component},i=JSON.parse(JSON.stringify(n));let o;i.callback=s,this.sentMessages.push(i),o=this.isRunningInMobileApplication()?JSON.stringify(n):n,v.info("Posting message:",o),this.contentWindow.parent.postMessage(o,this.component.origin)}requestPermissions(e,t){this.postMessage(n.RequestPermissions,{permissions:e},(()=>{t&&t()}))}activateThemes(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(!this.component.acceptsThemes)return;v.info("Incoming themes:",e);const{activeThemes:t}=this.component;if(t&&t.sort().toString()==e.sort().toString())return;let s=e;const n=[];for(const i of t)e.includes(i)?s=s.filter((e=>e!==i)):n.push(i);v.info("Deactivating themes:",n),v.info("Activating themes:",s);for(const e of n)this.deactivateTheme(e);this.component.activeThemes=e;for(const e of s){if(!e)continue;const t=this.contentWindow.document.createElement("link");t.id=btoa(e),t.href=e,t.type="text/css",t.rel="stylesheet",t.media="screen,print",t.className="custom-theme",this.contentWindow.document.getElementsByTagName("head")[0].appendChild(t)}}themeElementForUrl(e){return Array.from(this.contentWindow.document.getElementsByClassName("custom-theme")).slice().find((t=>t.id==btoa(e)))}deactivateTheme(e){const t=this.themeElementForUrl(e);t&&t.parentNode&&(t.setAttribute("disabled","true"),t.parentNode.removeChild(t))}generateUUID(){return h()}get platform(){return this.component.platform}get environment(){return this.component.environment}streamItems(e,t){this.postMessage(n.StreamItems,{content_types:e},(e=>{t(e.items)}))}streamContextItem(e){this.postMessage(n.StreamContextItem,{},(t=>{const{item:s}=t;(!this.lastStreamedItem||this.lastStreamedItem.uuid!==s.uuid)&&this.pendingSaveTimeout&&(clearTimeout(this.pendingSaveTimeout),this._performSavingOfItems(this.pendingSaveParams),this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0),this.lastStreamedItem=s,e(this.lastStreamedItem)}))}selectItem(e){this.postMessage(n.SelectItem,{item:this.jsonObjectForItem(e)})}clearSelection(){this.postMessage(n.ClearSelection,{content_type:o.Tag})}createItem(e,t){this.postMessage(n.CreateItem,{item:this.jsonObjectForItem(e)},(e=>{let{item:s}=e;!s&&e.items&&e.items.length>0&&(s=e.items[0]),this.associateItem(s),t&&t(s)}))}createItems(e,t){const s=e.map((e=>this.jsonObjectForItem(e)));this.postMessage(n.CreateItems,{items:s},(e=>{t&&t(e.items)}))}associateItem(e){this.postMessage(n.AssociateItem,{item:this.jsonObjectForItem(e)})}deassociateItem(e){this.postMessage(n.DeassociateItem,{item:this.jsonObjectForItem(e)})}deleteItem(e,t){this.deleteItems([e],t)}deleteItems(e,t){const s={items:e.map((e=>this.jsonObjectForItem(e)))};this.postMessage(n.DeleteItems,s,(e=>{t&&t(e)}))}sendCustomEvent(e,t,s){this.postMessage(e,t,(e=>{s&&s(e)}))}saveItem(e,t){let s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];this.saveItems([e],t,s)}saveItemWithPresave(e,t,s){this.saveItemsWithPresave([e],t,s)}saveItemsWithPresave(e,t,s){this.saveItems(e,s,!1,t)}_performSavingOfItems(e){let{items:t,presave:s,callback:i}=e;s&&s();const o=[];for(const e of t)o.push(this.jsonObjectForItem(e));this.postMessage(n.SaveItems,{items:o},(()=>{i&&i()}))}saveItems(e,t){let s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n=arguments.length>3?arguments[3]:void 0;if(this.pendingSaveItems||(this.pendingSaveItems=[]),this.coallesedSaving&&!s){this.pendingSaveTimeout&&clearTimeout(this.pendingSaveTimeout);const s=e.map((e=>e.uuid)),i=this.pendingSaveItems.filter((e=>!s.includes(e.uuid)));this.pendingSaveItems=i.concat(e),this.pendingSaveParams={items:this.pendingSaveItems,presave:n,callback:t},this.pendingSaveTimeout=setTimeout((()=>{this._performSavingOfItems(this.pendingSaveParams),this.pendingSaveItems=[],this.pendingSaveTimeout=void 0,this.pendingSaveParams=null}),this.coallesedSavingDelay)}else this._performSavingOfItems({items:e,presave:n,callback:t})}setSize(e,t){this.postMessage(n.SetSize,{type:"container",width:e,height:t})}jsonObjectForItem(e){const t=Object.assign({},e);return t.children=null,t.parent=null,t}getItemAppDataValue(e,t){return e.getAppDomainValue(t)}}}},t={};function s(n){if(t[n])return t[n].exports;var i=t[n]={exports:{}};return e[n](i,i.exports,s),i.exports}return s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s(175)})().default})); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ComponentRelay",[],t):"object"==typeof exports?exports.ComponentRelay=t():e.ComponentRelay=t()}(self,(function(){return(()=>{"use strict";var e={d:(t,s)=>{for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};let s,n,i,o;var a;e.d(t,{default:()=>w}),function(e){e.SetSize="set-size",e.StreamItems="stream-items",e.StreamContextItem="stream-context-item",e.SaveItems="save-items",e.SelectItem="select-item",e.AssociateItem="associate-item",e.DeassociateItem="deassociate-item",e.ClearSelection="clear-selection",e.CreateItem="create-item",e.CreateItems="create-items",e.DeleteItems="delete-items",e.SetComponentData="set-component-data",e.InstallLocalComponent="install-local-component",e.ToggleActivateComponent="toggle-activate-component",e.RequestPermissions="request-permissions",e.PresentConflictResolution="present-conflict-resolution",e.DuplicateItem="duplicate-item",e.ComponentRegistered="component-registered",e.ActivateThemes="themes",e.Reply="reply",e.SaveSuccess="save-success",e.SaveError="save-error",e.ThemesActivated="themes-activated",e.KeyDown="key-down",e.KeyUp="key-up",e.Click="click"}(s||(s={})),function(e){e[e.Web=1]="Web",e[e.Desktop=2]="Desktop",e[e.Mobile=3]="Mobile"}(n||(n={})),function(e){e.Any="*",e.Item="SF|Item",e.RootKey="SN|RootKey|NoSync",e.ItemsKey="SN|ItemsKey",e.EncryptedStorage="SN|EncryptedStorage",e.Note="Note",e.Tag="Tag",e.SmartTag="SN|SmartTag",e.Component="SN|Component",e.Editor="SN|Editor",e.ActionsExtension="Extension",e.UserPrefs="SN|UserPreferences",e.HistorySession="SN|HistorySession",e.Theme="SN|Theme",e.Mfa="SF|MFA",e.ServerExtension="SF|Extension",e.FilesafeCredentials="SN|FileSafe|Credentials",e.FilesafeFileMetadata="SN|FileSafe|FileMetadata",e.FilesafeIntegration="SN|FileSafe|Integration",e.ExtensionRepo="SN|ExtensionRepo"}(i||(i={})),function(e){e.Pinned="pinned",e.Archived="archived",e.Locked="locked",e.UserModifiedDate="client_updated_at",e.DefaultEditor="defaultEditor",e.MobileRules="mobileRules",e.NotAvailableOnMobile="notAvailableOnMobile",e.MobileActive="mobileActive",e.LastSize="lastSize",e.PrefersPlainEditor="prefersPlainEditor",e.ComponentInstallError="installError"}(o||(o={}));var r=new Uint8Array(16);function c(){if(!a&&!(a="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return a(r)}const m=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,l=function(e){return"string"==typeof e&&m.test(e)};for(var d=[],h=0;h<256;++h)d.push((h+256).toString(16).substr(1));const p=function(e,t,s){var n=(e=e||{}).random||(e.rng||c)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){s=s||0;for(var i=0;i<16;++i)t[s+i]=n[i];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=(d[e[t+0]]+d[e[t+1]]+d[e[t+2]]+d[e[t+3]]+"-"+d[e[t+4]]+d[e[t+5]]+"-"+d[e[t+6]]+d[e[t+7]]+"-"+d[e[t+8]]+d[e[t+9]]+"-"+d[e[t+10]]+d[e[t+11]]+d[e[t+12]]+d[e[t+13]]+d[e[t+14]]+d[e[t+15]]).toLowerCase();if(!l(s))throw TypeError("Stringified UUID is invalid");return s}(n)},u=e=>{var t;const s={[n.Web]:"web",[n.Desktop]:"desktop",[n.Mobile]:"mobile"};return null!==(t=s[e])&&void 0!==t?t:s[n.Web]},v=e=>null!=e,g=()=>{};class f{static get isSupported(){return!(!window.console&&!console)}static get info(){return f.isSupported&&this.enabled?console.log.bind(console):g}static get error(){return f.isSupported?console.error.bind(console):g}}var y,S,b,I;function k(e,t){var s=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),s.push.apply(s,n)}return s}function E(e){for(var t=1;t0&&(this.initialPermissions=s),v(null==n?void 0:n.coallesedSaving)&&(this.coallesedSaving=n.coallesedSaving),v(null==n?void 0:n.coallesedSavingDelay)&&(this.coallesedSavingDelay=n.coallesedSavingDelay),v(null==n?void 0:n.acceptsThemes)&&(this.component.acceptsThemes=null===(a=null==n?void 0:n.acceptsThemes)||void 0===a||a),v(i)&&(this.onReadyCallback=i),v(o)&&(this.onThemesChangeCallback=o),f.enabled=null!==(t=null==n?void 0:n.debug)&&void 0!==t&&t}deinit(){this.onReadyCallback=void 0,this.component={acceptsThemes:!0,activeThemes:[]},this.messageQueue=[],this.sentMessages=[],this.lastStreamedItem=void 0,this.pendingSaveItems=void 0,this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0,this.messageHandler&&(this.contentWindow.document.removeEventListener("message",this.messageHandler),this.contentWindow.removeEventListener("message",this.messageHandler)),this.keyDownEventListener&&this.contentWindow.removeEventListener("keydown",this.keyDownEventListener),this.keyUpEventListener&&this.contentWindow.removeEventListener("keyup",this.keyUpEventListener),this.clickEventListener&&this.contentWindow.removeEventListener("click",this.clickEventListener)}registerMessageHandler(){this.messageHandler=e=>{if(f.info("Components API Message received:",e.data),document.referrer&&new URL(document.referrer).origin!==new URL(e.origin).origin)return;const{data:t}=e,n=(e=>{if("string"!=typeof e)return!1;try{const t=JSON.parse(e),s=Object.prototype.toString.call(t);return"[object Object]"===s||"[object Array]"===s}catch(e){return!1}})(t)?JSON.parse(t):t;if(n){if(void 0===this.component.origin&&n.action===s.ComponentRegistered)this.component.origin=e.origin;else if(e.origin!==this.component.origin)return;this.handleMessage(n)}else f.error("Invalid data received. Skipping...")},this.contentWindow.document.addEventListener("message",this.messageHandler,!1),this.contentWindow.addEventListener("message",this.messageHandler,!1),f.info("Waiting for messages...")}registerKeyboardEventListeners(){this.keyDownEventListener=e=>{f.info("A key has been pressed: ".concat(e.key)),e.ctrlKey?this.keyDownEvent(I.Ctrl):e.shiftKey?this.keyDownEvent(I.Shift):(e.metaKey||"Meta"===e.key)&&this.keyDownEvent(I.Meta)},this.keyUpEventListener=e=>{f.info("A key has been released: ".concat(e.key)),"Control"===e.key?this.keyUpEvent(I.Ctrl):"Shift"===e.key?this.keyUpEvent(I.Shift):"Meta"===e.key&&this.keyUpEvent(I.Meta)},this.contentWindow.addEventListener("keydown",this.keyDownEventListener,!1),this.contentWindow.addEventListener("keyup",this.keyUpEventListener,!1)}registerMouseEventListeners(){this.clickEventListener=e=>{f.info("A click has been performed."),this.mouseClickEvent()},this.contentWindow.addEventListener("click",this.clickEventListener,!1)}handleMessage(e){switch(e.action){case s.ComponentRegistered:this.component.sessionKey=e.sessionKey,e.componentData&&(this.component.data=e.componentData),this.onReady(e.data),f.info("Component successfully registered with payload:",e);break;case s.ActivateThemes:this.activateThemes(e.data.themes);break;default:{var t,n;if(!e.original)return;const s=null===(t=this.sentMessages)||void 0===t?void 0:t.filter((t=>{var s;return t.messageId===(null===(s=e.original)||void 0===s?void 0:s.messageId)}))[0];if(!s){const e=this.contentWindow.document.title,t=("The extension '".concat(e,"' is attempting to communicate with Standard Notes, ")+"but an error is preventing it from doing so. Please restart this extension and try again.").replace(" "," ");return void f.info(t)}null==s||null===(n=s.callback)||void 0===n||n.call(s,e.data);break}}}onReady(e){this.component.environment=e.environment,this.component.platform=e.platform,this.component.uuid=e.uuid,this.initialPermissions&&this.initialPermissions.length>0&&this.requestPermissions(this.initialPermissions);for(const e of this.messageQueue)this.postMessage(e.action,e.data,e.callback);this.messageQueue=[],f.info("Data passed to onReady:",e),this.activateThemes(e.activeThemeUrls||[]),this.postMessage(s.ThemesActivated,{}),this.onReadyCallback&&this.onReadyCallback()}getSelfComponentUUID(){return this.component.uuid}isRunningInDesktopApplication(){return this.component.environment===u(n.Desktop)}isRunningInMobileApplication(){return this.component.environment===u(n.Mobile)}getComponentDataValueForKey(e){if(this.component.data)return this.component.data[e]}setComponentDataValueForKey(e,t){if(!this.component.data)throw new Error("The component has not been initialized.");if(!e||e&&0===e.length)throw new Error("The key for the data value should be a valid string.");this.component.data=E(E({},this.component.data),{},{[e]:t}),this.postMessage(s.SetComponentData,{componentData:this.component.data})}clearComponentData(){this.component.data={},this.postMessage(s.SetComponentData,{componentData:this.component.data})}postMessage(e,t,s){if(!this.component.sessionKey)return void this.messageQueue.push({action:e,data:t,api:b.Component,callback:s});const n={action:e,data:t,messageId:this.generateUUID(),sessionKey:this.component.sessionKey,api:b.Component},i=JSON.parse(JSON.stringify(n));let o;i.callback=s,this.sentMessages.push(i),o=this.isRunningInMobileApplication()?JSON.stringify(n):n,f.info("Posting message:",o),this.contentWindow.parent.postMessage(o,this.component.origin)}requestPermissions(e,t){this.postMessage(s.RequestPermissions,{permissions:e},(()=>{t&&t()}))}activateThemes(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];if(!this.component.acceptsThemes)return;f.info("Incoming themes:",e);const{activeThemes:t}=this.component;if(t&&t.sort().toString()==e.sort().toString())return;let s=e;const n=[];for(const i of t)e.includes(i)?s=s.filter((e=>e!==i)):n.push(i);f.info("Deactivating themes:",n),f.info("Activating themes:",s);for(const e of n)this.deactivateTheme(e);this.component.activeThemes=e;for(const e of s){if(!e)continue;const t=this.contentWindow.document.createElement("link");t.id=btoa(e),t.href=e,t.type="text/css",t.rel="stylesheet",t.media="screen,print",t.className="custom-theme",this.contentWindow.document.getElementsByTagName("head")[0].appendChild(t)}this.onThemesChangeCallback&&this.onThemesChangeCallback()}themeElementForUrl(e){return Array.from(this.contentWindow.document.getElementsByClassName("custom-theme")).slice().find((t=>t.id==btoa(e)))}deactivateTheme(e){const t=this.themeElementForUrl(e);t&&t.parentNode&&(t.setAttribute("disabled","true"),t.parentNode.removeChild(t))}generateUUID(){return p()}get platform(){return this.component.platform}get environment(){return this.component.environment}streamItems(e,t){this.postMessage(s.StreamItems,{content_types:e},(e=>{t(e.items)}))}streamContextItem(e){this.postMessage(s.StreamContextItem,{},(t=>{const{item:s}=t;(!this.lastStreamedItem||this.lastStreamedItem.uuid!==s.uuid)&&this.pendingSaveTimeout&&(clearTimeout(this.pendingSaveTimeout),this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveTimeout=void 0,this.pendingSaveParams=void 0),this.lastStreamedItem=s,e(this.lastStreamedItem)}))}selectItem(e){this.postMessage(s.SelectItem,{item:this.jsonObjectForItem(e)})}clearSelection(){this.postMessage(s.ClearSelection,{content_type:i.Tag})}createItem(e,t){this.postMessage(s.CreateItem,{item:this.jsonObjectForItem(e)},(e=>{let{item:s}=e;!s&&e.items&&e.items.length>0&&(s=e.items[0]),this.associateItem(s),t&&t(s)}))}createItems(e,t){const n=e.map((e=>this.jsonObjectForItem(e)));this.postMessage(s.CreateItems,{items:n},(e=>{t&&t(e.items)}))}associateItem(e){this.postMessage(s.AssociateItem,{item:this.jsonObjectForItem(e)})}deassociateItem(e){this.postMessage(s.DeassociateItem,{item:this.jsonObjectForItem(e)})}deleteItem(e,t){this.deleteItems([e],t)}deleteItems(e,t){const n={items:e.map((e=>this.jsonObjectForItem(e)))};this.postMessage(s.DeleteItems,n,(e=>{t&&t(e)}))}sendCustomEvent(e,t,s){this.postMessage(e,t,(e=>{s&&s(e)}))}saveItem(e,t){let s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];this.saveItems([e],t,s)}saveItemWithPresave(e,t,s){this.saveItemsWithPresave([e],t,s)}saveItemsWithPresave(e,t,s){this.saveItems(e,s,!1,t)}performSavingOfItems(e){let{items:t,presave:n,callback:i}=e;const o=setTimeout((()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),alert("This editor is unable to communicate with Standard Notes. Your changes may not be saved. Please backup your changes, then restart the application and try again.")}),5e3);this.concernTimeouts.push(o),n&&n();const a=[];for(const e of t)a.push(this.jsonObjectForItem(e));this.postMessage(s.SaveItems,{items:a},(()=>{this.concernTimeouts.forEach((e=>clearTimeout(e))),null==i||i()}))}saveItems(e,t){let s=arguments.length>2&&void 0!==arguments[2]&&arguments[2],n=arguments.length>3?arguments[3]:void 0;if(this.pendingSaveItems||(this.pendingSaveItems=[]),this.coallesedSaving&&!s){this.pendingSaveTimeout&&clearTimeout(this.pendingSaveTimeout);const s=e.map((e=>e.uuid)),i=this.pendingSaveItems.filter((e=>!s.includes(e.uuid)));this.pendingSaveItems=i.concat(e),this.pendingSaveParams={items:this.pendingSaveItems,presave:n,callback:t},this.pendingSaveTimeout=setTimeout((()=>{this.performSavingOfItems(this.pendingSaveParams),this.pendingSaveItems=[],this.pendingSaveTimeout=void 0,this.pendingSaveParams=null}),this.coallesedSavingDelay)}else this.performSavingOfItems({items:e,presave:n,callback:t})}setSize(e,t){this.postMessage(s.SetSize,{type:"container",width:e,height:t})}keyDownEvent(e){this.postMessage(s.KeyDown,{keyboardModifier:e})}keyUpEvent(e){this.postMessage(s.KeyUp,{keyboardModifier:e})}mouseClickEvent(){this.postMessage(s.Click,{})}jsonObjectForItem(e){const t=Object.assign({},e);return t.children=null,t.parent=null,t}getItemAppDataValue(e,t){var s,n;return null==e||null===(s=e.content)||void 0===s||null===(n=s.appData)||void 0===n?void 0:n["org.standardnotes.sn"][t]}}return t.default})()})); \ No newline at end of file diff --git a/dist/stylekit.css b/dist/stylekit.css index 194ce15..fcf0050 100644 --- a/dist/stylekit.css +++ b/dist/stylekit.css @@ -1,3 +1,4067 @@ -:root{--sn-stylekit-base-font-size: 13px;--sn-stylekit-font-size-p: 1.0rem;--sn-stylekit-font-size-editor: 1.21rem;--sn-stylekit-font-size-h6: 0.8rem;--sn-stylekit-font-size-h5: 0.9rem;--sn-stylekit-font-size-h4: 1.0rem;--sn-stylekit-font-size-h3: 1.1rem;--sn-stylekit-font-size-h2: 1.2rem;--sn-stylekit-font-size-h1: 1.3rem;--sn-stylekit-neutral-color: #989898;--sn-stylekit-neutral-contrast-color: white;--sn-stylekit-info-color: #086DD6;--sn-stylekit-info-contrast-color: white;--sn-stylekit-success-color: #2B9612;--sn-stylekit-success-contrast-color: white;--sn-stylekit-warning-color: #f6a200;--sn-stylekit-warning-contrast-color: white;--sn-stylekit-danger-color: #F80324;--sn-stylekit-danger-contrast-color: white;--sn-stylekit-shadow-color: #C8C8C8;--sn-stylekit-background-color: white;--sn-stylekit-border-color: #e3e3e3;--sn-stylekit-foreground-color: black;--sn-stylekit-contrast-background-color: #F6F6F6;--sn-stylekit-contrast-foreground-color: #2e2e2e;--sn-stylekit-contrast-border-color: #e3e3e3;--sn-stylekit-secondary-background-color: #F6F6F6;--sn-stylekit-secondary-foreground-color: #2e2e2e;--sn-stylekit-secondary-border-color: #e3e3e3;--sn-stylekit-secondary-contrast-background-color: #e3e3e3;--sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;--sn-stylekit--secondary-contrast-border-color: #a2a2a2;--sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);--sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);--sn-stylekit-paragraph-text-color: #454545;--sn-stylekit-input-placeholder-color: rgb(168, 168, 168);--sn-stylekit-input-border-color: #e3e3e3;--sn-stylekit-scrollbar-thumb-color: #dfdfdf;--sn-stylekit-scrollbar-track-border-color: #E7E7E7;--sn-stylekit-general-border-radius: 2px;--sn-stylekit-simplified-chinese-font: "Microsoft Yahei", "微软雅黑体";--sn-stylekit-monospace-font: "Ubuntu Mono", courier, monospace;--sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", - "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", - "Helvetica Neue", var(--sn-stylekit-simplified-chinese-font), sans-serif}.sn-component{font-family:var(--sn-stylekit-sans-serif-font);-webkit-font-smoothing:antialiased;color:var(--sn-stylekit-foreground-color)}.sn-component .sk-panel{box-shadow:0px 2px 5px var(--sn-stylekit-shadow-color);background-color:var(--sn-stylekit-background-color);border:1px solid var(--sn-stylekit-border-color);border-radius:var(--sn-stylekit-general-border-radius);display:flex;flex-direction:column;overflow:auto;flex-grow:1}.sn-component .sk-panel a:hover{text-decoration:underline}.sn-component .sk-panel.static{box-shadow:none;border:none;border-radius:0}.sn-component .sk-panel .sk-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:1.1rem 2rem;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);align-items:center}.sn-component .sk-panel .sk-panel-header .sk-panel-header-title{font-size:var(--sn-stylekit-font-size-h1);font-weight:500}.sn-component .sk-panel .sk-panel-header .close-button{font-weight:bold}.sn-component .sk-panel .sk-footer,.sn-component .sk-panel .sk-panel-footer{padding:1rem 2rem;border-top:1px solid var(--sn-stylekit-border-color);box-sizing:border-box}.sn-component .sk-panel .sk-footer.extra-padding,.sn-component .sk-panel .sk-panel-footer.extra-padding{padding:2rem 2rem}.sn-component .sk-panel .sk-footer .left,.sn-component .sk-panel .sk-panel-footer .left{text-align:left;display:block}.sn-component .sk-panel .sk-footer .right,.sn-component .sk-panel .sk-panel-footer .right{text-align:right;display:block}.sn-component .sk-panel .sk-panel-content{padding:1.6rem 2rem;padding-bottom:0;flex-grow:1;overflow:scroll;height:100%;overflow-y:auto !important;overflow-x:auto !important}.sn-component .sk-panel .sk-panel-content .sk-p,.sn-component .sk-panel .sk-panel-content .sk-li{color:var(--sn-stylekit-paragraph-text-color);line-height:1.3}.sn-component .sk-panel-section{padding-bottom:1.6rem;display:flex;flex-direction:column}.sn-component .sk-panel-section.sk-panel-hero{text-align:center}.sn-component .sk-panel-section .sk-p:last-child{margin-bottom:0}.sn-component .sk-panel-section:not(:last-child){margin-bottom:1.5rem;border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-panel-section:not(:last-child).no-border{border-bottom:none}.sn-component .sk-panel-section:last-child{margin-bottom:0.5rem}.sn-component .sk-panel-section.no-bottom-pad{padding-bottom:0;margin-bottom:0}.sn-component .sk-panel-section .sk-panel-section-title{margin-bottom:0.5rem;font-weight:bold;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-panel-section .sk-panel-section-outer-title{border-bottom:1px solid var(--sn-stylekit-border-color);padding-bottom:0.9rem;margin-top:2.1rem;margin-bottom:15px;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-panel-section .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-h5);margin-bottom:2px}.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle{font-weight:normal;opacity:0.6}.sn-component .sk-panel-section .text-content .sk-p{margin-bottom:1rem}.sn-component .sk-panel-section .text-content p:first-child{margin-top:0.3rem}.sn-component .sk-panel-row{display:flex;justify-content:space-between;align-items:center;padding-top:0.4rem}.sn-component .sk-panel-row.centered{justify-content:center}.sn-component .sk-panel-row.justify-right{justify-content:flex-end}.sn-component .sk-panel-row.justify-left{justify-content:flex-start}.sn-component .sk-panel-row.align-top{align-items:flex-start}.sn-component .sk-panel-row .sk-panel-column.stretch{width:100%}.sn-component .sk-panel-row.default-padding,.sn-component .sk-panel-row:not(:last-child){padding-bottom:0.4rem}.sn-component .sk-panel-row.condensed{padding-top:0.2rem;padding-bottom:0.2rem}.sn-component .sk-panel-row .sk-p{margin:0;padding:0}.sn-component .vertical-rule{background-color:var(--sn-stylekit-border-color);height:1.5rem;width:1px}.sn-component .sk-panel-form{width:100%}.sn-component .sk-panel-form.half{width:50%}.sn-component .sk-panel-form .form-submit{margin-top:0.15rem}.sn-component .right-aligned{justify-content:flex-end;text-align:right}.sn-component .sk-menu-panel{background-color:var(--sn-stylekit-background-color);border:1px solid var(--sn-stylekit-contrast-border-color);border-radius:var(--sn-stylekit-general-border-radius);overflow:scroll;user-select:none;overflow-y:auto !important;overflow-x:auto !important}.sn-component .sk-menu-panel .sk-menu-panel-header{padding:0.8rem 1rem;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);display:flex;justify-content:space-between;align-items:center}.sn-component .sk-menu-panel .sk-menu-panel-header-title{font-weight:bold;font-size:var(--sn-stylekit-font-size-h4)}.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle{margin-top:0.2rem;opacity:0.6}.sn-component .sk-menu-panel .sk-menu-panel-row{padding:1rem 1rem;cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-menu-panel .sk-menu-panel-row:hover{background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);border-color:var(--sn-stylekit-contrast-border-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column{display:flex;justify-content:center;flex-direction:column}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child){padding-left:1.0rem;padding-right:0.15rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch{width:100%}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows{margin-top:1rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow{border:1px solid var(--sn-stylekit-contrast-border-color);margin-top:-1px}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover{background-color:var(--sn-stylekit-background-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left{display:flex}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-h6);font-weight:normal}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-p);font-weight:bold}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel{font-size:var(--sn-stylekit-font-size-h5);margin-top:0.2rem;opacity:0.6}.sn-component .red{color:var(--sn-stylekit-danger-color)}.sn-component .tinted{color:var(--sn-stylekit-info-color)}.sn-component .selectable{user-select:text !important;-ms-user-select:text !important;-moz-user-select:text !important;-webkit-user-select:text !important}.sn-component .sk-h1,.sn-component .sk-h2,.sn-component .sk-h3,.sn-component .sk-h4,.sn-component .sk-h5{margin:0;padding:0;font-weight:normal}.sn-component .sk-h1{font-weight:500;font-size:var(--sn-stylekit-font-size-h1);line-height:1.9rem}.sn-component .sk-h2{font-size:var(--sn-stylekit-font-size-h2);line-height:1.8rem}.sn-component .sk-h3{font-size:var(--sn-stylekit-font-size-h3);line-height:1.7rem}.sn-component .sk-h4{font-size:var(--sn-stylekit-font-size-p);line-height:1.4rem}.sn-component .sk-h5{font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-bold{font-weight:bold}.sn-component .sk-font-small{font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-font-normal{font-size:var(--sn-stylekit-font-size-p)}.sn-component .sk-font-large{font-size:var(--sn-stylekit-font-size-h3)}.sn-component a.sk-a{cursor:pointer;user-select:none}.sn-component a.sk-a.disabled{color:var(--sn-stylekit-neutral-color);opacity:0.6}.sn-component a.sk-a.boxed{border-radius:var(--sn-stylekit-general-border-radius);padding:0.3rem 0.4rem}.sn-component a.sk-a.boxed:hover{text-decoration:none}.sn-component a.sk-a.boxed.neutral{background-color:var(--sn-stylekit-neutral-color);color:var(--sn-stylekit-neutral-contrast-color)}.sn-component a.sk-a.boxed.info{background-color:var(--sn-stylekit-info-color);color:var(--sn-stylekit-info-contrast-color)}.sn-component a.sk-a.boxed.warning{background-color:var(--sn-stylekit-warning-color);color:var(--sn-stylekit-warning-contrast-color)}.sn-component a.sk-a.boxed.danger{background-color:var(--sn-stylekit-danger-color);color:var(--sn-stylekit-danger-contrast-color)}.sn-component a.sk-a.boxed.success{background-color:var(--sn-stylekit-success-color);color:var(--sn-stylekit-success-contrast-color)}.sn-component .wrap{word-wrap:break-word}.sn-component *.sk-base{color:var(--sn-stylekit-foreground-color)}.sn-component *.contrast{color:var(--sn-stylekit-contrast-foreground-color)}.sn-component *.neutral{color:var(--sn-stylekit-neutral-color)}.sn-component *.info{color:var(--sn-stylekit-info-color)}.sn-component *.info-contrast{color:var(--sn-stylekit-info-contrast-color)}.sn-component *.warning{color:var(--sn-stylekit-warning-color)}.sn-component *.danger{color:var(--sn-stylekit-danger-color)}.sn-component *.success{color:var(--sn-stylekit-success-color)}.sn-component *.info-i{color:var(--sn-stylekit-info-color) !important}.sn-component *.warning-i{color:var(--sn-stylekit-warning-color) !important}.sn-component *.danger-i{color:var(--sn-stylekit-danger-color) !important}.sn-component *.success-i{color:var(--sn-stylekit-success-color) !important}.sn-component *.clear{background-color:transparent;border:none}.sn-component .center-text{text-align:center !important;justify-content:center !important}.sn-component p.sk-p{margin:0.5rem 0}.sn-component input.sk-input{box-sizing:border-box;padding:0.7rem 0.8rem;margin:0.30rem 0;border:none;font-size:var(--sn-stylekit-font-size-h3);width:100%;outline:0;resize:none}.sn-component input.sk-input.clear{color:var(--sn-stylekit-foreground-color);background-color:transparent;border:none}.sn-component input.sk-input.no-border{border:none}.sn-component .sk-label,.sn-component .sk-panel-section .sk-panel-section-subtitle{font-weight:bold}.sn-component .sk-label.no-bold,.sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle{font-weight:normal}.sn-component label.sk-label,.sn-component .sk-panel-section label.sk-panel-section-subtitle{margin:0.7rem 0;display:block}.sn-component label.sk-label input[type='checkbox'],.sn-component .sk-panel-section label.sk-panel-section-subtitle input[type='checkbox'],.sn-component input[type='radio']{width:auto;margin-right:0.45rem;vertical-align:middle}.sn-component .sk-horizontal-group>*,.sn-component .sk-input-group>*{display:inline-block;vertical-align:middle}.sn-component .sk-horizontal-group>*:not(:first-child),.sn-component .sk-input-group>*:not(:first-child){margin-left:0.9rem}.sn-component .sk-border-bottom{border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-checkbox-group{padding-top:0.5rem;padding-bottom:0.3rem}.sn-component ::placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component :-ms-input-placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component ::-ms-input-placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component .sk-button-group.stretch{display:flex;width:100%}.sn-component .sk-button-group.stretch .sk-button,.sn-component .sk-button-group.stretch .sk-box{display:block;flex-grow:1;text-align:center}.sn-component .sk-button-group .sk-button,.sn-component .sk-button-group .sk-box{display:inline-block;vertical-align:middle}.sn-component .sk-button-group .sk-button:not(:last-child),.sn-component .sk-button-group .sk-box:not(:last-child){margin-right:5px}.sn-component .sk-button-group .sk-button:not(:last-child).featured,.sn-component .sk-button-group .sk-box:not(:last-child).featured{margin-right:8px}.sn-component .sk-segmented-buttons{display:flex;flex-direction:row}.sn-component .sk-segmented-buttons .sk-button,.sn-component .sk-segmented-buttons .sk-box{border-radius:0;white-space:nowrap;margin:0;margin-left:0 !important;margin-right:0 !important}.sn-component .sk-segmented-buttons .sk-button:not(:last-child),.sn-component .sk-segmented-buttons .sk-box:not(:last-child){border-right:none;border-radius:0}.sn-component .sk-segmented-buttons .sk-button:first-child,.sn-component .sk-segmented-buttons .sk-box:first-child{border-top-left-radius:var(--sn-stylekit-general-border-radius);border-bottom-left-radius:var(--sn-stylekit-general-border-radius);border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.sn-component .sk-segmented-buttons .sk-button:last-child,.sn-component .sk-segmented-buttons .sk-box:last-child{border-top-right-radius:var(--sn-stylekit-general-border-radius);border-bottom-right-radius:var(--sn-stylekit-general-border-radius);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.sn-component .sk-box-group .sk-box{display:inline-block}.sn-component .sk-box-group .sk-box:not(:last-child){margin-right:5px}.sn-component .sk-a.button{text-decoration:none}.sn-component .sk-button,.sn-component .sk-box{display:table;padding:0.5rem 0.7rem;font-size:var(--sn-stylekit-font-size-h5);cursor:pointer;text-align:center;user-select:none}.sn-component .sk-button.no-hover-border:after,.sn-component .no-hover-border.sk-box:after{color:transparent !important}.sn-component .sk-button.wide,.sn-component .wide.sk-box{padding:0.3rem 1.7rem}.sn-component .sk-button>.sk-label,.sn-component .sk-box>.sk-label,.sn-component .sk-panel-section .sk-button>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-box>.sk-panel-section-subtitle{font-weight:bold;display:block;text-align:center}.sn-component .sk-button.big,.sn-component .big.sk-box{font-size:var(--sn-stylekit-font-size-h3);padding:0.7rem 2.5rem}.sn-component .sk-box{padding:2.5rem 1.5rem}.sn-component .sk-button.sk-base,.sn-component .sk-base.sk-box,.sn-component .sk-box.sk-base,.sn-component .sk-circle.sk-base{color:var(--sn-stylekit-foreground-color);position:relative;background-color:var(--sn-stylekit-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-background-color)}.sn-component .sk-button.sk-base *,.sn-component .sk-base.sk-box *,.sn-component .sk-box.sk-base *,.sn-component .sk-circle.sk-base *{position:relative}.sn-component .sk-button.sk-base:before,.sn-component .sk-base.sk-box:before,.sn-component .sk-box.sk-base:before,.sn-component .sk-circle.sk-base:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-base:after,.sn-component .sk-base.sk-box:after,.sn-component .sk-box.sk-base:after,.sn-component .sk-circle.sk-base:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-background-color)}.sn-component .sk-button.sk-base:hover:before,.sn-component .sk-base.sk-box:hover:before,.sn-component .sk-box.sk-base:hover:before,.sn-component .sk-circle.sk-base:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-base.no-bg,.sn-component .sk-base.no-bg.sk-box,.sn-component .sk-box.sk-base.no-bg,.sn-component .sk-circle.sk-base.no-bg{background-color:transparent}.sn-component .sk-button.sk-base.no-bg:before,.sn-component .sk-base.no-bg.sk-box:before,.sn-component .sk-box.sk-base.no-bg:before,.sn-component .sk-circle.sk-base.no-bg:before{content:none}.sn-component .sk-button.sk-base.featured,.sn-component .sk-base.featured.sk-box,.sn-component .sk-box.sk-base.featured,.sn-component .sk-circle.sk-base.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-base.featured:before,.sn-component .sk-base.featured.sk-box:before,.sn-component .sk-box.sk-base.featured:before,.sn-component .sk-circle.sk-base.featured:before{opacity:1.0}.sn-component .sk-button.contrast,.sn-component .contrast.sk-box,.sn-component .sk-box.contrast,.sn-component .sk-circle.contrast{color:var(--sn-stylekit-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-contrast-background-color)}.sn-component .sk-button.contrast *,.sn-component .contrast.sk-box *,.sn-component .sk-box.contrast *,.sn-component .sk-circle.contrast *{position:relative}.sn-component .sk-button.contrast:before,.sn-component .contrast.sk-box:before,.sn-component .sk-box.contrast:before,.sn-component .sk-circle.contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.contrast:after,.sn-component .contrast.sk-box:after,.sn-component .sk-box.contrast:after,.sn-component .sk-circle.contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-contrast-background-color)}.sn-component .sk-button.contrast:hover:before,.sn-component .contrast.sk-box:hover:before,.sn-component .sk-box.contrast:hover:before,.sn-component .sk-circle.contrast:hover:before{filter:brightness(130%)}.sn-component .sk-button.contrast.no-bg,.sn-component .contrast.no-bg.sk-box,.sn-component .sk-box.contrast.no-bg,.sn-component .sk-circle.contrast.no-bg{background-color:transparent}.sn-component .sk-button.contrast.no-bg:before,.sn-component .contrast.no-bg.sk-box:before,.sn-component .sk-box.contrast.no-bg:before,.sn-component .sk-circle.contrast.no-bg:before{content:none}.sn-component .sk-button.contrast.featured,.sn-component .contrast.featured.sk-box,.sn-component .sk-box.contrast.featured,.sn-component .sk-circle.contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.contrast.featured:before,.sn-component .contrast.featured.sk-box:before,.sn-component .sk-box.contrast.featured:before,.sn-component .sk-circle.contrast.featured:before{opacity:1.0}.sn-component .sk-button.sk-secondary,.sn-component .sk-secondary.sk-box,.sn-component .sk-box.sk-secondary,.sn-component .sk-circle.sk-secondary{color:var(--sn-stylekit-secondary-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-background-color)}.sn-component .sk-button.sk-secondary *,.sn-component .sk-secondary.sk-box *,.sn-component .sk-box.sk-secondary *,.sn-component .sk-circle.sk-secondary *{position:relative}.sn-component .sk-button.sk-secondary:before,.sn-component .sk-secondary.sk-box:before,.sn-component .sk-box.sk-secondary:before,.sn-component .sk-circle.sk-secondary:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-secondary:after,.sn-component .sk-secondary.sk-box:after,.sn-component .sk-box.sk-secondary:after,.sn-component .sk-circle.sk-secondary:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-secondary-background-color)}.sn-component .sk-button.sk-secondary:hover:before,.sn-component .sk-secondary.sk-box:hover:before,.sn-component .sk-box.sk-secondary:hover:before,.sn-component .sk-circle.sk-secondary:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-secondary.no-bg,.sn-component .sk-secondary.no-bg.sk-box,.sn-component .sk-box.sk-secondary.no-bg,.sn-component .sk-circle.sk-secondary.no-bg{background-color:transparent}.sn-component .sk-button.sk-secondary.no-bg:before,.sn-component .sk-secondary.no-bg.sk-box:before,.sn-component .sk-box.sk-secondary.no-bg:before,.sn-component .sk-circle.sk-secondary.no-bg:before{content:none}.sn-component .sk-button.sk-secondary.featured,.sn-component .sk-secondary.featured.sk-box,.sn-component .sk-box.sk-secondary.featured,.sn-component .sk-circle.sk-secondary.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-secondary.featured:before,.sn-component .sk-secondary.featured.sk-box:before,.sn-component .sk-box.sk-secondary.featured:before,.sn-component .sk-circle.sk-secondary.featured:before{opacity:1.0}.sn-component .sk-button.sk-secondary-contrast,.sn-component .sk-secondary-contrast.sk-box,.sn-component .sk-box.sk-secondary-contrast,.sn-component .sk-circle.sk-secondary-contrast{color:var(--sn-stylekit-secondary-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-contrast-background-color)}.sn-component .sk-button.sk-secondary-contrast *,.sn-component .sk-secondary-contrast.sk-box *,.sn-component .sk-box.sk-secondary-contrast *,.sn-component .sk-circle.sk-secondary-contrast *{position:relative}.sn-component .sk-button.sk-secondary-contrast:before,.sn-component .sk-secondary-contrast.sk-box:before,.sn-component .sk-box.sk-secondary-contrast:before,.sn-component .sk-circle.sk-secondary-contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-secondary-contrast:after,.sn-component .sk-secondary-contrast.sk-box:after,.sn-component .sk-box.sk-secondary-contrast:after,.sn-component .sk-circle.sk-secondary-contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-secondary-contrast-background-color)}.sn-component .sk-button.sk-secondary-contrast:hover:before,.sn-component .sk-secondary-contrast.sk-box:hover:before,.sn-component .sk-box.sk-secondary-contrast:hover:before,.sn-component .sk-circle.sk-secondary-contrast:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-secondary-contrast.no-bg,.sn-component .sk-secondary-contrast.no-bg.sk-box,.sn-component .sk-box.sk-secondary-contrast.no-bg,.sn-component .sk-circle.sk-secondary-contrast.no-bg{background-color:transparent}.sn-component .sk-button.sk-secondary-contrast.no-bg:before,.sn-component .sk-secondary-contrast.no-bg.sk-box:before,.sn-component .sk-box.sk-secondary-contrast.no-bg:before,.sn-component .sk-circle.sk-secondary-contrast.no-bg:before{content:none}.sn-component .sk-button.sk-secondary-contrast.featured,.sn-component .sk-secondary-contrast.featured.sk-box,.sn-component .sk-box.sk-secondary-contrast.featured,.sn-component .sk-circle.sk-secondary-contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-secondary-contrast.featured:before,.sn-component .sk-secondary-contrast.featured.sk-box:before,.sn-component .sk-box.sk-secondary-contrast.featured:before,.sn-component .sk-circle.sk-secondary-contrast.featured:before{opacity:1.0}.sn-component .sk-button.neutral,.sn-component .neutral.sk-box,.sn-component .sk-box.neutral,.sn-component .sk-circle.neutral{color:var(--sn-stylekit-neutral-contrast-color);position:relative;background-color:var(--sn-stylekit-neutral-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-neutral-color)}.sn-component .sk-button.neutral *,.sn-component .neutral.sk-box *,.sn-component .sk-box.neutral *,.sn-component .sk-circle.neutral *{position:relative}.sn-component .sk-button.neutral:before,.sn-component .neutral.sk-box:before,.sn-component .sk-box.neutral:before,.sn-component .sk-circle.neutral:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-neutral-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.neutral:after,.sn-component .neutral.sk-box:after,.sn-component .sk-box.neutral:after,.sn-component .sk-circle.neutral:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-neutral-color)}.sn-component .sk-button.neutral:hover:before,.sn-component .neutral.sk-box:hover:before,.sn-component .sk-box.neutral:hover:before,.sn-component .sk-circle.neutral:hover:before{filter:brightness(130%)}.sn-component .sk-button.neutral.no-bg,.sn-component .neutral.no-bg.sk-box,.sn-component .sk-box.neutral.no-bg,.sn-component .sk-circle.neutral.no-bg{background-color:transparent}.sn-component .sk-button.neutral.no-bg:before,.sn-component .neutral.no-bg.sk-box:before,.sn-component .sk-box.neutral.no-bg:before,.sn-component .sk-circle.neutral.no-bg:before{content:none}.sn-component .sk-button.neutral.featured,.sn-component .neutral.featured.sk-box,.sn-component .sk-box.neutral.featured,.sn-component .sk-circle.neutral.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.neutral.featured:before,.sn-component .neutral.featured.sk-box:before,.sn-component .sk-box.neutral.featured:before,.sn-component .sk-circle.neutral.featured:before{opacity:1.0}.sn-component .sk-button.info,.sn-component .info.sk-box,.sn-component .sk-box.info,.sn-component .sk-circle.info{color:var(--sn-stylekit-info-contrast-color);position:relative;background-color:var(--sn-stylekit-info-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-info-color)}.sn-component .sk-button.info *,.sn-component .info.sk-box *,.sn-component .sk-box.info *,.sn-component .sk-circle.info *{position:relative}.sn-component .sk-button.info:before,.sn-component .info.sk-box:before,.sn-component .sk-box.info:before,.sn-component .sk-circle.info:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-info-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.info:after,.sn-component .info.sk-box:after,.sn-component .sk-box.info:after,.sn-component .sk-circle.info:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-info-color)}.sn-component .sk-button.info:hover:before,.sn-component .info.sk-box:hover:before,.sn-component .sk-box.info:hover:before,.sn-component .sk-circle.info:hover:before{filter:brightness(130%)}.sn-component .sk-button.info.no-bg,.sn-component .info.no-bg.sk-box,.sn-component .sk-box.info.no-bg,.sn-component .sk-circle.info.no-bg{background-color:transparent}.sn-component .sk-button.info.no-bg:before,.sn-component .info.no-bg.sk-box:before,.sn-component .sk-box.info.no-bg:before,.sn-component .sk-circle.info.no-bg:before{content:none}.sn-component .sk-button.info.featured,.sn-component .info.featured.sk-box,.sn-component .sk-box.info.featured,.sn-component .sk-circle.info.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.info.featured:before,.sn-component .info.featured.sk-box:before,.sn-component .sk-box.info.featured:before,.sn-component .sk-circle.info.featured:before{opacity:1.0}.sn-component .sk-button.warning,.sn-component .warning.sk-box,.sn-component .sk-box.warning,.sn-component .sk-circle.warning{color:var(--sn-stylekit-warning-contrast-color);position:relative;background-color:var(--sn-stylekit-warning-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-warning-color)}.sn-component .sk-button.warning *,.sn-component .warning.sk-box *,.sn-component .sk-box.warning *,.sn-component .sk-circle.warning *{position:relative}.sn-component .sk-button.warning:before,.sn-component .warning.sk-box:before,.sn-component .sk-box.warning:before,.sn-component .sk-circle.warning:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-warning-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.warning:after,.sn-component .warning.sk-box:after,.sn-component .sk-box.warning:after,.sn-component .sk-circle.warning:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-warning-color)}.sn-component .sk-button.warning:hover:before,.sn-component .warning.sk-box:hover:before,.sn-component .sk-box.warning:hover:before,.sn-component .sk-circle.warning:hover:before{filter:brightness(130%)}.sn-component .sk-button.warning.no-bg,.sn-component .warning.no-bg.sk-box,.sn-component .sk-box.warning.no-bg,.sn-component .sk-circle.warning.no-bg{background-color:transparent}.sn-component .sk-button.warning.no-bg:before,.sn-component .warning.no-bg.sk-box:before,.sn-component .sk-box.warning.no-bg:before,.sn-component .sk-circle.warning.no-bg:before{content:none}.sn-component .sk-button.warning.featured,.sn-component .warning.featured.sk-box,.sn-component .sk-box.warning.featured,.sn-component .sk-circle.warning.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.warning.featured:before,.sn-component .warning.featured.sk-box:before,.sn-component .sk-box.warning.featured:before,.sn-component .sk-circle.warning.featured:before{opacity:1.0}.sn-component .sk-button.danger,.sn-component .danger.sk-box,.sn-component .sk-box.danger,.sn-component .sk-circle.danger{color:var(--sn-stylekit-danger-contrast-color);position:relative;background-color:var(--sn-stylekit-danger-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-danger-color)}.sn-component .sk-button.danger *,.sn-component .danger.sk-box *,.sn-component .sk-box.danger *,.sn-component .sk-circle.danger *{position:relative}.sn-component .sk-button.danger:before,.sn-component .danger.sk-box:before,.sn-component .sk-box.danger:before,.sn-component .sk-circle.danger:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-danger-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.danger:after,.sn-component .danger.sk-box:after,.sn-component .sk-box.danger:after,.sn-component .sk-circle.danger:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-danger-color)}.sn-component .sk-button.danger:hover:before,.sn-component .danger.sk-box:hover:before,.sn-component .sk-box.danger:hover:before,.sn-component .sk-circle.danger:hover:before{filter:brightness(130%)}.sn-component .sk-button.danger.no-bg,.sn-component .danger.no-bg.sk-box,.sn-component .sk-box.danger.no-bg,.sn-component .sk-circle.danger.no-bg{background-color:transparent}.sn-component .sk-button.danger.no-bg:before,.sn-component .danger.no-bg.sk-box:before,.sn-component .sk-box.danger.no-bg:before,.sn-component .sk-circle.danger.no-bg:before{content:none}.sn-component .sk-button.danger.featured,.sn-component .danger.featured.sk-box,.sn-component .sk-box.danger.featured,.sn-component .sk-circle.danger.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.danger.featured:before,.sn-component .danger.featured.sk-box:before,.sn-component .sk-box.danger.featured:before,.sn-component .sk-circle.danger.featured:before{opacity:1.0}.sn-component .sk-button.success,.sn-component .success.sk-box,.sn-component .sk-box.success,.sn-component .sk-circle.success{color:var(--sn-stylekit-success-contrast-color);position:relative;background-color:var(--sn-stylekit-success-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-success-color)}.sn-component .sk-button.success *,.sn-component .success.sk-box *,.sn-component .sk-box.success *,.sn-component .sk-circle.success *{position:relative}.sn-component .sk-button.success:before,.sn-component .success.sk-box:before,.sn-component .sk-box.success:before,.sn-component .sk-circle.success:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-success-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.success:after,.sn-component .success.sk-box:after,.sn-component .sk-box.success:after,.sn-component .sk-circle.success:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-success-color)}.sn-component .sk-button.success:hover:before,.sn-component .success.sk-box:hover:before,.sn-component .sk-box.success:hover:before,.sn-component .sk-circle.success:hover:before{filter:brightness(130%)}.sn-component .sk-button.success.no-bg,.sn-component .success.no-bg.sk-box,.sn-component .sk-box.success.no-bg,.sn-component .sk-circle.success.no-bg{background-color:transparent}.sn-component .sk-button.success.no-bg:before,.sn-component .success.no-bg.sk-box:before,.sn-component .sk-box.success.no-bg:before,.sn-component .sk-circle.success.no-bg:before{content:none}.sn-component .sk-button.success.featured,.sn-component .success.featured.sk-box,.sn-component .sk-box.success.featured,.sn-component .sk-circle.success.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.success.featured:before,.sn-component .success.featured.sk-box:before,.sn-component .sk-box.success.featured:before,.sn-component .sk-circle.success.featured:before{opacity:1.0}.sn-component .sk-notification.contrast,.sn-component .sk-input.contrast{color:var(--sn-stylekit-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-contrast-border-color);border:1px solid var(--sn-stylekit-contrast-border-color)}.sn-component .sk-notification.contrast *,.sn-component .sk-input.contrast *{position:relative}.sn-component .sk-notification.contrast:before,.sn-component .sk-input.contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.contrast:after,.sn-component .sk-input.contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-contrast-border-color);border-color:var(--sn-stylekit-contrast-border-color)}.sn-component .sk-notification.contrast.no-bg,.sn-component .sk-input.contrast.no-bg{background-color:transparent}.sn-component .sk-notification.contrast.no-bg:before,.sn-component .sk-input.contrast.no-bg:before{content:none}.sn-component .sk-notification.contrast.featured,.sn-component .sk-input.contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.contrast.featured:before,.sn-component .sk-input.contrast.featured:before{opacity:1.0}.sn-component .sk-notification.sk-secondary,.sn-component .sk-input.sk-secondary{color:var(--sn-stylekit-secondary-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-border-color);border:1px solid var(--sn-stylekit-secondary-border-color)}.sn-component .sk-notification.sk-secondary *,.sn-component .sk-input.sk-secondary *{position:relative}.sn-component .sk-notification.sk-secondary:before,.sn-component .sk-input.sk-secondary:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-secondary:after,.sn-component .sk-input.sk-secondary:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-secondary-border-color);border-color:var(--sn-stylekit-secondary-border-color)}.sn-component .sk-notification.sk-secondary.no-bg,.sn-component .sk-input.sk-secondary.no-bg{background-color:transparent}.sn-component .sk-notification.sk-secondary.no-bg:before,.sn-component .sk-input.sk-secondary.no-bg:before{content:none}.sn-component .sk-notification.sk-secondary.featured,.sn-component .sk-input.sk-secondary.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-secondary.featured:before,.sn-component .sk-input.sk-secondary.featured:before{opacity:1.0}.sn-component .sk-notification.sk-secondary-contrast,.sn-component .sk-input.sk-secondary-contrast{color:var(--sn-stylekit-secondary-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-contrast-border-color);border:1px solid var(--sn-stylekit-secondary-contrast-border-color)}.sn-component .sk-notification.sk-secondary-contrast *,.sn-component .sk-input.sk-secondary-contrast *{position:relative}.sn-component .sk-notification.sk-secondary-contrast:before,.sn-component .sk-input.sk-secondary-contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-secondary-contrast:after,.sn-component .sk-input.sk-secondary-contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-secondary-contrast-border-color);border-color:var(--sn-stylekit-secondary-contrast-border-color)}.sn-component .sk-notification.sk-secondary-contrast.no-bg,.sn-component .sk-input.sk-secondary-contrast.no-bg{background-color:transparent}.sn-component .sk-notification.sk-secondary-contrast.no-bg:before,.sn-component .sk-input.sk-secondary-contrast.no-bg:before{content:none}.sn-component .sk-notification.sk-secondary-contrast.featured,.sn-component .sk-input.sk-secondary-contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-secondary-contrast.featured:before,.sn-component .sk-input.sk-secondary-contrast.featured:before{opacity:1.0}.sn-component .sk-notification.sk-base,.sn-component .sk-input.sk-base{color:var(--sn-stylekit-foreground-color);position:relative;background-color:var(--sn-stylekit-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-border-color);border:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-notification.sk-base *,.sn-component .sk-input.sk-base *{position:relative}.sn-component .sk-notification.sk-base:before,.sn-component .sk-input.sk-base:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-base:after,.sn-component .sk-input.sk-base:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-border-color);border-color:var(--sn-stylekit-border-color)}.sn-component .sk-notification.sk-base.no-bg,.sn-component .sk-input.sk-base.no-bg{background-color:transparent}.sn-component .sk-notification.sk-base.no-bg:before,.sn-component .sk-input.sk-base.no-bg:before{content:none}.sn-component .sk-notification.sk-base.featured,.sn-component .sk-input.sk-base.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-base.featured:before,.sn-component .sk-input.sk-base.featured:before{opacity:1.0}.sn-component .sk-notification.neutral,.sn-component .sk-input.neutral{color:var(--sn-stylekit-neutral-contrast-color);position:relative;background-color:var(--sn-stylekit-neutral-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-neutral-color)}.sn-component .sk-notification.neutral *,.sn-component .sk-input.neutral *{position:relative}.sn-component .sk-notification.neutral:before,.sn-component .sk-input.neutral:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-neutral-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.neutral:after,.sn-component .sk-input.neutral:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-neutral-color)}.sn-component .sk-notification.neutral.no-bg,.sn-component .sk-input.neutral.no-bg{background-color:transparent}.sn-component .sk-notification.neutral.no-bg:before,.sn-component .sk-input.neutral.no-bg:before{content:none}.sn-component .sk-notification.neutral.featured,.sn-component .sk-input.neutral.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.neutral.featured:before,.sn-component .sk-input.neutral.featured:before{opacity:1.0}.sn-component .sk-notification.info,.sn-component .sk-input.info{color:var(--sn-stylekit-info-contrast-color);position:relative;background-color:var(--sn-stylekit-info-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-info-color)}.sn-component .sk-notification.info *,.sn-component .sk-input.info *{position:relative}.sn-component .sk-notification.info:before,.sn-component .sk-input.info:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-info-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.info:after,.sn-component .sk-input.info:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-info-color)}.sn-component .sk-notification.info.no-bg,.sn-component .sk-input.info.no-bg{background-color:transparent}.sn-component .sk-notification.info.no-bg:before,.sn-component .sk-input.info.no-bg:before{content:none}.sn-component .sk-notification.info.featured,.sn-component .sk-input.info.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.info.featured:before,.sn-component .sk-input.info.featured:before{opacity:1.0}.sn-component .sk-notification.warning,.sn-component .sk-input.warning{color:var(--sn-stylekit-warning-contrast-color);position:relative;background-color:var(--sn-stylekit-warning-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-warning-color)}.sn-component .sk-notification.warning *,.sn-component .sk-input.warning *{position:relative}.sn-component .sk-notification.warning:before,.sn-component .sk-input.warning:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-warning-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.warning:after,.sn-component .sk-input.warning:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-warning-color)}.sn-component .sk-notification.warning.no-bg,.sn-component .sk-input.warning.no-bg{background-color:transparent}.sn-component .sk-notification.warning.no-bg:before,.sn-component .sk-input.warning.no-bg:before{content:none}.sn-component .sk-notification.warning.featured,.sn-component .sk-input.warning.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.warning.featured:before,.sn-component .sk-input.warning.featured:before{opacity:1.0}.sn-component .sk-notification.danger,.sn-component .sk-input.danger{color:var(--sn-stylekit-danger-contrast-color);position:relative;background-color:var(--sn-stylekit-danger-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-danger-color)}.sn-component .sk-notification.danger *,.sn-component .sk-input.danger *{position:relative}.sn-component .sk-notification.danger:before,.sn-component .sk-input.danger:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-danger-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.danger:after,.sn-component .sk-input.danger:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-danger-color)}.sn-component .sk-notification.danger.no-bg,.sn-component .sk-input.danger.no-bg{background-color:transparent}.sn-component .sk-notification.danger.no-bg:before,.sn-component .sk-input.danger.no-bg:before{content:none}.sn-component .sk-notification.danger.featured,.sn-component .sk-input.danger.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.danger.featured:before,.sn-component .sk-input.danger.featured:before{opacity:1.0}.sn-component .sk-notification.success,.sn-component .sk-input.success{color:var(--sn-stylekit-success-contrast-color);position:relative;background-color:var(--sn-stylekit-success-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-success-color)}.sn-component .sk-notification.success *,.sn-component .sk-input.success *{position:relative}.sn-component .sk-notification.success:before,.sn-component .sk-input.success:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-success-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.success:after,.sn-component .sk-input.success:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-success-color)}.sn-component .sk-notification.success.no-bg,.sn-component .sk-input.success.no-bg{background-color:transparent}.sn-component .sk-notification.success.no-bg:before,.sn-component .sk-input.success.no-bg:before{content:none}.sn-component .sk-notification.success.featured,.sn-component .sk-input.success.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.success.featured:before,.sn-component .sk-input.success.featured:before{opacity:1.0}.sn-component .sk-notification{padding:1.1rem 1rem;margin:1.4rem 0;text-align:left;cursor:default}.sn-component .sk-notification.one-line{padding:0rem 0.4rem}.sn-component .sk-notification.stretch{width:100%}.sn-component .sk-notification.dashed{border-style:dashed;border-width:2px}.sn-component .sk-notification.dashed:after{box-shadow:none}.sn-component .sk-notification .sk-notification-title{font-size:var(--sn-stylekit-font-size-h1);font-weight:bold;line-height:1.9rem}.sn-component .sk-notification .sk-notification-text{line-height:1.5rem;font-size:var(--sn-stylekit-font-size-p);text-align:left;font-weight:normal}.sn-component .sk-circle{border:1px solid;cursor:pointer;border-color:var(--sn-stylekit-contrast-foreground-color);background-color:var(--sn-stylekit-contrast-background-color);padding:0;border-radius:50% !important;flex-shrink:0}.sn-component .sk-circle:before{border-radius:50% !important}.sn-component .sk-circle:after{border-radius:50% !important}.sn-component .sk-circle.small{width:11px;height:11px}.sn-component .sk-spinner{border:1px solid var(--sn-stylekit-neutral-color);border-radius:50%;animation:rotate 0.8s infinite linear;border-right-color:transparent}.sn-component .sk-spinner.small{width:12px;height:12px}.sn-component .sk-spinner.info-contrast{border-color:var(--sn-stylekit-info-contrast-color);border-right-color:transparent}.sn-component .sk-spinner.info{border-color:var(--sn-stylekit-info-color);border-right-color:transparent}.sn-component .sk-spinner.warning{border-color:var(--sn-stylekit-warning-color);border-right-color:transparent}.sn-component .sk-spinner.danger{border-color:var(--sn-stylekit-danger-color);border-right-color:transparent}.sn-component .sk-spinner.success{border-color:var(--sn-stylekit-success-color);border-right-color:transparent}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.sn-component .sk-app-bar{display:flex;width:100%;height:2rem;padding:0.0rem 0.8rem;background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);justify-content:space-between;align-items:center;border:1px solid var(--sn-stylekit-contrast-border-color);user-select:none}.sn-component .sk-app-bar.no-edges{border-left:0;border-right:0}.sn-component .sk-app-bar.no-bottom-edge{border-bottom:0}.sn-component .sk-app-bar .left,.sn-component .sk-app-bar .right{display:flex;height:100%}.sn-component .sk-app-bar .sk-app-bar-item{flex-grow:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child){margin-left:1rem}.sn-component .sk-app-bar .sk-app-bar-item.border{border-left:1px solid var(--sn-stylekit-contrast-border-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column{height:100%;display:flex;align-items:center}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column:not(:first-child){margin-left:0.5rem}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column.underline{border-bottom:2px solid var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item.no-pointer{cursor:default}.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-sublabel:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-sublabel:not(.subtle){color:var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-label,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-panel-section-subtitle,.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-label,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle{font-weight:bold;font-size:var(--sn-stylekit-font-size-h5);white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item>.sk-sublabel,.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-sublabel{font-size:var(--sn-stylekit-font-size-h5);font-weight:normal;white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item .subtle{font-weight:normal;opacity:0.6}.sn-component .sk-panel-table{display:flex;flex-wrap:wrap;padding-left:1px;padding-top:1px}.sn-component .sk-panel-table .sk-panel-table-item{flex:45%;flex-flow:wrap;border:1px solid var(--sn-stylekit-border-color);padding:1rem;margin-left:-1px;margin-top:-1px;display:flex;flex-direction:column;justify-content:space-between}.sn-component .sk-panel-table .sk-panel-table-item img{max-width:100%;margin-bottom:1rem}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content{display:flex;flex-direction:row}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column{align-items:center}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch{width:100%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child){padding-left:0.75rem}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter{flex-basis:25%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters{flex-basis:75%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer{margin-top:1.25rem}.sn-component .sk-panel-table .sk-panel-table-item.no-border{border:none}.sn-component .sk-modal{position:fixed;margin-left:auto;margin-right:auto;left:0;right:0;top:0;bottom:0;z-index:10000;width:100vw;height:100vh;background-color:transparent;color:var(--sn-stylekit-contrast-foreground-color);display:flex;align-items:center;justify-content:center}.sn-component .sk-modal .sn-component{height:100%}.sn-component .sk-modal .sn-component .sk-panel{height:100%}.sn-component .sk-modal.auto-height>.sk-modal-content{height:auto !important}.sn-component .sk-modal.large>.sk-modal-content{width:900px;height:600px}.sn-component .sk-modal.medium>.sk-modal-content{width:700px;height:500px}.sn-component .sk-modal.small>.sk-modal-content{width:700px;height:344px}.sn-component .sk-modal .sk-modal-background{position:absolute;z-index:-1;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:0.7}.sn-component .sk-modal>.sk-modal-content{overflow-y:auto;width:auto;padding:0;padding-bottom:0;min-width:300px;-webkit-box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19);-moz-box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19);box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19)}.sn-component.no-select{user-select:none}input,textarea,[contenteditable]{caret-color:var(--sn-stylekit-editor-foreground-color)}.windows-web,.windows-desktop,.linux-web,.linux-desktop{scrollbar-width:thin}.windows-web ::-webkit-scrollbar,.windows-desktop ::-webkit-scrollbar,.linux-web ::-webkit-scrollbar,.linux-desktop ::-webkit-scrollbar{width:17px;height:18px;border-left:0.5px solid var(--sn-stylekit-scrollbar-track-border-color-color)}.windows-web ::-webkit-scrollbar-thumb,.windows-desktop ::-webkit-scrollbar-thumb,.linux-web ::-webkit-scrollbar-thumb,.linux-desktop ::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;-webkit-border-radius:10px;background-color:var(--sn-stylekit-scrollbar-thumb-color);-webkit-box-shadow:inset -1px -1px 0px rgba(0,0,0,0.05),inset 1px 1px 0px rgba(0,0,0,0.05)}.windows-web ::-webkit-scrollbar-button,.windows-desktop ::-webkit-scrollbar-button,.linux-web ::-webkit-scrollbar-button,.linux-desktop ::-webkit-scrollbar-button{width:0;height:0;display:none}.windows-web ::-webkit-scrollbar-corner,.windows-desktop ::-webkit-scrollbar-corner,.linux-web ::-webkit-scrollbar-corner,.linux-desktop ::-webkit-scrollbar-corner{background-color:transparent} +@charset "UTF-8"; +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ +/* Document + ========================================================================== */ +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ +} + +/* Sections + ========================================================================== */ +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + text-decoration: underline dotted; + /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* Interactive + ========================================================================== */ +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +:root { + --sn-stylekit-base-font-size: 0.8125rem; + --sn-stylekit-font-size-p: 0.8125rem; + --sn-stylekit-font-size-editor: 0.983125rem; + --sn-stylekit-font-size-h6: 0.65rem; + --sn-stylekit-font-size-h5: 0.73125rem; + --sn-stylekit-font-size-h4: 0.8125rem; + --sn-stylekit-font-size-h3: 0.89375rem; + --sn-stylekit-font-size-h2: 0.975rem; + --sn-stylekit-font-size-h1: 1.05625rem; + --sn-stylekit-white: #ffffff; + --sn-stylekit-black: #19191c; + --sn-stylekit-grey-1: #72767e; + --sn-stylekit-grey-2: #bbbec4; + --sn-stylekit-grey-3: #dfe1e4; + --sn-stylekit-grey-4: #eeeff1; + --sn-stylekit-grey-5: #f4f5f7; + --sn-stylekit-grey-6: #e5e5e5; + --sn-stylekit-grey-super-light: #f9f9f9; + --sn-stylekit-dark-red: #cc2128; + --sn-stylekit-neutral-color: #989898; + --sn-stylekit-neutral-contrast-color: #ffffff; + --sn-stylekit-info-color: #086dd6; + --sn-stylekit-info-color-darkened: #065cb5; + --sn-stylekit-info-contrast-color: #ffffff; + --sn-stylekit-info-backdrop-color: #2b6fcf0f; + --sn-stylekit-success-color: #2b9612; + --sn-stylekit-success-contrast-color: #ffffff; + --sn-stylekit-warning-color: #f6a200; + --sn-stylekit-warning-contrast-color: #ffffff; + --sn-stylekit-danger-color: #f80324; + --sn-stylekit-danger-contrast-color: #ffffff; + --sn-stylekit-shadow-color: #c8c8c8; + --sn-stylekit-background-color: #ffffff; + --sn-stylekit-border-color: #dfe1e4; + --sn-stylekit-foreground-color: #000000; + --sn-stylekit-contrast-background-color: #f6f6f6; + --sn-stylekit-contrast-foreground-color: #2e2e2e; + --sn-stylekit-contrast-border-color: #e3e3e3; + --sn-stylekit-secondary-background-color: #f6f6f6; + --sn-stylekit-secondary-foreground-color: #2e2e2e; + --sn-stylekit-secondary-border-color: #e3e3e3; + --sn-stylekit-secondary-contrast-background-color: #e3e3e3; + --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e; + --sn-stylekit-secondary-contrast-border-color: #a2a2a2; + --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); + --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); + --sn-stylekit-paragraph-text-color: #454545; + --sn-stylekit-input-placeholder-color: #a8a8a8; + --sn-stylekit-input-border-color: #e3e3e3; + --sn-stylekit-scrollbar-thumb-color: #dfdfdf; + --sn-stylekit-scrollbar-track-border-color: #e7e7e7; + --sn-stylekit-menu-border: none; + --sn-stylekit-general-border-radius: 2px; + --sn-stylekit-list-item-highlight-color: var(--sn-stylekit-grey-5); + --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体'; + --sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', + Menlo, 'Ubuntu Mono', 'Courier New', monospace; + --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', + 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif; + --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font); + --sn-stylekit-theme-type: light; + --sn-stylekit-theme-name: sn-light; + --sn-stylekit-accessory-tint-color-1: #086dd6; + --sn-stylekit-accessory-tint-color-2: #ea6595; + --sn-stylekit-accessory-tint-color-3: #ebad00; + --sn-stylekit-accessory-tint-color-4: #7049cf; + --sn-stylekit-accessory-tint-color-5: #1aa772; + --sn-stylekit-accessory-tint-color-6: #f28c52; +} + +.sn-component { + /** + * Do not use these rules without explicitly handling focus in a different + * way, otherwise keyboard focus will break. + */ + /** + * A button that is just an icon. Separated from .sn-button because there + * is almost no style overlap. + */ + font-family: var(--sn-stylekit-sans-serif-font); + -webkit-font-smoothing: antialiased; + color: var(--sn-stylekit-foreground-color); +} + +.sn-component .sk-panel { + box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color); + background-color: var(--sn-stylekit-background-color); + border: 1px solid var(--sn-stylekit-border-color); + border-radius: var(--sn-stylekit-general-border-radius); + display: flex; + flex-direction: column; + overflow: auto; + flex-grow: 1; +} + +.sn-component .sk-panel a:hover { + text-decoration: underline; +} + +.sn-component .sk-panel.static { + box-shadow: none; + border: none; + border-radius: 0; +} + +.sn-component .sk-panel .sk-panel-header { + flex-shrink: 0; + /* Don't allow to condense in height */ + display: flex; + justify-content: space-between; + padding: 0.89375rem 1.625rem; + border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + align-items: center; +} + +.sn-component .sk-panel .sk-panel-header .sk-panel-header-title { + font-size: var(--sn-stylekit-font-size-h1); + font-weight: 500; +} + +.sn-component .sk-panel .sk-panel-header .close-button { + font-weight: bold; +} + +.sn-component .sk-panel .sk-footer, +.sn-component .sk-panel .sk-panel-footer { + padding: 0.8125rem 1.625rem; + border-top: 1px solid var(--sn-stylekit-border-color); + box-sizing: border-box; +} + +.sn-component .sk-panel .sk-footer.extra-padding, +.sn-component .sk-panel .sk-panel-footer.extra-padding { + padding: 1.625rem 1.625rem; +} + +.sn-component .sk-panel .sk-footer .left, +.sn-component .sk-panel .sk-panel-footer .left { + text-align: left; + display: block; +} + +.sn-component .sk-panel .sk-footer .right, +.sn-component .sk-panel .sk-panel-footer .right { + text-align: right; + display: block; +} + +.sn-component .sk-panel .sk-panel-content { + padding: 1.3rem 1.625rem; + padding-bottom: 0; + flex-grow: 1; + overflow: scroll; + height: 100%; + overflow-y: auto !important; + overflow-x: auto !important; +} + +.sn-component .sk-panel .sk-panel-content .sk-p, +.sn-component .sk-panel .sk-panel-content .sk-li { + color: var(--sn-stylekit-paragraph-text-color); + line-height: 1.3; +} + +.sn-component .sk-panel-section { + padding-bottom: 1.3rem; + display: flex; + flex-direction: column; +} + +.sn-component .sk-panel-section.sk-panel-hero { + text-align: center; +} + +.sn-component .sk-panel-section .sk-p:last-child { + margin-bottom: 0; +} + +.sn-component .sk-panel-section:not(:last-child) { + margin-bottom: 1.21875rem; + border-bottom: 1px solid var(--sn-stylekit-border-color); +} + +.sn-component .sk-panel-section:not(:last-child).no-border { + border-bottom: none; +} + +.sn-component .sk-panel-section:last-child { + margin-bottom: 0.5rem; +} + +.sn-component .sk-panel-section.no-bottom-pad { + padding-bottom: 0; + margin-bottom: 0; +} + +.sn-component .sk-panel-section .sk-panel-section-title { + margin-bottom: 0.40625rem; + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-panel-section .sk-panel-section-outer-title { + border-bottom: 1px solid var(--sn-stylekit-border-color); + padding-bottom: 0.73125rem; + margin-top: 1.70625rem; + margin-bottom: 15px; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-panel-section .sk-panel-section-subtitle { + font-size: var(--sn-stylekit-font-size-h5); + margin-bottom: 2px; +} + +.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle { + font-weight: normal; + opacity: 0.6; +} + +.sn-component .sk-panel-section .text-content .sk-p { + margin-bottom: 0.8175rem; +} + +.sn-component .sk-panel-section .text-content p:first-child { + margin-top: 0.24375rem; +} + +.sn-component .sk-panel-row { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 0.325rem; +} + +.sn-component .sk-panel-row.centered { + justify-content: center; +} + +.sn-component .sk-panel-row.justify-right { + justify-content: flex-end; +} + +.sn-component .sk-panel-row.justify-left { + justify-content: flex-start; +} + +.sn-component .sk-panel-row.align-top { + align-items: flex-start; +} + +.sn-component .sk-panel-row .sk-panel-column.stretch { + width: 100%; +} + +.sn-component .sk-panel-row.default-padding, .sn-component .sk-panel-row:not(:last-child) { + padding-bottom: 0.325rem; +} + +.sn-component .sk-panel-row.condensed { + padding-top: 0.1625rem; + padding-bottom: 0.1625rem; +} + +.sn-component .sk-panel-row .sk-p { + margin: 0; + padding: 0; +} + +.sn-component .vertical-rule { + background-color: var(--sn-stylekit-border-color); + height: 1.21875rem; + width: 1px; +} + +.sn-component .sk-panel-form { + width: 100%; +} + +.sn-component .sk-panel-form.half { + width: 50%; +} + +.sn-component .sk-panel-form .form-submit { + margin-top: 0.121875rem; +} + +.sn-component .right-aligned { + justify-content: flex-end; + text-align: right; +} + +.sn-component .sk-menu-panel { + background-color: var(--sn-stylekit-background-color); + border: 1px solid var(--sn-stylekit-contrast-border-color); + border-radius: var(--sn-stylekit-general-border-radius); + overflow: scroll; + user-select: none; + overflow-y: auto !important; + overflow-x: auto !important; +} + +.sn-component .sk-menu-panel .sk-menu-panel-header { + padding: 0.65rem 0.8125rem; + border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + display: flex; + justify-content: space-between; + align-items: center; +} + +.sn-component .sk-menu-panel .sk-menu-panel-header-title { + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h4); +} + +.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle { + margin-top: 0.1625rem; + opacity: 0.6; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row { + padding: 0.8125rem 0.8125rem; + cursor: pointer; + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: 1px solid var(--sn-stylekit-border-color); +} + +.sn-component .sk-menu-panel .sk-menu-panel-row:hover { + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + border-color: var(--sn-stylekit-contrast-border-color); +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column { + display: flex; + justify-content: center; + flex-direction: column; + /* Nested row */ +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child) { + padding-left: 1rem; + padding-right: 0.121875rem; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch { + width: 100%; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows { + margin-top: 0.8125rem; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row, +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow { + border: 1px solid var(--sn-stylekit-contrast-border-color); + margin-top: -1px; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover, +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover { + background-color: var(--sn-stylekit-background-color); +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left { + display: flex; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle { + font-size: var(--sn-stylekit-font-size-h6); + font-weight: normal; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle { + font-size: var(--sn-stylekit-font-size-p); + font-weight: bold; +} + +.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel { + font-size: var(--sn-stylekit-font-size-h5); + margin-top: 0.1625rem; + opacity: 0.6; +} + +.sn-component .red { + color: var(--sn-stylekit-danger-color); +} + +.sn-component .tinted { + color: var(--sn-stylekit-info-color); +} + +.sn-component .selectable { + user-select: text !important; + -ms-user-select: text !important; + -moz-user-select: text !important; + -webkit-user-select: text !important; +} + +.sn-component .sk-h1, +.sn-component .sk-h2, +.sn-component .sk-h3, +.sn-component .sk-h4, +.sn-component .sk-h5 { + margin: 0; + padding: 0; + font-weight: normal; +} + +.sn-component .sk-h1 { + font-weight: 500; + font-size: var(--sn-stylekit-font-size-h1); + line-height: 1.54375rem; +} + +.sn-component .sk-h2 { + font-size: var(--sn-stylekit-font-size-h2); + line-height: 1.4625rem; +} + +.sn-component .sk-h3 { + font-size: var(--sn-stylekit-font-size-h3); + line-height: 1.38125rem; +} + +.sn-component .sk-h4 { + font-size: var(--sn-stylekit-font-size-p); + line-height: 1.1375rem; +} + +.sn-component .sk-h5 { + font-size: var(--sn-stylekit-font-size-h5); +} + +.sn-component .sk-bold { + font-weight: bold; +} + +.sn-component .sk-font-small { + font-size: var(--sn-stylekit-font-size-h5); +} + +.sn-component .sk-font-normal { + font-size: var(--sn-stylekit-font-size-p); +} + +.sn-component .sk-font-large { + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component a.sk-a { + cursor: pointer; + user-select: none; +} + +.sn-component a.sk-a.disabled { + color: var(--sn-stylekit-neutral-color); + opacity: 0.6; +} + +.sn-component a.sk-a.boxed { + border-radius: var(--sn-stylekit-general-border-radius); + padding: 0.24375rem 0.325rem; +} + +.sn-component a.sk-a.boxed:hover { + text-decoration: none; +} + +.sn-component a.sk-a.boxed.neutral { + background-color: var(--sn-stylekit-neutral-color); + color: var(--sn-stylekit-neutral-contrast-color); +} + +.sn-component a.sk-a.boxed.info { + background-color: var(--sn-stylekit-info-color); + color: var(--sn-stylekit-info-contrast-color); +} + +.sn-component a.sk-a.boxed.warning { + background-color: var(--sn-stylekit-warning-color); + color: var(--sn-stylekit-warning-contrast-color); +} + +.sn-component a.sk-a.boxed.danger { + background-color: var(--sn-stylekit-danger-color); + color: var(--sn-stylekit-danger-contrast-color); +} + +.sn-component a.sk-a.boxed.success { + background-color: var(--sn-stylekit-success-color); + color: var(--sn-stylekit-success-contrast-color); +} + +.sn-component .wrap { + word-wrap: break-word; +} + +.sn-component *.sk-base { + color: var(--sn-stylekit-foreground-color); +} + +.sn-component *.contrast { + color: var(--sn-stylekit-contrast-foreground-color); +} + +.sn-component *.neutral { + color: var(--sn-stylekit-neutral-color); +} + +.sn-component *.info { + color: var(--sn-stylekit-info-color); +} + +.sn-component *.info-contrast { + color: var(--sn-stylekit-info-contrast-color); +} + +.sn-component *.warning { + color: var(--sn-stylekit-warning-color); +} + +.sn-component *.danger { + color: var(--sn-stylekit-danger-color); +} + +.sn-component *.success { + color: var(--sn-stylekit-success-color); +} + +.sn-component *.info-i { + color: var(--sn-stylekit-info-color) !important; +} + +.sn-component *.warning-i { + color: var(--sn-stylekit-warning-color) !important; +} + +.sn-component *.danger-i { + color: var(--sn-stylekit-danger-color) !important; +} + +.sn-component *.success-i { + color: var(--sn-stylekit-success-color) !important; +} + +.sn-component *.clear { + background-color: transparent; + border: none; +} + +.sn-component .center-text { + text-align: center !important; + justify-content: center !important; +} + +.sn-component p.sk-p { + margin: 0.40625rem 0; +} + +.sn-component input.sk-input { + box-sizing: border-box; + padding: 0.56875rem 0.65rem; + margin: 0.24375rem 0; + border: none; + font-size: var(--sn-stylekit-font-size-h3); + width: 100%; + outline: 0; + resize: none; +} + +.sn-component input.sk-input.clear { + color: var(--sn-stylekit-foreground-color); + background-color: transparent; + border: none; +} + +.sn-component input.sk-input.no-border { + border: none; +} + +.sn-component .sk-label, .sn-component .sk-panel-section .sk-panel-section-subtitle { + font-weight: bold; +} + +.sn-component .sk-label.no-bold, .sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle { + font-weight: normal; +} + +.sn-component label.sk-label, .sn-component .sk-panel-section label.sk-panel-section-subtitle { + margin: 0.56875rem 0; + display: block; +} + +.sn-component label.sk-label input[type='checkbox'], .sn-component .sk-panel-section label.sk-panel-section-subtitle input[type='checkbox'], +.sn-component input[type='radio'] { + width: auto; + margin-right: 0.365625rem; + /* Space after checkbox */ + vertical-align: middle; +} + +.sn-component .sk-horizontal-group > *, .sn-component .sk-input-group > * { + display: inline-block; + vertical-align: middle; +} + +.sn-component .sk-horizontal-group > *:not(:first-child), .sn-component .sk-input-group > *:not(:first-child) { + margin-left: 0.73125rem; +} + +.sn-component .sk-border-bottom { + border-bottom: 1px solid var(--sn-stylekit-border-color); +} + +.sn-component .sk-checkbox-group { + padding-top: 0.40625rem; + padding-bottom: 0.24375rem; +} + +.sn-component ::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: var(--sn-stylekit-input-placeholder-color); +} + +.sn-component :-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: var(--sn-stylekit-input-placeholder-color); +} + +.sn-component ::-ms-input-placeholder { + /* Microsoft Edge */ + color: var(--sn-stylekit-input-placeholder-color); +} + +.sn-component .sk-button-group.stretch { + display: flex; + width: 100%; +} + +.sn-component .sk-button-group.stretch .sk-button, .sn-component .sk-button-group.stretch .sk-box { + display: block; + flex-grow: 1; + text-align: center; +} + +.sn-component .sk-button-group .sk-button, .sn-component .sk-button-group .sk-box { + display: inline-block; + vertical-align: middle; +} + +.sn-component .sk-button-group .sk-button:not(:last-child), .sn-component .sk-button-group .sk-box:not(:last-child) { + margin-right: 5px; +} + +.sn-component .sk-button-group .sk-button:not(:last-child).featured, .sn-component .sk-button-group .sk-box:not(:last-child).featured { + margin-right: 8px; +} + +.sn-component .sk-segmented-buttons { + display: flex; + flex-direction: row; +} + +.sn-component .sk-segmented-buttons .sk-button, .sn-component .sk-segmented-buttons .sk-box { + border-radius: 0; + white-space: nowrap; + margin: 0; + margin-left: 0 !important; + margin-right: 0 !important; +} + +.sn-component .sk-segmented-buttons .sk-button:not(:last-child), .sn-component .sk-segmented-buttons .sk-box:not(:last-child) { + border-right: none; + border-radius: 0; +} + +.sn-component .sk-segmented-buttons .sk-button:first-child, .sn-component .sk-segmented-buttons .sk-box:first-child { + border-top-left-radius: var(--sn-stylekit-general-border-radius); + border-bottom-left-radius: var(--sn-stylekit-general-border-radius); + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.sn-component .sk-segmented-buttons .sk-button:last-child, .sn-component .sk-segmented-buttons .sk-box:last-child { + border-top-right-radius: var(--sn-stylekit-general-border-radius); + border-bottom-right-radius: var(--sn-stylekit-general-border-radius); + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.sn-component .sk-box-group .sk-box { + display: inline-block; +} + +.sn-component .sk-box-group .sk-box:not(:last-child) { + margin-right: 5px; +} + +.sn-component .sk-a.button { + text-decoration: none; +} + +.sn-component .sk-button, .sn-component .sk-box { + display: table; + padding: 0.40625rem 0.56875rem; + font-size: var(--sn-stylekit-font-size-h5); + cursor: pointer; + text-align: center; + user-select: none; +} + +.sn-component .sk-button.no-hover-border:after, .sn-component .no-hover-border.sk-box:after { + color: transparent !important; +} + +.sn-component .sk-button.wide, .sn-component .wide.sk-box { + padding: 0.24375rem 1.38125rem; +} + +.sn-component .sk-button > .sk-label, .sn-component .sk-box > .sk-label, .sn-component .sk-panel-section .sk-button > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-box > .sk-panel-section-subtitle { + font-weight: bold; + display: block; + text-align: center; +} + +.sn-component .sk-button.big, .sn-component .big.sk-box { + font-size: var(--sn-stylekit-font-size-h3); + padding: 0.56875rem 2.03125rem; +} + +.sn-component .sk-box { + padding: 2.03125rem 1.21875rem; +} + +.sn-component .sk-button.sk-base, .sn-component .sk-base.sk-box, +.sn-component .sk-box.sk-base, +.sn-component .sk-circle.sk-base { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-foreground-color); + position: relative; + background-color: var(--sn-stylekit-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-background-color); +} + +.sn-component .sk-button.sk-base *, .sn-component .sk-base.sk-box *, +.sn-component .sk-box.sk-base *, +.sn-component .sk-circle.sk-base * { + position: relative; +} + +.sn-component .sk-button.sk-base:before, .sn-component .sk-base.sk-box:before, +.sn-component .sk-box.sk-base:before, +.sn-component .sk-circle.sk-base:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.sk-base:after, .sn-component .sk-base.sk-box:after, +.sn-component .sk-box.sk-base:after, +.sn-component .sk-circle.sk-base:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-background-color); +} + +.sn-component .sk-button.sk-base:hover:before, .sn-component .sk-base.sk-box:hover:before, +.sn-component .sk-box.sk-base:hover:before, +.sn-component .sk-circle.sk-base:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.sk-base.no-bg, .sn-component .sk-base.no-bg.sk-box, +.sn-component .sk-box.sk-base.no-bg, +.sn-component .sk-circle.sk-base.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.sk-base.no-bg:before, .sn-component .sk-base.no-bg.sk-box:before, +.sn-component .sk-box.sk-base.no-bg:before, +.sn-component .sk-circle.sk-base.no-bg:before { + content: none; +} + +.sn-component .sk-button.sk-base.featured, .sn-component .sk-base.featured.sk-box, +.sn-component .sk-box.sk-base.featured, +.sn-component .sk-circle.sk-base.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.sk-base.featured:before, .sn-component .sk-base.featured.sk-box:before, +.sn-component .sk-box.sk-base.featured:before, +.sn-component .sk-circle.sk-base.featured:before { + opacity: 1; +} + +.sn-component .sk-button.contrast, .sn-component .contrast.sk-box, +.sn-component .sk-box.contrast, +.sn-component .sk-circle.contrast { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-contrast-foreground-color); + position: relative; + background-color: var(--sn-stylekit-contrast-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-contrast-background-color); +} + +.sn-component .sk-button.contrast *, .sn-component .contrast.sk-box *, +.sn-component .sk-box.contrast *, +.sn-component .sk-circle.contrast * { + position: relative; +} + +.sn-component .sk-button.contrast:before, .sn-component .contrast.sk-box:before, +.sn-component .sk-box.contrast:before, +.sn-component .sk-circle.contrast:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-contrast-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.contrast:after, .sn-component .contrast.sk-box:after, +.sn-component .sk-box.contrast:after, +.sn-component .sk-circle.contrast:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-contrast-background-color); +} + +.sn-component .sk-button.contrast:hover:before, .sn-component .contrast.sk-box:hover:before, +.sn-component .sk-box.contrast:hover:before, +.sn-component .sk-circle.contrast:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.contrast.no-bg, .sn-component .contrast.no-bg.sk-box, +.sn-component .sk-box.contrast.no-bg, +.sn-component .sk-circle.contrast.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.contrast.no-bg:before, .sn-component .contrast.no-bg.sk-box:before, +.sn-component .sk-box.contrast.no-bg:before, +.sn-component .sk-circle.contrast.no-bg:before { + content: none; +} + +.sn-component .sk-button.contrast.featured, .sn-component .contrast.featured.sk-box, +.sn-component .sk-box.contrast.featured, +.sn-component .sk-circle.contrast.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.contrast.featured:before, .sn-component .contrast.featured.sk-box:before, +.sn-component .sk-box.contrast.featured:before, +.sn-component .sk-circle.contrast.featured:before { + opacity: 1; +} + +.sn-component .sk-button.sk-secondary, .sn-component .sk-secondary.sk-box, +.sn-component .sk-box.sk-secondary, +.sn-component .sk-circle.sk-secondary { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-secondary-foreground-color); + position: relative; + background-color: var(--sn-stylekit-secondary-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-secondary-background-color); +} + +.sn-component .sk-button.sk-secondary *, .sn-component .sk-secondary.sk-box *, +.sn-component .sk-box.sk-secondary *, +.sn-component .sk-circle.sk-secondary * { + position: relative; +} + +.sn-component .sk-button.sk-secondary:before, .sn-component .sk-secondary.sk-box:before, +.sn-component .sk-box.sk-secondary:before, +.sn-component .sk-circle.sk-secondary:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-secondary-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.sk-secondary:after, .sn-component .sk-secondary.sk-box:after, +.sn-component .sk-box.sk-secondary:after, +.sn-component .sk-circle.sk-secondary:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-secondary-background-color); +} + +.sn-component .sk-button.sk-secondary:hover:before, .sn-component .sk-secondary.sk-box:hover:before, +.sn-component .sk-box.sk-secondary:hover:before, +.sn-component .sk-circle.sk-secondary:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.sk-secondary.no-bg, .sn-component .sk-secondary.no-bg.sk-box, +.sn-component .sk-box.sk-secondary.no-bg, +.sn-component .sk-circle.sk-secondary.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.sk-secondary.no-bg:before, .sn-component .sk-secondary.no-bg.sk-box:before, +.sn-component .sk-box.sk-secondary.no-bg:before, +.sn-component .sk-circle.sk-secondary.no-bg:before { + content: none; +} + +.sn-component .sk-button.sk-secondary.featured, .sn-component .sk-secondary.featured.sk-box, +.sn-component .sk-box.sk-secondary.featured, +.sn-component .sk-circle.sk-secondary.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.sk-secondary.featured:before, .sn-component .sk-secondary.featured.sk-box:before, +.sn-component .sk-box.sk-secondary.featured:before, +.sn-component .sk-circle.sk-secondary.featured:before { + opacity: 1; +} + +.sn-component .sk-button.sk-secondary-contrast, .sn-component .sk-secondary-contrast.sk-box, +.sn-component .sk-box.sk-secondary-contrast, +.sn-component .sk-circle.sk-secondary-contrast { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-secondary-contrast-foreground-color); + position: relative; + background-color: var(--sn-stylekit-secondary-contrast-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-secondary-contrast-background-color); +} + +.sn-component .sk-button.sk-secondary-contrast *, .sn-component .sk-secondary-contrast.sk-box *, +.sn-component .sk-box.sk-secondary-contrast *, +.sn-component .sk-circle.sk-secondary-contrast * { + position: relative; +} + +.sn-component .sk-button.sk-secondary-contrast:before, .sn-component .sk-secondary-contrast.sk-box:before, +.sn-component .sk-box.sk-secondary-contrast:before, +.sn-component .sk-circle.sk-secondary-contrast:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-secondary-contrast-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.sk-secondary-contrast:after, .sn-component .sk-secondary-contrast.sk-box:after, +.sn-component .sk-box.sk-secondary-contrast:after, +.sn-component .sk-circle.sk-secondary-contrast:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-secondary-contrast-background-color); +} + +.sn-component .sk-button.sk-secondary-contrast:hover:before, .sn-component .sk-secondary-contrast.sk-box:hover:before, +.sn-component .sk-box.sk-secondary-contrast:hover:before, +.sn-component .sk-circle.sk-secondary-contrast:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.sk-secondary-contrast.no-bg, .sn-component .sk-secondary-contrast.no-bg.sk-box, +.sn-component .sk-box.sk-secondary-contrast.no-bg, +.sn-component .sk-circle.sk-secondary-contrast.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.sk-secondary-contrast.no-bg:before, .sn-component .sk-secondary-contrast.no-bg.sk-box:before, +.sn-component .sk-box.sk-secondary-contrast.no-bg:before, +.sn-component .sk-circle.sk-secondary-contrast.no-bg:before { + content: none; +} + +.sn-component .sk-button.sk-secondary-contrast.featured, .sn-component .sk-secondary-contrast.featured.sk-box, +.sn-component .sk-box.sk-secondary-contrast.featured, +.sn-component .sk-circle.sk-secondary-contrast.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.sk-secondary-contrast.featured:before, .sn-component .sk-secondary-contrast.featured.sk-box:before, +.sn-component .sk-box.sk-secondary-contrast.featured:before, +.sn-component .sk-circle.sk-secondary-contrast.featured:before { + opacity: 1; +} + +.sn-component .sk-button.neutral, .sn-component .neutral.sk-box, +.sn-component .sk-box.neutral, +.sn-component .sk-circle.neutral { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-neutral-contrast-color); + position: relative; + background-color: var(--sn-stylekit-neutral-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-neutral-color); +} + +.sn-component .sk-button.neutral *, .sn-component .neutral.sk-box *, +.sn-component .sk-box.neutral *, +.sn-component .sk-circle.neutral * { + position: relative; +} + +.sn-component .sk-button.neutral:before, .sn-component .neutral.sk-box:before, +.sn-component .sk-box.neutral:before, +.sn-component .sk-circle.neutral:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-neutral-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.neutral:after, .sn-component .neutral.sk-box:after, +.sn-component .sk-box.neutral:after, +.sn-component .sk-circle.neutral:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-neutral-color); +} + +.sn-component .sk-button.neutral:hover:before, .sn-component .neutral.sk-box:hover:before, +.sn-component .sk-box.neutral:hover:before, +.sn-component .sk-circle.neutral:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.neutral.no-bg, .sn-component .neutral.no-bg.sk-box, +.sn-component .sk-box.neutral.no-bg, +.sn-component .sk-circle.neutral.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.neutral.no-bg:before, .sn-component .neutral.no-bg.sk-box:before, +.sn-component .sk-box.neutral.no-bg:before, +.sn-component .sk-circle.neutral.no-bg:before { + content: none; +} + +.sn-component .sk-button.neutral.featured, .sn-component .neutral.featured.sk-box, +.sn-component .sk-box.neutral.featured, +.sn-component .sk-circle.neutral.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.neutral.featured:before, .sn-component .neutral.featured.sk-box:before, +.sn-component .sk-box.neutral.featured:before, +.sn-component .sk-circle.neutral.featured:before { + opacity: 1; +} + +.sn-component .sk-button.info, .sn-component .info.sk-box, +.sn-component .sk-box.info, +.sn-component .sk-circle.info { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-info-contrast-color); + position: relative; + background-color: var(--sn-stylekit-info-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-info-color); +} + +.sn-component .sk-button.info *, .sn-component .info.sk-box *, +.sn-component .sk-box.info *, +.sn-component .sk-circle.info * { + position: relative; +} + +.sn-component .sk-button.info:before, .sn-component .info.sk-box:before, +.sn-component .sk-box.info:before, +.sn-component .sk-circle.info:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-info-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.info:after, .sn-component .info.sk-box:after, +.sn-component .sk-box.info:after, +.sn-component .sk-circle.info:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-info-color); +} + +.sn-component .sk-button.info:hover:before, .sn-component .info.sk-box:hover:before, +.sn-component .sk-box.info:hover:before, +.sn-component .sk-circle.info:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.info.no-bg, .sn-component .info.no-bg.sk-box, +.sn-component .sk-box.info.no-bg, +.sn-component .sk-circle.info.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.info.no-bg:before, .sn-component .info.no-bg.sk-box:before, +.sn-component .sk-box.info.no-bg:before, +.sn-component .sk-circle.info.no-bg:before { + content: none; +} + +.sn-component .sk-button.info.featured, .sn-component .info.featured.sk-box, +.sn-component .sk-box.info.featured, +.sn-component .sk-circle.info.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.info.featured:before, .sn-component .info.featured.sk-box:before, +.sn-component .sk-box.info.featured:before, +.sn-component .sk-circle.info.featured:before { + opacity: 1; +} + +.sn-component .sk-button.warning, .sn-component .warning.sk-box, +.sn-component .sk-box.warning, +.sn-component .sk-circle.warning { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-warning-contrast-color); + position: relative; + background-color: var(--sn-stylekit-warning-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-warning-color); +} + +.sn-component .sk-button.warning *, .sn-component .warning.sk-box *, +.sn-component .sk-box.warning *, +.sn-component .sk-circle.warning * { + position: relative; +} + +.sn-component .sk-button.warning:before, .sn-component .warning.sk-box:before, +.sn-component .sk-box.warning:before, +.sn-component .sk-circle.warning:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-warning-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.warning:after, .sn-component .warning.sk-box:after, +.sn-component .sk-box.warning:after, +.sn-component .sk-circle.warning:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-warning-color); +} + +.sn-component .sk-button.warning:hover:before, .sn-component .warning.sk-box:hover:before, +.sn-component .sk-box.warning:hover:before, +.sn-component .sk-circle.warning:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.warning.no-bg, .sn-component .warning.no-bg.sk-box, +.sn-component .sk-box.warning.no-bg, +.sn-component .sk-circle.warning.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.warning.no-bg:before, .sn-component .warning.no-bg.sk-box:before, +.sn-component .sk-box.warning.no-bg:before, +.sn-component .sk-circle.warning.no-bg:before { + content: none; +} + +.sn-component .sk-button.warning.featured, .sn-component .warning.featured.sk-box, +.sn-component .sk-box.warning.featured, +.sn-component .sk-circle.warning.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.warning.featured:before, .sn-component .warning.featured.sk-box:before, +.sn-component .sk-box.warning.featured:before, +.sn-component .sk-circle.warning.featured:before { + opacity: 1; +} + +.sn-component .sk-button.danger, .sn-component .danger.sk-box, +.sn-component .sk-box.danger, +.sn-component .sk-circle.danger { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-danger-contrast-color); + position: relative; + background-color: var(--sn-stylekit-danger-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-danger-color); +} + +.sn-component .sk-button.danger *, .sn-component .danger.sk-box *, +.sn-component .sk-box.danger *, +.sn-component .sk-circle.danger * { + position: relative; +} + +.sn-component .sk-button.danger:before, .sn-component .danger.sk-box:before, +.sn-component .sk-box.danger:before, +.sn-component .sk-circle.danger:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-danger-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.danger:after, .sn-component .danger.sk-box:after, +.sn-component .sk-box.danger:after, +.sn-component .sk-circle.danger:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-danger-color); +} + +.sn-component .sk-button.danger:hover:before, .sn-component .danger.sk-box:hover:before, +.sn-component .sk-box.danger:hover:before, +.sn-component .sk-circle.danger:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.danger.no-bg, .sn-component .danger.no-bg.sk-box, +.sn-component .sk-box.danger.no-bg, +.sn-component .sk-circle.danger.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.danger.no-bg:before, .sn-component .danger.no-bg.sk-box:before, +.sn-component .sk-box.danger.no-bg:before, +.sn-component .sk-circle.danger.no-bg:before { + content: none; +} + +.sn-component .sk-button.danger.featured, .sn-component .danger.featured.sk-box, +.sn-component .sk-box.danger.featured, +.sn-component .sk-circle.danger.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.danger.featured:before, .sn-component .danger.featured.sk-box:before, +.sn-component .sk-box.danger.featured:before, +.sn-component .sk-circle.danger.featured:before { + opacity: 1; +} + +.sn-component .sk-button.success, .sn-component .success.sk-box, +.sn-component .sk-box.success, +.sn-component .sk-circle.success { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-success-contrast-color); + position: relative; + background-color: var(--sn-stylekit-success-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-success-color); +} + +.sn-component .sk-button.success *, .sn-component .success.sk-box *, +.sn-component .sk-box.success *, +.sn-component .sk-circle.success * { + position: relative; +} + +.sn-component .sk-button.success:before, .sn-component .success.sk-box:before, +.sn-component .sk-box.success:before, +.sn-component .sk-circle.success:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-success-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-button.success:after, .sn-component .success.sk-box:after, +.sn-component .sk-box.success:after, +.sn-component .sk-circle.success:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-success-color); +} + +.sn-component .sk-button.success:hover:before, .sn-component .success.sk-box:hover:before, +.sn-component .sk-box.success:hover:before, +.sn-component .sk-circle.success:hover:before { + filter: brightness(130%); +} + +.sn-component .sk-button.success.no-bg, .sn-component .success.no-bg.sk-box, +.sn-component .sk-box.success.no-bg, +.sn-component .sk-circle.success.no-bg { + background-color: transparent; +} + +.sn-component .sk-button.success.no-bg:before, .sn-component .success.no-bg.sk-box:before, +.sn-component .sk-box.success.no-bg:before, +.sn-component .sk-circle.success.no-bg:before { + content: none; +} + +.sn-component .sk-button.success.featured, .sn-component .success.featured.sk-box, +.sn-component .sk-box.success.featured, +.sn-component .sk-circle.success.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-button.success.featured:before, .sn-component .success.featured.sk-box:before, +.sn-component .sk-box.success.featured:before, +.sn-component .sk-circle.success.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.contrast, +.sn-component .sk-input.contrast { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-contrast-foreground-color); + position: relative; + background-color: var(--sn-stylekit-contrast-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-contrast-border-color); + border: 1px solid var(--sn-stylekit-contrast-border-color); +} + +.sn-component .sk-notification.contrast *, +.sn-component .sk-input.contrast * { + position: relative; +} + +.sn-component .sk-notification.contrast:before, +.sn-component .sk-input.contrast:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-contrast-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.contrast:after, +.sn-component .sk-input.contrast:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + color: var(--sn-stylekit-contrast-border-color); + border-color: var(--sn-stylekit-contrast-border-color); +} + +.sn-component .sk-notification.contrast.no-bg, +.sn-component .sk-input.contrast.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.contrast.no-bg:before, +.sn-component .sk-input.contrast.no-bg:before { + content: none; +} + +.sn-component .sk-notification.contrast.featured, +.sn-component .sk-input.contrast.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.contrast.featured:before, +.sn-component .sk-input.contrast.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.sk-secondary, +.sn-component .sk-input.sk-secondary { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-secondary-foreground-color); + position: relative; + background-color: var(--sn-stylekit-secondary-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-secondary-border-color); + border: 1px solid var(--sn-stylekit-secondary-border-color); +} + +.sn-component .sk-notification.sk-secondary *, +.sn-component .sk-input.sk-secondary * { + position: relative; +} + +.sn-component .sk-notification.sk-secondary:before, +.sn-component .sk-input.sk-secondary:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-secondary-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.sk-secondary:after, +.sn-component .sk-input.sk-secondary:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + color: var(--sn-stylekit-secondary-border-color); + border-color: var(--sn-stylekit-secondary-border-color); +} + +.sn-component .sk-notification.sk-secondary.no-bg, +.sn-component .sk-input.sk-secondary.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.sk-secondary.no-bg:before, +.sn-component .sk-input.sk-secondary.no-bg:before { + content: none; +} + +.sn-component .sk-notification.sk-secondary.featured, +.sn-component .sk-input.sk-secondary.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.sk-secondary.featured:before, +.sn-component .sk-input.sk-secondary.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.sk-secondary-contrast, +.sn-component .sk-input.sk-secondary-contrast { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-secondary-contrast-foreground-color); + position: relative; + background-color: var(--sn-stylekit-secondary-contrast-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-secondary-contrast-border-color); + border: 1px solid var(--sn-stylekit-secondary-contrast-border-color); +} + +.sn-component .sk-notification.sk-secondary-contrast *, +.sn-component .sk-input.sk-secondary-contrast * { + position: relative; +} + +.sn-component .sk-notification.sk-secondary-contrast:before, +.sn-component .sk-input.sk-secondary-contrast:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-secondary-contrast-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.sk-secondary-contrast:after, +.sn-component .sk-input.sk-secondary-contrast:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + color: var(--sn-stylekit-secondary-contrast-border-color); + border-color: var(--sn-stylekit-secondary-contrast-border-color); +} + +.sn-component .sk-notification.sk-secondary-contrast.no-bg, +.sn-component .sk-input.sk-secondary-contrast.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.sk-secondary-contrast.no-bg:before, +.sn-component .sk-input.sk-secondary-contrast.no-bg:before { + content: none; +} + +.sn-component .sk-notification.sk-secondary-contrast.featured, +.sn-component .sk-input.sk-secondary-contrast.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.sk-secondary-contrast.featured:before, +.sn-component .sk-input.sk-secondary-contrast.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.sk-base, +.sn-component .sk-input.sk-base { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-foreground-color); + position: relative; + background-color: var(--sn-stylekit-background-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-border-color); + border: 1px solid var(--sn-stylekit-border-color); +} + +.sn-component .sk-notification.sk-base *, +.sn-component .sk-input.sk-base * { + position: relative; +} + +.sn-component .sk-notification.sk-base:before, +.sn-component .sk-input.sk-base:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-background-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.sk-base:after, +.sn-component .sk-input.sk-base:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + color: var(--sn-stylekit-border-color); + border-color: var(--sn-stylekit-border-color); +} + +.sn-component .sk-notification.sk-base.no-bg, +.sn-component .sk-input.sk-base.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.sk-base.no-bg:before, +.sn-component .sk-input.sk-base.no-bg:before { + content: none; +} + +.sn-component .sk-notification.sk-base.featured, +.sn-component .sk-input.sk-base.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.sk-base.featured:before, +.sn-component .sk-input.sk-base.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.neutral, +.sn-component .sk-input.neutral { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-neutral-contrast-color); + position: relative; + background-color: var(--sn-stylekit-neutral-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-neutral-color); +} + +.sn-component .sk-notification.neutral *, +.sn-component .sk-input.neutral * { + position: relative; +} + +.sn-component .sk-notification.neutral:before, +.sn-component .sk-input.neutral:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-neutral-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.neutral:after, +.sn-component .sk-input.neutral:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-neutral-color); +} + +.sn-component .sk-notification.neutral.no-bg, +.sn-component .sk-input.neutral.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.neutral.no-bg:before, +.sn-component .sk-input.neutral.no-bg:before { + content: none; +} + +.sn-component .sk-notification.neutral.featured, +.sn-component .sk-input.neutral.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.neutral.featured:before, +.sn-component .sk-input.neutral.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.info, +.sn-component .sk-input.info { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-info-contrast-color); + position: relative; + background-color: var(--sn-stylekit-info-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-info-color); +} + +.sn-component .sk-notification.info *, +.sn-component .sk-input.info * { + position: relative; +} + +.sn-component .sk-notification.info:before, +.sn-component .sk-input.info:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-info-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.info:after, +.sn-component .sk-input.info:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-info-color); +} + +.sn-component .sk-notification.info.no-bg, +.sn-component .sk-input.info.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.info.no-bg:before, +.sn-component .sk-input.info.no-bg:before { + content: none; +} + +.sn-component .sk-notification.info.featured, +.sn-component .sk-input.info.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.info.featured:before, +.sn-component .sk-input.info.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.warning, +.sn-component .sk-input.warning { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-warning-contrast-color); + position: relative; + background-color: var(--sn-stylekit-warning-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-warning-color); +} + +.sn-component .sk-notification.warning *, +.sn-component .sk-input.warning * { + position: relative; +} + +.sn-component .sk-notification.warning:before, +.sn-component .sk-input.warning:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-warning-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.warning:after, +.sn-component .sk-input.warning:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-warning-color); +} + +.sn-component .sk-notification.warning.no-bg, +.sn-component .sk-input.warning.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.warning.no-bg:before, +.sn-component .sk-input.warning.no-bg:before { + content: none; +} + +.sn-component .sk-notification.warning.featured, +.sn-component .sk-input.warning.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.warning.featured:before, +.sn-component .sk-input.warning.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.danger, +.sn-component .sk-input.danger { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-danger-contrast-color); + position: relative; + background-color: var(--sn-stylekit-danger-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-danger-color); +} + +.sn-component .sk-notification.danger *, +.sn-component .sk-input.danger * { + position: relative; +} + +.sn-component .sk-notification.danger:before, +.sn-component .sk-input.danger:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-danger-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.danger:after, +.sn-component .sk-input.danger:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-danger-color); +} + +.sn-component .sk-notification.danger.no-bg, +.sn-component .sk-input.danger.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.danger.no-bg:before, +.sn-component .sk-input.danger.no-bg:before { + content: none; +} + +.sn-component .sk-notification.danger.featured, +.sn-component .sk-input.danger.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.danger.featured:before, +.sn-component .sk-input.danger.featured:before { + opacity: 1; +} + +.sn-component .sk-notification.success, +.sn-component .sk-input.success { + /* + If $border-color is supplied, we use traditional borders for rect. + Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. + If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders + */ + color: var(--sn-stylekit-success-contrast-color); + position: relative; + background-color: var(--sn-stylekit-success-color); + overflow: hidden; + border-radius: var(--sn-stylekit-general-border-radius); + /* + We use box-shadow instead of border so that the borders are rounded properly around the rect. + We keep border-color as well incase the individual elements want a border in some cases. + */ + border-color: var(--sn-stylekit-success-color); +} + +.sn-component .sk-notification.success *, +.sn-component .sk-input.success * { + position: relative; +} + +.sn-component .sk-notification.success:before, +.sn-component .sk-input.success:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-success-color); + opacity: 1; + border-radius: var(--sn-stylekit-general-border-radius); +} + +.sn-component .sk-notification.success:after, +.sn-component .sk-input.success:after { + content: ''; + display: block; + height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + border-radius: var(--sn-stylekit-general-border-radius); + pointer-events: none; + box-shadow: inset 0 0 0 1px; + color: var(--sn-stylekit-success-color); +} + +.sn-component .sk-notification.success.no-bg, +.sn-component .sk-input.success.no-bg { + background-color: transparent; +} + +.sn-component .sk-notification.success.no-bg:before, +.sn-component .sk-input.success.no-bg:before { + content: none; +} + +.sn-component .sk-notification.success.featured, +.sn-component .sk-input.success.featured { + border: none; + padding: 0.609375rem 1.015625rem; + font-size: var(--sn-stylekit-font-size-h3); +} + +.sn-component .sk-notification.success.featured:before, +.sn-component .sk-input.success.featured:before { + opacity: 1; +} + +.sn-component .sk-notification { + padding: 0.89375rem 0.8125rem; + margin: 1.1375rem 0; + text-align: left; + cursor: default; +} + +.sn-component .sk-notification.one-line { + padding: 0rem 0.325rem; +} + +.sn-component .sk-notification.stretch { + width: 100%; +} + +.sn-component .sk-notification.dashed { + border-style: dashed; + border-width: 2px; +} + +.sn-component .sk-notification.dashed:after { + box-shadow: none; +} + +.sn-component .sk-notification .sk-notification-title { + font-size: var(--sn-stylekit-font-size-h1); + font-weight: bold; + line-height: 1.54375rem; +} + +.sn-component .sk-notification .sk-notification-text { + line-height: 1.21875rem; + font-size: var(--sn-stylekit-font-size-p); + text-align: left; + font-weight: normal; +} + +.sn-component .sk-circle { + border: 1px solid; + cursor: pointer; + border-color: var(--sn-stylekit-contrast-foreground-color); + background-color: var(--sn-stylekit-contrast-background-color); + padding: 0; + border-radius: 50% !important; + flex-shrink: 0; +} + +.sn-component .sk-circle:before { + border-radius: 50% !important; +} + +.sn-component .sk-circle:after { + border-radius: 50% !important; +} + +.sn-component .sk-circle.small { + width: 11px; + height: 11px; +} + +.sn-component .sk-spinner { + border: 1px solid var(--sn-stylekit-neutral-color); + border-radius: 50%; + animation: rotate 0.8s infinite linear; + border-right-color: transparent; +} + +.sn-component .sk-spinner.small { + width: 12px; + height: 12px; +} + +.sn-component .sk-spinner.info-contrast { + border-color: var(--sn-stylekit-info-contrast-color); + border-right-color: transparent; +} + +.sn-component .sk-spinner.info { + border-color: var(--sn-stylekit-info-color); + border-right-color: transparent; +} + +.sn-component .sk-spinner.warning { + border-color: var(--sn-stylekit-warning-color); + border-right-color: transparent; +} + +.sn-component .sk-spinner.danger { + border-color: var(--sn-stylekit-danger-color); + border-right-color: transparent; +} + +.sn-component .sk-spinner.success { + border-color: var(--sn-stylekit-success-color); + border-right-color: transparent; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.sn-component .sk-app-bar { + display: flex; + width: 100%; + height: 1.625rem; + padding: 0 0.65rem; + background-color: var(--sn-stylekit-contrast-background-color); + color: var(--sn-stylekit-contrast-foreground-color); + justify-content: space-between; + align-items: center; + border: 1px solid var(--sn-stylekit-contrast-border-color); + user-select: none; +} + +.sn-component .sk-app-bar.no-edges { + border-left: 0; + border-right: 0; +} + +.sn-component .sk-app-bar.no-bottom-edge { + border-bottom: 0; +} + +.sn-component .sk-app-bar .left, +.sn-component .sk-app-bar .right { + display: flex; + height: 100%; +} + +.sn-component .sk-app-bar .sk-app-bar-item { + flex-grow: 1; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child) { + margin-left: 0.8125rem; +} + +.sn-component .sk-app-bar .sk-app-bar-item.border { + border-left: 1px solid var(--sn-stylekit-contrast-border-color); +} + +.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column { + height: 100%; + display: flex; + align-items: center; +} + +.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column:not(:first-child) { + margin-left: 0.40625rem; +} + +.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column.underline { + border-bottom: 2px solid var(--sn-stylekit-info-color); +} + +.sn-component .sk-app-bar .sk-app-bar-item.no-pointer { + cursor: default; +} + +.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-label:not(.subtle), .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle), .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle), +.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-sublabel:not(.subtle), +.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-label:not(.subtle), +.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle), +.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle), +.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-sublabel:not(.subtle) { + color: var(--sn-stylekit-info-color); +} + +.sn-component .sk-app-bar .sk-app-bar-item > .sk-label, .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-panel-section-subtitle, +.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-label, +.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle, +.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle { + font-weight: bold; + font-size: var(--sn-stylekit-font-size-h5); + white-space: nowrap; +} + +.sn-component .sk-app-bar .sk-app-bar-item > .sk-sublabel, +.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-sublabel { + font-size: var(--sn-stylekit-font-size-h5); + font-weight: normal; + white-space: nowrap; +} + +.sn-component .sk-app-bar .sk-app-bar-item .subtle { + font-weight: normal; + opacity: 0.6; +} + +.sn-component .sk-panel-table { + display: flex; + flex-wrap: wrap; + padding-left: 1px; + padding-top: 1px; +} + +.sn-component .sk-panel-table .sk-panel-table-item { + flex: 45%; + flex-flow: wrap; + border: 1px solid var(--sn-stylekit-border-color); + padding: 0.8125rem; + margin-left: -1px; + margin-top: -1px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.sn-component .sk-panel-table .sk-panel-table-item img { + max-width: 100%; + margin-bottom: 0.8125rem; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content { + display: flex; + flex-direction: row; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column { + align-items: center; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch { + width: 100%; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child) { + padding-left: 0.609375rem; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter { + flex-basis: 25%; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters { + flex-basis: 75%; +} + +.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer { + margin-top: 1.015625rem; +} + +.sn-component .sk-panel-table .sk-panel-table-item.no-border { + border: none; +} + +.sn-component .sk-modal { + position: fixed; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 10000; + width: 100vw; + height: 100vh; + background-color: transparent; + color: var(--sn-stylekit-contrast-foreground-color); + display: flex; + align-items: center; + justify-content: center; +} + +.sn-component .sk-modal .sn-component { + height: 100%; +} + +.sn-component .sk-modal .sn-component .sk-panel { + height: 100%; +} + +.sn-component .sk-modal.auto-height > .sk-modal-content { + height: auto !important; +} + +.sn-component .sk-modal.large > .sk-modal-content { + width: 900px; + height: 600px; +} + +.sn-component .sk-modal.medium > .sk-modal-content { + width: 700px; + height: 500px; +} + +.sn-component .sk-modal.small > .sk-modal-content { + width: 700px; + height: 344px; +} + +.sn-component .sk-modal .sk-modal-background { + position: absolute; + z-index: -1; + width: 100%; + height: 100%; + background-color: var(--sn-stylekit-contrast-background-color); + opacity: 0.7; +} + +.sn-component .sk-modal > .sk-modal-content { + overflow-y: auto; + width: auto; + padding: 0; + padding-bottom: 0; + min-width: 300px; + -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); + -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); + box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); +} + +@keyframes slide-down { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.sn-component .slide-down-animation, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover { + animation: slide-down 0.2s ease; +} + +.sn-component .no-border { + border: none; +} + +.sn-component .border-0, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-popover { + border-width: 0px; +} + +.sn-component .border-1, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button { + border-width: 1px; +} + +.sn-component .border-2 { + border-width: 2px; +} + +.sn-component .border-b-1 { + border-bottom-width: 1px; +} + +.sn-component .border-main, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover, .sn-component .sn-icon-button { + border-color: var(--sn-stylekit-border-color); +} + +.sn-component .border-background { + border-color: var(--sn-stylekit-background-color); +} + +.sn-component .border-transparent { + border-color: transparent; +} + +.sn-component .border-info { + border-color: var(--sn-stylekit-info-color); +} + +.sn-component .border-neutral { + border-color: var(--sn-stylekit-neutral-color); +} + +.sn-component .border-rounded-md { + border-radius: 0.375rem; +} + +.sn-component .rounded, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover { + border-radius: 0.25rem; +} + +.sn-component .rounded-full, .sn-component .sn-icon-button { + border-radius: 9999px; +} + +.sn-component .border-solid, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button { + border-style: solid; +} + +.sn-component .border-bottom-solid { + border-bottom-style: solid; +} + +.sn-component .border-box, .sn-component .sn-select { + box-sizing: border-box; +} + +.sn-component .ring-info, .sn-component .focus\:ring-info:focus, .sn-component .sn-icon-button:focus, .sn-component .focus-within\:ring-info:focus-within { + box-shadow: 0 0 0 2px var(--sn-stylekit-info-color); +} + +.sn-component .inner-ring-info, .sn-component .focus\:inner-ring-info:focus { + box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color); +} + +.sn-component .shadow-overlay { + box-shadow: 0px 4px 24px 0px #00000029; +} + +.sn-component .border-dark-red { + border-color: var(--sn-stylekit-dark-red); +} + +.sn-component .border-bottom-1-gray { + border-bottom-color: var(--sn-stylekit-border-color); +} + +.sn-component .bg-default, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list { + background-color: var(--sn-stylekit-background-color); +} + +.sn-component .bg-contrast, .sn-component .hover\:bg-contrast:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\:bg-contrast:focus, .sn-component .sn-icon-button:focus { + background-color: var(--sn-stylekit-contrast-background-color); +} + +.sn-component .bg-border { + background-color: var(--sn-stylekit-border-color); +} + +.sn-component .bg-secondary-contrast, .sn-component .hover\:bg-secondary-contrast:hover, .sn-component .focus\:bg-secondary-contrast:focus { + background-color: var(--sn-stylekit-secondary-contrast-background-color); +} + +.sn-component .bg-clip-padding, .sn-component .sn-icon-button { + background-clip: padding-box; +} + +.sn-component .bg-transparent, .sn-component .sn-icon-button { + background-color: transparent; +} + +.sn-component .bg-neutral { + background-color: var(--sn-stylekit-neutral-color); +} + +.sn-component .color-neutral, .sn-component .sn-icon-button { + color: var(--sn-stylekit-neutral-color); +} + +.sn-component .bg-text { + background-color: var(--sn-stylekit-contrast-foreground-color); +} + +.sn-component .color-text, .sn-component .hover\:color-text:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\:color-text:focus, .sn-component .sn-icon-button:focus, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list { + color: var(--sn-stylekit-contrast-foreground-color); +} + +.sn-component .bg-foreground { + background-color: var(--sn-stylekit-foreground-color); +} + +.sn-component .color-foreground { + color: var(--sn-stylekit-foreground-color); +} + +.sn-component .bg-danger { + background-color: var(--sn-stylekit-danger-color); +} + +.sn-component .color-danger { + color: var(--sn-stylekit-danger-color); +} + +.sn-component .bg-info, .sn-component .sn-button.info, .sn-component .sn-icon-button.info { + background-color: var(--sn-stylekit-info-color); +} + +.sn-component .color-info { + color: var(--sn-stylekit-info-color); +} + +.sn-component .bg-info-contrast { + background-color: var(--sn-stylekit-info-contrast-color); +} + +.sn-component .color-info-contrast, .sn-component .sn-button.info, .sn-component .sn-icon-button.info, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus { + color: var(--sn-stylekit-info-contrast-color); +} + +.sn-component .bg-info-dark, .sn-component .hover\:bg-info-dark:hover, .sn-component .focus\:bg-info-dark:focus, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus { + background-color: var(--sn-stylekit-info-color-darkened); +} + +.sn-component .color-info-dark { + color: var(--sn-stylekit-info-color-darkened); +} + +.sn-component .bg-grey-1 { + background-color: var(--sn-stylekit-grey-1); +} + +.sn-component .color-grey-1 { + color: var(--sn-stylekit-grey-1); +} + +.sn-component .bg-grey-2 { + background-color: var(--sn-stylekit-grey-2); +} + +.sn-component .color-grey-2 { + color: var(--sn-stylekit-grey-2); +} + +.sn-component .bg-grey-3 { + background-color: var(--sn-stylekit-grey-3); +} + +.sn-component .color-grey-3 { + color: var(--sn-stylekit-grey-3); +} + +.sn-component .bg-grey-4 { + background-color: var(--sn-stylekit-grey-4); +} + +.sn-component .color-grey-4 { + color: var(--sn-stylekit-grey-4); +} + +.sn-component .bg-grey-5 { + background-color: var(--sn-stylekit-grey-5); +} + +.sn-component .color-grey-5 { + color: var(--sn-stylekit-grey-5); +} + +.sn-component .bg-grey-6 { + background-color: var(--sn-stylekit-grey-6); +} + +.sn-component .color-grey-6 { + color: var(--sn-stylekit-grey-6); +} + +.sn-component .bg-grey-super-light { + background-color: var(--sn-stylekit-grey-super-light); +} + +.sn-component .color-grey-super-light { + color: var(--sn-stylekit-grey-super-light); +} + +.sn-component .bg-black { + background-color: var(--sn-stylekit-black); +} + +.sn-component .color-black { + color: var(--sn-stylekit-black); +} + +.sn-component .bg-white { + background-color: var(--sn-stylekit-white); +} + +.sn-component .color-white { + color: var(--sn-stylekit-white); +} + +.sn-component .bg-dark-red { + background-color: var(--sn-stylekit-dark-red); +} + +.sn-component .color-dark-red { + color: var(--sn-stylekit-dark-red); +} + +.sn-component .selected\:bg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected], +.sn-component .selected\:bg-color[aria-selected='true'], +.sn-component .sn-dropdown-menu-list-item[aria-selected='true'], +.sn-component .sn-select-list-option[aria-selected='true'] { + background-color: var(--sn-stylekit-list-item-highlight-color); +} + +.sn-component .selected\:fg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected], +.sn-component .selected\:fg-color[aria-selected='true'], +.sn-component .sn-dropdown-menu-list-item[aria-selected='true'], +.sn-component .sn-select-list-option[aria-selected='true'] { + color: var(--sn-stylekit-contrast-foreground-color); +} + +.sn-component .color-accessory-tint-1 { + color: var(--sn-stylekit-accessory-tint-color-1); +} + +.sn-component .color-accessory-tint-2 { + color: var(--sn-stylekit-accessory-tint-color-2); +} + +.sn-component .color-accessory-tint-3 { + color: var(--sn-stylekit-accessory-tint-color-3); +} + +.sn-component .color-accessory-tint-4 { + color: var(--sn-stylekit-accessory-tint-color-4); +} + +.sn-component .color-accessory-tint-5 { + color: var(--sn-stylekit-accessory-tint-color-5); +} + +.sn-component .color-accessory-tint-6 { + color: var(--sn-stylekit-accessory-tint-color-6); +} + +.sn-component .inline-flex, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button { + display: inline-flex; +} + +.sn-component .block { + display: block; +} + +.sn-component .flex, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-icon-button { + display: flex; +} + +.sn-component .flex-col { + flex-direction: column; +} + +.sn-component .flex-row { + flex-direction: row; +} + +.sn-component .flex-grow { + flex-grow: 1; +} + +.sn-component .flex-shrink { + flex-shrink: 1; +} + +.sn-component .flex-wrap { + flex-wrap: wrap; +} + +.sn-component .grid { + display: grid; +} + +.sn-component .items-center, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button { + align-items: center; +} + +.sn-component .items-start { + align-items: flex-start; +} + +.sn-component .items-stretch { + align-items: stretch; +} + +.sn-component .justify-center, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button { + justify-content: center; +} + +.sn-component .justify-between { + justify-content: space-between; +} + +.sn-component .justify-start { + justify-content: flex-start; +} + +.sn-component .justify-end { + justify-content: flex-end; +} + +.sn-component .gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; +} + +.sn-component .gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; +} + +.sn-component .gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; +} + +.sn-component .gap-4 { + grid-gap: 1rem; + gap: 1rem; +} + +.sn-component .absolute, .sn-component .sn-dropdown-menu-list, .sn-component .sn-full-screen { + position: absolute; +} + +.sn-component .fixed { + position: fixed; +} + +.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button { + cursor: pointer; +} + +.sn-component .origin-top-right, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list { + transform-origin: top right; +} + +.sn-component .overflow-auto { + overflow: auto; +} + +.sn-component .overflow-y-auto { + overflow-y: auto; +} + +.sn-component .overflow-hidden { + overflow: hidden; +} + +.sn-component .overflow-ellipsis { + text-overflow: ellipsis; +} + +.sn-component .flex-basis-55 { + flex-basis: 13.75rem; +} + +.sn-component .hover\:brightness-130:hover, .sn-component .sn-button:hover { + filter: brightness(130%); +} + +.sn-component .focus\:brightness-130:focus, .sn-component .sn-button:focus { + filter: brightness(130%); +} + +.sn-component .hover\:bg-highlight:hover, .sn-component .sn-button.outlined:hover, .sn-component .sn-dropdown-menu:hover, .sn-component .sn-dropdown-menu-list-item:hover, .sn-component .sn-select:hover { + background-color: var(--sn-stylekit-list-item-highlight-color); +} + +.sn-component .focus\:bg-highlight:focus, .sn-component .sn-button.outlined:focus { + background-color: var(--sn-stylekit-list-item-highlight-color); +} + +.sn-component .focus\:padded-ring-info:focus { + box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); +} + +.sn-component .focus\:border-bottom:focus { + border-bottom: 2px solid var(--sn-stylekit-info-color); +} + +.sn-component .focus-within\:padded-ring-info:focus-within { + box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); +} + +.sn-component .focus-within\:border-background:focus-within { + border-color: var(--sn-stylekit-background-color); +} + +.sn-component .box-shadow, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover, .sn-component .box-shadow:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-select-popover:focus, .sn-component .box-shadow:focus-within, .sn-component .sn-dropdown-menu-list:focus-within, .sn-component .sn-select-popover:focus-within { + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04); +} + +.sn-component .focus\:outline-none:focus, .sn-component .sn-button:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus, .sn-component .sn-icon-button:focus { + outline: none; +} + +.sn-component .focus\:shadow-none:focus, .sn-component .sn-button.outlined:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus { + box-shadow: none; +} + +.sn-component .focus-within\:outline-none:focus-within { + outline: none; +} + +.sn-component .focus-within\:shadow-none:focus-within { + box-shadow: none; +} + +.sn-component .capitalize, .sn-component .sn-button { + text-transform: capitalize; +} + +.sn-component .font-normal, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list-option { + font-weight: 300; +} + +.sn-component .font-bold, .sn-component .sn-button { + font-weight: 700; +} + +.sn-component .text-left { + text-align: left; +} + +.sn-component .text-center { + text-align: center; +} + +.sn-component .text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.sn-component .text-sm, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-list-option { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.sn-component .text-input { + font-size: 0.875rem; + line-height: 1.125rem; +} + +.sn-component .text-base { + font-size: 1rem; +} + +.sn-component .text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.sn-component .text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.sn-component .text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.sn-component .font-medium { + font-weight: 500; +} + +.sn-component .leading-4, .sn-component .sn-dropdown-menu, .sn-component .sn-select { + line-height: 1rem; +} + +.sn-component .whitespace-pre-wrap { + white-space: pre-wrap; +} + +.sn-component .whitespace-nowrap { + white-space: nowrap; +} + +.sn-component .h-auto { + height: auto; +} + +.sn-component .h-full { + height: 100%; +} + +.sn-component .h-100vh, .sn-component .sn-full-screen { + height: 100vh; +} + +.sn-component .h-90vh { + height: 90vh; +} + +.sn-component .h-0 { + height: 0; +} + +.sn-component .h-2 { + height: 0.5rem; +} + +.sn-component .h-3\.5 { + height: 0.875rem; +} + +.sn-component .h-4 { + height: 1rem; +} + +.sn-component .h-4\.5 { + height: 1.125rem; +} + +.sn-component .h-5 { + height: 1.25rem; +} + +.sn-component .h-6 { + height: 1.5rem; +} + +.sn-component .h-7 { + height: 1.75rem; +} + +.sn-component .h-8, .sn-component .sn-icon-button { + height: 2rem; +} + +.sn-component .h-9 { + height: 2.25rem; +} + +.sn-component .h-10 { + height: 2.5rem; +} + +.sn-component .h-14 { + height: 3.5rem; +} + +.sn-component .h-18 { + height: 4.5rem; +} + +.sn-component .h-25 { + height: 6.25rem; +} + +.sn-component .h-1px { + height: 1px; +} + +.sn-component .h-20px { + height: 20px; +} + +.sn-component .min-h-0 { + min-height: 0; +} + +.sn-component .min-h-5 { + min-height: 1.25rem; +} + +.sn-component .m-h-32, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select { + min-height: 2rem; +} + +.sn-component .min-h-20px { + height: 20px; +} + +.sn-component .max-h-120 { + max-height: 30rem; +} + +.sn-component .m-0, .sn-component .sn-icon-button { + margin: 0; +} + +.sn-component .my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.sn-component .my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.sn-component .my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +.sn-component .-mt-1 { + margin-top: -0.25rem; +} + +.sn-component .mt-1 { + margin-top: 0.25rem; +} + +.sn-component .mt-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover { + margin-top: 0.5rem; +} + +.sn-component .mt-3 { + margin-top: 0.75rem; +} + +.sn-component .mt-4 { + margin-top: 1rem; +} + +.sn-component .mb-1 { + margin-bottom: 0.25rem; +} + +.sn-component .mb-3 { + margin-bottom: 0.75rem; +} + +.sn-component .-mr-2 { + margin-right: -0.5rem; +} + +.sn-component .mr-1 { + margin-right: 0.25rem; +} + +.sn-component .mr-1\.5 { + margin-right: 0.375rem; +} + +.sn-component .mr-2, .sn-component .sn-dropdown-menu > .sn-icon:first-child, .sn-component .sn-dropdown-menu-list-item > .sn-icon { + margin-right: 0.5rem; +} + +.sn-component .mr-10 { + margin-right: 2.5rem; +} + +.sn-component .ml-1 { + margin-left: 0.25rem; +} + +.sn-component .ml-1\.5 { + margin-left: 0.375rem; +} + +.sn-component .ml-2, .sn-component .sn-dropdown-menu > .sn-icon:last-child, .sn-component .sn-select-button > .sn-icon:last-child { + margin-left: 0.5rem; +} + +.sn-component .ml-6 { + margin-left: 1.5rem; +} + +.sn-component .p-0, .sn-component .sn-icon-button { + padding-top: 0; + padding-bottom: 0; + padding-left: 0; + padding-right: 0; +} + +.sn-component .p-2 { + padding: 0.5rem; +} + +.sn-component .py-1, .sn-component .sn-dropdown-menu, .sn-component .sn-select-button { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.sn-component .py-1\.5 { + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.sn-component .py-1\.75 { + padding-top: 0.4375rem; + padding-bottom: 0.4375rem; +} + +.sn-component .py-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list-option { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.sn-component .py-3 { + padding-top: 0.75rem; + padding-bottom: 0.75rem; +} + +.sn-component .py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.sn-component .py-6 { + padding-top: 1.5rem; + padding-bottom: 1.5rem; +} + +.sn-component .py-8 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.sn-component .px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.sn-component .px-2, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.sn-component .px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.sn-component .px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.sn-component .px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.sn-component .px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +.sn-component .pt-4 { + padding-top: 1rem; +} + +.sn-component .pb-3 { + padding-bottom: 0.75rem; +} + +.sn-component .pr-2 { + padding-right: 0.5rem; +} + +.sn-component .pl-1 { + padding-left: 0.25rem; +} + +.sn-component .w-auto, .sn-component .sn-dropdown-menu, .sn-component .sn-select { + width: auto; +} + +.sn-component .w-full { + width: 100%; +} + +.sn-component .w-100vw, .sn-component .sn-full-screen { + width: 100vw; +} + +.sn-component .fit-content { + width: -moz-fit-content; + width: fit-content; +} + +.sn-component .w-0 { + width: 0; +} + +.sn-component .w-2 { + width: 0.5rem; +} + +.sn-component .w-3\.5 { + width: 0.875rem; +} + +.sn-component .w-4 { + width: 1rem; +} + +.sn-component .w-5 { + width: 1.25rem; +} + +.sn-component .w-8, .sn-component .sn-icon-button { + width: 2rem; +} + +.sn-component .w-25 { + width: 6.25rem; +} + +.sn-component .w-30 { + width: 7.5rem; +} + +.sn-component .w-55 { + width: 13.75rem; +} + +.sn-component .w-56, .sn-component .sn-dropdown-menu-list { + width: 14rem; +} + +.sn-component .w-70 { + width: 17.5rem; +} + +.sn-component .w-80 { + width: 20rem; +} + +.sn-component .w-103 { + width: 25.75rem; +} + +.sn-component .w-125 { + width: 31.25rem; +} + +.sn-component .w-160 { + width: 40rem; +} + +.sn-component .w-20px { + width: 20px; +} + +.sn-component .min-w-265px, .sn-component .sn-dropdown-menu-list { + min-width: 265px; +} + +.sn-component .min-w-20px { + min-width: 20px; +} + +.sn-component .min-w-0 { + min-width: 0; +} + +.sn-component .min-w-4 { + min-width: 1rem; +} + +.sn-component .min-w-5 { + min-width: 1.25rem; +} + +.sn-component .min-w-20 { + min-width: 5rem; +} + +.sn-component .min-w-40 { + min-width: 10rem; +} + +.sn-component .min-w-42 { + min-width: 10.5rem; +} + +.sn-component .min-w-55 { + min-width: 13.75rem; +} + +.sn-component .min-w-80 { + min-width: 20rem; +} + +.sn-component .max-w-xs { + max-width: 20rem; +} + +.sn-component .max-w-md { + max-width: 28rem; +} + +.sn-component .max-w-40 { + max-width: 10rem; +} + +.sn-component .max-w-125 { + max-width: 31.25rem; +} + +.sn-component .max-w-290px { + max-width: 290px; +} + +.sn-component .duration-150 { + transition-duration: 150ms; +} + +.sn-component .ease-out { + transition-timing-function: ease-out; +} + +.sn-component .transition-background { + transition-property: background; +} + +.sn-component .transition-transform { + transition-property: transform; +} + +.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button { + cursor: pointer; +} + +.sn-component .top-0, .sn-component .top-left-0, .sn-component .sn-full-screen { + top: 0; +} + +.sn-component .left-0, .sn-component .top-left-0, .sn-component .sn-full-screen { + left: 0; +} + +.sn-component .-top-10 { + top: -2.5rem; +} + +.sn-component .-left-51 { + left: -12.75rem; +} + +.sn-component .sn-button { + font-size: 0.8125rem; + padding: 0.609375rem; + min-height: 1.8125rem; +} + +.sn-component .sn-button.small { + font-size: 0.7109375rem; + padding: 0.40625rem 0.609375rem; +} + +.sn-component .sn-button.contrast { + background-color: var(--sn-stylekit-contrast-foreground-color); + color: var(--sn-stylekit-contrast-background-color); +} + +.sn-component .sn-button.neutral { + background-color: var(--sn-stylekit-neutral-color); + color: var(--sn-stylekit-neutral-contrast-color); +} + +.sn-component .sn-button.warning { + background-color: var(--sn-stylekit-warning-color); + color: var(--sn-stylekit-warning-contrast-color); +} + +.sn-component .sn-button.danger { + background-color: var(--sn-stylekit-danger-color); + color: var(--sn-stylekit-danger-contrast-color); +} + +.sn-component .sn-button.success { + background-color: var(--sn-stylekit-success-color); + color: var(--sn-stylekit-success-contrast-color); +} + +.sn-component [data-reach-custom-checkbox-container] { + margin: 0; +} + +.sn-component.no-select { + user-select: none; +} + +/* Goes outside of .sn-component declaration, as following properties are global */ +input, +textarea, +[contenteditable] { + caret-color: var(--sn-stylekit-editor-foreground-color); +} + +.windows-web, +.windows-desktop, +.linux-web, +.linux-desktop { + scrollbar-width: thin; +} + +.windows-web ::-webkit-scrollbar, +.windows-desktop ::-webkit-scrollbar, +.linux-web ::-webkit-scrollbar, +.linux-desktop ::-webkit-scrollbar { + width: 17px; + height: 18px; + border-left: none; +} + +.windows-web ::-webkit-scrollbar-thumb, +.windows-desktop ::-webkit-scrollbar-thumb, +.linux-web ::-webkit-scrollbar-thumb, +.linux-desktop ::-webkit-scrollbar-thumb { + border: 4px solid rgba(0, 0, 0, 0); + background-clip: padding-box; + -webkit-border-radius: 10px; + background-color: var(--sn-stylekit-scrollbar-thumb-color); + -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); +} + +.windows-web ::-webkit-scrollbar-button, +.windows-desktop ::-webkit-scrollbar-button, +.linux-web ::-webkit-scrollbar-button, +.linux-desktop ::-webkit-scrollbar-button { + width: 0; + height: 0; + display: none; +} + +.windows-web ::-webkit-scrollbar-corner, +.windows-desktop ::-webkit-scrollbar-corner, +.linux-web ::-webkit-scrollbar-corner, +.linux-desktop ::-webkit-scrollbar-corner { + background-color: transparent; +} + +:root { + --reach-listbox: 1; +} + +[data-reach-listbox-popover] { + display: block; + position: absolute; + min-width: -moz-fit-content; + min-width: -webkit-min-content; + min-width: min-content; + padding: 0.25rem 0; + background: white; + outline: none; + border: solid 1px rgba(0, 0, 0, 0.25); +} + +[data-reach-listbox-popover]:focus-within { + box-shadow: 0 0 4px Highlight; + outline: -webkit-focus-ring-color auto 4px; +} + +[data-reach-listbox-popover][hidden] { + display: none; +} + +[data-reach-listbox-list] { + margin: 0; + padding: 0; + list-style: none; +} + +[data-reach-listbox-list]:focus { + box-shadow: none; + outline: none; +} + +[data-reach-listbox-option] { + display: block; + margin: 0; + padding: 0.25rem 0.5rem; + white-space: nowrap; + user-select: none; +} + +[data-reach-listbox-option][aria-selected="true"] { + background: #1672d4; + color: white; +} + +[data-reach-listbox-option][data-current] { + font-weight: bolder; +} + +[data-reach-listbox-option][data-current][data-confirming] { + animation: flash 100ms; + animation-iteration-count: 1; +} + +[data-reach-listbox-option][aria-disabled="true"] { + opacity: 0.5; +} + +[data-reach-listbox-button] { + display: inline-flex; + align-items: center; + justify-content: space-between; + padding: 1px 10px 2px; + border: 1px solid; + border-color: #d8d8d8 #d1d1d1 #bababa; + cursor: default; + user-select: none; +} + +[data-reach-listbox-button][aria-disabled="true"] { + opacity: 0.5; +} + +[data-reach-listbox-arrow] { + margin-left: 0.5rem; + display: block; + font-size: 0.5em; +} + +[data-reach-listbox-group-label] { + display: block; + margin: 0; + padding: 0.25rem 0.5rem; + white-space: nowrap; + user-select: none; + font-weight: bolder; +} + +@keyframes flash { + 0% { + background: #1159a6; + color: white; + opacity: 1; + } + 50% { + opacity: 0.5; + background: inherit; + color: inherit; + } + 100% { + background: #1159a6; + color: white; + opacity: 1; + } +} + From 366f07997266543cda327aac71669c9c966d3e30 Mon Sep 17 00:00:00 2001 From: Johnny Almonte Date: Tue, 18 Jan 2022 15:24:50 -0400 Subject: [PATCH 4/4] fix: restore stylekit.css --- dist/stylekit.css | 4070 +-------------------------------------------- 1 file changed, 3 insertions(+), 4067 deletions(-) diff --git a/dist/stylekit.css b/dist/stylekit.css index fcf0050..194ce15 100644 --- a/dist/stylekit.css +++ b/dist/stylekit.css @@ -1,4067 +1,3 @@ -@charset "UTF-8"; -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -/* Document - ========================================================================== */ -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ -html { - line-height: 1.15; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/* Sections - ========================================================================== */ -/** - * Remove the margin in all browsers. - */ -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ -hr { - box-sizing: content-box; - /* 1 */ - height: 0; - /* 1 */ - overflow: visible; - /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -pre { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ -/** - * Remove the gray background on active links in IE 10. - */ -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ -abbr[title] { - border-bottom: none; - /* 1 */ - text-decoration: underline; - /* 2 */ - text-decoration: underline dotted; - /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -samp { - font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ -/** - * Remove the border on images inside links in IE 10. - */ -img { - border-style: none; -} - -/* Forms - ========================================================================== */ -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ -button, -input { - /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ -button, -select { - /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ -legend { - box-sizing: border-box; - /* 1 */ - color: inherit; - /* 2 */ - display: table; - /* 1 */ - max-width: 100%; - /* 1 */ - padding: 0; - /* 3 */ - white-space: normal; - /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ -[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* Interactive - ========================================================================== */ -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ -/** - * Add the correct display in IE 10+. - */ -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ -[hidden] { - display: none; -} - -:root { - --sn-stylekit-base-font-size: 0.8125rem; - --sn-stylekit-font-size-p: 0.8125rem; - --sn-stylekit-font-size-editor: 0.983125rem; - --sn-stylekit-font-size-h6: 0.65rem; - --sn-stylekit-font-size-h5: 0.73125rem; - --sn-stylekit-font-size-h4: 0.8125rem; - --sn-stylekit-font-size-h3: 0.89375rem; - --sn-stylekit-font-size-h2: 0.975rem; - --sn-stylekit-font-size-h1: 1.05625rem; - --sn-stylekit-white: #ffffff; - --sn-stylekit-black: #19191c; - --sn-stylekit-grey-1: #72767e; - --sn-stylekit-grey-2: #bbbec4; - --sn-stylekit-grey-3: #dfe1e4; - --sn-stylekit-grey-4: #eeeff1; - --sn-stylekit-grey-5: #f4f5f7; - --sn-stylekit-grey-6: #e5e5e5; - --sn-stylekit-grey-super-light: #f9f9f9; - --sn-stylekit-dark-red: #cc2128; - --sn-stylekit-neutral-color: #989898; - --sn-stylekit-neutral-contrast-color: #ffffff; - --sn-stylekit-info-color: #086dd6; - --sn-stylekit-info-color-darkened: #065cb5; - --sn-stylekit-info-contrast-color: #ffffff; - --sn-stylekit-info-backdrop-color: #2b6fcf0f; - --sn-stylekit-success-color: #2b9612; - --sn-stylekit-success-contrast-color: #ffffff; - --sn-stylekit-warning-color: #f6a200; - --sn-stylekit-warning-contrast-color: #ffffff; - --sn-stylekit-danger-color: #f80324; - --sn-stylekit-danger-contrast-color: #ffffff; - --sn-stylekit-shadow-color: #c8c8c8; - --sn-stylekit-background-color: #ffffff; - --sn-stylekit-border-color: #dfe1e4; - --sn-stylekit-foreground-color: #000000; - --sn-stylekit-contrast-background-color: #f6f6f6; - --sn-stylekit-contrast-foreground-color: #2e2e2e; - --sn-stylekit-contrast-border-color: #e3e3e3; - --sn-stylekit-secondary-background-color: #f6f6f6; - --sn-stylekit-secondary-foreground-color: #2e2e2e; - --sn-stylekit-secondary-border-color: #e3e3e3; - --sn-stylekit-secondary-contrast-background-color: #e3e3e3; - --sn-stylekit-secondary-contrast-foreground-color: #2e2e2e; - --sn-stylekit-secondary-contrast-border-color: #a2a2a2; - --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); - --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color); - --sn-stylekit-paragraph-text-color: #454545; - --sn-stylekit-input-placeholder-color: #a8a8a8; - --sn-stylekit-input-border-color: #e3e3e3; - --sn-stylekit-scrollbar-thumb-color: #dfdfdf; - --sn-stylekit-scrollbar-track-border-color: #e7e7e7; - --sn-stylekit-menu-border: none; - --sn-stylekit-general-border-radius: 2px; - --sn-stylekit-list-item-highlight-color: var(--sn-stylekit-grey-5); - --sn-stylekit-simplified-chinese-font: 'Microsoft Yahei', '微软雅黑体'; - --sn-stylekit-monospace-font: 'SFMono-Regular', Consolas, 'Liberation Mono', - Menlo, 'Ubuntu Mono', 'Courier New', monospace; - --sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', - 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', - 'Helvetica Neue', var(--sn-stylekit-simplified-chinese-font), sans-serif; - --sn-stylekit-editor-font-family: var(--sn-stylekit-sans-serif-font); - --sn-stylekit-theme-type: light; - --sn-stylekit-theme-name: sn-light; - --sn-stylekit-accessory-tint-color-1: #086dd6; - --sn-stylekit-accessory-tint-color-2: #ea6595; - --sn-stylekit-accessory-tint-color-3: #ebad00; - --sn-stylekit-accessory-tint-color-4: #7049cf; - --sn-stylekit-accessory-tint-color-5: #1aa772; - --sn-stylekit-accessory-tint-color-6: #f28c52; -} - -.sn-component { - /** - * Do not use these rules without explicitly handling focus in a different - * way, otherwise keyboard focus will break. - */ - /** - * A button that is just an icon. Separated from .sn-button because there - * is almost no style overlap. - */ - font-family: var(--sn-stylekit-sans-serif-font); - -webkit-font-smoothing: antialiased; - color: var(--sn-stylekit-foreground-color); -} - -.sn-component .sk-panel { - box-shadow: 0px 2px 5px var(--sn-stylekit-shadow-color); - background-color: var(--sn-stylekit-background-color); - border: 1px solid var(--sn-stylekit-border-color); - border-radius: var(--sn-stylekit-general-border-radius); - display: flex; - flex-direction: column; - overflow: auto; - flex-grow: 1; -} - -.sn-component .sk-panel a:hover { - text-decoration: underline; -} - -.sn-component .sk-panel.static { - box-shadow: none; - border: none; - border-radius: 0; -} - -.sn-component .sk-panel .sk-panel-header { - flex-shrink: 0; - /* Don't allow to condense in height */ - display: flex; - justify-content: space-between; - padding: 0.89375rem 1.625rem; - border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); - background-color: var(--sn-stylekit-contrast-background-color); - color: var(--sn-stylekit-contrast-foreground-color); - align-items: center; -} - -.sn-component .sk-panel .sk-panel-header .sk-panel-header-title { - font-size: var(--sn-stylekit-font-size-h1); - font-weight: 500; -} - -.sn-component .sk-panel .sk-panel-header .close-button { - font-weight: bold; -} - -.sn-component .sk-panel .sk-footer, -.sn-component .sk-panel .sk-panel-footer { - padding: 0.8125rem 1.625rem; - border-top: 1px solid var(--sn-stylekit-border-color); - box-sizing: border-box; -} - -.sn-component .sk-panel .sk-footer.extra-padding, -.sn-component .sk-panel .sk-panel-footer.extra-padding { - padding: 1.625rem 1.625rem; -} - -.sn-component .sk-panel .sk-footer .left, -.sn-component .sk-panel .sk-panel-footer .left { - text-align: left; - display: block; -} - -.sn-component .sk-panel .sk-footer .right, -.sn-component .sk-panel .sk-panel-footer .right { - text-align: right; - display: block; -} - -.sn-component .sk-panel .sk-panel-content { - padding: 1.3rem 1.625rem; - padding-bottom: 0; - flex-grow: 1; - overflow: scroll; - height: 100%; - overflow-y: auto !important; - overflow-x: auto !important; -} - -.sn-component .sk-panel .sk-panel-content .sk-p, -.sn-component .sk-panel .sk-panel-content .sk-li { - color: var(--sn-stylekit-paragraph-text-color); - line-height: 1.3; -} - -.sn-component .sk-panel-section { - padding-bottom: 1.3rem; - display: flex; - flex-direction: column; -} - -.sn-component .sk-panel-section.sk-panel-hero { - text-align: center; -} - -.sn-component .sk-panel-section .sk-p:last-child { - margin-bottom: 0; -} - -.sn-component .sk-panel-section:not(:last-child) { - margin-bottom: 1.21875rem; - border-bottom: 1px solid var(--sn-stylekit-border-color); -} - -.sn-component .sk-panel-section:not(:last-child).no-border { - border-bottom: none; -} - -.sn-component .sk-panel-section:last-child { - margin-bottom: 0.5rem; -} - -.sn-component .sk-panel-section.no-bottom-pad { - padding-bottom: 0; - margin-bottom: 0; -} - -.sn-component .sk-panel-section .sk-panel-section-title { - margin-bottom: 0.40625rem; - font-weight: bold; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-panel-section .sk-panel-section-outer-title { - border-bottom: 1px solid var(--sn-stylekit-border-color); - padding-bottom: 0.73125rem; - margin-top: 1.70625rem; - margin-bottom: 15px; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-panel-section .sk-panel-section-subtitle { - font-size: var(--sn-stylekit-font-size-h5); - margin-bottom: 2px; -} - -.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle { - font-weight: normal; - opacity: 0.6; -} - -.sn-component .sk-panel-section .text-content .sk-p { - margin-bottom: 0.8175rem; -} - -.sn-component .sk-panel-section .text-content p:first-child { - margin-top: 0.24375rem; -} - -.sn-component .sk-panel-row { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 0.325rem; -} - -.sn-component .sk-panel-row.centered { - justify-content: center; -} - -.sn-component .sk-panel-row.justify-right { - justify-content: flex-end; -} - -.sn-component .sk-panel-row.justify-left { - justify-content: flex-start; -} - -.sn-component .sk-panel-row.align-top { - align-items: flex-start; -} - -.sn-component .sk-panel-row .sk-panel-column.stretch { - width: 100%; -} - -.sn-component .sk-panel-row.default-padding, .sn-component .sk-panel-row:not(:last-child) { - padding-bottom: 0.325rem; -} - -.sn-component .sk-panel-row.condensed { - padding-top: 0.1625rem; - padding-bottom: 0.1625rem; -} - -.sn-component .sk-panel-row .sk-p { - margin: 0; - padding: 0; -} - -.sn-component .vertical-rule { - background-color: var(--sn-stylekit-border-color); - height: 1.21875rem; - width: 1px; -} - -.sn-component .sk-panel-form { - width: 100%; -} - -.sn-component .sk-panel-form.half { - width: 50%; -} - -.sn-component .sk-panel-form .form-submit { - margin-top: 0.121875rem; -} - -.sn-component .right-aligned { - justify-content: flex-end; - text-align: right; -} - -.sn-component .sk-menu-panel { - background-color: var(--sn-stylekit-background-color); - border: 1px solid var(--sn-stylekit-contrast-border-color); - border-radius: var(--sn-stylekit-general-border-radius); - overflow: scroll; - user-select: none; - overflow-y: auto !important; - overflow-x: auto !important; -} - -.sn-component .sk-menu-panel .sk-menu-panel-header { - padding: 0.65rem 0.8125rem; - border-bottom: 1px solid var(--sn-stylekit-contrast-border-color); - background-color: var(--sn-stylekit-contrast-background-color); - color: var(--sn-stylekit-contrast-foreground-color); - display: flex; - justify-content: space-between; - align-items: center; -} - -.sn-component .sk-menu-panel .sk-menu-panel-header-title { - font-weight: bold; - font-size: var(--sn-stylekit-font-size-h4); -} - -.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle { - margin-top: 0.1625rem; - opacity: 0.6; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row { - padding: 0.8125rem 0.8125rem; - cursor: pointer; - display: flex; - flex-direction: row; - justify-content: space-between; - border-bottom: 1px solid var(--sn-stylekit-border-color); -} - -.sn-component .sk-menu-panel .sk-menu-panel-row:hover { - background-color: var(--sn-stylekit-contrast-background-color); - color: var(--sn-stylekit-contrast-foreground-color); - border-color: var(--sn-stylekit-contrast-border-color); -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column { - display: flex; - justify-content: center; - flex-direction: column; - /* Nested row */ -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child) { - padding-left: 1rem; - padding-right: 0.121875rem; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch { - width: 100%; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows { - margin-top: 0.8125rem; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row, -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow { - border: 1px solid var(--sn-stylekit-contrast-border-color); - margin-top: -1px; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover, -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover { - background-color: var(--sn-stylekit-background-color); -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left { - display: flex; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle { - font-size: var(--sn-stylekit-font-size-h6); - font-weight: normal; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label, .sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle { - font-size: var(--sn-stylekit-font-size-p); - font-weight: bold; -} - -.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel { - font-size: var(--sn-stylekit-font-size-h5); - margin-top: 0.1625rem; - opacity: 0.6; -} - -.sn-component .red { - color: var(--sn-stylekit-danger-color); -} - -.sn-component .tinted { - color: var(--sn-stylekit-info-color); -} - -.sn-component .selectable { - user-select: text !important; - -ms-user-select: text !important; - -moz-user-select: text !important; - -webkit-user-select: text !important; -} - -.sn-component .sk-h1, -.sn-component .sk-h2, -.sn-component .sk-h3, -.sn-component .sk-h4, -.sn-component .sk-h5 { - margin: 0; - padding: 0; - font-weight: normal; -} - -.sn-component .sk-h1 { - font-weight: 500; - font-size: var(--sn-stylekit-font-size-h1); - line-height: 1.54375rem; -} - -.sn-component .sk-h2 { - font-size: var(--sn-stylekit-font-size-h2); - line-height: 1.4625rem; -} - -.sn-component .sk-h3 { - font-size: var(--sn-stylekit-font-size-h3); - line-height: 1.38125rem; -} - -.sn-component .sk-h4 { - font-size: var(--sn-stylekit-font-size-p); - line-height: 1.1375rem; -} - -.sn-component .sk-h5 { - font-size: var(--sn-stylekit-font-size-h5); -} - -.sn-component .sk-bold { - font-weight: bold; -} - -.sn-component .sk-font-small { - font-size: var(--sn-stylekit-font-size-h5); -} - -.sn-component .sk-font-normal { - font-size: var(--sn-stylekit-font-size-p); -} - -.sn-component .sk-font-large { - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component a.sk-a { - cursor: pointer; - user-select: none; -} - -.sn-component a.sk-a.disabled { - color: var(--sn-stylekit-neutral-color); - opacity: 0.6; -} - -.sn-component a.sk-a.boxed { - border-radius: var(--sn-stylekit-general-border-radius); - padding: 0.24375rem 0.325rem; -} - -.sn-component a.sk-a.boxed:hover { - text-decoration: none; -} - -.sn-component a.sk-a.boxed.neutral { - background-color: var(--sn-stylekit-neutral-color); - color: var(--sn-stylekit-neutral-contrast-color); -} - -.sn-component a.sk-a.boxed.info { - background-color: var(--sn-stylekit-info-color); - color: var(--sn-stylekit-info-contrast-color); -} - -.sn-component a.sk-a.boxed.warning { - background-color: var(--sn-stylekit-warning-color); - color: var(--sn-stylekit-warning-contrast-color); -} - -.sn-component a.sk-a.boxed.danger { - background-color: var(--sn-stylekit-danger-color); - color: var(--sn-stylekit-danger-contrast-color); -} - -.sn-component a.sk-a.boxed.success { - background-color: var(--sn-stylekit-success-color); - color: var(--sn-stylekit-success-contrast-color); -} - -.sn-component .wrap { - word-wrap: break-word; -} - -.sn-component *.sk-base { - color: var(--sn-stylekit-foreground-color); -} - -.sn-component *.contrast { - color: var(--sn-stylekit-contrast-foreground-color); -} - -.sn-component *.neutral { - color: var(--sn-stylekit-neutral-color); -} - -.sn-component *.info { - color: var(--sn-stylekit-info-color); -} - -.sn-component *.info-contrast { - color: var(--sn-stylekit-info-contrast-color); -} - -.sn-component *.warning { - color: var(--sn-stylekit-warning-color); -} - -.sn-component *.danger { - color: var(--sn-stylekit-danger-color); -} - -.sn-component *.success { - color: var(--sn-stylekit-success-color); -} - -.sn-component *.info-i { - color: var(--sn-stylekit-info-color) !important; -} - -.sn-component *.warning-i { - color: var(--sn-stylekit-warning-color) !important; -} - -.sn-component *.danger-i { - color: var(--sn-stylekit-danger-color) !important; -} - -.sn-component *.success-i { - color: var(--sn-stylekit-success-color) !important; -} - -.sn-component *.clear { - background-color: transparent; - border: none; -} - -.sn-component .center-text { - text-align: center !important; - justify-content: center !important; -} - -.sn-component p.sk-p { - margin: 0.40625rem 0; -} - -.sn-component input.sk-input { - box-sizing: border-box; - padding: 0.56875rem 0.65rem; - margin: 0.24375rem 0; - border: none; - font-size: var(--sn-stylekit-font-size-h3); - width: 100%; - outline: 0; - resize: none; -} - -.sn-component input.sk-input.clear { - color: var(--sn-stylekit-foreground-color); - background-color: transparent; - border: none; -} - -.sn-component input.sk-input.no-border { - border: none; -} - -.sn-component .sk-label, .sn-component .sk-panel-section .sk-panel-section-subtitle { - font-weight: bold; -} - -.sn-component .sk-label.no-bold, .sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle { - font-weight: normal; -} - -.sn-component label.sk-label, .sn-component .sk-panel-section label.sk-panel-section-subtitle { - margin: 0.56875rem 0; - display: block; -} - -.sn-component label.sk-label input[type='checkbox'], .sn-component .sk-panel-section label.sk-panel-section-subtitle input[type='checkbox'], -.sn-component input[type='radio'] { - width: auto; - margin-right: 0.365625rem; - /* Space after checkbox */ - vertical-align: middle; -} - -.sn-component .sk-horizontal-group > *, .sn-component .sk-input-group > * { - display: inline-block; - vertical-align: middle; -} - -.sn-component .sk-horizontal-group > *:not(:first-child), .sn-component .sk-input-group > *:not(:first-child) { - margin-left: 0.73125rem; -} - -.sn-component .sk-border-bottom { - border-bottom: 1px solid var(--sn-stylekit-border-color); -} - -.sn-component .sk-checkbox-group { - padding-top: 0.40625rem; - padding-bottom: 0.24375rem; -} - -.sn-component ::placeholder { - /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: var(--sn-stylekit-input-placeholder-color); -} - -.sn-component :-ms-input-placeholder { - /* Internet Explorer 10-11 */ - color: var(--sn-stylekit-input-placeholder-color); -} - -.sn-component ::-ms-input-placeholder { - /* Microsoft Edge */ - color: var(--sn-stylekit-input-placeholder-color); -} - -.sn-component .sk-button-group.stretch { - display: flex; - width: 100%; -} - -.sn-component .sk-button-group.stretch .sk-button, .sn-component .sk-button-group.stretch .sk-box { - display: block; - flex-grow: 1; - text-align: center; -} - -.sn-component .sk-button-group .sk-button, .sn-component .sk-button-group .sk-box { - display: inline-block; - vertical-align: middle; -} - -.sn-component .sk-button-group .sk-button:not(:last-child), .sn-component .sk-button-group .sk-box:not(:last-child) { - margin-right: 5px; -} - -.sn-component .sk-button-group .sk-button:not(:last-child).featured, .sn-component .sk-button-group .sk-box:not(:last-child).featured { - margin-right: 8px; -} - -.sn-component .sk-segmented-buttons { - display: flex; - flex-direction: row; -} - -.sn-component .sk-segmented-buttons .sk-button, .sn-component .sk-segmented-buttons .sk-box { - border-radius: 0; - white-space: nowrap; - margin: 0; - margin-left: 0 !important; - margin-right: 0 !important; -} - -.sn-component .sk-segmented-buttons .sk-button:not(:last-child), .sn-component .sk-segmented-buttons .sk-box:not(:last-child) { - border-right: none; - border-radius: 0; -} - -.sn-component .sk-segmented-buttons .sk-button:first-child, .sn-component .sk-segmented-buttons .sk-box:first-child { - border-top-left-radius: var(--sn-stylekit-general-border-radius); - border-bottom-left-radius: var(--sn-stylekit-general-border-radius); - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.sn-component .sk-segmented-buttons .sk-button:last-child, .sn-component .sk-segmented-buttons .sk-box:last-child { - border-top-right-radius: var(--sn-stylekit-general-border-radius); - border-bottom-right-radius: var(--sn-stylekit-general-border-radius); - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.sn-component .sk-box-group .sk-box { - display: inline-block; -} - -.sn-component .sk-box-group .sk-box:not(:last-child) { - margin-right: 5px; -} - -.sn-component .sk-a.button { - text-decoration: none; -} - -.sn-component .sk-button, .sn-component .sk-box { - display: table; - padding: 0.40625rem 0.56875rem; - font-size: var(--sn-stylekit-font-size-h5); - cursor: pointer; - text-align: center; - user-select: none; -} - -.sn-component .sk-button.no-hover-border:after, .sn-component .no-hover-border.sk-box:after { - color: transparent !important; -} - -.sn-component .sk-button.wide, .sn-component .wide.sk-box { - padding: 0.24375rem 1.38125rem; -} - -.sn-component .sk-button > .sk-label, .sn-component .sk-box > .sk-label, .sn-component .sk-panel-section .sk-button > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-box > .sk-panel-section-subtitle { - font-weight: bold; - display: block; - text-align: center; -} - -.sn-component .sk-button.big, .sn-component .big.sk-box { - font-size: var(--sn-stylekit-font-size-h3); - padding: 0.56875rem 2.03125rem; -} - -.sn-component .sk-box { - padding: 2.03125rem 1.21875rem; -} - -.sn-component .sk-button.sk-base, .sn-component .sk-base.sk-box, -.sn-component .sk-box.sk-base, -.sn-component .sk-circle.sk-base { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-foreground-color); - position: relative; - background-color: var(--sn-stylekit-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-background-color); -} - -.sn-component .sk-button.sk-base *, .sn-component .sk-base.sk-box *, -.sn-component .sk-box.sk-base *, -.sn-component .sk-circle.sk-base * { - position: relative; -} - -.sn-component .sk-button.sk-base:before, .sn-component .sk-base.sk-box:before, -.sn-component .sk-box.sk-base:before, -.sn-component .sk-circle.sk-base:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.sk-base:after, .sn-component .sk-base.sk-box:after, -.sn-component .sk-box.sk-base:after, -.sn-component .sk-circle.sk-base:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-background-color); -} - -.sn-component .sk-button.sk-base:hover:before, .sn-component .sk-base.sk-box:hover:before, -.sn-component .sk-box.sk-base:hover:before, -.sn-component .sk-circle.sk-base:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.sk-base.no-bg, .sn-component .sk-base.no-bg.sk-box, -.sn-component .sk-box.sk-base.no-bg, -.sn-component .sk-circle.sk-base.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.sk-base.no-bg:before, .sn-component .sk-base.no-bg.sk-box:before, -.sn-component .sk-box.sk-base.no-bg:before, -.sn-component .sk-circle.sk-base.no-bg:before { - content: none; -} - -.sn-component .sk-button.sk-base.featured, .sn-component .sk-base.featured.sk-box, -.sn-component .sk-box.sk-base.featured, -.sn-component .sk-circle.sk-base.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.sk-base.featured:before, .sn-component .sk-base.featured.sk-box:before, -.sn-component .sk-box.sk-base.featured:before, -.sn-component .sk-circle.sk-base.featured:before { - opacity: 1; -} - -.sn-component .sk-button.contrast, .sn-component .contrast.sk-box, -.sn-component .sk-box.contrast, -.sn-component .sk-circle.contrast { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-contrast-foreground-color); - position: relative; - background-color: var(--sn-stylekit-contrast-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-contrast-background-color); -} - -.sn-component .sk-button.contrast *, .sn-component .contrast.sk-box *, -.sn-component .sk-box.contrast *, -.sn-component .sk-circle.contrast * { - position: relative; -} - -.sn-component .sk-button.contrast:before, .sn-component .contrast.sk-box:before, -.sn-component .sk-box.contrast:before, -.sn-component .sk-circle.contrast:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-contrast-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.contrast:after, .sn-component .contrast.sk-box:after, -.sn-component .sk-box.contrast:after, -.sn-component .sk-circle.contrast:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-contrast-background-color); -} - -.sn-component .sk-button.contrast:hover:before, .sn-component .contrast.sk-box:hover:before, -.sn-component .sk-box.contrast:hover:before, -.sn-component .sk-circle.contrast:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.contrast.no-bg, .sn-component .contrast.no-bg.sk-box, -.sn-component .sk-box.contrast.no-bg, -.sn-component .sk-circle.contrast.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.contrast.no-bg:before, .sn-component .contrast.no-bg.sk-box:before, -.sn-component .sk-box.contrast.no-bg:before, -.sn-component .sk-circle.contrast.no-bg:before { - content: none; -} - -.sn-component .sk-button.contrast.featured, .sn-component .contrast.featured.sk-box, -.sn-component .sk-box.contrast.featured, -.sn-component .sk-circle.contrast.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.contrast.featured:before, .sn-component .contrast.featured.sk-box:before, -.sn-component .sk-box.contrast.featured:before, -.sn-component .sk-circle.contrast.featured:before { - opacity: 1; -} - -.sn-component .sk-button.sk-secondary, .sn-component .sk-secondary.sk-box, -.sn-component .sk-box.sk-secondary, -.sn-component .sk-circle.sk-secondary { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-secondary-foreground-color); - position: relative; - background-color: var(--sn-stylekit-secondary-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-secondary-background-color); -} - -.sn-component .sk-button.sk-secondary *, .sn-component .sk-secondary.sk-box *, -.sn-component .sk-box.sk-secondary *, -.sn-component .sk-circle.sk-secondary * { - position: relative; -} - -.sn-component .sk-button.sk-secondary:before, .sn-component .sk-secondary.sk-box:before, -.sn-component .sk-box.sk-secondary:before, -.sn-component .sk-circle.sk-secondary:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-secondary-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.sk-secondary:after, .sn-component .sk-secondary.sk-box:after, -.sn-component .sk-box.sk-secondary:after, -.sn-component .sk-circle.sk-secondary:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-secondary-background-color); -} - -.sn-component .sk-button.sk-secondary:hover:before, .sn-component .sk-secondary.sk-box:hover:before, -.sn-component .sk-box.sk-secondary:hover:before, -.sn-component .sk-circle.sk-secondary:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.sk-secondary.no-bg, .sn-component .sk-secondary.no-bg.sk-box, -.sn-component .sk-box.sk-secondary.no-bg, -.sn-component .sk-circle.sk-secondary.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.sk-secondary.no-bg:before, .sn-component .sk-secondary.no-bg.sk-box:before, -.sn-component .sk-box.sk-secondary.no-bg:before, -.sn-component .sk-circle.sk-secondary.no-bg:before { - content: none; -} - -.sn-component .sk-button.sk-secondary.featured, .sn-component .sk-secondary.featured.sk-box, -.sn-component .sk-box.sk-secondary.featured, -.sn-component .sk-circle.sk-secondary.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.sk-secondary.featured:before, .sn-component .sk-secondary.featured.sk-box:before, -.sn-component .sk-box.sk-secondary.featured:before, -.sn-component .sk-circle.sk-secondary.featured:before { - opacity: 1; -} - -.sn-component .sk-button.sk-secondary-contrast, .sn-component .sk-secondary-contrast.sk-box, -.sn-component .sk-box.sk-secondary-contrast, -.sn-component .sk-circle.sk-secondary-contrast { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-secondary-contrast-foreground-color); - position: relative; - background-color: var(--sn-stylekit-secondary-contrast-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-secondary-contrast-background-color); -} - -.sn-component .sk-button.sk-secondary-contrast *, .sn-component .sk-secondary-contrast.sk-box *, -.sn-component .sk-box.sk-secondary-contrast *, -.sn-component .sk-circle.sk-secondary-contrast * { - position: relative; -} - -.sn-component .sk-button.sk-secondary-contrast:before, .sn-component .sk-secondary-contrast.sk-box:before, -.sn-component .sk-box.sk-secondary-contrast:before, -.sn-component .sk-circle.sk-secondary-contrast:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-secondary-contrast-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.sk-secondary-contrast:after, .sn-component .sk-secondary-contrast.sk-box:after, -.sn-component .sk-box.sk-secondary-contrast:after, -.sn-component .sk-circle.sk-secondary-contrast:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-secondary-contrast-background-color); -} - -.sn-component .sk-button.sk-secondary-contrast:hover:before, .sn-component .sk-secondary-contrast.sk-box:hover:before, -.sn-component .sk-box.sk-secondary-contrast:hover:before, -.sn-component .sk-circle.sk-secondary-contrast:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.sk-secondary-contrast.no-bg, .sn-component .sk-secondary-contrast.no-bg.sk-box, -.sn-component .sk-box.sk-secondary-contrast.no-bg, -.sn-component .sk-circle.sk-secondary-contrast.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.sk-secondary-contrast.no-bg:before, .sn-component .sk-secondary-contrast.no-bg.sk-box:before, -.sn-component .sk-box.sk-secondary-contrast.no-bg:before, -.sn-component .sk-circle.sk-secondary-contrast.no-bg:before { - content: none; -} - -.sn-component .sk-button.sk-secondary-contrast.featured, .sn-component .sk-secondary-contrast.featured.sk-box, -.sn-component .sk-box.sk-secondary-contrast.featured, -.sn-component .sk-circle.sk-secondary-contrast.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.sk-secondary-contrast.featured:before, .sn-component .sk-secondary-contrast.featured.sk-box:before, -.sn-component .sk-box.sk-secondary-contrast.featured:before, -.sn-component .sk-circle.sk-secondary-contrast.featured:before { - opacity: 1; -} - -.sn-component .sk-button.neutral, .sn-component .neutral.sk-box, -.sn-component .sk-box.neutral, -.sn-component .sk-circle.neutral { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-neutral-contrast-color); - position: relative; - background-color: var(--sn-stylekit-neutral-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-neutral-color); -} - -.sn-component .sk-button.neutral *, .sn-component .neutral.sk-box *, -.sn-component .sk-box.neutral *, -.sn-component .sk-circle.neutral * { - position: relative; -} - -.sn-component .sk-button.neutral:before, .sn-component .neutral.sk-box:before, -.sn-component .sk-box.neutral:before, -.sn-component .sk-circle.neutral:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-neutral-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.neutral:after, .sn-component .neutral.sk-box:after, -.sn-component .sk-box.neutral:after, -.sn-component .sk-circle.neutral:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-neutral-color); -} - -.sn-component .sk-button.neutral:hover:before, .sn-component .neutral.sk-box:hover:before, -.sn-component .sk-box.neutral:hover:before, -.sn-component .sk-circle.neutral:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.neutral.no-bg, .sn-component .neutral.no-bg.sk-box, -.sn-component .sk-box.neutral.no-bg, -.sn-component .sk-circle.neutral.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.neutral.no-bg:before, .sn-component .neutral.no-bg.sk-box:before, -.sn-component .sk-box.neutral.no-bg:before, -.sn-component .sk-circle.neutral.no-bg:before { - content: none; -} - -.sn-component .sk-button.neutral.featured, .sn-component .neutral.featured.sk-box, -.sn-component .sk-box.neutral.featured, -.sn-component .sk-circle.neutral.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.neutral.featured:before, .sn-component .neutral.featured.sk-box:before, -.sn-component .sk-box.neutral.featured:before, -.sn-component .sk-circle.neutral.featured:before { - opacity: 1; -} - -.sn-component .sk-button.info, .sn-component .info.sk-box, -.sn-component .sk-box.info, -.sn-component .sk-circle.info { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-info-contrast-color); - position: relative; - background-color: var(--sn-stylekit-info-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-info-color); -} - -.sn-component .sk-button.info *, .sn-component .info.sk-box *, -.sn-component .sk-box.info *, -.sn-component .sk-circle.info * { - position: relative; -} - -.sn-component .sk-button.info:before, .sn-component .info.sk-box:before, -.sn-component .sk-box.info:before, -.sn-component .sk-circle.info:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-info-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.info:after, .sn-component .info.sk-box:after, -.sn-component .sk-box.info:after, -.sn-component .sk-circle.info:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-info-color); -} - -.sn-component .sk-button.info:hover:before, .sn-component .info.sk-box:hover:before, -.sn-component .sk-box.info:hover:before, -.sn-component .sk-circle.info:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.info.no-bg, .sn-component .info.no-bg.sk-box, -.sn-component .sk-box.info.no-bg, -.sn-component .sk-circle.info.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.info.no-bg:before, .sn-component .info.no-bg.sk-box:before, -.sn-component .sk-box.info.no-bg:before, -.sn-component .sk-circle.info.no-bg:before { - content: none; -} - -.sn-component .sk-button.info.featured, .sn-component .info.featured.sk-box, -.sn-component .sk-box.info.featured, -.sn-component .sk-circle.info.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.info.featured:before, .sn-component .info.featured.sk-box:before, -.sn-component .sk-box.info.featured:before, -.sn-component .sk-circle.info.featured:before { - opacity: 1; -} - -.sn-component .sk-button.warning, .sn-component .warning.sk-box, -.sn-component .sk-box.warning, -.sn-component .sk-circle.warning { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-warning-contrast-color); - position: relative; - background-color: var(--sn-stylekit-warning-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-warning-color); -} - -.sn-component .sk-button.warning *, .sn-component .warning.sk-box *, -.sn-component .sk-box.warning *, -.sn-component .sk-circle.warning * { - position: relative; -} - -.sn-component .sk-button.warning:before, .sn-component .warning.sk-box:before, -.sn-component .sk-box.warning:before, -.sn-component .sk-circle.warning:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-warning-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.warning:after, .sn-component .warning.sk-box:after, -.sn-component .sk-box.warning:after, -.sn-component .sk-circle.warning:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-warning-color); -} - -.sn-component .sk-button.warning:hover:before, .sn-component .warning.sk-box:hover:before, -.sn-component .sk-box.warning:hover:before, -.sn-component .sk-circle.warning:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.warning.no-bg, .sn-component .warning.no-bg.sk-box, -.sn-component .sk-box.warning.no-bg, -.sn-component .sk-circle.warning.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.warning.no-bg:before, .sn-component .warning.no-bg.sk-box:before, -.sn-component .sk-box.warning.no-bg:before, -.sn-component .sk-circle.warning.no-bg:before { - content: none; -} - -.sn-component .sk-button.warning.featured, .sn-component .warning.featured.sk-box, -.sn-component .sk-box.warning.featured, -.sn-component .sk-circle.warning.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.warning.featured:before, .sn-component .warning.featured.sk-box:before, -.sn-component .sk-box.warning.featured:before, -.sn-component .sk-circle.warning.featured:before { - opacity: 1; -} - -.sn-component .sk-button.danger, .sn-component .danger.sk-box, -.sn-component .sk-box.danger, -.sn-component .sk-circle.danger { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-danger-contrast-color); - position: relative; - background-color: var(--sn-stylekit-danger-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-danger-color); -} - -.sn-component .sk-button.danger *, .sn-component .danger.sk-box *, -.sn-component .sk-box.danger *, -.sn-component .sk-circle.danger * { - position: relative; -} - -.sn-component .sk-button.danger:before, .sn-component .danger.sk-box:before, -.sn-component .sk-box.danger:before, -.sn-component .sk-circle.danger:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-danger-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.danger:after, .sn-component .danger.sk-box:after, -.sn-component .sk-box.danger:after, -.sn-component .sk-circle.danger:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-danger-color); -} - -.sn-component .sk-button.danger:hover:before, .sn-component .danger.sk-box:hover:before, -.sn-component .sk-box.danger:hover:before, -.sn-component .sk-circle.danger:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.danger.no-bg, .sn-component .danger.no-bg.sk-box, -.sn-component .sk-box.danger.no-bg, -.sn-component .sk-circle.danger.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.danger.no-bg:before, .sn-component .danger.no-bg.sk-box:before, -.sn-component .sk-box.danger.no-bg:before, -.sn-component .sk-circle.danger.no-bg:before { - content: none; -} - -.sn-component .sk-button.danger.featured, .sn-component .danger.featured.sk-box, -.sn-component .sk-box.danger.featured, -.sn-component .sk-circle.danger.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.danger.featured:before, .sn-component .danger.featured.sk-box:before, -.sn-component .sk-box.danger.featured:before, -.sn-component .sk-circle.danger.featured:before { - opacity: 1; -} - -.sn-component .sk-button.success, .sn-component .success.sk-box, -.sn-component .sk-box.success, -.sn-component .sk-circle.success { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-success-contrast-color); - position: relative; - background-color: var(--sn-stylekit-success-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-success-color); -} - -.sn-component .sk-button.success *, .sn-component .success.sk-box *, -.sn-component .sk-box.success *, -.sn-component .sk-circle.success * { - position: relative; -} - -.sn-component .sk-button.success:before, .sn-component .success.sk-box:before, -.sn-component .sk-box.success:before, -.sn-component .sk-circle.success:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-success-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-button.success:after, .sn-component .success.sk-box:after, -.sn-component .sk-box.success:after, -.sn-component .sk-circle.success:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-success-color); -} - -.sn-component .sk-button.success:hover:before, .sn-component .success.sk-box:hover:before, -.sn-component .sk-box.success:hover:before, -.sn-component .sk-circle.success:hover:before { - filter: brightness(130%); -} - -.sn-component .sk-button.success.no-bg, .sn-component .success.no-bg.sk-box, -.sn-component .sk-box.success.no-bg, -.sn-component .sk-circle.success.no-bg { - background-color: transparent; -} - -.sn-component .sk-button.success.no-bg:before, .sn-component .success.no-bg.sk-box:before, -.sn-component .sk-box.success.no-bg:before, -.sn-component .sk-circle.success.no-bg:before { - content: none; -} - -.sn-component .sk-button.success.featured, .sn-component .success.featured.sk-box, -.sn-component .sk-box.success.featured, -.sn-component .sk-circle.success.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-button.success.featured:before, .sn-component .success.featured.sk-box:before, -.sn-component .sk-box.success.featured:before, -.sn-component .sk-circle.success.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.contrast, -.sn-component .sk-input.contrast { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-contrast-foreground-color); - position: relative; - background-color: var(--sn-stylekit-contrast-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-contrast-border-color); - border: 1px solid var(--sn-stylekit-contrast-border-color); -} - -.sn-component .sk-notification.contrast *, -.sn-component .sk-input.contrast * { - position: relative; -} - -.sn-component .sk-notification.contrast:before, -.sn-component .sk-input.contrast:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-contrast-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.contrast:after, -.sn-component .sk-input.contrast:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - color: var(--sn-stylekit-contrast-border-color); - border-color: var(--sn-stylekit-contrast-border-color); -} - -.sn-component .sk-notification.contrast.no-bg, -.sn-component .sk-input.contrast.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.contrast.no-bg:before, -.sn-component .sk-input.contrast.no-bg:before { - content: none; -} - -.sn-component .sk-notification.contrast.featured, -.sn-component .sk-input.contrast.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.contrast.featured:before, -.sn-component .sk-input.contrast.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.sk-secondary, -.sn-component .sk-input.sk-secondary { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-secondary-foreground-color); - position: relative; - background-color: var(--sn-stylekit-secondary-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-secondary-border-color); - border: 1px solid var(--sn-stylekit-secondary-border-color); -} - -.sn-component .sk-notification.sk-secondary *, -.sn-component .sk-input.sk-secondary * { - position: relative; -} - -.sn-component .sk-notification.sk-secondary:before, -.sn-component .sk-input.sk-secondary:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-secondary-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.sk-secondary:after, -.sn-component .sk-input.sk-secondary:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - color: var(--sn-stylekit-secondary-border-color); - border-color: var(--sn-stylekit-secondary-border-color); -} - -.sn-component .sk-notification.sk-secondary.no-bg, -.sn-component .sk-input.sk-secondary.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.sk-secondary.no-bg:before, -.sn-component .sk-input.sk-secondary.no-bg:before { - content: none; -} - -.sn-component .sk-notification.sk-secondary.featured, -.sn-component .sk-input.sk-secondary.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.sk-secondary.featured:before, -.sn-component .sk-input.sk-secondary.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.sk-secondary-contrast, -.sn-component .sk-input.sk-secondary-contrast { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-secondary-contrast-foreground-color); - position: relative; - background-color: var(--sn-stylekit-secondary-contrast-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-secondary-contrast-border-color); - border: 1px solid var(--sn-stylekit-secondary-contrast-border-color); -} - -.sn-component .sk-notification.sk-secondary-contrast *, -.sn-component .sk-input.sk-secondary-contrast * { - position: relative; -} - -.sn-component .sk-notification.sk-secondary-contrast:before, -.sn-component .sk-input.sk-secondary-contrast:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-secondary-contrast-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.sk-secondary-contrast:after, -.sn-component .sk-input.sk-secondary-contrast:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - color: var(--sn-stylekit-secondary-contrast-border-color); - border-color: var(--sn-stylekit-secondary-contrast-border-color); -} - -.sn-component .sk-notification.sk-secondary-contrast.no-bg, -.sn-component .sk-input.sk-secondary-contrast.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.sk-secondary-contrast.no-bg:before, -.sn-component .sk-input.sk-secondary-contrast.no-bg:before { - content: none; -} - -.sn-component .sk-notification.sk-secondary-contrast.featured, -.sn-component .sk-input.sk-secondary-contrast.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.sk-secondary-contrast.featured:before, -.sn-component .sk-input.sk-secondary-contrast.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.sk-base, -.sn-component .sk-input.sk-base { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-foreground-color); - position: relative; - background-color: var(--sn-stylekit-background-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-border-color); - border: 1px solid var(--sn-stylekit-border-color); -} - -.sn-component .sk-notification.sk-base *, -.sn-component .sk-input.sk-base * { - position: relative; -} - -.sn-component .sk-notification.sk-base:before, -.sn-component .sk-input.sk-base:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-background-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.sk-base:after, -.sn-component .sk-input.sk-base:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - color: var(--sn-stylekit-border-color); - border-color: var(--sn-stylekit-border-color); -} - -.sn-component .sk-notification.sk-base.no-bg, -.sn-component .sk-input.sk-base.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.sk-base.no-bg:before, -.sn-component .sk-input.sk-base.no-bg:before { - content: none; -} - -.sn-component .sk-notification.sk-base.featured, -.sn-component .sk-input.sk-base.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.sk-base.featured:before, -.sn-component .sk-input.sk-base.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.neutral, -.sn-component .sk-input.neutral { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-neutral-contrast-color); - position: relative; - background-color: var(--sn-stylekit-neutral-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-neutral-color); -} - -.sn-component .sk-notification.neutral *, -.sn-component .sk-input.neutral * { - position: relative; -} - -.sn-component .sk-notification.neutral:before, -.sn-component .sk-input.neutral:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-neutral-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.neutral:after, -.sn-component .sk-input.neutral:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-neutral-color); -} - -.sn-component .sk-notification.neutral.no-bg, -.sn-component .sk-input.neutral.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.neutral.no-bg:before, -.sn-component .sk-input.neutral.no-bg:before { - content: none; -} - -.sn-component .sk-notification.neutral.featured, -.sn-component .sk-input.neutral.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.neutral.featured:before, -.sn-component .sk-input.neutral.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.info, -.sn-component .sk-input.info { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-info-contrast-color); - position: relative; - background-color: var(--sn-stylekit-info-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-info-color); -} - -.sn-component .sk-notification.info *, -.sn-component .sk-input.info * { - position: relative; -} - -.sn-component .sk-notification.info:before, -.sn-component .sk-input.info:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-info-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.info:after, -.sn-component .sk-input.info:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-info-color); -} - -.sn-component .sk-notification.info.no-bg, -.sn-component .sk-input.info.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.info.no-bg:before, -.sn-component .sk-input.info.no-bg:before { - content: none; -} - -.sn-component .sk-notification.info.featured, -.sn-component .sk-input.info.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.info.featured:before, -.sn-component .sk-input.info.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.warning, -.sn-component .sk-input.warning { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-warning-contrast-color); - position: relative; - background-color: var(--sn-stylekit-warning-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-warning-color); -} - -.sn-component .sk-notification.warning *, -.sn-component .sk-input.warning * { - position: relative; -} - -.sn-component .sk-notification.warning:before, -.sn-component .sk-input.warning:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-warning-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.warning:after, -.sn-component .sk-input.warning:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-warning-color); -} - -.sn-component .sk-notification.warning.no-bg, -.sn-component .sk-input.warning.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.warning.no-bg:before, -.sn-component .sk-input.warning.no-bg:before { - content: none; -} - -.sn-component .sk-notification.warning.featured, -.sn-component .sk-input.warning.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.warning.featured:before, -.sn-component .sk-input.warning.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.danger, -.sn-component .sk-input.danger { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-danger-contrast-color); - position: relative; - background-color: var(--sn-stylekit-danger-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-danger-color); -} - -.sn-component .sk-notification.danger *, -.sn-component .sk-input.danger * { - position: relative; -} - -.sn-component .sk-notification.danger:before, -.sn-component .sk-input.danger:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-danger-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.danger:after, -.sn-component .sk-input.danger:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-danger-color); -} - -.sn-component .sk-notification.danger.no-bg, -.sn-component .sk-input.danger.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.danger.no-bg:before, -.sn-component .sk-input.danger.no-bg:before { - content: none; -} - -.sn-component .sk-notification.danger.featured, -.sn-component .sk-input.danger.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.danger.featured:before, -.sn-component .sk-input.danger.featured:before { - opacity: 1; -} - -.sn-component .sk-notification.success, -.sn-component .sk-input.success { - /* - If $border-color is supplied, we use traditional borders for rect. - Only sk-notification and sk-input will supply their own border color because inputs don't seem to support inset shadow borders. - If not, and we're inerferring border from other colors, we use box-shadow, so that we get rounded borders - */ - color: var(--sn-stylekit-success-contrast-color); - position: relative; - background-color: var(--sn-stylekit-success-color); - overflow: hidden; - border-radius: var(--sn-stylekit-general-border-radius); - /* - We use box-shadow instead of border so that the borders are rounded properly around the rect. - We keep border-color as well incase the individual elements want a border in some cases. - */ - border-color: var(--sn-stylekit-success-color); -} - -.sn-component .sk-notification.success *, -.sn-component .sk-input.success * { - position: relative; -} - -.sn-component .sk-notification.success:before, -.sn-component .sk-input.success:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-success-color); - opacity: 1; - border-radius: var(--sn-stylekit-general-border-radius); -} - -.sn-component .sk-notification.success:after, -.sn-component .sk-input.success:after { - content: ''; - display: block; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - border-radius: var(--sn-stylekit-general-border-radius); - pointer-events: none; - box-shadow: inset 0 0 0 1px; - color: var(--sn-stylekit-success-color); -} - -.sn-component .sk-notification.success.no-bg, -.sn-component .sk-input.success.no-bg { - background-color: transparent; -} - -.sn-component .sk-notification.success.no-bg:before, -.sn-component .sk-input.success.no-bg:before { - content: none; -} - -.sn-component .sk-notification.success.featured, -.sn-component .sk-input.success.featured { - border: none; - padding: 0.609375rem 1.015625rem; - font-size: var(--sn-stylekit-font-size-h3); -} - -.sn-component .sk-notification.success.featured:before, -.sn-component .sk-input.success.featured:before { - opacity: 1; -} - -.sn-component .sk-notification { - padding: 0.89375rem 0.8125rem; - margin: 1.1375rem 0; - text-align: left; - cursor: default; -} - -.sn-component .sk-notification.one-line { - padding: 0rem 0.325rem; -} - -.sn-component .sk-notification.stretch { - width: 100%; -} - -.sn-component .sk-notification.dashed { - border-style: dashed; - border-width: 2px; -} - -.sn-component .sk-notification.dashed:after { - box-shadow: none; -} - -.sn-component .sk-notification .sk-notification-title { - font-size: var(--sn-stylekit-font-size-h1); - font-weight: bold; - line-height: 1.54375rem; -} - -.sn-component .sk-notification .sk-notification-text { - line-height: 1.21875rem; - font-size: var(--sn-stylekit-font-size-p); - text-align: left; - font-weight: normal; -} - -.sn-component .sk-circle { - border: 1px solid; - cursor: pointer; - border-color: var(--sn-stylekit-contrast-foreground-color); - background-color: var(--sn-stylekit-contrast-background-color); - padding: 0; - border-radius: 50% !important; - flex-shrink: 0; -} - -.sn-component .sk-circle:before { - border-radius: 50% !important; -} - -.sn-component .sk-circle:after { - border-radius: 50% !important; -} - -.sn-component .sk-circle.small { - width: 11px; - height: 11px; -} - -.sn-component .sk-spinner { - border: 1px solid var(--sn-stylekit-neutral-color); - border-radius: 50%; - animation: rotate 0.8s infinite linear; - border-right-color: transparent; -} - -.sn-component .sk-spinner.small { - width: 12px; - height: 12px; -} - -.sn-component .sk-spinner.info-contrast { - border-color: var(--sn-stylekit-info-contrast-color); - border-right-color: transparent; -} - -.sn-component .sk-spinner.info { - border-color: var(--sn-stylekit-info-color); - border-right-color: transparent; -} - -.sn-component .sk-spinner.warning { - border-color: var(--sn-stylekit-warning-color); - border-right-color: transparent; -} - -.sn-component .sk-spinner.danger { - border-color: var(--sn-stylekit-danger-color); - border-right-color: transparent; -} - -.sn-component .sk-spinner.success { - border-color: var(--sn-stylekit-success-color); - border-right-color: transparent; -} - -@keyframes rotate { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} - -.sn-component .sk-app-bar { - display: flex; - width: 100%; - height: 1.625rem; - padding: 0 0.65rem; - background-color: var(--sn-stylekit-contrast-background-color); - color: var(--sn-stylekit-contrast-foreground-color); - justify-content: space-between; - align-items: center; - border: 1px solid var(--sn-stylekit-contrast-border-color); - user-select: none; -} - -.sn-component .sk-app-bar.no-edges { - border-left: 0; - border-right: 0; -} - -.sn-component .sk-app-bar.no-bottom-edge { - border-bottom: 0; -} - -.sn-component .sk-app-bar .left, -.sn-component .sk-app-bar .right { - display: flex; - height: 100%; -} - -.sn-component .sk-app-bar .sk-app-bar-item { - flex-grow: 1; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; -} - -.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child) { - margin-left: 0.8125rem; -} - -.sn-component .sk-app-bar .sk-app-bar-item.border { - border-left: 1px solid var(--sn-stylekit-contrast-border-color); -} - -.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column { - height: 100%; - display: flex; - align-items: center; -} - -.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column:not(:first-child) { - margin-left: 0.40625rem; -} - -.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column.underline { - border-bottom: 2px solid var(--sn-stylekit-info-color); -} - -.sn-component .sk-app-bar .sk-app-bar-item.no-pointer { - cursor: default; -} - -.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-label:not(.subtle), .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle), .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-panel-section-subtitle:not(.subtle), -.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-sublabel:not(.subtle), -.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-label:not(.subtle), -.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle), -.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-panel-section-subtitle:not(.subtle), -.sn-component .sk-app-bar .sk-app-bar-item:hover > .sk-app-bar-item-column > .sk-sublabel:not(.subtle) { - color: var(--sn-stylekit-info-color); -} - -.sn-component .sk-app-bar .sk-app-bar-item > .sk-label, .sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-panel-section-subtitle, .sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-panel-section-subtitle, -.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-label, -.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle, -.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-panel-section-subtitle { - font-weight: bold; - font-size: var(--sn-stylekit-font-size-h5); - white-space: nowrap; -} - -.sn-component .sk-app-bar .sk-app-bar-item > .sk-sublabel, -.sn-component .sk-app-bar .sk-app-bar-item > .sk-app-bar-item-column > .sk-sublabel { - font-size: var(--sn-stylekit-font-size-h5); - font-weight: normal; - white-space: nowrap; -} - -.sn-component .sk-app-bar .sk-app-bar-item .subtle { - font-weight: normal; - opacity: 0.6; -} - -.sn-component .sk-panel-table { - display: flex; - flex-wrap: wrap; - padding-left: 1px; - padding-top: 1px; -} - -.sn-component .sk-panel-table .sk-panel-table-item { - flex: 45%; - flex-flow: wrap; - border: 1px solid var(--sn-stylekit-border-color); - padding: 0.8125rem; - margin-left: -1px; - margin-top: -1px; - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.sn-component .sk-panel-table .sk-panel-table-item img { - max-width: 100%; - margin-bottom: 0.8125rem; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content { - display: flex; - flex-direction: row; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column { - align-items: center; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch { - width: 100%; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child) { - padding-left: 0.609375rem; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter { - flex-basis: 25%; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters { - flex-basis: 75%; -} - -.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer { - margin-top: 1.015625rem; -} - -.sn-component .sk-panel-table .sk-panel-table-item.no-border { - border: none; -} - -.sn-component .sk-modal { - position: fixed; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - top: 0; - bottom: 0; - z-index: 10000; - width: 100vw; - height: 100vh; - background-color: transparent; - color: var(--sn-stylekit-contrast-foreground-color); - display: flex; - align-items: center; - justify-content: center; -} - -.sn-component .sk-modal .sn-component { - height: 100%; -} - -.sn-component .sk-modal .sn-component .sk-panel { - height: 100%; -} - -.sn-component .sk-modal.auto-height > .sk-modal-content { - height: auto !important; -} - -.sn-component .sk-modal.large > .sk-modal-content { - width: 900px; - height: 600px; -} - -.sn-component .sk-modal.medium > .sk-modal-content { - width: 700px; - height: 500px; -} - -.sn-component .sk-modal.small > .sk-modal-content { - width: 700px; - height: 344px; -} - -.sn-component .sk-modal .sk-modal-background { - position: absolute; - z-index: -1; - width: 100%; - height: 100%; - background-color: var(--sn-stylekit-contrast-background-color); - opacity: 0.7; -} - -.sn-component .sk-modal > .sk-modal-content { - overflow-y: auto; - width: auto; - padding: 0; - padding-bottom: 0; - min-width: 300px; - -webkit-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); - -moz-box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); - box-shadow: 0px 2px 35px 0px rgba(0, 0, 0, 0.19); -} - -@keyframes slide-down { - 0% { - opacity: 0; - transform: translateY(-10px); - } - 100% { - opacity: 1; - transform: translateY(0); - } -} - -.sn-component .slide-down-animation, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover { - animation: slide-down 0.2s ease; -} - -.sn-component .no-border { - border: none; -} - -.sn-component .border-0, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-popover { - border-width: 0px; -} - -.sn-component .border-1, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button { - border-width: 1px; -} - -.sn-component .border-2 { - border-width: 2px; -} - -.sn-component .border-b-1 { - border-bottom-width: 1px; -} - -.sn-component .border-main, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover, .sn-component .sn-icon-button { - border-color: var(--sn-stylekit-border-color); -} - -.sn-component .border-background { - border-color: var(--sn-stylekit-background-color); -} - -.sn-component .border-transparent { - border-color: transparent; -} - -.sn-component .border-info { - border-color: var(--sn-stylekit-info-color); -} - -.sn-component .border-neutral { - border-color: var(--sn-stylekit-neutral-color); -} - -.sn-component .border-rounded-md { - border-radius: 0.375rem; -} - -.sn-component .rounded, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-popover { - border-radius: 0.25rem; -} - -.sn-component .rounded-full, .sn-component .sn-icon-button { - border-radius: 9999px; -} - -.sn-component .border-solid, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-icon-button { - border-style: solid; -} - -.sn-component .border-bottom-solid { - border-bottom-style: solid; -} - -.sn-component .border-box, .sn-component .sn-select { - box-sizing: border-box; -} - -.sn-component .ring-info, .sn-component .focus\:ring-info:focus, .sn-component .sn-icon-button:focus, .sn-component .focus-within\:ring-info:focus-within { - box-shadow: 0 0 0 2px var(--sn-stylekit-info-color); -} - -.sn-component .inner-ring-info, .sn-component .focus\:inner-ring-info:focus { - box-shadow: inset 0 0 0 2px var(--sn-stylekit-info-color); -} - -.sn-component .shadow-overlay { - box-shadow: 0px 4px 24px 0px #00000029; -} - -.sn-component .border-dark-red { - border-color: var(--sn-stylekit-dark-red); -} - -.sn-component .border-bottom-1-gray { - border-bottom-color: var(--sn-stylekit-border-color); -} - -.sn-component .bg-default, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list { - background-color: var(--sn-stylekit-background-color); -} - -.sn-component .bg-contrast, .sn-component .hover\:bg-contrast:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\:bg-contrast:focus, .sn-component .sn-icon-button:focus { - background-color: var(--sn-stylekit-contrast-background-color); -} - -.sn-component .bg-border { - background-color: var(--sn-stylekit-border-color); -} - -.sn-component .bg-secondary-contrast, .sn-component .hover\:bg-secondary-contrast:hover, .sn-component .focus\:bg-secondary-contrast:focus { - background-color: var(--sn-stylekit-secondary-contrast-background-color); -} - -.sn-component .bg-clip-padding, .sn-component .sn-icon-button { - background-clip: padding-box; -} - -.sn-component .bg-transparent, .sn-component .sn-icon-button { - background-color: transparent; -} - -.sn-component .bg-neutral { - background-color: var(--sn-stylekit-neutral-color); -} - -.sn-component .color-neutral, .sn-component .sn-icon-button { - color: var(--sn-stylekit-neutral-color); -} - -.sn-component .bg-text { - background-color: var(--sn-stylekit-contrast-foreground-color); -} - -.sn-component .color-text, .sn-component .hover\:color-text:hover, .sn-component .sn-icon-button:hover, .sn-component .focus\:color-text:focus, .sn-component .sn-icon-button:focus, .sn-component .sn-button.outlined, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list { - color: var(--sn-stylekit-contrast-foreground-color); -} - -.sn-component .bg-foreground { - background-color: var(--sn-stylekit-foreground-color); -} - -.sn-component .color-foreground { - color: var(--sn-stylekit-foreground-color); -} - -.sn-component .bg-danger { - background-color: var(--sn-stylekit-danger-color); -} - -.sn-component .color-danger { - color: var(--sn-stylekit-danger-color); -} - -.sn-component .bg-info, .sn-component .sn-button.info, .sn-component .sn-icon-button.info { - background-color: var(--sn-stylekit-info-color); -} - -.sn-component .color-info { - color: var(--sn-stylekit-info-color); -} - -.sn-component .bg-info-contrast { - background-color: var(--sn-stylekit-info-contrast-color); -} - -.sn-component .color-info-contrast, .sn-component .sn-button.info, .sn-component .sn-icon-button.info, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus { - color: var(--sn-stylekit-info-contrast-color); -} - -.sn-component .bg-info-dark, .sn-component .hover\:bg-info-dark:hover, .sn-component .focus\:bg-info-dark:focus, .sn-component .sn-icon-button.info:hover, .sn-component .sn-icon-button.info:focus { - background-color: var(--sn-stylekit-info-color-darkened); -} - -.sn-component .color-info-dark { - color: var(--sn-stylekit-info-color-darkened); -} - -.sn-component .bg-grey-1 { - background-color: var(--sn-stylekit-grey-1); -} - -.sn-component .color-grey-1 { - color: var(--sn-stylekit-grey-1); -} - -.sn-component .bg-grey-2 { - background-color: var(--sn-stylekit-grey-2); -} - -.sn-component .color-grey-2 { - color: var(--sn-stylekit-grey-2); -} - -.sn-component .bg-grey-3 { - background-color: var(--sn-stylekit-grey-3); -} - -.sn-component .color-grey-3 { - color: var(--sn-stylekit-grey-3); -} - -.sn-component .bg-grey-4 { - background-color: var(--sn-stylekit-grey-4); -} - -.sn-component .color-grey-4 { - color: var(--sn-stylekit-grey-4); -} - -.sn-component .bg-grey-5 { - background-color: var(--sn-stylekit-grey-5); -} - -.sn-component .color-grey-5 { - color: var(--sn-stylekit-grey-5); -} - -.sn-component .bg-grey-6 { - background-color: var(--sn-stylekit-grey-6); -} - -.sn-component .color-grey-6 { - color: var(--sn-stylekit-grey-6); -} - -.sn-component .bg-grey-super-light { - background-color: var(--sn-stylekit-grey-super-light); -} - -.sn-component .color-grey-super-light { - color: var(--sn-stylekit-grey-super-light); -} - -.sn-component .bg-black { - background-color: var(--sn-stylekit-black); -} - -.sn-component .color-black { - color: var(--sn-stylekit-black); -} - -.sn-component .bg-white { - background-color: var(--sn-stylekit-white); -} - -.sn-component .color-white { - color: var(--sn-stylekit-white); -} - -.sn-component .bg-dark-red { - background-color: var(--sn-stylekit-dark-red); -} - -.sn-component .color-dark-red { - color: var(--sn-stylekit-dark-red); -} - -.sn-component .selected\:bg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected], -.sn-component .selected\:bg-color[aria-selected='true'], -.sn-component .sn-dropdown-menu-list-item[aria-selected='true'], -.sn-component .sn-select-list-option[aria-selected='true'] { - background-color: var(--sn-stylekit-list-item-highlight-color); -} - -.sn-component .selected\:fg-color[data-selected], .sn-component .sn-dropdown-menu-list-item[data-selected], .sn-component .sn-select-list-option[data-selected], -.sn-component .selected\:fg-color[aria-selected='true'], -.sn-component .sn-dropdown-menu-list-item[aria-selected='true'], -.sn-component .sn-select-list-option[aria-selected='true'] { - color: var(--sn-stylekit-contrast-foreground-color); -} - -.sn-component .color-accessory-tint-1 { - color: var(--sn-stylekit-accessory-tint-color-1); -} - -.sn-component .color-accessory-tint-2 { - color: var(--sn-stylekit-accessory-tint-color-2); -} - -.sn-component .color-accessory-tint-3 { - color: var(--sn-stylekit-accessory-tint-color-3); -} - -.sn-component .color-accessory-tint-4 { - color: var(--sn-stylekit-accessory-tint-color-4); -} - -.sn-component .color-accessory-tint-5 { - color: var(--sn-stylekit-accessory-tint-color-5); -} - -.sn-component .color-accessory-tint-6 { - color: var(--sn-stylekit-accessory-tint-color-6); -} - -.sn-component .inline-flex, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button { - display: inline-flex; -} - -.sn-component .block { - display: block; -} - -.sn-component .flex, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-icon-button { - display: flex; -} - -.sn-component .flex-col { - flex-direction: column; -} - -.sn-component .flex-row { - flex-direction: row; -} - -.sn-component .flex-grow { - flex-grow: 1; -} - -.sn-component .flex-shrink { - flex-shrink: 1; -} - -.sn-component .flex-wrap { - flex-wrap: wrap; -} - -.sn-component .grid { - display: grid; -} - -.sn-component .items-center, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button { - align-items: center; -} - -.sn-component .items-start { - align-items: flex-start; -} - -.sn-component .items-stretch { - align-items: stretch; -} - -.sn-component .justify-center, .sn-component .sn-dropdown-menu, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-icon-button { - justify-content: center; -} - -.sn-component .justify-between { - justify-content: space-between; -} - -.sn-component .justify-start { - justify-content: flex-start; -} - -.sn-component .justify-end { - justify-content: flex-end; -} - -.sn-component .gap-1 { - grid-gap: 0.25rem; - gap: 0.25rem; -} - -.sn-component .gap-2 { - grid-gap: 0.5rem; - gap: 0.5rem; -} - -.sn-component .gap-3 { - grid-gap: 0.75rem; - gap: 0.75rem; -} - -.sn-component .gap-4 { - grid-gap: 1rem; - gap: 1rem; -} - -.sn-component .absolute, .sn-component .sn-dropdown-menu-list, .sn-component .sn-full-screen { - position: absolute; -} - -.sn-component .fixed { - position: fixed; -} - -.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button { - cursor: pointer; -} - -.sn-component .origin-top-right, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list { - transform-origin: top right; -} - -.sn-component .overflow-auto { - overflow: auto; -} - -.sn-component .overflow-y-auto { - overflow-y: auto; -} - -.sn-component .overflow-hidden { - overflow: hidden; -} - -.sn-component .overflow-ellipsis { - text-overflow: ellipsis; -} - -.sn-component .flex-basis-55 { - flex-basis: 13.75rem; -} - -.sn-component .hover\:brightness-130:hover, .sn-component .sn-button:hover { - filter: brightness(130%); -} - -.sn-component .focus\:brightness-130:focus, .sn-component .sn-button:focus { - filter: brightness(130%); -} - -.sn-component .hover\:bg-highlight:hover, .sn-component .sn-button.outlined:hover, .sn-component .sn-dropdown-menu:hover, .sn-component .sn-dropdown-menu-list-item:hover, .sn-component .sn-select:hover { - background-color: var(--sn-stylekit-list-item-highlight-color); -} - -.sn-component .focus\:bg-highlight:focus, .sn-component .sn-button.outlined:focus { - background-color: var(--sn-stylekit-list-item-highlight-color); -} - -.sn-component .focus\:padded-ring-info:focus { - box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); -} - -.sn-component .focus\:border-bottom:focus { - border-bottom: 2px solid var(--sn-stylekit-info-color); -} - -.sn-component .focus-within\:padded-ring-info:focus-within { - box-shadow: 0 0 0 2px var(--sn-stylekit-background-color), 0 0 0 4px var(--sn-stylekit-info-color); -} - -.sn-component .focus-within\:border-background:focus-within { - border-color: var(--sn-stylekit-background-color); -} - -.sn-component .box-shadow, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover, .sn-component .box-shadow:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-select-popover:focus, .sn-component .box-shadow:focus-within, .sn-component .sn-dropdown-menu-list:focus-within, .sn-component .sn-select-popover:focus-within { - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 2px 8px rgba(0, 0, 0, 0.04); -} - -.sn-component .focus\:outline-none:focus, .sn-component .sn-button:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus, .sn-component .sn-icon-button:focus { - outline: none; -} - -.sn-component .focus\:shadow-none:focus, .sn-component .sn-button.outlined:focus, .sn-component .sn-dropdown-menu:focus, .sn-component .sn-dropdown-menu-list-item:focus, .sn-component .sn-select:focus, .sn-component .sn-select-button:focus, .sn-component .sn-select-list:focus, .sn-component .sn-select-popover:focus { - box-shadow: none; -} - -.sn-component .focus-within\:outline-none:focus-within { - outline: none; -} - -.sn-component .focus-within\:shadow-none:focus-within { - box-shadow: none; -} - -.sn-component .capitalize, .sn-component .sn-button { - text-transform: capitalize; -} - -.sn-component .font-normal, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select, .sn-component .sn-select-list-option { - font-weight: 300; -} - -.sn-component .font-bold, .sn-component .sn-button { - font-weight: 700; -} - -.sn-component .text-left { - text-align: left; -} - -.sn-component .text-center { - text-align: center; -} - -.sn-component .text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.sn-component .text-sm, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-list, .sn-component .sn-select-list-option { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.sn-component .text-input { - font-size: 0.875rem; - line-height: 1.125rem; -} - -.sn-component .text-base { - font-size: 1rem; -} - -.sn-component .text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.sn-component .text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.sn-component .text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; -} - -.sn-component .font-medium { - font-weight: 500; -} - -.sn-component .leading-4, .sn-component .sn-dropdown-menu, .sn-component .sn-select { - line-height: 1rem; -} - -.sn-component .whitespace-pre-wrap { - white-space: pre-wrap; -} - -.sn-component .whitespace-nowrap { - white-space: nowrap; -} - -.sn-component .h-auto { - height: auto; -} - -.sn-component .h-full { - height: 100%; -} - -.sn-component .h-100vh, .sn-component .sn-full-screen { - height: 100vh; -} - -.sn-component .h-90vh { - height: 90vh; -} - -.sn-component .h-0 { - height: 0; -} - -.sn-component .h-2 { - height: 0.5rem; -} - -.sn-component .h-3\.5 { - height: 0.875rem; -} - -.sn-component .h-4 { - height: 1rem; -} - -.sn-component .h-4\.5 { - height: 1.125rem; -} - -.sn-component .h-5 { - height: 1.25rem; -} - -.sn-component .h-6 { - height: 1.5rem; -} - -.sn-component .h-7 { - height: 1.75rem; -} - -.sn-component .h-8, .sn-component .sn-icon-button { - height: 2rem; -} - -.sn-component .h-9 { - height: 2.25rem; -} - -.sn-component .h-10 { - height: 2.5rem; -} - -.sn-component .h-14 { - height: 3.5rem; -} - -.sn-component .h-18 { - height: 4.5rem; -} - -.sn-component .h-25 { - height: 6.25rem; -} - -.sn-component .h-1px { - height: 1px; -} - -.sn-component .h-20px { - height: 20px; -} - -.sn-component .min-h-0 { - min-height: 0; -} - -.sn-component .min-h-5 { - min-height: 1.25rem; -} - -.sn-component .m-h-32, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select { - min-height: 2rem; -} - -.sn-component .min-h-20px { - height: 20px; -} - -.sn-component .max-h-120 { - max-height: 30rem; -} - -.sn-component .m-0, .sn-component .sn-icon-button { - margin: 0; -} - -.sn-component .my-1 { - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -.sn-component .my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -.sn-component .my-3 { - margin-top: 0.75rem; - margin-bottom: 0.75rem; -} - -.sn-component .-mt-1 { - margin-top: -0.25rem; -} - -.sn-component .mt-1 { - margin-top: 0.25rem; -} - -.sn-component .mt-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-popover { - margin-top: 0.5rem; -} - -.sn-component .mt-3 { - margin-top: 0.75rem; -} - -.sn-component .mt-4 { - margin-top: 1rem; -} - -.sn-component .mb-1 { - margin-bottom: 0.25rem; -} - -.sn-component .mb-3 { - margin-bottom: 0.75rem; -} - -.sn-component .-mr-2 { - margin-right: -0.5rem; -} - -.sn-component .mr-1 { - margin-right: 0.25rem; -} - -.sn-component .mr-1\.5 { - margin-right: 0.375rem; -} - -.sn-component .mr-2, .sn-component .sn-dropdown-menu > .sn-icon:first-child, .sn-component .sn-dropdown-menu-list-item > .sn-icon { - margin-right: 0.5rem; -} - -.sn-component .mr-10 { - margin-right: 2.5rem; -} - -.sn-component .ml-1 { - margin-left: 0.25rem; -} - -.sn-component .ml-1\.5 { - margin-left: 0.375rem; -} - -.sn-component .ml-2, .sn-component .sn-dropdown-menu > .sn-icon:last-child, .sn-component .sn-select-button > .sn-icon:last-child { - margin-left: 0.5rem; -} - -.sn-component .ml-6 { - margin-left: 1.5rem; -} - -.sn-component .p-0, .sn-component .sn-icon-button { - padding-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; -} - -.sn-component .p-2 { - padding: 0.5rem; -} - -.sn-component .py-1, .sn-component .sn-dropdown-menu, .sn-component .sn-select-button { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.sn-component .py-1\.5 { - padding-top: 0.375rem; - padding-bottom: 0.375rem; -} - -.sn-component .py-1\.75 { - padding-top: 0.4375rem; - padding-bottom: 0.4375rem; -} - -.sn-component .py-2, .sn-component .sn-dropdown-menu-list, .sn-component .sn-select-list-option { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.sn-component .py-3 { - padding-top: 0.75rem; - padding-bottom: 0.75rem; -} - -.sn-component .py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.sn-component .py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - -.sn-component .py-8 { - padding-top: 2rem; - padding-bottom: 2rem; -} - -.sn-component .px-1 { - padding-left: 0.25rem; - padding-right: 0.25rem; -} - -.sn-component .px-2, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.sn-component .px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.sn-component .px-3\.5 { - padding-left: 0.875rem; - padding-right: 0.875rem; -} - -.sn-component .px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - -.sn-component .px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - -.sn-component .pt-4 { - padding-top: 1rem; -} - -.sn-component .pb-3 { - padding-bottom: 0.75rem; -} - -.sn-component .pr-2 { - padding-right: 0.5rem; -} - -.sn-component .pl-1 { - padding-left: 0.25rem; -} - -.sn-component .w-auto, .sn-component .sn-dropdown-menu, .sn-component .sn-select { - width: auto; -} - -.sn-component .w-full { - width: 100%; -} - -.sn-component .w-100vw, .sn-component .sn-full-screen { - width: 100vw; -} - -.sn-component .fit-content { - width: -moz-fit-content; - width: fit-content; -} - -.sn-component .w-0 { - width: 0; -} - -.sn-component .w-2 { - width: 0.5rem; -} - -.sn-component .w-3\.5 { - width: 0.875rem; -} - -.sn-component .w-4 { - width: 1rem; -} - -.sn-component .w-5 { - width: 1.25rem; -} - -.sn-component .w-8, .sn-component .sn-icon-button { - width: 2rem; -} - -.sn-component .w-25 { - width: 6.25rem; -} - -.sn-component .w-30 { - width: 7.5rem; -} - -.sn-component .w-55 { - width: 13.75rem; -} - -.sn-component .w-56, .sn-component .sn-dropdown-menu-list { - width: 14rem; -} - -.sn-component .w-70 { - width: 17.5rem; -} - -.sn-component .w-80 { - width: 20rem; -} - -.sn-component .w-103 { - width: 25.75rem; -} - -.sn-component .w-125 { - width: 31.25rem; -} - -.sn-component .w-160 { - width: 40rem; -} - -.sn-component .w-20px { - width: 20px; -} - -.sn-component .min-w-265px, .sn-component .sn-dropdown-menu-list { - min-width: 265px; -} - -.sn-component .min-w-20px { - min-width: 20px; -} - -.sn-component .min-w-0 { - min-width: 0; -} - -.sn-component .min-w-4 { - min-width: 1rem; -} - -.sn-component .min-w-5 { - min-width: 1.25rem; -} - -.sn-component .min-w-20 { - min-width: 5rem; -} - -.sn-component .min-w-40 { - min-width: 10rem; -} - -.sn-component .min-w-42 { - min-width: 10.5rem; -} - -.sn-component .min-w-55 { - min-width: 13.75rem; -} - -.sn-component .min-w-80 { - min-width: 20rem; -} - -.sn-component .max-w-xs { - max-width: 20rem; -} - -.sn-component .max-w-md { - max-width: 28rem; -} - -.sn-component .max-w-40 { - max-width: 10rem; -} - -.sn-component .max-w-125 { - max-width: 31.25rem; -} - -.sn-component .max-w-290px { - max-width: 290px; -} - -.sn-component .duration-150 { - transition-duration: 150ms; -} - -.sn-component .ease-out { - transition-timing-function: ease-out; -} - -.sn-component .transition-background { - transition-property: background; -} - -.sn-component .transition-transform { - transition-property: transform; -} - -.sn-component .cursor-pointer, .sn-component .sn-button, .sn-component .sn-dropdown-menu, .sn-component .sn-dropdown-menu-list-item, .sn-component .sn-select, .sn-component .sn-select-button, .sn-component .sn-select-list-option, .sn-component .sn-icon-button { - cursor: pointer; -} - -.sn-component .top-0, .sn-component .top-left-0, .sn-component .sn-full-screen { - top: 0; -} - -.sn-component .left-0, .sn-component .top-left-0, .sn-component .sn-full-screen { - left: 0; -} - -.sn-component .-top-10 { - top: -2.5rem; -} - -.sn-component .-left-51 { - left: -12.75rem; -} - -.sn-component .sn-button { - font-size: 0.8125rem; - padding: 0.609375rem; - min-height: 1.8125rem; -} - -.sn-component .sn-button.small { - font-size: 0.7109375rem; - padding: 0.40625rem 0.609375rem; -} - -.sn-component .sn-button.contrast { - background-color: var(--sn-stylekit-contrast-foreground-color); - color: var(--sn-stylekit-contrast-background-color); -} - -.sn-component .sn-button.neutral { - background-color: var(--sn-stylekit-neutral-color); - color: var(--sn-stylekit-neutral-contrast-color); -} - -.sn-component .sn-button.warning { - background-color: var(--sn-stylekit-warning-color); - color: var(--sn-stylekit-warning-contrast-color); -} - -.sn-component .sn-button.danger { - background-color: var(--sn-stylekit-danger-color); - color: var(--sn-stylekit-danger-contrast-color); -} - -.sn-component .sn-button.success { - background-color: var(--sn-stylekit-success-color); - color: var(--sn-stylekit-success-contrast-color); -} - -.sn-component [data-reach-custom-checkbox-container] { - margin: 0; -} - -.sn-component.no-select { - user-select: none; -} - -/* Goes outside of .sn-component declaration, as following properties are global */ -input, -textarea, -[contenteditable] { - caret-color: var(--sn-stylekit-editor-foreground-color); -} - -.windows-web, -.windows-desktop, -.linux-web, -.linux-desktop { - scrollbar-width: thin; -} - -.windows-web ::-webkit-scrollbar, -.windows-desktop ::-webkit-scrollbar, -.linux-web ::-webkit-scrollbar, -.linux-desktop ::-webkit-scrollbar { - width: 17px; - height: 18px; - border-left: none; -} - -.windows-web ::-webkit-scrollbar-thumb, -.windows-desktop ::-webkit-scrollbar-thumb, -.linux-web ::-webkit-scrollbar-thumb, -.linux-desktop ::-webkit-scrollbar-thumb { - border: 4px solid rgba(0, 0, 0, 0); - background-clip: padding-box; - -webkit-border-radius: 10px; - background-color: var(--sn-stylekit-scrollbar-thumb-color); - -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); -} - -.windows-web ::-webkit-scrollbar-button, -.windows-desktop ::-webkit-scrollbar-button, -.linux-web ::-webkit-scrollbar-button, -.linux-desktop ::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; -} - -.windows-web ::-webkit-scrollbar-corner, -.windows-desktop ::-webkit-scrollbar-corner, -.linux-web ::-webkit-scrollbar-corner, -.linux-desktop ::-webkit-scrollbar-corner { - background-color: transparent; -} - -:root { - --reach-listbox: 1; -} - -[data-reach-listbox-popover] { - display: block; - position: absolute; - min-width: -moz-fit-content; - min-width: -webkit-min-content; - min-width: min-content; - padding: 0.25rem 0; - background: white; - outline: none; - border: solid 1px rgba(0, 0, 0, 0.25); -} - -[data-reach-listbox-popover]:focus-within { - box-shadow: 0 0 4px Highlight; - outline: -webkit-focus-ring-color auto 4px; -} - -[data-reach-listbox-popover][hidden] { - display: none; -} - -[data-reach-listbox-list] { - margin: 0; - padding: 0; - list-style: none; -} - -[data-reach-listbox-list]:focus { - box-shadow: none; - outline: none; -} - -[data-reach-listbox-option] { - display: block; - margin: 0; - padding: 0.25rem 0.5rem; - white-space: nowrap; - user-select: none; -} - -[data-reach-listbox-option][aria-selected="true"] { - background: #1672d4; - color: white; -} - -[data-reach-listbox-option][data-current] { - font-weight: bolder; -} - -[data-reach-listbox-option][data-current][data-confirming] { - animation: flash 100ms; - animation-iteration-count: 1; -} - -[data-reach-listbox-option][aria-disabled="true"] { - opacity: 0.5; -} - -[data-reach-listbox-button] { - display: inline-flex; - align-items: center; - justify-content: space-between; - padding: 1px 10px 2px; - border: 1px solid; - border-color: #d8d8d8 #d1d1d1 #bababa; - cursor: default; - user-select: none; -} - -[data-reach-listbox-button][aria-disabled="true"] { - opacity: 0.5; -} - -[data-reach-listbox-arrow] { - margin-left: 0.5rem; - display: block; - font-size: 0.5em; -} - -[data-reach-listbox-group-label] { - display: block; - margin: 0; - padding: 0.25rem 0.5rem; - white-space: nowrap; - user-select: none; - font-weight: bolder; -} - -@keyframes flash { - 0% { - background: #1159a6; - color: white; - opacity: 1; - } - 50% { - opacity: 0.5; - background: inherit; - color: inherit; - } - 100% { - background: #1159a6; - color: white; - opacity: 1; - } -} - +:root{--sn-stylekit-base-font-size: 13px;--sn-stylekit-font-size-p: 1.0rem;--sn-stylekit-font-size-editor: 1.21rem;--sn-stylekit-font-size-h6: 0.8rem;--sn-stylekit-font-size-h5: 0.9rem;--sn-stylekit-font-size-h4: 1.0rem;--sn-stylekit-font-size-h3: 1.1rem;--sn-stylekit-font-size-h2: 1.2rem;--sn-stylekit-font-size-h1: 1.3rem;--sn-stylekit-neutral-color: #989898;--sn-stylekit-neutral-contrast-color: white;--sn-stylekit-info-color: #086DD6;--sn-stylekit-info-contrast-color: white;--sn-stylekit-success-color: #2B9612;--sn-stylekit-success-contrast-color: white;--sn-stylekit-warning-color: #f6a200;--sn-stylekit-warning-contrast-color: white;--sn-stylekit-danger-color: #F80324;--sn-stylekit-danger-contrast-color: white;--sn-stylekit-shadow-color: #C8C8C8;--sn-stylekit-background-color: white;--sn-stylekit-border-color: #e3e3e3;--sn-stylekit-foreground-color: black;--sn-stylekit-contrast-background-color: #F6F6F6;--sn-stylekit-contrast-foreground-color: #2e2e2e;--sn-stylekit-contrast-border-color: #e3e3e3;--sn-stylekit-secondary-background-color: #F6F6F6;--sn-stylekit-secondary-foreground-color: #2e2e2e;--sn-stylekit-secondary-border-color: #e3e3e3;--sn-stylekit-secondary-contrast-background-color: #e3e3e3;--sn-stylekit-secondary-contrast-foreground-color: #2e2e2e;--sn-stylekit--secondary-contrast-border-color: #a2a2a2;--sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);--sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);--sn-stylekit-paragraph-text-color: #454545;--sn-stylekit-input-placeholder-color: rgb(168, 168, 168);--sn-stylekit-input-border-color: #e3e3e3;--sn-stylekit-scrollbar-thumb-color: #dfdfdf;--sn-stylekit-scrollbar-track-border-color: #E7E7E7;--sn-stylekit-general-border-radius: 2px;--sn-stylekit-simplified-chinese-font: "Microsoft Yahei", "微软雅黑体";--sn-stylekit-monospace-font: "Ubuntu Mono", courier, monospace;--sn-stylekit-sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", + "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", var(--sn-stylekit-simplified-chinese-font), sans-serif}.sn-component{font-family:var(--sn-stylekit-sans-serif-font);-webkit-font-smoothing:antialiased;color:var(--sn-stylekit-foreground-color)}.sn-component .sk-panel{box-shadow:0px 2px 5px var(--sn-stylekit-shadow-color);background-color:var(--sn-stylekit-background-color);border:1px solid var(--sn-stylekit-border-color);border-radius:var(--sn-stylekit-general-border-radius);display:flex;flex-direction:column;overflow:auto;flex-grow:1}.sn-component .sk-panel a:hover{text-decoration:underline}.sn-component .sk-panel.static{box-shadow:none;border:none;border-radius:0}.sn-component .sk-panel .sk-panel-header{flex-shrink:0;display:flex;justify-content:space-between;padding:1.1rem 2rem;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);align-items:center}.sn-component .sk-panel .sk-panel-header .sk-panel-header-title{font-size:var(--sn-stylekit-font-size-h1);font-weight:500}.sn-component .sk-panel .sk-panel-header .close-button{font-weight:bold}.sn-component .sk-panel .sk-footer,.sn-component .sk-panel .sk-panel-footer{padding:1rem 2rem;border-top:1px solid var(--sn-stylekit-border-color);box-sizing:border-box}.sn-component .sk-panel .sk-footer.extra-padding,.sn-component .sk-panel .sk-panel-footer.extra-padding{padding:2rem 2rem}.sn-component .sk-panel .sk-footer .left,.sn-component .sk-panel .sk-panel-footer .left{text-align:left;display:block}.sn-component .sk-panel .sk-footer .right,.sn-component .sk-panel .sk-panel-footer .right{text-align:right;display:block}.sn-component .sk-panel .sk-panel-content{padding:1.6rem 2rem;padding-bottom:0;flex-grow:1;overflow:scroll;height:100%;overflow-y:auto !important;overflow-x:auto !important}.sn-component .sk-panel .sk-panel-content .sk-p,.sn-component .sk-panel .sk-panel-content .sk-li{color:var(--sn-stylekit-paragraph-text-color);line-height:1.3}.sn-component .sk-panel-section{padding-bottom:1.6rem;display:flex;flex-direction:column}.sn-component .sk-panel-section.sk-panel-hero{text-align:center}.sn-component .sk-panel-section .sk-p:last-child{margin-bottom:0}.sn-component .sk-panel-section:not(:last-child){margin-bottom:1.5rem;border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-panel-section:not(:last-child).no-border{border-bottom:none}.sn-component .sk-panel-section:last-child{margin-bottom:0.5rem}.sn-component .sk-panel-section.no-bottom-pad{padding-bottom:0;margin-bottom:0}.sn-component .sk-panel-section .sk-panel-section-title{margin-bottom:0.5rem;font-weight:bold;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-panel-section .sk-panel-section-outer-title{border-bottom:1px solid var(--sn-stylekit-border-color);padding-bottom:0.9rem;margin-top:2.1rem;margin-bottom:15px;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-panel-section .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-h5);margin-bottom:2px}.sn-component .sk-panel-section .sk-panel-section-subtitle.subtle{font-weight:normal;opacity:0.6}.sn-component .sk-panel-section .text-content .sk-p{margin-bottom:1rem}.sn-component .sk-panel-section .text-content p:first-child{margin-top:0.3rem}.sn-component .sk-panel-row{display:flex;justify-content:space-between;align-items:center;padding-top:0.4rem}.sn-component .sk-panel-row.centered{justify-content:center}.sn-component .sk-panel-row.justify-right{justify-content:flex-end}.sn-component .sk-panel-row.justify-left{justify-content:flex-start}.sn-component .sk-panel-row.align-top{align-items:flex-start}.sn-component .sk-panel-row .sk-panel-column.stretch{width:100%}.sn-component .sk-panel-row.default-padding,.sn-component .sk-panel-row:not(:last-child){padding-bottom:0.4rem}.sn-component .sk-panel-row.condensed{padding-top:0.2rem;padding-bottom:0.2rem}.sn-component .sk-panel-row .sk-p{margin:0;padding:0}.sn-component .vertical-rule{background-color:var(--sn-stylekit-border-color);height:1.5rem;width:1px}.sn-component .sk-panel-form{width:100%}.sn-component .sk-panel-form.half{width:50%}.sn-component .sk-panel-form .form-submit{margin-top:0.15rem}.sn-component .right-aligned{justify-content:flex-end;text-align:right}.sn-component .sk-menu-panel{background-color:var(--sn-stylekit-background-color);border:1px solid var(--sn-stylekit-contrast-border-color);border-radius:var(--sn-stylekit-general-border-radius);overflow:scroll;user-select:none;overflow-y:auto !important;overflow-x:auto !important}.sn-component .sk-menu-panel .sk-menu-panel-header{padding:0.8rem 1rem;border-bottom:1px solid var(--sn-stylekit-contrast-border-color);background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);display:flex;justify-content:space-between;align-items:center}.sn-component .sk-menu-panel .sk-menu-panel-header-title{font-weight:bold;font-size:var(--sn-stylekit-font-size-h4)}.sn-component .sk-menu-panel .sk-menu-panel-header-subtitle{margin-top:0.2rem;opacity:0.6}.sn-component .sk-menu-panel .sk-menu-panel-row{padding:1rem 1rem;cursor:pointer;display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-menu-panel .sk-menu-panel-row:hover{background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);border-color:var(--sn-stylekit-contrast-border-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column{display:flex;justify-content:center;flex-direction:column}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column:not(:first-child){padding-left:1.0rem;padding-right:0.15rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column.stretch{width:100%}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrows{margin-top:1rem}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow{border:1px solid var(--sn-stylekit-contrast-border-color);margin-top:-1px}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-row:hover,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .sk-menu-panel-subrow:hover{background-color:var(--sn-stylekit-background-color)}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-menu-panel-column .left{display:flex}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-button .sk-panel-section-subtitle,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-box .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-h6);font-weight:normal}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-label,.sn-component .sk-menu-panel .sk-menu-panel-row .sk-panel-section .sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-menu-panel .sk-menu-panel-row .sk-panel-section-subtitle{font-size:var(--sn-stylekit-font-size-p);font-weight:bold}.sn-component .sk-menu-panel .sk-menu-panel-row .sk-sublabel{font-size:var(--sn-stylekit-font-size-h5);margin-top:0.2rem;opacity:0.6}.sn-component .red{color:var(--sn-stylekit-danger-color)}.sn-component .tinted{color:var(--sn-stylekit-info-color)}.sn-component .selectable{user-select:text !important;-ms-user-select:text !important;-moz-user-select:text !important;-webkit-user-select:text !important}.sn-component .sk-h1,.sn-component .sk-h2,.sn-component .sk-h3,.sn-component .sk-h4,.sn-component .sk-h5{margin:0;padding:0;font-weight:normal}.sn-component .sk-h1{font-weight:500;font-size:var(--sn-stylekit-font-size-h1);line-height:1.9rem}.sn-component .sk-h2{font-size:var(--sn-stylekit-font-size-h2);line-height:1.8rem}.sn-component .sk-h3{font-size:var(--sn-stylekit-font-size-h3);line-height:1.7rem}.sn-component .sk-h4{font-size:var(--sn-stylekit-font-size-p);line-height:1.4rem}.sn-component .sk-h5{font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-bold{font-weight:bold}.sn-component .sk-font-small{font-size:var(--sn-stylekit-font-size-h5)}.sn-component .sk-font-normal{font-size:var(--sn-stylekit-font-size-p)}.sn-component .sk-font-large{font-size:var(--sn-stylekit-font-size-h3)}.sn-component a.sk-a{cursor:pointer;user-select:none}.sn-component a.sk-a.disabled{color:var(--sn-stylekit-neutral-color);opacity:0.6}.sn-component a.sk-a.boxed{border-radius:var(--sn-stylekit-general-border-radius);padding:0.3rem 0.4rem}.sn-component a.sk-a.boxed:hover{text-decoration:none}.sn-component a.sk-a.boxed.neutral{background-color:var(--sn-stylekit-neutral-color);color:var(--sn-stylekit-neutral-contrast-color)}.sn-component a.sk-a.boxed.info{background-color:var(--sn-stylekit-info-color);color:var(--sn-stylekit-info-contrast-color)}.sn-component a.sk-a.boxed.warning{background-color:var(--sn-stylekit-warning-color);color:var(--sn-stylekit-warning-contrast-color)}.sn-component a.sk-a.boxed.danger{background-color:var(--sn-stylekit-danger-color);color:var(--sn-stylekit-danger-contrast-color)}.sn-component a.sk-a.boxed.success{background-color:var(--sn-stylekit-success-color);color:var(--sn-stylekit-success-contrast-color)}.sn-component .wrap{word-wrap:break-word}.sn-component *.sk-base{color:var(--sn-stylekit-foreground-color)}.sn-component *.contrast{color:var(--sn-stylekit-contrast-foreground-color)}.sn-component *.neutral{color:var(--sn-stylekit-neutral-color)}.sn-component *.info{color:var(--sn-stylekit-info-color)}.sn-component *.info-contrast{color:var(--sn-stylekit-info-contrast-color)}.sn-component *.warning{color:var(--sn-stylekit-warning-color)}.sn-component *.danger{color:var(--sn-stylekit-danger-color)}.sn-component *.success{color:var(--sn-stylekit-success-color)}.sn-component *.info-i{color:var(--sn-stylekit-info-color) !important}.sn-component *.warning-i{color:var(--sn-stylekit-warning-color) !important}.sn-component *.danger-i{color:var(--sn-stylekit-danger-color) !important}.sn-component *.success-i{color:var(--sn-stylekit-success-color) !important}.sn-component *.clear{background-color:transparent;border:none}.sn-component .center-text{text-align:center !important;justify-content:center !important}.sn-component p.sk-p{margin:0.5rem 0}.sn-component input.sk-input{box-sizing:border-box;padding:0.7rem 0.8rem;margin:0.30rem 0;border:none;font-size:var(--sn-stylekit-font-size-h3);width:100%;outline:0;resize:none}.sn-component input.sk-input.clear{color:var(--sn-stylekit-foreground-color);background-color:transparent;border:none}.sn-component input.sk-input.no-border{border:none}.sn-component .sk-label,.sn-component .sk-panel-section .sk-panel-section-subtitle{font-weight:bold}.sn-component .sk-label.no-bold,.sn-component .sk-panel-section .no-bold.sk-panel-section-subtitle{font-weight:normal}.sn-component label.sk-label,.sn-component .sk-panel-section label.sk-panel-section-subtitle{margin:0.7rem 0;display:block}.sn-component label.sk-label input[type='checkbox'],.sn-component .sk-panel-section label.sk-panel-section-subtitle input[type='checkbox'],.sn-component input[type='radio']{width:auto;margin-right:0.45rem;vertical-align:middle}.sn-component .sk-horizontal-group>*,.sn-component .sk-input-group>*{display:inline-block;vertical-align:middle}.sn-component .sk-horizontal-group>*:not(:first-child),.sn-component .sk-input-group>*:not(:first-child){margin-left:0.9rem}.sn-component .sk-border-bottom{border-bottom:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-checkbox-group{padding-top:0.5rem;padding-bottom:0.3rem}.sn-component ::placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component :-ms-input-placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component ::-ms-input-placeholder{color:var(--sn-stylekit-input-placeholder-color)}.sn-component .sk-button-group.stretch{display:flex;width:100%}.sn-component .sk-button-group.stretch .sk-button,.sn-component .sk-button-group.stretch .sk-box{display:block;flex-grow:1;text-align:center}.sn-component .sk-button-group .sk-button,.sn-component .sk-button-group .sk-box{display:inline-block;vertical-align:middle}.sn-component .sk-button-group .sk-button:not(:last-child),.sn-component .sk-button-group .sk-box:not(:last-child){margin-right:5px}.sn-component .sk-button-group .sk-button:not(:last-child).featured,.sn-component .sk-button-group .sk-box:not(:last-child).featured{margin-right:8px}.sn-component .sk-segmented-buttons{display:flex;flex-direction:row}.sn-component .sk-segmented-buttons .sk-button,.sn-component .sk-segmented-buttons .sk-box{border-radius:0;white-space:nowrap;margin:0;margin-left:0 !important;margin-right:0 !important}.sn-component .sk-segmented-buttons .sk-button:not(:last-child),.sn-component .sk-segmented-buttons .sk-box:not(:last-child){border-right:none;border-radius:0}.sn-component .sk-segmented-buttons .sk-button:first-child,.sn-component .sk-segmented-buttons .sk-box:first-child{border-top-left-radius:var(--sn-stylekit-general-border-radius);border-bottom-left-radius:var(--sn-stylekit-general-border-radius);border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.sn-component .sk-segmented-buttons .sk-button:last-child,.sn-component .sk-segmented-buttons .sk-box:last-child{border-top-right-radius:var(--sn-stylekit-general-border-radius);border-bottom-right-radius:var(--sn-stylekit-general-border-radius);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.sn-component .sk-box-group .sk-box{display:inline-block}.sn-component .sk-box-group .sk-box:not(:last-child){margin-right:5px}.sn-component .sk-a.button{text-decoration:none}.sn-component .sk-button,.sn-component .sk-box{display:table;padding:0.5rem 0.7rem;font-size:var(--sn-stylekit-font-size-h5);cursor:pointer;text-align:center;user-select:none}.sn-component .sk-button.no-hover-border:after,.sn-component .no-hover-border.sk-box:after{color:transparent !important}.sn-component .sk-button.wide,.sn-component .wide.sk-box{padding:0.3rem 1.7rem}.sn-component .sk-button>.sk-label,.sn-component .sk-box>.sk-label,.sn-component .sk-panel-section .sk-button>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-box>.sk-panel-section-subtitle{font-weight:bold;display:block;text-align:center}.sn-component .sk-button.big,.sn-component .big.sk-box{font-size:var(--sn-stylekit-font-size-h3);padding:0.7rem 2.5rem}.sn-component .sk-box{padding:2.5rem 1.5rem}.sn-component .sk-button.sk-base,.sn-component .sk-base.sk-box,.sn-component .sk-box.sk-base,.sn-component .sk-circle.sk-base{color:var(--sn-stylekit-foreground-color);position:relative;background-color:var(--sn-stylekit-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-background-color)}.sn-component .sk-button.sk-base *,.sn-component .sk-base.sk-box *,.sn-component .sk-box.sk-base *,.sn-component .sk-circle.sk-base *{position:relative}.sn-component .sk-button.sk-base:before,.sn-component .sk-base.sk-box:before,.sn-component .sk-box.sk-base:before,.sn-component .sk-circle.sk-base:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-base:after,.sn-component .sk-base.sk-box:after,.sn-component .sk-box.sk-base:after,.sn-component .sk-circle.sk-base:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-background-color)}.sn-component .sk-button.sk-base:hover:before,.sn-component .sk-base.sk-box:hover:before,.sn-component .sk-box.sk-base:hover:before,.sn-component .sk-circle.sk-base:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-base.no-bg,.sn-component .sk-base.no-bg.sk-box,.sn-component .sk-box.sk-base.no-bg,.sn-component .sk-circle.sk-base.no-bg{background-color:transparent}.sn-component .sk-button.sk-base.no-bg:before,.sn-component .sk-base.no-bg.sk-box:before,.sn-component .sk-box.sk-base.no-bg:before,.sn-component .sk-circle.sk-base.no-bg:before{content:none}.sn-component .sk-button.sk-base.featured,.sn-component .sk-base.featured.sk-box,.sn-component .sk-box.sk-base.featured,.sn-component .sk-circle.sk-base.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-base.featured:before,.sn-component .sk-base.featured.sk-box:before,.sn-component .sk-box.sk-base.featured:before,.sn-component .sk-circle.sk-base.featured:before{opacity:1.0}.sn-component .sk-button.contrast,.sn-component .contrast.sk-box,.sn-component .sk-box.contrast,.sn-component .sk-circle.contrast{color:var(--sn-stylekit-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-contrast-background-color)}.sn-component .sk-button.contrast *,.sn-component .contrast.sk-box *,.sn-component .sk-box.contrast *,.sn-component .sk-circle.contrast *{position:relative}.sn-component .sk-button.contrast:before,.sn-component .contrast.sk-box:before,.sn-component .sk-box.contrast:before,.sn-component .sk-circle.contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.contrast:after,.sn-component .contrast.sk-box:after,.sn-component .sk-box.contrast:after,.sn-component .sk-circle.contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-contrast-background-color)}.sn-component .sk-button.contrast:hover:before,.sn-component .contrast.sk-box:hover:before,.sn-component .sk-box.contrast:hover:before,.sn-component .sk-circle.contrast:hover:before{filter:brightness(130%)}.sn-component .sk-button.contrast.no-bg,.sn-component .contrast.no-bg.sk-box,.sn-component .sk-box.contrast.no-bg,.sn-component .sk-circle.contrast.no-bg{background-color:transparent}.sn-component .sk-button.contrast.no-bg:before,.sn-component .contrast.no-bg.sk-box:before,.sn-component .sk-box.contrast.no-bg:before,.sn-component .sk-circle.contrast.no-bg:before{content:none}.sn-component .sk-button.contrast.featured,.sn-component .contrast.featured.sk-box,.sn-component .sk-box.contrast.featured,.sn-component .sk-circle.contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.contrast.featured:before,.sn-component .contrast.featured.sk-box:before,.sn-component .sk-box.contrast.featured:before,.sn-component .sk-circle.contrast.featured:before{opacity:1.0}.sn-component .sk-button.sk-secondary,.sn-component .sk-secondary.sk-box,.sn-component .sk-box.sk-secondary,.sn-component .sk-circle.sk-secondary{color:var(--sn-stylekit-secondary-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-background-color)}.sn-component .sk-button.sk-secondary *,.sn-component .sk-secondary.sk-box *,.sn-component .sk-box.sk-secondary *,.sn-component .sk-circle.sk-secondary *{position:relative}.sn-component .sk-button.sk-secondary:before,.sn-component .sk-secondary.sk-box:before,.sn-component .sk-box.sk-secondary:before,.sn-component .sk-circle.sk-secondary:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-secondary:after,.sn-component .sk-secondary.sk-box:after,.sn-component .sk-box.sk-secondary:after,.sn-component .sk-circle.sk-secondary:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-secondary-background-color)}.sn-component .sk-button.sk-secondary:hover:before,.sn-component .sk-secondary.sk-box:hover:before,.sn-component .sk-box.sk-secondary:hover:before,.sn-component .sk-circle.sk-secondary:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-secondary.no-bg,.sn-component .sk-secondary.no-bg.sk-box,.sn-component .sk-box.sk-secondary.no-bg,.sn-component .sk-circle.sk-secondary.no-bg{background-color:transparent}.sn-component .sk-button.sk-secondary.no-bg:before,.sn-component .sk-secondary.no-bg.sk-box:before,.sn-component .sk-box.sk-secondary.no-bg:before,.sn-component .sk-circle.sk-secondary.no-bg:before{content:none}.sn-component .sk-button.sk-secondary.featured,.sn-component .sk-secondary.featured.sk-box,.sn-component .sk-box.sk-secondary.featured,.sn-component .sk-circle.sk-secondary.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-secondary.featured:before,.sn-component .sk-secondary.featured.sk-box:before,.sn-component .sk-box.sk-secondary.featured:before,.sn-component .sk-circle.sk-secondary.featured:before{opacity:1.0}.sn-component .sk-button.sk-secondary-contrast,.sn-component .sk-secondary-contrast.sk-box,.sn-component .sk-box.sk-secondary-contrast,.sn-component .sk-circle.sk-secondary-contrast{color:var(--sn-stylekit-secondary-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-contrast-background-color)}.sn-component .sk-button.sk-secondary-contrast *,.sn-component .sk-secondary-contrast.sk-box *,.sn-component .sk-box.sk-secondary-contrast *,.sn-component .sk-circle.sk-secondary-contrast *{position:relative}.sn-component .sk-button.sk-secondary-contrast:before,.sn-component .sk-secondary-contrast.sk-box:before,.sn-component .sk-box.sk-secondary-contrast:before,.sn-component .sk-circle.sk-secondary-contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.sk-secondary-contrast:after,.sn-component .sk-secondary-contrast.sk-box:after,.sn-component .sk-box.sk-secondary-contrast:after,.sn-component .sk-circle.sk-secondary-contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-secondary-contrast-background-color)}.sn-component .sk-button.sk-secondary-contrast:hover:before,.sn-component .sk-secondary-contrast.sk-box:hover:before,.sn-component .sk-box.sk-secondary-contrast:hover:before,.sn-component .sk-circle.sk-secondary-contrast:hover:before{filter:brightness(130%)}.sn-component .sk-button.sk-secondary-contrast.no-bg,.sn-component .sk-secondary-contrast.no-bg.sk-box,.sn-component .sk-box.sk-secondary-contrast.no-bg,.sn-component .sk-circle.sk-secondary-contrast.no-bg{background-color:transparent}.sn-component .sk-button.sk-secondary-contrast.no-bg:before,.sn-component .sk-secondary-contrast.no-bg.sk-box:before,.sn-component .sk-box.sk-secondary-contrast.no-bg:before,.sn-component .sk-circle.sk-secondary-contrast.no-bg:before{content:none}.sn-component .sk-button.sk-secondary-contrast.featured,.sn-component .sk-secondary-contrast.featured.sk-box,.sn-component .sk-box.sk-secondary-contrast.featured,.sn-component .sk-circle.sk-secondary-contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.sk-secondary-contrast.featured:before,.sn-component .sk-secondary-contrast.featured.sk-box:before,.sn-component .sk-box.sk-secondary-contrast.featured:before,.sn-component .sk-circle.sk-secondary-contrast.featured:before{opacity:1.0}.sn-component .sk-button.neutral,.sn-component .neutral.sk-box,.sn-component .sk-box.neutral,.sn-component .sk-circle.neutral{color:var(--sn-stylekit-neutral-contrast-color);position:relative;background-color:var(--sn-stylekit-neutral-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-neutral-color)}.sn-component .sk-button.neutral *,.sn-component .neutral.sk-box *,.sn-component .sk-box.neutral *,.sn-component .sk-circle.neutral *{position:relative}.sn-component .sk-button.neutral:before,.sn-component .neutral.sk-box:before,.sn-component .sk-box.neutral:before,.sn-component .sk-circle.neutral:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-neutral-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.neutral:after,.sn-component .neutral.sk-box:after,.sn-component .sk-box.neutral:after,.sn-component .sk-circle.neutral:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-neutral-color)}.sn-component .sk-button.neutral:hover:before,.sn-component .neutral.sk-box:hover:before,.sn-component .sk-box.neutral:hover:before,.sn-component .sk-circle.neutral:hover:before{filter:brightness(130%)}.sn-component .sk-button.neutral.no-bg,.sn-component .neutral.no-bg.sk-box,.sn-component .sk-box.neutral.no-bg,.sn-component .sk-circle.neutral.no-bg{background-color:transparent}.sn-component .sk-button.neutral.no-bg:before,.sn-component .neutral.no-bg.sk-box:before,.sn-component .sk-box.neutral.no-bg:before,.sn-component .sk-circle.neutral.no-bg:before{content:none}.sn-component .sk-button.neutral.featured,.sn-component .neutral.featured.sk-box,.sn-component .sk-box.neutral.featured,.sn-component .sk-circle.neutral.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.neutral.featured:before,.sn-component .neutral.featured.sk-box:before,.sn-component .sk-box.neutral.featured:before,.sn-component .sk-circle.neutral.featured:before{opacity:1.0}.sn-component .sk-button.info,.sn-component .info.sk-box,.sn-component .sk-box.info,.sn-component .sk-circle.info{color:var(--sn-stylekit-info-contrast-color);position:relative;background-color:var(--sn-stylekit-info-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-info-color)}.sn-component .sk-button.info *,.sn-component .info.sk-box *,.sn-component .sk-box.info *,.sn-component .sk-circle.info *{position:relative}.sn-component .sk-button.info:before,.sn-component .info.sk-box:before,.sn-component .sk-box.info:before,.sn-component .sk-circle.info:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-info-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.info:after,.sn-component .info.sk-box:after,.sn-component .sk-box.info:after,.sn-component .sk-circle.info:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-info-color)}.sn-component .sk-button.info:hover:before,.sn-component .info.sk-box:hover:before,.sn-component .sk-box.info:hover:before,.sn-component .sk-circle.info:hover:before{filter:brightness(130%)}.sn-component .sk-button.info.no-bg,.sn-component .info.no-bg.sk-box,.sn-component .sk-box.info.no-bg,.sn-component .sk-circle.info.no-bg{background-color:transparent}.sn-component .sk-button.info.no-bg:before,.sn-component .info.no-bg.sk-box:before,.sn-component .sk-box.info.no-bg:before,.sn-component .sk-circle.info.no-bg:before{content:none}.sn-component .sk-button.info.featured,.sn-component .info.featured.sk-box,.sn-component .sk-box.info.featured,.sn-component .sk-circle.info.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.info.featured:before,.sn-component .info.featured.sk-box:before,.sn-component .sk-box.info.featured:before,.sn-component .sk-circle.info.featured:before{opacity:1.0}.sn-component .sk-button.warning,.sn-component .warning.sk-box,.sn-component .sk-box.warning,.sn-component .sk-circle.warning{color:var(--sn-stylekit-warning-contrast-color);position:relative;background-color:var(--sn-stylekit-warning-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-warning-color)}.sn-component .sk-button.warning *,.sn-component .warning.sk-box *,.sn-component .sk-box.warning *,.sn-component .sk-circle.warning *{position:relative}.sn-component .sk-button.warning:before,.sn-component .warning.sk-box:before,.sn-component .sk-box.warning:before,.sn-component .sk-circle.warning:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-warning-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.warning:after,.sn-component .warning.sk-box:after,.sn-component .sk-box.warning:after,.sn-component .sk-circle.warning:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-warning-color)}.sn-component .sk-button.warning:hover:before,.sn-component .warning.sk-box:hover:before,.sn-component .sk-box.warning:hover:before,.sn-component .sk-circle.warning:hover:before{filter:brightness(130%)}.sn-component .sk-button.warning.no-bg,.sn-component .warning.no-bg.sk-box,.sn-component .sk-box.warning.no-bg,.sn-component .sk-circle.warning.no-bg{background-color:transparent}.sn-component .sk-button.warning.no-bg:before,.sn-component .warning.no-bg.sk-box:before,.sn-component .sk-box.warning.no-bg:before,.sn-component .sk-circle.warning.no-bg:before{content:none}.sn-component .sk-button.warning.featured,.sn-component .warning.featured.sk-box,.sn-component .sk-box.warning.featured,.sn-component .sk-circle.warning.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.warning.featured:before,.sn-component .warning.featured.sk-box:before,.sn-component .sk-box.warning.featured:before,.sn-component .sk-circle.warning.featured:before{opacity:1.0}.sn-component .sk-button.danger,.sn-component .danger.sk-box,.sn-component .sk-box.danger,.sn-component .sk-circle.danger{color:var(--sn-stylekit-danger-contrast-color);position:relative;background-color:var(--sn-stylekit-danger-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-danger-color)}.sn-component .sk-button.danger *,.sn-component .danger.sk-box *,.sn-component .sk-box.danger *,.sn-component .sk-circle.danger *{position:relative}.sn-component .sk-button.danger:before,.sn-component .danger.sk-box:before,.sn-component .sk-box.danger:before,.sn-component .sk-circle.danger:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-danger-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.danger:after,.sn-component .danger.sk-box:after,.sn-component .sk-box.danger:after,.sn-component .sk-circle.danger:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-danger-color)}.sn-component .sk-button.danger:hover:before,.sn-component .danger.sk-box:hover:before,.sn-component .sk-box.danger:hover:before,.sn-component .sk-circle.danger:hover:before{filter:brightness(130%)}.sn-component .sk-button.danger.no-bg,.sn-component .danger.no-bg.sk-box,.sn-component .sk-box.danger.no-bg,.sn-component .sk-circle.danger.no-bg{background-color:transparent}.sn-component .sk-button.danger.no-bg:before,.sn-component .danger.no-bg.sk-box:before,.sn-component .sk-box.danger.no-bg:before,.sn-component .sk-circle.danger.no-bg:before{content:none}.sn-component .sk-button.danger.featured,.sn-component .danger.featured.sk-box,.sn-component .sk-box.danger.featured,.sn-component .sk-circle.danger.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.danger.featured:before,.sn-component .danger.featured.sk-box:before,.sn-component .sk-box.danger.featured:before,.sn-component .sk-circle.danger.featured:before{opacity:1.0}.sn-component .sk-button.success,.sn-component .success.sk-box,.sn-component .sk-box.success,.sn-component .sk-circle.success{color:var(--sn-stylekit-success-contrast-color);position:relative;background-color:var(--sn-stylekit-success-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-success-color)}.sn-component .sk-button.success *,.sn-component .success.sk-box *,.sn-component .sk-box.success *,.sn-component .sk-circle.success *{position:relative}.sn-component .sk-button.success:before,.sn-component .success.sk-box:before,.sn-component .sk-box.success:before,.sn-component .sk-circle.success:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-success-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-button.success:after,.sn-component .success.sk-box:after,.sn-component .sk-box.success:after,.sn-component .sk-circle.success:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-success-color)}.sn-component .sk-button.success:hover:before,.sn-component .success.sk-box:hover:before,.sn-component .sk-box.success:hover:before,.sn-component .sk-circle.success:hover:before{filter:brightness(130%)}.sn-component .sk-button.success.no-bg,.sn-component .success.no-bg.sk-box,.sn-component .sk-box.success.no-bg,.sn-component .sk-circle.success.no-bg{background-color:transparent}.sn-component .sk-button.success.no-bg:before,.sn-component .success.no-bg.sk-box:before,.sn-component .sk-box.success.no-bg:before,.sn-component .sk-circle.success.no-bg:before{content:none}.sn-component .sk-button.success.featured,.sn-component .success.featured.sk-box,.sn-component .sk-box.success.featured,.sn-component .sk-circle.success.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-button.success.featured:before,.sn-component .success.featured.sk-box:before,.sn-component .sk-box.success.featured:before,.sn-component .sk-circle.success.featured:before{opacity:1.0}.sn-component .sk-notification.contrast,.sn-component .sk-input.contrast{color:var(--sn-stylekit-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-contrast-border-color);border:1px solid var(--sn-stylekit-contrast-border-color)}.sn-component .sk-notification.contrast *,.sn-component .sk-input.contrast *{position:relative}.sn-component .sk-notification.contrast:before,.sn-component .sk-input.contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.contrast:after,.sn-component .sk-input.contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-contrast-border-color);border-color:var(--sn-stylekit-contrast-border-color)}.sn-component .sk-notification.contrast.no-bg,.sn-component .sk-input.contrast.no-bg{background-color:transparent}.sn-component .sk-notification.contrast.no-bg:before,.sn-component .sk-input.contrast.no-bg:before{content:none}.sn-component .sk-notification.contrast.featured,.sn-component .sk-input.contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.contrast.featured:before,.sn-component .sk-input.contrast.featured:before{opacity:1.0}.sn-component .sk-notification.sk-secondary,.sn-component .sk-input.sk-secondary{color:var(--sn-stylekit-secondary-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-border-color);border:1px solid var(--sn-stylekit-secondary-border-color)}.sn-component .sk-notification.sk-secondary *,.sn-component .sk-input.sk-secondary *{position:relative}.sn-component .sk-notification.sk-secondary:before,.sn-component .sk-input.sk-secondary:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-secondary:after,.sn-component .sk-input.sk-secondary:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-secondary-border-color);border-color:var(--sn-stylekit-secondary-border-color)}.sn-component .sk-notification.sk-secondary.no-bg,.sn-component .sk-input.sk-secondary.no-bg{background-color:transparent}.sn-component .sk-notification.sk-secondary.no-bg:before,.sn-component .sk-input.sk-secondary.no-bg:before{content:none}.sn-component .sk-notification.sk-secondary.featured,.sn-component .sk-input.sk-secondary.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-secondary.featured:before,.sn-component .sk-input.sk-secondary.featured:before{opacity:1.0}.sn-component .sk-notification.sk-secondary-contrast,.sn-component .sk-input.sk-secondary-contrast{color:var(--sn-stylekit-secondary-contrast-foreground-color);position:relative;background-color:var(--sn-stylekit-secondary-contrast-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-secondary-contrast-border-color);border:1px solid var(--sn-stylekit-secondary-contrast-border-color)}.sn-component .sk-notification.sk-secondary-contrast *,.sn-component .sk-input.sk-secondary-contrast *{position:relative}.sn-component .sk-notification.sk-secondary-contrast:before,.sn-component .sk-input.sk-secondary-contrast:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-secondary-contrast-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-secondary-contrast:after,.sn-component .sk-input.sk-secondary-contrast:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-secondary-contrast-border-color);border-color:var(--sn-stylekit-secondary-contrast-border-color)}.sn-component .sk-notification.sk-secondary-contrast.no-bg,.sn-component .sk-input.sk-secondary-contrast.no-bg{background-color:transparent}.sn-component .sk-notification.sk-secondary-contrast.no-bg:before,.sn-component .sk-input.sk-secondary-contrast.no-bg:before{content:none}.sn-component .sk-notification.sk-secondary-contrast.featured,.sn-component .sk-input.sk-secondary-contrast.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-secondary-contrast.featured:before,.sn-component .sk-input.sk-secondary-contrast.featured:before{opacity:1.0}.sn-component .sk-notification.sk-base,.sn-component .sk-input.sk-base{color:var(--sn-stylekit-foreground-color);position:relative;background-color:var(--sn-stylekit-background-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-border-color);border:1px solid var(--sn-stylekit-border-color)}.sn-component .sk-notification.sk-base *,.sn-component .sk-input.sk-base *{position:relative}.sn-component .sk-notification.sk-base:before,.sn-component .sk-input.sk-base:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-background-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.sk-base:after,.sn-component .sk-input.sk-base:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;color:var(--sn-stylekit-border-color);border-color:var(--sn-stylekit-border-color)}.sn-component .sk-notification.sk-base.no-bg,.sn-component .sk-input.sk-base.no-bg{background-color:transparent}.sn-component .sk-notification.sk-base.no-bg:before,.sn-component .sk-input.sk-base.no-bg:before{content:none}.sn-component .sk-notification.sk-base.featured,.sn-component .sk-input.sk-base.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.sk-base.featured:before,.sn-component .sk-input.sk-base.featured:before{opacity:1.0}.sn-component .sk-notification.neutral,.sn-component .sk-input.neutral{color:var(--sn-stylekit-neutral-contrast-color);position:relative;background-color:var(--sn-stylekit-neutral-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-neutral-color)}.sn-component .sk-notification.neutral *,.sn-component .sk-input.neutral *{position:relative}.sn-component .sk-notification.neutral:before,.sn-component .sk-input.neutral:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-neutral-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.neutral:after,.sn-component .sk-input.neutral:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-neutral-color)}.sn-component .sk-notification.neutral.no-bg,.sn-component .sk-input.neutral.no-bg{background-color:transparent}.sn-component .sk-notification.neutral.no-bg:before,.sn-component .sk-input.neutral.no-bg:before{content:none}.sn-component .sk-notification.neutral.featured,.sn-component .sk-input.neutral.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.neutral.featured:before,.sn-component .sk-input.neutral.featured:before{opacity:1.0}.sn-component .sk-notification.info,.sn-component .sk-input.info{color:var(--sn-stylekit-info-contrast-color);position:relative;background-color:var(--sn-stylekit-info-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-info-color)}.sn-component .sk-notification.info *,.sn-component .sk-input.info *{position:relative}.sn-component .sk-notification.info:before,.sn-component .sk-input.info:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-info-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.info:after,.sn-component .sk-input.info:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-info-color)}.sn-component .sk-notification.info.no-bg,.sn-component .sk-input.info.no-bg{background-color:transparent}.sn-component .sk-notification.info.no-bg:before,.sn-component .sk-input.info.no-bg:before{content:none}.sn-component .sk-notification.info.featured,.sn-component .sk-input.info.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.info.featured:before,.sn-component .sk-input.info.featured:before{opacity:1.0}.sn-component .sk-notification.warning,.sn-component .sk-input.warning{color:var(--sn-stylekit-warning-contrast-color);position:relative;background-color:var(--sn-stylekit-warning-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-warning-color)}.sn-component .sk-notification.warning *,.sn-component .sk-input.warning *{position:relative}.sn-component .sk-notification.warning:before,.sn-component .sk-input.warning:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-warning-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.warning:after,.sn-component .sk-input.warning:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-warning-color)}.sn-component .sk-notification.warning.no-bg,.sn-component .sk-input.warning.no-bg{background-color:transparent}.sn-component .sk-notification.warning.no-bg:before,.sn-component .sk-input.warning.no-bg:before{content:none}.sn-component .sk-notification.warning.featured,.sn-component .sk-input.warning.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.warning.featured:before,.sn-component .sk-input.warning.featured:before{opacity:1.0}.sn-component .sk-notification.danger,.sn-component .sk-input.danger{color:var(--sn-stylekit-danger-contrast-color);position:relative;background-color:var(--sn-stylekit-danger-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-danger-color)}.sn-component .sk-notification.danger *,.sn-component .sk-input.danger *{position:relative}.sn-component .sk-notification.danger:before,.sn-component .sk-input.danger:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-danger-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.danger:after,.sn-component .sk-input.danger:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-danger-color)}.sn-component .sk-notification.danger.no-bg,.sn-component .sk-input.danger.no-bg{background-color:transparent}.sn-component .sk-notification.danger.no-bg:before,.sn-component .sk-input.danger.no-bg:before{content:none}.sn-component .sk-notification.danger.featured,.sn-component .sk-input.danger.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.danger.featured:before,.sn-component .sk-input.danger.featured:before{opacity:1.0}.sn-component .sk-notification.success,.sn-component .sk-input.success{color:var(--sn-stylekit-success-contrast-color);position:relative;background-color:var(--sn-stylekit-success-color);overflow:hidden;border-radius:var(--sn-stylekit-general-border-radius);border-color:var(--sn-stylekit-success-color)}.sn-component .sk-notification.success *,.sn-component .sk-input.success *{position:relative}.sn-component .sk-notification.success:before,.sn-component .sk-input.success:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sn-stylekit-success-color);opacity:1.0;border-radius:var(--sn-stylekit-general-border-radius)}.sn-component .sk-notification.success:after,.sn-component .sk-input.success:after{content:'';display:block;height:100%;position:absolute;top:0;left:0;width:100%;border-radius:var(--sn-stylekit-general-border-radius);pointer-events:none;box-shadow:inset 0 0 0 1px;color:var(--sn-stylekit-success-color)}.sn-component .sk-notification.success.no-bg,.sn-component .sk-input.success.no-bg{background-color:transparent}.sn-component .sk-notification.success.no-bg:before,.sn-component .sk-input.success.no-bg:before{content:none}.sn-component .sk-notification.success.featured,.sn-component .sk-input.success.featured{border:none;padding:0.75rem 1.25rem;font-size:var(--sn-stylekit-font-size-h3)}.sn-component .sk-notification.success.featured:before,.sn-component .sk-input.success.featured:before{opacity:1.0}.sn-component .sk-notification{padding:1.1rem 1rem;margin:1.4rem 0;text-align:left;cursor:default}.sn-component .sk-notification.one-line{padding:0rem 0.4rem}.sn-component .sk-notification.stretch{width:100%}.sn-component .sk-notification.dashed{border-style:dashed;border-width:2px}.sn-component .sk-notification.dashed:after{box-shadow:none}.sn-component .sk-notification .sk-notification-title{font-size:var(--sn-stylekit-font-size-h1);font-weight:bold;line-height:1.9rem}.sn-component .sk-notification .sk-notification-text{line-height:1.5rem;font-size:var(--sn-stylekit-font-size-p);text-align:left;font-weight:normal}.sn-component .sk-circle{border:1px solid;cursor:pointer;border-color:var(--sn-stylekit-contrast-foreground-color);background-color:var(--sn-stylekit-contrast-background-color);padding:0;border-radius:50% !important;flex-shrink:0}.sn-component .sk-circle:before{border-radius:50% !important}.sn-component .sk-circle:after{border-radius:50% !important}.sn-component .sk-circle.small{width:11px;height:11px}.sn-component .sk-spinner{border:1px solid var(--sn-stylekit-neutral-color);border-radius:50%;animation:rotate 0.8s infinite linear;border-right-color:transparent}.sn-component .sk-spinner.small{width:12px;height:12px}.sn-component .sk-spinner.info-contrast{border-color:var(--sn-stylekit-info-contrast-color);border-right-color:transparent}.sn-component .sk-spinner.info{border-color:var(--sn-stylekit-info-color);border-right-color:transparent}.sn-component .sk-spinner.warning{border-color:var(--sn-stylekit-warning-color);border-right-color:transparent}.sn-component .sk-spinner.danger{border-color:var(--sn-stylekit-danger-color);border-right-color:transparent}.sn-component .sk-spinner.success{border-color:var(--sn-stylekit-success-color);border-right-color:transparent}@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.sn-component .sk-app-bar{display:flex;width:100%;height:2rem;padding:0.0rem 0.8rem;background-color:var(--sn-stylekit-contrast-background-color);color:var(--sn-stylekit-contrast-foreground-color);justify-content:space-between;align-items:center;border:1px solid var(--sn-stylekit-contrast-border-color);user-select:none}.sn-component .sk-app-bar.no-edges{border-left:0;border-right:0}.sn-component .sk-app-bar.no-bottom-edge{border-bottom:0}.sn-component .sk-app-bar .left,.sn-component .sk-app-bar .right{display:flex;height:100%}.sn-component .sk-app-bar .sk-app-bar-item{flex-grow:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.sn-component .sk-app-bar .sk-app-bar-item:not(:first-child){margin-left:1rem}.sn-component .sk-app-bar .sk-app-bar-item.border{border-left:1px solid var(--sn-stylekit-contrast-border-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column{height:100%;display:flex;align-items:center}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column:not(:first-child){margin-left:0.5rem}.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column.underline{border-bottom:2px solid var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item.no-pointer{cursor:default}.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-sublabel:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-label:not(.subtle),.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-panel-section-subtitle:not(.subtle),.sn-component .sk-app-bar .sk-app-bar-item:hover>.sk-app-bar-item-column>.sk-sublabel:not(.subtle){color:var(--sn-stylekit-info-color)}.sn-component .sk-app-bar .sk-app-bar-item>.sk-label,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-panel-section-subtitle,.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-label,.sn-component .sk-app-bar .sk-panel-section .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle,.sn-component .sk-panel-section .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-panel-section-subtitle{font-weight:bold;font-size:var(--sn-stylekit-font-size-h5);white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item>.sk-sublabel,.sn-component .sk-app-bar .sk-app-bar-item>.sk-app-bar-item-column>.sk-sublabel{font-size:var(--sn-stylekit-font-size-h5);font-weight:normal;white-space:nowrap}.sn-component .sk-app-bar .sk-app-bar-item .subtle{font-weight:normal;opacity:0.6}.sn-component .sk-panel-table{display:flex;flex-wrap:wrap;padding-left:1px;padding-top:1px}.sn-component .sk-panel-table .sk-panel-table-item{flex:45%;flex-flow:wrap;border:1px solid var(--sn-stylekit-border-color);padding:1rem;margin-left:-1px;margin-top:-1px;display:flex;flex-direction:column;justify-content:space-between}.sn-component .sk-panel-table .sk-panel-table-item img{max-width:100%;margin-bottom:1rem}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-content{display:flex;flex-direction:row}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column{align-items:center}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.stretch{width:100%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column:not(:first-child){padding-left:0.75rem}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.quarter{flex-basis:25%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-column.three-quarters{flex-basis:75%}.sn-component .sk-panel-table .sk-panel-table-item .sk-panel-table-item-footer{margin-top:1.25rem}.sn-component .sk-panel-table .sk-panel-table-item.no-border{border:none}.sn-component .sk-modal{position:fixed;margin-left:auto;margin-right:auto;left:0;right:0;top:0;bottom:0;z-index:10000;width:100vw;height:100vh;background-color:transparent;color:var(--sn-stylekit-contrast-foreground-color);display:flex;align-items:center;justify-content:center}.sn-component .sk-modal .sn-component{height:100%}.sn-component .sk-modal .sn-component .sk-panel{height:100%}.sn-component .sk-modal.auto-height>.sk-modal-content{height:auto !important}.sn-component .sk-modal.large>.sk-modal-content{width:900px;height:600px}.sn-component .sk-modal.medium>.sk-modal-content{width:700px;height:500px}.sn-component .sk-modal.small>.sk-modal-content{width:700px;height:344px}.sn-component .sk-modal .sk-modal-background{position:absolute;z-index:-1;width:100%;height:100%;background-color:var(--sn-stylekit-contrast-background-color);opacity:0.7}.sn-component .sk-modal>.sk-modal-content{overflow-y:auto;width:auto;padding:0;padding-bottom:0;min-width:300px;-webkit-box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19);-moz-box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19);box-shadow:0px 2px 35px 0px rgba(0,0,0,0.19)}.sn-component.no-select{user-select:none}input,textarea,[contenteditable]{caret-color:var(--sn-stylekit-editor-foreground-color)}.windows-web,.windows-desktop,.linux-web,.linux-desktop{scrollbar-width:thin}.windows-web ::-webkit-scrollbar,.windows-desktop ::-webkit-scrollbar,.linux-web ::-webkit-scrollbar,.linux-desktop ::-webkit-scrollbar{width:17px;height:18px;border-left:0.5px solid var(--sn-stylekit-scrollbar-track-border-color-color)}.windows-web ::-webkit-scrollbar-thumb,.windows-desktop ::-webkit-scrollbar-thumb,.linux-web ::-webkit-scrollbar-thumb,.linux-desktop ::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;-webkit-border-radius:10px;background-color:var(--sn-stylekit-scrollbar-thumb-color);-webkit-box-shadow:inset -1px -1px 0px rgba(0,0,0,0.05),inset 1px 1px 0px rgba(0,0,0,0.05)}.windows-web ::-webkit-scrollbar-button,.windows-desktop ::-webkit-scrollbar-button,.linux-web ::-webkit-scrollbar-button,.linux-desktop ::-webkit-scrollbar-button{width:0;height:0;display:none}.windows-web ::-webkit-scrollbar-corner,.windows-desktop ::-webkit-scrollbar-corner,.linux-web ::-webkit-scrollbar-corner,.linux-desktop ::-webkit-scrollbar-corner{background-color:transparent}