{ "version": 3, "file": "styles.css", "sources": [ "../../Client/sass/styles.scss", "../../Client/sass/abstract/_global-variables.scss", "../../Client/sass/themes/_themes.scss", "../../Client/sass/abstract/_mixins.scss", "../../Client/sass/abstract/_main.scss", "../../Client/sass/vendors/_highcharts.scss", "../../Client/sass/vendors/_toastr.scss", "../../Client/sass/vendors/_bootstrap.scss", "../../Client/sass/vendors/_ag-grid.scss", "../../Client/sass/vendors/_materialUi.scss", "../../Client/sass/vendors/_daterangepicker.scss", "../../Client/sass/vendors/_mui.scss", "../../Client/sass/components/_alerts.scss", "../../Client/sass/components/_animations.scss", "../../Client/sass/components/_badge.scss", "../../Client/sass/components/_buttons.scss", "../../Client/sass/components/_panel.scss", "../../Client/sass/components/_pagination.scss", "../../Client/sass/components/_checkbox.scss", "../../Client/sass/components/_multiselect.scss", "../../Client/sass/components/_switch.scss", "../../Client/sass/components/_input-num.scss", "../../Client/sass/components/_input-group.scss", "../../Client/sass/components/_input.scss", "../../Client/sass/components/_radio.scss", "../../Client/sass/components/_modal.scss", "../../Client/sass/components/_tooltip.scss", "../../Client/sass/components/_upload.scss", "../../Client/sass/components/_numberRoulette.scss", "../../Client/sass/components/_tab-bar.scss", "../../Client/sass/components/_table.scss", "../../Client/sass/components/_react-select.scss", "../../Client/sass/components/_demo.scss", "../../Client/sass/components/_loading.scss", "../../Client/sass/components/_loadingV2.scss", "../../Client/sass/components/_gauge.scss", "../../Client/sass/components/_info.scss", "../../Client/sass/components/_dropdown.scss", "../../Client/sass/layout/_body.scss", "../../Client/sass/layout/_navigation.scss", "../../Client/sass/layout/_footer.scss", "../../Client/sass/layout/_doc-section.scss", "../../Client/sass/layout/_dashboard.scss", "../../Client/sass/layout/_filters.scss", "../../Client/sass/layout/_rightDrawer.scss", "../../Client/sass/pages/general/_login.scss", "../../Client/sass/pages/general/_landing-page.scss", "../../Client/sass/pages/research/_articles.scss", "../../Client/sass/pages/research/_archives.scss", "../../Client/sass/pages/research/_monthly-battlemaps.scss", "../../Client/sass/pages/research/_battlemaps.scss", "../../Client/sass/pages/research/_darkpool.scss", "../../Client/sass/pages/sandbox/styles.scss", "../../Client/sass/pages/settings/_settings-landing.scss", "../../Client/sass/pages/settings/_change-password.scss", "../../Client/sass/pages/settings/_software-download.scss", "../../Client/sass/pages/settings/_documentation.scss", "../../Client/sass/pages/settings/_settings.scss", "../../Client/sass/pages/settings/_venues.scss", "../../Client/sass/pages/settings/_contact-us.scss", "../../Client/sass/pages/venuestats/_battlemap.scss", "../../Client/sass/pages/venuestats/_venue-statistics.scss", "../../Client/sass/pages/surveillance/_insider-list.scss", "../../Client/sass/pages/tca/_orderDetails.scss", "../../Client/sass/pages/tca/_orderDetailsPrintView.scss", "../../Client/sass/pages/tca/_commentary.scss", "../../Client/sass/pages/tca/_heatmap.scss", "../../Client/sass/pages/tca/_reports.scss", "../../Client/sass/pages/tca/_executions.scss", "../../Client/sass/pages/dataManager/_data-manager.scss" ], "sourcesContent": [ "/*7-1 pattern see more at https://sass-guidelin.es/#architecture*/\n/*importation of all the scss*/\n\n/*fonts*/\n@import url('https://fonts.googleapis.com/css?family=Chivo:100,300,400,700,900');\n\n/*variables*/\n@import 'abstract/global-variables';\n\n/*themes*/\n@import 'themes/themes';\n\n\n/*abstracts*/\n@import 'abstract/global-variables';\n@import 'abstract/mixins';\n@import 'abstract/main';\n\n/*vendors*/\n@import 'themes/themes';\n@import 'vendors/highcharts';\n@import 'vendors/toastr';\n@import 'vendors/bootstrap';\n@import 'vendors/ag-grid';\n@import 'vendors/materialUi';\n@import 'vendors/daterangepicker';\n@import 'vendors/mui';\n\n/*components*/\n@import 'components/alerts';\n@import 'components/animations';\n@import 'components/badge';\n@import 'components/buttons';\n@import 'components/panel';\n@import 'components/pagination';\n@import 'components/checkbox';\n@import 'components/multiselect';\n@import 'components/switch';\n@import 'components/input-num';\n@import 'components/input-group';\n@import 'components/input';\n@import 'components/radio';\n@import 'components/modal';\n@import 'components/tooltip';\n@import 'components/upload';\n@import 'components/numberRoulette';\n@import 'components/tab-bar';\n@import 'components/table';\n@import 'components/react-select';\n@import 'components/demo';\n@import 'components/loading';\n@import 'components/loadingV2';\n@import 'components/gauge';\n@import 'components/info';\n@import 'components/dropdown';\n\n/*layout*/\n@import 'layout/body';\n@import 'layout/navigation';\n@import 'layout/footer';\n@import 'layout/doc-section';\n@import 'layout/dashboard';\n@import 'layout/filters';\n@import 'layout/rightDrawer';\n\n/*pages*/\n@import 'pages/general/login';\n@import 'pages/general/landing-page';\n@import 'pages/research/articles';\n@import 'pages/research/archives';\n@import 'pages/research/monthly-battlemaps';\n@import 'pages/research/battlemaps';\n@import 'pages/research/darkpool';\n@import 'pages/sandbox/styles';\n@import 'pages/settings/settings-landing';\n@import 'pages/settings/change-password';\n@import 'pages/settings/software-download';\n@import 'pages/settings/documentation';\n@import 'pages/settings/settings';\n@import 'pages/settings/venues';\n@import 'pages/settings/contact-us';\n@import 'pages/venuestats/battlemap';\n@import 'pages/venuestats/venue-statistics';\n@import 'pages/surveillance/insider-list';\n@import 'pages/tca/orderDetails';\n@import 'pages/tca/orderDetailsPrintView';\n@import 'pages/tca/commentary';\n@import 'pages/tca/heatmap';\n@import 'pages/tca/reports';\n@import 'pages/tca/executions';\n@import 'pages/dataManager/data-manager';", "/************************************\n COLOURS\n************************************/\n$primary-blue: rgb(38, 183, 205);\n$primary-grey-dark: rgb(87, 87, 87);\n$primary-grey-light: rgb(231, 231, 231);\n$secondary-dark-blue: rgb(0, 32, 51);\n$secondary-dark-blue-variant-one: rgba(38, 183, 205, 0.15);\n$secondary-orange: rgb(241, 90, 36);\n$secondary-tca: rgb(54, 105, 211);\n$secondary-tca-light: #335cad;\n$secondary-survaillance: rgb(204, 63, 17);\n$secondary-venuestats: rgb(249, 162, 21);\n$secondary-research: rgb(137, 57, 157);\n\n$primary-color: $primary-blue;\n$primary-blue-transparent: rgba(38, 183, 205, 0.5);\n$primary-blue-variant-one: #26b7cd;\n$light-blue-background-color: #1f91a2;\n$light-blue-background-variant-one: #019BBD;\n$danger-color: #ED5565;\n$primary-hover: rgb(31, 145, 162);\n\n$white: rgb(255, 255, 255);\n$white-variant: #f0f7ff;\n$white-variant-one: #f6f7f8;\n$white-variant-two: #ddd;\n$white-variant-three: #f9f9f9;\n$white-variant-four:#dedede;\n$white-variant-five: #f0f0f0;\n$white-variant-six: #e7e9eb;\n$white-variant-seven: #f7f7f7;\n$white-variant-eight: #cfcfcf;\n$white-variant-nine: #b0b0b0;\n$white-variant-ten: #f0f1f1f7;\n$white-variant-eleven: #e8e8e8;\n$white-variant-twelve: #f8f8f8;\n$white-variant-twelve: rgba(255,255,255,.6);\n$white-variant-thirteen: rgba(255, 255, 255, .1);\n$white-variant-fourteen: #fafafa;\n$white-variant-fifteen: #eee;\n$white-variant-sixteen: #ccd6eb;\n$white-variant-seventeen: #e6e6e6;\n$white-variant-eighteen: #f2f2f2;\n$white-variant-ninteen: #EAEAEA;\n$white-variant-twenty: #e0e0e0;\n$white-variant-twentyone: rgb(192, 192, 192);\n$light-theme-color: #ccc;\n\n$light-mode-border-color: rgba(255, 255, 255, 0.18);\n$light-mode-hover-border-color: rgba(236, 240, 241, 0.5);\n$transparent-dark-bg: rgba(0, 13, 21, 0.9);\n$dark-color: rgba(0, 0, 0, 0);\n$dark-color-full-opacity: rgba(0, 0, 0, 1);\n$dark-variant-color: rgba(0, 0, 0, .2);\n$dark-variant-color-one: rgba(0, 0, 0, .3);\n$dark-variant-color-two: #091d2a;\n$dark-variant-color-three: rgba(0, 0, 0, 0.08);\n$dark-variant-color-four: rgba(0, 0, 0, 0.1);\n$dark-variant-color-five: #162230;\n$dark-variant-color-six: rgba(0, 0, 0, .5);\n$dark-variant-color-seven: rgba(255, 255, 255, 0.03);\n$dark-variant-color-eight: rgba(0, 0, 0, 0.4);\n$dark-variant-color-nine: rgba(0, 0, 0, 0.25);\n$dark-variant-color-ten: rgba(0, 0, 0, 0.06);\n$dark-variant-color-eleven: rgba(0,0,0,0.15);\n$dark-variant-color-twelve: rgba(192, 192, 192, 0.0001);\n$dark-scroll-bar: rgb(30, 43, 51);\n$dark-scroll-bar-hover:rgb(20, 33, 41);\n\n$dark-grey-color: #222;\n$disabled-primary-color: rgba(255,255,255,0.5);\n$disabled-background-color: #343536;\n$body-background-color: #3d4d5c;\n$grey-color: rgba(128, 128, 128, 1);\n$grey-variant-color: rgba(255,255,255,.2);\n$grey-variant-color-one: rgba(255,255,255,.1);\n$grey-variant-color-two: #555;\n$grey-variant-color-three: #2d3436;\n$grey-variant-color-four: #313436;\n$grey-variant-color-five: #455159;\n$grey-variant-color-six: #999;\n$grey-variant-color-seven: #aaa;\n$grey-variant-color-eight: #888;\n$grey-variant-color-nine: #444;\n$grey-variant-color-ten: #666666;\n$grey-variant-color-eleven: rgba(255,255,255,.4);\n$grey-variant-color-twelve: rgba(236, 240, 241, 0.2);\n$grey-variant-color-dark: rgba(51, 51, 51, 1);\n$dark-theme-bg-dark: #273644;\n$dark-theme-bg-darker: #16222b;\n$dark-theme-bg-dark-variant: #161e2b;\n$dark-theme-bg-light-variant: #28353d;\n$dark-border-background: rgba(255,255,255,.15);\n$panel-divider-color: rgba(255,255,255, 0.07);\n\n$btn-text-disabled-background-color: rgba(0,0,0,0.03);\n$btn-light-mode-border-color: rgba(236, 240, 241, 0.3);\n$btn-outlined-disabled-background-color: rgba(0,0,0,0.05);\n$box-shadow-style: 0 1px 4px rgba(0, 0, 0, 0.6);\n$scroll-background-color: #668099;\n$scroll-hover-background-color: #809ab3;\n\n$success-color: #078800;\n$error-color: #d80000;\n$light-orange: #E7C2BB;\n$global-yellow: #FFDB54dd;\n$navy-blue: #0050B8;\n\n/************************************\n MARGINS AND PADDINGS\n************************************/\n$xl: 30px;\n$l: 20px;\n$m: 15px;\n$s:10px;\n$xs: 5px;\n\n\n/************************************\n FONTS\n************************************/\n$font-size-btn: 12px;\n$font-xs: 11px;\n$font-s: 13px;\n$font-m: 15px;\n$font-l: 17px;\n$font-xl: 19px;\n$title-s: 20px;\n$title-m: 24px;\n$title-l: 28px;\n\n/************************************\n FONT FAMILY\n************************************/\n\n$global-font-family: \"Chivo\", \"open sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", \"sans-serif\";\n$font-awesome-pro: \"Font Awesome 5 Pro\";\n\n\n/************************************\n CHECKBOX\n************************************/\n$lm-checkbox-checked-color: $primary-color;\n$lm-checkbox-border-color: rgba(53, 53, 53, 0.54);\n$lm-checkbox-border-color-disabled: rgba(53, 53, 53, 0.26);\n$lm-checkbox-checked-color-disabled: rgba(53, 53, 53, 0.26);\n\n$lm-checkbox-size: 1.25em;\n$lm-checkbox-padding: .25em;\n$lm-checkbox-border-width: 2px;\n$lm-checkbox-border-radius: 0.125em;\n$lm-checkmark-width: 0.125em;\n$lm-checkmark-color: $white;\n$lm-checkbox-label-padding: 1.25em;\n\n/************************************\n RADIO BUTTONS\n************************************/\n$lm-radio-checked-color: $primary-color;\n$lm-radio-border-color: #777;\n$lm-radio-size: 20px;\n$lm-radio-checked-size: 10px;\n$lm-radio-ripple-size: 15px;\n\n\n.lm-link {\n display: block;\n height: 11px;\n\n span {\n position: relative;\n top: -3px;\n }\n}\n\n/************************************\n OTHERS\n************************************/\n\n$high-z-index: 99999;\n\n$standard-height: calc(100vh - 60px);\n$standard-width: calc(100% - 65px);\n$loader-position: calc(50% - 25px);\n$standard-size: calc(100% - 70px);\n$panel-padding: 10px;", "//to find more about how themes are working go to:\n//https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1\n\n$scrollbar-theme:(\n light:(\n scrollbarBackground: $white-variant-six,\n scrollbarBar: #000f1a73,\n scrollbarBarHover: #000f1ab3,\n ),\n dark:(\n scrollbarBackground: $dark-variant-color-two,\n scrollbarBar: $scroll-background-color,\n scrollbarBarHover: $scroll-hover-background-color,\n )\n);\n\n$themes: (\n light: (\n color: $dark-grey-color,\n backgroundColor: $white-variant-six,\n fontWeight: 400,\n panelBackground: $white,\n\n sidenavBackground: $white,\n sidenavColor: $dark-grey-color,\n sidenavBorderRight: none,\n sidenavDividersColor: $white-variant-two,\n panelBorder: none,\n panelHeadingBackground: $white,\n panelBodySecondaryBackground: $white-variant-fourteen,\n panelHeadingBorder: 2px solid $white-variant-fifteen,\n panelHeadingColor: $dark-grey-color,\n panelBodyBackground: $white,\n panelBodyColor: $dark-grey-color,\n\n hr: $white-variant-fifteen,\n hrDarker: $white-variant-eight,\n ),\n dark: (\n color: $white-variant-eleven,\n backgroundColor: $body-background-color,\n fontWeight: 100,\n panelBackground: $dark-theme-bg-dark,\n\n sideavBackground: $dark-theme-bg-light-variant,\n sidenavColor: $white,\n sidenavBorderRight: none,\n sidenavDividersColor: $grey-variant-color-nine,\n panelBorder: 1px solid $transparent-dark-bg,\n panelHeadingBackground: $transparent-dark-bg,\n panelBodySecondaryBackground: $white,\n panelHeadingBorder: 2px solid lighten($transparent-dark-bg,10%),\n panelHeadingColor: $white,\n panelBodyBackground: $white,\n panelBodyColor: $dark-grey-color,\n\n hr: rgba(255,255,255,.08),\n hrDarker: rgba(255,255,255,.18),\n )\n);\n@mixin themify($themes) {\n @each $theme, $map in $themes {\n .theme-#{$theme} & {\n $theme-map: () !global;\n\n @each $key, $submap in $map {\n $value: map-get(map-get($themes, $theme), '#{$key}');\n $theme-map: map-merge($theme-map, ($key: $value)) !global;\n }\n\n @content;\n $theme-map: null !global;\n }\n }\n}\n\n@function themed($key) {\n @return map-get($theme-map, $key);\n}\n", "\n//COMPONENTS\n//panels\n@mixin panel($background-color: $white, $border-color: $white-variant-fifteen, $border-radius: 3px, $padding: $s) {\n background-color: $background-color;\n padding: $padding;\n box-shadow: 0 2px 6px 0 $dark-variant-color-ten;\n border-radius: $border-radius;\n}\n\n//buttons\n@mixin btn($padding: 0px, $background-color: $white-variant-fourteen, $border: 1px solid $light-theme-color, $color: $primary-grey-dark, $border-radius: 3px) {\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n @include transition(500ms);\n border-radius: $border-radius;\n border: $border;\n background-color: $background-color;\n box-shadow: 0 1px 1px 0 rgba(0,0,0,0.12);\n color: $color;\n cursor: pointer;\n padding: $padding;\n text-decoration: none;\n &:hover {\n background-color: darken($background-color,5%);\n }\n &:focus {\n outline: none;\n }\n}\n\n@mixin btn-types($padding: 0, $font-size: 13px, $height: 30px, $width: 30px, $min-width: 30px) {\n padding: 0;\n font-size: $font-size;\n height: $height;\n width: $width;\n min-width: $min-width;\n}\n\n\n@mixin info-icon-type($font-size: 15px, $opacity: 0.2, $opacity-hover: 1) {\n font-size: $font-size;\n opacity: $opacity;\n &:hover{\n opacity: $opacity-hover;\n }\n}\n\n@mixin icon-btn-type($font-size: 20px, $opacity: 0.4, $hover-opacity: 1) {\n @include transition(200ms);\n font-size: $font-size;\n opacity: $opacity;\n &:hover{\n opacity: $hover-opacity;\n }\n}\n\n@mixin article-value($text-align: center, $background: $light-orange, $font-weight: bold, $font-size: 18px) {\n text-align: $text-align;\n background: $background;\n font-weight: $font-weight;\n font-size: $font-size;\n}\n\n@mixin form-control-style($background-color: transparent, $border-color: $btn-light-mode-border-color, $color:$white, $option-color: $grey-variant-color-dark) {\n background-color: $background-color !important;\n border-color: $border-color;\n color: $color;\n option {\n color: $option-color;\n }\n}\n\n@mixin tooltip-position($right: 0, $left: 0, $top: 0, $bottom: 0, $margin: 0) {\n right: $right;\n left: $left;\n top: $top;\n bottom: $bottom;\n margin: $margin;\n}\n\n@mixin ag-cell-color($background-color: $global-yellow,$color: $dark-grey-color,$fill: $dark-grey-color,$font-weight: 400, $justify-content: center) {\n background-color: $background-color;\n color: $color;\n fill: $fill;\n font-weight: $font-weight;\n justify-content: $justify-content;\n}\n\n@mixin highcharts-stroke-style {\n stroke-linejoin: round;\n stroke: $white;\n}\n@mixin highcharts-stroke-inherit {\n fill: inherit;\n stroke: inherit;\n}\n\n//CSS ASSISTANTS\n@mixin transform($str) {\n -webkit-transform: $str;\n -moz-transform: $str;\n -ms-transform: $str;\n -o-transform: $str;\n transform: $str;\n}\n\n@mixin transition($str...) {\n -webkit-transition: $str;\n -moz-transition: $str;\n -o-transition: $str;\n transition: $str;\n transition-timing-function: ease;\n -webkit-transition-timing-function: ease;\n}\n\n@mixin unselectable() {\n -moz-user-select: none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n@mixin width-fit-content {\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n@mixin height-fit-content {\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n}\n\n@mixin height-fit-available {\n height: -webkit-fill-available;\n height: -moz-available;\n height: fill-available;\n}\n\n@mixin flex {\n display: -webkit-box;\n display: -moz-box;\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n}\n@mixin flex-direction-c {\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n@mixin flex-shrink($value: 0) {\n -ms-flex-negative: $value;\n flex-shrink: $value;\n}\n\n@mixin flex-grow($value: 1) {\n -webkit-box-flex: $value;\n -ms-flex-positive: $value;\n flex-grow: $value\n}\n\n@mixin flex-wrap {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n}\n\n//align items\n@mixin flex-align-s {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n@mixin flex-align-st {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n@mixin flex-align-c {\n -webkit-box-align: center;\n -moz-box-align: center;\n -ms-flex-align: center;\n -webkit-align-items: center;\n align-items: center;\n}\n@mixin flex-align-e {\n -webkit-box-align: end;\n -moz-box-align: end;\n -ms-flex-align: end;\n -webkit-align-items: flex-end;\n align-items: flex-end;\n}\n\n//justify-content\n@mixin flex-justify-s {\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n}\n@mixin flex-justify-c {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n@mixin flex-justify-sb {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n@mixin flex-justify-sa {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n@mixin flex-justify-se {\n justify-content: space-evenly;\n}\n@mixin flex-justify-e {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n}\n\n\n//MEDIA QUERIES\n//example of usage:\n/*\n .site-header {\n padding: 2rem;\n font-size: 1.8rem;\n @include mq('tablet-wide') {\n padding-top: 4rem;\n font-size: 2.4rem;\n }\n }\n*/\n$breakpoints: ( \"phone\": 400px, \"phone-wide\": 480px, \"phablet\": 560px, \"tablet-small\": 640px, \"tablet\": 768px, \"tablet-wide\": 1024px, \"desktop\": 1248px, \"desktop-wide\": 1440px );\n@mixin mq($width, $type: min) {\n @if map_has_key($breakpoints, $width) {\n $width: map_get($breakpoints, $width);\n @if $type == max {\n $width: $width - 1px;\n }\n @media only screen and (#{$type}-width: $width) {\n @content;\n }\n }\n}\n\n@mixin wrapInView($views) {\n @each $view in $views{\n .view-#{$view} & {\n @content;\n }\n }\n}\n\n//wrapInView example\n.TEST-makeRedOnSmAndMd{\n color:white;\n @include wrapInView(('sm','md')){\n color:red;\n }\n}\n\n//positions\n\n@mixin margin-size($margin: 0) {\n margin: $margin;\n}", "@import '_mixins.scss';\n\n//flex\n.flex{ @include flex; }\n.flex-align-s{ @include flex-align-s; }\n.flex-align-st{ @include flex-align-st; }\n.flex-align-c{ @include flex-align-c; }\n.flex-align-e{ @include flex-align-e; }\n.flex-justify-c{ @include flex-justify-c; }\n.flex-justify-sb{ @include flex-justify-sb; }\n.flex-justify-sa{ @include flex-justify-sa; }\n.flex-justify-se{ @include flex-justify-se; }\n.flex-justify-e{ @include flex-justify-e; }\n.flex-direction-c{ @include flex-direction-c; }\n.flex-direction-c-xs{ @media only screen and (max-width: 650px) { @include flex-direction-c; } }\n.flex-direction-c-sm{ @media only screen and (max-width: 800px) { @include flex-direction-c; } }\n.flex-direction-c-md{ @media only screen and (max-width: 1150px) { @include flex-direction-c; } }\n.flex-shrink-0{ @include flex-shrink; }\n.flex-grow{ @include flex-grow; }\n.flex-wrap{ flex-wrap:wrap }\n.flex-responsive-xs {\n width: 100%;\n\n @media only screen and (max-width: 650px) {\n & > * {\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n margin-top: 15px;\n width: 100%;\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n}\n.flex-responsive-sm {\n width: 100%;\n @media only screen and (max-width: 800px) {\n & > * {\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n margin-top: 15px;\n width: 100%;\n &:first-child{\n margin-top:0;\n }\n }\n }\n}\n.flex-responsive-md {\n width: 100%;\n\n @media only screen and (max-width: 1150px) {\n & > * {\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n margin-top: 15px;\n width: 100%;\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n}\n\n//position\n.absolute{ position:absolute; }\n.relative{ position:relative; }\n\n//cursor\n.pointer{ cursor:pointer; }\n\n//alignments\n.push-left { float: left; }\n.push-right { float: right; }\n.vertical-align-top { vertical-align: top; }\n.text-no-wrap{ white-space:nowrap; }\n.text-align-justify { text-align: justify; }\n.text-align-center { text-align: center; }\n.text-align-right { text-align: right; }\n.text-align-left { text-align: left; }\n\n//measurements\n.h-100{ height:100%; }\n.h-95{ height:95%; }\n.h-87{ height: 87%; }\n.h-200px{ height:200px }\n.h-400px{ height: 400px}\n.h-50v{ height:50vh }\n.h-inherit{ height: inherit; }\n.w-inherit{ width: inherit; }\n.w-100{ width:100%; }\n.w-90{ width:90%; }\n.w-80{ width:80%; }\n.w-70{ width:70%; }\n.w-66{ width:66.6666%; }\n.w-60{ width:60%; }\n.w-50{ width:50%; }\n.w-40{ width:40%; }\n.w-30{ width:30%; }\n.w-33{ width:33.3333%; }\n.w-25{ width:25%; }\n.w-20{ width:20%; }\n.w-15{ width:15%; }\n.w-10{ width:10%; }\n.w-1{ width: 1%; }\n.w-fit{ @include width-fit-content; }\n\n.w-100-px { width: 100px }\n\n.w-270-px { width: 270px; }\n\n.w-280-px { width: 280px }\n\n.w-300-px { width: 300px }\n\n.w-350-px { width: 350px }\n\n.w-550-px { width: 550px }\n\n.w-1050-px { width: 1050px }\n\n//small fixes to the tags defaults\nhr{\n @include themify($themes) {\n border-top-color: themed('hr');\n }\n width:100%;\n &.hr-darker{\n @include themify($themes) {\n border-top-color: themed('hrDarker');\n }\n }\n}\n\na {\n cursor: pointer;\n color: $primary-color;\n &:hover {\n color: $primary-color;\n }\n &:focus, &:active {\n color: darken($primary-color,10%);\n }\n}\n\n//typography\nh1, h2, h3, h4, h5, h6 {\n font-weight: 100; }\n\nh1 {\n font-size: 30px; }\nh2 {\n font-size: 24px; }\nh3 {\n font-size: 16px; }\nh4 {\n font-size: 14px; }\nh5 {\n font-size: 12px; }\nh6 {\n font-size: 10px; }\nh3, h4, h5 {\n font-weight: 600; }\n\n.font-size-16 { font-size: 16px }\n.font-size-15 { font-size: 15px }\n.font-size-14 { font-size: 14px }\n.font-size-12 { font-size: 12px }\n.font-style-i { font-style: italic }\n\ni {\n font-style: initial;\n}\n.light{\n font-weight:100;\n}\n.medium{\n font-weight:400;\n}\n.bold {\n font-weight: 600;\n}\n.extra-bold {\n font-weight: 700;\n}\n.chart-font-family {\n font-size: 25px;\n font-weight: 100;\n font-family: Chivo;\n}\n.MuiTypography-colorTextSecondary{\n @include themify($themes) {\n color: themed('color');\n }\n}\n\n//margins and paddings\n.no-margin { margin: 0 !important }\n.margin-auto { margin: auto }\n.no-padding { padding: 0 }\n.no-padding-left { padding-left: 0 }\n\n.p-xxs { padding: 5px;}\n.p-b-xxs { padding-bottom: 5px;}\n.p-xs { padding: 10px;}\n.p-sm { padding: 15px;}\n.p { padding: 20px;}\n.p-t { padding: 20px; }\n.p-t-sm { padding-top: 15px; }\n.p-r { padding-right: 20px; }\n.p-md { padding: 25px;}\n.p-x-md { padding: 0 25px 0 25px;}\n.p-lg { padding: 30px;}\n.p-xl { padding: 40px;}\n.p-b-xl { padding-bottom: 40px;}\n.p-w-xxs { padding: 0 5px;}\n.p-w-xs { padding: 0 10px;}\n.p-w-sm { padding: 0 15px;}\n.p-w { padding: 0 20px;}\n.p-w-md { padding: 0 25px;}\n.p-w-lg { padding: 0 30px;}\n.p-w-xl { padding: 0 40px;}\n.p-h-xxs { padding: 5px 0;}\n.p-h-xs { padding: 10px 0;}\n.p-h-sm { padding-top: 15px; padding-bottom:15px }\n.p-h { padding: 20px 0;}\n.p-h-md { padding-top: 25px; padding-bottom:25px }\n.p-h-lg { padding-top: 30px; padding-bottom:30px }\n.p-h-xl { padding-top: 40px; padding-bottom:40px }\n.p-l-60 { padding-left: 60px }\n.title-padding { padding: 40px 0 30px 0 }\n\n.m-auto { margin:auto}\n.m-xs { margin: 5px;}\n.m-sm { margin: 10px;}\n.m { margin: 15px;}\n.m-md { margin: 20px;}\n.m-lg { margin: 30px;}\n.m-xl { margin: 50px;}\n.m-l-none { margin-left: 0;}\n.m-l-xs { margin-left: 5px;}\n.m-l-sm { margin-left: 10px;}\n.m-l { margin-left: 15px;}\n.m-l-md { margin-left: 20px;}\n.m-l-lg { margin-left: 30px;}\n.m-l-xl { margin-left: 40px;}\n.m-l-100 { margin-left: 100px;}\n.m-t- { margin-top: -15px; }\n.m-t--sm { margin-top:-10px; }\n.m-t-none { margin-top: 0;}\n.m-t-xs { margin-top: 5px;}\n.m-t-sm { margin-top: 10px }\n.m-t { margin-top: 15px;}\n.m-t-md { margin-top: 20px;}\n.m-t-lg { margin-top: 30px;}\n.m-t-xl { margin-top: 40px;}\n.m-r--xs { margin-right: -5px; }\n.m-r-none { margin-right: 0;}\n.m-r-xs { margin-right: 5px;}\n.m-r-sm { margin-right: 10px;}\n.m-r { margin-right: 15px;}\n.m-r-md { margin-right: 20px;}\n.m-r-lg { margin-right: 30px;}\n.m-r-xl { margin-right: 40px;}\n.m-b- { margin-bottom: -15px; }\n.m-b--sm { margin-bottom:-10px; }\n.m-b-none { margin-bottom: 0;}\n.m-b-xs { margin-bottom: 5px;}\n.m-b-sm { margin-bottom: 10px;}\n.m-b { margin-bottom: 15px;}\n.m-b-md { margin-bottom: 20px;}\n.m-b-lg { margin-bottom: 30px;}\n.m-b-xl { margin-bottom: 40px;}\n\n//breakpoints classes\n.no-margin-xs {\n @media only screen and (max-width: 650px) {\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n }\n}\n.no-margin-sm {\n @media only screen and (max-width: 800px) {\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n }\n}\n.no-margin-md {\n @media only screen and (max-width: 1150px) {\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n }\n}\n\n.no-padding-xs {\n @media only screen and (max-width: 650px) {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n padding-left: 0;\n }\n}\n.no-padding-sm {\n @media only screen and (max-width: 800px) {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n padding-left: 0;\n }\n}\n.no-padding-md {\n @media only screen and (max-width: 1150px) {\n padding-top: 0;\n padding-right: 0;\n padding-bottom: 0;\n padding-left: 0;\n }\n}\n\n.m-t-sm_xs {\n @media only screen and (max-width: 650px) {\n margin-top: 10px;\n }\n}\n.m-t-sm_sm {\n @media only screen and (max-width: 800px) {\n margin-top: 10px;\n }\n}\n.m-t-sm_md {\n @media only screen and (max-width: 1150px) {\n margin-top: 10px;\n }\n}\n\n.m-t_xs {\n @media only screen and (max-width: 650px) {\n margin-top: 15px;\n }\n}\n.m-t_sm {\n @media only screen and (max-width: 800px) {\n margin-top: 15px;\n }\n}\n.m-t_md {\n @media only screen and (max-width: 1150px) {\n margin-top: 15px;\n }\n}\n\n.m-t-md_xs {\n @media only screen and (max-width: 650px) {\n margin-top: 20px;\n }\n}\n.m-t-md_sm {\n @media only screen and (max-width: 800px) {\n margin-top: 20px;\n }\n}\n.m-t-md_md {\n @media only screen and (max-width: 1150px) {\n margin-top: 20px;\n }\n}\n\n.push-left {\n float: left;\n}\n\n.push-right {\n float: right;\n}\n.clear-both {\n clear: both;\n}\n\n.hide {\n display: none;\n}\n\n.visibility-hidden {\n visibility: hidden;\n}\n\n.visibility-visible {\n visibility: visible;\n}\n\n.visibility-collapse {\n visibility: collapse;\n}\n\n.home-icon-link {\n .tooltip.bottom {\n width: 160px;\n }\n}\n\n.start-page-icon {\n font-size: $font-m;\n position: absolute;\n margin: 8px 0 0 8px;\n}\n\n.close-icon {\n color: $grey-variant-color-two;\n}\n\n.client-type-icon {\n margin-left: 8px;\n font-size: 23px;\n margin-right: 8px;\n}\n\n.start-page-icon-container {\n color: $primary-blue-variant-one;\n}\n\n// colors\n.color-grey { color: rgba(128, 128, 128, 1) }\n.color-active { color: $primary-color; }\n.color-disabled { color: $grey-variant-color-six; }\n.color-error { color: $danger-color; }\n\n// others\n.overflow-auto { overflow: auto }\n\n.display-none { display: none }\n\n.display-inline-block { display: inline-block }\n\n.border-none { border: none }\n.no-border-left { border-left: none }\n.no-border-top { border-top: none }\n.print-box-border { border: 1px solid #e2e2e2 !important }\n \n\n.left-auto { left: auto }\n\n.mvc-filter-options {\n display: none;\n}\n\n.no-box-shadow { box-shadow: none;}", "/**\n * @license Highcharts\n *\n * (c) 2009-2016 Torstein Honsi\n *\n * License: www.highcharts.com/license\n */\n\n $highcharts-theme: (\n light:(\n background: $white,\n pointStroke:1px,\n heatmapStroke: rgba(0, 13, 21, .09),\n legendColorPie: $grey-variant-color-ten,\n textColor: $dark-theme-bg-dark,\n scrollbarThumb: #000f1a73,\n scrollbarTrack: #e7e9eb\n ),\n dark:(\n background: $dark-theme-bg-dark,\n colorAxesTitle: $disabled-primary-color,\n colorAxesValues: $disabled-primary-color,\n lineColor: $grey-variant-color-one,\n seriesStroke: $dark-theme-bg-dark,\n seriesStrokePie: #28353d94,\n legendColor: $white-variant-eleven,\n stackLabelColor: $white-variant-eleven,\n legendColorPie: $disabled-primary-color,\n legendWeight: 400,\n hiddenLegendColor: rgba(255, 255, 255, .3),\n pointStroke:1px,\n heatmapStroke: $grey-variant-color-eleven,\n textColor: $white, \n scrollbarThumb: #668099,\n scrollbarTrack: #1e2b33\n )\n);\n\ndiv[data-highcharts-chart] {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.highcharts-container {\n position: relative;\n overflow: hidden;\n width: 100%;\n height: 100%;\n text-align: left;\n line-height: normal;\n z-index: 0;\n /* #1072 */\n -webkit-tap-highlight-color: $dark-color;\n font-family: \"Chivo\", Arial, Helvetica, sans-serif;\n font-size: 12px;\n}\n\n.highcharts-root {\n display: block;\n}\n\n.highcharts-root text {\n stroke-width: 0;\n}\n\n.highcharts-strong {\n font-weight: bold;\n}\n\n.highcharts-emphasized {\n font-style: italic;\n}\n\n.highcharts-anchor {\n cursor: pointer;\n}\n\n.highcharts-background {\n fill: $white;\n\n @include themify($highcharts-theme) {\n fill: themed('background');\n }\n}\n\n.highcharts-plot-border,\n.highcharts-plot-background {\n fill: none;\n}\n\n.highcharts-label-box {\n fill: none;\n}\n\n.brokerscorecard-heatmap {\n .highcharts-label-box {\n fill: $dark-theme-bg-dark-variant;\n }\n}\n\n.highcharts-button-box {\n fill: inherit;\n}\n\n.highcharts-tracker-line {\n stroke-linejoin: round;\n stroke: $dark-variant-color-twelve;\n stroke-width: 22;\n fill: none;\n}\n\n.highcharts-tracker-area {\n fill: $dark-variant-color-twelve;\n stroke-width: 0;\n}\n\n/* Titles */\n.highcharts-title {\n font-family: $global-font-family;\n fill: $grey-variant-color-dark;\n font-size: 1.5em;\n}\n\n.highcharts-subtitle {\n fill: $grey-variant-color-ten;\n}\n\n/* Axes */\n.highcharts-axis-line {\n fill: none;\n stroke: $white-variant-sixteen;\n\n @include themify($highcharts-theme) {\n stroke: themed('lineColor');\n }\n}\n\n.highcharts-axis {\n .highcharts-tick {\n @include themify($highcharts-theme) {\n stroke: themed('lineColor');\n }\n }\n}\n\n.highcharts-yaxis .highcharts-axis-line {\n stroke-width: 0;\n}\n\n.highcharts-axis-title {\n fill: $grey-variant-color-ten;\n\n @include themify($highcharts-theme) {\n fill: themed('colorAxesTitle') !important;\n }\n}\n\n.highcharts-axis-labels {\n fill: $grey-variant-color-ten;\n cursor: default;\n font-size: 0.9em;\n\n text {\n @include themify($highcharts-theme) {\n fill: themed('colorAxesValues') !important;\n }\n }\n\n span {\n @include themify($highcharts-theme) {\n color: themed('colorAxesValues');\n }\n }\n}\n\n.highcharts-label {\n font-family: $global-font-family;\n\n &.highcharts-stack-labels {\n text {\n @include themify($highcharts-theme) {\n fill: themed('stackLabelColor') !important;\n }\n }\n }\n}\n\n.highcharts-grid-line {\n fill: none;\n stroke: $white-variant-seventeen;\n\n @include themify($highcharts-theme) {\n stroke: themed('lineColor');\n }\n}\n\n.highcharts-xaxis-grid .highcharts-grid-line {\n stroke-width: 0px;\n}\n\n.highcharts-tick {\n stroke: $white-variant-sixteen;\n}\n\n.highcharts-yaxis .highcharts-tick {\n stroke-width: 0;\n}\n\n.highcharts-minor-grid-line {\n stroke: $white-variant-eighteen;\n}\n\n.highcharts-crosshair-thin {\n stroke-width: 1px;\n stroke: $light-theme-color;\n}\n\n.highcharts-crosshair-category {\n stroke: $white-variant-sixteen;\n stroke-opacity: 0.25;\n}\n\n/* Credits */\n.highcharts-credits {\n font-family: $global-font-family;\n cursor: pointer;\n fill: $grey-variant-color-six;\n font-size: 0.7em;\n transition: fill 250ms, font-size 250ms;\n}\n\n.highcharts-credits:hover {\n fill: $dark-color-full-opacity;\n font-size: 1em;\n}\n\n/* Tooltip */\n.highcharts-tooltip {\n cursor: default;\n pointer-events: none;\n white-space: nowrap;\n transition: stroke 150ms;\n}\n\n.highcharts-tooltip text {\n fill: $grey-variant-color-dark;\n}\n\n.highcharts-tooltip .highcharts-header {\n font-size: 0.85em;\n}\n\n.highcharts-tooltip-header .highcharts-label-box:not(.highcharts-shadow) {\n fill: $white-variant-seven;\n}\n\n.highcharts-tooltip-box {\n stroke-width: 1px;\n fill: $white-variant-seven;\n fill-opacity: 0.85;\n}\n\n.highcharts-tooltip-box .highcharts-label-box {\n fill: $white-variant-seven;\n fill-opacity: 0.85;\n}\n\n.highcharts-selection-marker {\n fill: $secondary-tca-light;\n fill-opacity: 0.25;\n}\n\n.highcharts-graph {\n fill: none;\n stroke-width: 2px;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.highcharts-state-hover .highcharts-graph {\n stroke-width: 3;\n}\n\n.highcharts-state-hover path {\n transition: stroke-width 50;\n /* quick in */\n}\n\n.highcharts-state-normal path {\n transition: stroke-width 250ms;\n /* slow out */\n}\n\n/* Legend hover affects points and series */\ng.highcharts-series,\n.highcharts-point,\n.highcharts-markers,\n.highcharts-data-labels {\n transition: opacity 250ms;\n\n .highcharts-text-outline {\n stroke: transparent;\n }\n}\n\n.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),\n.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover),\n.highcharts-legend-series-active .highcharts-markers:not(.highcharts-series-hover),\n.highcharts-legend-series-active .highcharts-data-labels:not(.highcharts-series-hover) {\n opacity: 0.2;\n}\n\ncircle.highcharts-legend-nav-active,\ncircle.highcharts-legend-nav-inactive {\n opacity: 0;\n}\n\n.highcharts-legend-nav-active {\n fill: $primary-blue-variant-one;\n}\n\n.highcharts-legend-nav-inactive {\n @include themify($themes) {\n fill: rgba(themed('color'), .2);\n }\n}\n\n.highcharts-legend-navigation {\n @include themify($themes) {\n fill: themed('color');\n }\n}\n\n/* Series options */\n\n.highcharts-area {\n fill-opacity: 0.75;\n stroke-width: 0;\n}\n\n.highcharts-markers {\n stroke-width: 1px;\n stroke: $white;\n}\n\n.highcharts-point {\n @include themify($highcharts-theme) {\n stroke-width: themed('pointStroke');\n }\n}\n\n.highcharts-dense-data .highcharts-point {\n stroke-width: 0;\n}\n\n.highcharts-data-label {\n font-size: 0.9em;\n font-weight: bold;\n}\n\n.highcharts-data-label-box {\n fill: none;\n stroke-width: 0;\n}\n\n.highcharts-data-label,\n.highcharts-legend-item {\n font-family: $global-font-family;\n\n text,\n tspan {\n fill: $grey-variant-color-dark;\n\n @include themify($highcharts-theme) {\n fill: themed('legendColor');\n }\n }\n\n &.highcharts-legend-item-hidden {\n\n text,\n tspan,\n rect,\n path {\n @include themify($highcharts-theme) {\n fill: themed('hiddenLegendColor');\n }\n }\n }\n}\n\n.highcharts-pie-series .highcharts-label.highcharts-data-label {\n\n text,\n tspan {\n font-weight: 400 !important;\n\n @include themify($highcharts-theme) {\n fill: themed('legendColorPie') !important;\n }\n }\n}\n\n.highcharts-data-label,\n.highcharts-legend-item {\n span {\n @include themify($highcharts-theme) {\n color: themed('legendColor');\n }\n }\n\n &.highcharts-legend-item-hidden {\n span {\n @include themify($highcharts-theme) {\n color: themed('legendColor');\n }\n }\n }\n}\n\n.highcharts-data-label-connector {\n fill: none;\n}\n\n.highcharts-halo {\n fill-opacity: 0.25;\n stroke-width: 0;\n}\n\n.highcharts-series:not(.highcharts-pie-series) .highcharts-point-select,\n.highcharts-markers .highcharts-point-select {\n fill: $light-theme-color;\n stroke: $dark-color-full-opacity;\n}\n\n.highcharts-column-series rect.highcharts-point {\n stroke: $white;\n}\n\n.highcharts-column-series .highcharts-point {\n transition: fill-opacity 250ms;\n\n @include themify($highcharts-theme) {\n stroke: themed('seriesStroke');\n }\n}\n\n.highcharts-column-series .highcharts-point-hover,\n.highcharts-pie-series .highcharts-point-hover,\n.highcharts-funnel-series .highcharts-point-hover,\n.highcharts-pyramid-series .highcharts-point-hover {\n fill-opacity: 0.75;\n transition: fill-opacity 50ms;\n}\n\n.highcharts-pie-series .highcharts-point {\n @include highcharts-stroke-style;\n\n @include themify($highcharts-theme) {\n stroke: themed('seriesStrokePie');\n }\n}\n\n.highcharts-funnel-series .highcharts-point,\n.highcharts-pyramid-series .highcharts-point {\n @include highcharts-stroke-style;\n}\n\n.highcharts-funnel-series .highcharts-point-select,\n.highcharts-pyramid-series .highcharts-point-select {\n @include highcharts-stroke-inherit;\n}\n\n.highcharts-solidgauge-series .highcharts-point {\n stroke-width: 0;\n}\n\n.highcharts-treemap-series .highcharts-point {\n stroke-width: 1px;\n stroke: $white-variant-seventeen;\n transition: stroke 250ms, fill 250ms, fill-opacity 250ms;\n}\n\n.highcharts-treemap-series .highcharts-point-hover {\n stroke: $grey-variant-color-six;\n transition: stroke 25ms, fill 25ms, fill-opacity 25ms;\n}\n\n.highcharts-treemap-series .highcharts-above-level {\n display: none;\n}\n\n.highcharts-treemap-series .highcharts-internal-node {\n fill: none;\n}\n\n.highcharts-treemap-series .highcharts-internal-node-interactive {\n fill-opacity: 0.15;\n cursor: pointer;\n}\n\n.highcharts-treemap-series .highcharts-internal-node-interactive:hover {\n fill-opacity: 0.75;\n}\n\n/* Legend */\n.highcharts-legend-box {\n fill: none;\n stroke-width: 0;\n}\n\n.highcharts-legend-item>text {\n fill: $grey-variant-color-dark;\n font-weight: bold;\n font-size: 1em;\n cursor: pointer;\n stroke-width: 0;\n\n @include themify($highcharts-theme) {\n fill: themed('legendColor') !important;\n font-weight: themed('legendWeight') !important;\n }\n}\n\n.highcharts-legend-item:hover text {\n fill: $dark-color-full-opacity;\n}\n\n.highcharts-legend-item-hidden * {\n fill: $light-theme-color;\n stroke: $light-theme-color;\n transition: fill 250ms;\n}\n\n.highcharts-legend-nav-inactive {\n fill: $light-theme-color;\n}\n\n.highcharts-legend-title-box {\n fill: none;\n stroke-width: 0;\n}\n\n/* Bubble legend */\n.highcharts-bubble-legend-symbol {\n stroke-width: 2;\n}\n\n.highcharts-bubble-legend-connectors {\n stroke-width: 1;\n}\n\n.highcharts-bubble-legend-labels {\n fill: $grey-variant-color-dark;\n}\n\n/* Loading */\n.highcharts-loading {\n position: absolute;\n background-color: $white;\n opacity: 0.5;\n text-align: center;\n z-index: 10;\n transition: opacity 250ms;\n}\n\n.highcharts-loading-hidden {\n height: 0;\n opacity: 0;\n overflow: hidden;\n transition: opacity 250ms, height 250ms step-end;\n}\n\n.highcharts-loading-inner {\n font-weight: bold;\n position: relative;\n top: 45%;\n}\n\n/* Plot bands and polar pane backgrounds */\n.highcharts-plot-band,\n.highcharts-pane {\n fill: $dark-color-full-opacity;\n fill-opacity: 0.02;\n}\n\n.highcharts-plot-line {\n fill: none;\n stroke: $grey-variant-color-six;\n stroke-width: 1px;\n}\n\n.highcharts-plot-line-label,\n.highcharts-plot-band-label {\n fill: $grey-variant-color-six;\n}\n\n/* Highcharts More and modules */\n.highcharts-boxplot-box {\n fill: $white;\n\n @include themify($highcharts-theme) {\n fill: themed('seriesStrokePie');\n }\n}\n\n.highcharts-boxplot-median {\n stroke-width: 2px;\n}\n\n.highcharts-errorbar-series .highcharts-point {\n stroke: $dark-color-full-opacity;\n}\n\n.highcharts-gauge-series .highcharts-data-label-box {\n stroke: $light-theme-color;\n stroke-width: 1px;\n}\n\n.highcharts-gauge-series .highcharts-dial {\n fill: $dark-color-full-opacity;\n stroke-width: 0;\n}\n\n.highcharts-polygon-series .highcharts-graph {\n fill: inherit;\n stroke-width: 0;\n}\n\n.highcharts-waterfall-series .highcharts-graph {\n stroke: $grey-variant-color-dark;\n stroke-dasharray: 1, 3;\n}\n\n.highcharts-sankey-series .highcharts-point {\n stroke-width: 0;\n}\n\n.highcharts-sankey-series .highcharts-link {\n transition: fill 250ms, fill-opacity 250ms;\n fill-opacity: 0.5;\n}\n\n.highcharts-sankey-series .highcharts-point-hover.highcharts-link {\n transition: fill 50ms, fill-opacity 50ms;\n fill-opacity: 1;\n}\n\n.highcharts-venn-series .highcharts-point {\n fill-opacity: 0.75;\n stroke: $light-theme-color;\n transition: stroke 250ms, fill-opacity 250ms;\n}\n\n.highcharts-venn-series .highcharts-point-hover {\n fill-opacity: 1;\n stroke: $light-theme-color;\n}\n\n/* Highstock */\n.highcharts-navigator-mask-outside {\n fill-opacity: 0;\n}\n\n.highcharts-navigator-mask-inside {\n fill: #6685c2;\n /* navigator.maskFill option */\n fill-opacity: 0.25;\n cursor: ew-resize;\n}\n\n.highcharts-navigator-outline {\n stroke: $light-theme-color;\n fill: none;\n}\n\n.highcharts-navigator-handle {\n stroke: $light-theme-color;\n fill: $white-variant-eighteen;\n cursor: ew-resize;\n}\n\n.highcharts-navigator-series {\n fill: $secondary-tca-light;\n stroke: $secondary-tca-light;\n}\n\n.highcharts-navigator-series .highcharts-graph {\n stroke-width: 1px;\n}\n\n.highcharts-navigator-series .highcharts-area {\n fill-opacity: 0.05;\n}\n\n.highcharts-navigator-xaxis .highcharts-axis-line {\n stroke-width: 0;\n}\n\n.highcharts-navigator-xaxis .highcharts-grid-line {\n stroke-width: 1px;\n stroke: $white-variant-seventeen\n}\n\n.highcharts-yaxis-grid {\n stroke-width: 0;\n}\n\n.highcharts-navigator-xaxis.highcharts-axis-labels {\n fill: $grey-variant-color-six;\n}\n\n.highcharts-navigator-yaxis .highcharts-grid-line {\n stroke-width: 0;\n}\n\n.highcharts-scrollbar-thumb {\n @include themify ($highcharts-theme) {\n fill: themed('scrollbarThumb');\n stroke: themed('scrollbarThumb');\n }\n height: 10px;\n stroke-width: 1px;\n}\n\n.highcharts-scrollbar-button {\n fill: $white-variant-seventeen;\n stroke: $light-theme-color;\n stroke-width: 1px;\n}\n\n.highcharts-scrollbar-arrow {\n fill: $grey-variant-color-ten;\n}\n\n.highcharts-scrollbar-rifles {\n stroke: $grey-variant-color-ten;\n stroke-width: 1px;\n}\n\n.highcharts-scrollbar-track {\n @include themify ($highcharts-theme) {\n fill: themed('scrollbarTrack');\n stroke: themed('scrollbarTrack');\n }\n height: 10px;\n stroke-width: 1px;\n}\n\n.highcharts-scrollbar-arrow, .highcharts-scrollbar-button, .highcharts-scrollbar-rifles {\n display: none;\n}\n\n.highcharts-button {\n fill: $white-variant-seven;\n stroke: $light-theme-color;\n cursor: default;\n stroke-width: 1px;\n transition: fill 250ms;\n\n text {\n fill: $white !important;\n font-weight: 100 !important;\n }\n}\n\n.highcharts-drillup-button rect.highcharts-button-box {\n box-shadow: $box-shadow-style;\n stroke: $primary-blue-variant-one;\n color: $primary-blue-variant-one;\n fill: $primary-blue-variant-one;\n border-radius: 2px;\n border-width: 0;\n font-size: $font-size-btn;\n outline: none;\n overflow: hidden;\n padding: 12px 24px;\n position: relative;\n text-align: center;\n transition: background-color .3s;\n cursor: pointer;\n}\n\n.highcharts-drillup-button text {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n color: $primary-blue;\n color: $white !important;\n fill: $white !important;\n font-family: Chivo;\n font-weight: 500;\n\n &:hover {\n fill: $primary-hover;\n color: $white;\n }\n}\n\n.highcharts-drillup-button.highcharts-button-hover rect.highcharts-button-box {\n fill: $primary-hover;\n color: $white;\n}\n\n.highcharts-button text {\n fill: $grey-variant-color-dark;\n}\n\n.highcharts-button-hover {\n transition: fill 0ms;\n fill: $white-variant-seventeen;\n stroke: $light-theme-color;\n}\n\n.highcharts-button-hover text {\n fill: $grey-variant-color-dark;\n}\n\n.highcharts-button-pressed {\n font-weight: bold;\n fill: #e6ebf5;\n stroke: $light-theme-color;\n}\n\n.highcharts-button-pressed text {\n fill: $grey-variant-color-dark;\n font-weight: bold;\n}\n\n.highcharts-button-disabled text {\n fill: $grey-variant-color-dark;\n}\n\n.highcharts-range-selector-buttons .highcharts-button {\n stroke-width: 0px;\n}\n\n.highcharts-range-selector-buttons {\n .highcharts-label {\n text {\n @include themify($highcharts-theme) {\n fill: themed('textColor') !important;\n }\n }\n }\n}\n\n.highcharts-range-label rect {\n fill: none;\n}\n\n.highcharts-range-label text {\n fill: $grey-variant-color-ten;\n}\n\n.highcharts-range-input rect {\n fill: none;\n}\n\n.highcharts-range-input {\n text {\n @include themify($highcharts-theme) {\n fill: themed('textColor') !important;\n }\n font-weight: 400;\n }\n}\n\n.highcharts-range-input text {\n fill: $grey-variant-color-dark;\n}\n\n.highcharts-range-input {\n stroke-width: 1px;\n stroke: $light-theme-color;\n}\n\ninput.highcharts-range-selector {\n position: absolute;\n border: 0;\n width: 1px;\n /* Chrome needs a pixel to see it */\n height: 1px;\n padding: 0;\n text-align: center;\n left: -9em;\n /* #4798 */\n}\n\n.highcharts-crosshair-label text {\n fill: $white;\n font-size: 1.1em;\n}\n\n.highcharts-crosshair-label .highcharts-label-box {\n fill: inherit;\n}\n\n.highcharts-ohlc-series .highcharts-point-hover {\n stroke-width: 3px;\n}\n\n.highcharts-flags-series .highcharts-point .highcharts-label-box {\n stroke: $grey-variant-color-six;\n fill: $white;\n transition: fill 250ms;\n}\n\n.highcharts-flags-series .highcharts-point-hover .highcharts-label-box {\n stroke: $dark-color-full-opacity;\n fill: $white-variant-sixteen;\n}\n\n.highcharts-flags-series .highcharts-point text {\n fill: $dark-color-full-opacity;\n font-size: 0.9em;\n font-weight: bold;\n}\n\n/* Highmaps */\n.highcharts-map-series .highcharts-point {\n transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;\n stroke: $light-theme-color;\n}\n\n.highcharts-map-series .highcharts-point-hover {\n transition: fill 0ms, fill-opacity 0ms;\n fill-opacity: 0.5;\n stroke-width: 2px;\n}\n\n.highcharts-mapline-series .highcharts-point {\n fill: none;\n}\n\n.highcharts-heatmap-series {\n .highcharts-point {\n stroke-width: 1;\n\n @include themify($highcharts-theme) {\n stroke: themed('heatmapStroke');\n }\n\n stroke: $grey-variant-color-eleven;\n }\n\n .highcharts-data-label {\n text {\n font-size: 13px !important;\n font-weight: 100 !important;\n }\n }\n}\n\n.highcharts-map-navigation {\n font-size: 1.3em;\n font-weight: bold;\n text-align: center;\n}\n\n.highcharts-coloraxis {\n stroke-width: 0;\n}\n\n.highcharts-coloraxis-marker {\n fill: $grey-variant-color-six;\n}\n\n.highcharts-null-point {\n fill: $white-variant-seven;\n}\n\n/* 3d charts */\n.highcharts-3d-frame {\n fill: transparent;\n}\n\n/* Exporting module */\n.highcharts-contextbutton {\n fill: $white;\n /* needed to capture hover */\n stroke: none;\n stroke-linecap: round;\n}\n\n.highcharts-contextbutton:hover {\n fill: $white-variant-seventeen;\n stroke: $white-variant-seventeen\n}\n\n.highcharts-button-symbol {\n stroke: $grey-variant-color-ten;\n stroke-width: 3px;\n}\n\n.highcharts-menu {\n border: 1px solid $grey-variant-color-six;\n background: $white;\n padding: 5px 0;\n box-shadow: 3px 3px 10px $grey-variant-color-eight;\n}\n\n.highcharts-menu-item {\n padding: 0.5em 1em;\n background: none;\n color: $grey-variant-color-dark;\n cursor: pointer;\n transition: background 250ms, color 250ms;\n}\n\n.highcharts-menu-item:hover {\n background: $secondary-tca-light;\n color: $white;\n}\n\n/* Drilldown module */\n.highcharts-drilldown-point {\n cursor: pointer;\n}\n\n.highcharts-drilldown-data-label text,\ntext.highcharts-drilldown-data-label,\n.highcharts-drilldown-axis-label {\n cursor: pointer;\n fill: #003399;\n font-weight: bold;\n text-decoration: underline;\n}\n\ntext.highcharts-drilldown-axis-label {\n @include themify($highcharts-theme) {\n fill: themed('legendColorPie') !important;\n }\n\n font-weight: 500;\n}\n\n/* No-data module */\n.highcharts-no-data text {\n font-weight: bold;\n font-size: 12px;\n fill: $grey-variant-color-ten;\n}\n\n/* Drag-panes module */\n.highcharts-axis-resizer {\n cursor: ns-resize;\n stroke: $dark-color-full-opacity;\n stroke-width: 2px;\n}\n\n/* Bullet type series */\n.highcharts-bullet-target {\n stroke-width: 0;\n}\n\n/* Lineargauge type series */\n.highcharts-lineargauge-target {\n stroke-width: 1px;\n stroke: $grey-variant-color-dark;\n}\n\n.highcharts-lineargauge-target-line {\n stroke-width: 1px;\n stroke: $grey-variant-color-dark;\n}\n\n//using on every chart -------------------------------------------------------------------------------------\n//purpose: change the reset zoom btn\n.highcharts-button.highcharts-reset-zoom {\n rect {\n fill: $primary-color;\n stroke: $primary-color;\n cursor: pointer;\n }\n\n text {\n tspan {\n fill: $white;\n }\n }\n}\n\n.highcharts-button.highcharts-reset-zoom.highcharts-button-hover {\n rect {\n fill: darken($primary-color, 7%);\n stroke: darken($primary-color, 7%);\n }\n\n text {\n tspan {\n fill: $white;\n }\n }\n}\n\n/* Annotations module */\n.highcharts-annotation-label-box {\n stroke-width: 1px;\n stroke: $dark-color-full-opacity;\n fill: $dark-color-full-opacity;\n fill-opacity: 0.75;\n}\n\n.highcharts-annotation-label text {\n fill: $white-variant-seventeen\n}\n\n/* Gantt */\n.highcharts-treegrid-node-collapsed,\n.highcharts-treegrid-node-expanded {\n cursor: pointer;\n}\n\n.highcharts-point-connecting-path {\n fill: none;\n}\n\n.highcharts-grid-axis .highcharts-tick {\n stroke-width: 1px;\n}\n\n.highcharts-grid-axis .highcharts-axis-line {\n stroke-width: 1px;\n}\n\n.theme-dark {\n .highcharts-title {\n fill: white !important;\n font-size: 1.5em;\n }\n}\n\n.theme-light {\n .highcharts-background {\n fill: white;\n }\n\n .highcharts-legend-navigation {\n fill: $dark-grey-color;\n }\n\n .highcharts-legend-item>text {\n fill: #333 !important;\n font-weight: 400 !important;\n }\n}\n\n.highcharts-title .title-with-badge {\n font-size: 13px;\n font-family: $global-font-family;\n @include themify($highcharts-theme) {\n color: themed('textColor');\n }\n\n .lm-badge {\n padding: 4px 10px;\n }\n}", "#toast-container > div{\n opacity:1;\n box-shadow: 0 0 10px rgba(0,0,0,.7);\n}\n.toast-top-right{\n top: 73px;\n}\n\n.default-toast {\n top: 73px;\n right: 5px;\n}\n\n#toast-container.default-toast > div {\n width: 120px;\n}", "$bootstrap-theme:(\n light:(\n datepickerBackground: $white,\n datepickerBackgroundHover: $white-variant-twelve,\n ),\n dark:(\n datepickerBackground: $grey-variant-color-five,\n datepickerBackgroundHover: $dark-theme-bg-light-variant,\n )\n);\n\n.bootstrap-datetimepicker-widget{\n @include themify($bootstrap-theme) {\n background-color: themed('datepickerBackground');\n }\n &:after{\n @include themify($bootstrap-theme) {\n border-bottom-color: themed('datepickerBackground');\n }\n }\n table thead tr:first-child th:hover, table td.day:hover{\n @include themify($bootstrap-theme) {\n background-color: themed('datepickerBackgroundHover');\n }\n }\n}\n\n//using on every legends ------------------------------------------------------\n//purpose: overrite bootstrap css of making legends occupie 100% of the available space\nlegend{\n width:auto\n}\n\n//using on datepicker --------------------------------------------------------------------------------------\n//purpose: change active background color\n.day{\n &.active{\n background-color: $primary-color;\n }\n}\n\n//using on every nav-tab ------------------------------------------------------------------------------------\n//purpose: removes the borders\n.nav-tabs{\n border:none;\n}\n\n//using on every breadcrumb ---------------------------------------------------------------------------------\n//purpose: remove the background and padding that bootstrap implementes\n.breadcrumb {\n padding: 0;\n background-color: transparent;\n a{\n @include themify($themes) {\n color: themed('color');\n }\n }\n}\n\n//using on TCA grids multiselect dropdown ------------------------------------------------------------------\n//purpose: apply the input layout to the multiselect which needs to rebuilded in terms of html, once\n// re-written this can be deleted - change the class on the html to form-group only\n.form-group-temporary {\n position: relative;\n margin-bottom: 0px;\n\n .open > .dropdown-toggle{\n background-color: transparent;\n }\n\n button.multiselect {\n @include transition(300ms);\n padding: 14px 15px;\n height: auto;\n box-shadow: none;\n min-width: 150px;\n text-align: left;\n\n &:focus, &:active {\n @include transition(300ms);\n border-color: $primary-color;\n background-color: transparent;\n z-index: 0;\n\n & ~ .control-label {\n @include transition(300ms);\n color: $primary-color;\n }\n }\n\n &:hover {\n background-color: transparent;\n z-index: 0;\n }\n }\n\n .control-label {\n @include transition(300ms);\n position: absolute;\n left: 15px;\n top: -9px;\n background-color: $white;\n color: $grey-variant-color-two;\n padding: 0px 5px;\n }\n}\n\n//using on dropdowns ------------------------------------------------------\n//purpose: make disabled links look disabled\n.dropdown-menu > li > a.disabled{\n color:#bbb;\n cursor:default;\n}\n\n//using on HTML tag ------------------------------------------------------\n//purpose: remove the font-size implemented on the tag HTML by bootstrap\nhtml{ font-size:unset; }\n\n//unsing on datepicker -> timepicker\n//purpose: make the hover of the time color dark on darkmode\n.bootstrap-datetimepicker-widget table td span:hover{\n color: $dark-grey-color;\n}", "@import \"../abstract/_global-variables.scss\";\n@import \"../abstract/_mixins.scss\";\n@import \"../themes/_themes.scss\";\n\n$grid-theme: (\n light: (\n background: $white,\n rowBackgroundHover: $secondary-dark-blue-variant-one,\n filterOddRows: brightness(0.97) contrast(0.98),\n menuContextualBackgroundHover: $white-variant-two,\n rowBackgroundSelected: $secondary-dark-blue-variant-one,\n rowOddBackground: rgba(0, 0, 0, 0.02),\n weightHeader: 700,\n darkerBorders: $disabled-primary-color,\n color: $dark-color-full-opacity,\n colorHeader: black,\n viewPortBackground: $white-variant-seven,\n scrollbarBackground: $white-variant-seven,\n scrollbarBar: $white-variant-eight,\n scrollbarBarHover: $white-variant-nine,\n checkBoxBorderColor: hsl(0deg, 0%, 89%),\n headerPinColumns: $white-variant-ten,\n loadingbackground: $disabled-primary-color,\n straplineBackground: rgba(0, 0, 0, 0.15),\n ),\n dark: (\n background: $dark-theme-bg-dark,\n rowBackgroundHover: $secondary-dark-blue-variant-one,\n filterOddRows: brightness(0.97),\n menuContextualBackgroundHover: $dark-theme-bg-dark-variant,\n rowBackgroundSelected: $secondary-dark-blue-variant-one,\n rowOddBackground: $dark-variant-color-eleven,\n borders: $dark-border-background,\n darkerBorders: rgba($dark-theme-bg-dark-variant, 0.5),\n color: rgba(255, 255, 255, 0.9),\n colorHeader: $white-variant-eleven,\n weightHeader: 400,\n viewPortBackground: $dark-theme-bg-dark,\n scrollbarBackground: $dark-theme-bg-dark,\n scrollbarBar: $dark-scroll-bar,\n scrollbarBarHover: $dark-scroll-bar-hover,\n checkBoxBorderColor: #505050,\n loadingbackground: rgba($dark-theme-bg-dark, 0.8),\n straplineBackground: rgb(247, 211, 81),\n headerPinColumns: rgba(0, 0, 0, 0.87),\n filter-header-background: $dark-theme-bg-dark-variant,\n ),\n);\n\n//change grids font-family\n.ag-header,\n.ag-body,\n.ag-floating-top-container {\n font-family: $global-font-family;\n}\n\n.ag-floating-top {\n overflow-y: hidden !important; // !important required as AG-GRID has inline styles to add overflow\n}\n\n.ag-body-viewport {\n font-family: $global-font-family;\n font-weight: 300;\n}\n\n//themes\n.ag-theme-material {\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n line-height: initial;\n\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n }\n\n .ag-header-group-cell {\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n border-color: themed(\"borders\");\n color: themed(\"colorHeader\");\n font-weight: themed(\"weightHeader\");\n //the padding is to align with the rest of the headers\n padding-left: 10px;\n }\n }\n\n .ag-header,\n .ag-header-cell {\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n border-color: themed(\"borders\");\n color: themed(\"colorHeader\");\n font-weight: themed(\"weightHeader\");\n }\n\n .ag-icon-menu {\n @include themify($grid-theme) {\n color: themed(\"colorHeader\");\n }\n\n margin-right: 5px;\n }\n\n .ag-header-cell:hover {\n @include themify($grid-theme) {\n background-color: themed(\"rowBackgroundHover\") !important;\n }\n }\n }\n\n .ag-header-row {\n @include themify($grid-theme) {\n border-color: themed(\"borders\");\n }\n }\n\n .ag-loading-text {\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n\n .ag-row {\n @include themify($grid-theme) {\n border-color: themed(\"borders\");\n background-color: themed(\"background\");\n }\n\n .ag-cell {\n @include themify($grid-theme) {\n color: themed(\"color\");\n line-height: initial;\n }\n }\n }\n\n .ag-status-bar {\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n }\n }\n\n .ag-paging-panel {\n @include themify($grid-theme) {\n color: themed(\"color\");\n background-color: themed(\"background\");\n }\n }\n\n .ag-icon-expanded,\n .ag-icon-contracted {\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n\n .ag-menu-option {\n padding-left: 15px;\n }\n\n .ag-menu-option-active {\n @include themify($grid-theme) {\n background-color: themed(\"menuContextualBackgroundHover\");\n }\n }\n\n .ag-menu-option-part,\n .ag-theme-material\n .ag-compact-menu-option-part\n .ag-compact-menu-option-part {\n padding: 3px;\n }\n}\n\n//loading background\n.ag-theme-material .ag-overlay-loading-wrapper {\n @include themify($grid-theme) {\n background-color: themed(\"loadingbackground\");\n }\n}\n\n/*icons*/\n.ag-theme-material {\n .ag-icon-menu {\n font-family: $font-awesome-pro;\n font-weight: 400;\n background: none;\n font-size: 13px;\n cursor: pointer;\n color: $dark-grey-color;\n\n &::before {\n content: \"\\f0c9\";\n }\n }\n}\n\n.ag-row-odd {\n @include themify($grid-theme) {\n filter: themed(\"filterOddRows\");\n font-weight: 300;\n }\n}\n/*align vertically the data in te cells*/\n.ag-row .ag-cell {\n display: flex;\n align-items: center;\n}\n\n.ag-cell-wrapper.ag-row-group {\n display: flex;\n align-items: center;\n}\n//change navigator background color\n.highcharts-navigator-mask-inside {\n fill: $primary-blue-variant-one;\n fill-opacity: 0.1;\n}\n//pinned left columns border-color\n.ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right) {\n @include themify($grid-theme) {\n border-right-color: themed(\"borders\");\n }\n}\n//css to be possible to align columns to the right\n.ag-grid-align-right {\n display: flex;\n justify-content: flex-end;\n\n .ag-react-container {\n padding-right: 27px;\n }\n\n .ag-header-cell-label {\n display: flex;\n justify-content: flex-end;\n padding-right: 7px;\n }\n}\n//change resize position\n/*.ag-header-cell-resize {\n \n}*/\n/*scrollbar*/\n.ag-body-viewport,\n.ag-body-horizontal-scroll-viewport {\n &::-webkit-scrollbar-track {\n @include themify($grid-theme) {\n background-color: themed(\"viewPortBackground\");\n }\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n\n @include themify($grid-theme) {\n background-color: themed(\"viewPortBackground\");\n }\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBar\");\n }\n\n border: none;\n cursor: pointer;\n\n &:hover {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBarHover\");\n }\n }\n }\n}\n\n.ag-body-horizontal-scroll {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBackground\");\n }\n}\n\n.ag-theme-material .ag-horizontal-right-spacer.ag-scroller-corner {\n width: 7px;\n min-width: 7px;\n max-width: 7px;\n}\n\n.ag-center-cols-viewport {\n overflow: hidden;\n\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n }\n}\n/*remove the border on the bottom*/\n.ag-theme-material .ag-status-bar {\n border-color: transparent;\n}\n\n.ag-order-history-header {\n margin-top: 0px !important;\n}\n\n/*makes grid more fitted to the paddings by moving a bit up*/\n.ag-theme-material {\n margin-top: -7px;\n}\n/*row mouse hover background color*/\n.ag-theme-material .ag-row-hover {\n @include themify($grid-theme) {\n background-color: themed(\"rowBackgroundHover\");\n }\n}\n/*row selection background color*/\n.ag-theme-material .ag-row-selected {\n @include themify($grid-theme) {\n background-color: themed(\"rowBackgroundSelected\");\n }\n}\n\n.ag-theme-material .ag-checkbox-input-wrapper {\n font-size: 10pt;\n}\n/*position of resize of columns fixed*/\n/*.ag-ltr .ag-header-cell-resize {\n margin-right: 9px;\n right: -20px;\n}*/\n/*---------------text colors, alignments, etc--------------*/\n.ag-theme-material .ag-header {\n color: $grey-variant-color-dark;\n}\n\n.ag-header-cell-label {\n text-align: left;\n}\n\n.ag-header-row {\n font-size: 10px !important;\n}\n/*Change outline, focus, selected, selection group color*/\n//select\n.ag-theme-material\n .ag-ltr\n .ag-has-focus\n .ag-cell-focus:not(.ag-cell-range-selected),\n.ag-theme-material\n .ag-ltr\n .ag-has-focus\n .ag-cell-focus.ag-cell-range-single-cell {\n border: 1px solid $primary-color;\n}\n//focus\n.ag-theme-material .ag-cell-range-selected-1:not(.ag-cell-focus) {\n background-color: rgba($primary-color, 0.1);\n}\n//group selection\n.ag-theme-material\n .ag-ltr\n .ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell) {\n &.ag-cell-range-left {\n border-left: 1px solid $primary-color;\n }\n\n &.ag-cell-range-top {\n border-top: 1px solid $primary-color;\n }\n\n &.ag-cell-range-right {\n border-right: 1px solid $primary-color;\n }\n\n &.ag-cell-range-bottom {\n border-bottom: 1px solid $primary-color;\n }\n\n background-color: rgba($primary-color, 0.07);\n}\n\n.ag-theme-material .ag-group-expanded:not(.ag-hidden) ~ .ag-group-checkbox {\n margin-left: 0;\n}\n//for the grid on orders/traders list to give the background of the row a red finish\n.ag-theme-material {\n .outlier-warning {\n /*background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(204,63,17,0.06) 1%, rgba(204,63,17,0.06) 99%, rgba(255,255,255,0) 100%);*/\n background-color: rgba($danger-color, 0.1);\n\n &.ag-row-hover {\n background-color: rgba($danger-color, 0.15);\n }\n }\n}\n//the cells had a great quantity of padding (25px) by setting it to 10px it saves us space which makes us be able to fit more things into a grid\n.ag-theme-material .ag-header-cell,\n.ag-theme-material .ag-cell {\n padding-left: 10px !important;\n /*removing padding from the right side of the header cells and cells*/\n padding-right: 0 !important;\n //this is to fix a bug in the VUE ag-grid, by changing the padding it would give a strange width to the label which would make it disappear\n .ag-header-cell-label {\n width: auto !important;\n }\n //this is to remove the space that ag-actions take\n &[col-id=\"ag-actions\"] {\n width: 0;\n padding-left: 0px;\n }\n}\n//the 3 bars on the header didn't had any right side padding\n.ag-theme-material {\n .ag-icon-columns,\n .ag-icon-menu {\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n}\n//paging icons themes\n.ag-theme-material {\n .ag-icon-previous,\n .ag-icon-next {\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n}\n//pagging panel border top removed\n.ag-theme-material .ag-paging-panel {\n border-top: none;\n}\n//when clicking on the 3 bars icon it opens a panel, that panel had hot pink as a asset color, the code below is to turn it into LQM colors\n.ag-theme-material .ag-menu {\n border-radius: 1px;\n\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n color: themed(\"color\");\n border: 1px solid themed(\"color\");\n }\n\n .ag-tab-header {\n @include themify($grid-theme) {\n background-color: themed(\"filter-header-background\");\n }\n }\n\n .ag-tab.ag-tab-selected {\n border-color: $primary-color;\n }\n}\n//make ag-grid filters scrollbar light\n.theme-dark {\n .ag-theme-material .ag-menu .ag-primary-cols-list-panel {\n &::-webkit-scrollbar-track {\n background-color: $white-variant-six;\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n background-color: $white-variant-six;\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: #000f1a73;\n border: none;\n cursor: pointer;\n\n &:hover {\n background-color: #000f1ab3;\n }\n }\n }\n}\n\n.ag-theme-material .ag-icon {\n color: $grey-variant-color-seven;\n}\n\n.ag-theme-material .ag-icon-checkbox-checked {\n color: $primary-color;\n}\n//changes ag grid toolbar------------------------\n.ag-theme-material .ag-side-bar .ag-side-buttons {\n width: 0;\n\n .ag-selected button {\n display: none;\n }\n}\n\n.ag-pinned-left-cols-viewport {\n &::-webkit-scrollbar-track {\n @include themify($grid-theme) {\n background-color: themed(\"viewPortBackground\");\n }\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBackground\");\n }\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBar\");\n }\n\n border: none;\n cursor: pointer;\n\n &:hover {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBarHover\");\n }\n }\n }\n}\n\n.ag-theme-material .ag-tool-panel-wrapper {\n overflow: visible;\n\n .ag-column-panel {\n border-bottom: 0;\n box-shadow: 0px -7px 7px $dark-variant-color;\n border: 1px solid $white-variant-two;\n border-bottom: none;\n\n .ag-primary-cols-list-panel,\n .ag-column-drop-list {\n &::-webkit-scrollbar-track {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBackground\");\n }\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBackground\");\n }\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBar\");\n }\n\n border: none;\n cursor: pointer;\n\n &:hover {\n @include themify($grid-theme) {\n background-color: themed(\"scrollbarBarHover\");\n }\n }\n }\n }\n }\n}\n\n.ag-theme-material .ag-input-text-wrapper input[type=\"text\"]:focus {\n border-color: $primary-color;\n}\n//this styles are for the ag-actions on the ag-grid for the React App----------------------------------------------------------------------------\n.ag-actions {\n display: none;\n padding-right: 5px;\n color: $disabled-background-color;\n font-size: 18px;\n\n i {\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n }\n}\n\n.ag-actions-dropdown {\n position: fixed;\n right: 10px;\n top: 20px;\n min-width: 150px;\n width: auto;\n height: auto;\n\n ul {\n padding: 10px 0px;\n }\n}\n\n.ag-row-hover {\n //make the cell of the actions button appear when mouse hover the row\n .ag-cell[col-id=\"ag-actions\"] {\n width: 40px;\n left: -30px;\n\n & * {\n height: 100%;\n width: 100%;\n }\n }\n\n .ag-actions {\n display: block;\n }\n}\n\n.ag-pinned-right-cols-container {\n //removes the outlier gradient from the pinned columns\n .outlier-warning {\n background-image: none;\n }\n}\n\n.ag-theme-material\n .ag-ltr\n .ag-cell:not(.ag-cell-focus).ag-cell-first-right-pinned,\n.ag-theme-material .ag-pinned-right-header {\n //removes the border-left on the pinned columns that are on the right hand side\n border-left: none;\n}\n\n.ag-theme-material\n .ag-ltr\n .ag-has-focus\n [col-id=\"ag-actions\"].ag-cell-focus:not(.ag-cell-range-selected),\n.ag-theme-material\n .ag-ltr\n .ag-has-focus\n [col-id=\"ag-actions\"].ag-cell-focus.ag-cell-range-single-cell {\n //removes the outline on the actions cell when with focus\n border: none;\n}\n//colors for the cells\n.ag-cell-red {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #e03838dd,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n text-align: right;\n}\n\n.ag-cell-darkRed {\n text-align: right;\n border-right: 1px solid #e2e2e2;\n\n @include ag-cell-color(\n $background-color: #8b0000,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-darkOrange {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #d94e1fdd,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-orange {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #ff7c31dd,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-yellow {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: $global-yellow,\n $color: $dark-grey-color,\n $fill: $dark-grey-color,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-paleGreen {\n border-right: 1px solid #e2e2e2;\n\n @include ag-cell-color(\n $background-color: #90ee90,\n $color: $dark-grey-color,\n $fill: $dark-grey-color,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-green {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #6bc2abdd,\n $color: $dark-grey-color,\n $fill: $dark-grey-color,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-blue {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #519babdd,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-darkBlue {\n @include themify($grid-theme) {\n border-right: 1px solid themed(\"darkerBorders\");\n }\n\n @include ag-cell-color(\n $background-color: #0c5268dd,\n $color: $white,\n $fill: $white,\n $font-weight: 400,\n $justify-content: center\n );\n}\n\n.ag-cell-noValues {\n @include themify($grid-theme) {\n background-color: themed(\"rowBackgroundHover\");\n }\n}\n\n.ag-theme-material .ag-checkbox-input-wrapper::after {\n @include themify($grid-theme) {\n color: themed(\"checkBoxBorderColor\");\n }\n}\n\n.ag-checked::after {\n color: $primary-blue !important;\n}\n\n.ag-pinned-left-cols-container {\n @include themify($grid-theme) {\n background-color: themed(\"viewPortBackground\");\n }\n}\n\n.ag-menu-header {\n @include themify($grid-theme) {\n background-color: themed(\"headerPinColumns\");\n }\n}\n\n.ag-theme-material .ag-tabs-body {\n padding: 0px 0px 0px 0px;\n}\n\n.ag-theme-material .ag-tabs-body .ag-menu-list {\n padding: 8px 8px 8px 8px;\n}\n\n.ag-theme-material .ag-menu-list {\n padding: 8px 8px 8px 8px;\n}\n\n.ag-text-field-input {\n @include themify($grid-theme) {\n color: themed(\"color\") !important;\n }\n\n &:focus {\n border-bottom-color: $primary-blue !important;\n }\n\n &::-webkit-input-placeholder {\n @include themify($grid-theme) {\n color: themed(\"color\") !important;\n opacity: 0.5;\n }\n }\n}\n.ag-body-viewport,\n.ag-floating-top-viewport {\n @include themify($grid-theme) {\n background-color: themed(\"background\");\n }\n}\n\n.ag-theme-material .ag-checkbox-input-wrapper:focus-within,\n.ag-theme-material .ag-checkbox-input-wrapper:active {\n box-shadow: none;\n}\n\n.ag-floating-top-viewport .ag-floating-top-container .vwap-summary-strapline {\n @include themify($grid-theme) {\n background-color: themed(\"straplineBackground\");\n }\n .ag-cell-value {\n color: $dark-grey-color;\n }\n}\n\n.analysis-grid-height {\n height: 500px;\n}\n\n//Used in Field Definition screen to hide text in grid pagination which reads \"showing 10 of 100 records\"\n.hide-grid-summary-panel .ag-paging-row-summary-panel {\n display: none;\n}\n\n// Used in Country Venue Selector in Benchmark Profile Editor\n// Purpose : To remove additional spacing within the grid\n.country-venue-grid .lm-btn {\n padding: 0;\n font-size: 15px;\n}\n\n.country-venue-grid .MuiButton-root {\n padding: 0;\n min-width: 30px;\n}\n\n.ag-popup-child {\n z-index: 1001;\n}\n\n// Overlay styles\n.ag-overlay-loading-center {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 280px;\n gap: 12px;\n padding: 12px 0 8px 8px;\n box-shadow: none !important;\n font-weight: bold;\n color: $grey-variant-color-ten;\n fill: $grey-variant-color-ten;\n font-size: 12px;\n @include themify($grid-theme) {\n background: themed(\"background\");\n }\n}\n\n@media print {\n .ag-theme-material .ag-header {\n border-bottom: none !important;\n }\n\n .ag-floating-top-viewport .ag-floating-top-container .vwap-summary-strapline {\n @include themify($grid-theme) {\n background-color: themed(\"straplineBackground\") !important;\n }\n .ag-cell-value {\n color: $dark-grey-color !important;\n }\n }\n}\n\n.ag-theme-material .ag-ltr .ag-row-group-leaf-indent .ag-group-value {\n display: none;\n}\n\n.ag-floating-top-viewport .ag-floating-top-container .ag-row-group-leaf-indent .ag-group-value {\n display: flex;\n}\n\n.ag-pinned-left-floating-top .ag-row-group-leaf-indent .ag-group-value {\n display: flex !important;\n}\n\n.order-benchmarks {\n .ag-header-group-cell-label {\n justify-content: center;\n }\n .ag-header-group-cell {\n border-right: 1px solid rgb(226, 226, 226);\n }\n}", "\n $materialUi-theme:(\n light:(\n switchButton: $white-variant-fifteen,\n checkboxRoot: rgba(0, 0, 0, 0.54),\n ),\n dark:(\n switchButton: #bdbdbd,\n checkboxRoot: rgba(255, 255, 255, 0.30),\n )\n);\n\n//switch label color on disabled on darkmode and lightmode\n.MuiFormControlLabel-label.Mui-disabled{\n @include themify($themes) {\n color: rgba(themed('color'),.5);\n }\n}\n\n//switch button (circle) on disabled\n.MuiSwitch-colorPrimary.Mui-disabled {\n @include themify($materialUi-theme) {\n color: themed('switchButton');\n }\n}\n\n.MuiCheckbox-root{\n @include themify($materialUi-theme) {\n color: themed('checkboxRoot');\n }\n}\n.MuiCheckbox-colorPrimary.Mui-checked{\n color: $primary-color;\n}\n\n//using on datepicker from Material UI------------------------------------\n//purpose: turn the color of the selected date white\n.MuiPickersToolbarText-toolbarBtnSelected{\n color: $white;\n}\n\n.MuiPickersToolbarText-toolbarTxt {\n color: $white;\n}\n\n//using on datepicker from Material UI------------------------------------\n//purpose: change icon\n.MuiOutlinedInput-adornedEnd {\n padding-right: 5px;\n}\n.MuiFormControl-root .MuiIconButton-label {\n font-family: $font-awesome-pro;\n font-size: 20px;\n font-weight: 100;\n\n .MuiSvgIcon-root{\n display:none;\n }\n &:before {\n content: \"\\f783\";\n }\n}\n\n//using on select from Material UI------------------------------------\n//purpose: change chevron\n.MuiSelect-selectMenu {\n padding-right:35px;\n\n &:before {\n font-family: $font-awesome-pro;\n font-size: 15px;\n font-weight: 100;\n content: \"\\f078\";\n position: absolute;\n right: 14px;\n }\n}\n.MuiSelect-icon {\n display: none;\n}\n\n.MuiInputBase-root {\n height: 50px;\n}\n\n.MuiSelect-select:focus {\n background: transparent;\n}", ".daterangepicker {\n position: absolute;\n color: inherit;\n background-color: $white;\n border-radius: 4px;\n border: 1px solid $white-variant-two;\n width: 278px;\n max-width: none;\n padding: 0;\n margin-top: 7px;\n top: 100px;\n left: 20px;\n z-index: 999999;\n display: none;\n font-family: arial;\n font-size: 15px;\n line-height: 1em;\n transform: translateY(-70px);\n}\n\n.daterangepicker:before, .daterangepicker:after {\n position: absolute;\n display: inline-block;\n border-bottom-color: $dark-variant-color;\n content: '';\n}\n\n.daterangepicker:before {\n top: -7px;\n border-right: 7px solid transparent;\n border-left: 7px solid transparent;\n border-bottom: 7px solid $light-theme-color;\n}\n\n.daterangepicker:after {\n top: -6px;\n border-right: 6px solid transparent;\n border-bottom: 6px solid $white;\n border-left: 6px solid transparent;\n}\n\n.daterangepicker.opensleft:before {\n right: 9px;\n}\n\n.daterangepicker.opensleft:after {\n right: 10px;\n}\n\n.daterangepicker.openscenter:before {\n left: 0;\n right: 0;\n width: 0;\n margin-left: auto;\n margin-right: auto;\n}\n\n.daterangepicker.openscenter:after {\n left: 0;\n right: 0;\n width: 0;\n margin-left: auto;\n margin-right: auto;\n}\n\n.daterangepicker.opensright:before {\n left: 9px;\n}\n\n.daterangepicker.opensright:after {\n left: 10px;\n}\n\n.daterangepicker.drop-up {\n margin-top: -7px;\n}\n\n.daterangepicker.drop-up:before {\n top: initial;\n bottom: -7px;\n border-bottom: initial;\n border-top: 7px solid $light-theme-color;\n}\n\n.daterangepicker.drop-up:after {\n top: initial;\n bottom: -6px;\n border-bottom: initial;\n border-top: 6px solid $white;\n}\n\n.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {\n float: none;\n}\n\n.daterangepicker.single:not(.singleDateRange) .drp-selected {\n display: none;\n}\n\n.daterangepicker.show-calendar .drp-calendar {\n display: block;\n}\n\n.daterangepicker.show-calendar .drp-buttons {\n display: block;\n}\n\n.daterangepicker.auto-apply .drp-buttons {\n display: none;\n}\n\n.daterangepicker .drp-calendar {\n display: none;\n max-width: 270px;\n}\n\n.daterangepicker .drp-calendar.left {\n padding: 8px 0 8px 8px;\n}\n\n.daterangepicker .drp-calendar.right {\n padding: 8px;\n}\n\n.daterangepicker .drp-calendar.single .calendar-table {\n border: none;\n}\n\n.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {\n color: $white;\n border: solid $dark-color-full-opacity;\n border-width: 0 2px 2px 0;\n border-radius: 0;\n display: inline-block;\n padding: 3px;\n}\n\n.daterangepicker .calendar-table .next span {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n}\n\n.daterangepicker .calendar-table .prev span {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n}\n\n.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {\n white-space: nowrap;\n text-align: center;\n vertical-align: middle;\n min-width: 32px;\n width: 32px;\n height: 24px;\n line-height: 24px;\n font-size: 12px;\n border-radius: 4px;\n border: 1px solid transparent;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.daterangepicker .calendar-table {\n border: 1px solid $white;\n border-radius: 4px;\n background-color: $white;\n}\n\n.daterangepicker .calendar-table table {\n width: 100%;\n margin: 0;\n border-spacing: 0;\n border-collapse: collapse;\n}\n\n.daterangepicker td.available:hover, .daterangepicker th.available:hover {\n background-color: $white-variant-fifteen;\n border-color: transparent;\n color: inherit;\n}\n\n.daterangepicker td.week, .daterangepicker th.week {\n font-size: 80%;\n color: $light-theme-color;\n}\n\n.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {\n background-color: $white;\n border-color: transparent;\n color: $grey-variant-color-six;\n}\n\n.daterangepicker td.in-range {\n background-color: #ebf4f8;\n border-color: transparent;\n color: $dark-color-full-opacity;\n border-radius: 0;\n}\n\n.daterangepicker td.start-date {\n border-radius: 4px 0 0 4px;\n}\n\n.daterangepicker td.end-date {\n border-radius: 0 4px 4px 0;\n}\n\n.daterangepicker td.start-date.end-date {\n border-radius: 4px;\n}\n\n.daterangepicker td.active, .daterangepicker td.active:hover {\n background-color: #357ebd;\n border-color: transparent;\n color: $white;\n}\n\n.daterangepicker th.month {\n width: auto;\n}\n\n.daterangepicker td.disabled, .daterangepicker option.disabled {\n color: $grey-variant-color-six;\n cursor: not-allowed;\n text-decoration: line-through;\n}\n\n.daterangepicker select.monthselect, .daterangepicker select.yearselect {\n font-size: 12px;\n padding: 1px;\n height: auto;\n margin: 0;\n cursor: default;\n}\n\n.daterangepicker select.monthselect {\n margin-right: 2%;\n width: 56%;\n}\n\n.daterangepicker select.yearselect {\n width: 40%;\n}\n\n.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {\n width: 50px;\n margin: 0 auto;\n background: $white-variant-fifteen;\n border: 1px solid $white-variant-fifteen;\n padding: 2px;\n outline: 0;\n font-size: 12px;\n}\n\n.daterangepicker .calendar-time {\n text-align: center;\n margin: 4px auto 0 auto;\n line-height: 30px;\n position: relative;\n}\n\n.daterangepicker .calendar-time select.disabled {\n color: $light-theme-color;\n cursor: not-allowed;\n}\n\n.daterangepicker .drp-buttons {\n clear: both;\n text-align: right;\n padding: 8px;\n border-top: 1px solid $white-variant-two;\n display: none;\n line-height: 12px;\n vertical-align: middle;\n}\n\n.daterangepicker .drp-selected {\n display: inline-block;\n font-size: 12px;\n padding-right: 8px;\n}\n\n.daterangepicker .drp-buttons .btn {\n margin-left: 8px;\n font-size: 12px;\n font-weight: bold;\n padding: 4px 8px;\n}\n\n.daterangepicker.show-ranges .drp-calendar.left {\n border-left: 1px solid $white-variant-two;\n}\n\n.daterangepicker .ranges {\n float: none;\n text-align: left;\n margin: 0;\n}\n\n.daterangepicker.show-calendar .ranges {\n margin-top: 8px;\n}\n\n.daterangepicker .ranges ul {\n list-style: none;\n margin: 0 auto;\n padding: 0;\n width: 100%;\n}\n\n.daterangepicker .ranges li {\n font-size: 12px;\n padding: 8px 12px;\n cursor: pointer;\n}\n\n.daterangepicker .ranges li:hover {\n background-color: $white-variant-fifteen;\n}\n\n.daterangepicker .ranges li.active {\n background-color: #08c;\n color: $white;\n}\n\n/* Custom CSS */\n.daterangepicker .liquid-metrix-info {\n display: none;\n}\n\n.daterangepicker .liquid-metrix-info .select-end-date {\n display: none;\n}\n\n.daterangepicker.singleDateRange .liquid-metrix-info {\n display: block;\n clear: both;\n border-top: 1px solid $white-variant-two;\n padding: 20px 0px;\n text-align: center;\n}\n\n.daterangepicker.singleDateRange .liquid-metrix-info span b {\n color: #0087cc;\n}\n\n/* Larger Screen Styling */\n@media (min-width: 564px) {\n .daterangepicker {\n width: auto; }\n .daterangepicker .ranges ul {\n width: 140px; }\n .daterangepicker.single .ranges ul {\n width: 100%; }\n .daterangepicker.single .drp-calendar.left {\n clear: none; }\n .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .drp-calendar {\n float: left; }\n .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .drp-calendar {\n float: right; }\n .daterangepicker.ltr {\n direction: ltr;\n text-align: left; }\n .daterangepicker.ltr .drp-calendar.left {\n clear: left;\n margin-right: 0; }\n .daterangepicker.ltr .drp-calendar.left .calendar-table {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .daterangepicker.ltr .drp-calendar.right {\n margin-left: 0; }\n .daterangepicker.ltr .drp-calendar.right .calendar-table {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .daterangepicker.ltr .drp-calendar.left .calendar-table {\n padding-right: 8px; }\n .daterangepicker.ltr .ranges, .daterangepicker.ltr .drp-calendar {\n float: left; }\n .daterangepicker.rtl {\n direction: rtl;\n text-align: right; }\n .daterangepicker.rtl .drp-calendar.left {\n clear: right;\n margin-left: 0; }\n .daterangepicker.rtl .drp-calendar.left .calendar-table {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0; }\n .daterangepicker.rtl .drp-calendar.right {\n margin-right: 0; }\n .daterangepicker.rtl .drp-calendar.right .calendar-table {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0; }\n .daterangepicker.rtl .drp-calendar.left .calendar-table {\n padding-left: 12px; }\n .daterangepicker.rtl .ranges, .daterangepicker.rtl .drp-calendar {\n text-align: right;\n float: right; } }\n@media (min-width: 730px) {\n .daterangepicker .ranges {\n width: auto; }\n .daterangepicker.ltr .ranges {\n float: left; }\n .daterangepicker.rtl .ranges {\n float: right; }\n .daterangepicker .drp-calendar.left {\n clear: none !important; } }\n", "// ! Styles override for mui table in settings page\n.css-rorn0c-MuiTableContainer-root {\n min-width: fit-content;\n}\n\n.MuiTable-root {\n font-family: $global-font-family;\n color: $dark-grey-color; \n}\n\n.settings-nav {\n .MuiTableCell-root {\n font-family: $global-font-family;\n font-size: 12px;\n color: $dark-grey-color;\n }\n .MuiTableCell-root:nth-child(1) {\n font-weight: bolder;\n }\n .MuiTableCell-root[scope=\"col\"]:nth-child(3) {\n font-style: normal;\n font-size: 12px;\n }\n .MuiTableCell-root:nth-child(3) {\n font-style: italic;\n font-size: 10px;\n color: $dark-grey-color;\n }\n}\n\n.MuiList-root {\n li {\n font-size: 0.8rem;\n }\n}\n\n.MuiPopover-root {\n z-index: 1000000 !important;\n}\n\n.MuiSelect-root {\n font-size: 0.9rem;\n}\n\n.order-benchmarks {\n .benchmark-time {\n .MuiSelect-outlined.MuiSelect-outlined {\n width: fit-content;\n min-width: 130px;\n }\n } \n}\n.country-venue-selector {\n .MuiTextField-root {\n width: 200px;\n }\n}\n", ".alert {\n color: $white;\n border: none;\n\n a {\n color: $white;\n text-decoration: underline;\n }\n\n &.alert-primary {\n background-color: $primary-blue;\n }\n\n &.alert-danger {\n background-color: $secondary-survaillance;\n }\n}\n\n.alert-success{\n background-color: #64ca93;\n}\n\n.no-script-msg {\n @include flex;\n @include flex-direction-c;\n @include flex-align-c;\n @include flex-justify-c;\n position: fixed;\n top: 70px;\n left: 0;\n right: 0;\n margin: 0 auto;\n background-color: #e27c79;\n color: #9f2723;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n width:50vw;\n z-index:9999;\n text-align:center;\n padding:30px;\n i{\n font-size:60px;\n }\n h3{\n margin:20px 0 5px;\n font-size:20px;\n }\n}\n\n.lm-alert{\n @include flex;\n @include flex-align-c;\n position: fixed;\n top: 75px;\n right: 20px;\n color: $white-variant;\n max-width: 350px;\n border-radius: 4px;\n box-shadow: 0px 2px 7px $dark-variant-color-one;\n padding: 15px 25px 15px 20px;\n &.success{\n background-color: #51A351;\n }\n &.danger{\n background-color: $danger-color;\n }\n &.info{\n background-color: $primary-color;\n }\n .icon{\n font-size: 30px;\n margin-right: 15px;\n }\n .content{ \n .title{\n font-size: 14px;\n font-weight: 400;\n margin-bottom: 3px;\n }\n .description{\n font-size: 13px;\n font-weight: 100;\n }\n }\n .fa-times{\n position: absolute;\n top: 9px;\n right: 12px;\n cursor: pointer;\n }\n \n}", "/************************************\n MIXINS\n************************************/\n@mixin animation($str) {\n -webkit-animation: #{$str};\n -moz-animation: #{$str};\n -ms-animation: #{$str};\n -o-animation: #{$str};\n animation: #{$str};\n}\n\n\n/************************************\n INPUT HIGHLIGHTER\n************************************/\n@-webkit-keyframes inputHighlighter {\n from {\n background: $primary-color;\n }\n\n to {\n width: 0;\n background: transparent;\n }\n}\n\n@-moz-keyframes inputHighlighter {\n from {\n background: $primary-color;\n }\n\n to {\n width: 0;\n background: transparent;\n }\n}\n\n@keyframes inputHighlighter {\n from {\n background: $primary-color;\n }\n\n to {\n width: 0;\n background: transparent;\n }\n}\n\n", "$grid-theme: (\n light: (\n color: $dark-color-full-opacity,\n ),\n dark: (\n color: #f0f7ffd1,\n ),\n);\n\n@mixin badge {\n display: inline-block;\n padding: 4px 8px 4px 8px;\n border-radius: 3px;\n font-size: 10px;\n text-align: center;\n font-weight: 600;\n text-transform: uppercase;\n}\n\n.lm-badge {\n @include badge;\n color: $white;\n line-height: initial;\n //colors\n &.lm-badge-success-color {\n background: $success-color;\n }\n &.lm-badge-amber {\n background: $secondary-orange;\n }\n &.lm-badge-navy {\n background: $navy-blue;\n }\n &.lm-badge-primary {\n background: $primary-color;\n }\n\n &.lm-badge-gray-open {\n background: #88898b;\n }\n\n &.lm-badge-primary-pastel {\n background: rgba($primary-color, 0.5);\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n\n &.lm-badge-danger {\n background: $danger-color;\n }\n\n &.lm-badge-danger-pastel {\n background: rgba($danger-color, 0.5);\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n\n &.lm-badge-gray {\n background: rgba($dark-color-full-opacity, 0.6);\n }\n\n &.lm-badge-orange {\n background: $secondary-orange;\n }\n\n &.lm-badge-error-color {\n background: $error-color;\n }\n\n &.lm-badge-gray-pastel {\n background: rgba($dark-color-full-opacity, 0.17);\n @include themify($grid-theme) {\n color: themed(\"color\");\n }\n }\n //sizes\n &.lm-badge-s {\n padding: 3px 5px 2px 5px;\n font-size: 9px;\n }\n\n &.lm-badge-l {\n padding: 5px 10px;\n font-size: 11px;\n }\n}\n\n.grid-badge {\n width: 200px;\n}\n\n.venue-badge {\n width: 60px;\n}\n\n@media print {\n .lm-badge {\n @include badge;\n color: $white !important;\n line-height: initial;\n //colors\n &.lm-badge-success-color {\n background: $success-color !important;\n }\n &.lm-badge-amber {\n background: $secondary-orange !important;\n }\n &.lm-badge-navy {\n background: $navy-blue !important;\n }\n &.lm-badge-primary {\n background: $primary-color !important;\n }\n\n &.lm-badge-primary-pastel {\n background: rgba($primary-color, 0.5) !important;\n @include themify($grid-theme) {\n color: themed(\"color\") !important;\n }\n }\n\n &.lm-badge-danger {\n background: $danger-color !important;\n }\n\n &.lm-badge-danger-pastel {\n background: rgba($danger-color, 0.5) !important;\n @include themify($grid-theme) {\n color: themed(\"color\") !important;\n }\n }\n\n &.lm-badge-gray {\n background: rgba($dark-color-full-opacity, 0.6) !important;\n }\n\n &.lm-badge-orange {\n background: $secondary-orange !important;\n }\n\n &.lm-badge-error-color {\n background: $error-color !important;\n }\n\n &.lm-badge-gray-open {\n background: #88898b !important;\n }\n\n &.lm-badge-gray-pastel {\n background: rgba($dark-color-full-opacity, 0.17) !important;\n @include themify($grid-theme) {\n color: themed(\"color\") !important;\n }\n }\n //sizes\n &.lm-badge-s {\n padding: 3px 5px 2px 5px;\n font-size: 9px;\n }\n\n &.lm-badge-l {\n padding: 5px 12px;\n font-size: 11px;\n }\n }\n}\n", "$before-animation-background-color: rgba(236, 240, 241, .3);\n\n$button-theme:(\n light:(\n borderColor: $dark-variant-color-nine,\n CloseBtnHover: rgba($disabled-background-color,0.15),\n color: $dark-theme-bg-dark,\n disabledButtonColor: rgba($disabled-background-color,0.45),\n disabledButtonBackgroundColor: $btn-text-disabled-background-color\n ),\n dark:(\n borderColor: $before-animation-background-color,\n CloseBtnHover: rgba(236, 240, 241, 0.3),\n color: $white,\n disabledButtonColor: rgba(232, 232, 232, 0.5),\n disabledButtonBackgroundColor: $btn-text-disabled-background-color\n )\n);\n\n.lm-btn {\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n background: none;\n border-radius: 2px;\n border-width: 0;\n\n &, &:focus {\n color: $white;\n }\n\n font-size: $font-size-btn;\n outline: none;\n overflow: hidden;\n padding: 12px 24px;\n position: relative;\n text-transform: uppercase;\n text-align: center;\n transition: background-color .3s;\n cursor: pointer;\n\n &:hover {\n text-decoration: none;\n }\n &.primary {\n background-color: $primary-color;\n\n &:disabled {\n background-color: #74c3ce;\n color: $disabled-primary-color;\n }\n\n &:hover {\n background-color: $primary-hover;\n color: $white;\n }\n\n &.lm-btn-outlined {\n box-shadow: none;\n background-color: transparent;\n border: 1px solid $primary-blue;\n color: $primary-color;\n\n &:disabled {\n background-color: $btn-outlined-disabled-background-color;\n color: rgba($primary-color,0.45);\n border: 1px solid rgba($primary-color,0.4);\n }\n\n &:hover {\n background-color: rgba($primary-color,0.15);\n }\n }\n\n &.lm-btn-text {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n color: $primary-blue;\n\n &:disabled {\n background-color: $btn-text-disabled-background-color;\n color: rgba($primary-color,0.45);\n }\n\n &:hover {\n background-color: rgba($primary-color,0.15);\n }\n }\n }\n\n &.danger {\n background-color: $danger-color;\n\n &:disabled {\n background-color: #ec838f;\n color: $disabled-primary-color;\n }\n\n &:hover {\n background-color: $danger-color;\n color: $white;\n }\n\n &.lm-btn-outlined {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n border: 1px solid $danger-color;\n color: $danger-color;\n\n &:disabled {\n background-color: $btn-outlined-disabled-background-color;\n color: rgba($danger-color,0.45);\n border: 1px solid rgba($danger-color,0.4);\n }\n\n &:hover {\n background-color: rgba($danger-color,0.15);\n }\n }\n\n &.lm-btn-text {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n color: $danger-color;\n\n &:disabled {\n background-color: $btn-text-disabled-background-color;\n color: rgba($danger-color,0.45);\n }\n\n &:hover {\n background-color: rgba($danger-color,0.15);\n }\n }\n }\n\n &.default {\n background-color: $disabled-background-color;\n\n &:disabled {\n background-color: rgba($disabled-background-color,.6);\n color: $disabled-primary-color;\n }\n\n &:hover {\n background-color: $disabled-background-color;\n color: $white;\n }\n\n &.lm-btn-outlined {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n\n @include themify($button-theme) {\n border: 1px solid themed('borderColor');\n color: themed('color');\n }\n\n &:disabled {\n background-color: $btn-outlined-disabled-background-color;\n color: rgba($disabled-background-color,0.45);\n border: 1px solid rgba($disabled-background-color,0.4);\n }\n\n &:hover {\n @include themify($button-theme) {\n background-color: themed('CloseBtnHover');\n }\n }\n }\n\n &.lm-btn-text {\n border-radius: 4px;\n box-shadow: none;\n background-color: transparent;\n @include themify($button-theme) {\n color: themed('color');\n }\n\n\n &.button-lightMode {\n color: $white;\n }\n\n &:disabled {\n background-color: $btn-text-disabled-background-color;\n color: rgba($disabled-background-color,0.45);\n }\n\n &:hover {\n @include themify($button-theme) {\n background-color: themed('CloseBtnHover');\n }\n }\n }\n\n &.lm-btn-disabled {\n &:disabled { \n @include themify($button-theme) {\n background-color: themed('disabledButtonBackgroundColor');\n color: themed('disabledButtonColor');\n }\n }\n }\n }\n\n &.green {\n background-color: #32bf51;\n\n &:hover {\n background-color: #2dad49;\n }\n }\n //btn types\n &.lm-btn-icon {\n @include btn-types($padding: 0, $font-size: 13px, $height: 30px, $width: 30px, $min-width: 30px);\n\n &.lm-btn-s {\n @include btn-types($padding: 0, $font-size: 12px, $height: 25px, $width: 25px, $min-width: 25px);\n }\n\n &.lm-btn-l {\n @include btn-types($padding: 0, $font-size: 17px, $height: 35px, $width: 35px, $min-width: 35px)\n }\n\n &.lm-btn-xl {\n @include btn-types($padding: 0, $font-size: 19px, $height: 40px, $width: 40px, $min-width: 40px);\n }\n }\n\n &.lm-btn-circle {\n border-radius: 50%;\n }\n\n &.lm-btn-width-fit {\n @include width-fit-content;\n }\n //btn elements\n .btn-label {\n display: block;\n font-weight: 700;\n letter-spacing: 1px;\n\n .caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n border-top: 6px dashed;\n border-right: 4px solid transparent;\n border-left: 4px solid transparent;\n margin-left: 4px;\n top: -1px;\n position: relative;\n }\n }\n\n .btn-icon {\n font-size: 14px;\n margin-right: $s;\n }\n //btn sizes\n &.lm-btn-s {\n padding: 8px 18px;\n }\n\n &.lm-btn-l {\n padding: 14px 28px;\n }\n\n &.lm-btn-xl {\n padding: 16px 30px;\n }\n //loading\n .lm-loader {\n opacity: 0;\n }\n\n &.loading {\n span {\n opacity: 0\n }\n\n .lm-loader {\n opacity: 1\n }\n }\n //temporary to disable the animation form the beta button component\n &-material {\n &:before {\n background-color: transparent;\n }\n }\n //animation\n &:not([disabled]) {\n box-shadow: $box-shadow-style;\n\n &:before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n display: block;\n width: 0;\n padding-top: 0;\n border-radius: 100%;\n background-color: $before-animation-background-color;\n @include transform(translate(-50%, -50%));\n }\n\n &.active, &:active {\n &:before {\n width: 120%;\n padding-top: 120%;\n transition: width .2s ease-out, padding-top .2s ease-out;\n }\n }\n }\n}\na.lm-btn {\n text-decoration: none;\n &:focus, &:hover, &:active {\n text-decoration: none;\n }\n &:focus{\n outline: none;\n }\n}\n\n.lm-multiselect {\n .lm-btn.default {\n background-color: transparent;\n box-shadow:none;\n\n &:not(.outline) {\n background-color: $before-animation-background-color;\n color: $white;\n\n &:hover {\n background-color: $before-animation-background-color;\n color: $white;\n }\n }\n\n &.outline, &.lm-btn-outlined {\n @include themify($button-theme) {\n border: 1px solid themed('borderColor');\n color: themed('color');\n }\n background-color: transparent;\n }\n\n &.lm-btn-text {\n background-color: transparent;\n color: $white;\n }\n }\n}\n\n.lm-btn-group{\n .lm-btn{\n &.lm-btn-outlined, &.lm-btn-contained{\n border-radius: 0 0 0 0 ;\n border: 1px solid $primary-color;\n border-left: none;\n box-shadow: none;\n\n &:first-of-type{\n \n border-radius: 4px 0 0 4px;\n border-left: 1px solid $primary-color;\n }\n\n &:last-of-type{\n border-radius: 0 4px 4px 0;\n border-left: none;\n }\n\n &:focus{\n outline: none;\n }\n }\n &.lm-btn-outlined{\n background-color: rgba($primary-color,0.10);\n .MuiButton-label {\n color: $primary-color;\n }\n }\n }\n}", "$panel-theme:(\n light:(\n panelBackground: $white,\n panelDivider: $dark-variant-color-three,\n ),\n dark:(\n panelBackground: $dark-theme-bg-dark,\n panelDivider: $panel-divider-color,\n )\n);\n\n.sandbox-page-wrapper {\n .nav-tabs > li {\n margin: 0;\n\n a {\n @include transition(300ms);\n @include themify($themes) {\n color: themed('color');\n }\n opacity: 0.5;\n padding: 20px 25px 20px 25px;\n border-radius: 2px 2px 0px 0px;\n font-weight: 400;\n font-size: 13px;\n border: none;\n margin: 0;\n border-radius: 0px;\n background-color: transparent;\n\n &:hover {\n @include themify($themes) {\n color: themed('color');\n }\n @include transition(300ms);\n background-color: transparent;\n opacity: 1;\n }\n }\n\n &.active {\n @include themify($panel-theme) {\n background-color: themed('panelBackground') !important;\n }\n z-index: 1;\n\n a {\n @include themify($themes) {\n color: themed('color');\n }\n border: none;\n box-shadow: 0px 2px $primary-color inset;\n background-color: transparent;\n opacity: 1;\n\n &:hover {\n @include transition(300ms);\n border: none;\n box-shadow: 0px 3px $primary-color inset;\n }\n }\n }\n }\n .nav-tabs-w-100 > li{ width:100%;}\n}\n\n.panel-white {\n @include panel;\n @include themify($panel-theme) {\n background-color: themed('panelBackground');\n }\n @include themify($themes) {\n color: themed('color');\n }\n}\n.panel-primary{\n border: transparent;\n .panel-heading{\n @include themify($themes) {\n color: themed('color');\n }\n }\n}\n\n//bredcrumbs on panel heading, make them look like titles\n.panel-heading {\n .MuiBreadcrumbs-ol {\n .MuiTypography-root {\n font-size: 1.7rem;\n font-weight: 100;\n }\n\n .MuiBreadcrumbs-separator {\n font-size: 1.7rem;\n font-weight: 100;\n }\n }\n}\n\n//using on Every tag with this class ONLY AFFECTING VENUE STATS -----------------------------------------------------------------------\n//purpose: make the panels have a shadow and background color \n.venue-stats-wrapper {\n .panel-body {\n @include themify($panel-theme) {\n background-color: themed('panelBackground');\n }\n box-shadow: 0px 0px 10px 2px $dark-variant-color-four;\n }\n }\n\n.panel {\n @include flex;\n @include flex-direction-c;\n box-shadow: 0px 0px 10px 2px $dark-variant-color-four;\n border:0;\n margin-bottom: 0;\n\n > .lm-panel-body {\n flex: 1 1 auto;\n }\n \n @include themify($panel-theme) {\n background-color: themed('panelBackground');\n }\n\n .panel-heading {\n @include themify($panel-theme) {\n border-bottom: 1px solid themed('panelDivider');\n }\n }\n\n &.panel.lm-panel-primary {\n background-color: $primary-color;\n // box-shadow: 0px 0px 10px 3px rgba($primary-color,.35);\n color: $white;\n\n & > .panel-heading, & > .lm-panel-body {\n background-color: $primary-color;\n color: $white;\n }\n }\n\n\n &.panel.lm-panel-danger {\n background-color: $danger-color;\n // box-shadow: 0px 0px 10px 3px rgba($danger-color,.35);\n color: $white;\n \n & > .panel-heading, & > .lm-panel-body {\n background-color: $danger-color;\n color: $white;\n }\n }\n\n .panel-heading, .lm-panel-body {\n @include themify($panel-theme) {\n background-color: themed('panelBackground');\n }\n position:relative;\n\n &.p-xl {\n padding: 40px;\n }\n\n &.p-lg {\n padding: 30px;\n }\n\n &.p-md {\n padding: 25px;\n }\n\n &.p-sm {\n padding: 15px;\n }\n\n &.p-xs {\n padding: 10px;\n }\n\n &.p-b-xl {\n padding-bottom: 40px;\n }\n\n &.p-xs-important {\n padding: 10px !important;\n }\n\n &.p-xxs {\n padding: 5px;\n }\n\n &::-webkit-scrollbar-track {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n }\n \n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n \n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n \n &::-webkit-scrollbar-thumb {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBar');\n }\n border: none;\n cursor: pointer;\n \n &:hover {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBarHover');\n }\n }\n }\n }\n\n &.p-xl {\n padding: 0;\n\n & > * {\n padding: 40px;\n }\n }\n\n &.p-lg {\n padding: 0;\n\n & > * {\n padding: 30px;\n }\n }\n\n &.p-md {\n padding: 0;\n\n & > * {\n padding: 25px;\n }\n }\n\n &.p-sm {\n padding: 0;\n\n & > * {\n padding: 15px;\n }\n }\n\n &.p-xs {\n padding: 0;\n\n & > * {\n padding: 10px;\n }\n }\n\n &.p-xxs {\n padding: 0;\n\n & > * {\n padding: 5px;\n }\n }\n\n &::-webkit-scrollbar-track {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBar');\n }\n border: none;\n cursor: pointer;\n\n &:hover {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBarHover');\n }\n }\n }\n}\n.pretrade-print-mode {\n .panel {\n box-shadow: none;\n }\n}\n\n.tca-web-print-mode {\n .panel {\n box-shadow: none;\n }\n}", ".lm-pagination {\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n text-align: center;\n padding:0;\n\n li{\n list-style:none;\n }\n\n li {\n background-color: transparent;\n border: none;\n @include flex;\n @include flex-justify-c;\n @include flex-align-c;\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n padding: 0;\n margin: 0 3px;\n color: $dark-color-full-opacity;\n cursor: pointer;\n \n i{\n font-size:10px;\n }\n\n &:hover {\n background-color: rgba(0,0,0,0.07);\n }\n\n &.active {\n @include flex;\n @include flex-justify-c;\n @include flex-align-c;\n background-color: $primary-color;\n border: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n padding: 0;\n color: $white;\n\n &:hover {\n background-color: $light-blue-background-color;\n color: $white;\n }\n }\n\n &.disabled {\n background-color: transparent;\n color: #9f9f9f;\n cursor:not-allowed;\n }\n }\n}\n", "$hover-before-box-shadow: 0px 0px 0px 8px $secondary-dark-blue-variant-one;\n\n.lm-checkbox {\n @include flex;\n @include flex-align-c;\n position: relative;\n text-align: left;\n margin-bottom: 0px;\n\n &.lm-checkbox-inline {\n display: inline-block;\n }\n\n label {\n clear: both;\n cursor: pointer;\n display: inline;\n font-weight: 400;\n line-height: $lm-checkbox-size;\n padding-left: 1px;\n vertical-align: top;\n margin-bottom: 0px;\n @include unselectable();\n\n &:not(:empty) {\n padding-left: $lm-checkbox-label-padding;\n }\n\n &:before, &:after {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n }\n\n &:before {\n width: $lm-checkbox-size;\n height: $lm-checkbox-size;\n border: 2px solid #777;\n border-radius: $lm-checkbox-border-radius;\n cursor: pointer;\n transition: all .3s;\n box-shadow: 0px 0px 0px 0px rgba(38, 183, 205, 0);\n }\n\n &:hover:before, &:focus:before {\n @include transition(200ms);\n box-shadow: $hover-before-box-shadow;\n }\n }\n\n input[type=\"checkbox\"] {\n outline: 0;\n opacity: 0;\n width: $lm-checkbox-size;\n margin: 0;\n display: block;\n float: left;\n font-size: inherit;\n\n &:checked {\n + label {\n &:hover:before {\n @include transition(200ms);\n box-shadow: $hover-before-box-shadow;\n }\n\n &:before {\n background: $lm-checkbox-checked-color;\n border: none;\n box-shadow: 0px 0px 20px 10px rgba(38, 183, 205, 0);\n }\n\n &:after {\n $lm-checkmark-size: $lm-checkbox-size - 2 * $lm-checkbox-padding;\n\n transform: translate($lm-checkbox-padding, ($lm-checkbox-size / 2) - ($lm-checkmark-size / 2.6)) rotate(-45deg);\n width: $lm-checkmark-size;\n height: $lm-checkmark-size / 2;\n border: $lm-checkmark-width solid $lm-checkmark-color;\n border-top-style: none;\n border-right-style: none;\n box-shadow: none;\n border-radius: unset;\n }\n }\n }\n\n &:disabled {\n opacity: 0.5;\n + label {\n @include transition(200ms);\n cursor: not-allowed;\n opacity: 0.5;\n\n &:before {\n border-color: darken($primary-grey-light,10%);\n }\n\n &:hover:before, &:focus:before {\n box-shadow: none;\n cursor: not-allowed;\n }\n }\n\n &:checked {\n + label:before {\n }\n }\n }\n }\n}\n", "$filterSidebar-theme:(\n light:(\n datePickerBackground: $white,\n hrBorder: rgb(225, 225, 230),\n color: $grey-variant-color-dark,\n ),\n dark:(\n datePickerBackground: $dark-theme-bg-darker,\n hrBorder: rgba(255, 255, 255, 0.06),\n color: $white-variant-eleven,\n )\n);\n\n.lm-multiselect {\n display: block;\n margin-bottom: 20px;\n position: relative;\n width: 100%;\n\n .dropdown-toggle {\n width: 100%;\n }\n\n .multiselect-dropdown {\n overflow: hidden;\n max-height: 0;\n /*background: rgba(255, 255, 255, 0.06);*/\n @include themify($filterSidebar-theme) {\n background-color: themed('datePickerBackground');\n color: themed('color');\n }\n box-shadow: $box-shadow-style;\n position: absolute;\n top: 100%;\n z-index: 1;\n\n &.open {\n max-height: 400px;\n @include transition(max-height 0.3s ease-in-out);\n }\n\n .actions {\n padding: 10px;\n border-bottom: 1px solid $primary-blue;\n\n button {\n width: calc(50% - 5px);\n float: left;\n padding: 12px;\n\n &:first-of-type {\n margin-right: 10px;\n }\n }\n }\n\n ul.options {\n list-style: none;\n padding: 0px;\n\n li.option {\n padding: 10px;\n }\n }\n }\n}\n\n//react\n.lm-multi-dropdown-switches, .lm-multi-dropdown-date{\n @include flex;\n @include flex-direction-c;\n @include themify($filterSidebar-theme) {\n background-color: themed('datePickerBackground');\n }\n box-shadow: 0px 3px 5px 1px $dark-variant-color-four;\n position: absolute; \n overflow: hidden;\n width: 100%;\n z-index: 3;\n max-height: 0;\n &.open{\n @include transition(400ms);\n max-height: 550px;\n }\n\n hr{\n @include themify($filterSidebar-theme) {\n border-top: 1px solid themed('hrBorder') !important;\n }\n margin: 7px 0;\n }\n\n .switches-list{\n height: 100%;\n overflow: auto;\n\n &::-webkit-scrollbar-track {\n background-color: $dark-variant-color-two;\n }\n \n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n background-color: $dark-variant-color-two;\n \n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n \n &::-webkit-scrollbar-thumb {\n background-color:$scroll-background-color;\n border: none;\n cursor: pointer;\n \n &:hover {\n background-color: $scroll-hover-background-color;\n }\n }\n }\n\n .MuiSwitch-root{\n margin-right: -12px;\n }\n .MuiTypography-body1{\n font-size: 0.86rem;\n white-space: nowrap;\n max-width: calc(100% - 55px);\n overflow-x: hidden;\n @include themify($filterSidebar-theme) {\n color: themed('color');\n }\n }\n}\n\n.lm-multi-dropdown-switches{\n &.open{\n @include transition(400ms);\n max-height: 350px;\n }\n}\n\n.lm-multi-dropdown-date{\n &.open{\n @include transition(400ms);\n max-height: 550px;\n }\n}", "//ATTENTION: inputs animations\n\n// Variables\n$bg-disabled-color: $primary-grey-dark;\n$bg-enabled-color: $primary-blue-transparent;\n$lever-disabled-color: $primary-grey-light;\n$lever-enabled-color: $primary-blue;\n\n// Switch\n.lm-switch {\n display: inline-block;\n position: relative;\n margin: 0;\n font-size: 16px;\n line-height: 24px;\n width: 100%;\n text-align: left;\n\n input {\n position: absolute;\n top: 0;\n right: 0;\n width: 36px;\n height: 20px;\n margin: 0px;\n opacity: 0;\n z-index: 0;\n }\n // Unchecked\n label {\n @include themify($button-theme) {\n color: themed('color');\n }\n // color: $primary-grey-light;\n display: inline-block;\n padding: 0;\n margin: 0px;\n cursor: pointer;\n text-align: left;\n font-size: 14px;\n font-weight: 300;\n\n &:before {\n content: '';\n position: absolute;\n top: 5px;\n right: 0;\n width: 36px;\n height: 14px;\n background-color: $bg-disabled-color;\n border-radius: 14px;\n z-index: 1;\n transition: background-color 0.28s cubic-bezier(.4, 0, .2, 1);\n }\n\n &:after {\n content: '';\n position: absolute;\n top: 2px;\n right: 16px;\n width: 20px;\n height: 20px;\n background-color: $lever-disabled-color;\n border-radius: 14px;\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14),0 3px 1px -2px $dark-variant-color, 0 1px 5px 0 rgba(0, 0, 0, .12);\n z-index: 2;\n transition: all 0.28s cubic-bezier(.4, 0, .2, 1);\n transition-property: right, background-color;\n }\n }\n // Checked\n input:checked + label {\n &:before {\n background-color: $bg-enabled-color;\n }\n\n &:after {\n right: 0px;\n background-color: $lever-enabled-color;\n }\n }\n // Focused\n // Uncomment for accessible outline\n // &__input:focus + &__label {\n // &:after {\n // outline: 1px dotted currentColor;\n // }\n // }\n}\n", "$input-num-theme:(\n light:(\n background: rgba(0,0,0,.05),\n color: $grey-variant-color-dark,\n labelBackground: $white-variant-ten,\n ),\n dark:(\n background: $panel-divider-color,\n color: $white-variant-eleven,\n labelBackground: $dark-variant-color-two,\n )\n);\n\n.input-num {\n @include flex;\n @include flex-wrap;\n padding: $s;\n\n .title {\n width: 100%;\n margin: 0 0 $m 0;\n }\n\n .lm-btn {\n\n &:first-of-type {\n margin-right: $xs;\n }\n\n &:last-of-type {\n margin-left: $xs;\n }\n }\n\n .input {\n @include transition((border-bottom 1s, font-size 200ms));\n width: $standard-size;\n border: none;\n border-bottom: 1px solid $primary-grey-light;\n outline: none;\n text-align: center;\n background-color: transparent;\n\n &:focus, &:active {\n font-size: 16px;\n border-bottom: 1px solid $primary-color;\n }\n //remove default arrows\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &[type=number] {\n -moz-appearance: textfield;\n }\n }\n}\n\n.MuiSlider-markLabel{ \n color: $white-variant-twelve;\n font-weight: 100;\n opacity: 0.75;\n font-size: 13px;\n}\n.lm-slider{\n .number-max-input ,.number-min-input{\n width: 95%;\n padding: 0 5px;\n @include themify($input-num-theme) {\n background-color: themed('labelBackground');\n color: themed('color');\n }\n border: none;\n border-radius: 4px;\n height: 25px;\n\n &::placeholder{\n @include themify($input-num-theme) {\n color: themed('color'); \n }\n }\n\n /* Remove input type number arrows/spinners */\n /* Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n &[type=number] {\n -moz-appearance:textfield;\n }\n }\n .number-max-input{\n text-align: right;\n }\n .number-max-text, .number-min-text{\n margin-top: 5px;\n color: rgba(255,255,255, .5);\n }\n\n .MuiSlider-trackInverted{\n .MuiSlider-track{\n background-color: #4a6782;\n }\n .MuiSlider-rail{\n background-color: $danger-color;\n }\n .MuiSlider-thumb{\n background-color: $danger-color;\n &:hover{\n box-shadow: 0px 0px 0px 8px rgba($danger-color, 0.16);\n }\n }\n }\n}\n\n.lm-basic-input-number{\n @include flex;\n @include flex-align-c;\n position: relative;\n input{\n @include themify($input-num-theme) {\n background-color: themed('background');\n color: themed('color'); \n }\n &:focus-visible {\n outline: none;\n }\n &:focus, &:active {\n border: 1px solid $primary-color;\n }\n @include flex;\n @include flex-align-c;\n background-color:rgba(200,200,200,.07);\n border-radius: 4px;\n padding: 9px 30px 9px 10px;\n font-size: 13px;\n border:none;\n width:100%;\n \n /* Remove input type number arrows/spinners */\n /* Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n /* Firefox */\n &[type=number] {\n -moz-appearance:textfield;\n }\n\n &:disabled {\n background: none;\n cursor: not-allowed;\n opacity: 0.5; \n }\n }\n .arrow-up, .arrow-down{\n @include transition(200ms);\n position: absolute;\n right:10px;\n color: $primary-color;\n cursor: pointer;\n i {\n &:hover {\n transform: scale(1.4);\n }\n }\n i.disabled {\n color: $grey-variant-color-seven;\n cursor: default;\n &:hover{\n transform: none;\n }\n }\n }\n .arrow-up{\n top: 1px;\n }\n .arrow-down{\n bottom: 1px;\n }\n}\n\n", "$transition-ease-all: 0.2s ease all;\n\n.lm-input-group {\n margin-bottom: 35px;\n position: relative;\n\n &:last-of-type {\n margin-bottom: 0px;\n }\n\n input {\n background-color: $dark-color;\n border: none;\n border-bottom: 1px solid $primary-grey-light;\n color: $primary-grey-light;\n caret-color: $primary-color;\n display: block;\n font-size: 14px;\n font-weight: 300;\n padding: 0px 0px 5px 0px;\n outline: none;\n width: 100%;\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-internal-autofill-previewed,\n &:-internal-autofill-selected {\n transition: background-color 20000s ease-in-out 0s;\n background-color: $dark-color ;\n -webkit-text-fill-color: $primary-grey-light;\n color: $primary-grey-light;\n box-shadow: 0 0 0 100px hsla(0, 0, 0, 0) inset;\n transition-delay: 99999s;\n }\n\n &:focus ~ label, &:valid ~ label {\n color: $primary-color;\n top: -20px;\n font-size: 14px;\n }\n\n &.has-error {\n ~ .error {\n margin-top: 5px;\n max-height: 15px;\n opacity: 1;\n }\n\n ~ .bar {\n &:before, &:after {\n width: 50%;\n background-color: $danger-color;\n }\n }\n }\n\n &:focus,\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus {\n ~ .bar {\n &:before, &:after {\n width: 50%;\n background-color: $primary-color;\n }\n }\n }\n\n &:focus ~ .highlight {\n animation: inputHighlighter 0.3s ease;\n -webkit-animation: inputHighlighter 0.3s ease;\n -moz-animation: inputHighlighter 0.3s ease;\n }\n }\n\n .input-group-addon {\n padding: 6px;\n position: absolute;\n width: 30px;\n right: 0;\n display: block;\n top: -6px;\n background: none;\n border: none;\n\n ~ input {\n padding-right: 30px;\n }\n }\n\n label {\n color: $primary-grey-light;\n font-size: 14px;\n font-weight: 300;\n left: 0px;\n position: absolute;\n pointer-events: none;\n margin: 0px;\n top: -20px;\n transition: $transition-ease-all;\n -moz-transition: $transition-ease-all;\n -webkit-transition: $transition-ease-all;\n }\n\n .bar {\n display: block;\n position: relative;\n width: 100%;\n\n &:before, &:after {\n background: $white;\n bottom: 0px;\n content: '';\n height: 1px;\n position: absolute;\n width: 0;\n transition: $transition-ease-all;\n -moz-transition: $transition-ease-all;\n -webkit-transition: $transition-ease-all;\n }\n\n &:before {\n left: 50%;\n }\n\n &:after {\n right: 50%;\n }\n }\n\n .highlight {\n height: 20px;\n left: 0;\n opacity: 0.5;\n pointer-events: none;\n position: absolute;\n top: 0%;\n width: 100px;\n }\n\n .error {\n color: $danger-color;\n display: block;\n max-height: 0px;\n margin-top: 0px;\n opacity: 0;\n overflow: hidden;\n text-align: left;\n transition: $transition-ease-all;\n -moz-transition: $transition-ease-all;\n -webkit-transition: $transition-ease-all;\n }\n}\n", "$dark-form-control-theme: #354249;\n$grid-template-columns-style: 1fr 1fr 1fr 4em;\n$mui-input-color: rgb(236, 240, 241);\n\n$formControl-theme:(\n light:(\n background: $white,\n border: $light-theme-color,\n ),\n dark:(\n background: $dark-form-control-theme,\n border: $dark-form-control-theme,\n )\n);\n\n$timeInput-theme: (\n light:(\n labelBackground: $white,\n border: $dark-variant-color-nine, \n labelText: $grey-variant-color-dark,\n inputText: $grey-variant-color-dark,\n borderHover: $grey-variant-color-dark, \n ),\n dark:(\n labelBackground: $dark-theme-bg-darker,\n border: $grey-variant-color-twelve,\n labelText: $light-mode-hover-border-color,\n inputText: $mui-input-color,\n borderHover: $light-mode-hover-border-color,\n )\n);\n\n.lm-time-input{\n position: relative;\n width: 100%;\n .time-input{\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 12px;\n @include themify($timeInput-theme) {\n border: 1px solid themed('border');\n }\n border-radius: 4px;\n padding: 12px 15px;\n background-color: transparent;\n width: 100%;\n cursor: pointer;\n font-size: 16px;\n\n &:hover {\n @include themify($timeInput-theme) {\n border: 1px solid themed('borderHover');\n } \n }\n\n i{\n font-size: 18px;\n }\n span{\n display: flex;\n @include themify($timeInput-theme) {\n color: themed('inputText');\n }\n input{\n background-color: transparent;\n border: none;\n width: 1.52em;\n\n //hide arrows\n /* Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Firefox */\n &[type=number] {\n -moz-appearance: textfield;\n }\n\n &:last-of-type {\n width: 2.2em;\n }\n }\n }\n\n &:focus{\n border: 1px solid $primary-color;\n outline: none;\n & ~ label{\n color: $primary-color;\n }\n }\n &::-webkit-calendar-picker-indicator{\n width: 13px;\n height: 13px;\n background: url(../../images/clock-light.svg);\n }\n }\n label{\n margin-top: 9px;\n @include themify($timeInput-theme) {\n color: themed('labelText');\n }\n position: absolute;\n top: -18px;\n left: 8px;\n @include themify($timeInput-theme) {\n background-color: themed('labelBackground');\n }\n padding: 0px 7px;\n font-weight: 100;\n font-size: 12px;\n }\n}\n\n.lm-time-picker{\n position: fixed;\n display: flex;\n flex-direction: column;\n width: 192px;\n // height: 161px;\n background-color: white;\n color: $dark-grey-color;\n z-index: $high-z-index;\n overflow: hidden;\n .header-grid{\n display: grid;\n grid-template-columns: $grid-template-columns-style;\n text-align: center;\n z-index: 2;\n border-bottom: 1px solid $dark-theme-bg-darker;\n padding: 0.5em 0;\n background-color: $white;\n }\n .numbers-grid{\n display: grid;\n grid-template-columns: $grid-template-columns-style;\n height: 100%;\n\n .time-column{\n display: flex;\n flex-direction: column;\n align-items: center;\n i{\n color: $dark-grey-color;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px 0;\n cursor: pointer;\n }\n }\n .numbers-column{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height:115px;\n align-self: center;\n border-right: 1px solid $dark-theme-bg-darker;\n overflow: hidden;\n .number-slot{\n height: 23px;\n text-align: center;\n .numbers-options{\n transition: 200ms;\n .number-option{\n line-height: 23px;\n font-size: 17px;\n margin: 0 7px;\n opacity: 0.5;\n &.selected{\n opacity: 1;\n }\n }\n }\n }\n }\n }\n \n \n}\n\n\n.form-group {\n position: relative;\n margin-bottom: 0px;\n\n .form-control {\n @include transition(300ms);\n padding: 14px 15px;\n height: auto;\n box-shadow: none;\n z-index: 0;\n width: 100%;\n \n\n &:focus, &:active {\n @include transition(300ms);\n border-color: $primary-color;\n\n & ~ label {\n @include transition(300ms);\n color: $primary-color;\n }\n }\n }\n\n label {\n @include transition(300ms);\n position: absolute;\n left: 15px;\n top: -9px;\n background-color: $white;\n color: $dark-color-full-opacity;\n padding: 0px 5px;\n font-weight: 400;\n }\n\n .form-icon {\n position: absolute;\n right: 10px;\n bottom: 19px;\n }\n //oposite colors\n &-dark {\n .form-control {\n background-color: transparent;\n border-color: $btn-light-mode-border-color;\n color: $white;\n //in case of a select\n option {\n color: $grey-variant-color-dark;\n }\n }\n\n label {\n color: $white;\n background-color: #2e383f;\n }\n }\n}\n.theme-dark {\n .form-group {\n .form-control {\n @include form-control-style($background-color: transparent, $border-color: $btn-light-mode-border-color, $color:$white, $option-color: $grey-variant-color-dark);\n }\n\n label {\n color: $white;\n background-color: $dark-theme-bg-dark;\n }\n }\n\n .form-control {\n @include form-control-style($background-color: transparent, $border-color: $btn-light-mode-border-color, $color:$white, $option-color: $grey-variant-color-dark);\n }\n}\n\n.theme-light {\n .form-group {\n .form-control {\n @include form-control-style($background-color: transparent, $border-color: $dark-variant-color-nine, $color:$dark-theme-bg-dark, $option-color: $grey-variant-color-dark);\n }\n\n label {\n color: $dark-theme-bg-dark;\n background-color: $white;\n }\n }\n\n .form-control {\n @include form-control-style($background-color: transparent, $border-color: $dark-variant-color-nine, $color:$dark-theme-bg-dark, $option-color: $grey-variant-color-dark);\n }\n\n .fa-calendar:before {\n color: $grey-variant-color-dark;\n }\n}\n\n.form-control {\n @include transition(300ms);\n padding: 12px 15px;\n height: auto;\n box-shadow: none;\n z-index: 0;\n width: 100%;\n\n &:focus, &:active {\n @include transition(300ms);\n border-color: $primary-color;\n }\n}\n\n.form-control.form-control-large{\n width: 250px;\n}\n\n.MuiSelect-select.Mui-disabled {\n cursor: default;\n color: rgba(0, 0, 0, 0.38);\n}\n\n//light mode for the inputs - react\n.input-lightMode{\n .MuiOutlinedInput-root{\n .MuiOutlinedInput-notchedOutline{\n border-color: $dark-variant-color-nine;\n }\n &:hover{\n .MuiOutlinedInput-notchedOutline{\n border-color: $grey-variant-color-dark;\n }\n &.Mui-focused{\n .MuiOutlinedInput-notchedOutline{\n border-color: $primary-color;\n }\n }\n }\n &.Mui-focused{\n .MuiOutlinedInput-notchedOutline{\n border-color: $primary-color;\n border-width: 1px;\n }\n }\n }\n .MuiInputLabel-root{\n font-weight: 100;\n color: $grey-variant-color-dark;\n &.Mui-focused{\n color: $primary-color;\n }\n }\n .MuiInputBase-input {\n color: $grey-variant-color-dark;\n }\n .MuiIconButton-root{\n .MuiIconButton-label{\n color: $grey-variant-color-dark;\n font-size: 18px;\n }\n }\n}\n.theme-dark{\n .MuiOutlinedInput-root:not(.Mui-error){\n .MuiOutlinedInput-notchedOutline{\n border-color: $grey-variant-color-twelve;\n }\n &:hover{\n .MuiOutlinedInput-notchedOutline{\n border-color: $light-mode-hover-border-color;\n }\n &.Mui-focused{\n .MuiOutlinedInput-notchedOutline{\n border-color: $primary-color;\n }\n }\n }\n &.Mui-focused{\n .MuiOutlinedInput-notchedOutline{\n border-color: $primary-color;\n border-width: 2px;\n }\n }\n }\n .MuiInputLabel-root{\n font-weight: 100;\n color: $light-mode-hover-border-color;\n &.Mui-focused{\n color: $primary-color;\n }\n }\n .MuiInputBase-input {\n color: $mui-input-color;\n }\n .MuiInputAdornment-root{\n color: $mui-input-color;\n .MuiIconButton-root{\n color: $mui-input-color;\n .MuiIconButton-label{\n color: $mui-input-color;\n font-size: 18px;\n }\n }\n .MuiIconButton-root.Mui-disabled{\n color: $light-mode-hover-border-color;\n }\n }\n\n .MuiSelect-select.Mui-disabled {\n cursor: default;\n color: $grey-variant-color-twelve !important;\n }\n\n .benchmark-time-readonly {\n .MuiInputBase-input {\n color: $grey-variant-color-twelve;\n }\n }\n \n //reports pages multiselect\n .form-group-temporary{\n .multiselect-native-select{\n .multiselect{\n background: transparent; \n border-color: $btn-light-mode-border-color;\n color: $white;\n }\n }\n .control-label{ \n background-color: $dark-theme-bg-dark;\n color: $white;\n font-weight: 400;\n }\n }\n}\n\n//help text \n.MuiFormHelperText-root{\n @include themify($themes) {\n color: themed('color');\n font-weight: themed('fontWeight');\n }\n opacity: 0.5;\n\n}\n\n//\n.MuiFormHelperText-root.Mui-error {\n @include themify($themes) {\n color: #f44336;\n }\n opacity: 1.0;\n}\n\n.form-wrap-margin {\n margin-bottom: 10px;\n}", "@keyframes ripple {\n 0% {\n box-shadow: 0px 0px 0px 1px $dark-color;\n }\n\n 50% {\n box-shadow: 0px 0px 0px $lm-radio-ripple-size $dark-variant-color-four;\n }\n\n 100% {\n box-shadow: 0px 0px 0px $lm-radio-ripple-size $dark-color;\n }\n}\n\n$radio-disabled-color: rgba(255, 255, 255, 0.42);\n\n.lm-radio {\n margin: 11px 0;\n\n &.lm-radio-inline {\n display: inline-block;\n }\n\n input[type=\"radio\"] {\n display: none;\n\n &:checked + label {\n &:before {\n border-color: $lm-radio-checked-color;\n }\n\n &:after {\n transform: scale(1);\n }\n }\n\n &:disabled {\n + label {\n @include transition(300ms);\n cursor: not-allowed;\n color: rgba(0, 0, 0, 0.42);\n\n &:before {\n border-color: darken($primary-grey-light,10%);\n }\n\n &:after {\n @include transition(300ms);\n background-color: darken($primary-grey-light,10%);\n }\n\n &:hover:before, &:focus:before {\n box-shadow: none;\n cursor: not-allowed;\n }\n }\n }\n }\n\n label {\n display: inline-block;\n height: $lm-radio-size;\n position: relative;\n padding: 0 ($lm-radio-size + 10px);\n margin-bottom: 0;\n cursor: pointer;\n vertical-align: bottom;\n\n &:before, &:after {\n position: absolute;\n content: '';\n border-radius: 50%;\n transition: all .3s ease;\n transition-property: transform, border-color;\n }\n\n &:before {\n left: 0;\n top: 0;\n width: $lm-radio-size;\n height: $lm-radio-size;\n border: 2px solid $lm-radio-border-color;\n }\n\n &:after {\n top: $lm-radio-size / 2 - $lm-radio-checked-size / 2;\n left: $lm-radio-size / 2 - $lm-radio-checked-size / 2;\n width: $lm-radio-checked-size;\n height: $lm-radio-checked-size;\n transform: scale(0);\n background: $lm-radio-checked-color;\n }\n\n &:hover:before, &:focus:before {\n @include transition(300ms);\n box-shadow: 0px 0px 0px 7px $secondary-dark-blue-variant-one;\n }\n }\n}\n\n.theme-dark {\n .lm-radio {\n margin: 11px 0;\n\n &.lm-radio-inline {\n display: inline-block;\n }\n\n input[type=\"radio\"] {\n display: none;\n\n &:checked + label {\n &:before {\n border-color: $lm-radio-checked-color;\n }\n\n &:after {\n transform: scale(1);\n }\n }\n\n &:disabled {\n + label {\n @include transition(300ms);\n cursor: not-allowed;\n color: $radio-disabled-color;\n\n &:before {\n border-color: $radio-disabled-color;\n }\n\n &:after {\n @include transition(300ms);\n background-color: $radio-disabled-color;\n }\n\n &:hover:before, &:focus:before {\n box-shadow: none;\n cursor: not-allowed;\n }\n }\n }\n }\n }\n}\n", "$modal-theme:(\n light:(\n background: $dark-variant-color,\n ),\n dark:(\n background: rgba(0,0,0,0.4),\n )\n);\n.lm-modal {\n @include themify($modal-theme) {\n background-color: themed('background');\n }\n @include themify($themes) {\n color: themed('color');\n }\n display:none;\n position: fixed;\n z-index: 999;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n overflow: auto;\n align-items: center;\n justify-content: center;\n background-color: $dark-variant-color;\n\n &.open{\n display: flex;\n }\n\n .sandbox-page-wrapper {\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n height: 100%;\n\n .panel {\n width: 500px;\n }\n }\n}\n.timeout-modal {\n z-index: 99999999\n}\n\n.MuiPopover-root{\n z-index: 9999999;\n}\n\n\n$noData-theme:(\n light:(\n background: $dark-theme-bg-dark,\n modalBackground: rgba(231, 233, 235, 0.85),\n ),\n dark:(\n background: $dark-theme-bg-dark-variant,\n modalBackground: rgba(61, 77, 92, 0.9),\n )\n);\n\n.lm-noData{\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n @include themify($noData-theme) {\n background-color: themed('modalBackground');\n }\n position: absolute;\n width: calc(100% + 30px);\n height: calc(100% + 30px);\n top: 0;\n left: 0;\n padding: 15px;\n margin: -15px;\n z-index: 2;\n .panel{\n @include flex;\n @include flex-align-s;\n @include themify($noData-theme) {\n background-color: themed('background');\n }\n color: $white;\n padding: 30px;\n position: relative;\n box-shadow: 0 4px 10px $dark-variant-color-one;\n h1{\n margin-top:0;\n }\n p{\n margin-top: 20px;\n opacity: 0.5;\n font-size: 15px;\n font-weight: 100;\n }\n\n .icon-background{\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n position: absolute;\n background-color: $white-variant;\n width: 120px;\n height: 120px;\n border-radius: 50%;\n bottom: -40px;\n right: -20px;\n box-shadow: 0 4px 10px $dark-variant-color-one;\n \n .icon{\n font-size: 55px;\n color: $primary-color;\n margin-left: 20px;\n }\n }\n }\n}\n", "$tooltip-theme:(\n light:(\n background: $disabled-background-color,\n color: $white-variant-two,\n ),\n dark:(\n background: $white-variant-five,\n color: $disabled-background-color,\n )\n);\n\n.tooltip{\n z-index:9999;\n}\n.tooltip-inner {\n padding: 15px;\n max-width: 250px;\n}\n.form-group{\n .tooltip{\n margin-right: -40%;\n }\n}\n.tooltip-arrow {\n @include themify($tooltip-theme) {\n border-top-color: themed('background');\n }\n border-top-color: $grey-variant-color-three;\n}\n\n\n.MuiTooltip-popper {\n //the top -60px is to correct the margin 60px of the topbar\n top: -60px !important;\n z-index: 99999999999999;\n .MuiTooltip-tooltip {\n background-color: $dark-theme-bg-dark-variant;\n color: $white-variant;\n @include themify($tooltip-theme) {\n background-color: themed('background');\n color: themed('color');\n }\n margin: 10px 0;\n box-shadow: 0px 2px 3px $dark-variant-color-one;\n position: relative;\n font-size: 0.9em;\n\n &:after {\n @include themify($tooltip-theme) {\n background-color: themed('background');\n }\n content: ' ';\n height: 8px;\n width: 8px;\n position: absolute;\n\n @include tooltip-position($right: 0, $left: 0, $top: -4px, $bottom: 0, $margin: 0 auto);\n\n transform: rotateZ(45deg);\n }\n }\n\n &[x-placement=\"left\"] {\n .MuiTooltip-tooltip {\n &:after {\n @include tooltip-position($right: 0, $left: 0, $top: -4px, $bottom: 0, $margin: 0 auto);\n }\n }\n }\n\n &[x-placement=\"right\"] {\n .MuiTooltip-tooltip {\n &:after {\n @include tooltip-position($right: auto, $left: -4px, $top: 0, $bottom: 0, $margin: auto 0);\n }\n }\n }\n\n &[x-placement=\"top\"] {\n .MuiTooltip-tooltip {\n &:after {\n @include tooltip-position($right: 0, $left: 0, $top: auto, $bottom: -4px, $margin: 0 auto);\n }\n }\n }\n}", ".lm-upload {\n position: relative;\n overflow: hidden;\n display: inline-block;\n & input[type=file] {\n font-size: 300px;\n position: absolute;\n left: 0;\n top: 0;\n opacity: 0;\n cursor:pointer;\n }\n\n .lm-upload-btn {\n margin:3px;\n margin-bottom:4px;\n }\n}", "\n.roulette {\n @include flex;\n line-height: 1em;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome and Opera */\n span {\n min-height: 1em;\n max-height: 1em;\n min-width: 0.617em;\n min-width: 0.617em;\n position: relative;\n overflow: hidden;\n\n ul {\n @include transition(2s);\n position: absolute;\n padding: 0;\n margin: 0;\n top: 0;\n\n li {\n list-style: none;\n }\n }\n }\n\n & ~ .roulette-fixed-number {\n opacity: 0;\n height: 0;\n line-height: 1em;\n }\n}\n", "$tabs-theme:(\n light:(\n background: $white-variant-one,\n color: $disabled-background-color,\n activeTabBackground: rgba($dark-color-full-opacity, .05),\n tabHoverBackground: rgba($dark-color-full-opacity, .03),\n ),\n dark:(\n background: $dark-variant-color-five,\n color: $white-variant-two,\n activeTabBackground: $dark-theme-bg-dark,\n tabHoverBackground: rgba(255,255,255, .05),\n )\n);\n\n.lm-tabs-bar {\n @include flex;\n @include themify($tabs-theme) {\n background-color: themed('background');\n }\n position: absolute;\n\n &.lm-tabs-bar-not-fixed{ \n position: relative;\n &.lm-tabs-bar-left, &.lm-tabs-bar-right, &.lm-tabs-bar-top, &.lm-tabs-bar-bottom{\n & ~ .lm-tab-panel{\n margin-top:0;\n margin-bottom: 0;\n margin-left: 0;\n margin-right: 0;\n }\n }\n }\n\n &.lm-tabs-bar-text-version{\n background-color: transparent;\n .lm-tab-link{\n opacity: 0.6; \n padding: 20px 25px;\n text-transform: uppercase; \n &:hover {\n background-color: transparent;\n opacity: 1;\n }\n &.active, &.active:hover {\n opacity: 1;\n border-bottom: 3px solid $primary-blue-variant-one;\n margin-bottom: -1px;\n color: $primary-color;\n font-weight: 600;\n background-color: transparent !important;\n pointer-events: none;\n }\n }\n }\n\n &.lm-tabs-bar-left, &.lm-tabs-bar-right {\n @include flex-direction-c;\n min-width: 60px;\n height: 100%;\n top: 0;\n }\n\n &.lm-tabs-bar-left {\n left: 0;\n\n & ~ .lm-tab-panel {\n margin-left: 60px;\n }\n }\n\n &.lm-tabs-bar-right {\n right: 0;\n\n & ~ .lm-tab-panel {\n margin-right: 60px;\n }\n }\n\n &.lm-tabs-bar-top, &.lm-tabs-bar-bottom {\n width: 100%;\n min-height: 60px;\n left: 0;\n &.lm-tabs-bar-divider{\n border-bottom: 1px solid $white-variant-thirteen;\n }\n .lm-tab-link{\n padding: 0 15px;\n }\n }\n\n &.lm-tabs-bar-top {\n top: 0;\n\n & ~ .lm-tab-panel {\n margin-top: 60px;\n }\n }\n\n &.lm-tabs-bar-bottom {\n bottom: 0;\n\n & ~ .lm-tab-panel {\n margin-bottom: 60px;\n }\n }\n\n .lm-tab-link {\n @include themify($tabs-theme) {\n color: themed('color');\n }\n @include transition(350ms);\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n min-width: 60px;\n min-height: 60px;\n cursor: pointer;\n text-decoration: none;\n\n &:hover {\n @include themify($tabs-theme) {\n background-color: themed('tabHoverBackground');\n }\n }\n\n &.active, &.active:hover {\n @include themify($tabs-theme) {\n background-color: themed('activeTabBackground');\n }\n }\n\n &.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n}\n\n.lm-tab-panel {\n overflow:auto;\n height: 100%;\n width: auto;\n\n & > .panel{\n border-radius: 0;\n }\n\n &::-webkit-scrollbar-track {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n }\n\n &::-webkit-scrollbar {\n width: 7px;\n height: 7px;\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBackground');\n }\n\n &:hover {\n width: 10px;\n height: 10px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBar');\n }\n border: none;\n cursor: pointer;\n\n &:hover {\n @include themify($scrollbar-theme) {\n background-color: themed('scrollbarBarHover');\n }\n }\n }\n}\n\n.lm-sections-divion{\n & > div{\n & > div{\n padding: 25px 35px 15px;\n\n @include themify($themes) {\n border-left: 2px dashed rgba(themed('color'),.1);\n border-top: 2px dashed rgba(themed('color'),.1);\n }\n \n &:first-child{\n border-left: none;\n padding-left: 0;\n }\n &:last-child{\n padding-right: 0;\n }\n }\n\n &:first-child{\n & > div{ \n padding-top: 10px;\n border-top: 0;\n }\n }\n }\n}", "$table-theme:(\n light:(\n oddRowBackground: $white-variant-three,\n borderColor: $white-variant-two,\n ),\n dark:(\n oddRowBackground: rgba(255,255,255,.03),\n borderColor: rgba(255,255,255,.09),\n )\n);\n\n.MuiTable-root{\n .MuiTableCell-head{\n @include themify($themes) {\n color: themed('color');\n }\n opacity:0.5; \n }\n .MuiTableRow-root{\n .MuiTableCell-body{\n @include themify($themes) {\n color: themed('color');\n border-color: themed('hrDarker');\n } \n }\n }\n}\n\n//bootstrap table\n.table-striped > tbody > tr:nth-of-type(odd){\n @include themify($table-theme) {\n background-color: themed('oddRowBackground');\n }\n \n}\n.table > tbody > tr > td{\n @include themify($table-theme) {\n border-color: themed('borderColor');\n }\n}\n\n//btn\n.theme-dark{\n .btn-default{ \n color: #dedede;\n background-color: $dark-theme-bg-dark;\n border-color: #e6e6e624;\n\n &:hover, &.active{\n background-color: $primary-color;\n color: $white;\n }\n }\n}\n\n//purpose: changes TCA tables font-weight and size\ntable tr {\n td {\n font-weight: 200;\n font-size: 14px;\n vertical-align:middle;\n }\n th {\n font-weight: 400;\n font-size: 14px;\n border-bottom:none;\n }\n}\n\n.table > thead > tr > th {\n border-bottom:none;\n}", "\n$option-button-color: rgba(38, 183, 205, 0.3);\n$option-button-hover-color:rgba(38, 183, 205, 0.7);\n\n$multiSelect-theme:(\n light:(\n fontPlaceHolderSize: 15px,\n borderColor: hsl(0,0%,80%),\n colorPlaceholder: hsl(0,0%,50%),\n weightPlaceholder:400,\n menuBackground: $white,\n menuHoverBackground: #DEEBFF,\n optionBackground: $secondary-dark-blue-variant-one,\n optionButton: $option-button-color,\n optionButtonHover: $option-button-hover-color,\n optionButtonColor: $dark-color-full-opacity,\n disabledBackground: #fbebeb,\n disableSelect: #cfcccc,\n disabledText: rgba(0, 0, 0, 0.38),\n ),\n dark:(\n fontPlaceHolderSize: 13px,\n borderColor: $light-mode-border-color,\n colorPlaceholder: $light-mode-hover-border-color,\n\n weightPlaceholder:100,\n menuBackground :$dark-theme-bg-darker,\n menuHoverBackground: $grey-variant-color-one,\n \n optionBackground: $option-button-color,\n optionButton: $option-button-hover-color,\n optionButtonHover: rgba(38, 183, 205, 1),\n optionButtonColor: $white,\n disabledBackground: #fbebeb,\n disableSelect: $grey-color,\n disabledText: $light-mode-hover-border-color,\n )\n);\n\n.react-select-container {\n .react-select__control {\n @include themify($multiSelect-theme) {\n border-color: themed('borderColor');\n }\n\n min-height: 50px;\n background-color: transparent;\n\n &--is-focused {\n border-color: $primary-color;\n box-shadow: none;\n }\n\n .react-select__value-container {\n .react-select__placeholder {\n @include themify($multiSelect-theme) {\n color: themed('colorPlaceholder');\n font-weight: themed('weightPlaceholder');\n font-size: themed('fontPlaceHolderSize');\n }\n }\n\n .react-select__multi-value {\n @include themify($multiSelect-theme) {\n background-color: themed('optionBackground');\n }\n\n @include flex;\n @include flex-align-c;\n height: 27px;\n border-radius: 27px;\n\n .react-select__multi-value__label {\n @include themify($themes) {\n color: themed('color');\n }\n\n padding: 4px 10px;\n padding-right: 15px;\n font-size: 100%;\n font-family: Chivo;\n }\n\n .react-select__multi-value__remove {\n @include themify($multiSelect-theme) {\n background-color: themed('optionButton');\n color: themed('optionButtonColor');\n }\n\n @include transition(200ms);\n @include flex;\n @include flex-align-c;\n @include flex-justify-c;\n margin-right: 3px;\n border-radius: 50%;\n height: 22px;\n width: 22px;\n cursor: pointer;\n\n &:hover {\n @include themify($multiSelect-theme) {\n background-color: themed('optionButtonHover');\n }\n\n color: initial;\n }\n }\n }\n }\n\n .react-select__indicators {\n .react-select__indicator {\n font-size: 15px;\n padding: 14px;\n cursor: pointer;\n }\n\n .react-select__indicator-separator {\n @include themify($multiSelect-theme) {\n background-color: themed('borderColor');\n }\n }\n }\n }\n\n .react-select__menu {\n @include themify($multiSelect-theme) {\n background-color: themed('menuBackground');\n }\n\n z-index: 99;\n\n .react-select__menu-list {\n .react-select__option {\n &--is-focused {\n @include themify($multiSelect-theme) {\n background-color: themed('menuHoverBackground');\n }\n }\n }\n }\n }\n}\n.react-select-help{\n font-size:11px;\n opacity: 0.5;\n @include themify($themes) {\n color: themed('color');\n }\n}\n.outlined-select-form-control {\n min-width: 120px;\n\n .outlined-select-input {\n color: $grey-variant-color-two;\n height: 50px;\n\n .Mui-disabled {\n @include themify($themes) {\n background-color: themed('disabledBackground');\n }\n }\n }\n .Mui-disabled {\n @include themify($themes) {\n color: themed('disabledText');\n }\n }\n}\n\n.disable-select {\n @include themify($multiSelect-theme) {\n background: themed('disableSelect');\n }\n opacity: 0.2;\n}", "$panel-theme:(\n light:(\n demoColor: rgba(0,0,0,.06),\n ),\n dark:(\n demoColor: $dark-border-background,\n )\n);\n.lm-demo{\n position: relative;\n width: 100%;\n height: 100%;\n .demo-label{ \n @include themify($panel-theme) {\n color: themed('demoColor');\n }\n position: absolute;\n bottom: 0;\n left: 0;\n font-size: 45px;\n z-index: 10;\n text-transform: uppercase;\n font-weight: 600;\n padding: 0 0 0 6px;\n line-height: 34px;\n }\n};\n.lm-demo-summary {\n height: 350px;\n};\n.lm-demo-execution-type,\n.lm-demo-order-imbalances {\n height: 300px;\n}", "//loading\n//\n//usage:\n//