{"version":3,"sources":["front.scss"],"names":[],"mappings":"AAkRI,iBAhNJ,uCAEI,gBAUJ,8EACI,aAAA,CACA,aAAA,CACA,QAAA,CACA,SAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,eAGJ,8LACI,YAAA,CACA,0BAAA,CACA,gBAAA,CACA,oBAGJ,qBACI,YAAA,CACA,qBAAA,CACA,oCACA,gCACI,YAAA,CACA,kBAAA,CACA,kBAAA,CACA,YAhGE,CAiGF,0CAAA,CACA,wBApFM,CAqFN,iBAAA,CACA,cA1GI,CA2GJ,WACA,4CACI,UA5FA,CA6FA,YAGJ,2CACI,YAAA,CACA,qBAAA,CACA,aAAA,CACA,WAAA,CACA,eAAA,CACA,WACA,sDACI,cAxHE,CAyHF,uBAAA,CACA,gBAGR,8CAEI,QA1HF,CA2HE,UA3HF,CA4HE,iBAAA,CACA,uBAGR,oCACI,kBAIJ,4CACI,WAAA,CACA,aAAA,CACA,iBAAA,CACA,WACA,uDACI,cAKZ,iDACI,aAAA,CACA,mCAAA,CACA,eAtIW,CAuIX,UAxIS,CAyIT,WAAA,CACA,WAAA,CACA,QAAA,CACA,qBAAA,CACA,YAAA,CACA,eAlHS,CAmHT,eA7JU,CA8JV,cAAA,CACA,iBAAA,CACA,cApKQ,CAqKR,yDAEI,oCADJ,6DAEQ,wCAAA,CACA,WAGR,6DACI,wCAAA,CACA,mCAAA,CACA,YAAA,CACA,SAAA,CAEI,wBAGR,uGACI,kBAEJ,2EACI,cAzLI,CA0LJ,yBAEJ,6FACI,cA7LI,CA8LJ,yBAEJ,+FACI,cAjMI,CAkMJ,yBAGR,qBACI,GAAI,qEACJ,IAAK,0EACL,IAAK,0EACL,GAAM,2EAGV,6CACI,aAAA,CACA,WAAA,CACA,SAAA,CACA,QAAA,CACA,qBAAA,CACA,YAAA,CACA,eA/MU,CAgNV,cAAA,CACA,WACA,yDACI,aAAA,CACA,iBAAA,CACA,UAEJ,yDACI,aAAA,CACA,eA1MO,CA2MP,WAtNS,CAuNT,gBAvNS,CA8NL,oBAAA,CACA,mCAAA,CACA,mBAAA,CAEJ,iBAAA,CACA,cAAA,CACA,eAAA,CACA,kBAAA,CACA,QAAA,CACA,yDAOA,mGACI,iBAjOK,CAkOL,UAIJ,oCADJ,qEAEQ,0CAGR,iFACI,wCAAA,CACA,UAIR,8FACI,aAAA,CACA,UAlPa,CAoPb,cAzQc,CA0Qd,aAAA,CACA,eAAA,CACA,UAAA,CACA,sBAAA,CACA,eACA,4GACI,oBAAA,CACA,qBAAA,CACA,WAAA,CACA,mBAAA,CACA,iBAEJ,oJACI,8BAEJ,4HACI,UAEJ,oJACI,2BAAA,CACA,wBAGR,qBACI,GAAI,4BACJ,IAAK,6BACL,IAAK,6BACL,IAAK,8BACL,IAAK,8BACL,IAAK,gCAGT,sBACI,aAAA,CACA,mCAAA,CACA,kBAjRa,CAkRb,gBAAA,CACA,QAAA,CACA,qBAAA,CAEA,eA/SU,CAgTV,cAAA,CACA,0BAAA,CACA,cAtTQ,CAuTR,eAAA,CACA,eA1QS,CA2QT,YAAA,CACA,aAAA,CACA,iBAAA,CACA,kBAAA,CACA,eAAA,CACA,iBAAA,CACA,gFAIA,+BACI,UAxRS,CAyRT,oBAEJ,4BACI,qBACA,oCAFJ,4BAGQ,oBAGR,4BAIQ,wCAAA,CAEJ,kBAtTS,CAuTT,YAAA,CACA,UAEJ,6BACI,mBAOR,qBAEI,2BAAA,CACA,uBAAA,CACA,gBACA,wCACI,+BAAA,CACA,kBACA,kDACI,aAAA,CACA,iBAAA,CACA,QAAA,CACA,OAAA,CACA,8BAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,WAAA,CACA,aAAA,CACA,cAAA,CACA,YAGR,uCACI,sBACA,iDACI,aAAA,CACA,SAAA,CACA,oBAGR,yCACI,wBACA,mDACI,aAAA,CACA,SAAA,CACA,oBAGR,yCACI,WAzXQ,CA0XR,YAzXS,CA0XT,sBACA,mDACI,aAAA,CACA,SAAA,CACA,oBAGR,0CACI,UAhYI,CAiYJ,YAoCR,uBAII,WAAA,CAEA,sBAAA,CAEA,kBAAA,CAEA,WAzba,CA0bb,uCACA,yDATA,iBAAA,CAEA,qBAAA,CAIA,sBAGA,kCAEI,YAAA,CACA,WAAA,CACA,aAAA,CACA,eAAA,CAGA,cAAA,CAEA,UAAA,CACA,gBACA,8CAEI,sBAAA,CACA,cAEJ,6CAEI,kBAAA,CACA,iBAAA,CACA,aAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,cAAA,CACA,WArdK,CAsdL,8BACA,wDACI,aAAA,CACA,WAAA,CACA,aAAA,CACA,eAAA,CACA,cAAA,CACA,QAEJ,wDACI,cAteE,CAueF,uBAAA,CACA,eApeK,CAqeL,cAAA,CACA,UAAA,CACA,QAEJ,0DACI,cAAA,CACA,WAAA,CACA,aAAA,CACA,eAAA,CACA,QACA,4EACI,6BAEJ,sEACI,cAxfR,CAyfQ,gBAIZ,4DArFJ,aAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,cAAA,CACA,UAAA,CACA,mBAAA,CACA,SAAA,CACA,UA2EI,4DAvGJ,oBAAA,CACA,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,gBAAA,CACA,WAAA,CACA,gCAAA,CACA,wBAAA,CACA,wBAAA,CACA,WA2FI,4DAvFJ,aAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CACA,cAAA,CACA,UAAA,CACA,mBAAA,CACA,SAAA,CACA,WA+EI,oDACI,aAGR,uCACI,yBAIR,qBAEI,qBAAA,CACA,YACA,gCACI,aAEJ,gCAEI,kBAAA,CACA,eACA,2CACI,cAvhBA,CAwhBA,UAtgBC,CAugBD,aAAA,CACA,UAAA,CACA,mBAGR,gCACI,8BACA,gDACI,kBAGR,oCACI,UAEJ,oCACI,SAAA,CACA,kBAKJ,6CACI,YAAA,CACA,kBA5hBM,CA6hBN,mCAAA,CACA,UAAA,CACA,WAAA,CACA,oCACA,4DAAkB,iBAAA,CAAmB,KAAA,CAAO,YAC5C,+DAAqB,iBAAA,CAAmB,QAAA,CAAU,SAClD,+DAAqB,cAAA,CAAgB,KAAA,CAAO,YAC5C,4DACI,kBAAA,CACA,eAAA,CACA,gCAAA,CACA,WAAA,CACA,aAAA,CACA,gBACA,uEACI,YAAA,CACA,oBAAA,CACA,QAAA,CACA,UACA,kFACI,iBAAA,CACA,QAAA,CACA,SAAA,CACA,cACA,oFACI,YAAA,CACA,oBAAA,CACA,UA1jBX,CA2jBW,cA7kBZ,CA8kBY,YAAA,CACA,cAAA,CACA,sBAAA,CACA,4BAAA,CACA,uCAEI,oCADJ,0FAEQ,0BAGR,gGAAiB,aACjB,+FACI,oBACA,0GACI,WAnlBhB,CAolBgB,iBAEJ,0GAAgB,aAGxB,wFACI,aAAA,CACA,UAAA,CACA,iBAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,UAjkBR,CAkkBQ,4BAAA,CACA,uCAGA,uGACI,yBAMpB,4DACI,YAAA,CACA,SAAA,CACA,UA9mBD,CA+mBC,WAAA,CACA,aAAA,CACA,eAAA,CACA,kBACA,oCARJ,4DASQ,eAMhB,uBACI,cAroBQ,CAsoBR,UApnBS,CAqnBT,YAAA,CACA,sBACA,+CACI,WA/nBQ,CAgoBR,WAAA,CACA,yBAAA,CACA,mCA5lBC,CA6lBD,gBACA,8DAAkB,iBAAA,CAAmB,KAAA,CAAO,YAC5C,iEAAqB,iBAAA,CAAmB,QAAA,CAAU,SAClD,iEAAqB,cAAA,CAAgB,KAAA,CAAO,YAC5C,4DACI,YAAA,CACA,qBAjoBG,CAkoBH,oCACA,wEACI,WAAA,CACA,aAAA,CACA,eAAA,CACA,cA1pBJ,CA2pBI,eAAA,CACA,UA1oBH,CA2oBG,cAAA,CACA,WAtpBC,CAupBD,iBAEJ,uEACI,WAAA,CACA,aAAA,CACA,gBACA,4FAAwB,aAGhC,6DACI,mCAAA,CAEA,aAAA,CACA,gBACA,wFAAgC,aAEpC,yEACI,YAAA,CACA,kBAAA,CACA,iBAAA,CACA,eAEA,wFACI,2CAEJ,uFACI,mBAEJ,oFACI,YAtrBN,CAurBM,sBAEJ,qFACI,aAEJ,wFACI,aAKJ,uLACI,aAEJ,2FACI,iBAAA,CACA,WAAA,CACA,aAAA,CACA,eAvsBC,CAwsBD,WAEJ,wFACI,aAEJ,4FACI,WAAA,CACA,aAAA,CACA,eAAA,CACA,qBAAA,CACA,WAAA,CACA,aACA,yGACI,iBAGR,oFACI,mDAAA,CACA,gBAAA,CACA,gBAEJ,gLACI,YAAA,CACA,UAGR,4DAEI,gBACA,wEACI,mCAAA,CACA,YAAA,CACA,kBAAA,CACA,gBACA,mFACI,aACA,gGACI,aAEJ,iGACI,gBAAA,CACA,YAAA,CACA,gBAEA,sGACI,oBAAA,CACA,iBAAA,CACA,YAAA,CACA,iBACA,2GACI,aAAA,CACA,kBACA,sHACI,qCAEJ,sIACI,KAAA,CACA,kBAEJ,0HACI,0BAAA,CACA,UAEJ,0HACI,KAAA,CACA,iBAAA,CACA,0BAMpB,qGACI,cAtxBJ,CAuxBI,cAEJ,8FACI,+BAEJ,yFACI,gCAEJ,2FACI,gCAIZ,oCA9JJ,+CA+JQ,wBAAA,CACA,eAAA,CACA,OAAA,CACA,mBAAA,CACA,oCAAA,CACA,uBACA,oEACI,2BAEJ,4FACI,eAKR,sDAAkB,aAClB,uDACI,oCAEJ,mEACI,YAAA,CACA,kBAAA,CACA,qBA3yBG,CA4yBH,eAEA,kFACI,2CAEJ,iFACI,mBAEJ,8EACI,YAl0BN,CAm0BM,sBAEJ,+EACI,aAOJ,kFACI,YAAA,CACA,QAEJ,sFACI,gBAAA,CACA,cAx1BE,CAy1BF,uBAAA,CACA,cAAA,CACA,QAEJ,qFACI,gBAAA,CACA,YAAA,CACA,QAEJ,kFACI,gBAAA,CACA,YAAA,CACA,QAEJ,qFACI,iBAAA,CACA,cAx2BC,CAy2BD,cAAA,CACA,QAEJ,sFAAwB,aACxB,oGACI,kBAEJ,8EACI,mDAAA,CACA,gBAAA,CACA,gBAEJ,oKACI,YAAA,CACA,UAGR,sDAEI,mBAAA,CACA,UAAA,CACA,eACA,kEACI,mCAAA,CACA,YAAA,CACA,kBAAA,CACA,eAAA,CACA,sBACA,6EACI,aACA,0FACI,aAEJ,2FACI,gBAAA,CACA,YAAA,CACA,gBAEA,gGACI,oBAAA,CACA,iBAAA,CACA,YAAA,CACA,iBACA,qGACI,aAAA,CACA,kBACA,gHACI,qCAEJ,gIACI,KAAA,CACA,kBAEJ,oHACI,0BAAA,CACA,UAEJ,oHACI,KAAA,CACA,iBAAA,CACA,0BAMpB,+FACI,cA36BJ,CA46BI,cAIZ,oCACI,mEACI,eACA,kFACI,eACA,6SAGI,aAGR,kFACI,WAAA,CACA,aAAA,CACA,cAAA,CACA,OAAA,CACA,iBAEJ,kFACI,WAAA,CACA,aAAA,CACA,cAAA,CACA,OAAA,CACA,iBAEJ,sFACI,SAAA,CACA,cA58BH,CA68BG,WAAA,CACA,aAAA,CACA,cAAA,CACA,QAEJ,qFACI,SAAA,CACA,cAp9BH,CAq9BG,WAAA,CACA,aAAA,CACA,cAAA,CACA,QAEJ,qFACI,SAAA,CACA,cA59BH,CA69BG,WAAA,CACA,aAAA,CACA,cAAA,CACA,SAOpB,uBACI,YAAA,CACA,0BAAA,CACA,sBAAA,CACA,cA7+BQ,CA8+BR,eA1+BU,CA2+BV,WAYA,oCACI,aAAA,CACA,UAx8Be,CAy8Bf,YAAA,CACA,sBAAA,CACA,cAAA,CACA,cAKA,gDACI,aAAA,CACA,cAvgCM,CAwgCN,gBAAA,CACA,gBAKJ,mDACI,aAAA,CACA,cAhhCM,CAihCN,gBAAA,CACA,eAAA,CAQI,cAcR,wIACI,aAEJ,sDAIQ,iBAIZ,kCACI,aAAA,CACA,kBAIA,qDACI,eAEJ,6CACI,aAAA,CACA,cA9jCM,CA+jCN,UArhCC,CAshCD,cAAA,CACA,gBAEJ,gDAEI,SAtkCA,CAukCA,SAAA,CACA,kBAMR,kDACI,aAGR,oCACI,uBACI,sBACA,oCACI,UAAA,CACA,SAAA,CAII,kBAGR,sDACI,aAEJ,kCACI,WAKJ,gDACI,SAAA,CACA,WAUR,uCAAiB,WACjB,uCAAiB,uBACjB,uCAAiB,uBACjB,wCAAkB,uBAClB,yCAAmB,wBAGvB,wBAEI,YAAA,CACA,WACA,sCAAiB,aACjB,wCAAmB,aACnB,uCAAkB,aAClB,sCAAiB,YACjB,sCAAiB,YAGrB,0BACI,YAAA,CACA,0BAAA,CACA,kBAAA,CACA,eACA,6DACI,iBAEJ,4DACI,iBA8CA,qCACI,WAAA,CACA,qBAAA,CACA,wBAnqCQ,CAoqCR,gBAAA,CACA,oBAAA,CACA,cAAA,CACA,oBAEJ,mDACI,aAjrCI,CAmrCA,mBAAA,CAEJ,qBAIZ,iBACI,GAAI,6BACJ,IAAK,oCACL,IAAK,oCACL,IAAK,oCACL,IAAK,oCACL,GAAM,oCA0CF,kCACI,UAAA,CACA,6BApuCQ,CAquCR,oBAAA,CACA,aAAA,CACA,YAAA,CACA,mBAAA,CACA,gBAAA,CACA,iBAEJ,gDACI,kBApvCI,CAsvCA,kBAAA,CAEJ,qBAeR,gBACI,GAAI,gCAAA,CAAkC,mCACtC,IAAK,qCAAA,CAAuC,kCAC5C,IAAK,kCAAA,CAAoC,mCACzC,IAAK,qCAAA,CAAuC,kCAC5C,IAAK,kCAAA,CAAoC,mCACzC,IAAK,qCAAA,CAAuC,kCAC5C,GAAM,kCAAA,CAAoC,mCAKlD,sBACI,oBAAA,CACA,qBAAA,CACA,iBAAA,CACA,QAAA,CACA,WACA,kCACI,uBAAA,CACA,oBAAA,CACA,eAAA,CACA,aAAA,CACA,qBAAA,CACA,cApzCI,CAqzCJ,UAnyCK,CAoyCL,eAlzCM,CAmzCN,wBAAA,CACA,mCAAA,CACA,eA3wCK,CA4wCL,QAAA,CACA,YAAA,CACA,WAAA,CACA,eA1yCO,CA2yCP,yDAEI,oCADJ,wCAEQ,wCAAA,CACA,WAGR,wCACI,wCAAA,CACA,mCAAA,CACA,YAAA,CAEI,uBAAA,CAEJ,UAEJ,6DACI,kBAGR,8CACI,aAEJ,4BACI,aAAA,CACA,iBAAA,CACA,SAAA,CACA,OAAA,CACA,WAAA,CACA,qBAAA,CACA,cA51CI,CA61CJ,oBAIR,oBACI,aAAA,CACA,qBAAA,CACA,eAh2CU,CAi2CV,cAKA,uCACI,kBAt1CQ,CAu1CR,UAz1CO,CA01CP,iBAAA,CACA,kBAAA,CACA,gBAEI,oCADJ,6CAEQ,oBAGR,6CACI,mBAEJ,8CACI,mBAGR,0CACI,oBAAA,CACA,qBAAA,CACA,kBAAA,CACA,gBAz3CS,CA03CT,YAEJ,0CACI,cAAA,CACA,eAAA,CACA,WAEJ,0CACI,cAAA,CACA,eAAA,CACA,UAn4CS,CAo4CT,wBAAA,CACA,6BAEJ,uDACI,aAEJ,uDACI,iBAAA,CACA,QA74CS,CA84CT,OA94CS,CA+4CT,WAx4CQ,CAy4CR,YAx4CS,CAy4CT,SAAA,CACA,UAEJ,6DACI,iBAAA,CACA,MAAA,CACA,SAAA,CACA,qBAAA,CACA,SAAA,CACA,cAAA,CACA,UAx5CG,CAy5CH,WAz5CG,CA05CH,WAAA,CACA,mCAp3CC,CAq3CD,mBAAA,CACA,iBAAA,CACA,wBAn5CQ,CAo5CR,UAt5CO,CAw5CP,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,gBAEI,oCADJ,mEAEQ,oBAGR,mEACI,mBAEJ,oEACI,mBAEJ,oEACI,WAAA,CACA,qBAAA,CACA,aAAA,CACA,aAAA,CACA,eAAA,CACA,iBAAA,CACA,UAAA,CACA,uBAAA,CACA,mBAAA,CACA,mBAAA,CACA,kCAAA,CACA,iCAAA,CACA,UAAA,CACA,WAAA,CACA,cAAA,CACA,kBAAA,CACA,iBAAA,CACA,4BAAA,CACA,oBAEJ,kEACI,iBAAA,CACA,cAAA,CACA,mBAAA,CACA,WAAA,CACA,iBACA,uEACI,cACA,kFACI,oCAAA,CACA,sBAEJ,kGACI,KAAA,CACA,kBAEJ,sFACI,0BAAA,CACA,UAEJ,sFACI,KAAA,CACA,iBAAA,CACA,0BAMpB,oCACI,uCACI,YAIR,0BACI,gBAAA,CACA,kBAEI,wDACI,mBAMR,4CAEQ,mBAKZ,UAEI,UAr/CS,CAs/CT,SAl9CW,CAm9CX,iBAAA,CACA,sBAAA,CACA,gBAEI,oCACI,QAAA,CACA,cA/gDA,CAghDA,gBAGR,4BACI","file":"front.css","sourceRoot":"..\\src\\asset","sourcesContent":["\r\n\r\n$font-size: 16px;\r\n$small-font-size: 14px;\r\n$nano-font-size: 10px;\r\n$big-font-size: 20px;\r\n$line-height: 1.5;\r\n$narrow-line-height: 1.3;\r\n$padding: 10px;\r\n$narrow-padding: 4px;\r\n$control-height: 40px;\r\n$navbar-height: 60px;\r\n$fab-size: 80px;\r\n$monitor-width: 350px;\r\n$monitor-margin: 20px;\r\n$monitor-max-height: 80vh;\r\n$picture-width: 292px;\r\n$picture-height: 250px;\r\n$rejection-shift: 0.25em;\r\n$icon-size: 30px;\r\n$base-color: rgb(17, 17, 17);\r\n$base-bgcolor: rgb(255, 255, 255);\r\n$alt-bgcolor: rgb(240, 240, 240);\r\n$primary-color: rgb(235, 65, 102);\r\n$negative-color: rgb(221, 68, 34);\r\n$primary-button-bgcolor: $primary-color;\r\n$dark-base: false;\r\n\r\n$border-color: rgba($base-color, 0.26);\r\n$button-border-color: rgba($base-color, 0.13);\r\n$placeholder-color: rgba($base-color, 0.35);\r\n$button-bgcolor: mix(scale-color($base-bgcolor, $lightness:-20%, $saturation:-20%), $primary-color, 95%);\r\n$primary-bgcolor: scale-color($primary-color, $lightness:40%, $saturation:-25%);\r\n$hover-button-bgcolor: scale-color($button-bgcolor, $lightness:-15%, $saturation:-10%);\r\n$hover-primary-button-bgcolor: scale-color($primary-button-bgcolor, $lightness:-15%, $saturation:-10%);\r\n@if $dark-base {\r\n    $button-bgcolor: mix(scale-color($base-bgcolor, $lightness:20%, $saturation:-20%), $primary-color, 95%);\r\n    $primary-bgcolor: scale-color($primary-color, $lightness:-40%, $saturation:-25%);\r\n    $hover-button-bgcolor: scale-color($button-bgcolor, $lightness:15%, $saturation:-10%);\r\n    $hover-primary-button-bgcolor: scale-color($primary-button-bgcolor, $lightness:15%, $saturation:-10%);\r\n}\r\n\r\n$outline-width: 4px;\r\n$hover-alpha: 0.2;\r\n$focus-alpha: 0.4;\r\n$weak-alpha: 0.6;\r\n$disabled-alpha: 0.3;\r\n$break-width: 782px;\r\n$box-radius: 0;\r\n$raise-button: false;\r\n$shadow1:0 1px 3px rgba(0,0,0, 0.12), 0 1px 2px rgba(#000, 0.24);\r\n$shadow2:0 3px 6px rgba(0,0,0, 0.2);\r\n$animate-on-selection: true;\r\n$animate-on-focus: true;\r\n$plain-components: false;\r\n$control-header-width: 10em;\r\n$form-padding: 0;\r\n$show-optional: false;\r\n$flip-required: false;\r\n$fill-required: false;\r\n$table-layout: false;\r\n\r\n\r\n/*\r\n * This class is added to body when a modal dialog is displayed.\r\n */\r\n.wqe-x-suspended, \r\n.wqe-x-suspended body {\r\n    overflow: hidden;\r\n}\r\n\r\n/*\r\n * padding for controls\r\n */\r\n@function cpd($borderWidth) {\r\n    @return (($control-height - $font-size * $line-height - 2 * $borderWidth) / 2);\r\n}\r\n\r\n%Component {\r\n    display: block;\r\n    flex: 0 0 auto;\r\n    margin: 0;\r\n    padding: 0;\r\n    width: auto;\r\n    height: auto;\r\n    box-sizing: border-box;\r\n    font-size: $font-size;\r\n}\r\n\r\n%Container {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    flex-wrap: nowrap;\r\n    align-items: stretch;\r\n}\r\n\r\n%Item {\r\n    display: flex;\r\n    flex-direction: column;\r\n    border: 1px solid $border-color;\r\n    & > .wqe--head {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        padding: $padding;\r\n        border-bottom: 1px solid $border-color;\r\n        background-color: $alt-bgcolor;\r\n        position: relative;\r\n        font-size: $font-size;\r\n        color: $base-color;\r\n        & > .wqe--media {\r\n            width: $icon-size;\r\n            height: $icon-size;\r\n            @extend %Container;\r\n        }\r\n        & > .wqe--main {\r\n            display: flex;\r\n            flex-direction: column;\r\n            flex-shrink: 1;\r\n            flex-grow: 1;\r\n            flex-basis: auto;\r\n            width: 100%;\r\n            & > .wqe--note {\r\n                font-size: $small-font-size;\r\n                color: rgba($base-color, $weak-alpha);\r\n                line-height: $narrow-line-height;\r\n            }\r\n        }\r\n        & > .wqe--message {\r\n            @extend %Message;\r\n            top: $padding;\r\n            right: $padding;\r\n            position: absolute;\r\n            background: transparent;\r\n        }\r\n    }\r\n    &.wqe-is-invalid {\r\n        border-color: $negative-color;\r\n    }\r\n    &.wqe-belongs-hnavigator {\r\n    }\r\n    &.wqe-belongs-wnavigator {\r\n        height: 100%;\r\n        overflow: auto;\r\n        position:relative;\r\n        width: 100%;\r\n        & > .wqe--head {\r\n            flex: 0 0 auto;\r\n        }\r\n    }\r\n}\r\n\r\n%TextInput {\r\n    display: block;\r\n    border: 1px solid $border-color;\r\n    background: $base-bgcolor;\r\n    color: $base-color;\r\n    padding: cpd(1) cpd(1);\r\n    height: auto;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    outline: none;\r\n    border-radius: $box-radius;\r\n    line-height: $line-height;\r\n    max-width: 100%;\r\n    position: relative;\r\n    font-size: $font-size;\r\n    transition: box-shadow 0.1s linear, border-color 0.1s linear;\r\n    &:hover {\r\n        @media screen and (min-width:$break-width + 1) {\r\n            box-shadow: 0 0 0 $outline-width rgba($primary-color, $hover-alpha);\r\n            z-index: 2;\r\n        }\r\n    }\r\n    &:focus {\r\n        box-shadow: 0 0 0 $outline-width rgba($primary-color, $focus-alpha);\r\n        border: 1px solid $border-color;\r\n        outline: none;\r\n        z-index: 2;\r\n        @if $animate-on-focus {\r\n            animation: explosion 0.6s;\r\n        }\r\n    }\r\n    &.wqe-is-invalid:not(:focus) {\r\n        border-color: $negative-color;\r\n    }\r\n    &::placeholder {\r\n        font-size: $font-size;\r\n        color: $placeholder-color;\r\n    }\r\n    &:-ms-input-placeholder {\r\n        font-size: $font-size;\r\n        color: $placeholder-color;\r\n    }\r\n    &::-ms-input-placeholder {\r\n        font-size: $font-size;\r\n        color: $placeholder-color;\r\n    }\r\n}\r\n@keyframes explosion {\r\n    0% {box-shadow:0 0 0 $outline-width rgba($primary-color, $hover-alpha), 0 0 0 0 rgba($primary-color, $hover-alpha);}\r\n    15% {box-shadow:0 0 0 $outline-width rgba($primary-color, $hover-alpha * 0.5 + $focus-alpha * 0.5), 0 0 6px 10px rgba($primary-color, $hover-alpha);}\r\n    30% {box-shadow:0 0 0 $outline-width rgba($primary-color, $focus-alpha), 0 0 8px 17px rgba($primary-color, $hover-alpha * 0.5);}\r\n    100% {box-shadow:0 0 0 $outline-width rgba($primary-color, $focus-alpha), 0 0 12px 25px rgba($primary-color, 0);}\r\n}\r\n\r\n%Checkable {\r\n    display: block;\r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    outline: none;\r\n    line-height: $line-height;\r\n    max-width: 100%;\r\n    color: $base-color;\r\n    & > input {\r\n        display:block;\r\n        position: absolute;\r\n        opacity: 0;\r\n    }\r\n    & > label {\r\n        display:block;\r\n        background: $base-bgcolor;\r\n        height: $control-height;\r\n        line-height: $control-height;\r\n        @if $plain-components {\r\n            padding: 0 cpd(0) 0 0;\r\n            border-width: 0;\r\n            box-shadow: 0 0 0 $outline-width transparent;\r\n            border-radius: $box-radius;\r\n        } @else {\r\n            padding: 0 cpd(1) + (0.5 * $font-size) 0 cpd(1);\r\n            border: 1px solid $border-color;\r\n            border-radius: 100px;\r\n        }\r\n        position: relative;\r\n        max-width: 100%;\r\n        overflow: hidden;\r\n        white-space: nowrap;\r\n        margin: 0;\r\n        transition: box-shadow 0.1s linear, border-color 0.1s linear;\r\n    }\r\n    @if $plain-components {\r\n        & > input.wqe-is-invalid + label {\r\n            color: $negative-color;\r\n        }\r\n    } @else {\r\n        & > input.wqe-is-invalid + label {\r\n            border-color: $negative-color;\r\n            z-index: 2;\r\n        }\r\n    }\r\n    & > label:hover {\r\n        @media screen and (min-width:$break-width + 1) {\r\n            box-shadow: 0 0 0 $outline-width rgba($primary-color, $hover-alpha);\r\n        }\r\n    }\r\n    & > input:focus + label {\r\n        box-shadow: 0 0 0 $outline-width rgba($primary-color, $focus-alpha);\r\n        z-index: 2;\r\n    }\r\n}\r\n\r\n%Message {\r\n    display: block;\r\n    color: $negative-color;\r\n    //background: rgba(255, 255, 255, 0.85);\r\n    font-size: $small-font-size;\r\n    line-height: 1;\r\n    font-weight: normal;\r\n    width: auto;\r\n    margin-top: 0 !important;\r\n    max-width: 100%;\r\n    &::before {\r\n        display: inline-block;\r\n        font-family:\"dashicons\";\r\n        content: \"\\f534 \";\r\n        vertical-align: -2px;\r\n        margin-right: 1px;\r\n    }\r\n    &.wqe-is-run.wqe-for-removed {\r\n        transition: opacity 0.2s linear;\r\n    }\r\n    &.wqe-is-removed {\r\n        opacity: 0;\r\n    }\r\n    &.wqe-is-run.wqe-for-created {\r\n        animation-iteration-count: 1;\r\n        animation: rejection 0.3s;\r\n    }\r\n}\r\n@keyframes rejection {\r\n    0% {transform: translateX($rejection-shift);}\r\n    15% {transform: translateX(-1 * $rejection-shift);}\r\n    30% {transform: translateX(0.5 * $rejection-shift);}\r\n    50% {transform: translateX(-0.5 * $rejection-shift);}\r\n    70% {transform: translateX(0.25 * $rejection-shift);}\r\n    90% {transform: translateX(-0.25 * $rejection-shift);}\r\n}\r\n\r\n%Buttonlike {\r\n    display: block;\r\n    border: 1px solid $button-border-color;\r\n    background: $button-bgcolor;\r\n    padding: cpd(1) cpd(1) + (0.5 * $font-size);\r\n    margin: 0;\r\n    box-sizing: border-box;\r\n    outline: none;\r\n    line-height: $line-height;\r\n    max-width: 100%;\r\n    background-clip: border-box;\r\n    font-size: $font-size;\r\n    font-weight: normal;\r\n    border-radius: $box-radius;\r\n    outline: none;\r\n    color: inherit;\r\n    text-align: center;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    position: relative;\r\n    transition: box-shadow 0.1s linear, background-color 0.1s linear, opacity 0.1s linear;\r\n    @if $raise-button {\r\n        box-shadow: $shadow1;\r\n    }\r\n    &:disabled {\r\n        opacity: $disabled-alpha;\r\n        pointer-events: none;\r\n    }\r\n    &:hover {\r\n        text-decoration:none;\r\n        @media screen and (min-width:$break-width + 1) {\r\n            background: $hover-button-bgcolor;\r\n        }\r\n    }\r\n    &:focus {\r\n        @if $raise-button {\r\n            box-shadow: 0 0 0 4px rgba($primary-color, $focus-alpha), $shadow1;\r\n        } @else {\r\n            box-shadow: 0 0 0 4px rgba($primary-color, $focus-alpha);\r\n        }\r\n        background: $button-bgcolor;\r\n        outline: none;\r\n        z-index: 2;\r\n    }\r\n    &:active {\r\n        background: $hover-button-bgcolor;\r\n    }\r\n}\r\n\r\n\r\n\r\n\r\n.wqe-Form .wqe-Image {\r\n    @extend %Component;\r\n    background-repeat: no-repeat;\r\n    background-position: center center;\r\n    overflow: hidden;\r\n    &.wqe-scaling-center {\r\n        background-image: none !important;\r\n        position: relative;\r\n        & > .wqe--img {\r\n            display: block;\r\n            position: relative;\r\n            left: 50%;\r\n            top: 50%;\r\n            transform: translate(-50%, -50%);\r\n            max-width: 100%;\r\n            max-height: 100%;\r\n            width: auto;\r\n            height: auto;\r\n            min-width:1px;\r\n            min-height:1px;\r\n            border: none;\r\n        }\r\n    }\r\n    &.wqe-scaling-cover {\r\n        background-size: cover;\r\n        & > .wqe--img {\r\n            display: block;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n        }\r\n    }\r\n    &.wqe-scaling-contain {\r\n        background-size: contain;\r\n        & > .wqe--img {\r\n            display: block;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n        }\r\n    }\r\n    &.wqe-belongs-product {\r\n        width: $picture-width;\r\n        height: $picture-height;\r\n        background-size: cover;\r\n        & > .wqe--img {\r\n            display: block;\r\n            opacity: 0;\r\n            pointer-events: none;\r\n        }\r\n    }\r\n    &.wqe-belongs-selector {\r\n        width: $icon-size;\r\n        height: $icon-size;\r\n    }\r\n}\r\n\r\n@mixin ribbonOblique() {\r\n    display: inline-block;\r\n    position: absolute;\r\n    left: -30px; // 10 + 60 + x = 40 \r\n    top: 21px;  // 10 + 9 + y = 40 \r\n    width: 120px;\r\n    text-align: center;\r\n    font-size: 12px;\r\n    font-weight: 400;\r\n    line-height: 18px;\r\n    height: 18px;\r\n    -webkit-transform: rotate(-45deg);\r\n    transform: rotate(-45deg);\r\n    background-color: rgb(21, 21, 90);\r\n    color: white;\r\n}\r\n\r\n@mixin ribbonSeal($off) {\r\n    display: block;\r\n    position: absolute;\r\n    width: 40px;\r\n    height: 40px;\r\n    line-height: 40px;\r\n    font-size: 11px;\r\n    text-align: center;\r\n    background: red;\r\n    color: yellow;\r\n    border-radius: 100px;\r\n    top: 250px - 4px - 40px;\r\n    right: 4px + $off * 40px;\r\n}\r\n\r\n.wqe-Form .wqe-Product {\r\n    @extend %Component;\r\n    @extend %Container;\r\n    position: relative;\r\n    width: $picture-width + 2 * $narrow-padding;\r\n    box-sizing: border-box;\r\n    justify-content: center;\r\n    //overflow: hidden;\r\n    align-self: stretch;\r\n    flex-direction: column;\r\n    padding: $narrow-padding;\r\n    transition: background-color 0.2s linear;\r\n    & > .wqe--info {\r\n        @extend %Component;\r\n        display: flex;\r\n        flex-grow: 1;\r\n        flex-shrink: 1;\r\n        flex-basis: auto;\r\n        flex-direction: column;\r\n        position: relative;\r\n        max-width: 100%;\r\n        box-sizing: border-box;\r\n        width: 100%;\r\n        overflow: hidden;\r\n        & > .wqe--media {\r\n            @extend %Container;\r\n            justify-content: center;\r\n            flex: 0 0 auto;\r\n        }\r\n        & > .wqe--main {\r\n            @extend %Container;\r\n            flex-direction: row;\r\n            text-align: center;\r\n            flex: 1 1 auto;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            flex-wrap: wrap;\r\n            padding: $narrow-padding;\r\n            justify-content: space-between;\r\n            & > .wqe--name {\r\n                flex: 0 0 auto;\r\n                flex-grow: 0;\r\n                flex-shrink: 0;\r\n                flex-basis: auto;\r\n                max-width: 100%;\r\n                order: 1;\r\n            }\r\n            & > .wqe--note {\r\n                font-size: $small-font-size;\r\n                color: rgba($base-color, $weak-alpha);\r\n                line-height: $narrow-line-height;\r\n                max-width: 100%;\r\n                width: 100%;\r\n                order: 3;\r\n            }\r\n            & > .wqe--prices {\r\n                max-width: 100%;\r\n                flex-grow: 0;\r\n                flex-shrink: 0;\r\n                flex-basis: auto;\r\n                order: 2;\r\n                & > .wqe--normalPrice {\r\n                    text-decoration: line-through;\r\n                }\r\n                & > .wqe--price {\r\n                    font-size: $font-size;\r\n                    font-weight: bold;\r\n                }\r\n            }\r\n        }\r\n        & > .wqe--ribbon.wqe-ribbon-1 { @include ribbonSeal(0); }\r\n        & > .wqe--ribbon.wqe-ribbon-2 { @include ribbonOblique(); }\r\n        & > .wqe--ribbon.wqe-ribbon-3 { @include ribbonSeal(1); }\r\n    }\r\n    & > .wqe--control {\r\n        & > .wqe--quantity {\r\n            display:none;\r\n        }\r\n    }\r\n    &.wqe-is-selected {\r\n        background-color: $primary-bgcolor;\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Group {\r\n    @extend %Item;\r\n    box-sizing: border-box;\r\n    border: none;\r\n    & > .wqe--head {\r\n        display: none;\r\n    }\r\n    & > .wqe--body {\r\n        @extend %Container;\r\n        flex-direction: row;\r\n        flex-wrap: wrap;\r\n        & > .wqe--note {\r\n            font-size: $font-size;\r\n            color: $base-color;\r\n            flex: 1 0 100%;\r\n            width: 100%;\r\n            margin-bottom: $padding;\r\n        }\r\n    }\r\n    &.wqe-is-run {\r\n        transition: opacity 0.2s linear;\r\n        &.wqe-for-removed {\r\n            position: absolute;\r\n        }\r\n    }\r\n    &.wqe-is-created {\r\n        opacity: 0;\r\n    }\r\n    &.wqe-is-removed {\r\n        opacity: 0;\r\n        position: absolute;\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-NavBar {\r\n    &.wqe-belongs-hnavigator {\r\n        display: flex;\r\n        background: $alt-bgcolor;\r\n        border: 1px solid $border-color;\r\n        width: 100%;\r\n        z-index: 100;\r\n        box-shadow: $shadow2;\r\n        &.wqe-sticks-top {position:absolute; top:0; bottom:auto;}\r\n        &.wqe-sticks-bottom {position:absolute; top:auto; bottom:0;}\r\n        &.wqe-sticks-screen {position:fixed; top:0; bottom:auto;}\r\n        & > .wqe--menuWrap {\r\n            white-space: nowrap;\r\n            overflow-x: auto;\r\n            -webkit-overflow-scrolling: touch;\r\n            flex-grow: 1;\r\n            flex-shrink: 1;\r\n            flex-basis: auto;\r\n            & > .wqe--menu {\r\n                display: flex;\r\n                list-style-type: none;\r\n                margin: 0;\r\n                padding: 0;\r\n                & > .wqe--item {\r\n                    position: relative;\r\n                    margin: 0;\r\n                    padding: 0;\r\n                    display: block;\r\n                    & > a {\r\n                        outline: none;\r\n                        text-decoration: none;\r\n                        color: $base-color;\r\n                        font-size: $font-size;\r\n                        display: flex;\r\n                        padding: 0 cpd(1) + (0.5 * $font-size);\r\n                        justify-content: center;\r\n                        background-color: transparent;\r\n                        transition: background-color 0.2s linear;\r\n                        &:hover {\r\n                            @media screen and (min-width:$break-width + 1) {\r\n                                background-color: $hover-button-bgcolor;\r\n                            }\r\n                        }\r\n                        & > .wqe--media {display: none;}\r\n                        & > .wqe--main {\r\n                            pointer-events: none;\r\n                            & > .wqe--name {\r\n                                height: $navbar-height;\r\n                                line-height: $navbar-height;\r\n                            }\r\n                            & > .wqe--note {display:none;}\r\n                        }\r\n                    }\r\n                    &::after {\r\n                        display: block;\r\n                        content: \"\";\r\n                        position: absolute;\r\n                        left: 0;\r\n                        right: 0;\r\n                        bottom: 0;\r\n                        height: $outline-width;\r\n                        background-color: transparent;\r\n                        transition: background-color 0.2s linear;\r\n                    }\r\n                    &.wqe-is-current {\r\n                        &::after {\r\n                            background-color: $primary-color;\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        & > .wqe--commands {\r\n            display: none;\r\n            padding: 0;\r\n            width: $fab-size;\r\n            flex-grow: 0;\r\n            flex-shrink: 0;\r\n            flex-basis: auto;\r\n            position: relative;\r\n            @media screen and (max-width:$break-width) {\r\n                display: block;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Monitor {\r\n    font-size: $font-size;\r\n    color: $base-color;\r\n    display: flex;\r\n    flex-direction: column;\r\n    &:not(.wqe-is-confirming) {\r\n        width: $monitor-width;\r\n        z-index: 200;\r\n        transform: translate($monitor-margin, 0);\r\n        box-shadow: $shadow2;\r\n        max-height: $monitor-max-height;\r\n        &.wqe-sticks-top {position:absolute; top:0; bottom:auto;}\r\n        &.wqe-sticks-bottom {position:absolute; top:auto; bottom:0;}\r\n        &.wqe-sticks-screen {position:fixed; top:0; bottom:auto;}\r\n        & > .wqe--header {\r\n            display: flex;\r\n            background-color: $base-bgcolor;\r\n            border: 1px solid $border-color;\r\n            & > .wqe--title {\r\n                flex-grow: 1;\r\n                flex-shrink: 1;\r\n                flex-basis: auto;\r\n                font-size: $font-size;\r\n                font-weight: bold;\r\n                color: $base-color;\r\n                padding: 0 $padding;\r\n                height: $control-height;\r\n                line-height: $control-height;\r\n            }\r\n            & > .wqe--menu {\r\n                flex-grow: 0;\r\n                flex-shrink: 0;\r\n                flex-basis: auto;\r\n                > .wqe-for-hidemonitor {display:none;}\r\n            }\r\n        }\r\n        & > .wqe--entries {\r\n            border: 1px solid $border-color;\r\n            //max-height: 80vh;\r\n            overflow: auto;\r\n            background: $base-bgcolor;\r\n            & > .wqe--entry.wqe-for-header {display:none;}\r\n        }\r\n        & > .wqe--entries > .wqe--entry {\r\n            display: flex;\r\n            align-items: center;\r\n            position: relative;\r\n            flex-wrap: wrap;\r\n            /*width: 100%;*/\r\n            &.wqe-for-header {\r\n                border-bottom: 1px solid $border-color;\r\n            }\r\n            &:nth-child(even) {\r\n                background: $alt-bgcolor;\r\n            }\r\n            & > .wqe--prop {\r\n                padding: $padding;\r\n                box-sizing: border-box;\r\n            }\r\n            & > .wqe-for-no {\r\n                display: none;\r\n            }\r\n            & > .wqe-for-entry {\r\n                flex: 1 1 40%;\r\n            }\r\n            & > .wqe-for-unitPrice {\r\n                display: none;\r\n            }\r\n            & > .wqe-for-taxClass {\r\n                display: none;\r\n            }\r\n            & > .wqe-for-quantity {\r\n                text-align: center;\r\n                flex-grow: 0;\r\n                flex-shrink: 0;\r\n                flex-basis: $control-height;\r\n                width: $control-height;\r\n            }\r\n            & > .wqe-for-price {\r\n                display: none;\r\n            }\r\n            & > .wqe-for-operation {\r\n                flex-grow: 0;\r\n                flex-shrink: 0;\r\n                flex-basis: auto;\r\n                box-sizing: border-box;\r\n                width: 2 * $control-height + $outline-width + 2 * $padding;\r\n                display: flex;\r\n                & > *:first-child {\r\n                    margin-right: $outline-width;\r\n                }\r\n            }\r\n            &.wqe-is-run {\r\n                transition: max-height 0.2s linear, opacity 0.2s linear;\r\n                max-height: 100px;\r\n                overflow: hidden;\r\n            }\r\n            &.wqe-is-created, &.wqe-is-removed {\r\n                max-height: 0;\r\n                opacity: 0;\r\n            }\r\n        }\r\n        & > .wqe--footer {\r\n            //max-width: 18em;\r\n            background: $base-bgcolor;\r\n            & > .wqe--entry {\r\n                border: 1px solid $border-color;\r\n                display: flex;\r\n                align-items: center;\r\n                font-weight: bold;\r\n                & > .wqe--prop {\r\n                    padding: $padding;\r\n                    &.wqe-for-name {\r\n                        flex: 1 1 5em;\r\n                    }\r\n                    &.wqe-for-value {\r\n                        text-align: right;\r\n                        flex: 1 1 7em;\r\n                        overflow: hidden;\r\n                        \r\n                        & span {\r\n                            display: inline-block;\r\n                            position: relative;\r\n                            height: 1.5em;\r\n                            max-height: 1.5em;\r\n                            & span {\r\n                                display: block;\r\n                                position: relative;\r\n                                &.wqe-is-run {\r\n                                    transition: transform 0.2s ease-in-out;\r\n                                }\r\n                                &.wqe-is-run.wqe-for-removed {\r\n                                    top: 0;\r\n                                    position: absolute;\r\n                                }\r\n                                &.wqe-is-created {\r\n                                    transform: translateY(-4em);\r\n                                    opacity: 1;\r\n                                }\r\n                                &.wqe-is-removed {\r\n                                    top: 0;\r\n                                    position: absolute;\r\n                                    transform: translateY(4em);\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                &.wqe-for-total > .wqe-for-value {\r\n                    font-size: $big-font-size;\r\n                    color: $primary-color;\r\n                }\r\n                &.wqe-for-subtotal span {\r\n                    transition-delay: 0.2s !important;\r\n                }\r\n                &.wqe-for-tax span {\r\n                    transition-delay: 0.28s !important;\r\n                }\r\n                &.wqe-for-total span {\r\n                    transition-delay: 0.36s !important;\r\n                }\r\n            }\r\n        }\r\n        @media screen and (max-width:$break-width) {\r\n            position: fixed !important;\r\n            top: 0 !important;\r\n            right: 0;\r\n            left: auto !important;\r\n            transition: transform 0.2s ease-in-out;\r\n            transform: translate(0, 0);\r\n            &:not(.wqe-is-spshown) {\r\n                transform: translate($monitor-width + $monitor-margin, 0);\r\n            }\r\n            & > .wqe--header > .wqe--menu > .wqe-for-hidemonitor {\r\n                display:block;\r\n            }\r\n        }\r\n    }\r\n    &.wqe-is-confirming {\r\n        & > .wqe--header {display:none;}\r\n        & > .wqe--entries {\r\n            border: 1px solid $border-color;\r\n        }\r\n        & > .wqe--entries > .wqe--entry {\r\n            display: flex;\r\n            align-items: center;\r\n            background-color: $base-bgcolor;\r\n            flex-wrap: wrap;\r\n            /*width: 100%;*/\r\n            &.wqe-for-header {\r\n                border-bottom: 1px solid $border-color;\r\n            }\r\n            &:nth-child(even) {\r\n                background: $alt-bgcolor;\r\n            }\r\n            & > .wqe--prop {\r\n                padding: $padding;\r\n                box-sizing: border-box;\r\n            }\r\n            & > .wqe-for-no {\r\n                display: none;\r\n            }\r\n            /*& > .wqe-for-category {\r\n                font-size: $small-font-size;\r\n                color: rgba($base-color, $weak-alpha);\r\n                flex: 1 1 20%;\r\n            }*/\r\n            & > .wqe-for-entry {\r\n                flex: 0 1 50%;\r\n                order: 1;\r\n            }\r\n            & > .wqe-for-unitPrice {\r\n                text-align: right;\r\n                font-size: $small-font-size;\r\n                color: rgba($base-color, $weak-alpha);\r\n                flex: 0 1 12.5%;\r\n                order: 2;\r\n            }\r\n            & > .wqe-for-quantity {\r\n                text-align: right;\r\n                flex: 0 1 10%;\r\n                order: 3;\r\n            }\r\n            & > .wqe-for-price {\r\n                text-align: right;\r\n                flex: 0 1 15%;\r\n                order: 5;\r\n            }\r\n            & > .wqe-for-taxClass {\r\n                text-align: center;\r\n                font-size: $nano-font-size;\r\n                flex: 0 1 12.5%;\r\n                order: 4;\r\n            }\r\n            & > .wqe-for-operation {display: none;}\r\n            &.wqe-for-header > .wqe-for-taxClass {\r\n                font-size: inherit;\r\n            }\r\n            &.wqe-is-run {\r\n                transition: max-height 0.2s linear, opacity 0.2s linear;\r\n                max-height: 100px;\r\n                overflow: hidden;\r\n            }\r\n            &.wqe-is-created, &.wqe-is-removed {\r\n                max-height: 0;\r\n                opacity: 0;\r\n            }\r\n        }\r\n        & > .wqe--footer {\r\n            //margin-left: auto;\r\n            align-self: flex-end;\r\n            width: 15em;\r\n            max-width: 100%;\r\n            & > .wqe--entry {\r\n                border: 1px solid $border-color;\r\n                display: flex;\r\n                align-items: center;\r\n                font-weight: bold;\r\n                background-color: $base-bgcolor;\r\n                & > .wqe--prop {\r\n                    padding: $padding;\r\n                    &.wqe-for-name {\r\n                        flex: 1 1 6em;\r\n                    }\r\n                    &.wqe-for-value {\r\n                        text-align: right;\r\n                        flex: 1 1 6em;\r\n                        overflow: hidden;\r\n                        \r\n                        & span {\r\n                            display: inline-block;\r\n                            position: relative;\r\n                            height: 1.5em;\r\n                            max-height: 1.5em;\r\n                            & span {\r\n                                display: block;\r\n                                position: relative;\r\n                                &.wqe-is-run {\r\n                                    transition: transform 0.2s ease-in-out;\r\n                                }\r\n                                &.wqe-is-run.wqe-for-removed {\r\n                                    top: 0;\r\n                                    position: absolute;\r\n                                }\r\n                                &.wqe-is-created {\r\n                                    transform: translateY(-4em);\r\n                                    opacity: 1;\r\n                                }\r\n                                &.wqe-is-removed {\r\n                                    top: 0;\r\n                                    position: absolute;\r\n                                    transform: translateY(4em);\r\n                                }\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n                &.wqe-for-total > .wqe-for-value {\r\n                    font-size: $big-font-size;\r\n                    color: $primary-color;\r\n                }\r\n            }\r\n        }\r\n        @media screen and (max-width:$break-width) {\r\n            & > .wqe--entries > .wqe--entry {\r\n                flex-wrap: wrap;\r\n                &.wqe-for-header {\r\n                    font-size: $small-font-size;\r\n                    & > .wqe-for-unitPrice, \r\n                    & > .wqe-for-quantity, \r\n                    & > .wqe-for-taxClass {\r\n                        display: none;\r\n                    }\r\n                }\r\n                & > .wqe-for-entry {\r\n                    flex-grow: 1;\r\n                    flex-shrink: 1;\r\n                    flex-basis: 70%;\r\n                    order: 1;\r\n                    padding-bottom: 0;\r\n                }\r\n                & > .wqe-for-price {\r\n                    flex-grow: 0;\r\n                    flex-shrink: 0;\r\n                    flex-basis: 30%;\r\n                    order: 2;\r\n                    padding-bottom: 0;\r\n                }\r\n                & > .wqe-for-unitPrice {\r\n                    padding: 0;\r\n                    font-size: $nano-font-size;\r\n                    flex-grow: 0;\r\n                    flex-shrink: 0;\r\n                    flex-basis: 30%;\r\n                    order: 3;\r\n                }\r\n                & > .wqe-for-taxClass {\r\n                    padding: 0;\r\n                    font-size: $nano-font-size;\r\n                    flex-grow: 0;\r\n                    flex-shrink: 0;\r\n                    flex-basis: 30%;\r\n                    order: 4;\r\n                }\r\n                & > .wqe-for-quantity {\r\n                    padding: 0;\r\n                    font-size: $nano-font-size;\r\n                    flex-grow: 0;\r\n                    flex-shrink: 0;\r\n                    flex-basis: 30%;\r\n                    order: 5;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Control {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: flex-start;\r\n    font-size: $font-size;\r\n    line-height: $line-height;\r\n    color: $base-color;\r\n    @if $table-layout {\r\n        &:not(.wqe-for-action) {\r\n            border-bottom: 1px solid $border-color;\r\n            &:first-child {\r\n                border-top: 1px solid $border-color;\r\n            }\r\n            & > .wqe--header {\r\n                background: $alt-bgcolor;\r\n            }\r\n        }\r\n    }\r\n    & > .wqe--header {\r\n        flex: 0 0 auto;\r\n        width: $control-header-width;\r\n        display: flex;\r\n        align-items: flex-start;\r\n        flex-wrap: wrap;\r\n        padding: cpd(-1) 0;\r\n        @if $table-layout {\r\n            padding: (cpd(-1) + $font-size) $narrow-padding;\r\n            align-self: stretch;\r\n        }\r\n        & > .wqe--label {\r\n            flex: 0 1 auto;\r\n            font-size: $small-font-size;\r\n            line-height: $font-size * $line-height;\r\n            font-weight: bold;\r\n            @if $flip-required {\r\n                order: 2;\r\n            }\r\n        }\r\n        & > .wqe--required {\r\n            flex: 0 0 auto;\r\n            font-size: $small-font-size;\r\n            line-height: $font-size * $line-height;\r\n            font-weight: normal;\r\n            @if $fill-required {\r\n                background: $primary-bgcolor;\r\n                color: rgba($base-color, $weak-alpha);\r\n                border-radius: $box-radius;\r\n                border: none;\r\n                padding: 0 ($font-size * 0.25);\r\n            } @else {\r\n                color: $primary-color;\r\n            }\r\n            &.wqe-is-optional {\r\n                @if $show-optional {\r\n                    @if $fill-required {\r\n                        background: $button-bgcolor;\r\n                    } @else {\r\n                        color: rgba($base-color, $weak-alpha);\r\n                    }\r\n                } @else {\r\n                    display: none;\r\n                }\r\n            }\r\n        }\r\n        &.wqe-content-empty > .wqe--required {\r\n            display: none;\r\n        }\r\n        & > *:not(:last-child) {\r\n            @if $flip-required {\r\n                margin-left: $narrow-padding;\r\n            } @else {\r\n                margin-right: $narrow-padding;\r\n            }\r\n        }\r\n    }\r\n    & > .wqe--body {\r\n        flex: 1 1 auto;\r\n        position: relative;\r\n        @if $table-layout {\r\n            padding: $font-size;\r\n        }\r\n        & > *:not(:first-child) {\r\n            margin-top: $font-size * 0.25;\r\n        }\r\n        & .wqe--note {\r\n            display: block;\r\n            font-size: $small-font-size;\r\n            opacity: $weak-alpha;\r\n            margin-top: 4px;\r\n            margin-left: 4px;\r\n        }\r\n        & > .wqe--message {\r\n            @extend %Message;\r\n            left: $font-size;\r\n            top: - $small-font-size - 4px;  // 14 + 4\r\n            position: absolute;\r\n            @if $table-layout {\r\n                top: 1px;\r\n            }\r\n        }\r\n    }\r\n    &.wqe-is-run.wqe-for-removed {\r\n        display: none;  // suppress lifecycle transition\r\n    }\r\n}\r\n@media screen and (max-width:$break-width) {\r\n    .wqe-Form .wqe-Control {\r\n        flex-direction: column;\r\n        & > .wqe--header {\r\n            width: 100%;\r\n            padding: 0;\r\n            @if $table-layout {\r\n                padding: 8px 4px;\r\n            } @else {\r\n                margin-bottom: $outline-width;\r\n            }\r\n        }\r\n        & > .wqe--header.wqe-content-empty {\r\n            display: none;\r\n        }\r\n        & > .wqe--body {\r\n            width: 100%;\r\n            @if $table-layout {\r\n                padding: 16px 0;\r\n            }\r\n        }\r\n        & > .wqe--body .wqe--message {\r\n            left: auto;\r\n            right: 4px;\r\n            @if $table-layout {\r\n                top: -4px;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-TextInput {\r\n    @extend %TextInput;\r\n    &.wqe-size-full {width: 100%;}\r\n    &.wqe-size-nano {width:calc(3em + 16px);}\r\n    &.wqe-size-mini {width:calc(5em + 16px);}\r\n    &.wqe-size-small {width:calc(8em + 16px);}\r\n    &.wqe-size-normal {width:calc(13em + 16px);}\r\n}\r\n\r\n.wqe-Form .wqe-TextArea {\r\n    @extend %TextInput;\r\n    height: 160px;  // 16px * 1.5 * 6 + 16px;\r\n    width: 100%;\r\n    &.wqe-size-full {height: 256px;}  // 16px * 1.5 * 10 + 16px\r\n    &.wqe-size-normal {height: 160px; }  // 16px * 1.5 * 6 + 16px\r\n    &.wqe-size-small {height: 112px; }  // 16px * 1.5 * 4 + 16px\r\n    &.wqe-size-mini {height: 88px; }  // 16px * 1.5 * 3 + 16px\r\n    &.wqe-size-nano {height: 64px; }  // 16px * 1.5 * 2 + 16px\r\n}\r\n\r\n.wqe-Form .wqe-InputGroup {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    &.wqe-gutter-small > *:not(:last-child) {\r\n        margin-right: 8px;\r\n    }\r\n    &.wqe-gutter-mini > *:not(:last-child) {\r\n        margin-right: 4px;\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Checkbox {\r\n    @extend %Checkable;\r\n    @if $plain-components {\r\n        position: relative;\r\n        & > label::before {\r\n            width: $font-size * $line-height;\r\n            height: $font-size * $line-height;\r\n            display: inline-block;\r\n            border: 1px solid $border-color;\r\n            content: \"\";\r\n            margin-right: 0.25 * $font-size;\r\n            border-radius: $box-radius;\r\n            vertical-align: top;\r\n            position: relative;\r\n            top: ($control-height - $font-size * $line-height) / 2;\r\n        }\r\n        & > label::after {\r\n            position: absolute;\r\n            text-align: center;\r\n            width: $font-size * $line-height;\r\n            height: $control-height;\r\n            line-height: $control-height;\r\n            left: 0;\r\n            top: 0;\r\n            content: \"\\f147\";\r\n            font-family:\"dashicons\";\r\n            display: inline-block;\r\n            font-size: $font-size * $line-height;\r\n            vertical-align: middle;\r\n            color: transparent;\r\n            @if $animate-on-selection == false {\r\n                transition: color 0.2s linear;\r\n            }\r\n        }\r\n        & > input:checked + label::after {\r\n            color: $primary-color;\r\n            @if $animate-on-selection {\r\n                animation: spin2 0.3s;\r\n            }\r\n            transform: scale(1.2);\r\n        }\r\n    } @else {\r\n        & > label::before {\r\n            content: \"\\f147\";\r\n            font-family:\"dashicons\";\r\n            color: $placeholder-color;\r\n            line-height: $font-size * $line-height;\r\n            display: inline-block;\r\n            font-size: $font-size * $line-height;\r\n            vertical-align: -25%;\r\n        }\r\n        & > input:checked + label::before {\r\n            color: $primary-color;\r\n            @if $animate-on-selection {\r\n                animation: spin2 0.3s;\r\n            }\r\n            transform: scale(1.2);\r\n        }\r\n    }\r\n}\r\n@keyframes spin2 {\r\n    0% {transform:rotate(0) scale(1); }\r\n    60% {transform:rotate(375deg) scale(1.2); }\r\n    70% {transform:rotate(348deg) scale(1.2); }\r\n    80% {transform:rotate(368deg) scale(1.2); }\r\n    90% {transform:rotate(354deg) scale(1.2); }\r\n    100% {transform:rotate(360deg) scale(1.2); }\r\n}\r\n\r\n.wqe-Form .wqe-Radio {\r\n    @extend %Checkable;\r\n    @if $plain-components {\r\n        position: relative;\r\n        & > label::before {\r\n            width: $font-size * $line-height;\r\n            height: $font-size * $line-height;\r\n            display: inline-block;\r\n            border: 1px solid $border-color;\r\n            content: \"\";\r\n            margin-right: 0.25 * $font-size;\r\n            border-radius: 100px;\r\n            vertical-align: top;\r\n            position: relative;\r\n            top: ($control-height - $font-size * $line-height) / 2;\r\n        }\r\n        & > label::after {\r\n            position: absolute;\r\n            text-align: center;\r\n            width: $font-size;\r\n            height: $font-size;\r\n            left: ($font-size * $line-height - $font-size) * 0.5;\r\n            top: ($control-height - $font-size) * 0.5;\r\n            content: \"\";\r\n            border-radius: 100px;\r\n            display: inline-block;\r\n            vertical-align: middle;\r\n            background-color: transparent;\r\n            @if $animate-on-selection == false {\r\n                transition: background-color 0.2s linear;\r\n            }\r\n        }\r\n        & > input:checked + label::after {\r\n            background-color: $primary-color;\r\n            @if $animate-on-selection {\r\n                animation: jump 0.3s;\r\n            }\r\n        }\r\n    } @else {\r\n        & > label::before {\r\n            content: \"\";\r\n            background: $placeholder-color;\r\n            display: inline-block;\r\n            height: $font-size * 0.8;\r\n            width: $font-size * 0.8;\r\n            border-radius: 100px;\r\n            vertical-align: 0;\r\n            margin-right: 4px;\r\n        }\r\n        & > input:checked + label::before {\r\n            background: $primary-color;\r\n            @if $animate-on-selection {\r\n                animation: jump 0.3s;\r\n            }\r\n            transform: scale(1.2);\r\n        }\r\n    }\r\n}\r\n@if $plain-components {\r\n    @keyframes jump {\r\n        0% {transform:translateY(0) ; animation-timing-function: ease-out; }\r\n        30% {transform:translateY(-8px); animation-timing-function: ease-in; }\r\n        60% {transform:translateY(0); animation-timing-function: ease-out; }\r\n        75% {transform:translateY(-4px); animation-timing-function: ease-in; }\r\n        90% {transform:translateY(0); animation-timing-function: ease-out; }\r\n        95% {transform:translateY(-2px); animation-timing-function: ease-in; }\r\n        100% {transform:translateY(0); animation-timing-function: ease-in; }\r\n    }\r\n} @else {\r\n    @keyframes jump {\r\n        0% {transform:translateY(0) scale(1); animation-timing-function: ease-out; }\r\n        30% {transform:translateY(-8px) scale(1.1); animation-timing-function: ease-in; }\r\n        60% {transform:translateY(0) scale(1.2); animation-timing-function: ease-out; }\r\n        75% {transform:translateY(-4px) scale(1.2); animation-timing-function: ease-in; }\r\n        90% {transform:translateY(0) scale(1.2); animation-timing-function: ease-out; }\r\n        95% {transform:translateY(-2px) scale(1.2); animation-timing-function: ease-in; }\r\n        100% {transform:translateY(0) scale(1.2); animation-timing-function: ease-in; }\r\n    }\r\n}\r\n\r\n\r\n.wqe-Form .wqe-Select {\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    margin: 0;\r\n    width: auto;\r\n    & > .wqe--input {\r\n        -webkit-appearance: none;\r\n        -moz-appearance: none;\r\n        appearance: none;\r\n        display: block;\r\n        box-sizing: border-box;\r\n        font-size: $font-size;\r\n        color: $base-color;\r\n        line-height: $line-height;\r\n        padding: cpd(1) cpd(1) + (1.25 * $font-size) cpd(1) cpd(1);\r\n        border: 1px solid $border-color;\r\n        border-radius: $box-radius;\r\n        margin: 0;\r\n        outline: none;\r\n        height: auto;\r\n        background: $base-bgcolor;\r\n        transition: box-shadow 0.1s linear, border-color 0.1s linear;\r\n        &:hover {\r\n            @media screen and (min-width:$break-width + 1) {\r\n                box-shadow: 0 0 0 $outline-width rgba($primary-color, $hover-alpha);\r\n                z-index: 2;\r\n            }\r\n        }\r\n        &:focus {\r\n            box-shadow: 0 0 0 $outline-width rgba($primary-color, $focus-alpha);\r\n            border: 1px solid $border-color;\r\n            outline: none;\r\n            @if $animate-on-focus {\r\n                animation: explosion 0.6s;\r\n            }\r\n            z-index: 2;\r\n        }\r\n        &.wqe-is-invalid:not(:focus) {\r\n            border-color: $negative-color;\r\n        }\r\n    }\r\n    & > .wqe--input::-ms-expand {\r\n        display: none;\r\n    }\r\n    &::after {\r\n        display: block;\r\n        position: absolute;\r\n        right: 4px;\r\n        top: cpd(1);\r\n        content: \"\\f140\";\r\n        font-family: \"dashicons\";\r\n        font-size: $font-size;\r\n        pointer-events: none;\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Echo {\r\n    display: block;\r\n    box-sizing: border-box;\r\n    line-height: $line-height;\r\n    padding: cpd(0) 0;\r\n}\r\n\r\n.wqe-Form .wqe-Button {\r\n    @extend %Buttonlike;\r\n    &.wqe-type-primary {\r\n        background: $primary-button-bgcolor;\r\n        color: $base-bgcolor;\r\n        padding-left: 23px;\r\n        padding-right: 23px;\r\n        min-width: 180px;\r\n        &:hover {\r\n            @media screen and (min-width:$break-width + 1) {\r\n                background: $hover-primary-button-bgcolor;\r\n            }\r\n        }\r\n        &:focus {\r\n            background: $primary-button-bgcolor;\r\n        }\r\n        &:active {\r\n            background: $hover-primary-button-bgcolor;\r\n        }\r\n    }\r\n    &.wqe-for-back::before {\r\n        display: inline-block;\r\n        font-family:\"dashicons\";\r\n        vertical-align: top;\r\n        margin-right: $narrow-padding;\r\n        content: \"\\f341\";\r\n    }\r\n    &.wqe-belongs-monitor {\r\n        padding-left: 0;\r\n        padding-right: 0;\r\n        width: $control-height;\r\n    }\r\n    &.wqe-belongs-monmenu {\r\n        padding-left: 0;\r\n        padding-right: 0;\r\n        width: $control-height;\r\n        border-color: transparent;\r\n        background-color: transparent;\r\n    }\r\n    &.wqe-belongs-product.wqe-for-decr {\r\n        display: none;\r\n    }\r\n    &.wqe-belongs-product.wqe-for-incr {\r\n        position: absolute;\r\n        left: $narrow-padding;\r\n        top: $narrow-padding;\r\n        width: $picture-width;\r\n        height: $picture-height;\r\n        opacity: 0;\r\n        z-index:3;\r\n    }\r\n    &.wqe-belongs-navbar.wqe-for-showmonitor {\r\n        position: absolute;\r\n        left: 0;\r\n        top: ($navbar-height - $fab-size) / 2;\r\n        box-sizing: border-box;\r\n        padding: 0;\r\n        max-width: none;\r\n        width: $fab-size;\r\n        height: $fab-size;\r\n        z-index: 110;\r\n        box-shadow: $shadow2;\r\n        border-radius: 200px;\r\n        text-align: center;\r\n        background-color: $primary-button-bgcolor;\r\n        color: $base-bgcolor;\r\n        //border-color: transparent;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow:hidden;\r\n        &:hover {\r\n            @media screen and (min-width:$break-width + 1) {\r\n                background: $hover-primary-button-bgcolor;\r\n            }\r\n        }\r\n        &:focus {\r\n            background: $primary-button-bgcolor;\r\n        }\r\n        &:active {\r\n            background: $hover-primary-button-bgcolor;\r\n        }\r\n        &::before {\r\n            content: \"\\f174\";\r\n            font-family: dashicons;\r\n            display: block;\r\n            line-height: 1;\r\n            font-weight: 400;\r\n            font-style: normal;\r\n            speak: none;\r\n            text-decoration: inherit;\r\n            text-transform: none;\r\n            text-rendering: auto;\r\n            -webkit-font-smoothing: antialiased;\r\n            -moz-osx-font-smoothing: grayscale;\r\n            width: 28px;\r\n            height: 28px;\r\n            font-size: 28px;\r\n            vertical-align: top;\r\n            text-align: center;\r\n            transition: color .1s ease-in;\r\n            pointer-events: none;\r\n        }\r\n        & > span {\r\n            position: relative;\r\n            font-size: 10px;\r\n            pointer-events: none;\r\n            height: 16px;\r\n            line-height: 16px;\r\n            & > span {\r\n                display: block;\r\n                &.wqe-is-run {\r\n                    transition: transform 0.2s ease-in-out;\r\n                    transition-delay: 0.05s;\r\n                }\r\n                &.wqe-is-run.wqe-for-removed {\r\n                    top: 0;\r\n                    position: absolute;\r\n                }\r\n                &.wqe-is-created {\r\n                    transform: translateY(-8em);\r\n                    opacity: 1;\r\n                }\r\n                &.wqe-is-removed {\r\n                    top: 0;\r\n                    position: absolute;\r\n                    transform: translateY(8em);\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n@media screen and (max-width:$break-width) {\r\n    .wqe-Form .wqe-Button.wqe-type-primary {\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-HNavigator {\r\n    padding-top: 80px;\r\n    position: relative;\r\n    & > .wqe--items {\r\n        & > *:not(:last-child) {\r\n            margin-bottom: 20px;\r\n        }\r\n    }\r\n}\r\n\r\n.wqe-Form .wqe-Attributes {\r\n    & > *:not(:last-child) {\r\n        @if $table-layout == false {\r\n            margin-bottom: 32px;\r\n        }\r\n    }\r\n}\r\n\r\n.wqe-Form {\r\n    //background-color: $base-bgcolor;\r\n    color: $base-color;\r\n    padding: $form-padding;\r\n    position: relative;\r\n    font-family: sans-serif;\r\n    max-width: 600px;\r\n    & > .wqe--lead {\r\n        & > .wqe--leadText {\r\n            margin: 0;\r\n            font-size: $font-size;\r\n            line-height: $line-height;\r\n        }\r\n    }\r\n    & > *:not(:last-child) {\r\n        margin-bottom: 32px;\r\n    }\r\n}"]}