sparnatural/dist/sparnatural-form.css.map

Visual client-side SPARQL query builder and knowledge graph exploration tool

{"version":3,"file":"sparnatural-form.css","mappings":"AAAA;IACI,aAAa;AACjB;;AAEA;IACI,kBAAkB;IAClB,sBAAsB;AAC1B;;AAEA;IACI,qBAAqB;IACrB,kBAAkB;AACtB;;AAEA;IACI,cAAc;AAClB;;AAEA;IACI,kBAAkB;IAClB,OAAO;IACP,UAAU;IACV,eAAe;IACf,sBAAsB;IACtB,gBAAgB;IAChB,UAAU;IACV,SAAS;IACT,gBAAgB;AACpB;;AAEA;IACI,aAAa;AACjB;;;AC/BA;;;GAGG;AACH;;;;;AAKA;;GAEG;AACH,oCAAoC;;CAEnC;;IAEG;AACJ,2CAA2C;;CAE1C;;IAEG;AACJ,2CAA2C;;CAE1C;;IAEG;AACJ,0CAA0C;;CAEzC;;IAEG;AACJ,yCAAyC;;CAExC;;IAEG;AACJ,4CAA4C;;CAE3C;;IAEG;AACJ,0CAA0C;;CAEzC;;IAEG;AACJ,uCAAuC;;AAEvC;;IAEI;AACJ,yCAAyC;;CAExC;;IAEG;AACJ,sCAAsC;;CAErC;;IAEG;AACJ,yCAAyC;;CAExC;;IAEG;AACJ,2BAA2B;;AAE3B;;;GAGG;AACH,aAAa;AACb,gBAAgB;AAChB,eAAe;;AAEf,C;AC9EA,cACE,eAEA,SACA,WACA,mBACA,kBACE,oCACA,WACA,sBACA,mBCVJ,eACI,YACA,WACA,mBACA,kBACA,eACA,mBACI,iCACA,iBAIA,iCACA,mBACA,kBACA,UACA,UAPA,wBACI,yBAQR,8BAKI,oBAJA,kCACI,UACA,WCrBZ,YACI,UACA,eACA,qBACA,sBCHA,wCACI,WACA,kBACA,QACA,WACA,YACA,gBACA,UACA,eAEA,iDACI,WACA,eAEJ,4CACI,WACA,YACA,mBAMR,sCACI,WACA,kBACA,QACA,WACA,YACA,gBACA,UACA,eAEA,+CACI,WACA,eAEJ,0CACI,WACA,YACA,mBCzCZ,YACI,2CACA,mBACA,gBACA,eACA,iBACA,gBACA,kBACI,gCACA,eCTR,aACI,gBCGJ,mBAGI,aACA,WACA,eACA,eACA,sBACA,gBACA,YACA,mBACA,kBACA,UCsEH,2CACC,YACA,gDACC,gCDpFmC,CCqFnC,WDrFgE,CC0FlE,4CACC,YACA,iDACC,gCD5FoC,CC6FpC,WD7FiE,CC+FlE,iDACC,mBDrFC,qBACI,eACA,uCACA,kBACA,sBACA,cACA,eACA,UACA,iBACA,kBAMA,aALA,0BACI,iBACA,gCAMR,uCACI,iBACA,iBEpCJ,cACI,qBAGJ,aACI,oCACA,WACA,sBACA,mBCTR,qBACI,WACA,mBACA,kBACA,aACA,mCACI,UAIP,8BAEC,cACA,kBACA,UACA,WACA,WACA,uBACA,YACA,kBACA,eACA,qCACA,iBACA,eACA,sBACA,mBACA,UCpBF,qBAGI,kBACA,aAEA,WACA,eAEA,UAKA,gBACA,YACA,mBHgEH,6CACC,YACA,kDACC,gCGlFmC,CHmFnC,WGnFgE,CHwFlE,8CACC,YACA,mDACC,gCG1FoC,CH2FpC,WG3FiE,CH6FlE,mDACC,mBGtFC,yCACI,iBACA,iBAKJ,uBACI,iBACA,YACA,uCACA,4BACA,SACA,oBACA,qBACA,gBAEA,sBACA,cACA,eAEA,kBACA,4BACI,iBACA,qBACA,wBACA,gBACA,uBACA,mBACA,gCACA,WC3CR,4BACI,gDAEA,mCACI,aAIZ,eACI,kBAEA,YACA,mBACA,kBACA,kBACA,iBAEA,uBACA,mBACA,cACA,WACA,cAEA,sBACI,WACA,cACA,kBACA,MACA,UACA,UACA,YACA,qCAGJ,qBACI,WACA,cACA,kBACA,UACA,UACA,UACA,WACA,yCACA,4CACA,uCACA,oCACA,0FAWJ,0BACI,0BAEJ,8BACI,0BACA,eAEJ,mBACI,gCACA,gBAEJ,qCACI,eAEJ,oCAEI,kBACA,UACA,MC3ER,gBACC,mBACA,gBACA,gCACA,8EACA,gCACA,0CACA,iBAGD,+BACC,gBACC,gDACA,gCAGD,8CAEC,UACA,mBACA,cACA,iCAKD,uBACC,WACA,kBACA,YACA,SACA,iBACA,aACA,gBACA,eACA,eACA,gBACA,gCACA,wBAGD,mBACC,kBACA,kBACA,eAGD,yBAEC,sCACA,WAGD,uCAEC,sCACA,WAGA,kBAEC,uCAGD,2BAEC,qCAGD,yCACC,mBACA,cCvEH,aACI,mBAEA,gBACI,2BCPR,aACI,WACA,gBCFJ,YACI,aAEA,yBACI,UACA,aACA,YAGJ,mDACI,qlBAOA,iCACI,qBACA,iBChBZ,aACI,YACA,6BACI,kBACA,UACA,QACA,6BACA,sBACA,kBACA,gBACA,mCACA,YACA,cACA,UACA,eACA,iCACI,YAGR,wBACI,aACA,kBACA,QACA,iBACA,SACA,sBACA,kBACA,gBACA,mCACA,UAEA,mCACI,kBACA,QACA,UACA,WACA,YACA,mBACA,iBACA,eACA,qCACI,kBACA,qCACA,2BACA,eAIR,oCACI,YACA,aACA,iBAEJ,qCACI,cACA,iBACA,gBACA,sBAEA,qEACI,WAEJ,8EACI,WAGR,qCACI,0BACA,iBACA,iBACA,uCACI,kBACA,WACA,qBACA,iBACA,iBACA,cACA,eAEJ,kDACI,mBAEJ,kDACI,mBCjFZ,oIAEI,qBAEJ,qEAII,YACA,kBACA,kBACA,mBACA,iBACA,0CACA,WACA,WACA,iBAEJ,iFACI,YAEJ,oFACI,WAKJ,gCACI,uBAMQ,mEACI,kBACA,YACA,oBAEA,wEACI,cACA,kBACA,MACA,QACA,YACA,WACA,iBACA,gBACA,iBACA,eAEA,8EACI,WAOxB,mBACI,kBACA,kBACA,mBACA,iBACA,0CACA,WACA,WACA,iBAMJ,qBACI,YACA,kBACA,kBACA,mBACA,iBACA,0CACA,WACA,WACA,iBAMJ,oBACI,qBAEA,0BACI,YACA,kBACA,kBACA,mBACA,iBACA,0CACA,WACA,WACA,iBAGR,mBACI,qBAIR,2BAEI,gBACA,mBACA,0EAEI,qBAGJ,uCACI,WACA,WCzHkB,CD0HlB,kBACA,kBACA,mBACA,iBACA,0CACA,WACA,WACA,iBAEJ,6EACI,WAKJ,oBACI,YE7IR,gBACI,kBACA,UACA,SACA,UACA,iBAEA,0BACA,cACA,gBACA,kBACA,eAIA,qBACI,cAEJ,sBACI,aACA,WACA,YACA,0BACI,mBACA,+BACI,+BAGR,2BACI,qBCrBZ,oCACE,MACE,eAIJ,iBACE,cAIA,yBACA,kBACA,mBACA,iBAEA,6CACE,gBACA,gBACA,kBAGF,8EACE,WACA,kBACA,UACA,OACA,QACA,YACA,yEACA,oBACA,WAIF,mEACE,aAGF,4BACE,kBACA,mBACA,mBAIF,0CACE,aACA,eACA,SACA,gBAIF,2CACE,aACA,mBACA,iBACA,6CACA,kBACA,eACA,kBAIF,2CACE,mBAEA,YACA,qBACA,kBACA,mBAIF,uCACE,kBACA,mBACA,gCAIF,mCACE,aACA,yBACA,gBAGF,gCACE,gBACA,SACA,aACA,yBACA,aACA,YACA,yBACA,mBACA,SACA,kBAEA,kDACE,oBACA,kBACA,4CACA,WACA,UACA,0BACA,iBACA,0CAGF,yDACE,eACA,gBACA,gBACA,YAEA,oBACA,mBACA,QACA,mBAEA,oBACA,kBACA,gBAEA,qBACA,qBAEA,WACA,mBACA,oBAEA,+BAEA,mFACE,mBACA,cAEA,uFACE,oBACA,UAIJ,gEACE,mBAIJ,yDACE,4BACA,8BAEA,6DACE,UACA,YAIJ,kDACE,gBACA,eACA,kBACA,oBACA,mBACA,uBACA,wBACA,4BACA,0BAEA,2EACE,mBAGF,wDACE,aAGF,yDACE,mBAIA,mEACE,wBACA,2BAEF,0EACE,wBACA,UACA,wBACA,oBAKN,iFACE,cAGF,2DACE,oBACA,mBACA,sBACA,WAGF,2CACE,UACA,oBACA,gBACA,kBACA,SACA,WACA,sBACA,sBACA,sCACA,kBACA,aACA,UACA,SACA,+CACA,4BAGF,wDACE,UACA,oBACA,wBAGF,qDAEE,kBACA,YACA,kBACA,gBACA,gBACA,eACA,WAGF,2DACE,yBACA,WAGF,sDACE,gBACA,uBACA,qBACA,sBACA,iBAGF,iDACE,kBACA,YACA,kBACA,eACA,eACA,aACA,mBACA,uBACA,kBACA,kBAiBF,2DACE,sBACA,WACA,mBAGF,2DACE,sBACA,WACA,mBAGF,iDACE,eACA,sBACA,WAGA,qCAEF,uDACE,yBAgBJ,mCACE,aACA,eACA,SACA,mBAGF,4EAEE,aACA,eACA,OAIF,8BACE,oBACA,mBACA,gBACA,qDACA,kBACA,eACA,sCACA,mDACA,mBAGF,wCACE,yBAGF,wCACE,yBAGF,wCACE,iBACA,eACA,mBACA,aACA,mBACA,uBACA,WACA,YAOF,0BACE,yBACA,kBACA,6BACA,WACA,YACA,kCACA,qBACA,sBACA,iBAGF,gBACE,GACE,uBAEF,KACE,0BAKJ,8BACE,aACA,sBACA,uBACA,kBACA,SAEA,8CACE,kBACA,OACA,SACA,eAGF,yCACE,SACA,OACA,eAEA,sDACE,iBACA,eACA,gBACA,sBAIN,iCACE,aACA,kBAIF,iCACE,aACA,OAGF,0BACE,yBACA,6BACA,kBACA,WACA,YACA,kCACA,qBAGF,gBACE,GACE,uBAEF,KACE,0B","sources":["webpack://sparnatural/awesomplete.base.css","webpack://sparnatural/sparnatural-theme-grass.css","webpack://sparnatural/./src/assets/stylesheets/components/buttons/unselectbtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/optionalarrow.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/resetbtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/selectviewvariablebtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/AddUserInputBtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/InfoBtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/AddMoreValuesBtn.scss","webpack://sparnatural/./src/assets/stylesheets/_mixins.scss","webpack://sparnatural/./src/assets/stylesheets/components/buttons/editBtn.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/EndClassWidgetGroup.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/EndClassWidgetValue.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/WidgetWrapper.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/awesomplete.sparnatural.theme.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/AutocompleteWidget.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/ListWidget.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/MapWidget.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/TreeWidget.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/Widgets.scss","webpack://sparnatural/./src/assets/stylesheets/_base.scss","webpack://sparnatural/./src/assets/stylesheets/components/widget/LoadingSpinner.scss","webpack://sparnatural/./src/assets/stylesheets/sparnatural-form.scss"],"sourcesContent":[".awesomplete [hidden] {\n    display: none;\n}\n\n.awesomplete .visually-hidden {\n    position: absolute;\n    clip: rect(0, 0, 0, 0);\n}\n\n.awesomplete {\n    display: inline-block;\n    position: relative;\n}\n\n.awesomplete > input {\n    display: block;\n}\n\n.awesomplete > ul {\n    position: absolute;\n    left: 0;\n    z-index: 1;\n    min-width: 100%;\n    box-sizing: border-box;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    background: #fff;\n}\n\n.awesomplete > ul:empty {\n    display: none;\n}\n","\n/**\n Note how the theme applies to Sparnatural as well as other technical classes with absolute positioning that\n also needs to benefits from the variables.\n **/\n.Sparnatural,\n.SparnaturalForm,\n.select2-container--default,\n.tippy-box\n{\n/**\n * Color of the criteria arrows (orange)\n **/\n--primary-color-main: rgb(250,136,3);\n\n /**\n  * Color of the \"unselect\" buttons in criterias (dark orange)\n  **/\n--primary-color-important: rgb(182, 97, 0) ;\n \n /**\n  * Color of the bottom : folded variable selector, and of a selected value in a criteria (light orange)\n  **/\n--primary-color-medium: rgb(255, 210, 157) ;\n \n /**\n  * variable selector background & tooltip background (even lighter orange)\n  **/\n--primary-color-light: rgb(255, 231, 203) ;\n \n /** \n  * Color of the options arrow (optional / negation) (strong green)\n  **/\n--secondary-color-main: rgb(107,215,171) ;\n \n /** \n  * Color of the highlight of arrows\n  **/\n--secondary-color-important: rgb(2,184,117) ;\n \n /**\n  * Color of the options arrow when not selected (light green)\n  **/\n--secondary-color-light: rgb(151,227,196) ;\n \n /**\n  * Color of the service option enabled\n  **/\n--ternary-color-main: rgb(3, 201, 250) ;\n\n/**\n  * Color of the hover of autocomplete selection\n  **/\n--ternary-color-light: rgb(184, 211, 224);\n \n /**\n  * Color of variable d&d grip, disabled query button, disabled options\n  **/\n--silver-color-main: rgb(167,167,167) ;\n \n /**\n  *\n  **/\n--silver-color-light: rgb(230, 230, 230) ;\n \n /**\n  * Default text color\n  **/\n--default-text-color: #666 ;\n\n/**\n * Red, Green and Blue components for the background color.\n * An alpha is added to this color at each line (0.1, 0.2, 0.3, etc.)\n **/\n--bg-red: 29 ;\n--bg-green: 224 ;\n--bg-blue: 153 ;\n\n}","span.unselect {\n  cursor: pointer;\n  //position: absolute;\n  top: 12px;\n  right: 25px;\n  border-radius: 100%;\n  svg {\n    fill: var(--primary-color-important);\n    width: 18px;\n    background-color: white;\n    border-radius: 100%;\n  }\n}\n",".optionalArrow {\n    height: 48px;\n    width:34px;\n    margin-right: -20px;\n    position: relative;\n    cursor:pointer;\n    svg {\n        stroke: var(--silver-color-light);\n        stroke-width: 3px;\n        path{\n            filter:url(#filter19278);\n        }\n        fill: var(--secondary-color-main);\n        stroke-width: 2.5px;\n        position: absolute;\n        z-index: 1;\n        left: -7px;\n    }\n    &.disabledbutton {\n        svg{\n            fill: gray;\n            opacity: 0.4;\n        }\n        pointer-events: none;\n    }\n}","#icon_reset{\n    fill:none;\n    stroke:#1d1d1b;\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}",".StartClassGroup{\n    .selectViewVariableBtn {\n        color: #fff;\n        position: absolute;\n        top: 50%;\n        right: 20px;\n        height: 16px;\n        margin-top: -8px;\n        z-index: 2;\n        cursor: pointer;\n        // when the button is disabled e.g. in \"not exists\"\n        &.disabled {\n            opacity: 0.5;\n            cursor:default;\n        }\n        svg{\n            width: 100%;\n            height: 100%;\n            vertical-align: top;\n        }\n    }\n}\n\n.EndClassGroup{\n    .selectViewVariableBtn {\n        color: #fff;\n        position: absolute;\n        top: 50%;\n        right: 43px;\n        height: 16px;\n        margin-top: -8px;\n        z-index: 2;\n        cursor: pointer;\n        // when the button is disabled e.g. in \"not exists\"\n        &.disabled {\n            opacity: 0.5;\n            cursor:default;\n        }\n        svg{\n            width: 100%;\n            height: 100%;\n            vertical-align: top;\n        }\n    }\n}\n",".button-add {\n    border: 3px solid var(--primary-color-main);\n    border-radius: 15px;\n    background: #fff;\n    padding: 0 10px;\n    line-height: 25px;\n    margin-left: 5px;\n    &:hover {\n        color: var(--primary-color-main);\n        cursor: pointer;\n    }\n}",".circle-info{\n    margin-left: 5px;\n}","@use '../../base';\n@use '../../mixins';\n@use 'sass:math';\n\n.AddWidgetValueBtn {\n    @include mixins.arrow-back-colors(var(--primary-color-medium), #fff);\n    @include mixins.arrow-front-colors(var(--primary-color-medium), #fff);\n    display: flex;\n    color: black;\n    font-size: 20px;\n    cursor: pointer;\n    vertical-align: middle;\n    max-width: 220px;\n    height: 48px;\n    margin-right: -13px;\n    position: relative;\n    padding: 0;\n    p {\n        height: inherit;\n        background: var(--primary-color-medium);\n        padding: 0 0 0 3px;\n        border: base.$center-arrow-bd-width solid #fff;\n        border-left: 0;\n        border-right: 0;\n        width: 0px;\n        overflow: visible;\n        position: relative;\n        span {\n            line-height: 42px;\n            color: var(--default-text-color);\n        }\n        // so that it works even without Bootstrap\n        margin-top: 0;\n    }\n    /* Not sure what this does */\n    span.label-two-line {\n        line-height: math.div(base.$height-components-under, 2);\n        line-height: 21px;\n    }\n}","\n@mixin triangle-before() {\n\tpadding-left: 20px;\n\t&:before {\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tdisplay: inline-block;float:left;\n\t\tborder-style: solid;\n\t\tborder-width: 21px 0 21px 15px;\n\t\tborder-color: transparent transparent transparent transparent;\n\t\tmargin-left: -20px;\n\t}\n\t& {\n\t\tposition: relative;\n\t\tpadding-left: 18px;\n\t}\n\t&>.triangle-b,\n\t&>.triangle-h {\n\t\tposition: absolute;\n\t\tleft: 3px;\n\t\tbackground: transparent;\n\t}\n\t&>.triangle-h {\n\t\twidth: 0;\n\t\theight: 0;\n\t\tborder-style: solid;\n\t\tborder-width: 0 15px 21px 0;\n\t\tborder-color: transparent var(--primary-color-main) transparent transparent;\n\t\ttop: 0\n\t}\n\t&>.triangle-b {\n\t\twidth: 0;\n\t\theight: 0;\n\t\tborder-style: solid;\n\t\tborder-width: 0 0 21px 15px;\n\t\tborder-color: transparent transparent var(--primary-color-main) transparent;\n\t\tbottom: 0;\n\t}\n\t\n}\n@mixin triangle-after() {\n\tpadding-right: 0;\n\t&:after {\n\t\tcontent: '';\n\t\twidth: 0;\n\t\theight: 0;\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tdisplay: inline-block;float: right;margin-right: 0;\n\t\tborder-style: solid;\n\t\tborder-width: 21px 0 21px 15px;\n\t\tborder-color: transparent transparent transparent var(--primary-color-main);\n\t}\n\t\n}\n@mixin arrow-block($color) {\n\t&:before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tleft: 0;\n\t\tborder-top: 21px solid transparent;\n\t\tborder-left: 15px solid white;\n\t\tborder-bottom: 21px solid transparent;\n\t\t/*margin: -10px 0px 0 0px; */\n\t}\n\t&:after {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\twidth: 0;\n\t\theight: 0;\n\t\tright:-15px;\n\t\tborder-top: 21px solid transparent;\n\t\tborder-left: 15px solid $color;\n\t\tborder-bottom: 21px solid transparent;\n\t\t/*border-color: transparent transparent transparent $secondary-color-light;\n\t\tmargin: -10px 90px 0 10px; */\n\t  \tz-index: 1;\n\t}\n}\n\n@mixin arrow-back-colors($bgColor, $borderColor) {\n\t.componentBackArrow svg {\n\t\theight: 48px;\n\t\tpath {\n\t\t\tfill: $bgColor;\n\t\t\tstroke: $borderColor;\n\t\t}\n\t}\n}\n@mixin arrow-front-colors($bgColor, $borderColor) {\n\t.componentFrontArrow svg {\n\t\theight: 48px;\n\t\tpath {\n\t\t\tfill: $bgColor;\n\t\t\tstroke: $borderColor;\n\t\t}\n\t\trect {\n\t\t\tfill:transparent;\n\t\t}\n\t}\n}","div.edit {\n    span {\n        display: inline-block;\n    }\n\n    svg {\n        fill: var(--primary-color-important);\n        width: 18px;\n        background-color: white;\n        border-radius: 100%;\n    }\n}",".EndClassWidgetGroup {\n    width: auto;\n    padding: 0 15px 0 0;\n    margin-left: -43px;\n    display: flex;\n    span.unselect {\n        top: -10px;\n    }\n\n    /* Unselect to graphique  */\n\tdiv.edit {\n\t\t/*position: absolute;*/\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: -10px;\n\t\tright: 32px;\n\t\twidth: 22px;\n\t\theight: 22px !important;\n\t\tpadding: 0 0;\n\t\ttext-align: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--primary-color-important);\n\t\tline-height: 22px;\n\t\tfont-size: 18px;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 11px;\n\t\tz-index: 2;\n\t}\n}","\n@use 'sass:math';\n@use '../../mixins';\n@use '../../base';\n\n\n.EndClassWidgetValue {\n    @include mixins.arrow-back-colors(var(--primary-color-medium), #fff);\n    @include mixins.arrow-front-colors(var(--primary-color-medium), #fff);\n    position: relative;\n    display: flex;\n    /*line-height: 0;*/\n    color: black;\n    font-size: 14px;\n    /*display: inline-block;*/\n    padding: 0;\n    span.label-two-line {\n        line-height: math.div(base.$height-components-under, 2);\n        line-height: 21px;\n    }\n    max-width: 220px;\n    height: 46px;\n    margin-right: -13px;\n    p {\n        line-height: 48px;\n        height: 48px;\n        background: var(--primary-color-medium);\n        background-clip: padding-box;\n        margin: 0;\n        padding: 0 5px 0 5px;\n        display: inline-block;\n        overflow: hidden;\n        /*text-overflow: ellipsis;*/\n        border: base.$center-arrow-bd-width solid #fff;\n        border-left: 0;\n        border-right: 0;\n        \n        text-align: center;\n        &>span {\n            line-height: 42px;\n            display: inline-block;\n            vertical-align: baseline;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            color:var(--default-text-color);\n            width: 100%;\n        }\n    }\n}","@use '../../base';\n\n.nb-choice-2 {\n    .WidgetWrapper {\n        border-left: 3px solid var(--primary-color-main);\n\n        &:before {\n            display: none;;\n        }\n    }\n}\n.WidgetWrapper {\n    position: relative;\n   \n    height: 51px;\n    padding-bottom: 3px;\n    padding-left: 25px;\n    padding-right: 5px;\n    line-height: 48px;\n    /*overflow: hidden;*/\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    display:block;\n    width:100%;\n    min-width:1px;\n\n    &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        left:-3px;\n        width: 3px;\n        height: 20px;\n        background: var(--primary-color-main);\n    }\n\n    &:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top:-10px;\n        left:-6px;\n        width: 9px;\n        height: 9px;\n        -moz-box-shadow: 0px 6px 3px -3px #cfcfcf;\n        -webkit-box-shadow: 0px 6px 3px -3px #cfcfcf;\n        -o-box-shadow: 0px 6px 3px -3px #cfcfcf;\n        box-shadow: 0px 6px 3px -3px #cfcfcf;\n        filter: progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=180, Strength=3);\n    }\n\n    /*text-decoration: underline;*/\n    /*&.DatesWidget {\n        border-left-color: transparent;\n        \n        .edit-trait-top {\n            display: block;\n        }\n    }*/\n    .underline {\n        text-decoration: underline;\n    }\n    .boolean-value {\n        text-decoration: underline;\n        cursor: pointer;\n    }\n    .or {\n        color: var(--primary-color-main);\n        font-weight: 600;\n    }\n    .selectAll .underline {\n        cursor: pointer;\n    }\n    &>a,\n    &>div {\n        position: absolute;\n        left: 100%;\n        top: 0; \n    }\n\n}","@use '../../mixins';\n@use '../../base';\n\n.awesomplete > ul {\n\tborder-radius: .3em;\n\tmargin: .2em 0 0;\n\tbackground: hsla(0,0%,100%,.9);\n\tbackground: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));\n\tborder: 1px solid rgba(0,0,0,.3);\n\tbox-shadow: .05em .2em .6em rgba(0,0,0,.2);\n\ttext-shadow: none;\n}\n\n@supports (transform: scale(0)) {\n\t.awesomplete > ul {\n\t\ttransition: .3s cubic-bezier(.4,.2,.5,1.4);\n\t\ttransform-origin: 1.43em -.43em;\n\t}\n\t\n\t.awesomplete > ul[hidden],\n\t.awesomplete > ul:empty {\n\t\topacity: 0;\n\t\ttransform: scale(0);\n\t\tdisplay: block;\n\t\ttransition-timing-function: ease;\n\t}\n}\n\n\t/* Pointer */\n\t.awesomplete > ul:before {\n\t\tcontent: \"\";\n\t\tposition: absolute;\n\t\ttop: -.43em;\n\t\tleft: 1em;\n\t\twidth: 0; height: 0;\n\t\tpadding: .4em;\n\t\tbackground: white;\n\t\tborder: inherit;\n\t\tborder-right: 0;\n\t\tborder-bottom: 0;\n\t\t-webkit-transform: rotate(45deg);\n\t\ttransform: rotate(45deg);\n\t}\n\n\t.awesomplete > ul > li {\n\t\tposition: relative;\n\t\tpadding: .2em .5em;\n\t\tcursor: pointer;\n\t}\n\t\n\t.awesomplete > ul > li:hover {\n\t\t/* background: rgb(184, 211, 224); */\n\t\tbackground: var(--ternary-color-light);\n\t\tcolor: black;\n\t}\n\t\n\t.awesomplete > ul > li[aria-selected=\"true\"] {\n\t\t/* background: hsl(205, 40%, 40%); */\n\t\tbackground: var(--ternary-color-light);\n\t\tcolor: white;\n\t}\n\t\n\t\t.awesomplete mark {\n\t\t\t/* background: hsl(65, 100%, 50%); */\n\t\t\tbackground: var(--primary-color-medium);\n\t\t}\n\t\t\n\t\t.awesomplete li:hover mark {\n\t\t\t/* background: hsl(68, 100%, 41%); */\n\t\t\tbackground: var(--primary-color-main);\n\t\t}\n\t\t\n\t\t.awesomplete li[aria-selected=\"true\"] mark {\n\t\t\tbackground: hsl(86, 100%, 21%);\n\t\t\tcolor: inherit;\n\t\t}","@use './awesomplete.sparnatural.theme.scss';\n@import \"~awesomplete/awesomplete.base.css\";\n\n.awesomplete {\n    line-height: normal;\n\n    ul {\n        background: white!important;\n    }\n}",".list-widget{\n    width:100%;\n    min-width:275px;\n}",".map-widget{\n    display: flex;\n\n    .map-wrapper { \n        z-index: 3;\n        height: 480px;\n        width:600px\n    }\n\n    .leaflet-pm-toolbar .icon-map-validate {\n        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNS4xIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQzOC42IDEwNS40YzEyLjUgMTIuNSAxMi41IDMyLjggMCA0NS4zbC0yNTYgMjU2Yy0xMi41IDEyLjUtMzIuOCAxMi41LTQ1LjMgMGwtMTI4LTEyOGMtMTIuNS0xMi41LTEyLjUtMzIuOCAwLTQ1LjNzMzIuOC0xMi41IDQ1LjMgMEwxNjAgMzM4LjcgMzkzLjQgMTA1LjRjMTIuNS0xMi41IDMyLjgtMTIuNSA0NS4zIDB6Ii8+PC9zdmc+);\n\n        \n    }\n}\n.EndClassWidgetValue {\n    p>span {\n        span {\n            display: inline-block;\n            padding-left: 5px;\n        }\n    }\n}","@use '../../mixins';\n@use '../../base';\n\n.tree-widget {\n    height: 100%;\n    .treeBtnDisplay {\n        position: absolute;\n        left: 100%;\n        top: 50%;\n        transform: translate(0, -50%);\n        border: 1px solid #ddd;\n        border-radius: 5px;\n        background: #fff;\n        box-shadow: 0px 2px 3px 0px #cfcfcf;\n        padding: 5px;\n        line-height: 1;\n        z-index: 1;\n        cursor: pointer;\n        img {\n            height: 26px;\n        }\n    }\n    .treeLayer {\n        display: none;\n        position: absolute;\n        top: 50%;\n        margin-top: -19px;\n        left: 95%;\n        border: 1px solid #ddd;\n        border-radius: 5px;\n        background: #fff;\n        box-shadow: 0px 2px 3px 0px #cfcfcf;\n        z-index: 2;\n\n        .treeClose {\n            position: absolute;\n            top: 5px;\n            right: 5px;\n            width: 22px;\n            height: 22px;\n            vertical-align: top;\n            line-height: 22px;\n            cursor: pointer;\n            i {\n                text-align: center;\n                color: var(--primary-color-important);\n                background: #fff !important;\n                font-size: 18px;\n            }\n        }\n\n        .treeNotice {\n            padding: 5px;\n            display: none;\n            line-height: 20px;\n        }\n        .treeDisplay {\n            overflow: auto;\n            max-height: 500px;\n            min-width: 275px;\n            padding: 25px 10px 5px;\n\n            &.jstree-default .jstree-disabled {\n                opacity: 0.5;\n            }\n            &.jstree-default .jstree-checkbox-disabled {\n                opacity: 0.5;\n            }\n        }\n        .treeActions {\n            border-top: 2px solid #ddd;\n            padding: 5px 10px;\n            text-align: right;\n            a {\n                border-radius: 5px;\n                color: #fff;\n                display: inline-block;\n                margin-left: 10px;\n                padding: 15px 5px;\n                line-height: 1;\n                cursor: pointer;\n            }\n            a.treeCancel {\n                background: #EE8D67;\n            }\n            a.treeSubmit {\n                background: #84C99E;\n            }\n        }\n    }\n}","@use '../../base';\n\n.list-widget,\n.search-widget,    \n.timedatepicker-widget {\n    &>div,\n    &>input {\n        display: inline-block;\n    }\n    &>input {\n        // margin-left: 5px;\n        // height: 35px;\n        // width: 60px;\n        height: 35px;\n        border-color: #ccc;\n        border-radius: 4px;\n        border-style: solid;\n        border-width: 1px;\n        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;\n        color: #555;\n        float: none;\n        padding: 6px 12px;\n    }\n    &>input.day {\n        width: 105px;\n    }\n    &>input.year {\n        width: 60px;\n    }\n}\n\n.date-widget {\n    &>.easy-autocomplete {\n        width: 176px!important;\n        \n        .easy-autocomplete-container {\n            \n            ul {\n                \n                li {\n                    position: relative;\n                    width: 296px;\n                    padding-right: 120px;\n                    \n                    span {\n                        display: block;\n                        position: absolute;\n                        top: 0;\n                        right: 0;\n                        height: 30px;\n                        width: 60px;\n                        line-height: 20px;\n                        text-align: left;\n                        padding: 5px 12px;\n                        font-size: 14px;\n                        \n                        &.start {\n                            right: 60px;\n                        }\n                    }\n                }\n            }\n        }\n    }\n    input {\n        border-color: #ccc;\n        border-radius: 4px;\n        border-style: solid;\n        border-width: 1px;\n        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;\n        color: #555;\n        float: none;\n        padding: 6px 10px;\n    }\n}\n\n.search-widget {\n    \n    &>input {\n        width: 150px;\n        border-color: #ccc;\n        border-radius: 4px;\n        border-style: solid;\n        border-width: 1px;\n        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;\n        color: #555;\n        float: none;\n        padding: 6px 12px;\n    }\n    \n}\n\n.number-widget {\n    &>form {\n        display: inline-block;\n        \n        &>input {\n            height: 35px;\n            border-color: #ccc;\n            border-radius: 4px;\n            border-style: solid;\n            border-width: 1px;\n            box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;\n            color: #555;\n            float: none;\n            padding: 6px 12px;\n        } \n    }\n    &>div {\n        display: inline-block;\n    }\n}\n\n.SearchWidget,\n.DatesWidget {\n    max-width: 600px;\n    white-space: nowrap;\n    &>div,\n    &>input {\n        display: inline-block;\n        \n    }\n    &>input {\n        width: 70px;\n        height: base.$height-components-under;\n        border-color: #ccc;\n        border-radius: 4px;\n        border-style: solid;\n        border-width: 1px;\n        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;\n        color: #555;\n        float: none;\n        padding: 6px 12px;\n    }\n    .easy-autocomplete>input {\n        width: 100%;\n    }\n}\n\n.SearchWidget {\n    &>input {\n        width: 200px;\n    }\n}\n","$component-width: 100%;\n$component-min-width: 1000px;\n$height-components: 54px;\n$height-components-under: 48px;\n$height-components-hover: 35px;\n$margin-component: 30px;\n$margin-component-onEdit: 80px;\n$margin-children-li: 75px;\n$center-arrow-bd-width : 3px;\n$margin-left-reset: 20px;",".loadingspinner {\n    position: absolute;\n    z-index: 1;\n    top:0.6em;\n    left: 100%;\n    line-height: 32px;\n    /* background: #fff; */\n    border-radius: 0 0 4px 4px;\n    padding: 0 5px;\n    margin-left:7px;\n    font-style:italic;\n    font-size: 0.9em;\n    /* border: 1px solid #ccc; */\n    /* border-top: 1px solid transparent; */\n\n    &.show {\n        display: block;\n    }\n    .load {\n        display: none;\n        width: 32px;\n        height: 32px;\n        svg {\n            vertical-align: top;\n            path {\n                fill: var(--primary-color-main);\n            }\n        }\n        &.show {\n            display: inline-block;\n        }\n    }\n}","@use \"./base\";\n// Importing all the components\n@use \"./components/all-components-sparnatural-form.scss\";\n// we are importing one default theme,\n// so that all the variables have a default value.\n// they can be overriden by importing another theme CSS in the HTML page\n@import \"themes/sparnatural-theme-grass.css\";\n\n@media (prefers-color-scheme: light) {\n  :root {\n    --light: true;\n  }\n}\n\nsparnatural-form {\n  display: block;\n  //padding: 20px;\n  //padding: 2px;\n  // This is the same color as background of Sparnatural with default theme \"grass\"\n  background-color: #e8fcf5;\n  border-radius: 5px;\n  margin-bottom: 20px;\n  padding-top: 15px;\n\n  .sparnatural-form-container {\n    max-height: 70vh; /* Limite en hauteur */\n    overflow-y: auto; /* Permet de scroller */\n    position: relative;\n  }\n\n  .sparnatural-form-container.scrollable + .submitSection::after {\n    content: \"\";\n    position: absolute;\n    top: -20px; // Place l'ombre juste au-dessus de la section\n    left: 0;\n    right: 0;\n    height: 20px; // Hauteur de l'ombre\n    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n    pointer-events: none; // Empêche toute interaction\n    z-index: -1; // Place l'ombre sous la section\n  }\n\n  /* Désactiver le gradient par défaut */\n  .sparnatural-form-container + .submitSection::after {\n    content: none;\n  }\n\n  .formField {\n    padding-left: 20px;\n    margin-bottom: 10px;\n    padding-right: 10px;\n  }\n\n  // Display container for selected values\n  .value-display-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n    margin-top: 10px;\n  }\n\n  // Each selected value container\n  .selected-value-container {\n    display: flex;\n    align-items: center;\n    padding: 5px 10px;\n    background-color: var(--primary-color-medium);\n    border-radius: 5px;\n    font-size: 13px;\n    margin-bottom: 5px;\n  }\n\n  // Align selected values horizontally with wrapping\n  .selected-value-container {\n    flex-direction: row;\n\n    padding: 5px;\n    display: inline-block;\n    margin-right: 10px;\n    margin-bottom: 10px;\n  }\n\n  // Styling the selected value label\n  .selected-value-label {\n    margin-right: 10px;\n    font-weight: normal;\n    color: var(--default-text-color);\n  }\n\n  // Container for the search button to control its position\n  .button-container {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 20px;\n  }\n\n  .submitSection {\n    position: sticky; // Toujours visible\n    bottom: 0; // Collée en bas\n    z-index: 1000; // Toujours au-dessus\n    justify-content: flex-end;\n    display: flex;\n    padding: 4px;\n    background-color: #e8fcf5;\n    height: max-content;\n    gap: 10px;\n    border-radius: 10%;\n\n    .gui-split-button {\n      display: inline-flex;\n      border-radius: 6px;\n      background: var(--secondary-color-important);\n      color: #fff;\n      fill: #fff;\n      touch-action: manipulation;\n      user-select: none;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    .gui-split-button button {\n      cursor: pointer;\n      appearance: none;\n      background: none;\n      border: none;\n\n      display: inline-flex;\n      align-items: center;\n      gap: 1ch;\n      white-space: nowrap;\n\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n\n      padding-block: 1.25ch;\n      padding-inline: 2.5ch;\n\n      color: #fff;\n      outline-color: #fff;\n      outline-offset: -5px;\n\n      border-right: 1px solid hsl(220, 50%, 85%); // Couleur claire pour contraster\n\n      &:is(:hover, :focus-visible) {\n        background: rgb(1, 109, 69);\n        color: hsl(220 90% 98%);\n\n        & > svg {\n          stroke: currentColor;\n          fill: none;\n        }\n      }\n\n      &:active {\n        background: rgb(1, 109, 69);\n      }\n    }\n\n    .gui-split-button > button {\n      border-end-start-radius: 6px;\n      border-start-start-radius: 6px;\n\n      & > svg {\n        fill: none;\n        stroke: #fff;\n      }\n    }\n\n    .gui-popup-button {\n      inline-size: 4ch;\n      cursor: pointer;\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border-inline-start: 6px;\n      border-start-end-radius: 6px;\n      border-end-end-radius: 6px;\n\n      &:is(:hover, :focus-within) {\n        background: rgb(1, 109, 69);\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:active {\n        background: rgb(1, 109, 69);\n      }\n\n      &:focus-within {\n        & > svg {\n          transition-duration: 0.2s;\n          transform: rotateZ(0.5turn);\n        }\n        & > .gui-popup {\n          transition-duration: 0.2s;\n          opacity: 1;\n          transform: translateY(0);\n          pointer-events: auto;\n        }\n      }\n    }\n\n    .gui-popup-button[aria-expanded=\"true\"] .gui-popup {\n      display: block; /* Show dropdown when expanded */\n    }\n\n    .gui-popup-button.disabled {\n      pointer-events: none;\n      cursor: not-allowed;\n      background-color: #ccc;\n      opacity: 0.5;\n    }\n\n    .gui-popup {\n      opacity: 0;\n      pointer-events: none; // Désactive l'interaction par défaut\n      list-style: none;\n      position: absolute;\n      top: 100%; // Place le menu juste en dessous du bouton\n      left: -90px;\n      background-color: white;\n      border: 1px solid #ddd;\n      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n      border-radius: 5px;\n      z-index: 1000;\n      padding: 0;\n      margin: 0;\n      transition: opacity 0.3s ease, transform 0.3s ease;\n      transform: translateY(-10px); // Légèrement au-dessus initialement\n    }\n\n    .gui-popup:not(.hidden) {\n      opacity: 1; // Rendre visible\n      pointer-events: auto; // Activer l'interaction\n      transform: translateY(0); // Réinitialiser la position\n    }\n\n    .gui-popup li button {\n      //width: 100%;\n      padding: 10px 20px;\n      border: none;\n      border-radius: 5px;\n      background: none;\n      text-align: left;\n      cursor: pointer;\n      color: #000;\n    }\n\n    .gui-popup li button:hover {\n      background-color: rgb(1, 109, 69);\n      color: #fff;\n    }\n\n    .gui-split-button svg {\n      inline-size: 2ch;\n      box-sizing: content-box;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      stroke-width: 2px;\n    }\n\n    button[id=\"Reset\"] {\n      padding: 10px 20px;\n      border: none;\n      border-radius: 5px;\n      cursor: pointer;\n      font-size: 14px;\n      display: flex;\n      align-items: center; /* Centrer verticalement le contenu */\n      justify-content: center; /* Centrer horizontalement le contenu */\n      text-align: center;\n      position: relative; /* Nécessaire pour le spinner */\n    }\n\n    /*button[id=\"Search\"] {\n      background-color: var(--secondary-color-important);\n      color: #000000;\n      font-size: 15px;\n      //border: 1px solid ;\n      //box-shadow: 0px 2px 3px 0px #cfcfcf;\n      transition: background-color 0.2s ease;\n    }\n    button[id=\"Search\"]:hover {\n      color: #fff;\n      background-color: rgb(1, 109, 69);\n    }\n    \n*/\n    button[id=\"Search\"]:disabled {\n      background-color: #ccc; // Bouton gris lorsqu'il est désactivé\n      color: #666;\n      cursor: not-allowed;\n    }\n\n    button[id=\"Export\"]:disabled {\n      background-color: #ccc; // Bouton gris lorsqu'il est désactivé\n      color: #666;\n      cursor: not-allowed;\n    }\n\n    button[id=\"Reset\"] {\n      font-size: 15px;\n      background-color: #fff;\n      color: #000;\n      //border: 1px solid #ddd;\n      //box-shadow: 0px 2px 3px 0px #cfcfcf;\n      transition: background-color 0.2s ease;\n    }\n    button[id=\"Reset\"]:hover {\n      background-color: #cacaca;\n    }\n  }\n\n  /*.submitSection::after {\n    content: \"\";\n    position: absolute;\n    top: -20px; // Place l'ombre juste au-dessus de la section\n    left: 0;\n    right: 0;\n    height: 20px; // Hauteur de l'ombre\n    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n    pointer-events: none; // Empêche toute interaction\n    z-index: -1; // Place l'ombre sous la section\n  }*/\n\n  .option-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 15px;\n    margin-bottom: 10px;\n  }\n\n  .any-value-container,\n  .not-exist-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: px;\n  }\n\n  //style for the option pill for any value and not exist\n  .option-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 3px;\n    background-color: var(--primary-color-light, #ffcc99); /* Couleur ajustée */\n    border-radius: 5px;\n    font-size: 13px;\n    color: var(--default-text-color, #333);\n    border: 1px solid var(--primary-color-medium, #aaa);\n    font-weight: normal;\n  }\n\n  .option-pill.any-value {\n    background-color: #ffd699;\n  }\n\n  .option-pill.not-exist {\n    background-color: #ffd699;\n  }\n\n  .option-pill .unselect {\n    margin-left: 10px;\n    cursor: pointer;\n    border-radius: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    /*\n    &:hover {\n      background-color: var(--error-color, #d9534f);\n    }*/\n  }\n  /* Spinner */\n  .spinner {\n    border: 4px solid #f3f3f3; /* Couleur de fond */\n    border-radius: 50%;\n    border-top: 4px solid #4caf50; /* Vert */\n    width: 20px;\n    height: 20px;\n    animation: spin 1s linear infinite;\n    display: inline-block;\n    vertical-align: middle;\n    margin-left: 10px;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  //ceci est pour le tree widget dans le formulaire\n  .tree-widget {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    gap: 10px;\n\n    .treeBtnDisplay {\n      position: relative;\n      left: 0;\n      top: auto;\n      transform: none;\n    }\n\n    .treeLayer {\n      top: 20px;\n      left: 0;\n      transform: none;\n\n      .treeDisplay {\n        max-height: 200px;\n        min-width: none;\n        max-width: 300px;\n        padding: 25px 10px 5px;\n      }\n    }\n  }\n  .tree-close svg {\n    z-index: 2000;\n    position: relative;\n  }\n\n  //cette partie pour le loading spinner dans le formulaire\n  .loadingspinner {\n    display: none;\n    left: 0;\n  }\n\n  .spinner {\n    border: 3px solid #f3f3f3; /* Couleur de fond */\n    border-top: 3px solid #4caf50; /* Vert */\n    border-radius: 50%;\n    width: 16px;\n    height: 16px;\n    animation: spin 1s linear infinite;\n    display: inline-block;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}