{"version":3,"sources":["app.scss","custom-styles.scss","fonts/_fonts.scss","utilities/_reboot.scss","layout/_base.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","layout/_appbar.scss","layout/_aside.scss","layout/_section.scss","cards/_image-card.scss","components/_link.scss","components/_list.scss","components/_text.scss","components/_media.scss","components/_video.scss","components/_misc.scss","_variables.scss","components/_chat.scss","components/_stories.scss","components/_profile.scss","components/_qa.scss","components/_hero.scss","components/_auth.scss","components/_modifiers.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA,8DCCE,8BAGF,gBACI,WAGJ,QACI,kCAGJ,wBACI,yBACA,qBAGJ,kBACI,cAGJ,gDAEI,cAGJ,6CAEE,yBAGF,4DACI,8BChCJ,WACI,sBACA,oMAIA,iBACA,kBACA,kBAGJ,WACI,sBACA,mNAIA,mBACA,kBACA,kBAGJ,WACI,sBACA,wNAIA,gBACA,kBACA,kBAGJ,WACI,sBACA,8MAIA,gBACA,kBACA,kBCzCJ,SAGE,SACA,UACA,gBCLF,UACI,uBACA,sBACA,0DACA,2DACA,aACA,sBACA,aACA,cACA,qBAEJ,aACI,2BACA,mBACA,oCACA,sBACA,4BACA,kCACA,2BACA,0CACA,sCACA,gCAMA,kBACA,YACA,YACA,aARA,kCACI,gCACA,0CACA,uCAMJ,kBACI,sBAEJ,yBACI,kCAEJ,mBACI,YACA,mBACA,eACA,qCAIR,UACI,gEACA,gBACI,iBACA,kBACA,mBACI,2BAKZ,0BACI,kBACA,MACA,QACA,SACA,OACA,6BACA,aACA,sBACA,wBACA,eACA,YACA,UACA,kBACA,aACA,qCACI,aACA,UACA,mBACA,aAEJ,uCACI,aCfJ,yBDoBA,UACI,sBAGA,4BACI,oBAEJ,mBACI,qBAIJ,0BACI,gBACA,UACA,mBACA,aACA,iBCrCR,0BD2CA,4BACI,qBErGR,UACI,oBACA,YACA,4BACI,YACA,yBACA,sEACI,sBAMZ,YACI,qBACA,qCACA,sBACA,2BACA,8CACA,kCACA,yBACA,iCACA,oCACA,2CACA,0CASA,eACA,iBACA,qBACA,4CACA,aAZA,iCACI,wBACA,sCACA,iCACA,oCACA,2CACA,0CAOJ,yBACI,gCAEJ,iBACI,aACA,mBAEJ,iBACI,oBACA,2CACA,kCAEJ,gBACI,aACA,mBACA,4BACI,8BAEJ,2BACI,+BAEJ,mBACI,oBACA,mCACA,oCAGR,iBACI,oBACA,mBACA,uBACA,4BACA,8BACA,oCACA,4BACA,2BACA,wBACA,wEACI,mCACA,qCAEJ,qBACI,gCACA,+BAGR,oBACI,aACA,8BACA,YD9BJ,yBCmCA,UACI,oBACA,YACA,aACI,YAEJ,4BACI,YAGR,YACI,sBACA,4BACA,kCACA,6BChHR,WACI,yBACA,2BACA,YACA,aACA,sBACA,wBACA,cACA,gBACA,2CACA,gBACI,kCAEJ,gBACI,mDACA,aACA,mBACA,8BAEJ,gBACI,mDACA,aACA,mBACA,8BAEJ,kBACI,gBACA,MACA,UACA,qDACA,2BAEJ,gBACI,mDACA,eACA,6CACI,uCAEJ,uBACI,8CACA,qCACA,4DAGR,gBACI,gBACA,YACA,cAGJ,eACI,8CACA,8BACI,qCACA,6BACA,wCACI,cFoBZ,4BEZI,yBACI,aACA,mCACI,gBACA,UACA,mBACA,aACA,iBFRZ,yBEgBI,gBACI,eACA,OACA,yBACA,UAGR,gBACI,iCCvFR,aACI,kBACA,uCACA,iBACA,kBACI,qBACA,mBAII,0CACI,kBAEJ,uCACI,gBHiDZ,yBG1CA,aACI,iBACA,gBACI,iBAEJ,kBACI,mBAII,0CACI,kBAEJ,uCACI,iBCnCpB,YACI,aACA,sBACA,mBACA,YACA,sBACA,kBACA,aACA,gBAGF,kBACE,WACA,YACA,iBACA,iBACA,mBAGF,kBACE,eACA,iBACA,kBAGF,wBACE,eC1BJ,MACI,4BACA,iCAIA,qBACA,oBACA,mBACA,YACA,iBACA,gBACA,mBACA,oBACA,YACA,+BACA,UACA,wBACI,yBAEJ,YACI,aACA,mBACA,+BACI,oBCpBR,gBACI,iCACA,sCAKA,gBAJA,qCACI,iCACA,0CAGJ,wBACI,iBACA,8BAEJ,mBACI,WACA,yDACI,aACA,mBACA,qBACA,IApBK,QAqBL,sBACA,wBACA,iBACA,oBACA,gBACA,iNACI,8BAEJ,sIACI,YACA,WAGR,oCACI,YACA,yBACA,WAGA,6DACI,6BAKhB,iBACI,aAKJ,gBACI,aACA,mBCvDJ,oBACI,qCAIA,kBACA,gBACA,oBACA,yBACA,4BAPA,yCACI,qCAUZ,WACI,qBAGJ,aACI,oCAIA,iBACA,gBACA,2BALA,kCACI,oCAOR,cACI,qCAIA,iBACA,gBACA,4BACA,yBANA,mCACI,qCAQR,gBACI,kBACA,mBACI,mBAEJ,mBACI,gBAGA,6BACI,gBAGR,sCACI,iBACA,4CACI,+BAEJ,0CACI,gBAEJ,sEACI,gBAIJ,sEACI,gBAEJ,kCACI,mBCrEZ,WACI,4BACA,gCACA,8BACA,qCAKA,oBACA,mBACA,uBACA,cACA,uBACA,sBACA,+BACA,2BAXA,gCACI,+BACA,mCAUJ,eACI,YACA,WACA,2CACA,iBAEJ,gCACI,4BACA,2BAEJ,oBACI,qCAEJ,oBACI,aACA,mBAEI,wCACI,wCAIZ,iBACI,kBACA,aACA,mBACA,SACA,iCACA,uCACA,yCACA,sCACI,iCACA,uCACA,yCAEJ,0BACI,8BACA,uCACA,yCAEJ,+CACI,8BACA,uCACA,yCAGR,cACI,sBACA,uBAEJ,kBACI,kBACA,mBACA,iCACI,uBAGR,eACI,aACA,sBACA,YACA,WACA,mBACA,eACA,gBACA,qBACI,gBACA,wBACA,eACA,gBACA,uBACA,mBACA,+BACI,cACA,gBACA,8BAGR,uBACI,kBACA,gCAEJ,0BACI,eACA,cACA,oBACA,8BACI,YACA,WAGR,yBACI,wBAEJ,wBACI,iBACA,wBACA,gBACA,eACA,gBACA,uBACA,mBAEJ,qBACI,kBACA,8BAEJ,uBACI,kBACA,8BACA,gBACA,mBACA,0BAEJ,wBACI,iBACA,gBACA,8BACA,+BACI,kBACA,gBACA,wBAIZ,eACI,aACA,mBACA,YACA,eACA,uBACI,8BAEJ,2BACI,SACA,6BACI,kBAEI,sDACI,kBACA,eACA,WACA,WACA,UACA,kBACA,QACA,2BACA,2CAMpB,kBACI,kBACA,QACA,UACA,2CACI,UAEJ,yCACI,UAGR,gBACI,aACA,sBAMA,iBACI,mCACA,qBACI,2CAGR,iBACI,kCACA,qBACI,2CATR,iBACI,mCACA,qBACI,2CAGR,iBACI,kCACA,qBACI,2CATR,iBACI,mCACA,qBACI,2CAGR,iBACI,kCACA,qBACI,2CCtMhB,WACI,WACA,sCAGJ,WACI,kCACA,yBACA,yCAIA,aACA,kBACA,2CACA,sCANA,gCACI,yCAMJ,gBACI,kBACA,4BACA,SACA,QACA,gCACA,4BACA,2BACA,0CACI,YACA,WAKZ,WACI,yCAIA,qBACA,2CACA,sCALA,gCACI,yCAOR,WACI,kCACA,yBACA,yCAIA,aACA,kBACA,2CACA,sCANA,gCACI,yCAMJ,gBACI,kBACA,4BACA,SACA,QACA,gCACA,4BACA,2BACA,0CACI,YACA,WC5DZ,aACI,kBACA,MACA,OACA,QACA,SACA,gCACA,YACA,WACA,aACA,oBACI,cAIR,UACI,4BACA,2BACA,8BACI,4BACA,2BAIR,gBACI,kBACA,sBACI,kBACA,iBACA,6BACA,MCoEgB,KDnEhB,uCACA,0CACA,kCAEJ,oBACI,8BAEJ,0BACI,kBACA,MACA,QACA,2BAGR,UACI,YACA,yBACA,yBACA,iBACA,iBEnDJ,WACI,sCACA,uBACA,yBACA,4BACA,iCACA,2CACA,wCACA,yCACA,yCACA,sBACA,uBACA,qBAOA,eACA,aACA,8BARA,gCACI,+BACA,iCACA,2CACA,wCAKJ,mBACI,UACA,mBACA,mBAEJ,gBACI,aACA,qBACA,kDAEJ,qBACI,iBACA,gBACA,kBACA,kDAEJ,kBACI,+BACA,cACA,oBAEJ,iBACI,WACA,aACA,sBACA,mBACI,kCACA,oCACI,sBAGR,2BACI,yDAEI,0DACI,8CAEJ,yDACI,2CAEJ,gEACI,2CACA,8CAIZ,2BACI,qBAEI,0DACI,+CAEJ,yDACI,4CAEJ,gEACI,4CACA,+CAKhB,kBACI,kBACA,aACA,mBACA,kBACA,eACA,4BACI,2BAGJ,iDACI,oDAGR,gBACI,kBACA,oBACA,sBACA,wBACA,2BACA,0BACI,mCACA,sCAGR,gBACI,aACA,sBACA,sBACA,2BACA,0BACI,YAEJ,oBACI,WAEJ,sBACI,oBACA,gBAGR,kBACI,oBACA,kBACA,0BACA,+BACA,oBACA,wBACI,gCAGR,iBACI,wBACA,2BACA,sBACA,gBACA,aACA,2BACA,eACA,WACA,YACA,wDACI,YACA,WACA,0FACI,eAGR,4BACI,YACA,iBAGR,gBACI,sBACA,wBACA,2BACA,0BACI,wCACA,oBAGR,gBACI,sBACA,wBACA,2BACA,0BACI,wCACA,oBAGR,iBACI,UACA,aACA,mBACA,0CACI,UAEJ,2BACI,UACA,oBAEJ,2BACI,WACA,qBACA,2BAEJ,yCACI,UAKZ,UACI,sCACA,wBACA,gCACA,oCACA,sBACA,sCACA,2BACA,0BACA,0BACA,mCACA,4BASA,kBACA,gBATA,+BACI,uCACA,8BACA,6BACA,6BACA,+BACA,mCAKA,wBACI,kBACA,QACA,yBACA,2BACA,YACA,aACA,sBACA,wBACA,6CACA,2BACA,aACA,mCACI,eAIZ,eACI,kBACA,aACA,mBACA,kDACA,0BACA,8CACA,YACA,kBACA,iBACI,iBAGR,iBACI,kBACA,SACA,OACA,QACA,oCACA,4BACA,8CACA,aACA,mBACA,UACA,kBACA,oBACA,wBACI,UACA,mBAGR,eACI,YACA,gBACA,cACA,YAEJ,eACI,aACA,qBACA,0BACA,yCACA,sBACI,iEAEJ,qBACI,yEACA,YACA,aACA,qBAEJ,qBACI,YACA,cACA,sCACA,mBACA,sBACA,kBACA,mBACA,oBACA,mCACI,aAKR,oBACI,aACA,WACA,iBACA,sBAIJ,qBACI,aACA,mBACA,eACA,iBACA,wBACI,gBAGR,oBACI,uCACA,mCACA,iCACA,yBACA,wBACA,yCACA,oBACA,4FAGR,eACI,2BACA,aACA,sBACA,iCACA,sBAEI,kDACI,4DAGR,qBACI,YACA,4BACI,mCAEJ,yBACI,WACA,YACA,iBACA,sBAGR,qBACI,aACA,2BACA,wBAEJ,qBACI,aACA,sBACA,iBACA,oBACA,kBACA,iDACI,kBACA,OACA,QACA,MACA,SACA,WACA,mCACA,WACA,8SZxTZ,0BYkUI,8BACI,kCAKZ,oBACI,qCAGJ,mBACI,oCAGJ,iBACI,kCAKA,qBACI,0CAEJ,qBACI,mCACA,iCAEJ,2BACI,aAEJ,6BACI,cAEJ,0BACI,WACA,sCACI,cAEJ,wCACI,aCvaZ,qBACI,GACI,QAEJ,KACI,YAIJ,mBACI,sCACA,+CAKA,iBAJA,wCACI,6CACA,mDAIA,mCACI,eACA,YAEJ,iCACI,gBACA,eACA,4CACI,oBACA,2CAIJ,yDACI,2LAKhB,oBACI,gBACA,WACA,iBACA,kBACA,YACA,yCACA,iDACA,2CACA,yCACI,yCACA,iDACA,2CAGA,kCACI,sCACA,2CAEJ,uCACI,kBACA,UACA,WACA,YACA,aACA,iBACA,UACA,UACA,8CACI,kBACA,aACA,qBACA,WACA,mCACA,oDACI,kBACA,WACA,MACA,OACA,SACA,QACA,qBACA,0CAGA,2DACI,8CAOxB,kBACI,kBACA,aACA,YACA,6BACI,YACA,iBAGR,qBACI,kBACA,QACA,eACA,sCACA,4MAGA,6BACI,aAGR,kBACI,qBACA,oBACA,iBACA,kBACA,WACA,YbvDJ,yBa8DQ,6BACI,aAGR,kBACI,aClIZ,aACI,wBACA,4BACA,2BACA,8BACA,kCACI,8BACA,iCAEJ,kBACI,0BACA,mBAEJ,mBACI,4BACA,yBACI,aACA,WACA,sBACA,iBAGR,kBACI,4BAEJ,oBACI,wCAEJ,iBACI,aACA,iBAEJ,qBACI,mCACA,+BACA,4Bd4BJ,yBcrBQ,yBACI,cdoBZ,yBcXQ,yBACI,cCnDhB,QACI,yBACA,oCACA,sCACA,6BACI,4BACA,kCACA,mCAEJ,eACI,oBACA,cACA,sBAEJ,aACI,aACA,wBACA,SACA,gBACA,4BACI,gBACA,MACA,UACA,8BACA,yCACA,4CACA,wCACI,gBAGR,6BACI,kBACA,wBACA,gEACI,gBACA,MAIZ,gBACI,iBACA,YACA,wBAIR,QACI,sBACA,eACI,aACA,sBACA,yBAGA,4BACI,UACA,6BACA,oCACA,uBAIJ,+BACI,iCACA,gBAEJ,2DACI,8BAEJ,4DACI,wBCxEZ,UACI,sBAIA,mBACA,qBAJA,+BACI,yBCFJ,mBACI,aACA,mBCHR,UACI,0CAEJ,YACI,iBAIA,aACI,8BACA,wCAFJ,aACI,8BACA,wCAFJ,aACI,8BACA,wCAFJ,aACI,8BACA,wCAFJ,aACI,8BACA,wCAFJ,aACI,8BACA,wCAFJ,cACI,+BACA,yCAFJ,cACI,+BACA,yCAFJ,cACI,+BACA,yCvBqBR","file":"app.css","sourcesContent":["/*! * Name: ConnectMe\r\n  * Version: v1.0.0\r\n  * Author: ILIASH HOSAIN.\r\n  * Copyright: Themeyn 2023.\r\n  * URI: https://themeforest.net/user/themeyn \r\n  \r\n----------------------\r\n## Table Contents ##\r\n* 01. FONTS\r\n* 02. LAYOUT\r\n* 03. COMPONENTS\r\n\r\n*/\r\n\r\n@import 'custom-styles';\r\n\r\n@import 'variables';\r\n\r\n@import \"node_modules/bootstrap/scss/functions\";\r\n@import \"node_modules/bootstrap/scss/variables\";\r\n@import \"node_modules/bootstrap/scss/mixins\";\r\n\r\n/** 01. FONTS */\r\n@import 'fonts/fonts';\r\n@import 'utilities/utilities';\r\n/** 02. LAYOUT */\r\n@import 'layout/layout';\r\n/** 03. COMPONENTS */\r\n@import 'cards/_image-card'; // Add this line to import the image-card component\r\n@import 'components/components';\r\n\r\n/*! END */\r\n////////////////////////// END STYLESHEET ////////////////////////////",".tyn-qa-bubbly .tyn-qa-item .tyn-qa-message .tyn-text-block{\r\n  background: #007b00 !important;\r\n}\r\n\r\n.tyn-qa-message {\r\n    color: #fff; /* Replace #008a00 with your desired text color */\r\n}\r\n  \r\n.tyn-qa {\r\n    --qa-bg-human: #007b00 !important;\r\n}\r\n  \r\n.tyn-aside-list .active {\r\n    background-color: #262626;\r\n    border-color: #008a00;\r\n}\r\n\r\n.tyn-list-links a {\r\n    color: #008a00; /* Default text color */\r\n}\r\n\r\n.tyn-list-links a:hover,\r\n.tyn-list-links a:focus {\r\n    color: #008a00; /* Hover or select color */\r\n}\r\n\r\n.tyn-aside-item:hover,\r\n.tyn-aside-item:active {\r\n  border: 1px solid #008a00;\r\n}\r\n\r\n.tyn-qa-bubbly .tyn-qa-item:nth-child(even) .tyn-qa-message {\r\n    background: #6b00c4 !important; /* Replace #6b00c4 with your desired background color */\r\n  }\r\n  ","@font-face {\r\n    font-family: 'Poppins';\r\n    src: local('Poppins Bold'), local('Poppins-Bold'),\r\n        url('#{$font-src}Poppins-Bold.woff') format('woff'),\r\n        url('#{$font-src}Poppins-Bold.ttf') format('truetype'),\r\n        url('#{$font-src}Poppins-Bold.svg') format('svg');\r\n    font-weight: bold;\r\n    font-style: normal;\r\n    font-display: swap;\r\n}\r\n\r\n@font-face {\r\n    font-family: 'Poppins';\r\n    src: local('Poppins Regular'), local('Poppins-Regular'),\r\n        url('#{$font-src}Poppins-Regular.woff') format('woff'),\r\n        url('#{$font-src}Poppins-Regular.ttf') format('truetype'),\r\n        url('#{$font-src}Poppins-Regular.svg') format('svg');\r\n    font-weight: normal;\r\n    font-style: normal;\r\n    font-display: swap;\r\n}\r\n\r\n@font-face {\r\n    font-family: 'Poppins';\r\n    src: local('Poppins SemiBold'), local('Poppins-SemiBold'),\r\n        url('#{$font-src}Poppins-SemiBold.woff') format('woff'),\r\n        url('#{$font-src}Poppins-SemiBold.ttf') format('truetype'),\r\n        url('#{$font-src}Poppins-SemiBold.svg') format('svg');\r\n    font-weight: 600;\r\n    font-style: normal;\r\n    font-display: swap;\r\n}\r\n\r\n@font-face {\r\n    font-family: 'Poppins';\r\n    src: local('Poppins Medium'), local('Poppins-Medium'),\r\n        url('#{$font-src}Poppins-Medium.woff') format('woff'),\r\n        url('#{$font-src}Poppins-Medium.ttf') format('truetype'),\r\n        url('#{$font-src}Poppins-Medium.svg') format('svg');\r\n    font-weight: 500;\r\n    font-style: normal;\r\n    font-display: swap;\r\n}\r\n\r\n","ol,\r\nul,\r\ndl {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\r\n}",".#{$app-prefix}root{\r\n    --bg:#{$root-body-bg};\r\n    --appbar-height: 65px;\r\n    --content-full-height: calc(100vh - var(--appbar-height));\r\n    --content-full-height: calc(100dvh - var(--appbar-height));\r\n    display: flex;\r\n    flex-direction: column;\r\n    height: 100vh;\r\n    height: 100dvh;\r\n    background: var(--bg);\r\n}\r\n.#{$app-prefix}content{\r\n    --aside-bg:#{$root-white};\r\n    --aside-width:100%;\r\n    --aside-gap-x: #{$root-body-gap-x};\r\n    --aside-gap-y: 1.5rem;\r\n    --aside-head-gap-y: 1.25rem;\r\n    --aside-item-bubbly-radius: .5rem;\r\n    --aside-item-gap-y: .75rem;\r\n    --aside-item-active-bg:var(--#{$prefix}gray-100);\r\n    --border-color: #{$root-primary-100};\r\n    --content-bg: #{$root-body-bg};\r\n    [data-bs-theme=dark] & {\r\n        --aside-bg:var(--#{$prefix}root-black);\r\n        --aside-item-active-bg:var(--#{$prefix}gray-900);\r\n        --border-color: var(--#{$prefix}border-color);\r\n    }\r\n    position: relative;\r\n    z-index: 999;\r\n    flex-grow: 1;\r\n    display: flex;\r\n    &-page{\r\n        flex-direction: column;\r\n    }\r\n    &-full-height{\r\n        height: var(--content-full-height);\r\n    }\r\n    &-inner{\r\n        flex-grow: 1;\r\n        padding: 2rem .5rem;\r\n        max-width: 100%;\r\n        min-width: var(--content-inner-width);\r\n    }\r\n}\r\n\r\n.tyn-main{\r\n    background: rgba(#{$root-body-bg-rgb}, var(--bs-bg-opacity,1));\r\n    &-boxed{\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        &-lg{\r\n            max-width: 780px !important;\r\n        }\r\n    }\r\n}\r\n\r\n.#{$app-prefix}aside-base + .#{$app-prefix}main{\r\n    position: absolute;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    background: var(--content-bg);\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: stretch;\r\n    max-width: 100%;\r\n    flex-grow: 1;\r\n    opacity: 1;\r\n    visibility: hidden;\r\n    display: none;\r\n    &.main-shown{\r\n        display: flex;\r\n        opacity: 1;\r\n        visibility: visible;       \r\n        z-index: 1000;\r\n    }\r\n    + .#{$app-prefix}overlay{\r\n        z-index: 1001;\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(md){\r\n    .#{$app-prefix}root{\r\n        --appbar-height: 73px;\r\n    }\r\n    .#{$app-prefix}content{\r\n        &.has-aside-base{\r\n            --aside-width:320px;\r\n        }\r\n        &-inner{\r\n            padding: 2rem 1.25rem;\r\n        }\r\n    }\r\n    .#{$app-prefix}aside-base{\r\n        + .#{$app-prefix}main{\r\n            position: static;\r\n            opacity: 1;\r\n            visibility: visible;\r\n            display: flex;  \r\n            overflow: hidden;\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(xxl){\r\n    .#{$app-prefix}content.has-aside-base{\r\n        --aside-width:360px;\r\n    }\r\n}","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))\n//    md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @if not $n {\n    @error \"breakpoint `#{$name}` not found in `#{$breakpoints}`\";\n  }\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map-get($breakpoints, $name);\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width.\n// The maximum value is reduced by 0.02px to work around the limitations of\n// `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $max: map-get($breakpoints, $name);\n  @return if($max and $max > 0, $max - .02, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n  $min:  breakpoint-min($name, $breakpoints);\n  $next: breakpoint-next($name, $breakpoints);\n  $max:  breakpoint-max($next, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($name, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($next, $breakpoints) {\n      @content;\n    }\n  }\n}\n","$appbar-nav-item-gap-x:               .75rem*.5;\r\n$appbar-nav-item-gap-x-md:            1.125rem*.5;\r\n$appbar-nav-icon-size-svg:            1rem;\r\n$appbar-nav-icon-size-svg-md:         1.25rem;\r\n$appbar-nav-gap-x:                    $body-gap-x;\r\n\r\n.#{$app-prefix}logo{\r\n    display: inline-flex;\r\n    height: 32px;\r\n    svg,img{\r\n        height: 100%;\r\n        color: var(--#{$prefix}gray-800);\r\n        [data-bs-theme=\"dark\"] &{\r\n            color: var(--#{$prefix}white);\r\n        }\r\n    }\r\n}\r\n\r\n\r\n.#{$app-prefix}appbar{\r\n    --bg:#{$root-white};\r\n    --border-color:#{$root-primary-100};\r\n    --nav-gap-x: #{$appbar-nav-gap-x - $appbar-nav-item-gap-x};\r\n    --nav-item-gap-x: #{$appbar-nav-item-gap-x};\r\n    --nav-icon-shape:#{$root-border-radius-pill};\r\n    --nav-icon-size:#{$root-size-rg};\r\n    --nav-icon-svg-size:#{$appbar-nav-icon-size-svg};\r\n    --nav-icon-bg:var(--#{$prefix}gray-200);\r\n    --nav-icon-color:var(--#{$prefix}gray-700);\r\n    --nav-icon-active-bg:var(--#{$prefix}primary-200);\r\n    --nav-icon-active-color:var(--#{$prefix}primary);\r\n    [data-bs-theme=dark] & {\r\n        --bg:var(--#{$prefix}gray-800);\r\n        --border-color:var(--#{$prefix}border-color);\r\n        --nav-icon-bg:var(--#{$prefix}gray-700);\r\n        --nav-icon-color:var(--#{$prefix}gray-400);\r\n        --nav-icon-active-bg:var(--#{$prefix}primary-200);\r\n        --nav-icon-active-color:var(--#{$prefix}primary);\r\n    }\r\n    position: fixed;\r\n    inset: 0 0 auto 0;\r\n    background: var(--bg);\r\n    border-bottom: 1px solid var(--border-color);\r\n    z-index: 1000;\r\n    + .#{$app-prefix}content{\r\n        margin-top: var(--appbar-height);\r\n    }\r\n    &-wrap{\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n    &-logo{\r\n        display: inline-flex;\r\n        border-right: 1px solid var(--border-color);\r\n        padding: 1rem var(--#{$prefix}body-gap-x);\r\n    }\r\n    &-nav{\r\n        display: flex;\r\n        align-items: center;\r\n        &:first-child{\r\n            padding-left: var(--nav-gap-x);\r\n        }\r\n        &:last-child{\r\n            padding-right: var(--nav-gap-x);\r\n        }\r\n        > li{\r\n            display: inline-flex;\r\n            padding-left: var(--nav-item-gap-x);\r\n            padding-right: var(--nav-item-gap-x);\r\n        }\r\n    }\r\n    &-link{\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: var(--nav-icon-color);\r\n        background: var(--nav-icon-bg);\r\n        border-radius: var(--nav-icon-shape);\r\n        height: var(--nav-icon-size);\r\n        width: var(--nav-icon-size);\r\n        transition: all .3s ease;\r\n        &.active, .active &,&:hover{\r\n            color: var(--nav-icon-active-color);\r\n            background: var(--nav-icon-active-bg);\r\n        }\r\n        svg{\r\n            height: var(--nav-icon-svg-size);\r\n            width: var(--nav-icon-svg-size);\r\n        }\r\n    }\r\n    &-content{\r\n        display: flex;\r\n        justify-content: space-between;\r\n        flex-grow: 1;\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(md){\r\n    .#{$app-prefix}logo{\r\n        display: inline-flex;\r\n        height: 40px;\r\n        &-sm{\r\n            height: 32px;\r\n        }\r\n        svg,img{\r\n            height: 100%;\r\n        }\r\n    }\r\n    .#{$app-prefix}appbar{\r\n        --nav-gap-x: #{$appbar-nav-gap-x - $appbar-nav-item-gap-x};\r\n        --nav-item-gap-x: #{$appbar-nav-item-gap-x-md};\r\n        --nav-icon-size:#{$root-size-lg};\r\n        --nav-icon-svg-size:#{$appbar-nav-icon-size-svg-md};\r\n    }\r\n}",".#{$app-prefix}aside{\r\n    width:var(--aside-width);\r\n    background: var(--aside-bg);\r\n    height: 100%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: stretch;\r\n    flex-shrink: 0;\r\n    overflow: hidden;\r\n    border-right: 1px solid var(--border-color);\r\n    &-base{\r\n        height: var(--content-full-height);\r\n    }\r\n    &-head{\r\n        padding: var(--aside-head-gap-y) var(--aside-gap-x);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    &-foot{\r\n        padding: var(--aside-head-gap-y) var(--aside-gap-x);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: space-between;\r\n    }\r\n    &-search{\r\n        position: sticky;\r\n        top: 0;\r\n        z-index: 1;\r\n        padding: 0 var(--aside-gap-x) var(--aside-item-gap-y);\r\n        background: var(--aside-bg);\r\n    }\r\n    &-item{\r\n        padding: var(--aside-item-gap-y) var(--aside-gap-x);\r\n        cursor: pointer;\r\n        &:hover,&.active{\r\n            background: var(--aside-item-active-bg);\r\n        }\r\n        &-bubbly{\r\n            border-radius: var(--aside-item-bubbly-radius);\r\n            margin: 0 calc(var(--aside-gap-x)*.5);\r\n            padding: var(--aside-item-gap-y) calc(var(--aside-gap-x)*.5);\r\n        }\r\n    }\r\n    &-body{\r\n        max-height: 100%;\r\n        height: 100%;\r\n        overflow: auto;\r\n    }\r\n    \r\n    &-row{\r\n        padding: var(--aside-gap-y) var(--aside-gap-x);\r\n        .nav-tabs-line{\r\n            margin: 0 calc(var(--aside-gap-x) * -1);\r\n            padding: 0 var(--aside-gap-x);\r\n            .nav-link{\r\n                padding-top: 0;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-down(md){\r\n    .#{$app-prefix}aside{\r\n        &.hidden-mobile{\r\n            display: none;\r\n            + .#{$app-prefix}main{\r\n                position: static;\r\n                opacity: 1;\r\n                visibility: visible;\r\n                display: flex;  \r\n                overflow: hidden;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(md){\r\n    .#{$app-prefix}aside{\r\n        &-base{\r\n            position: fixed;\r\n            left: 0;\r\n            top: var(--appbar-height);\r\n            z-index: 1;\r\n        }\r\n    }\r\n    .has-aside-base{\r\n        padding-left: var(--aside-width);\r\n    }\r\n}",".#{$app-prefix}section{\r\n    position: relative;\r\n    scroll-margin-top: var(--appbar-height);\r\n    padding: 3.5rem 0;\r\n    &-head{\r\n        margin-bottom: 1.5rem;\r\n        margin-top: -.5rem;\r\n    }\r\n    &-content{\r\n        + .#{$app-prefix}section{\r\n            &-content{\r\n                margin-top: 1.5rem;\r\n            }\r\n            &-head{\r\n                margin-top: 2rem;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(md){\r\n    .#{$app-prefix}section{\r\n        padding: 3.5rem 0;\r\n        &-lg{\r\n            padding: 4.5rem 0;\r\n        }\r\n        &-head{\r\n            margin-bottom: 2rem;\r\n        }\r\n        &-content{\r\n            + .#{$app-prefix}section{\r\n                &-content{\r\n                    margin-top: 3.5rem;\r\n                }\r\n                &-head{\r\n                    margin-top: 3rem;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}",".image-card {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 200px;\r\n    border: 1px solid #ccc;\r\n    border-radius: 5px;\r\n    padding: 10px;\r\n    margin-top: 10px;\r\n  }\r\n  \r\n  .image-card-image {\r\n    width: 100%;\r\n    height: auto;\r\n    max-height: 200px;\r\n    object-fit: cover;\r\n    margin-bottom: 10px;\r\n  }\r\n  \r\n  .image-card-title {\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    margin-bottom: 5px;\r\n  }\r\n  \r\n  .image-card-description {\r\n    font-size: 14px;\r\n  }\r\n  ",".link{\r\n    --color: var(--#{$prefix}gray-500);\r\n    --hover-color: var(--#{$prefix}primary);\r\n    [data-bs-theme=\"dark\"] &{\r\n        \r\n    }\r\n    text-decoration: none;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap:.375rem;\r\n    font-size: .75rem;\r\n    font-weight: 600;\r\n    color: var(--color);\r\n    transition: .3s ease;\r\n    border: none;\r\n    background-color: transparent;\r\n    padding: 0;\r\n    &:hover,&:focus{\r\n        color: var(--hover-color);\r\n    }\r\n    &-group{\r\n        display: flex;\r\n        align-items: center;\r\n        > li, > div{\r\n            display: inline-flex;\r\n        }\r\n    }\r\n}","$list-links-gap-x: 1.25rem;\r\n$list-links-gap-y: .5rem;\r\n$list-links-icon-gap:.675rem; \r\n.#{$app-prefix}list{\r\n    &-links{\r\n        --link-color: var(--#{$prefix}gray-500);\r\n        --link-hover-color: var(--#{$prefix}primary);\r\n        [data-bs-theme=\"dark\"] &{\r\n            --link-color: var(--#{$prefix}gray-300);\r\n            --link-hover-color: var(--#{$prefix}primary-500);\r\n        }\r\n        padding: .5rem 0;\r\n        &-heading{\r\n            font-size: .75rem;\r\n            padding: $list-links-gap-y $list-links-gap-x $list-links-gap-y*.75;\r\n        }\r\n        li{\r\n            width: 100%;\r\n            a,button:not(.btn){\r\n                display: flex;\r\n                align-items: center;\r\n                text-decoration: none;\r\n                gap:$list-links-icon-gap;\r\n                padding: $list-links-gap-y $list-links-gap-x;\r\n                color: var(--link-color);\r\n                font-size: .75rem;\r\n                line-height: 1.25rem;\r\n                font-weight: 500;\r\n                &:hover,&:focus,&.active{\r\n                    color: var(--link-hover-color);\r\n                }\r\n                svg,.icon{\r\n                    height: 1rem;\r\n                    width: 1rem;\r\n                }\r\n            }\r\n            button:not(.btn){\r\n                border: none;\r\n                background: transparent;\r\n                width: 100%;\r\n            }\r\n            &:not(:first-child){\r\n                .#{$app-prefix}list-links-heading{\r\n                    padding: $list-links-gap-y*2 $list-links-gap-x $list-links-gap-y*.75;\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-inline{\r\n        display: flex;\r\n    }\r\n}\r\n\r\n.#{$app-prefix}btn{\r\n    &-inline{\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n}",".#{$app-prefix}title{\r\n    &-overline{\r\n        --overline-color: var(--#{$prefix}gray-400);\r\n        [data-bs-theme=\"dark\"] &{\r\n            --overline-color: var(--#{$prefix}gray-200);\r\n        }\r\n        font-size: .688rem;\r\n        font-weight: 700;\r\n        letter-spacing: 0.1em;\r\n        text-transform: uppercase;\r\n        color: var(--overline-color);\r\n    }\r\n}\r\n\r\n.#{$app-prefix}title{\r\n    margin-bottom: 0.25rem;\r\n}\r\n\r\n.#{$app-prefix}subtext{\r\n    --subtext-color: var(--#{$prefix}gray-400);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --subtext-color: var(--#{$prefix}gray-300);\r\n    }\r\n    font-size: 0.75rem;\r\n    font-weight: 500;\r\n    color: var(--subtext-color);\r\n}\r\n\r\n.#{$app-prefix}overline{\r\n    --overline-color: var(--#{$prefix}gray-500);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --overline-color: var(--#{$prefix}gray-300);\r\n    }\r\n    font-size: 0.75rem;\r\n    font-weight: 600;\r\n    color: var(--overline-color);\r\n    text-transform: uppercase;\r\n}\r\n\r\n.#{$app-prefix}text-block{\r\n    font-size: .875rem;\r\n    ol{\r\n        list-style: decimal;\r\n    }\r\n    ul{\r\n        list-style: disc;\r\n    }\r\n    p{\r\n        &:last-child{\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n    ol,ul{\r\n        margin-left: 1rem;\r\n        li{\r\n            padding: .25rem 0 .25rem .25rem;\r\n        }\r\n        + p{\r\n            margin-top: 1rem;\r\n        }\r\n        + .tyn-code-block{\r\n            margin-top: 1rem;\r\n        }\r\n    }\r\n    .tyn-code-block{\r\n        + ol, + ul{\r\n            margin-top: 1rem;\r\n        }\r\n        + p{\r\n            margin-top: 1.25rem;\r\n        }\r\n    }\r\n}",".#{$app-prefix}media{\r\n    --media-bg: var(--#{$prefix}white);\r\n    --media-border: var(--#{$prefix}white);\r\n    --#{$app-prefix}size: #{$root-size-rg};\r\n    --#{$app-prefix}shape: var(--#{$prefix}border-radius);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --media-bg: var(--#{$prefix}gray-800);\r\n        --media-border: var(--#{$prefix}gray-800);\r\n    }\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    height: var(--#{$app-prefix}size);\r\n    width: var(--#{$app-prefix}size);\r\n    border-radius: var(--#{$app-prefix}shape);\r\n    background: var(--media-bg);\r\n    img{\r\n        height: 100%;\r\n        width: 100%;\r\n        border-radius: calc(var(--#{$app-prefix}shape) - 1px);\r\n        object-fit: cover;\r\n    }\r\n    svg,.icon{\r\n        height: var(--#{$app-prefix}icon-size);\r\n        width: var(--#{$app-prefix}icon-size);\r\n    }\r\n    &-bordered{\r\n        border: 2px solid var(--media-border);\r\n    }\r\n    &-multiple{\r\n        display: flex;\r\n        align-items: center;\r\n        > *{\r\n            &:not(:first-child){\r\n                margin-left: calc(var(--#{$app-prefix}size) * -.33);\r\n            }\r\n        }\r\n    }\r\n    &-group{\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        gap:1rem;\r\n        --media-text: var(--#{$prefix}gray-500);\r\n        --media-text-light: var(--#{$prefix}gray-400);\r\n        --media-text-lighter: var(--#{$prefix}gray-300); \r\n        [data-bs-theme=\"dark\"] &{\r\n            --media-text: var(--#{$prefix}gray-300);\r\n            --media-text-light: var(--#{$prefix}gray-400);\r\n            --media-text-lighter: var(--#{$prefix}gray-500);\r\n        }\r\n        .on-dark &{\r\n            --media-text: var(--#{$prefix}white);\r\n            --media-text-light: var(--#{$prefix}gray-100);\r\n            --media-text-lighter: var(--#{$prefix}gray-100);\r\n        }\r\n        [data-bs-theme=\"dark\"] .on-dark &{\r\n            --media-text: var(--#{$prefix}white);\r\n            --media-text-light: var(--#{$prefix}gray-100);\r\n            --media-text-lighter: var(--#{$prefix}gray-100);\r\n        }\r\n    }\r\n    &-vr{\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n    }\r\n    &-center{\r\n        text-align: center;\r\n        align-items: center;\r\n        .#{$app-prefix}media-row{\r\n            justify-content: center;\r\n        }\r\n    }\r\n    &-col{\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        gap: .25rem;\r\n        white-space: nowrap;\r\n        max-width: 100%;\r\n        overflow: hidden;\r\n        .name{\r\n            margin-bottom: 0;\r\n            color: var(--media-text);\r\n            max-width: 100%;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n            .username{\r\n                font-size: 70%;\r\n                font-weight: 400;\r\n                color: var(--media-text-light);\r\n            }\r\n        }\r\n        .typing{\r\n            font-size: .625rem;\r\n            color: var(--media-text-lighter);\r\n        }\r\n        .indicator{\r\n            height: .625rem;\r\n            width: .625rem;\r\n            display: inline-flex;\r\n            .bi{\r\n                height: 100%;\r\n                width: 100%;\r\n            }\r\n        }\r\n        .varified{\r\n            color: var(--#{$prefix}primary);\r\n        }\r\n        .content{\r\n            font-size: .75rem;\r\n            color: var(--media-text);\r\n            margin-bottom: 0;\r\n            max-width: 100%;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n            white-space: nowrap;\r\n        }\r\n        .meta{\r\n            font-size: .625rem;\r\n            color: var(--media-text-light);\r\n        }\r\n        .anchor{\r\n            font-size: .625rem;\r\n            color: var(--media-text-light);\r\n            font-weight: 600;\r\n            white-space: normal;\r\n            text-decoration: underline;\r\n        }\r\n        .message{\r\n            font-size:.75rem;\r\n            font-weight: 500;\r\n            color: var(--media-text-light);\r\n            strong{\r\n                font-size:.813rem;\r\n                font-weight: 600;\r\n                color: var(--media-text);\r\n            }\r\n        }\r\n    }\r\n    &-row{\r\n        display: flex;\r\n        align-items: center;\r\n        gap:.375rem;\r\n        max-width: 100%;\r\n        &.between{\r\n            justify-content: space-between;\r\n        }\r\n        &.has-dot-sap{\r\n            gap:1rem;\r\n            > *{\r\n                position: relative;\r\n                &:not(:first-child){\r\n                    &::after{\r\n                        position: absolute;\r\n                        left: -.625rem;\r\n                        content: '';\r\n                        height: 4px;\r\n                        width: 4px;\r\n                        border-radius: 50%;\r\n                        top: 50%;\r\n                        transform: translateY(-50%);\r\n                        background-color: var(--media-text-lighter);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-option{\r\n        position: absolute;\r\n        right: 0;\r\n        opacity: 0;\r\n        &:has(.dropdown-menu.show){\r\n            opacity: 1;\r\n        }\r\n        .#{$app-prefix}media-group:hover &{\r\n            opacity: 1;\r\n        }\r\n    }\r\n    &-list{\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n}\r\n\r\n@for $i from 1 through 3 {\r\n    .#{$app-prefix}media{\r\n        &-1x1_#{$i}{\r\n            height: calc(var(--#{$app-prefix}size) * 1.#{$i});\r\n            img{\r\n                border-radius: calc(var(--#{$app-prefix}shape) - 2px);\r\n            }\r\n        }\r\n        &-1_#{$i}x1{\r\n            width: calc(var(--#{$app-prefix}size) * 1.#{$i});\r\n            img{\r\n                border-radius: calc(var(--#{$app-prefix}shape) - 2px);\r\n            }\r\n        }\r\n    }\r\n}\r\n",".#{$app-prefix}image{\r\n    width: 100%;\r\n    border-radius: var(--#{$prefix}border-radius);\r\n}\r\n\r\n.#{$app-prefix}video{\r\n    --#{$app-prefix}icon-color: var(--#{$prefix}white);\r\n    --#{$app-prefix}icon-size: 1.75rem;\r\n    --video-border-color: var(--#{$prefix}gray-200);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --video-border-color: var(--#{$prefix}gray-700);\r\n    }\r\n    display: flex;\r\n    position: relative;\r\n    border: 1px solid var(--video-border-color);\r\n    border-radius: var(--#{$prefix}border-radius);\r\n    &-icon{\r\n        position: absolute;\r\n        color: var(--#{$app-prefix}icon-color);\r\n        left: 50%;\r\n        top: 50%;\r\n        transform: translate(-50%,-50%);\r\n        height: var(--#{$app-prefix}icon-size);\r\n        width: var(--#{$app-prefix}icon-size);\r\n        svg,.icon{\r\n            height: 100%;\r\n            width: 100%;\r\n        }\r\n    }\r\n}\r\n\r\n.#{$app-prefix}thumb{\r\n    --image-border-color: var(--#{$prefix}gray-200);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --image-border-color: var(--#{$prefix}gray-700);\r\n    }\r\n    display: inline-block;\r\n    border: 1px solid var(--image-border-color);\r\n    border-radius: var(--#{$prefix}border-radius);\r\n}\r\n\r\n.#{$app-prefix}video{\r\n    --#{$app-prefix}icon-color: var(--#{$prefix}white);\r\n    --#{$app-prefix}icon-size: 1.75rem;    \r\n    --video-border-color: var(--#{$prefix}gray-200);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --video-border-color: var(--#{$prefix}gray-700);\r\n    }\r\n    display: flex;\r\n    position: relative;\r\n    border: 1px solid var(--video-border-color);\r\n    border-radius: var(--#{$prefix}border-radius);\r\n    &-icon{\r\n        position: absolute;\r\n        color: var(--#{$app-prefix}icon-color);\r\n        left: 50%;\r\n        top: 50%;\r\n        transform: translate(-50%,-50%);\r\n        height: var(--#{$app-prefix}icon-size);\r\n        width: var(--#{$app-prefix}icon-size);\r\n        svg,.icon{\r\n            height: 100%;\r\n            width: 100%;\r\n        }\r\n    }\r\n}","\r\n\r\n.#{$app-prefix}overlay{\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background-color: var(--#{$prefix}dark);\r\n    z-index: 999;\r\n    opacity: .5;\r\n    display: none;\r\n    &.active{\r\n        display: block;\r\n    }\r\n}\r\n\r\n.tyn-icon{\r\n    height: var(--#{$app-prefix}icon-size);\r\n    width: var(--#{$app-prefix}icon-size);\r\n    svg,.icon{\r\n        height: var(--#{$app-prefix}icon-size);\r\n        width: var(--#{$app-prefix}icon-size);\r\n    }\r\n}\r\n\r\n.tyn-code-block{\r\n    position: relative;\r\n    &-title{\r\n        position: absolute;\r\n        inset: 0 0 auto 0;\r\n        padding: 0.5rem .75rem .375rem;\r\n        color: $white;\r\n        border-bottom: 1px solid var(--#{$prefix}dark);\r\n        background: rgba(var(--#{$prefix}white-rgb), .1);\r\n        border-radius: $border-radius $border-radius 0 0;\r\n    }\r\n    pre{\r\n        padding: 2.5rem .75rem .625rem;\r\n    }\r\n    .tyn-copy{\r\n        position: absolute;\r\n        top: 0;\r\n        right: 0;\r\n        padding: 0.4rem .75rem .4rem;\r\n    }\r\n}\r\n.tyn-copy{\r\n    border: none;\r\n    background: transparent;\r\n    color: var(--#{$prefix}gray-200);\r\n    font-size: .75rem;\r\n    text-shadow: none;\r\n}","@use \"sass:map\";\r\n@use \"sass:math\";\r\n\r\n@import \"functions\";\r\n@import \"node_modules/bootstrap/scss/functions\";\r\n@import \"node_modules/bootstrap/scss/variables\";\r\n\r\n$app-prefix:            \"tyn-\";\r\n\r\n//root variables\r\n$root-blue:                       var(--bs-blue);\r\n$root-indigo:                     var(--bs-indigo);\r\n$root-purple:                     var(--bs-purple);\r\n$root-pink:                       var(--bs-pink);\r\n$root-red:                        var(--bs-red);\r\n$root-orange:                     var(--bs-orange);\r\n$root-yellow:                     var(--bs-yellow);\r\n$root-green:                      var(--bs-green);\r\n$root-teal:                       var(--bs-teal);\r\n$root-cyan:                       var(--bs-cyan);\r\n$root-black:                      var(--bs-black);\r\n$root-white:                      var(--bs-white);\r\n$root-primary-50:                 var(--bs-primary-50);\r\n$root-primary-100:                var(--bs-primary-100);\r\n$root-primary-200:                var(--bs-primary-200);\r\n$root-primary-300:                var(--bs-primary-300);\r\n$root-primary-400:                var(--bs-primary-400);\r\n$root-primary-500:                var(--bs-primary-500);\r\n$root-primary-600:                var(--bs-primary-600);\r\n$root-primary-700:                var(--bs-primary-700);\r\n$root-primary-800:                var(--bs-primary-800);\r\n$root-primary-900:                var(--bs-primary-900);\r\n$root-primary-dark:               var(--bs-primary-dark);\r\n$root-gray:                       var(--bs-gray);\r\n$root-gray-dark:                  var(--bs-gray-dark);\r\n$root-gray-50:                    var(--bs-gray-50);\r\n$root-gray-100:                   var(--bs-gray-100);\r\n$root-gray-200:                   var(--bs-gray-200);\r\n$root-gray-300:                   var(--bs-gray-300);\r\n$root-gray-400:                   var(--bs-gray-400);\r\n$root-gray-500:                   var(--bs-gray-500);\r\n$root-gray-600:                   var(--bs-gray-600);\r\n$root-gray-700:                   var(--bs-gray-700);\r\n$root-gray-800:                   var(--bs-gray-800);\r\n$root-gray-900:                   var(--bs-gray-900);\r\n$root-primary:                    var(--bs-primary);\r\n$root-secondary:                  var(--bs-secondary);\r\n$root-success:                    var(--bs-success);\r\n$root-info:                       var(--bs-info);\r\n$root-warning:                    var(--bs-warning);\r\n$root-danger:                     var(--bs-danger);\r\n$root-light:                      var(--bs-light);\r\n$root-dark:                       var(--bs-dark);\r\n$root-darker:                     var(--bs-darker);\r\n$root-primary-rgb:                var(--bs-primary-rgb);\r\n$root-secondary-rgb:              var(--bs-secondary-rgb);\r\n$root-success-rgb:                var(--bs-success-rgb);\r\n$root-info-rgb:                   var(--bs-info-rgb);\r\n$root-warning-rgb:                var(--bs-warning-rgb);\r\n$root-danger-rgb:                 var(--bs-danger-rgb);\r\n$root-light-rgb:                  var(--bs-light-rgb);\r\n$root-dark-rgb:                   var(--bs-dark-rgb);\r\n$root-darker-rgb:                 var(--bs-darker-rgb);\r\n$root-white-rgb:                  var(--bs-white-rgb);\r\n$root-black-rgb:                  var(--bs-black-rgb);\r\n$root-body-color-rgb:             var(--bs-body-color-rgb);\r\n$root-body-bg-rgb:                var(--bs-body-bg-rgb);\r\n$root-font-sans-serif:            var(--bs-font-sans-serif);\r\n$root-font-monospace:             var(--bs-font-monospace);\r\n$root-gradient:                   var(--bs-gradient);\r\n$root-body-font-family:           var(--bs-body-font-family);\r\n$root-body-font-size:             var(--bs-body-font-size);\r\n$root-body-font-weight:           var(--bs-body-font-weight);\r\n$root-body-line-height:           var(--bs-body-line-height);\r\n$root-body-color:                 var(--bs-body-color);\r\n$root-body-bg:                    var(--bs-body-bg);\r\n$root-border-width:               var(--bs-border-width);\r\n$root-border-style:               var(--bs-border-style);\r\n$root-border-color:               var(--bs-border-color);\r\n$root-border-color-translucent:   var(--bs-border-color-translucent);\r\n$root-border-radius:              var(--bs-border-radius);\r\n$root-border-radius-sm:           var(--bs-border-radius-sm);\r\n$root-border-radius-lg:           var(--bs-border-radius-lg);\r\n$root-border-radius-xl:           var(--bs-border-radius-xl);\r\n$root-border-radius-2xl:          var(--bs-border-radius-2xl);\r\n$root-border-radius-pill:         var(--bs-border-radius-pill);\r\n$root-link-color:                 var(--bs-link-color);\r\n$root-link-hover-color:           var(--bs-link-hover-color);\r\n$root-code-color:                 var(--bs-code-color);\r\n$root-highlight-bg:               var(--bs-highlight-bg);\r\n$root-body-gap-x:                 var(--bs-body-gap-x);\r\n$root-size-xs:                    var(--bs-size-xs);\r\n$root-size-sm:                    var(--bs-size-sm);\r\n$root-size-md:                    var(--bs-size-md);\r\n$root-size-rg:                    var(--bs-size-rg);\r\n$root-size-lg:                    var(--bs-size-lg);\r\n$root-size-xl:                    var(--bs-size-xl);\r\n$root-size-2xl:                   var(--bs-size-2xl);\r\n\r\n//Colors\r\n$white:                 #ffffff;\r\n$black:                 #000000;\r\n\r\n$slate-50:              #f8fafc;\r\n$slate-100:             #f1f5f9;\r\n$slate-200:             #e2e8f0;\r\n$slate-300:             #cbd5e1;\r\n$slate-400:             #94a3b8;\r\n$slate-500:             #64748b;\r\n$slate-600:             #475569;\r\n$slate-700:             #334155;\r\n$slate-800:             #1e293b;\r\n$slate-900:             #000000;\r\n\r\n$blue-50:               #eff6ff;\r\n$blue-100:              #dbeafe;\r\n$blue-200:              #000000;\r\n$blue-300:              #93c5fd;\r\n$blue-400:              #60a5fa;\r\n$blue-500:              #3b82f6;\r\n$blue-600:              #008a00;\r\n$blue-700:              #1d4ed8;\r\n$blue-800:              #1e40af;\r\n$blue-900:              #1e3a8a;\r\n\r\n\r\n$blue:    $blue-600;\r\n$indigo:  #4F46E5;\r\n$purple:  #6f42c1;\r\n$pink:    #d63384;\r\n$red:     #E11D48;\r\n$orange:  #fd7e14;\r\n$yellow:  #ffc107;\r\n$green:   #10B981;\r\n$teal:    #20c997;\r\n$cyan:    #0dcaf0;\r\n\r\n\r\n$primary:       $blue;\r\n$secondary:     $slate-600;\r\n$success:       $green;\r\n$info:          $cyan;\r\n$warning:       $yellow;\r\n$danger:        $red;\r\n$lighter:       $slate-100;\r\n$light:         $slate-200;\r\n$dark:          $slate-700;\r\n$darker:        $slate-900;\r\n\r\n\r\n$theme-colors: (\r\n  \"primary\":    $primary,\r\n  \"secondary\":  $secondary,\r\n  \"success\":    $success,\r\n  \"info\":       $info,\r\n  \"warning\":    $warning,\r\n  \"danger\":     $danger,\r\n  \"light\":      $light,\r\n  \"dark\":       $dark,\r\n  \"darker\":     $darker\r\n);\r\n\r\n$gray-50:              $slate-50;\r\n$gray-100:             $slate-100;\r\n$gray-200:             $slate-200;\r\n$gray-300:             $slate-300;\r\n$gray-400:             $slate-400;\r\n$gray-500:             $slate-500;\r\n$gray-600:             $slate-600;\r\n$gray-700:             $slate-700;\r\n$gray-700-dark:        #000000;\r\n$gray-800:             #000000;\r\n$gray-800-dark:        #262626;\r\n$gray-900:             $slate-900;\r\n\r\n$primary-50:              $blue-50;\r\n$primary-100:             $blue-100;\r\n$primary-200:             $blue-200;\r\n$primary-300:             $blue-300;\r\n$primary-400:             $blue-400;\r\n$primary-500:             #008a00;\r\n$primary-600:             $blue-600;\r\n$primary-700:             $blue-700;\r\n$primary-800:             $blue-800;\r\n$primary-900:             $blue-900;\r\n\r\n$primary-dark:            $blue-800;\r\n\r\n$grays: (\r\n  \"50\": $gray-50,\r\n  \"100\": $gray-100,\r\n  \"200\": $gray-200,\r\n  \"300\": $gray-300,\r\n  \"400\": $gray-400,\r\n  \"500\": $gray-500,\r\n  \"600\": $gray-600,\r\n  \"700\": $gray-700,\r\n  \"800\": $gray-800,\r\n  \"900\": $gray-900\r\n);\r\n\r\n$grays-dark: (\r\n  \"50\": $gray-50,\r\n  \"100\": $gray-100,\r\n  \"200\": $gray-200,\r\n  \"300\": $gray-300,\r\n  \"400\": $gray-400,\r\n  \"500\": $gray-500,\r\n  \"600\": $gray-600,\r\n  \"700\": $gray-700-dark,\r\n  \"800\": $gray-800-dark,\r\n  \"900\": $gray-900\r\n);\r\n\r\n$colors: (\r\n  \"blue\":         $blue,\r\n  \"indigo\":       $indigo,\r\n  \"purple\":       $purple,\r\n  \"pink\":         $pink,\r\n  \"red\":          $red,\r\n  \"orange\":       $orange,\r\n  \"yellow\":       $yellow,\r\n  \"green\":        $green,\r\n  \"teal\":         $teal,\r\n  \"cyan\":         $cyan,\r\n  \"black\":        $black,\r\n  \"white\":        $white,\r\n\r\n  \"primary-50\":   $primary-50,\r\n  \"primary-100\":  $primary-100,\r\n  \"primary-200\":  $primary-200,\r\n  \"primary-300\":  $primary-300,\r\n  \"primary-400\":  $primary-400,\r\n  \"primary-500\":  $primary-500,\r\n  \"primary-600\":  $primary-600,\r\n  \"primary-700\":  $primary-700,\r\n  \"primary-800\":  $primary-800,\r\n  \"primary-900\":  $primary-900,\r\n\r\n  \"primary-dark\": $primary-dark,\r\n\r\n  \"gray\":         $gray-600,\r\n  \"gray-dark\":    $gray-800,\r\n);\r\n\r\n$min-contrast-ratio:   2.5;\r\n\r\n$color-contrast-dark:      $dark;\r\n$color-contrast-light:     $white;\r\n\r\n$body-bg:         $blue-100;\r\n$body-color:      $gray-500;\r\n$body-color-dark: $gray-400;\r\n\r\n\r\n// Links\r\n$link-color:                              $primary;\r\n$link-decoration:                         none;\r\n$link-shade-percentage:                   20%;\r\n$link-hover-color:                        shift-color($link-color, $link-shade-percentage);\r\n$link-hover-decoration:                   null;\r\n\r\n$stretched-link-pseudo-element:           after;\r\n$stretched-link-z-index:                  1;\r\n\r\n$paragraph-margin-bottom:   .75rem;\r\n\r\n\r\n//Size\r\n$sizes: (\r\n    'xs': 1.5rem,\r\n    'sm': 1.75rem,\r\n    'md': 2rem,\r\n    'rg': 2.5rem,\r\n    'lg': 3rem,\r\n    'xl': 3.75rem,\r\n    '2xl': 4.5rem,\r\n    '3xl': 6rem,\r\n    '4xl': 9rem,\r\n);\r\n\r\n$icons: (\r\n    'xs': .675rem,\r\n    'sm': .75rem,\r\n    'md': .875rem,\r\n    'rg': 1rem,\r\n    'lg': 1.25rem,\r\n    'xl': 1.5rem,\r\n    '2xl': 1.75rem,\r\n);\r\n\r\n$size-xs:       map.get($sizes,xs);\r\n$size-sm:       map.get($sizes,sm);\r\n$size-md:       map.get($sizes,md);\r\n$size-rg:       map.get($sizes,rg);\r\n$size-lg:       map.get($sizes,lg);\r\n$size-xl:       map.get($sizes,xl);\r\n$size-2xl:      map.get($sizes,2xl);\r\n\r\n\r\n$body-gap-x:    1.25rem;\r\n$body-gap-x-sm:    1.5rem;\r\n\r\n//conditions @bootstrap\r\n$enable-caret:                false;\r\n$enable-rounded:              true;\r\n$enable-shadows:              false;\r\n$enable-gradients:            false;\r\n$enable-transitions:          true;\r\n$enable-reduced-motion:       true;\r\n$enable-smooth-scroll:        true;\r\n$enable-grid-classes:         true;\r\n$enable-container-classes:    true;\r\n$enable-cssgrid:              false;\r\n$enable-button-pointers:      true;\r\n$enable-rfs:                  false;\r\n$enable-validation-icons:     false;\r\n$enable-negative-margins:     true;\r\n$enable-deprecation-messages: true;\r\n$enable-important-utilities:  true;\r\n\r\n\r\n\r\n//Fonts\r\n$font-src:      '../fonts/';\r\n$font-family-sans-serif:  'Poppins';\r\n\r\n$position-values: (\r\n  0: 0,\r\n  50: 50%,\r\n  100: 100%\r\n);\r\n\r\n$grid-breakpoints: (\r\n  xs: 0,\r\n  sm: 576px,\r\n  md: 768px,\r\n  lg: 992px,\r\n  xl: 1200px,\r\n  xxl: 1400px\r\n);\r\n\r\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\r\n@include _assert-starts-at-zero($grid-breakpoints, \"$grid-breakpoints\");\r\n\r\n$container-max-widths: (\r\n  sm: 540px,\r\n  md: 720px,\r\n  lg: 960px,\r\n  xl: 1140px,\r\n  xxl: 1200px\r\n);\r\n\r\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\r\n\r\n\r\n$border-width:                1px;\r\n$border-widths: (\r\n  1: 1px,\r\n  2: 2px,\r\n  3: 3px,\r\n  4: 4px,\r\n  5: 5px\r\n);\r\n\r\n$grid-columns:                12;\r\n$grid-gutter-width:           1.5rem;\r\n$grid-row-columns:            6;\r\n\r\n$spacer: 1rem;\r\n$spacers: (\r\n  0: 0,\r\n  1: $spacer * .25,\r\n  2: $spacer * .5,\r\n  3: $spacer,\r\n  4: $spacer * 1.5,\r\n  5: $spacer * 3,\r\n  'gs': $grid-gutter-width\r\n);\r\n\r\n\r\n$border-style:                solid;\r\n$border-color:                $gray-300;\r\n$border-color-translucent:    rgba($gray-700, .175);\r\n\r\n$border-radius:               .375rem;\r\n$border-radius-sm:            .25rem;\r\n$border-radius-md:            .375rem;\r\n$border-radius-lg:            .5rem;\r\n$border-radius-xl:            1rem;\r\n$border-radius-2xl:           2rem;\r\n$border-radius-pill:          50rem;\r\n$border-radius-circle:        50%;\r\n\r\n$box-shadow:                  0 0 1rem rgba($black, .15);\r\n$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);\r\n$box-shadow-lg:               0 1rem 3rem rgba($black, .175);\r\n$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);\r\n\r\n$h1-font-size:                1.75rem;\r\n$h2-font-size:                1.5rem;\r\n$h3-font-size:                1.25rem;\r\n$h4-font-size:                1.125rem;\r\n$h5-font-size:                1rem;\r\n$h6-font-size:                0.875rem;\r\n$h7-font-size:                0.75rem;\r\n$h8-font-size:                0.625rem;\r\n\r\n$font-sizes: (\r\n  1: $h1-font-size,\r\n  2: $h2-font-size,\r\n  3: $h3-font-size,\r\n  4: $h4-font-size,\r\n  5: $h5-font-size,\r\n  6: $h6-font-size,\r\n  7: $h7-font-size,\r\n  8: $h8-font-size\r\n);\r\n\r\n$headings-margin-bottom:      $spacer * .5;\r\n$headings-font-family:        null;\r\n$headings-font-style:         null;\r\n$headings-font-weight:        600;\r\n$headings-line-height:        1.4;\r\n$headings-color:              $gray-600;\r\n\r\n$display-font-sizes: (\r\n  1: 3.25rem,\r\n  2: 3rem,\r\n  3: 2.75rem,\r\n  4: 2.5rem,\r\n  5: 2.25rem,\r\n  6: 2rem\r\n);\r\n\r\n$display-font-family: null;\r\n$display-font-style:  null;\r\n$display-font-weight: $headings-font-weight;\r\n$display-line-height: $headings-line-height;\r\n\r\n\r\n\r\n// Buttons + Forms\r\n$input-btn-border-width:      $border-width;\r\n\r\n$input-btn-font-family:       null;\r\n$input-btn-font-size:         .938rem;\r\n$input-btn-line-height:       $line-height-base;\r\n$input-btn-padding-y:         math.div($size-rg - $input-btn-font-size * $input-btn-line-height,2) - pxToRem($input-btn-border-width);\r\n$input-btn-padding-x:         1rem;\r\n\r\n\r\n$input-btn-focus-width:         .25rem;\r\n$input-btn-focus-color-opacity: .25;\r\n$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);\r\n$input-btn-focus-blur:          0;\r\n$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;\r\n\r\n$input-btn-font-size-sm:      .75rem;\r\n$input-btn-padding-y-sm:      math.div($size-sm - $input-btn-font-size-sm * $input-btn-line-height,2) - pxToRem($input-btn-border-width);\r\n$input-btn-padding-x-sm:      .625rem;\r\n\r\n$input-btn-font-size-md:      .833rem;\r\n$input-btn-padding-y-md:      math.div($size-md - $input-btn-font-size-md * $input-btn-line-height,2) - pxToRem($input-btn-border-width);\r\n$input-btn-padding-x-md:      .75rem;\r\n\r\n$input-btn-font-size-lg:      1rem;\r\n$input-btn-padding-y-lg:      math.div($size-lg - $input-btn-font-size-lg * $input-btn-line-height,2) - pxToRem($input-btn-border-width);\r\n$input-btn-padding-x-lg:      1.25rem;\r\n\r\n$input-btn-font-size-xl:      1.25rem;\r\n$input-btn-padding-y-xl:      math.div($size-xl - $input-btn-font-size-xl * $input-btn-line-height,2) - pxToRem($input-btn-border-width);\r\n$input-btn-padding-x-xl:      1.75rem;\r\n\r\n// scss-docs-end input-btn-variables\r\n\r\n\r\n// Buttons\r\n$btn-padding-y:               $input-btn-padding-y;\r\n$btn-padding-x:               $input-btn-padding-x;\r\n$btn-font-family:             $input-btn-font-family;\r\n$btn-font-size:               $input-btn-font-size;\r\n$btn-line-height:             $input-btn-line-height;\r\n$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping\r\n\r\n$btn-padding-y-sm:            $input-btn-padding-y-sm;\r\n$btn-padding-x-sm:            $input-btn-padding-x-sm;\r\n$btn-font-size-sm:            $input-btn-font-size-sm;\r\n\r\n$btn-padding-y-md:            $input-btn-padding-y-md;\r\n$btn-padding-x-md:            $input-btn-padding-x-md;\r\n$btn-font-size-md:            $input-btn-font-size-md;\r\n\r\n$btn-padding-y-lg:            $input-btn-padding-y-lg;\r\n$btn-padding-x-lg:            $input-btn-padding-x-lg;\r\n$btn-font-size-lg:            $input-btn-font-size-lg;\r\n\r\n$btn-padding-y-xl:            $input-btn-padding-y-xl;\r\n$btn-padding-x-xl:            $input-btn-padding-x-xl;\r\n$btn-font-size-xl:            $input-btn-font-size-xl;\r\n\r\n$btn-border-width:            $input-btn-border-width;\r\n\r\n$btn-font-weight:             500;\r\n$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);\r\n$btn-focus-width:             $input-btn-focus-width;\r\n$btn-focus-box-shadow:        $input-btn-focus-box-shadow;\r\n$btn-disabled-opacity:        .65;\r\n$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);\r\n\r\n$btn-link-color:              var(--#{$prefix}link-color);\r\n$btn-link-hover-color:        var(--#{$prefix}link-hover-color);\r\n$btn-link-disabled-color:     $gray-600;\r\n\r\n// Allows for customizing button radius independently from global border radius\r\n$btn-border-radius:           $border-radius;\r\n$btn-border-radius-sm:        $border-radius-sm;\r\n$btn-border-radius-md:        $border-radius-md;\r\n$btn-border-radius-lg:        $border-radius-lg;\r\n$btn-border-radius-xl:        $border-radius-lg;\r\n\r\n$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n\r\n$btn-hover-bg-shade-amount:       15%;\r\n$btn-hover-bg-tint-amount:        15%;\r\n$btn-hover-border-shade-amount:   20%;\r\n$btn-hover-border-tint-amount:    10%;\r\n$btn-active-bg-shade-amount:      20%;\r\n$btn-active-bg-tint-amount:       20%;\r\n$btn-active-border-shade-amount:  25%;\r\n$btn-active-border-tint-amount:   10%;\r\n\r\n// Forms\r\n$form-text-margin-top:                  .25rem;\r\n$form-text-font-size:                   $small-font-size;\r\n$form-text-font-style:                  null;\r\n$form-text-font-weight:                 null;\r\n$form-text-color:                       $text-muted;\r\n\r\n$form-label-margin-bottom:              .5rem;\r\n$form-label-font-size:                  .875rem;\r\n$form-label-font-style:                 null;\r\n$form-label-font-weight:                500;\r\n$form-label-color:                      var(--#{$prefix}gray-600);\r\n\r\n\r\n$input-color:                           $body-color;\r\n$input-border-color:                    $border-color;\r\n$input-border-width:                    $input-btn-border-width;\r\n$input-box-shadow:                      $box-shadow-inset;\r\n\r\n$input-solid-bg:                        var(--#{$prefix}gray-200);\r\n$input-solid-border-color:              var(--#{$prefix}gray-200);\r\n\r\n$input-solid-bg-dark:                        var(--#{$prefix}gray-700);\r\n$input-solid-border-color-dark:              var(--#{$prefix}gray-700);\r\n\r\n$input-font-family:                     $input-btn-font-family;\r\n$input-font-size:                       0.875rem;\r\n$input-font-weight:                     $font-weight-base;\r\n$input-line-height:                     $input-btn-line-height;\r\n$input-padding-y:                       math.div($size-rg - $input-font-size * $input-line-height,2) - pxToRem($input-border-width);\r\n$input-padding-x:                       1rem;\r\n\r\n$input-font-size-sm:                    $input-btn-font-size-sm;\r\n$input-padding-y-sm:                    math.div($size-sm - $input-font-size * $input-line-height,2) - pxToRem($input-border-width);\r\n$input-padding-x-sm:                    .75rem;\r\n\r\n$input-font-size-lg:                    $input-btn-font-size-lg;\r\n$input-padding-y-lg:                    math.div($size-lg - $input-font-size * $input-line-height,2) - pxToRem($input-border-width);\r\n$input-padding-x-lg:                    1.25rem;\r\n\r\n$input-bg:                              $white;\r\n$input-disabled-color:                  null;\r\n$input-disabled-bg:                     $gray-200;\r\n$input-disabled-border-color:           null;\r\n\r\n\r\n$input-border-radius:                   var(--#{$app-prefix}shape, #{$border-radius});\r\n$input-border-radius-sm:                var(--#{$app-prefix}shape, #{$border-radius-sm});\r\n$input-border-radius-lg:                var(--#{$app-prefix}shape, #{$border-radius-lg});\r\n\r\n$input-focus-bg:                        $input-bg;\r\n$input-focus-border-color:              tint-color($component-active-bg, 50%);\r\n$input-focus-color:                     $input-color;\r\n$input-focus-width:                     $input-btn-focus-width;\r\n$input-focus-box-shadow:                none;\r\n\r\n$input-solid-focus-bg:                  $primary-100;\r\n$input-solid-focus-border-color:        $primary-100;\r\n\r\n$input-solid-focus-bg-dark:                  var(--#{$prefix}gray-900);\r\n$input-solid-focus-border-color-dark:        var(--#{$prefix}gray-900);\r\n\r\n$input-placeholder-color:               $gray-400;\r\n$input-plaintext-color:                 $body-color;\r\n\r\n$input-height-border:                   $input-border-width * 2;\r\n\r\n$input-height-inner:                    $size-rg;\r\n$input-height-inner-half:               $size-rg*.5;\r\n$input-height-inner-quarter:            $size-rg*.5;\r\n\r\n$input-height:                          $size-rg;\r\n$input-height-sm:                       $size-sm;\r\n$input-height-lg:                       $size-lg;\r\n\r\n$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n\r\n$form-color-width:                      3rem;\r\n\r\n$form-check-input-width:                  1em;\r\n$form-check-min-height:                   1.5rem;\r\n$form-check-padding-start:                $form-check-input-width + .5em;\r\n$form-check-margin-bottom:                .125rem;\r\n$form-check-label-color:                  null;\r\n$form-check-label-cursor:                 null;\r\n$form-check-transition:                   null;\r\n\r\n$form-check-input-active-filter:          brightness(90%);\r\n\r\n$form-check-input-bg:                     $input-bg;\r\n$form-check-input-border:                 2px solid $border-color;\r\n$form-check-input-border-radius:          .25em;\r\n$form-check-radio-border-radius:          50%;\r\n$form-check-input-focus-border:           $input-focus-border-color;\r\n$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;\r\n\r\n$form-check-input-checked-color:          $component-active-color;\r\n$form-check-input-checked-bg-color:       $component-active-bg;\r\n$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;\r\n$form-check-input-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>\");\r\n$form-check-radio-checked-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>\");\r\n\r\n$form-check-input-indeterminate-color:          $component-active-color;\r\n$form-check-input-indeterminate-bg-color:       $component-active-bg;\r\n$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;\r\n$form-check-input-indeterminate-bg-image:       url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>\");\r\n\r\n$form-check-input-disabled-opacity:        .5;\r\n$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;\r\n$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;\r\n\r\n$form-check-inline-margin-end:    1rem;\r\n\r\n$form-switch-color:               rgba($black, .25);\r\n$form-switch-width:               2em;\r\n$form-switch-padding-start:       $form-switch-width + .5em;\r\n$form-switch-bg-image:            url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>\");\r\n$form-switch-border-radius:       $form-switch-width;\r\n$form-switch-transition:          background-position .15s ease-in-out;\r\n\r\n$form-switch-focus-color:         $input-focus-border-color;\r\n$form-switch-focus-bg-image:      url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>\");\r\n\r\n$form-switch-checked-color:       $component-active-color;\r\n$form-switch-checked-bg-image:    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>\");\r\n$form-switch-checked-bg-position: right center;\r\n\r\n$input-group-addon-padding-y:           $input-padding-y;\r\n$input-group-addon-padding-x:           $input-padding-x;\r\n$input-group-addon-font-weight:         $input-font-weight;\r\n$input-group-addon-color:               $input-color;\r\n$input-group-addon-bg:                  $gray-200;\r\n$input-group-addon-border-color:        $input-border-color;\r\n\r\n$form-select-padding-y:             $input-padding-y;\r\n$form-select-padding-x:             $input-padding-x;\r\n$form-select-font-family:           $input-font-family;\r\n$form-select-font-size:             $input-font-size;\r\n$form-select-indicator-padding:     $form-select-padding-x * 3; // Extra padding for background-image\r\n$form-select-font-weight:           $input-font-weight;\r\n$form-select-line-height:           $input-line-height;\r\n$form-select-color:                 $input-color;\r\n$form-select-bg:                    $input-bg;\r\n$form-select-disabled-color:        null;\r\n$form-select-disabled-bg:           $gray-200;\r\n$form-select-disabled-border-color: $input-disabled-border-color;\r\n$form-select-bg-position:           right $form-select-padding-x center;\r\n$form-select-bg-size:               16px 12px; // In pixels because image dimensions\r\n$form-select-indicator-color:       $gray-800;\r\n$form-select-indicator:             url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>\");\r\n\r\n$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;\r\n$form-select-feedback-icon-position:    center right $form-select-indicator-padding;\r\n$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half;\r\n\r\n$form-select-border-width:        $input-border-width;\r\n$form-select-border-color:        $input-border-color;\r\n$form-select-border-radius:       $input-border-radius;\r\n$form-select-box-shadow:          $box-shadow-inset;\r\n\r\n$form-select-focus-border-color:  $input-focus-border-color;\r\n$form-select-focus-width:         $input-focus-width;\r\n$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color;\r\n\r\n$form-select-padding-y-sm:        $input-padding-y-sm;\r\n$form-select-padding-x-sm:        $input-padding-x-sm;\r\n$form-select-font-size-sm:        $input-font-size-sm;\r\n$form-select-border-radius-sm:    $input-border-radius-sm;\r\n\r\n$form-select-padding-y-lg:        $input-padding-y-lg;\r\n$form-select-padding-x-lg:        $input-padding-x-lg;\r\n$form-select-font-size-lg:        $input-font-size-lg;\r\n$form-select-border-radius-lg:    $input-border-radius-lg;\r\n\r\n$form-select-transition:          $input-transition;\r\n\r\n$form-range-track-width:          100%;\r\n$form-range-track-height:         .5rem;\r\n$form-range-track-cursor:         pointer;\r\n$form-range-track-bg:             $gray-300;\r\n$form-range-track-border-radius:  1rem;\r\n$form-range-track-box-shadow:     $box-shadow-inset;\r\n\r\n$form-range-thumb-width:                   1rem;\r\n$form-range-thumb-height:                  $form-range-thumb-width;\r\n$form-range-thumb-bg:                      $component-active-bg;\r\n$form-range-thumb-border:                  0;\r\n$form-range-thumb-border-radius:           1rem;\r\n$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);\r\n$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;\r\n$form-range-thumb-focus-box-shadow-width:  $input-focus-width; // For focus box shadow issue in Edge\r\n$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%);\r\n$form-range-thumb-disabled-bg:             $gray-500;\r\n$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n\r\n$form-file-button-color:          $input-color;\r\n$form-file-button-bg:             $input-group-addon-bg;\r\n$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%);\r\n\r\n$form-floating-height:            add(3.5rem, $input-height-border);\r\n$form-floating-line-height:       1.25;\r\n$form-floating-padding-x:         $input-padding-x;\r\n$form-floating-padding-y:         1rem;\r\n$form-floating-input-padding-t:   1.625rem;\r\n$form-floating-input-padding-b:   .625rem;\r\n$form-floating-label-opacity:     .65;\r\n$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);\r\n$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;\r\n\r\n// Form validation\r\n$form-feedback-margin-top:          $form-text-margin-top;\r\n$form-feedback-font-size:           $form-text-font-size;\r\n$form-feedback-font-style:          $form-text-font-style;\r\n$form-feedback-valid-color:         $success;\r\n$form-feedback-invalid-color:       $danger;\r\n\r\n$form-feedback-icon-valid-color:    $form-feedback-valid-color;\r\n$form-feedback-icon-valid:          url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>\");\r\n$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;\r\n$form-feedback-icon-invalid:        url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>\");\r\n\r\n$form-validation-states: (\r\n  \"valid\": (\r\n    \"color\": $form-feedback-valid-color,\r\n    \"icon\": $form-feedback-icon-valid\r\n  ),\r\n  \"invalid\": (\r\n    \"color\": $form-feedback-invalid-color,\r\n    \"icon\": $form-feedback-icon-invalid\r\n  )\r\n);\r\n\r\n\r\n// Z-index master list\r\n$zindex-dropdown:                   1000;\r\n$zindex-sticky:                     1020;\r\n$zindex-fixed:                      1030;\r\n$zindex-offcanvas-backdrop:         1040;\r\n$zindex-offcanvas:                  1045;\r\n$zindex-modal-backdrop:             1050;\r\n$zindex-modal:                      1055;\r\n$zindex-popover:                    1070;\r\n$zindex-tooltip:                    1080;\r\n$zindex-toast:                      1090;\r\n\r\n// Navs\r\n$nav-link-padding-y:                .5rem;\r\n$nav-link-padding-x:                0;\r\n$nav-link-font-size:                .75rem;\r\n$nav-link-font-weight:              600;\r\n$nav-link-color:                    var(--#{$prefix}gray-500);\r\n$nav-link-hover-color:              var(--#{$prefix}primary);\r\n$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;\r\n$nav-link-disabled-color:           $gray-400;\r\n\r\n$nav-tabs-border-color:             $gray-200;\r\n$nav-tabs-border-width:             $border-width;\r\n$nav-tabs-border-radius:            $border-radius;\r\n$nav-tabs-link-hover-border-color:  transparent;\r\n$nav-tabs-link-active-color:        var(--#{$prefix}primary);\r\n$nav-tabs-link-active-bg:           transparent;\r\n$nav-tabs-link-active-border-color: transparent;\r\n\r\n$nav-pills-border-radius:           $border-radius;\r\n$nav-pills-link-active-color:       $component-active-color;\r\n$nav-pills-link-active-bg:          $component-active-bg;\r\n\r\n// Dropdowns\r\n$dropdown-min-width:                12.5rem;\r\n$dropdown-padding-x:                0;\r\n$dropdown-padding-y:                0;\r\n$dropdown-spacer:                   .125rem;\r\n$dropdown-font-size:                $font-size-base;\r\n$dropdown-color:                    $body-color;\r\n$dropdown-bg:                       var(--#{$prefix}white);\r\n$dropdown-border-color:             var(--#{$prefix}border-color-translucent);\r\n$dropdown-border-radius:            $border-radius;\r\n$dropdown-border-width:             $border-width;\r\n$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width);\r\n$dropdown-divider-bg:               $dropdown-border-color;\r\n$dropdown-divider-margin-y:         $spacer * .5;\r\n$dropdown-box-shadow:               $box-shadow;\r\n\r\n$dropdown-bg-dark:                  var(--#{$prefix}gray-800);\r\n\r\n$dropdown-link-color:               $gray-900;\r\n$dropdown-link-hover-color:         shade-color($dropdown-link-color, 10%);\r\n$dropdown-link-hover-bg:            $gray-200;\r\n\r\n$dropdown-link-active-color:        $component-active-color;\r\n$dropdown-link-active-bg:           $component-active-bg;\r\n\r\n$dropdown-link-disabled-color:      $gray-500;\r\n\r\n$dropdown-item-padding-y:           $spacer * .25;\r\n$dropdown-item-padding-x:           $spacer;\r\n\r\n$dropdown-header-color:             $gray-600;\r\n$dropdown-header-padding-x:         $dropdown-item-padding-x;\r\n$dropdown-header-padding-y:         $dropdown-padding-y;\r\n\r\n$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x;\r\n\r\n$dropdown-dark-color:               $gray-300;\r\n$dropdown-dark-bg:                  $gray-800;\r\n$dropdown-dark-border-color:        $dropdown-border-color;\r\n$dropdown-dark-divider-bg:          $dropdown-divider-bg;\r\n$dropdown-dark-box-shadow:          null;\r\n$dropdown-dark-link-color:          $dropdown-dark-color;\r\n$dropdown-dark-link-hover-color:    $white;\r\n$dropdown-dark-link-hover-bg:       rgba($white, .15);\r\n$dropdown-dark-link-active-color:   $dropdown-link-active-color;\r\n$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;\r\n$dropdown-dark-link-disabled-color: $gray-500;\r\n$dropdown-dark-header-color:        $gray-500;\r\n\r\n\r\n\r\n\r\n// Modals\r\n$modal-inner-padding:               $spacer;\r\n\r\n$modal-footer-margin-between:       .5rem;\r\n\r\n$modal-dialog-margin:               .5rem;\r\n$modal-dialog-margin-y-sm-up:       1.75rem;\r\n\r\n$modal-title-line-height:           $line-height-base;\r\n\r\n$modal-content-color:               null;\r\n$modal-content-bg:                  $white;\r\n$modal-content-border-color:        var(--#{$prefix}border-color-translucent);\r\n$modal-content-border-width:        $border-width;\r\n$modal-content-border-radius:       $border-radius;\r\n$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);\r\n$modal-content-box-shadow-xs:       $box-shadow-sm;\r\n$modal-content-box-shadow-sm-up:    $box-shadow;\r\n\r\n$modal-backdrop-bg:                 $dark;\r\n$modal-backdrop-opacity:            .5;\r\n\r\n$modal-header-border-color:         var(--#{$prefix}border-color);\r\n$modal-header-border-width:         $modal-content-border-width;\r\n$modal-header-padding-y:            $modal-inner-padding;\r\n$modal-header-padding-x:            $modal-inner-padding;\r\n$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\r\n\r\n$modal-footer-bg:                   null;\r\n$modal-footer-border-color:         $modal-header-border-color;\r\n$modal-footer-border-width:         $modal-header-border-width;\r\n\r\n$modal-sm:                          320px;\r\n// $modal-md:                          520px;\r\n$modal-lg:                          800px;\r\n$modal-xl:                          1140px;\r\n\r\n$modal-fade-transform:              translate(0, 0);\r\n$modal-show-transform:              none;\r\n$modal-transition:                  transform .3s ease-out;\r\n$modal-scale-transform:             scale(1.02);\r\n\r\n$card-bg:                           $white;\r\n$card-bg-dark:                      $gray-800-dark;\r\n\r\n// scss-docs-start accordion-variables\r\n$accordion-padding-y:                     1rem;\r\n$accordion-padding-x:                     1.25rem;\r\n$accordion-color:                         var(--#{$prefix}body-color);\r\n$accordion-bg:                            var(--#{$prefix}white);\r\n$accordion-border-width:                  var(--#{$prefix}border-width);\r\n$accordion-border-color:                  var(--#{$prefix}primary-100);\r\n$accordion-border-radius:                 var(--#{$prefix}border-radius-lg);\r\n$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);\r\n\r\n$accordion-body-padding-y:                $accordion-padding-y;\r\n$accordion-body-padding-x:                $accordion-padding-x;\r\n\r\n$accordion-button-padding-y:              .875rem;\r\n$accordion-button-padding-x:              $accordion-padding-x;\r\n$accordion-button-color:                  var(--#{$prefix}body-color);\r\n$accordion-button-bg:                     transparent;\r\n$accordion-transition:                    $btn-transition, border-radius .15s ease;\r\n$accordion-button-active-bg:              transparent;\r\n$accordion-button-active-color:           var(--#{$prefix}primary-text);\r\n\r\n$accordion-button-focus-border-color:     var(--#{$prefix}primary-100);\r\n$accordion-button-focus-box-shadow:       none;\r\n\r\n$accordion-icon-width:                    1.25rem;\r\n$accordion-icon-color:                    $body-color;\r\n$accordion-icon-active-color:             $primary;\r\n$accordion-icon-transition:               transform .2s ease-in-out;\r\n$accordion-icon-transform:                rotate(180deg);\r\n\r\n$accordion-button-icon:         url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-color}' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>\");\r\n$accordion-button-active-icon:  url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-active-color}' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>\");\r\n\r\n$accordion-button-icon-dark:           url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-color}' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>\");\r\n$accordion-button-active-icon-dark:    url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$accordion-icon-active-color}' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L7.5 10.293V4.5A.5.5 0 0 1 8 4z'/></svg>\");\r\n","$reply-base: #{$app-prefix}reply;\r\n.#{$reply-base}{\r\n    --content-gap-x: #{$root-body-gap-x};\r\n    --content-gap-y: .5rem;\r\n    --content-sap-y: .375rem;\r\n    --reply-bg: var(--#{$prefix}white);\r\n    --reply-text: var(--#{$prefix}gray-500);\r\n    --reply-anchor-text: var(--#{$prefix}primary-400);\r\n    --reply-anchor-hover: var(--#{$prefix}primary);\r\n    --outgoing-message-bg: var(--#{$prefix}primary);\r\n    --outgoing-message-text: var(--#{$prefix}white);\r\n    --radius-large: .5rem;\r\n    --radius-small: .25rem;\r\n    --avatar-gap: .75rem;\r\n    [data-bs-theme=dark] & {\r\n        --reply-bg: var(--#{$prefix}gray-800);\r\n        --reply-text: var(--#{$prefix}gray-200);\r\n        --reply-anchor-text: var(--#{$prefix}primary-500);\r\n        --reply-anchor-hover: var(--#{$prefix}primary);\r\n    }\r\n    padding: 1rem 0;\r\n    display: flex;\r\n    flex-direction: column-reverse;\r\n    &-preview{\r\n        padding: 0;\r\n        --content-gap-x: 0;\r\n        --content-gap-y: 0;\r\n    }\r\n    &-item{\r\n        display: flex;\r\n        align-items: flex-end;\r\n        padding: var(--content-gap-y) var(--content-gap-x);\r\n    }\r\n    &-separator{\r\n        font-size: .75rem;\r\n        font-weight: 500;\r\n        text-align: center;\r\n        padding: var(--content-sap-y) var(--content-gap-x);\r\n    }\r\n    &-avatar{\r\n        margin-right: var(--avatar-gap);\r\n        flex-shrink: 0;\r\n        display: inline-flex;\r\n    }\r\n    &-group{\r\n        width: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        > *{\r\n            border-radius: var(--radius-large);\r\n            &:not(:last-child){\r\n                margin-bottom: .375rem;\r\n            }\r\n        }\r\n        .incoming &{\r\n            width: calc(100% - var(--#{$prefix}size-md) - var(--avatar-gap));\r\n            > *{\r\n                &:first-child:not(:only-child){\r\n                    border-bottom-left-radius: var(--radius-small);\r\n                }\r\n                &:last-child:not(:only-child){\r\n                    border-top-left-radius: var(--radius-small);\r\n                }\r\n                &:not(:first-child):not(:last-child){\r\n                    border-top-left-radius: var(--radius-small);\r\n                    border-bottom-left-radius: var(--radius-small);\r\n                }\r\n            }\r\n        }\r\n        .outgoing &{\r\n            align-items: flex-end;\r\n            > *{\r\n                &:first-child:not(:only-child){\r\n                    border-bottom-right-radius: var(--radius-small);\r\n                }\r\n                &:last-child:not(:only-child){\r\n                    border-top-right-radius: var(--radius-small);\r\n                }\r\n                &:not(:first-child):not(:last-child){\r\n                    border-top-right-radius: var(--radius-small);\r\n                    border-bottom-right-radius: var(--radius-small);\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-bubble{\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        width: max-content;\r\n        max-width: 100%;\r\n        .outgoing &{\r\n            flex-direction: row-reverse;\r\n        }\r\n        \r\n        > *:first-child:not(:only-child){\r\n            max-width: calc(100% - .75rem - var(--#{$prefix}size-sm)*2);\r\n        }\r\n    }\r\n    &-text{\r\n        font-size: .833rem;\r\n        padding: .75rem 1rem;\r\n        border-radius: inherit;\r\n        color: var(--reply-text);\r\n        background: var(--reply-bg);\r\n        .outgoing &{\r\n            color: var(--outgoing-message-text);\r\n            background:  var(--outgoing-message-bg);\r\n        }\r\n    }\r\n    &-link{\r\n        display: flex;\r\n        flex-direction: column;\r\n        border-radius: inherit;\r\n        background: var(--reply-bg);\r\n        &.has-thumb{\r\n            width: 260px;\r\n        }\r\n        img{\r\n            width: 100%;\r\n        }\r\n        &-title{\r\n            padding: .75rem 1rem;\r\n            margin-bottom: 0;\r\n        }\r\n    }\r\n    &-anchor{\r\n        padding: .75rem 1rem;\r\n        font-size: .833rem;\r\n        text-decoration: underline;\r\n        color: var(--reply-anchor-text);\r\n        transition: .3s ease;\r\n        &:hover{\r\n            color: var(--reply-anchor-hover);\r\n        }\r\n    }\r\n    &-media{\r\n        color: var(--reply-text);\r\n        background: var(--reply-bg);\r\n        border-radius: inherit;\r\n        padding: 0.375rem;\r\n        display: flex;\r\n        flex-direction: row-reverse;\r\n        flex-wrap: wrap;\r\n        gap: .25rem;\r\n        width: 280px;\r\n        .tyn-video,.tyn-thumb{\r\n            flex-grow: 1;\r\n            width: 80px;\r\n            &:not(:only-child){\r\n                aspect-ratio: 1;\r\n            }\r\n        }\r\n        .tyn-image{\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n    }\r\n    &-file{\r\n        border-radius: inherit;\r\n        color: var(--reply-text);\r\n        background: var(--reply-bg);\r\n        .#{$app-prefix}file{\r\n            padding: 0.375rem 1.25rem .375rem .375rem;\r\n            display: inline-flex;\r\n        }\r\n    }\r\n    &-call{\r\n        border-radius: inherit;\r\n        color: var(--reply-text);\r\n        background: var(--reply-bg);\r\n        .#{$app-prefix}call{\r\n            padding: 0.375rem 1.25rem .375rem .375rem;\r\n            display: inline-flex;\r\n        }\r\n    }\r\n    &-tools{\r\n        opacity: 0;\r\n        display: flex;\r\n        align-items: center;\r\n        &:has(.dropdown-menu.show){\r\n            opacity: 1;\r\n        }\r\n        .incoming &{\r\n            left: 100%;\r\n            padding-left: .75rem;\r\n        }\r\n        .outgoing &{\r\n            right: 100%;\r\n            padding-right: .75rem;\r\n            flex-direction: row-reverse;\r\n        }\r\n        .#{$reply-base}-bubble:hover &{\r\n            opacity: 1;\r\n        }\r\n    }\r\n}\r\n\r\n.#{$app-prefix}chat{\r\n    --content-gap-x: #{$root-body-gap-x};\r\n    --content-gap-y: 1.5rem;\r\n    --content-bg: #{$root-body-bg};\r\n    --aside-gap-x: #{$root-body-gap-x};\r\n    --aside-gap-y: 1.5rem;\r\n    --border-color: #{$root-primary-100};\r\n    --aside-bg:#{$root-white};\r\n    --head-bg:#{$root-white};\r\n    --form-bg:#{$root-white};\r\n    --form-input-bg:#{$root-gray-200};\r\n    --search-bg:#{$root-white};\r\n    [data-bs-theme=\"dark\"] & {  \r\n        --border-color: var(--#{$prefix}border-color);\r\n        --aside-bg:var(--#{$prefix}gray-800);\r\n        --head-bg:var(--#{$prefix}gray-800);\r\n        --form-bg:var(--#{$prefix}gray-800);\r\n        --search-bg:var(--#{$prefix}gray-800);\r\n        --form-input-bg:var(--#{$prefix}gray-900);\r\n    }\r\n    position: relative;\r\n    overflow: hidden;\r\n    &-content{\r\n        &-aside{\r\n            position: absolute;\r\n            right: 0;\r\n            width:var(--aside-width);\r\n            background: var(--aside-bg);\r\n            height: 100%;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: stretch;\r\n            box-shadow: inset 1px 0 0 var(--border-color);\r\n            transform: translateX(100%);\r\n            z-index: 1000;\r\n            &.show-aside{\r\n                transform: none;\r\n            }\r\n        }\r\n    }\r\n    &-head{\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        padding: var(--content-gap-y) var(--content-gap-x);\r\n        background: var(--head-bg);\r\n        box-shadow: inset 0 -1px  0 var(--border-color);\r\n        z-index: 500;\r\n        margin: 0 -.25rem;\r\n        > *{\r\n            padding: 0 .25rem;\r\n        }\r\n    }\r\n    &-search{\r\n        position: absolute;\r\n        top: 100%;\r\n        left: 0;\r\n        right: 0;\r\n        padding: .25rem var(--content-gap-x);\r\n        background: var(--search-bg);\r\n        box-shadow: inset 0 -1px  0 var(--border-color);\r\n        display: flex;\r\n        align-items: center;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: .3s ease;\r\n        &.active{\r\n            opacity: 1;\r\n            visibility: visible;\r\n        }\r\n    }\r\n    &-body{\r\n        height: 100%;\r\n        max-height: 100%;\r\n        overflow: auto;\r\n        flex-grow: 1;\r\n    }\r\n    &-form{\r\n        display: flex;\r\n        align-items: flex-end;\r\n        background: var(--form-bg);\r\n        border-top: 1px solid var(--border-color);\r\n        &-insert{\r\n            padding: calc(var(--content-gap-y) + .25rem) var(--content-gap-x);\r\n        }\r\n        &-enter{\r\n            padding: var(--content-gap-y) var(--content-gap-x) var(--content-gap-y) 0;\r\n            flex-grow: 1;\r\n            display: flex;\r\n            align-items: flex-end;\r\n        }\r\n        &-input{\r\n            flex-grow: 1;\r\n            overflow: auto;\r\n            background-color: var(--form-input-bg);\r\n            margin-right: .5rem;\r\n            padding: .5rem .875rem;\r\n            font-size: .875rem;\r\n            line-height: 1.5rem;\r\n            border-radius: .5rem;\r\n            &:focus-visible{\r\n                outline: none;\r\n            }\r\n        }\r\n    }\r\n    &-cover{\r\n        img{\r\n            height: 160px;\r\n            width: 100%;\r\n            object-fit: cover;\r\n            border-radius: inherit;\r\n        }\r\n    }\r\n    &-theme{\r\n        &-list{\r\n            display: flex;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            margin: -.325rem;\r\n            li{\r\n                padding: .325rem;\r\n            }\r\n        }\r\n        &-btn{\r\n            --#{$app-prefix}border-color: var(--#{$prefix}gray-100);\r\n            --#{$app-prefix}theme-accent: var(--#{$prefix}blue);\r\n            --#{$app-prefix}theme-alt: var(--#{$prefix}white);\r\n            height: var(--#{$prefix}size-rg);\r\n            width: var(--#{$prefix}size-rg);\r\n            border: 8px solid var(--#{$app-prefix}border-color);\r\n            border-radius: 50rem;\r\n            background: linear-gradient(to right, var(--#{$app-prefix}theme-accent) 50%, var(--#{$app-prefix}theme-alt) 50%);\r\n        }\r\n    }\r\n    &-call{\r\n        --call-screen-height:520px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: var(--call-screen-height);\r\n        border-radius: inherit;\r\n        > .#{$app-prefix}chat-cover:first-child{\r\n            .modal &{\r\n                border-radius: calc(#{$modal-content-border-radius} - 1px) calc(#{$modal-content-border-radius} - 1px)  0 0;\r\n            }\r\n        }\r\n        &-cover{\r\n            height: 100%;\r\n            .modal &{\r\n                border-radius: calc(#{$modal-content-border-radius} - 1px);\r\n            }\r\n            img{\r\n                width: 100%;\r\n                height: 100%;\r\n                object-fit: cover;\r\n                border-radius: inherit;\r\n            }\r\n        }\r\n        &-video{\r\n            display: grid;\r\n            grid-template-columns: 100%;\r\n            grid-template-rows: 100%;\r\n        }\r\n        &-stack{\r\n            display: flex;\r\n            flex-direction: column;\r\n            grid-row-start: 1;\r\n            grid-column-start: 1;\r\n            isolation: isolate;\r\n            + .#{$app-prefix}chat-call-stack:before{\r\n                position: absolute;\r\n                left: 0;\r\n                right: 0;\r\n                top: 0;\r\n                bottom: 0;\r\n                content: '';\r\n                border-radius: calc(#{$modal-content-border-radius} - 1px);\r\n                z-index: -1;\r\n                background-image: linear-gradient(180deg, rgba($root-dark-rgb, 0.5) 0, rgba($root-dark-rgb, 0.3) 35px, rgba($root-dark-rgb, 0) 100px),\r\n                linear-gradient(180deg, rgba($root-dark-rgb, 0) calc(100% - 100px), rgba($root-dark-rgb, 0.3) calc(100% - 35px), rgba($root-dark-rgb, 0.6) 100%);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\r\n@include media-breakpoint-up(xl){\r\n    .#{$app-prefix}chat-content{\r\n        &.aside-shown{\r\n            padding-right: var(--aside-width);\r\n        }\r\n    }\r\n}\r\n\r\n[data-theme=\"indigo\"]{\r\n    --#{$app-prefix}theme-accent: var(--#{$prefix}indigo);\r\n}\r\n\r\n[data-theme=\"green\"]{\r\n    --#{$app-prefix}theme-accent: var(--#{$prefix}green);\r\n}\r\n\r\n[data-theme=\"red\"]{\r\n    --#{$app-prefix}theme-accent: var(--#{$prefix}red);\r\n}\r\n\r\n\r\n.#{$app-prefix}chat-mute{\r\n    &:focus{\r\n        color: var(--#{$prefix}nav-link-color) !important;\r\n    }\r\n    &:hover{\r\n        color: var(--#{$prefix}primary) !important;\r\n        background: var(--#{$prefix}primary-200);\r\n    }\r\n    .muted-icon{\r\n        display: none;\r\n    }\r\n    .unmuted-icon{\r\n        display: block;\r\n    }\r\n    &.chat-muted{\r\n        opacity: .5;\r\n        .muted-icon{\r\n            display: block;\r\n        }\r\n        .unmuted-icon{\r\n            display: none;\r\n        }\r\n    }\r\n}","$stories-thumb-gap: 1.25rem;\r\n@keyframes ZEROTO100 {\r\n    0%{\r\n        width: 0;\r\n    }\r\n    100%{\r\n        width: 100%;\r\n    }\r\n}\r\n.#{$app-prefix}stories{\r\n    &-thumb{\r\n        --thumb-border-color: var(--#{$prefix}white);\r\n        --thumb-border-active-color: var(--#{$prefix}primary);\r\n        [data-bs-theme=\"dark\"] &{\r\n            --thumb-border-color: var(--#{$prefix}border-color);\r\n            --thumb-border-active-color: var(--#{$prefix}primary-500);\r\n        }\r\n        margin: -$stories-thumb-gap*.5;\r\n        .swiper{\r\n            &-wrapper{\r\n                flex-wrap: wrap;\r\n                padding: 2px;\r\n            }\r\n            &-slide{\r\n                padding: $stories-thumb-gap*.5;\r\n                cursor: pointer;\r\n                .tyn-image{\r\n                    transition: .3s ease;\r\n                    border: 1px solid var(--thumb-border-color);\r\n                }\r\n            }\r\n            &-slide-thumb-active{\r\n                .tyn-image{\r\n                    box-shadow: -2px 2px 0 var(--thumb-border-active-color), 2px -2px 0 var(--thumb-border-active-color), 2px 2px 0 var(--thumb-border-active-color), -2px -2px 0 var(--thumb-border-active-color);\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-slider{\r\n        max-width: 540px;\r\n        width: 100%;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        height: 100%;\r\n        --slide-border-color: var(--#{$prefix}gray-200);\r\n        --slider-bullet-bg: rgba(var(--#{$prefix}white-rgb),.5);\r\n        --slider-bullet-bg-active: var(--#{$prefix}white);\r\n        [data-bs-theme=\"dark\"] &{\r\n            --slide-border-color: var(--#{$prefix}gray-700);\r\n            --slider-bullet-bg: rgba(var(--#{$prefix}white-rgb),.5);\r\n            --slider-bullet-bg-active: var(--#{$prefix}white);\r\n        }\r\n        .swiper{\r\n            &-slide{    \r\n                border-radius: var(--#{$prefix}border-radius);\r\n                border: 1px solid var(--slide-border-color);\r\n            }\r\n            &-pagination{\r\n                position: absolute;\r\n                left: 20px;\r\n                right: 20px;\r\n                bottom: 20px;\r\n                display: flex;\r\n                flex-wrap: nowrap;\r\n                z-index: 2;\r\n                gap: .5rem;\r\n                &-bullet{\r\n                    position: relative;\r\n                    height: .5rem;\r\n                    border-radius: .25rem;\r\n                    width: 100%;\r\n                    background: var(--slider-bullet-bg);;\r\n                    &:after{\r\n                        position: absolute;\r\n                        content: '';\r\n                        top: 0;\r\n                        left: 0;\r\n                        bottom: 0;\r\n                        width: 0;\r\n                        border-radius: .25rem;\r\n                        background:var(--slider-bullet-bg-active);\r\n                    }\r\n                    &-active{\r\n                        &:after{\r\n                            animation: ZEROTO100 var(--slide-delay) linear;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n    &-item{\r\n        position: relative;\r\n        display: grid;\r\n        height: 100%;\r\n        .#{$app-prefix}image{\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n    }\r\n    &-content{\r\n        position: absolute;\r\n        inset: 0;\r\n        padding: 1.5rem;\r\n        border-radius: var(--#{$prefix}border-radius);\r\n        background-image: linear-gradient(to bottom, rgba($dark, 0.325) 0%, transparent 110px, transparent 110px, transparent calc(100% - 110px), transparent calc(100% - 110px), rgba($dark, 0.325) 100%);\r\n    }\r\n    &-page{\r\n        .#{$app-prefix}aside{\r\n            display: none;\r\n        }\r\n    }\r\n    &-wrap{\r\n        padding-right: $grid-gutter-width * .5;\r\n        padding-left: $grid-gutter-width * .5;\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n        width: 100%;\r\n        height: 100%;\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(lg){\r\n    .#{$app-prefix}stories{\r\n        &-page{\r\n            .#{$app-prefix}aside{\r\n                display: flex;\r\n            }\r\n        }\r\n        &-wrap{\r\n            height: auto;\r\n        }\r\n    }\r\n}",".#{$app-prefix}profile{\r\n    --info-padding: 1.75rem;\r\n    --details-padding: 1.875rem;\r\n    --head-bg: var(--#{$prefix}white);\r\n    --details-bg: var(--#{$prefix}white);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --head-bg: var(--#{$prefix}gray-800);\r\n        --details-bg: var(--#{$prefix}gray-800);\r\n    }\r\n    &-head{\r\n        background: var(--head-bg);\r\n        border-radius: 1rem;\r\n    }\r\n    &-cover{\r\n        border-radius: 1rem 1rem 0 0;\r\n        &-image{\r\n            height: 290px;\r\n            width: 100%;\r\n            border-radius: inherit;\r\n            object-fit: cover;\r\n        }\r\n    }\r\n    &-info{\r\n        padding: var(--info-padding);\r\n    }\r\n    &-avatar{\r\n        margin-top: calc( var(--info-padding) * -2);\r\n    }\r\n    &-nav{\r\n        display: flex;\r\n        padding-top: 1rem;\r\n    }\r\n    &-details{\r\n        background-color: var(--details-bg);\r\n        padding: var(--details-padding);\r\n        border-radius: 0 0 1rem 1rem;\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(md){\r\n    .#{$app-prefix}profile{\r\n        &-cover{\r\n            &-image{\r\n                height: 390px;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n@include media-breakpoint-up(lg){\r\n    .#{$app-prefix}profile{\r\n        &-cover{\r\n            &-image{\r\n                height: 490px;\r\n            }\r\n        }\r\n    }\r\n}","$qa-base: #{$app-prefix}qa;\r\n\r\n.#{$qa-base}{\r\n    --qa-bg: var(--#{$prefix}white);\r\n    --qa-bg-human: var(--#{$prefix}primary-50);\r\n    --qa-sap-color: var(--#{$prefix}primary-100);\r\n    [data-bs-theme=\"dark\"] &{\r\n        --qa-bg: var(--#{$prefix}gray-800);\r\n        --qa-bg-human: var(--#{$prefix}gray-700);\r\n        --qa-sap-color: var(--#{$prefix}gray-700);\r\n    }\r\n    &-avatar{\r\n        display: inline-flex;\r\n        flex-shrink: 0;\r\n        flex-direction: column;\r\n    }\r\n    &-item{\r\n        display: flex;\r\n        justify-content: stretch;\r\n        gap: 1rem;\r\n        padding: 1.25rem;\r\n        &:nth-child(odd){\r\n            position: sticky;\r\n            top: 0;\r\n            z-index: 2;\r\n            background: var(--qa-bg-human);\r\n            border-top: 1px solid var(--qa-sap-color);\r\n            border-bottom: 1px solid var(--qa-sap-color);\r\n            &:first-child{\r\n                border-top:none;\r\n            }\r\n        }\r\n        &:nth-child(even){\r\n            position: relative;\r\n            background: var(--qa-bg);\r\n            .#{$qa-base}-avatar .#{$qa-base}-avatar-wrap{\r\n                position: sticky;\r\n                top: 0;\r\n            }\r\n        }\r\n    }\r\n    &-message{\r\n        padding: .25rem 0;\r\n        flex-grow: 0;\r\n        width: calc(100% - 50px);\r\n    }\r\n}\r\n\r\n.#{$qa-base}{\r\n    --qa-bubbly-gap: 1rem;\r\n    &-bubbly{\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: var(--qa-bubbly-gap);\r\n    } \r\n    &-item{\r\n        .#{$qa-base}-bubbly &{\r\n            padding: 0;\r\n            position: relative !important;\r\n            background: transparent !important;\r\n            border:none !important;\r\n        }\r\n    }\r\n    &-message{\r\n        .#{$qa-base}-bubbly & {\r\n            border-radius: .25rem .5rem .5rem;\r\n            padding: 1.25rem;\r\n        }\r\n        .#{$qa-base}-bubbly .#{$qa-base}-item:nth-child(odd) & {\r\n            background: var(--qa-bg-human);\r\n        }\r\n        .#{$qa-base}-bubbly .#{$qa-base}-item:nth-child(even) & {\r\n            background: var(--qa-bg);\r\n        }\r\n    }\r\n}",".#{$app-prefix}hero{\r\n    --bg: var(--#{$prefix}white);\r\n    [data-bs-theme=\"dark\"] & {\r\n        --bg: var(--#{$prefix}gray-800);\r\n    }\r\n    padding-block: 3rem;\r\n    background: var(--bg);\r\n}",".tyn-auth{\r\n    &-centered{\r\n        display: grid;\r\n        place-items: center;\r\n    }\r\n}",".#{$app-prefix}pill{\r\n    --#{$app-prefix}shape: var(--#{$prefix}border-radius-pill);\r\n}\r\n.#{$app-prefix}circle{\r\n    --#{$app-prefix}shape: 50%;\r\n}\r\n\r\n@each $name, $value in $sizes {\r\n    .#{$app-prefix}size-#{$name}{\r\n        --#{$app-prefix}size: var(--#{$prefix}size-#{$name});\r\n        --#{$app-prefix}icon-size: var(--#{$prefix}icon-size-#{$name});\r\n    }\r\n}"]}