{"version":3,"sources":["/Users/mehmetokanozcan/Documents/jump/src/basecomponents/styles/style.css"],"names":[],"mappings":"AACA,8BACE,8BAAkC,AAClC,iBAAmB,CAAE,AACrB,gDACE,gCAAmC,CAAE,AACvC,4CAGE,6BAAgC,CAAE,AACpC,+DACE,cAAe,AACf,gBAAiB,AACjB,kBAAmB,AACnB,SAAU,AACV,oBAAqB,AACrB,UAAW,AACX,cAAe,AACf,YAAa,AACb,UAAW,AACX,YAAa,AACb,gBAAiB,AACjB,qBAAsB,AACtB,gCAAkC,AAGlC,uBAA0B,CAAE,AAC9B,oEACE,eAAgB,AAChB,QAAU,CAAE,AACd,uEACE,eAAgB,AAChB,QAAU,CAAE,AACd,qEACE,eAAgB,AAChB,QAAU,CAAE,AACd,sEACE,eAAgB,AAChB,QAAU,CAAE,AACd,qEACE,eAAgB,AAChB,QAAU,CAAE,AACd,kDACE,aAAc,AACd,eAAgB,AAChB,uBAAwB,AACxB,YAAa,AACb,kBAAmB,AACnB,gBAAkB,CAAE,AACpB,wDACE,eAAgB,AAChB,eAAiB,CAAE,AACnB,kEACE,gBAAiB,AACjB,kBAAoB,CAAE,AAC1B,yDACE,eAAgB,AAChB,eAAiB,CAAE,AACnB,mEACE,gBAAiB,AACjB,kBAAoB,CAAE,AAC1B,wDACE,eAAgB,AAChB,eAAiB,CAAE,AACnB,kEACE,gBAAiB,AACjB,kBAAoB,CAAE,AAC1B,sDACE,yBAA4B,CAAE,AAC9B,mEACE,cAAgB,CAAE,AACpB,4DACE,iBAAoB,CAAE,AAC1B,0DACE,yBAA4B,CAAE,AAC9B,gEACE,iBAAoB,CAAE,AAC1B,2DACE,kBAAoB,CAAE,AACxB,iEACE,mBAAoB,AACpB,2BAA4B,AAC5B,cAAgB,CAAE,AAClB,uEACE,OAAS,CAAE,AACb,8EACE,qBAAuB,AACvB,YAAa,AAEb,oDAA8B,CAAE,AACpC,4DACE,eAAgB,AAChB,mBAAoB,AACpB,YAAiB,AACjB,kBAAmB,AACnB,gBAAiB,AACjB,sBAAwB,AACxB,gBAAiB,AACjB,gBAAiB,AACjB,aAAe,CAAE,AACjB,8DACE,cAAgB,CAAE,AACtB,+DACE,iBAAmB,CAAE,AACvB,4DACE,cAAgB,CAAE,AAClB,mEACE,cAAgB,CAAE,AACtB,wDACE,mBAAqB,AAErB,4BAA6B,AAC7B,YAAa,AACb,cAAe,AACf,iBAAmB,AACnB,iBAAoB,CAAE,AAC1B,6DACE,aAAc,AACd,mBAAoB,AACpB,eAAgB,AAChB,aAAe,CAAE,AACnB,mFACE,YAAc,CAAE,AAClB,8CACE,2BAA8B,CAAE,AAChC,gDACE,aAAc,AACd,mBAAoB,AACpB,sBAAwB,CAAE,AAC9B,2EACE,eAAgB,AAChB,oBAAqB,AACrB,OAAS,CAAE,AACb,uEACE,iBAAoB,CAAE,AACxB,oEACE,MAAU,CAAE,AACd,mDACE,yBAA2B,AAG3B,0BAA4B,AAC5B,0BAA4B,AAC5B,2BAA6B,AAC7B,4BAA8B,AAC9B,sBAAwB,CAAE,AAC1B,yDACE,sBAAwB,CAAE,AAC9B,gFACE,eAAgB,AAChB,oBAAqB,AACrB,KAAS,CAAE,AACb,oEACE,eAAgB,AAChB,cAAe,AACf,eAAgB,AAChB,iBAAkB,AAClB,kBAAmB,AACnB,QAAU,CAAE,AACZ,wEACE,eAAgB,AAChB,gBAAkB,CAAE,AACxB,qGACE,mCAAqC,AACrC,4BAA+B,CAAE","file":"main.e7c92d91.chunk.css","sourcesContent":["/*Border radius ends here*/\n.app-base-component-container {\n  font-family: 'Roboto', sans-serif;\n  position: relative; }\n  .app-base-component-container.transparent input {\n    background: transparent !important; }\n  .app-base-component-container.rounded input {\n    -webkit-border-radius: 100px !important;\n    -moz-border-radius: 100px !important;\n    border-radius: 100px !important; }\n  .app-base-component-container > .ui.input + .app-placeholder-label {\n    font-size: 1em;\n    font-weight: 400;\n    position: absolute;\n    top: 21px;\n    pointer-events: none;\n    left: 20px;\n    color: #93a4aa;\n    height: auto;\n    z-index: 1;\n    cursor: text;\n    text-align: left;\n    display: inline-block;\n    -webkit-transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -o-transition: 0.2s ease all;\n    transition: 0.2s ease all; }\n  .app-base-component-container > .ui.input.huge + .app-placeholder-label {\n    font-size: 20px;\n    top: 23px; }\n  .app-base-component-container > .ui.input.massive + .app-placeholder-label {\n    font-size: 27px;\n    top: 30px; }\n  .app-base-component-container > .ui.input.large + .app-placeholder-label {\n    font-size: 15px;\n    top: 18px; }\n  .app-base-component-container > .ui.input.medium + .app-placeholder-label {\n    font-size: 13px;\n    top: 16px; }\n  .app-base-component-container > .ui.input.small + .app-placeholder-label {\n    font-size: 12px;\n    top: 14px; }\n  .app-base-component-container > .ui.input.selection {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    height: auto;\n    padding-left: 18px;\n    padding-top: 15px; }\n    .app-base-component-container > .ui.input.selection.small {\n      font-size: 13px;\n      min-height: 40px; }\n      .app-base-component-container > .ui.input.selection.small > .ui.label {\n        padding: 2px 4px;\n        margin: 3px 3px 0 0; }\n    .app-base-component-container > .ui.input.selection.medium {\n      font-size: 14px;\n      min-height: 43px; }\n      .app-base-component-container > .ui.input.selection.medium > .ui.label {\n        padding: 2px 4px;\n        margin: 3px 3px 0 0; }\n    .app-base-component-container > .ui.input.selection.large {\n      font-size: 17px;\n      min-height: 49px; }\n      .app-base-component-container > .ui.input.selection.large > .ui.label {\n        padding: 2px 4px;\n        margin: 3px 3px 0 0; }\n    .app-base-component-container > .ui.input.selection.big {\n      min-height: 54px !important; }\n      .app-base-component-container > .ui.input.selection.big > input.search {\n        font-size: 15px; }\n      .app-base-component-container > .ui.input.selection.big > .text {\n        top: 4px !important; }\n    .app-base-component-container > .ui.input.selection.massive {\n      min-height: 72px !important; }\n      .app-base-component-container > .ui.input.selection.massive > .text {\n        top: 6px !important; }\n    .app-base-component-container > .ui.input.selection.multiple {\n      padding-bottom: 5px; }\n    .app-base-component-container > .ui.input.selection:not(.multiple) {\n      align-items: center;\n      justify-content: flex-start;\n      flex-wrap: wrap; }\n      .app-base-component-container > .ui.input.selection:not(.multiple) > .text {\n        top: 1px; }\n      .app-base-component-container > .ui.input.selection:not(.multiple) > input.search {\n        width: 100% !important;\n        height: 100%;\n        padding: .67857143em 2.1em .67857143em 1em !important;\n        padding-left: 18px !important; }\n    .app-base-component-container > .ui.input.selection > .ui.label {\n      font-size: 11px;\n      margin: 4px 3px 0 0;\n      padding: 4px 4px;\n      border-radius: 1px;\n      font-weight: 400;\n      border: none !important;\n      box-shadow: none;\n      background: #eee;\n      flex-shrink: 0; }\n      .app-base-component-container > .ui.input.selection > .ui.label i {\n        font-size: 11px; }\n    .app-base-component-container > .ui.input.selection > input.search {\n      align-self: center; }\n    .app-base-component-container > .ui.input.selection > .menu div {\n      font-size: 13px; }\n      .app-base-component-container > .ui.input.selection > .menu div.header {\n        font-size: 15px; }\n    .app-base-component-container > .ui.input.selection > input {\n      margin: 0 !important;\n      padding: 0 !important;\n      padding-left: 5px !important;\n      flex-grow: 1;\n      flex-shrink: 1;\n      left: 0 !important;\n      width: 0 !important; }\n  .app-base-component-container > .ui.input.labeled .label.label {\n    display: flex;\n    align-items: center;\n    font-size: 14px;\n    color: #606470; }\n  .app-base-component-container > .ui.input.labeled:not(.right) + .app-placeholder-label {\n    display: none; }\n  .app-base-component-container > .ui.input > input {\n    padding-left: 18px !important; }\n    .app-base-component-container > .ui.input > input + i {\n      display: flex;\n      align-items: center;\n      justify-content: center; }\n  .app-base-component-container.data-active > .ui.input + .app-placeholder-label {\n    font-size: 10px;\n    letter-spacing: .5px;\n    top: 5px; }\n  .app-base-component-container.data-active.small + .app-placeholder-label {\n    top: 2px !important; }\n  .app-base-component-container.line > .ui.input + .app-placeholder-label {\n    left: 0px; }\n  .app-base-component-container.line > .ui.input input {\n    padding-left: 0 !important;\n    -webkit-border-radius: 0 !important;\n    -moz-border-radius: 0 !important;\n    border-radius: 0 !important;\n    border-top: none !important;\n    border-left: none !important;\n    border-right: none !important;\n    background: transparent; }\n    .app-base-component-container.line > .ui.input input:focus {\n      background: transparent; }\n  .app-base-component-container.line.data-active > .ui.input + .app-placeholder-label {\n    font-size: 10px;\n    letter-spacing: .5px;\n    top: 0px; }\n  .app-base-component-container.error-label > .app-form-error-container {\n    font-size: 11px;\n    color: #db2828;\n    margin-top: 2px;\n    margin-left: 18px;\n    position: absolute;\n    top: 100%; }\n    .app-base-component-container.error-label > .app-form-error-container svg {\n      font-size: 10px;\n      margin-right: 5px; }\n  .app-base-component-container.error-label input, .app-base-component-container.error-label .selection {\n    border: 1px solid #db2828 !important;\n    background: #fefafa !important; }\n\n/*\r\n@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');\r\n@import '~react-datepicker/dist/react-datepicker.css';\r\n\r\nhtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, img, ins, kbd, q, s, samp,\r\nsmall, strike, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input, select, textarea, button,table, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {\r\n    margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}\r\narticle, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}\r\nbody {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}\r\ntable {border-collapse: collapse;border-spacing: 0;}\r\na {text-decoration: none;}img {border: 0;}:focus {outline: 0;}\r\n.clear {clear: both;}\r\n* {\r\n    -webkit-box-sizing: border-box;\r\n    -moz-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n    outline: none !important;\r\n}\r\n.input-group {position: relative;display: table;border-collapse: separate;}\r\n.input-group[class*=\"col-\"] {float: none;padding-right: 0;padding-left: 0;}\r\n.input-group-addon,.input-group-btn,.input-group .form-control {display: table-cell;}\r\n.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child) {border-radius: 0;}\r\n.input-group-addon,.input-group-btn {width: 1%;white-space: nowrap;vertical-align: middle;}\r\n.input-group-addon {\r\n    padding: 6px 12px;\r\n    font-size: 14px;\r\n    font-weight: normal;\r\n    line-height: 1;\r\n    color: #555;\r\n    text-align: center;\r\n    background-color: #eee;\r\n    border: 1px solid #ccc;\r\n    border-radius: 4px;\r\n}\r\n.input-group-addon.input-sm {\r\n    padding: 5px 10px;\r\n    font-size: 12px;\r\n    border-radius: 3px;\r\n}\r\n.input-group-addon.input-lg {\r\n    padding: 10px 16px;\r\n    font-size: 18px;\r\n    border-radius: 6px;\r\n}\r\n.input-group-addon input[type=\"radio\"],\r\n.input-group-addon input[type=\"checkbox\"] {\r\n    margin-top: 0;\r\n}\r\n.input-group .form-control:first-child,\r\n.input-group-addon:first-child,\r\n.input-group-btn:first-child > .btn,\r\n.input-group-btn:first-child > .btn-group > .btn,\r\n.input-group-btn:first-child > .dropdown-toggle,\r\n.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),\r\n.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {\r\n    border-top-right-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n}\r\n.input-group-addon:first-child {\r\n    border-right: 0;\r\n}\r\n\r\n\r\n\r\n.app-base-component-container {\r\n    font-family: 'Roboto', sans-serif;\r\n    position: relative;\r\n\r\n    fieldset {\r\n        width: 100%;\r\n    }\r\n\r\n    &.is-title-left {\r\n\r\n        padding-left: 200px;\r\n\r\n        &:before {\r\n            content: attr(data-title);\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            height: 100%;\r\n            width: 200px;\r\n            display: flex;\r\n            align-items: center;\r\n            font-size: 11px;\r\n            line-height: 13px;\r\n            color: #717E83;\r\n            display: none;\r\n        }\r\n\r\n\r\n\r\n        .app-component-form-title {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.is-title-top {\r\n\r\n        padding-top: 23px;\r\n\r\n        &:before {\r\n            content: attr(data-title);\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            height: 23px;\r\n            width: 100%;\r\n            display: flex;\r\n            align-items: center;\r\n            font-size: 11px;\r\n            line-height: 11px;\r\n            font-weight: 600;\r\n            letter-spacing: .5px;\r\n            color: #1D2229\r\n        }\r\n\r\n        .app-component-form-title {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.is-title-left {\r\n        > .app-component-form-title {\r\n            //display: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            bottom: 0;\r\n            height: 100%;\r\n            width: 200px;\r\n            display: flex;\r\n            align-items: center;\r\n            font-size: 11px;\r\n            line-height: 13px;\r\n            color: #717E83;\r\n\r\n            &.required {\r\n                &:after {\r\n                    content: '*';\r\n                    color: red;\r\n                    top: 0;\r\n                    left: auto;\r\n                    margin-left: 5px;\r\n                }\r\n            }\r\n\r\n            & ~ .app-form-edit-container {\r\n                //width: calc(100% - 0px);\r\n                //display: inline-block;\r\n                //padding-left: 100px;\r\n                //right: 0;\r\n                //left: 100px;\r\n\r\n\r\n            }\r\n        }\r\n    }\r\n\r\n    > .app-component-form-title {\r\n        font-size: 11px;\r\n        line-height: 13px;\r\n        font-weight: 600;\r\n        height: 25px;\r\n        letter-spacing: .5px;\r\n        display: flex;\r\n        align-items: center;\r\n        color: #1D2229\r\n    }\r\n\r\n    > .app-form-edit-container {\r\n        position: relative;\r\n\r\n        label {\r\n            &.app-placeholder-label {\r\n                font-size: 13px;\r\n                line-height: 13px;\r\n                font-weight: 400;\r\n                position: absolute;\r\n                top: 19px;\r\n                width: calc(100% - 22px);\r\n                pointer-events: none;\r\n                left: 11px;\r\n                color: #93a4aa;\r\n                height: auto;\r\n                transition: 0.2s ease all;\r\n                -moz-transition: 0.2s ease all;\r\n                -webkit-transition: 0.2s ease all;\r\n                z-index: 1;\r\n                cursor: text;\r\n                text-align: left;\r\n\r\n                &.active {\r\n                    color: #39495B;\r\n                    font-weight: 500;\r\n                }\r\n            }\r\n        }\r\n\r\n        .app-helper-icon{\r\n            font-size: 22px;\r\n            line-height: 22px;\r\n            font-weight: 400;\r\n            position: absolute;\r\n            top: 15px;\r\n            right: 15px;\r\n            color: #93a4aa;\r\n            height: auto;\r\n            transition:0.2s ease all;\r\n            -moz-transition:0.2s ease all;\r\n            -webkit-transition:0.2s ease all;\r\n            z-index: 1;\r\n            cursor: pointer;\r\n\r\n            &.no-click {\r\n                cursor: default;\r\n            }\r\n\r\n            & ~ fieldset {\r\n                input {\r\n                    padding-right: 50px !important;\r\n                }\r\n            }\r\n\r\n            !*&:hover {\r\n                font-size: 25px;\r\n                right: 13px;\r\n                top: 13px;\r\n            }*!\r\n        }\r\n\r\n        .input-group {\r\n            width: 100%;\r\n\r\n            & > fieldset {\r\n                position: relative;\r\n            }\r\n\r\n            .select-arrow {\r\n                position: absolute;\r\n                height: calc(100% - 2px);\r\n                width: 50px;\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: center;\r\n                text-align: center;\r\n                right: 0;\r\n                z-index: 2;\r\n                top:1px;\r\n                //border-left:1px solid #B4BBD0 ;\r\n                cursor: pointer;\r\n\r\n            }\r\n\r\n            .input-group-addon {\r\n                background: rgba(180, 187, 208, .05);\r\n                font-weight: 500;\r\n                font-size: 12px;\r\n                padding-top: 8px;\r\n                border: 1px solid #c5c5c5;\r\n\r\n                &.left {\r\n                    @include border-radius-right(0);\r\n                    border-right: 0;\r\n                }\r\n\r\n                &.right {\r\n                    @include border-radius-left(0);\r\n                    border-left: 0;\r\n                }\r\n            }\r\n\r\n            &.data-active {\r\n                label {\r\n                    &.app-placeholder-label {\r\n                        font-size: 10px;\r\n                        letter-spacing: 0px;\r\n                        top: 5px;\r\n                        color: #93a4aa;\r\n                        font-weight: normal;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.addon-left {\r\n                fieldset {\r\n                    input {\r\n                        @include border-radius-left(0);\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.addon-right {\r\n                fieldset {\r\n                    input {\r\n                        @include border-radius-right(0);\r\n                    }\r\n                }\r\n            }\r\n\r\n            .input-group-btn {\r\n                button {\r\n                    font-size: 14px;\r\n                    font-weight: 700;\r\n                    line-height: 1;\r\n                    color: #555;\r\n                    text-align: center;\r\n                    background-color: rgba(180, 187, 208, .2);\r\n                    border: 1px solid #c5c5c5;\r\n                    @include border-radius(4px);\r\n                    @include border-radius-left(0);\r\n                    border-left: 0;\r\n                    height: 50px;\r\n\r\n                    &:hover, &:focus {\r\n                        background-color: rgba(180, 187, 208, .3) !important;\r\n                        border-color: #0091D4;\r\n                    }\r\n                }\r\n\r\n                &.open {\r\n                    button {\r\n                        background-color: rgba(180, 187, 208, .3) !important;\r\n                        border-color: #0091D4 !important;\r\n                        border-left: solid 1px;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.error {\r\n                input {\r\n                    border-color: #F2405D;\r\n                    &:focus {\r\n                        border-color: #F2405D;\r\n                    }\r\n                }\r\n            }\r\n\r\n        }\r\n    }\r\n\r\n    &.md {\r\n\r\n        label {\r\n            &.app-placeholder-label {\r\n                font-size: 13px;\r\n                line-height: 13px;\r\n                font-weight: 400;\r\n                position: absolute;\r\n                top: 12px;\r\n            }\r\n        }\r\n\r\n        .app-helper-icon{\r\n            font-size: 16px;\r\n            line-height: 16px;\r\n            top: 10px;\r\n            right: 10px;\r\n\r\n            &:hover {\r\n                font-size: 16px;\r\n                line-height: 16px;\r\n                top: 10px;\r\n                right: 10px;\r\n            }\r\n        }\r\n\r\n        .input-group {\r\n            width: 100%;\r\n\r\n            & > fieldset {\r\n                position: relative;\r\n            }\r\n\r\n            .input-group-addon {\r\n                background: rgba(180, 187, 208, .05);\r\n                font-weight: 500;\r\n                font-size: 12px;\r\n                padding-top: 8px;\r\n                border: 1px solid #B4BBD0;\r\n\r\n                &.left {\r\n                    @include border-radius-right(0);\r\n                    border-right: 0;\r\n                }\r\n\r\n                &.right {\r\n                    @include border-radius-left(0);\r\n                    border-left: 0;\r\n                }\r\n            }\r\n\r\n            &.data-active {\r\n                label {\r\n                    &.app-placeholder-label {\r\n                        font-size: 9px;\r\n                        letter-spacing: 0px;\r\n                        top: 2px;\r\n                    }\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n\r\n        input[type=\"text\"], input[type=\"password\"] {\r\n            height: 35px;\r\n            font-size: 13px;\r\n            line-height: 13px;\r\n\r\n            &:focus {\r\n                & ~ label {\r\n                    &.app-placeholder-label {\r\n                        font-size: 9px;\r\n                        letter-spacing: 0px;\r\n                        top: 2px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .app-form-error-container {\r\n            padding: 0px 5px;\r\n            top: 29px;\r\n        }\r\n    }\r\n\r\n    &.sm {\r\n\r\n        label {\r\n            display: none;\r\n        }\r\n\r\n        .app-helper-icon{\r\n            font-size: 16px;\r\n            line-height: 16px;\r\n            top: 5px;\r\n            right: 5px;\r\n\r\n            &:hover {\r\n                font-size: 16px;\r\n                line-height: 16px;\r\n                top: 5px;\r\n                right: 5px;\r\n            }\r\n        }\r\n\r\n        .input-group {\r\n            width: 100%;\r\n\r\n            & > fieldset {\r\n                position: relative;\r\n            }\r\n\r\n            .input-group-addon {\r\n                background: rgba(180, 187, 208, .05);\r\n                font-weight: 500;\r\n                font-size: 12px;\r\n                padding-top: 8px;\r\n                border: 1px solid #B4BBD0;\r\n\r\n                &.left {\r\n                    @include border-radius-right(0);\r\n                    border-right: 0;\r\n                }\r\n\r\n                &.right {\r\n                    @include border-radius-left(0);\r\n                    @include border-radius-right(3px !important);\r\n                    border-left: 0;\r\n                }\r\n            }\r\n\r\n            &.data-active {\r\n                label {\r\n                    &.app-placeholder-label {\r\n                        font-size: 9px;\r\n                        letter-spacing: 0px;\r\n                        top: 2px;\r\n                    }\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n\r\n        input[type=\"text\"], input[type=\"password\"] {\r\n            height: 28px;\r\n            font-size: 12px;\r\n            line-height: 12px;\r\n            padding: 0 10px;\r\n\r\n            &:focus {\r\n                & ~ label {\r\n                    &.app-placeholder-label {\r\n                        font-size: 9px;\r\n                        letter-spacing: 0px;\r\n                        top: 2px;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        .app-form-error-container {\r\n            padding: 0px 5px;\r\n            top: 19px;\r\n        }\r\n    }\r\n\r\n    &.rounded {\r\n\r\n        label {\r\n            &.app-placeholder-label {\r\n                left: 20px\r\n            }\r\n        }\r\n\r\n        input[type=\"text\"], input[type=\"password\"] {\r\n            padding-left: 20px;\r\n            @include border-radius(100px);\r\n        }\r\n    }\r\n\r\n    input[type=\"text\"], input[type=\"password\"] {\r\n        width: 100%;\r\n        //background: white;\r\n        @include border-radius(1px);\r\n        cursor: text;\r\n        letter-spacing: normal;\r\n        text-align: start;\r\n        text-indent: 0;\r\n        text-rendering: optimizelegibility;\r\n        text-shadow: none;\r\n        text-transform: none;\r\n        word-spacing: normal;\r\n        box-sizing: border-box;\r\n        border: 1px solid #c5c5c5;\r\n        transition: border 0.25s linear 0s, color 0.25s linear 0s, background-color 0.25s linear 0s;\r\n        font-size: 15px;\r\n        line-height: 13px;\r\n        color: #39495B;\r\n        position: relative;\r\n        height: 50px;\r\n        padding: 10px 10px 0 10px;\r\n        font-weight: 500;\r\n        display: flex;\r\n        align-items: center;\r\n        z-index: 0;\r\n\r\n        &.no-label {\r\n            padding: 0 10px !important;\r\n        }\r\n\r\n        &:hover {\r\n            outline: 0 none;\r\n            border-color: #9399AC;\r\n            //box-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.2), 0 7px 5px -7px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2);\r\n        }\r\n        &:focus {\r\n            outline: 0 none;\r\n            border-color: #0091D4;\r\n            //box-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.2), 0 7px 5px -7px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2);\r\n            z-index: 0;\r\n\r\n            & ~ label {\r\n                &.app-placeholder-label {\r\n                    font-size: 10px;\r\n                    letter-spacing: 0px;\r\n                    top: 5px;\r\n                }\r\n            }\r\n        }\r\n\r\n        &:disabled {\r\n            //background: lighten(#E9EDF1, 20%);\r\n            background: bottom;\r\n            box-shadow: none;\r\n            cursor: not-allowed;\r\n            pointer-events: none;\r\n            color: #B4BBD0;\r\n\r\n            &:focus {\r\n                border-color: #E9EDF1;\r\n                box-shadow: none;\r\n            }\r\n        }\r\n        &:read-only {\r\n            box-shadow: none;\r\n            cursor: not-allowed;\r\n            pointer-events: none;\r\n\r\n            &:focus {\r\n                border-color: #E9EDF1;\r\n                box-shadow: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    .app-form-error-container {\r\n        font-size: 10px;\r\n        line-height: 12px;\r\n        position: absolute;\r\n        background: #F2405D;\r\n        color: #fff;\r\n        -webkit-transition: 0.3s ease all;\r\n        -o-transition: 0.3s ease all;\r\n        transition: 0.3s ease all;\r\n        height: auto;\r\n        padding: 0 5px;\r\n        z-index: 1;\r\n        !* width: 100%; *!\r\n        text-align: right;\r\n        top: 43px;\r\n        right: 10px;\r\n        border-radius: 2px;\r\n        left: auto;\r\n    }\r\n\r\n    .dropdown-menu {\r\n        position: absolute;\r\n        top: 100%;\r\n        left: 0;\r\n        z-index: 1000;\r\n        display: none;\r\n        float: left;\r\n        min-width: 160px;\r\n        padding: 5px 0;\r\n        margin: 2px 0 0;\r\n        font-size: 14px;\r\n        text-align: left;\r\n        list-style: none;\r\n        background-color: #fff;\r\n        -webkit-background-clip: padding-box;\r\n        background-clip: padding-box;\r\n        border: 1px solid #ccc;\r\n        border: 1px solid rgba(0, 0, 0, .15);\r\n        border-radius: 4px;\r\n        -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);\r\n        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);\r\n    }\r\n\r\n    .op-soft {\r\n        opacity: .1;\r\n    }\r\n\r\n    .dropdown-menu {\r\n        margin: 1px 0 0;\r\n        padding: 0;\r\n        width: 100%;\r\n        font-size: 12px;\r\n        text-align: left;\r\n        list-style: none;\r\n        background-color: #fff;\r\n        border: 1px solid $blue;\r\n        @include border-radius(2px);\r\n        //@_bootstrap box-shadow(0px 0px 4px rgba(0, 0, 0, 0.05));\r\n\r\n        &.small {\r\n            position: relative;\r\n        }\r\n\r\n        &.block {\r\n            display: block;\r\n        }\r\n\r\n        &.dropdown-menu-right {\r\n            right: 0;\r\n            left: auto;\r\n        }\r\n\r\n\r\n\r\n        &:after {\r\n            content: '';\r\n            border-bottom: 5px solid $blue;\r\n            border-left: 5px solid transparent;\r\n            border-right: 5px solid transparent;\r\n            position: absolute;\r\n            font-size: 9px;\r\n            color: $blue;\r\n            top: -6px;\r\n            right: 8px;\r\n            @include border-radius(4px !important);\r\n        }\r\n\r\n        &.dropdown-select {\r\n            &:after {\r\n                content: '';\r\n                border:none\r\n            }\r\n        }\r\n\r\n        li {\r\n\r\n            &.only-li {\r\n                height: 40px;\r\n                display: flex;\r\n                align-items: center;\r\n                border-bottom: 1px solid #eee;\r\n                padding: 0 15px 0 40px;\r\n                cursor: pointer;\r\n\r\n                &.no-icon {\r\n                    padding: 0 15px;\r\n                }\r\n\r\n                i, svg {\r\n                    font-size: 13px;\r\n                    position: absolute;\r\n                    left: 15px;\r\n                    font-weight: bold;\r\n                    opacity: .1;\r\n                }\r\n            }\r\n\r\n            &.dd-search {\r\n                padding: 10px 15px;\r\n                border-bottom: 1px solid #ddd;\r\n                cursor: pointer;\r\n                color: #ccc;\r\n\r\n                input[type=\"text\"], input[type=\"password\"] {\r\n                    padding: 0 10px;\r\n                    background: #FBFBFB;\r\n                }\r\n\r\n                svg {\r\n                    margin-right: 15px;\r\n                }\r\n\r\n                &:hover {\r\n                    background: transparent;\r\n                    text-decoration: underline;\r\n                    color: black;\r\n                }\r\n\r\n                &.dd-warning {\r\n                    background: #f67280;\r\n                    color: white;\r\n                    cursor: default;\r\n\r\n                    &:hover {\r\n                        text-decoration: none;\r\n                    }\r\n\r\n                    svg {\r\n                        color: white;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:hover{\r\n                background: #F5F5F5;\r\n            }\r\n\r\n            &.active{\r\n                svg {\r\n                    opacity: 1;\r\n                }\r\n            }\r\n\r\n            &.activeHover{\r\n                background: #F5F5F5;\r\n            }\r\n\r\n            a {\r\n\r\n                height: 40px;\r\n                display: flex;\r\n                align-items: center;\r\n                border-bottom: 1px solid #eee;\r\n                padding: 0 15px 0 40px;\r\n                cursor: pointer;\r\n\r\n\r\n                i, svg {\r\n                    font-size: 13px;\r\n                    position: absolute;\r\n                    left: 15px;\r\n                    font-weight: bold;\r\n                }\r\n            }\r\n\r\n            &:first-child {\r\n                @include border-radius-top(4px);\r\n                a {\r\n                    @include border-radius-top(4px)\r\n                }\r\n            }\r\n\r\n            &:last-child {\r\n                @include border-radius-bottom(4px);\r\n                a {\r\n                    @include border-radius-bottom(4px)\r\n                }\r\n            }\r\n\r\n\r\n        }\r\n\r\n        .scrollbar-container {\r\n            width: 5px !important;\r\n\r\n            .scrollbar {\r\n                width: 5px !important;\r\n                @include border-radius(10px);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.react-datepicker-popper[data-placement^=\"bottom\"] {\r\n    margin-top: 1px !important;\r\n}\r\n\r\n.react-datepicker-popper {\r\n    z-index: 3 !important;\r\n    margin-top: 1px;\r\n    width: 100%;\r\n\r\n    .react-datepicker__current-month {\r\n        font-weight: 500;\r\n        font-size: 20px;\r\n    }\r\n\r\n\r\n\r\n    .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next--with-today-button {\r\n        &:hover {\r\n            border-left-color: $blue\r\n        }\r\n    }\r\n\r\n    .react-datepicker__navigation.react-datepicker__navigation--previous {\r\n        &:hover {\r\n            border-right-color: $blue\r\n        }\r\n    }\r\n\r\n    .react-datepicker {\r\n        width: 100%;\r\n        border: 1px solid $blue;\r\n        @include box-shadow(0 6px 12px rgba(0,0,0,.175));\r\n\r\n        .react-datepicker__month-container {\r\n            width: 100%;\r\n\r\n            .react-datepicker__header {\r\n                background: white;\r\n\r\n                .react-datepicker__day-names {\r\n                    font-weight: bold;\r\n                }\r\n            }\r\n        }\r\n\r\n        .react-datepicker__triangle {\r\n            display: none;\r\n            &::before {\r\n                border-bottom-color: $blue !important;\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n\r\n    .react-datepicker__day--highlighted {\r\n        background: $red;\r\n    }\r\n\r\n    .react-datepicker__header {\r\n        //background: $blue;\r\n    }\r\n\r\n    .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\r\n        width: 35px;\r\n        line-height: 35px;\r\n    }\r\n\r\n    .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--selected.react-datepicker__day--today.react-datepicker__day--weekend {\r\n        background: $blue;\r\n        color: white;\r\n    }\r\n\r\n    .react-datepicker__day--outside-month {\r\n        color: #ccc\r\n    }\r\n\r\n    .react-datepicker__day--keyboard-selected {\r\n        @include border-radius(4px);\r\n        background: $blue;\r\n    }\r\n\r\n\r\n}\r\n\r\n.react-datepicker-wrapper {\r\n    width: 100%;\r\n    .react-datepicker__input-container {\r\n        width: 100%;\r\n    }\r\n}\r\n\r\n.react-datepicker__today-button {\r\n    @include border-radius-bottom(4px);\r\n    padding: 15px;\r\n    background: white;\r\n    color: $blue;\r\n    border-top-color: $blue;\r\n\r\n    &:hover {\r\n        color: $red\r\n    }\r\n}\r\n\r\n\r\n\r\n.scroll-area-conrainer {\r\n    max-height: 240px;\r\n}\r\n\r\n.scroll-container {\r\n    height: auto;\r\n}\r\n\r\n.app-base-component-checkbox-layer {\r\n\r\n    & > label {\r\n        display: inline-block;\r\n        position: relative;\r\n        padding-left: 30px;\r\n        padding-right: 15px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n        font-family: 'Roboto', sans-serif;\r\n        -webkit-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n        height: 20px;\r\n        padding-top: 3px;\r\n        font-weight: 500;\r\n        width: 100%;\r\n    }\r\n\r\n    &.error > .app-form-error-container {\r\n        font-size: 10px;\r\n        font-weight: normal;\r\n        position: absolute;\r\n        background: transparent;\r\n        color: #F2405D;\r\n        -webkit-transition: 0.3s ease all;\r\n        -o-transition: 0.3s ease all;\r\n        transition: 0.3s ease all;\r\n        padding: 5px 30px;\r\n    }\r\n\r\n    &:hover {\r\n        input[type=\"checkbox\"] {\r\n            & ~ .checkmark {\r\n                background-color: #2196F3;\r\n                border:none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.disabled {\r\n        & > label {\r\n            cursor: not-allowed;\r\n            pointer-events: none;\r\n            color: lighten(#000, 50%)\r\n\r\n        }\r\n\r\n        &:hover {\r\n            input[type=\"checkbox\"] {\r\n                & ~ .checkmark {\r\n                    border: 1px solid #B4BBD0;\r\n                }\r\n            }\r\n        }\r\n\r\n        input[type=\"checkbox\"] {\r\n            position: absolute;\r\n            opacity: 0;\r\n            cursor: pointer;\r\n\r\n            & ~ .checkmark {\r\n                background-color: transparent;\r\n                //border: none;\r\n            }\r\n\r\n            &:checked {\r\n                & ~ .checkmark {\r\n                    background-color: lighten(#2196F3, 20%);\r\n                    border: none;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    input[type=\"checkbox\"] {\r\n        position: absolute;\r\n        opacity: 0;\r\n        cursor: pointer;\r\n\r\n        &:checked {\r\n            & ~ .checkmark {\r\n                background-color: #2196F3;\r\n                border: none;\r\n                &:after {\r\n                    display: block;\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    .checkmark {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 20px;\r\n        width: 20px;\r\n        border: 1px solid #B4BBD0;\r\n        @include border-radius(3px);\r\n\r\n        &:after {\r\n            content: \"\";\r\n            position: absolute;\r\n            display: none;\r\n            left: 10px;\r\n            top: 2px;\r\n            width: 7px;\r\n            height: 13px;\r\n            border: solid white;\r\n            border-width: 0 2px 2px 0;\r\n            -webkit-transform: rotate(45deg);\r\n            -ms-transform: rotate(45deg);\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        &.error-checkmark {\r\n            border-color: $red\r\n        }\r\n    }\r\n\r\n\r\n}\r\n\r\n.app-base-component-radio-layer {\r\n    margin-bottom: 10px;\r\n\r\n    & > label {\r\n        display: inline-block;\r\n        position: relative;\r\n        padding-left: 30px;\r\n        padding-right: 15px;\r\n        cursor: pointer;\r\n        font-size: 13px;\r\n        font-family: 'Roboto', sans-serif;\r\n        -webkit-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n        height: 20px;\r\n        padding-top: 3px;\r\n        font-weight: 500;\r\n        width: 100%;\r\n    }\r\n\r\n    &.error > .app-form-error-container {\r\n        font-size: 10px;\r\n        font-weight: normal;\r\n        position: absolute;\r\n        background: transparent;\r\n        color: #F2405D;\r\n        -webkit-transition: 0.3s ease all;\r\n        -o-transition: 0.3s ease all;\r\n        transition: 0.3s ease all;\r\n        padding: 5px 30px;\r\n    }\r\n\r\n    &:hover {\r\n        input[type=\"radio\"] {\r\n            & ~ .checkmark {\r\n                background-color: #2196F3;\r\n                border:none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.disabled {\r\n        & > label {\r\n            cursor: not-allowed;\r\n            pointer-events: none;\r\n            color: lighten(#000, 50%)\r\n\r\n        }\r\n\r\n        &:hover {\r\n            input[type=\"radio\"] {\r\n                & ~ .checkmark {\r\n                    border: 1px solid #B4BBD0;\r\n                }\r\n            }\r\n        }\r\n\r\n        input[type=\"radio\"] {\r\n            position: absolute;\r\n            opacity: 0;\r\n            cursor: pointer;\r\n\r\n            & ~ .checkmark {\r\n                background-color: transparent;\r\n            }\r\n\r\n            &:checked {\r\n                & ~ .checkmark {\r\n                    background-color: lighten(#2196F3, 20%);\r\n                    border: none;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    input[type=\"radio\"] {\r\n        position: absolute;\r\n        opacity: 0;\r\n        cursor: pointer;\r\n\r\n        &:checked {\r\n            & ~ .checkmark {\r\n                background-color: #2196F3;\r\n                border: none;\r\n                &:after {\r\n                    display: block;\r\n                }\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    .checkmark {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        height: 20px;\r\n        width: 20px;\r\n        border: 1px solid #B4BBD0;\r\n        @include border-radius(100%);\r\n\r\n        &:after {\r\n            content: \"\";\r\n            position: absolute;\r\n            display: none;\r\n            left: 5px;\r\n            top: 5px;\r\n            width: 10px;\r\n            height: 10px;\r\n            background: white;\r\n            @include border-radius(100%);\r\n\r\n        }\r\n\r\n        &.error-checkmark {\r\n            border-color: $red\r\n        }\r\n    }\r\n\r\n\r\n}\r\n\r\n.app-check-container-class {\r\n    width: 100%;\r\n    position: relative;\r\n    //display: flex;\r\n    //align-items: flex-start;\r\n    //justify-content: flex-start;\r\n    padding-top: 40px;\r\n\r\n    & > .app-check-title {\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        height: 40px;\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        font-size: 11px;\r\n        line-height: 11px;\r\n        font-weight: 600;\r\n        letter-spacing: .5px;\r\n        color: #1D2229;\r\n    }\r\n\r\n    & > .app-check-error-container {\r\n        position: absolute;\r\n        left: 0;\r\n        top: 30px;\r\n        width: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        font-size: 10px;\r\n        font-weight: normal;\r\n        background: transparent;\r\n        color: #F2405D;\r\n        -webkit-transition: 0.3s ease all;\r\n        -o-transition: 0.3s ease all;\r\n        transition: 0.3s ease all;\r\n        margin-top: -20px;\r\n\r\n        & + .app-check-title {\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            display: flex;\r\n            align-items: flex-start;\r\n        }\r\n    }\r\n\r\n\r\n}\r\n\r\nbutton.app-base-component-button {\r\n    font-size:14px;\r\n    display:inline-flex;\r\n    text-align:center;\r\n    width:auto;\r\n    height: 50px;\r\n    position:relative;\r\n    @include transition(0.2s all ease);\r\n    @include border-radius(4px);\r\n    background: white;\r\n    color:#738BA0;\r\n    font-family: 'Roboto', sans-serif;\r\n    border:1px solid $light;\r\n    padding: 0 10px;\r\n    align-items: center !important;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n\r\n    &:focus {\r\n        box-shadow: none !important;\r\n    }\r\n\r\n    &:disabled {\r\n        background: darken(#FFF, 3%);\r\n        border:1px solid lighten(#c5c5c5, 5%);\r\n        pointer-events: none;\r\n        cursor: none;\r\n        color: darken(#738BA0, 5%);\r\n\r\n        &:hover, &:focus {\r\n            box-shadow: none;\r\n            background: inherit;\r\n        }\r\n    }\r\n\r\n    i {\r\n        font-size: 20px !important;\r\n        position: relative;\r\n        margin-right: 10px;\r\n        margin-left: 10px;\r\n    }\r\n\r\n    &:hover, &:focus {\r\n        //box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);\r\n        background: white;\r\n    }\r\n\r\n    &:focus {\r\n        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\r\n    }\r\n\r\n    &.bold {\r\n        font-weight: bold;\r\n    }\r\n\r\n    &.uppercase {\r\n        text-transform:uppercase;\r\n    }\r\n\r\n    &.small {\r\n        height: 30px;\r\n        font-size: 12px;\r\n    }\r\n\r\n\r\n    &.blue {\r\n        background: $blue-gradient;\r\n        color:white;\r\n        border:1px solid $blue;\r\n\r\n        &:hover, &:focus {\r\n            box-shadow: 0 0px 17px rgba(25,33,255,.5);\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0px 17px rgba(25,33,255,.5);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten($blue, 20);\r\n            border:1px solid lighten($blue, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.blue-line {\r\n        background: white;\r\n        color:$blue;\r\n        border:1px solid $blue;\r\n\r\n        &:hover, &:focus {\r\n            background: white;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(white, 20);\r\n            border:1px solid lighten($blue, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.danger {\r\n        background: $red;\r\n        color:white;\r\n        border:1px solid $red;\r\n\r\n        &:hover, &:focus {\r\n            background: $red;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0 0 0.2rem rgba(245,29,108,.25);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten($red, 20);\r\n            border:1px solid lighten($red, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.danger-line {\r\n        background: white;\r\n        color:$red;\r\n        border:1px solid $red;\r\n\r\n        &:hover, &:focus {\r\n            background: white;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0 0 0.2rem rgba(245,29,108,.25);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(white, 20);\r\n            border:1px solid lighten($red, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.black {\r\n        background: black;\r\n        color:white;\r\n        border:1px solid black;\r\n\r\n        &:hover, &:focus {\r\n            background: black;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(black, 20);\r\n            border:1px solid lighten(black, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.black-line {\r\n        background: white;\r\n        color:black;\r\n        border:1px solid black;\r\n\r\n        &:hover, &:focus {\r\n            background: white;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: 0 0 0 0.2rem rgba(0,0,0,.25);\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(white, 20);\r\n            color:lighten(black, 50);\r\n            border:1px solid lighten(black, 80);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.custom {\r\n        background: #375a7f;\r\n        color:white;\r\n        border:1px solid #375a7f;\r\n\r\n        &:hover, &:focus {\r\n            background: #375a7f;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: none;\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(#375a7f, 20);\r\n            border:1px solid lighten(#375a7f, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.custom-line {\r\n        background: white;\r\n        color:#375a7f;\r\n        border:1px solid #375a7f;\r\n\r\n        &:hover, &:focus {\r\n            background: white;\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: none;\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(white, 30%);\r\n            border:1px solid lighten(#375a7f, 30%);\r\n            color: lighten(#375a7f, 30%);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    &.sap {\r\n        background: #F8F8F8;\r\n        color:#719FCA;\r\n        border:1px solid #c5c5c5;\r\n\r\n        &:hover, &:focus {\r\n            background: #F8F8F8;\r\n            @include box-shadow(none);\r\n            color: black\r\n        }\r\n\r\n        &:focus {\r\n            box-shadow: none;\r\n        }\r\n\r\n        &:disabled {\r\n            background: lighten(#F8F8F8, 20);\r\n            border:1px solid lighten(#F8F8F8, 20);\r\n            pointer-events: none;\r\n            cursor: none;\r\n\r\n            &:hover, &:focus {\r\n                box-shadow: none;\r\n                background: inherit;\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n}\r\n\r\n.btn.btn-default {\r\n    display:inline-flex;\r\n    text-align:center;\r\n    width:auto;\r\n    position:relative;\r\n    @include transition(0.2s all ease);\r\n    @include border-radius(4px);\r\n    background: white;\r\n    color:#738BA0;\r\n    font-family: 'Roboto', sans-serif;\r\n    border:1px solid #c5c5c5;\r\n    padding: 0 10px;\r\n    align-items: center !important;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    height: 24px;\r\n    font-size: 12px;\r\n    padding-top: 2px;\r\n\r\n    .caret {\r\n        transform: rotate(-45deg);\r\n        margin-left: 4px;\r\n        position: absolute;\r\n        right: 2px;\r\n        bottom: 3px;\r\n    }\r\n\r\n    &:focus {\r\n        box-shadow: none !important;\r\n    }\r\n\r\n    &:disabled {\r\n        background: darken(#FFF, 3%);\r\n        border:1px solid lighten(#c5c5c5, 5%);\r\n        pointer-events: none;\r\n        cursor: none;\r\n        color: darken(#738BA0, 5%);\r\n\r\n        &:hover, &:focus {\r\n            box-shadow: none;\r\n            background: inherit;\r\n        }\r\n    }\r\n\r\n    i {\r\n        font-size: 20px !important;\r\n        position: relative;\r\n        margin-right: 10px;\r\n        margin-left: 10px;\r\n    }\r\n\r\n    &:hover, &:focus {\r\n        //box-shadow: 0 2px 10px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.1);\r\n        background: white;\r\n    }\r\n\r\n    &:focus {\r\n        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);\r\n    }\r\n\r\n    &.bold {\r\n        font-weight: bold;\r\n    }\r\n\r\n    &.uppercase {\r\n        text-transform:uppercase;\r\n    }\r\n\r\n}\r\n\r\n.upload-btn-wrapper {\r\n    border: 1px solid #B4BBD0;\r\n    color: #B4BBD0;\r\n    background-color: white;\r\n    padding: 8px 20px;\r\n    @include border-radius(3px);\r\n    font-size: 20px;\r\n    font-weight: bold;\r\n    width: 100%;\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    text-align: center;\r\n    cursor: pointer;\r\n    position: relative;\r\n\r\n    svg {\r\n        font-size: 60px;\r\n    }\r\n\r\n    .select-type {\r\n        display: none;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        background: rgba(255,255,255,.7);\r\n        width: 100%;\r\n        height: 100%;\r\n        //display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        flex-direction: column;\r\n        padding: 20px;\r\n\r\n        svg {\r\n            font-size: 40px;\r\n            color: $red;\r\n            margin: 0 15px;\r\n        }\r\n    }\r\n\r\n    &:hover {\r\n        .select-type {\r\n            display: flex;\r\n        }\r\n    }\r\n\r\n    label.photo-label, button.camera-photo{\r\n        font-size:14px;\r\n        display:inline-flex;\r\n        text-align:center;\r\n        width:100%;\r\n        height: 50px;\r\n        position:relative;\r\n        @include transition(0.2s all ease);\r\n        @include border-radius(4px);\r\n        background: white;\r\n        color:$blue;\r\n        font-family: 'Roboto', sans-serif;\r\n        border:1px solid $blue;\r\n        padding: 0 10px;\r\n        align-items: center !important;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        margin: 10px;\r\n\r\n        &:hover {\r\n            color: white;\r\n            background: $blue;\r\n        }\r\n    }\r\n\r\n\r\n\r\n    input[type=\"file\"] {\r\n        display: none;\r\n    }\r\n\r\n\r\n}\r\n\r\n.camera-back {\r\n    position: fixed;\r\n    left:0;\r\n    top: 0;\r\n    z-index: 20;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0,0,0,.8);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    .camera-wrapper {\r\n        position: relative;\r\n        background: white;\r\n        width: 610px;\r\n        height: 460px;\r\n        padding: 5px;\r\n        @include border-radius(3px);\r\n\r\n        .shot-button {\r\n            position: absolute;\r\n            bottom: 20px;\r\n            border: 2px solid white;\r\n            width: 60px;\r\n            height: 60px;\r\n            left: 50%;\r\n            margin-left: -30px;\r\n            @include border-radius(100%);\r\n            cursor: pointer;\r\n            z-index: 3;\r\n\r\n            &:after {\r\n                content: '';\r\n                width: 50px;\r\n                height: 50px;\r\n                position: absolute;\r\n                left: 3px;\r\n                top: 3px;\r\n                background: white;\r\n                @include border-radius(100%);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n.select-photo-wrapper {\r\n    height: 100%;\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    img {\r\n        width: 100%;\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n    }\r\n\r\n    .select-type {\r\n        display: none;\r\n        position: absolute;\r\n        left: 0;\r\n        top: 0;\r\n        background: rgba(255,255,255,.7);\r\n        width: 100%;\r\n        height: 100%;\r\n        //display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        text-align: center;\r\n        flex-direction: column;\r\n        padding: 20px;\r\n\r\n        svg {\r\n            font-size: 40px;\r\n            color: $red;\r\n            margin: 0 15px;\r\n        }\r\n    }\r\n\r\n    &:hover {\r\n        .select-type {\r\n            display: flex;\r\n        }\r\n    }\r\n}*/\n"]}