{"version":3,"file":"form.css","mappings":"AAAA,MAEI,mBACA,8BACA,iBACA,kBAGA,iBAEA,kBACA,iBACA,mBAGA,mBACA,2BAGA,6BACA,6BACA,iCACA,mBACA,iBACA,qBACA,gBACA,eACA,yBAGA,kCACA,qCACA,qBACA,wBAGA,gBACA,iBACA,8BACA,mBACA,qBACA,eACA,uBACA,2CACA,+BACA,oCACA,gCAGA,iBACA,2BACA,wBACA,iBAEA,2BACA,sBACA,0BACA,4BACA,sBACA,0BACA,2BACA,gCACA,2BACA,8BACA,+BACA,kCACA,wCACA,0CACA,0CACA,+BACA,0BACA,6BACA,oBACA,wBAIA,iBACA,6BACA,kBACA,sBACA,yBACA,yBACA,mBACA,mBAGA,uBACA,kBACA,kBCzFJ,EACI,sBAEJ,QACI,qBAGJ,UACI,cACA,eACA,uBACA,kBAGJ,UACI,eACA,aAGJ,WACI,cACA,uBACA,8BACA,qBACA,+BACA,sBACA,6BACA,UACA,eACA,iBACI,mCAEJ,iBACI,kCAIJ,oBACI,6BACA,yBACA,0BACI,mCAEJ,0BACI,kCAOZ,eACI,aACA,mBACA,yBACA,gBCvDJ,QACI,kBACA,sBACI,yBACA,yBACA,mCACA,iCAIR,YACI,kBACA,iBACI,iBAGR,qBACI,KACI,uBAEJ,GACI,0BCnBR,YACI,qBACA,eACA,sBACI,oBACA,mBACA,iBACA,kBACA,gCACI,cACA,cACA,iBAEJ,8BACI,yBACA,iBAGR,wBACI,aACA,sBACA,uBACA,mBACA,sBACA,kBACA,UA3BD,CA4BC,WA5BD,CA6BC,kBACA,kBACA,8BACI,gCAGJ,gCACI,cACA,eAIJ,kCACI,WACA,+BAGA,2DACI,gCAKR,6BACI,WACA,+BAGA,mDACI,mCAGR,+BACI,eACA,yCACI,eAEJ,uCACI,WACA,sBACA,SAKZ,sBACI,eACA,gCACI,wBACA,kBAEJ,8BACI,mCAIR,kBACI,UACA,0BACI,sCAEJ,4BACI,2BCxFZ,SACI,oBACA,mBAEA,mBACI,cACA,gBACA,cACA,eACA,kBAEJ,uBACI,cACA,kBACA,kBACA,qBACA,sBACA,sBACA,kBACA,UAtBD,CAuBC,WAvBD,CAwBC,eACA,6BACI,WACA,kBACA,kBACA,qBACA,+BACA,QACA,SACA,SACA,QACA,gCACA,oDAEJ,6BAEI,gCAIJ,gCACI,WACA,sCACI,WACA,YAIJ,mDAEI,gCAMR,yBACI,eACA,wBACA,kBAEJ,iCAEI,mCAIJ,yBACI,eAIR,eACI,UACA,6BAGI,wCACA,sCAKZ,iBACI,cACA,mBACA,uBACI,cACA,kBAEJ,0BACI,oBACA,kBAEJ,4BACI,UACA,sBACA,sBACA,eAYA,qBACA,gBAZA,0CACI,+BACA,WACA,gDACI,kCAEJ,gDAEI,+BAKR,0CACI,0BAEJ,yCACI,uBACA,0BAEJ,kCACI,kCAEJ,kCAEI,gCJhIZ,MAEI,mBACA,8BACA,iBACA,kBAGA,iBAEA,kBACA,iBACA,mBAGA,mBACA,2BAGA,6BACA,6BACA,iCACA,mBACA,iBACA,qBACA,gBACA,eACA,yBAGA,kCACA,qCACA,qBACA,wBAGA,gBACA,iBACA,8BACA,mBACA,qBACA,eACA,uBACA,2CACA,+BACA,oCACA,gCAGA,iBACA,2BACA,wBACA,iBAEA,2BACA,sBACA,0BACA,4BACA,sBACA,0BACA,2BACA,gCACA,2BACA,8BACA,+BACA,kCACA,wCACA,0CACA,0CACA,+BACA,0BACA,6BACA,oBACA,wBAIA,iBACA,6BACA,kBACA,sBACA,yBACA,yBACA,mBACA,mBAGA,uBACA,kBACA,kBKvFJ,SACI,cACA,kBACA,uBACI,aACA,mBAeA,gBACA,gCACA,kBAhBA,6BACI,OAEJ,+BACI,cACA,YACA,aACA,uBACA,mBACA,aACA,2CACI,eAQR,6BACI,aACA,mBACA,mCACI,OAEJ,qCACI,cACA,YACA,aACA,uBACA,mBACA,aACA,iDACI,eAMZ,6BACI,kCAGR,mBACI,oBACA,iCACI,kBAEJ,yBACI,gBACA,sCACI,sBAIZ,eACI,cACA,kBAGJ,eACI,SACA,gBACA,aACA,eACA,WACA,UACA,4BACI,6BC5EZ,UACI,cCDJ,iBAEI,cAGI,sFACI,eACA,sXACI,6BAIZ,uBACI,uBACA,gCACA,gBACA,SACA,UAEA,aACA,mCACI,mCAEJ,6BACI,6BACA,oCACA,2BACA,eACA,SACA,UACA,yMACI,sCAEJ,yCACI,UACA,oDAEJ,yDACI,0CACA,qEACI,iDAGR,2DACI,2CACA,oCACA,uEACI,iDAGR,mDACI,gCAEJ,iDACI,8CACA,oCACA,kBACA,mBACA,oBAEJ,yCACI,0BACA,mCACA,iCACA,2CACA,oBAEJ,yCACI,eACA,iCACA,iBACA,iBACA,oBACA,uDACI,WACA,cACA,gDACA,mBAGR,6CACI,UACA,oCACA,iDAEJ,+CACI,cACA,2CACA,2DACI,UAShB,qCACI,iBACA,mDACI,SACA,kBACA,gBACA,eACA,WACA,YACA,gBACA,eACA,eACA,WACA,yBACA,+EACI,oBAMJ,yFACI,UAGR,6EACI,eACA,oBACA,yFACI,wCAOA,yFACI,UAGR,6EACI,eACA,oBACA,yFACI,wCC9IpB,SACI,cACA,oBACA,UACA,8BACA,sBACA,kBACA,WACA,mBACI,MACA,OACA,WACA,YACA,sBACA,aACA,sBACA,6BACI,cACA,cACA,aACA,iCAEJ,kCACI,aACA,cAEJ,kCACI,OACA,cAEJ,8BACI,SAGR,cACI,oBACA,UCpCR,YACI,cACA,wBACI,oCACA,4BACA,eACA,WACA,gBACA,gCACI,qBACA,sBACA,WAEJ,6BACI,sBACA,qBACA,gBACA,mBACA,uBACA,wBAEJ,8BACI,wCAIJ,kCACI,oBACA,iCAGR,oBACI,iBAGA,kCACI,iCACA,eAKA,4CACI,WAMhB,kBACI,uBACA,qBACI,SHpDR,UACI,0BICA,kBACA,+BACA,qBACA,6BACA,uBACA,8BACA,iCACA,gCAEA,2BACI,kBACA,iCACA,MACA,SAEA,oCACA,6BACA,gBACA,kCACI,YACA,kBACA,QACA,SACA,wBACA,4BACA,6BACA,sBACA,kCAIJ,sCACI,SAIJ,uCACI,SAIJ,6BACI,aAIJ,6BACI,SACA,SACA,SACA,gCACA,qCACI,SAKR,6BACI,qCACA,4BACA,OACA,QACA,iCACA,qCACI,QACA,UACA,WAKR,6BACI,qCACA,4BACA,UACA,QACA,QACA,gCACA,qCACI,QACA,UAkBZ,0BACI,eACA,SAGA,qBACI,QACA,gCACA,gEAEJ,4BACI,6BACA,SAIJ,qBACI,WACA,SACA,MACA,iCACA,gEAIR,kBACI,qCACA,2BACA,sCACA,yBACI,sEAGA,2BACI,sEAIJ,2BACI,sEAIJ,2BACI,sEChJhB,aACI,aACA,mBACA,mBACA,eACA,sDAEI,eAEJ,yBACI,iBAEJ,yBACI,YACA,iBACA,+CACI,iBAGR,2BACI,aACA,mBACA,wCACI,eACA,iDACI,gCACA,WACA,kBAIZ,+BACI,aAEJ,wBACI,UACA,eACA,sBACA,WACA,YACA,aACA,uBACA,mBAIJ,6EAEI,sBACA,eACA,yFACI,6BAIR,gEAEI,6BACA,4EACI,kCAKJ,6HAGI,aAKJ,kFAEI,aAIR,2BACI,aAOJ,uBACI,WACA,wCACI,oBCzFZ,MACI,kBACA,gBACA,eACA,mBACA,mBACA,uBACA,uBACA,oBACA,oBACA,qBACA,sBACA,kBACA,qBACA,wBACA,qBACA,qBACA,4BACA,wBACA,uBACA,iBACA,gBACA,mBACA,mBASJ,YAII,qBACA,eACA,WALA,cACI,sBAKJ,sBACI,gCACA,6BACA,oBACA,sBACA,kBACA,+BACA,kCACI,cAEJ,qCACI,OAWJ,kCACI,cAGR,qBAEI,YACA,+BACI,aACA,YAGR,wBACI,kBACA,cACA,aACA,mBACA,mBAGA,gCACI,qBACA,kBACA,uCACA,qBACA,sBACA,cAGR,2BACI,WAGJ,uBACI,OACA,aACA,mBACA,mBACA,uBACA,kBACA,uCACI,kBACA,YACA,SACA,sBACA,6GAEI,eACA,kBACA,MACA,OACA,WACA,gBACA,UAEI,qIACI,oCAIJ,qIACI,kCAIZ,6CACI,6BACA,mDACI,kCAKhB,6CAEI,qBACA,kBACA,mBACA,iBACA,cACA,gBACA,iCACA,kBACA,QAEJ,iBACI,SACA,6BACA,qBACA,eACA,kBACA,cACA,WA5HQ,CA6HR,UAEA,uBACI,oCAEJ,uBACI,kCAIJ,0EAEI,UACA,oBAIJ,4EAEI,UACA,oBAIJ,0EAEI,UACA,oBAGR,sBACI,eACA,YACA,0BAEI,qBACA,sBACA,cACA,eACA,kBACA,cACA,6BACA,kCACA,+BACI,WACA,YACA,qBACA,6BACA,iCAEJ,8BACI,yBAEJ,2DAEI,eACA,iCACA,uEACI,gCAGR,gCACI,sBACA,sBACA,kCAEJ,mCACI,gCACA,yBACA,kFAGI,sBACA,sBAMR,gCACI,UAEI,oDACI,kCAIZ,mCACI,kCACA,gBAEJ,yCACI,yCACA,WACA,wDAEJ,0CACI,yCACA,WACA,wDAEJ,mCACI,iCACA,0BACA,eACA,kBACA,yCACI,kCACA,2BAEJ,4CACI,qCACA,0BACA,kDACI,qCACA,0BAMpB,wBACI,kBACA,YACA,WAxPQ,CAyPR,sCACI,6BACA,SACA,eACA,sBACA,qBACA,wFAEI,0BAKR,8BACI,SAEJ,gCACI,aAGR,6BACI,WACA,kBACA,cAMA,mCACI,qBACA,eACA,WACA,yCACI,qBAGR,oCACI,qBACA,gBAKZ,sEAKI,qBACA,kBAEA,+FACI,eACA,uBACA,cACA,kBAEJ,0KACI,kBACA,wMACI,wBAGR,oGACI,YACA,eAEA,gCACA,+DACA,qKACI,6BAEJ,kNACI,6BAIJ,sJACI,sBAEJ,yLACI,WACA,oBAKA,4SACI,oBACA,sBAKR,mWAEI,8BACA,+BAIJ,uNACI,iCACA,oCAIR,kSAEI,aACA,kBACA,SACA,OACA,UACA,oaACI,SACA,YAEJ,0ZACI,UACA,QAEJ,oVACI,qBAGR,gKACI,YACA,4NACI,kBACA,SACA,UAMR,iBACI,WACA,gCACA,YACA,kBACA,eAIR,kBACI,6BACA,aACA,8BACA,YACA,+BACA,8BACI,SAGA,mCACI,qBAKZ,kBACI,aACA,iBACA,mBAEI,yCACI,iBAEJ,wCACI,gBAKZ,iBACI,YAGJ,sCAGI,YAKI,4BACI,wBAGR,2BACI,WAIR,aACI,qBACA,kBACA,WACA,QACA,2BACA,SACA,cACA,eACA,6BACA,qBACI,cACA,eAEJ,mBACI,kCAGR,mBACI,WAGJ,aACI,eACA,uBAGJ,qBACI,WAheI,CAmeR,2BACI,gCACA,6BACA,YAEI,iDACI,aClgBZ,UACI,aACA,eACI,qBAEJ,kBACI,gBACA,8BCPR,gBACI,qBAEI,iCACI,6BACA,SACA,kBACA,aACA,sBACA,uBACA,mBAMR,mDACI,sBACA,2BACA,yDACI,sCCpBZ,YACI,kBACA,cACA,2BACA,gCACA,kBACA,gCACI,kBACA,gDACI,kBACA,WACA,gBACA,sBACA,gBACA,SACA,2BACA,yDACI,kBACA,SACA,qBACA,sBAIR,wCACI,kBACA,QACA,WACA,6BAIR,oBACI,kBACA,qBACA,iBACA,eACA,mBACA,mBACA,kCACA,mBACA,4BACI,kBACA,QACA,UACA,6BACA,eAKZ,yBACI,kBACA,SACA,WACA,YACA,oCACI,WACA,YACA,0BACA,yBACA,SC7DR,WACI,aACA,kBACA,WACA,qBACI,aACA,sBACA,cACA,wBACI,SAIR,wCACI,sBACA,WACA,oBAGJ,gBACI,cAIA,uCACI,WCzBZ,aACI,cACA,kBAEI,4BACI,aACA,kBAIJ,6BACI,aAEJ,iCACI,iBACA,cAII,sDACI,gCAEJ,gDACI,aAEJ,4CACI,QAEJ,8CACI,gBAQR,sCACI,cjBtChB,MAEI,mBACA,8BACA,iBACA,kBAGA,iBAEA,kBACA,iBACA,mBAGA,mBACA,2BAGA,6BACA,6BACA,iCACA,mBACA,iBACA,qBACA,gBACA,eACA,yBAGA,kCACA,qCACA,qBACA,wBAGA,gBACA,iBACA,8BACA,mBACA,qBACA,eACA,uBACA,2CACA,+BACA,oCACA,gCAGA,iBACA,2BACA,wBACA,iBAEA,2BACA,sBACA,0BACA,4BACA,sBACA,0BACA,2BACA,gCACA,2BACA,8BACA,+BACA,kCACA,wCACA,0CACA,0CACA,+BACA,0BACA,6BACA,oBACA,wBAIA,iBACA,6BACA,kBACA,sBACA,yBACA,yBACA,mBACA,mBAGA,uBACA,kBACA,kBkBxFJ,gBACI,cACA,sBACA,uBACA,8BACA,YACA,aACA,4BACI,YAEJ,qCACI,aACA,mBACA,8BACA,mBACA,0CACI,eACA,6BACA,SACA,kDACI,qBACA,eAEJ,gDACI,mCAEJ,mDACI,eACA,yDACI,6BAEJ,2DACI,sBAKhB,sBACI,aACA,mBACA,eACA,gCACI,eACA,YACA,6BACA,SACA,0CACI,eAEJ,qFACI,mCAEJ,yCACI,gC","sources":["webpack://form/./src/styles/colors.scss","webpack://form/./src/styles/base.scss","webpack://form/./src/styles/icon.scss","webpack://form/./src/styles/checkbox.scss","webpack://form/./src/styles/radio.scss","webpack://form/./src/styles/input.scss","webpack://form/./src/styles/search.scss","webpack://form/./src/styles/list.scss","webpack://form/./src/styles/popup.scss","webpack://form/./src/styles/dropdown.scss","webpack://form/./src/styles/tooltip.scss","webpack://form/./src/styles/paginator.scss","webpack://form/./src/styles/date-picker.scss","webpack://form/./src/styles/drawer.scss","webpack://form/./src/styles/actionbutton.scss","webpack://form/./src/styles/minitags.scss","webpack://form/./src/styles/minipop.scss","webpack://form/./src/styles/checklist.scss","webpack://form/./src/styles/month-picker.scss"],"sourcesContent":[":root {\n    // colors\n    --primary: #2275ec;\n    --primary-very-light: #edf2fa;\n    --disabled: #ddd;\n    --focus-brd: blue;\n    //\n    // error\n    --error-txt: red;\n    //\n    --label-txt: #666;\n    --label-bk: #eee;\n    --label-dsbl: #ddd;\n    //\n    // inputs\n    --inp-brd: #d8d8d8;\n    --inp-placeholder: #6b7682;\n    //\n    // buttons\n    --btn-brd: 1px solid #d8d8d8;\n    --btn-bg: rgb(204, 246, 255);\n    --btn-bg-hvr: rgb(232, 251, 255);\n    --btn-sel: #5dbae0;\n    --btn-txt: black;\n    --btn-txt-size: 14px;\n    --btn-pad: 10px;\n    --btn-rad: 2px;\n    --btn-brd-focus: #6c9fd8;\n    //\n    // dropdown\n    --drop-btn-pad: 5px 10px 8px 10px;\n    --drop-btn-pad-thin: 1px 4px 3px 4px;\n    --drop-btn-bg: white;\n    --drop-btn-bg-hvr: #ddd;\n    //\n    // tooltip\n    --tip-bg: white;\n    --tip-txt: black;\n    --tip-brd: rgb(255, 255, 255);\n    --tip-brd-rad: 3px;\n    --tip-txt-size: 13px;\n    --tip-pad: 6px;\n    --tip-arrow-size: 16px;\n    --tip-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n    --tip-bg-error: rgb(226, 0, 0);\n    --tip-txt-error: rgb(255, 255, 255);\n    --tip-brd-error: rgb(226, 0, 0);\n    //\n    // list\n    --list-bg: white;\n    --list-brd: 1px solid #ccc;\n    --list-brd-focus: black;\n    --list-rad: 10px;\n    //\n    --list-item-txt-size: 14px;\n    --list-item-txt: #333;\n    --list-item-pad: 5px 10px;\n    --list-item-bg: transparent;\n    --list-item-hvr: #eee;\n    --list-item-current: #eee;\n    --list-item-selected: #333;\n    --list-item-selected-txt: white;\n    --list-item-focus: #6c9fd8;\n    --list-item-bg-disabled: #ccc;\n    --list-item-txt-disabled: #666;\n    --list-item-label-bg: transparent;\n    --list-item-label-pad: 10px 5px 5px 5px;\n    --list-item-label-txt: rgb(176, 176, 176);\n    --list-item-group-txt: rgb(176, 176, 176);\n    --list-item-group-brd: #e0e0e0;\n    --list-item-divider: #ccc;\n    --list-item-divider-pad: 5px;\n    --list-button: #333;\n    --list-button-hvr: #ddd;\n\n    //\n    // checkbox\n    --chk-size: 16px;\n    --chk-brd: 1px solid #b6b9bb;\n    --chk-bg: #3597d2;\n    --chk-bg-hvr: #77c2f0;\n    --chk-focus-brd: #417890;\n    --chk-focus-txt: #4a698d;\n    --chk-hvr: #f2f2f2;\n    --chk-all: #d5dee2;\n\n    // minitags\n    --minitag-width: 300px;\n    --tag-color: #eee;\n    --tag-radius: 4px;\n}\n","* {\n    box-sizing: border-box;\n}\nui-icon {\n    display: inline-block;\n}\n\n.ui-label {\n    display: block;\n    font-size: 16px;\n    color: var(--label-txt);\n    margin-bottom: 5px;\n}\n\n.ui-input{\n    font-size: 16px;\n    padding: 10px;\n}\n\n.ui-button {\n    display: block;\n    padding: var(--btn-pad);\n    font-size: var(--btn-txt-size);\n    color: var(--btn-txt);\n    background-color: var(--btn-bg);\n    border: var(--btn-brd);\n    border-radius: var(--btn-rad);\n    outline: 0;\n    cursor: pointer;\n    &:hover {\n        background-color: var(--btn-bg-hvr);\n    }\n    &:focus {\n        border-color: var(--btn-brd-focus);\n    }\n    &.secondary {\n    }\n    &.tertiary {\n        background-color: transparent;\n        border-color: transparent;\n        &:hover {\n            background-color: var(--btn-bg-hvr);\n        }\n        &:focus {\n            border-color: var(--btn-brd-focus);\n        }\n    }\n    &.link {\n    }\n}\n\n.ui-button-row {\n    display: flex;\n    flex-direction: row;\n    justify-content: flex-end;\n    margin-top: 20px;\n}\n","ui-icon {\n    position: relative;\n    &[type=\"spinner\"]{\n        animation-name: busy-spin;\n        animation-duration: 800ms;\n        animation-iteration-count: infinite;\n        animation-timing-function: linear;\n    }\n}\n\n.ui-loading{\n    padding: 10px 20px;\n    span{\n        margin-left: 10px;\n    }\n}\n@keyframes busy-spin {\n    from {\n        transform:rotate(0deg);\n    }\n    to {\n        transform:rotate(360deg);\n    }\n}","$size: 16px;\n\nui-checkbox {\n    display: inline-block;\n    cursor: pointer;\n    &.has-label {\n        display: inline-flex;\n        flex-direction: row;\n        flex-wrap: nowrap;\n        margin-right: 10px;\n        .ui-label {\n            flex: 1 1 auto;\n            display: block;\n            margin-right: 5px;\n        }\n        ui-icon {\n            flex: 0 0 var(--chk-size);\n            margin-right: 5px;\n        }\n    }\n    ui-icon.fas {\n        display: flex;\n        background-color: white;\n        justify-content: center;\n        align-items: center;\n        border: var(--chk-brd);\n        border-radius: 2px;\n        width: $size;\n        height: $size;\n        color: transparent;\n        text-align: center;\n        &:hover {\n            background-color: var(--chk-hvr);\n        }\n\n        &::before {\n            color: inherit;\n            font-size: 11px;\n        }\n    }\n    &[intermediate] {\n        ui-icon {\n            color: white;\n            background-color: var(--chk-bg);\n        }\n        &:not([readonly]):hover {\n            icon-check {\n                background-color: var(--chk-hvr);\n            }\n        }\n    }\n    &[checked] {\n        ui-icon {\n            color: white;\n            background-color: var(--chk-bg);\n        }\n        &:not([readonly]):hover {\n            ui-icon {\n                background-color: var(--chk-bg-hvr);\n            }\n        }\n        &[readonly] {\n            cursor: default;\n            .ui-label {\n                cursor: default;\n            }\n            ui-icon {\n                color: black;\n                background-color: white;\n                border: 0;\n            }\n        }\n    }\n\n    &[disabled] {\n        cursor: default;\n        .ui-label {\n            color: var(--label-dsbl);\n            font-style: italic;\n        }\n        ui-icon {\n            background-color: var(--label-dsbl);\n        }\n    }\n\n    &:focus {\n        outline: 0;\n        ui-icon {\n            border: 1px solid var(--chk-focus-brd);\n        }\n        .ui-label {\n            color: var(--chk-focus-txt);\n        }\n    }\n}\n","$size: 16px;\n$brd: #ccc;\n\nui-radio{\n    display: inline-flex;\n    flex-direction: row;\n    \n    .ui-label{\n        flex: 1 1 auto;\n        margin-left: 5px;\n        display: block;\n        cursor: pointer;\n        align-self: center;\n    }\n    .radio-button{\n        flex: 0 0 $size;\n        align-self: center;\n        position: relative;\n        display: inline-block;\n        vertical-align: middle;\n        border: var(--chk-brd);\n        border-radius: 50%;\n        width: $size;\n        height: $size;\n        cursor: pointer;\n        &:after{\n            content: '';\n            position: absolute;\n            border-radius: 50%;\n            display: inline-block;\n            background-color: var(--chk-bg);\n            width: 0;\n            height: 0;\n            left: 50%;\n            top: 50%;\n            transform: translate(-50%, -50%);\n            transition: width 100ms ease-in, height 100ms ease-in;\n        }\n        &:hover{\n            // background-color: $hvr;\n            background-color: var(--chk-hvr);\n        }\n    }\n    &[checked]{\n        .radio-button{\n            color: black;\n            &:after{\n                width: $size - 4px;\n                height: $size - 4px;\n            }\n        }\n        &:not([readonly]):hover{\n            icon-check{\n                // background-color: $hvr;\n                background-color: var(--chk-hvr);\n            }\n        }\n    }\n\n    &[disabled]{\n        label{\n            cursor: default;\n            color: var(--label-dsbl);\n            font-style: italic;\n        }\n        .radio-button{\n            // background-color: $btn-dsbl;\n            background-color: var(--label-dsbl);\n        }\n    }\n    &[readonly]{\n        label{\n            cursor: default;\n        }\n    }\n\n    &:focus{\n        outline: 0;\n        .radio-button{\n            // border: 1px solid $focus-dk;\n            // color: var(--chk-focus-txt);\n            box-shadow: 0 0 5px var(--chk-focus-txt);\n            border: 1px solid var(--chk-focus-brd);\n        }\n    }\n}\n\nui-radio-buttons{\n    display: block;\n    margin-bottom: 20px;\n    & > label{\n        display: block;\n        margin-bottom: 5px;\n    }\n    ui-radio{\n        display: inline-flex;\n        margin-right: 10px;\n    }\n    button.btn{\n        outline: 0;\n        border: var(--btn-brd);\n        background-color: white;\n        cursor: pointer;\n        &[checked=\"true\"] {\n            background-color: var(--chk-bg);\n            color: white;\n            &:focus{\n                box-shadow: inset 0 0 10px rgb(180, 216, 250);\n            }\n            &:hover{\n                // background-color: $slt;\n                background-color: var(--chk-bg);\n            }\n        }\n        border-right-width: 0;\n        border-radius: 0;\n        &:first-of-type{\n            border-radius: 4px 0 0 4px;\n        }\n        &:last-of-type{\n            border-right-width: 1px;\n            border-radius: 0 4px 4px 0;\n        }\n        &:focus{\n            box-shadow: inset 0 0 10px rgba(130,190,250,1) ;\n        }\n        &:hover{\n            // background-color: $hvr;\n            background-color: var(--chk-hvr);\n        }\n    }\n\n}","@import './colors.scss';\n\nui-input {\n    display: block;\n    position: relative;\n    .input-border {\n        display: flex;\n        align-items: center;\n        input {\n            flex: 1;\n        }\n        ui-icon {\n            flex: 0 1 32px;\n            height: 32px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin: 0 5px;\n            &[type='close'] {\n                cursor: pointer;\n            }\n        }\n        background: white;\n        border: 1px solid var(--inp-brd);\n        border-radius: 2px;\n    }\n    &[no-border] {\n        &.has-icon {\n            display: flex;\n            align-items: center;\n            input {\n                flex: 1;\n            }\n            ui-icon {\n                flex: 0 1 32px;\n                height: 32px;\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                margin: 0 5px;\n                &[type='close'] {\n                    cursor: pointer;\n                }\n            }\n        }\n    }\n    &.focus {\n        .input-border {\n            border: 1px solid var(--focus-brd);\n        }\n    }\n    &[readonly] {\n        pointer-events: none;\n        .input-border {\n            border-color: #eee;\n        }\n        input {\n            font-weight: 300;\n            &::placeholder {\n                color: var(--disabled);\n            }\n        }\n    }\n    label {\n        display: block;\n        margin-bottom: 5px;\n    }\n\n    input {\n        border: 0;\n        background: none;\n        padding: 10px;\n        font-size: 16px;\n        width: 100%;\n        outline: 0;\n        &::placeholder {\n            color: var(--inp-placeholder);\n        }\n    }\n}\n","ui-search{\n    display: block;\n    &.focus{\n        \n    }\n}","ui-list,\n.ui-list {\n    display: block;\n    &[readonly],\n    &[disabled] {\n        li {\n            cursor: default;\n            &:hover:not(.group):not(.label):not([readonly]):not([aria-selected='true']) {\n                background-color: transparent;\n            }\n        }\n    }\n    ul {\n        border: var(--list-brd);\n        background-color: var(--list-bg);\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        // min-height: 21px;\n        outline: none;\n        &:focus {\n            border-color: var(--list-brd-focus);\n        }\n        li {\n            padding: var(--list-item-pad);\n            font-size: var(--list-item-txt-size);\n            color: var(--list-item-txt);\n            cursor: pointer;\n            border: 0;\n            outline: 0;\n            &:hover:not(.group):not(.label):not(.divider):not([readonly]):not([aria-selected='true']) {\n                background-color: var(--list-item-hvr);\n            }\n            &:focus {\n                outline: 0;\n                box-shadow: 0 0 2px 2px var(--list-item-focus) inset;\n            }\n            &[aria-current] {\n                background-color: var(--list-item-current);\n                &:focus {\n                    box-shadow: 0 0 10px var(--list-item-focus) inset;\n                }\n            }\n            &[aria-selected] {\n                background-color: var(--list-item-selected);\n                color: var(--list-item-selected-txt);\n                &:focus {\n                    box-shadow: 0 0 10px var(--list-item-focus) inset;\n                }\n            }\n            &.is-editing{\n                background-color: var(--list-bg);\n            }\n            &[disabled] {\n                background-color: var(--list-item-bg-disabled);\n                color: var(--list-item-txt-disabled);\n                font-style: italic;\n                cursor: not-allowed;\n                pointer-events: none;\n            }\n            &.label {\n                font: bold 12px sans-serif;\n                padding: var(--list-item-label-pad);\n                color: var(--list-item-label-txt);\n                background-color: var(--list-item-label-bg);\n                pointer-events: none;\n            }\n            &.group {\n                padding: 0 20px;\n                color: var(--list-item-group-txt);\n                text-align: right;\n                font-weight: bold;\n                pointer-events: none;\n                &:before {\n                    content: '';\n                    display: block;\n                    border-top: 1px solid var(--list-item-group-brd);\n                    margin-bottom: 10px;\n                }\n            }\n            &.divider {\n                padding: 0;\n                margin: var(--list-item-divider-pad);\n                border-bottom: 1px solid var(--list-item-divider);\n            }\n            ui-input{\n                margin: 0 -9px;\n                background-color: var(--primary-very-light);\n                input{\n                    outline: 0;\n                }\n            }\n        }\n    }\n\n    &[editable] {\n        //\n    }\n    .edit-bar {\n        text-align: right;\n        button {\n            border: 0;\n            border-radius: 50%;\n            background: none;\n            font-size: 12px;\n            width: 24px;\n            height: 24px;\n            margin-left: 2px;\n            margin-top: 2px;\n            cursor: pointer;\n            opacity: 0.2;\n            color: var(--list-button);\n            &.btn-list-edit{\n                pointer-events: none;\n            }\n        }\n    }\n    .edit-bar {\n        &:hover {\n            button.btn-list-add {\n                opacity: 1;\n            }\n        }\n        button.btn-list-add {\n            cursor: pointer;\n            pointer-events: auto;\n            &:hover {\n                background-color: var(--list-button-hvr);\n            }\n        }\n    }\n    &.has-selected {\n        .edit-bar {\n            &:hover {\n                button {\n                    opacity: 1;\n                }\n            }\n            button {\n                cursor: pointer;\n                pointer-events: auto;\n                &:hover {\n                    background-color: var(--list-button-hvr);\n                }\n            }\n        }\n    }\n}\n","ui-popup {\n    display: block;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 200ms ease;\n    box-sizing: border-box;\n    position: absolute;\n    z-index: 10;\n    &.is-mobile {\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: white;\n        display: flex;\n        flex-direction: column;\n        .ui-label {\n            display: block;\n            flex: 0 0 20px;\n            padding: 10px;\n            background-color: var(--label-bk);\n        }\n        .ui-button-row {\n            display: flex;\n            flex: 0 0 50px;\n        }\n        & > *:nth-child(2) {\n            flex: 1;\n            overflow: auto;\n        }\n        ui-list ul {\n            border: 0;\n        }\n    }\n    &.open {\n        pointer-events: auto;\n        opacity: 1;\n    }\n}\n","ui-dropdown {\n    display: block;\n    .drop-input {\n        background-color: var(--drop-btn-bg);\n        padding: var(--drop-btn-pad);\n        max-width: 100%;\n        width: 100%;\n        text-align: left;\n        & > ui-icon {\n            display: inline-block;\n            vertical-align: middle;\n            width: 10px;\n        }\n        & > span {\n            vertical-align: middle;\n            display: inline-block;\n            overflow: hidden;\n            white-space: nowrap;\n            text-overflow: ellipsis;\n            width: calc(100% - 20px);\n        }\n        &:hover {\n            background-color: var(--drop-btn-bg-hvr);\n        }\n    }\n    &[disabled]{\n        .drop-input {\n            pointer-events: none;\n            background-color: var(--disabled);\n        }\n    }\n    ui-icon {\n        margin-left: 10px;\n    }\n    &.thin {\n        button.ui-button {\n            padding: var(--drop-btn-pad-thin);\n            font-size: 12px;\n        }\n    }\n    &[no-arrow] {\n        button.ui-button {\n            & > span {\n                width: 100%;\n            }\n        }\n    }\n}\n\nui-popup.dropdown {\n    border: var(--list-brd);\n    ul {\n        border: 0;\n    }\n}\n","// this is a className, not a node name\n.ui-tooltip {\n    position: relative;\n    background-color: var(--tip-bg);\n    color: var(--tip-txt);\n    box-shadow: var(--tip-shadow);\n    padding: var(--tip-pad);\n    font-size: var(--tip-txt-size);\n    border-radius: var(--tip-brd-rad);\n    border: 1px solid var(--tip-brd);\n    // .B default\n    .tooltip-arrow {\n        position: absolute;\n        transform: translate(-50%, -100%);\n        top: 0;\n        left: 50%;\n        // border: 1px solid blue;\n        width: calc(var(--tip-arrow-size) * 2);\n        height: var(--tip-arrow-size);\n        overflow: hidden;\n        &:before {\n            content: ' ';\n            position: absolute;\n            top: 50%;\n            left: 25%;\n            transform: rotate(45deg);\n            width: var(--tip-arrow-size);\n            height: var(--tip-arrow-size);\n            background-color: white;\n            box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n        }\n    }\n    &.shift-left {\n        .tooltip-arrow {\n            left: 75%;\n        }\n    }\n    &.shift-right {\n        .tooltip-arrow {\n            left: 25%;\n        }\n    }\n    &.I {\n        .tooltip-arrow {\n            display: none;\n        }\n    }\n    &.T {\n        .tooltip-arrow {\n            top: auto;\n            bottom: 0;\n            left: 50%;\n            transform: translate(-50%, 100%);\n            &::before {\n                top: -50%;\n            }\n        }\n    }\n    &.R {\n        .tooltip-arrow {\n            height: calc(var(--tip-arrow-size) * 2);\n            width: var(--tip-arrow-size);\n            left: 0;\n            top: 50%;\n            transform: translate(-100%, -50%);\n            &::before {\n                top: 25%;\n                left: auto;\n                right: -50%;\n            }\n        }\n    }\n    &.L {\n        .tooltip-arrow {\n            height: calc(var(--tip-arrow-size) * 2);\n            width: var(--tip-arrow-size);\n            left: auto;\n            right: 0;\n            top: 50%;\n            transform: translate(100%, -50%);\n            &::before {\n                top: 25%;\n                left: -50%;\n            }\n        }\n    }\n    // &:before {\n    //     // R\n    //     content: ' ';\n    //     width: 0;\n    //     height: 0;\n    //     position: absolute;\n    //     top: 50%;\n    //     transform: translateY(-50%);\n    //     right: 100%;\n    //     border-width: var(--tip-arrow-size);\n    //     border-style: solid;\n    //     border-color: transparent var(--tip-brd) transparent transparent;\n    //     // box-shadow: 2px 2px 2px rgba(0,0,0,0.5);\n    // }\n    &.side50:before {\n        transform: none;\n        top: 50px;\n    }\n    &.L {\n        &:before {\n            right: 0;\n            transform: translate(100%, -50%);\n            border-color: transparent transparent transparent var(--tip-brd);\n        }\n        &.side50:before {\n            transform: translate(100%, 0);\n            top: 50px;\n        }\n    }\n    &.B {\n        &:before {\n            right: auto;\n            left: 50%;\n            top: 0;\n            transform: translate(-50%, -100%);\n            border-color: transparent transparent var(--tip-brd) transparent;\n        }\n    }\n\n    &.error {\n        background-color: var(--tip-bg-error);\n        color: var(--tip-txt-error);\n        border: 1px solid var(--tip-brd-error);\n        &:before {\n            border-color: transparent var(--tip-brd-error) transparent transparent;\n        }\n        &.L {\n            &:before {\n                border-color: transparent transparent transparent var(--tip-brd-error);\n            }\n        }\n        &.B {\n            &:before {\n                border-color: transparent transparent var(--tip-brd-error) transparent;\n            }\n        }\n        &.T {\n            &:before {\n                border-color: var(--tip-brd-error) transparent transparent transparent;\n            }\n        }\n    }\n}\n","ui-paginator {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    font-size: 14px;\n    .dropdown-label,\n    .rows-label {\n        font-size: 10px;\n    }\n    .rows-label {\n        margin-right: 5px;\n    }\n    ui-dropdown {\n        height: 29px;\n        margin-right: 5px;\n        button.ui-button > span{\n            overflow: visible;\n        }\n    }\n    .page-numbers {\n        display: flex;\n        flex-direction: row;\n        .page-number {\n            font-size: 26px;\n            &:disabled{\n                background-color: var(--primary);\n                color: white;\n                border-radius: 50%;\n            }\n        }\n    }\n    .page-number-dots{\n        margin: 0 3px;\n    }\n    .ui-button {\n        padding: 0;\n        font-size: 14px;\n        background-color: white;\n        width: 20px;\n        height: 20px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        \n    }\n\n    .ui-button.left:disabled,\n    .ui-button.right:disabled{\n        color: var(--disabled);\n        cursor: default;\n        &:hover{\n            background-color: transparent;\n        }\n    }\n\n    .ui-button,\n    .page-numbers .page-number {\n        border: 1px solid transparent;\n        &:focus{\n            border-color: var(--btn-brd-focus);\n        }\n    }\n\n    &.hide-buttons{\n        .ui-button.left,\n        .ui-button.right,\n        .page-numbers{\n            display: none;\n        }\n    }\n\n    &.hide-dropdown{\n        .dropdown-label,\n        ui-dropdown{\n            display: none;\n        }\n    }\n\n    .extra-status{\n        display: none;\n    }\n\n    // &.show-extra-status .extra-status{\n    //     display: inline-block;\n    // }\n\n    &[disabled]{\n        opacity: 0.4;\n        button.ui-button{\n            pointer-events: none;\n        }\n    }\n}\n",":root {\n    --cal-focus: blue;\n    --cal-brd: #ccc;\n    --cal-bg: #fff;\n    --cal-hov: #dadada;\n    --cal-sel: #5dbae0;\n    --cal-hdr-hvr: #d2f0ff;\n    --cal-hdr-nav: #0968d2;\n    --cal-link: #0968d2;\n    --cal-off-txt: #999;\n    --cal-today: #b1b1b1;\n    --cal-today-txt: #fff;\n    --cal-dsbl: white;\n    --cal-dsbl-txt: #999;\n    --cal-dsbl-sel: #9dc8da;\n    --cal-sel-txt: white;\n    --cal-range: #beecff;\n    --cal-range-select: #5dbae0;\n    --cal-warn-brd: #be4304;\n    --cal-warn-bk: #fffdd5;\n    --cal-error: red;\n    --cal-rad: 10px;\n    --cal-btn-rad: 4px;\n    --cal-day-rad: 3px;\n}\n$width: 350px;\n$height: 350px;\n$vpad: 20px;\n$hpad: 30px;\n$header-height: 30px;\n$footer-height: 30px;\n\ndate-picker {\n    * {\n        box-sizing: border-box;\n    }\n    display: inline-block;\n    font-size: 13px;\n    width: 100%;\n    .calendar {\n        border: 1px solid var(--cal-brd);\n        border-radius: var(--cal-rad);\n        display: inline-flex;\n        flex-direction: column;\n        padding: $vpad $hpad;\n        background-color: var(--cal-bg);\n        .cal-header {\n            flex: 0 0 $header-height;\n        }\n        .cal-container {\n            flex: 1;\n            .cal-body {\n                div {\n                    // height: ;\n                    // text-align: right;\n                    // span {\n                    //     padding-right: 5px;\n                    // }\n                }\n            }\n        }\n        .cal-footer {\n            flex: 0 0 $footer-height;\n        }\n    }\n    &.calendar {\n        // picker is in calendar mode\n        height: 100%;\n        .calendar {\n            display: flex;\n            height: 100%;\n        }\n    }\n    .cal-header {\n        position: relative;\n        overflow: auto;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n    }\n    .cal-day-labels {\n        div {\n            padding: 5px 0 10px 0;\n            text-align: center;\n            border-bottom: 1px solid var(--inp-brd);\n            display: inline-block;\n            box-sizing: border-box;\n            width: 14.285%;\n        }\n    }\n    .cal-container {\n        width: 100%;\n    }\n\n    .selectors {\n        flex: 1;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        margin-bottom: 3px;\n        .select-wrapper {\n            position: relative;\n            height: 20px;\n            top: -5px;\n            box-sizing: border-box;\n            .year-selector,\n            .month-selector {\n                cursor: pointer;\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                padding: 4px 5px;\n                opacity: 0;\n                &:hover {\n                    & + label {\n                        background-color: var(--cal-hdr-hvr);\n                    }\n                }\n                &:focus {\n                    & + label {\n                        border: 1px solid var(--cal-focus);\n                    }\n                }\n            }\n            label {\n                border: 1px solid transparent;\n                &:focus {\n                    border: 1px solid var(--cal-focus);\n                }\n            }\n        }\n    }\n    .cal-year,\n    .cal-month {\n        display: inline-block;\n        text-align: center;\n        vertical-align: top;\n        line-height: 20px;\n        flex: 1 1 auto;\n        padding: 3px 5px;\n        border-radius: var(--cal-btn-rad);\n        position: relative;\n        top: 2px;\n    }\n    .nav {\n        border: 0;\n        background-color: transparent;\n        display: inline-block;\n        cursor: pointer;\n        position: relative;\n        flex: 0 0 20px;\n        height: $header-height;\n        padding: 0;\n        // vertical-align: top;\n        &:hover {\n            background-color: var(--cal-hdr-hvr);\n        }\n        &:focus {\n            border: 1px solid var(--cal-focus);\n        }\n    }\n    &.no-year-nav {\n        .nav.yr.prev,\n        .nav.yr.next {\n            opacity: 0;\n            pointer-events: none;\n        }\n    }\n    &.no-right-nav {\n        .nav.yr.next,\n        .nav.mo.next {\n            opacity: 0;\n            pointer-events: none;\n        }\n    }\n    &.no-left-nav {\n        .nav.yr.prev,\n        .nav.mo.prev {\n            opacity: 0;\n            pointer-events: none;\n        }\n    }\n    .cal-body {\n        margin-top: 3px;\n        height: 100%;\n        div {\n            // .day\n            display: inline-block;\n            box-sizing: border-box;\n            width: 14.285%;\n            height: 14.285%; // 6 weeks + day header\n            text-align: center;\n            line-height: 2;\n            background-color: transparent;\n            transition: background-color 300ms;\n            span {\n                width: 100%;\n                height: 100%;\n                display: inline-block;\n                border: 1px solid transparent;\n                border-radius: var(--cal-day-rad);\n            }\n            &.off {\n                color: var(--cal-off-txt);\n            }\n            &.on,\n            &.off {\n                cursor: pointer;\n                border-radius: var(--cal-day-rad);\n                &:hover {\n                    background-color: var(--cal-hov);\n                }\n            }\n            &.today {\n                background-color: white;\n                color: var(--cal-link);\n                border: 1px solid var(--cal-today);\n            }\n            &.selected {\n                background-color: var(--cal-sel);\n                color: var(--cal-sel-txt);\n                &:focus,\n                &:hover {\n                    // background-color: var(--cal-sel);\n                    background-color: white;\n                    color: var(--cal-link);\n                }\n            }\n            &.highlighted {\n                //border: 1px solid blue;\n            }\n            &:focus {\n                outline: 0;\n                &:not(.disabled) {\n                    span {\n                        border: 1px solid var(--cal-focus);\n                    }\n                }\n            }\n            &.range.on {\n                background-color: var(--cal-range);\n                border-radius: 0;\n            }\n            &.range-first.on {\n                background-color: var(--cal-range-select);\n                color: white;\n                border-radius: var(--cal-day-rad) 0 0 var(--cal-day-rad);\n            }\n            &.range-second.on {\n                background-color: var(--cal-range-select);\n                color: white;\n                border-radius: 0 var(--cal-day-rad) var(--cal-day-rad) 0;\n            }\n            &.disabled {\n                background-color: var(--cal-dsbl);\n                color: var(--cal-dsbl-txt);\n                cursor: default;\n                font-style: italic;\n                &.today {\n                    background-color: var(--cal-today);\n                    color: var(--cal-today-txt);\n                }\n                &.selected {\n                    background-color: var(--cal-dsbl-sel);\n                    color: var(--cal-dsbl-txt);\n                    &:hover {\n                        background-color: var(--cal-dsbl-sel);\n                        color: var(--cal-dsbl-txt);\n                    }\n                }\n            }\n        }\n    }\n    .cal-footer {\n        text-align: center;\n        padding: 5px;\n        height: $footer-height;\n        .today-button {\n            background-color: transparent;\n            border: 0;\n            cursor: pointer;\n            color: var(--cal-link);\n            text-decoration: none;\n            &:focus,\n            &:hover {\n                text-decoration: underline;\n            }\n        }\n    }\n    &.minimal {\n        .calendar {\n            border: 0;\n        }\n        .cal-footer {\n            display: none;\n        }\n    }\n    input.focus-loop {\n        width: 10px;\n        position: absolute;\n        left: -10000px;\n    }\n}\n\ndate-picker[time] {\n    .cal-footer {\n        span {\n            display: inline-block;\n            cursor: default;\n            color: #333;\n            &:hover {\n                text-decoration: none;\n            }\n        }\n        input {\n            display: inline-block;\n            padding: 2px 6px;\n        }\n    }\n}\n\nui-month-input,\ndate-time-input,\ntime-input,\ndate-input,\ndate-range-input {\n    display: inline-block;\n    position: relative;\n\n    span {\n        font-size: 14px;\n        color: var(--label-txt);\n        display: block;\n        margin-bottom: 3px;\n    }\n    .date-input-wrapper {\n        position: relative;\n        input {\n            width: calc(100% - 45px);\n        }\n    }\n    input {\n        padding: 6px;\n        font-size: 16px;\n\n        border: 1px solid var(--inp-brd);\n        transition: background-color 300ms ease, border-color 300ms ease;\n        &::placeholder {\n            color: var(--inp-placeholder);\n        }\n        &:-ms-input-placeholder {\n            color: var(--inp-placeholder);\n        }\n    }\n    &[disabled] {\n        input {\n            background-color: #ddd;\n        }\n        .icon-button {\n            opacity: 0.4;\n            pointer-events: none;\n        }\n    }\n    &[readonly] {\n        .date-input-wrapper {\n            input[readonly] {\n                pointer-events: none;\n                background-color: #eee;\n            }\n        }\n    }\n    &.invalid {\n        .input-wrapper input,\n        input {\n            border-color: var(--cal-error);\n            outline-color: var(--cal-error);\n        }\n    }\n    &.warning {\n        .input-wrapper input {\n            border-color: var(--cal-warn-brd);\n            background-color: var(--cal-warn-bk);\n        }\n    }\n\n    date-picker,\n    date-range-picker {\n        display: none;\n        position: absolute;\n        top: 110%;\n        left: 0;\n        z-index: 1;\n        &.bottom-align {\n            top: auto;\n            bottom: 110%;\n        }\n        &.right-align {\n            left: auto;\n            right: 0;\n        }\n        &.show {\n            display: inline-block;\n        }\n    }\n    date-range-picker {\n        width: 412px;\n        date-picker {\n            position: relative;\n            top: auto;\n            left: auto;\n        }\n    }\n}\n\ntime-input {\n    input {\n        width: 70px;\n        border: 1px solid var(--inp-brd);\n        padding: 6px;\n        border-radius: 2px;\n        font-size: 13px;\n    }\n}\n\ndate-range-picker {\n    border-radius: var(--cal-rad);\n    display: flex;\n    border: 1px solid var(inp-brd);\n    padding: 3px;\n    background-color: var(--cal-bg);\n    date-picker {\n        flex: 50%;\n    }\n    &.show {\n        date-picker {\n            display: inline-block;\n        }\n    }\n}\n\ndate-range-inputs {\n    display: flex;\n    flex-wrap: nowrap;\n    flex-direction: row;\n    date-input {\n        &:first-child {\n            margin-right: 5px;\n        }\n        &:last-child {\n            margin-left: 5px;\n        }\n    }\n}\n\ndate-range-input {\n    width: 320px;\n}\n\ndate-time-input,\ntime-input,\ndate-input {\n    width: 210px;\n}\n\ndate-time-input {\n    & > label {\n        input {\n            width: calc(100% - 40px);\n        }\n    }\n    time-input {\n        width: auto;\n    }\n}\n\n.icon-button {\n    display: inline-block;\n    position: absolute;\n    right: -1px;\n    top: 50%;\n    transform: translateY(-50%);\n    border: 0;\n    color: #5a5a5a;\n    cursor: pointer;\n    background-color: transparent;\n    ui-icon {\n        display: block;\n        font-size: 18px;\n    }\n    &.focus {\n        border: 1px solid var(--focus-brd);\n    }\n}\n.icon-button:hover {\n    color: white;\n}\n\n.input-error {\n    font-size: 12px;\n    color: var(--error-txt);\n}\n\nui-popup.date-picker {\n    width: $width;\n}\n\nui-popup.date-range-picker {\n    border: 1px solid var(--cal-brd);\n    border-radius: var(--cal-rad);\n    width: 480px;\n    date-picker {\n        .calendar {\n            padding: 10px;\n        }\n    }\n}\n","ui-drawer{\n    display: none;\n    &.show{\n        display: inline-block;\n    }\n    &.animate{\n        overflow: hidden;\n        transition: all 150ms ease-out;\n    }\n}","ui-actionbutton{\n    display: inline-block;\n    &.icon-only{\n        button{\n            background-color: transparent;\n            border: 0;\n            border-radius: 50%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n        }\n    }\n}\n\nui-popup.actionbutton {\n    ui-list ul li[aria-selected] {\n        background-color: white;\n        color: var(--list-item-txt);\n        &:hover{\n            background-color: var(--list-item-hvr);\n        }\n    }\n}\n","ui-minitags {\n    position: relative;\n    display: block;\n    width: var(--minitag-width);\n    border: 1px solid var(--inp-brd);\n    border-radius: 6px;\n    .minitag-buttonwrap {\n        position: relative;\n        .minitag-button {\n            border-radius: 6px;\n            width: 100%;\n            min-height: 40px;\n            background-color: white;\n            text-align: left;\n            border: 0;\n            padding: 10px 30px 5px 10px;\n            .no-tags{\n                position: relative;\n                top: -3px;\n                display: inline-block;\n                color: var(--disabled);\n            }\n        }\n\n        & > ui-icon {\n            position: absolute;\n            top: 50%;\n            right: 15px;\n            transform: translate(0, -50%);\n        }\n    }\n\n    .ui-tag {\n        position: relative;\n        display: inline-block;\n        padding: 5px 10px;\n        font-size: 14px;\n        margin: 0 5px 5px 0;\n        padding-right: 30px;\n        background-color: var(--tag-color);\n        border-radius: 15px;\n        ui-icon {\n            position: absolute;\n            top: 50%;\n            right: 7px;\n            transform: translate(0, -50%);\n            cursor: pointer;\n        }\n    }\n}\n\n.minitag-apply-container {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    height: 40px;\n    .ui-button {\n        width: 100%;\n        height: 100%;\n        border-top-right-radius: 0;\n        border-top-left-radius: 0;\n        border: 0;\n    }\n}\n\n","ui-minipop {\n    display: none;\n    position: absolute;\n    z-index: 10;\n    .listwrap {\n        height: 200px;\n        background-color: white;\n        overflow: auto;\n        ul {\n            border: 0;\n        }\n    }\n\n    ui-list ul li[aria-selected] {\n        background-color: white;\n        color: #ccc;\n        pointer-events: none;\n    }\n\n    &.open{\n        display: block;\n    }\n\n    .apply-container{\n        .ui-button{\n            width: 100%;\n        }\n    }\n}","ui-checklist {\n    display: block;\n    position: relative;\n    ui-input {\n        input {\n            padding: 10px;\n            border-radius: 3px;\n        }\n    }\n    ui-minipop {\n        &.open {\n            display: none; // unless there are items\n        }\n        .ui-list {\n            max-height: 200px;\n            overflow: auto;\n            ul.list {\n            }\n            li {\n                &.select-all-toggle {\n                    background-color: var(--chk-all);\n                }\n                ui-checkbox {\n                    display: flex;\n                }\n                ui-icon {\n                    top: 3px;\n                }\n                .ui-label {\n                    line-height: 1.6;\n                }\n            }\n        }\n    }\n\n    &.has-data {\n        ui-minipop {\n            &.open {\n                display: block;\n            }\n        }\n    }\n}\n","@import './colors.scss';\nui-month-picker {\n    display: block;\n    background-color: white;\n    border: var(--list-brd);\n    border-radius: var(--list-rad);\n    width: 250px;\n    padding: 10px;\n    ui-dropdown {\n        margin: 10px;\n    }\n    .month-picker-header {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n        .nav {\n            cursor: pointer;\n            background-color: transparent;\n            border: 0;\n            ui-icon {\n                color: var(--primary);\n                font-size: 16px;\n            }\n            &:hover {\n                background-color: var(--btn-bg-hvr);\n            }\n            &:disabled {\n                cursor: default;\n                &:hover {\n                    background-color: transparent;\n                }\n                ui-icon {\n                    color: var(--disabled);\n                }\n            }\n        }\n    }\n    .list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        .list-btn {\n            flex-basis: 33%;\n            height: 30px;\n            background-color: transparent;\n            border: 0;\n            &[disabled] {\n                cursor: default;\n            }\n            &:hover:not(&[disabled]) {\n                background-color: var(--btn-bg-hvr);\n            }\n            &.selected {\n                background-color: var(--btn-sel);\n            }\n        }\n    }\n}\n\nui-month-input {\n}\n"],"names":[],"sourceRoot":""}